🐛 fix: fix model tag missing (lobehub#481)

* 🐛 fix: fix the assistant extra don't show tag

* ✅ test: add test for the Assistant Extra Message

package.json

@@ -128,8 +128,8 @@
     "@ducanh2912/next-pwa": "^9.7.2",
     "@lobehub/i18n-cli": "latest",
     "@lobehub/lint": "latest",
-    "@next/bundle-analyzer": "14.0.3",
-    "@next/eslint-plugin-next": "14.0.3",
+    "@next/bundle-analyzer": "^14.0.3",
+    "@next/eslint-plugin-next": "^14.0.3",
     "@testing-library/jest-dom": "^6",
     "@testing-library/react": "^14",
     "@types/chroma-js": "^2",

src/app/chat/features/Conversation/ChatList/Extras/Assistant.test.tsx

@@ -0,0 +1,86 @@
+import { render, screen } from '@testing-library/react';
+import { Mock, beforeEach, describe, expect, it, vi } from 'vitest';
+
+import { useSessionStore } from '@/store/session';
+import { agentSelectors } from '@/store/session/selectors';
+import { ChatMessage } from '@/types/chatMessage';
+
+import { AssistantMessageExtra } from './Assistant';
+
+// Mock TTS and Translate components
+vi.mock('./TTS', () => ({
+  default: vi.fn(() => <div>TTS Component</div>),
+}));
+vi.mock('./Translate', () => ({
+  default: vi.fn(() => <div>Translate Component</div>),
+}));
+
+// Mock dependencies
+vi.mock('@/store/session', () => ({
+  useSessionStore: vi.fn(),
+}));
+vi.mock('@/store/session/selectors', () => ({
+  agentSelectors: {
+    currentAgentModel: vi.fn(),
+  },
+}));
+
+const mockData: ChatMessage = {
+  content: 'test-content',
+  createAt: 0,
+  id: 'abc',
+  meta: { avatar: '', backgroundColor: '', description: '', tags: [], title: '' },
+  role: 'assistant',
+  updateAt: 0,
+};
+
+describe('AssistantMessageExtra', () => {
+  beforeEach(() => {
+    // Set default mock return values
+    (useSessionStore as unknown as Mock).mockImplementation(() => ({
+      chatLoadingId: null,
+    }));
+    (agentSelectors.currentAgentModel as Mock).mockReturnValue('defaultModel');
+  });
+
+  it('should not render content if extra is undefined', async () => {
+    render(<AssistantMessageExtra {...mockData} />);
+    expect(screen.queryByText('defaultModel')).toBeNull();
+    expect(screen.queryByText('TTS Component')).toBeNull();
+    expect(screen.queryByText('Translate Component')).toBeNull();
+  });
+
+  it('should not render content if extra is defined but does not contain fromModel, tts, or translate', async () => {
+    render(<AssistantMessageExtra {...mockData} />);
+    expect(screen.queryByText('defaultModel')).toBeNull();
+    expect(screen.queryByText('TTS Component')).toBeNull();
+    expect(screen.queryByText('Translate Component')).toBeNull();
+  });
+
+  it('should render Tag component if extra.fromModel exists and does not match the current model', async () => {
+    render(<AssistantMessageExtra {...mockData} extra={{ fromModel: 'otherModel' }} />);
+
+    expect(screen.getByText('otherModel')).toBeInTheDocument();
+  });
+
+  it('should render TTS component if extra.fromModel and extra.tts coexist', async () => {
+    render(<AssistantMessageExtra {...mockData} extra={{ fromModel: 'otherModel', tts: {} }} />);
+
+    expect(screen.getByText('otherModel')).toBeInTheDocument();
+    expect(screen.getByText('TTS Component')).toBeInTheDocument();
+  });
+
+  it('should render Translate component if extra.translate exists', async () => {
+    render(<AssistantMessageExtra {...mockData} extra={{ translate: {} }} />);
+    expect(screen.getByText('Translate Component')).toBeInTheDocument();
+  });
+
+  it('should receive the correct loading attribute if loading is true for TTS and Translate components', async () => {
+    (useSessionStore as unknown as Mock).mockImplementation(() => ({
+      chatLoadingId: 'test-id',
+    }));
+    render(<AssistantMessageExtra {...mockData} extra={{ translate: {}, tts: {} }} />);
+    expect(screen.getByText('TTS Component')).toBeInTheDocument();
+    expect(screen.getByText('Translate Component')).toBeInTheDocument();
+  });
+});

src/app/chat/features/Conversation/ChatList/Extras/Assistant.tsx

@@ -17,7 +17,11 @@ export const AssistantMessageExtra: RenderMessageExtra = memo<ChatMessage>(
     const loading = useSessionStore((s) => s.chatLoadingId === id);
 
     const showModelTag = extra?.fromModel && model !== extra?.fromModel;
-    const showExtra = extra?.showModelTag || extra?.translate || extra?.tts;
+    const showTranslate = !!extra?.translate;
+    const showTTS = !!extra?.tts;
+
+    const showExtra = showModelTag || showTranslate || showTTS;
+
     if (!showExtra) return;
 
     return (

tests/setup.ts

@@ -1,8 +1,13 @@
+/* eslint-disable import/newline-after-import,import/first */
 import '@testing-library/jest-dom';
-// remove antd hash on test
 import { theme } from 'antd';
 // mock indexedDB to test with dexie
 // refs: https://github.com/dumbmatter/fakeIndexedDB#dexie-and-other-indexeddb-api-wrappers
 import 'fake-indexeddb/auto';
+import React from 'react';
 
+// remove antd hash on test
 theme.defaultConfig.hashed = false;
+
+// 将 React 设置为全局变量，这样就不需要在每个测试文件中导入它了
+global.React = React;