♻️ refactor: refactor chat item (#9599)

* wip

* refactor user message

* fix user messages

* refactor

* refactor user and actions

* update

* refactor chat item

* refactor

* revert

* fix tests

* update

* fix thread display

Author: arvinxx

package.json

@@ -301,7 +301,7 @@
     "@peculiar/webcrypto": "^1.5.0",
     "@prettier/sync": "^0.6.1",
     "@semantic-release/exec": "^6.0.3",
-    "@testing-library/jest-dom": "~6.9.0",
+    "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.0",
     "@testing-library/user-event": "^14.6.1",
     "@types/chroma-js": "^3.1.1",

packages/const/src/index.ts

@@ -5,6 +5,7 @@ export * from './desktop';
 export * from './guide';
 export * from './layoutTokens';
 export * from './message';
+export * from './meta';
 export * from './session';
 export * from './settings';
 export * from './trace';

packages/const/src/settings/index.ts

@@ -9,6 +9,7 @@ import { DEFAULT_TOOL_CONFIG } from './tool';
 import { DEFAULT_TTS_CONFIG } from './tts';
 
 export * from './agent';
+export * from './common';
 export * from './group';
 export * from './hotkey';
 export * from './llm';

packages/types/src/aiProvider.ts

@@ -1,7 +1,6 @@
+import { AiModelForSelect, EnabledAiModel, ModelSearchImplementType } from 'model-bank';
 import { z } from 'zod';
 
-import { AiModelForSelect, EnabledAiModel, ModelSearchImplementType } from '../../model-bank/src/types/aiModel';
-
 export type ResponseAnimationStyle = 'smooth' | 'fadeIn' | 'none';
 export type ResponseAnimation =
   | {

packages/types/src/discover/models.ts

@@ -1,5 +1,6 @@
-import { LobeDefaultAiModelListItem } from '../../../model-bank/src/types/aiModel';
-import { ModelProviderCard } from '@/types/llm';
+import { LobeDefaultAiModelListItem } from 'model-bank';
+
+import { ModelProviderCard } from '../llm';
 
 export enum ModelSorts {
   ContextWindowTokens = 'contextWindowTokens',

packages/types/src/discover/providers.ts

@@ -1,5 +1,6 @@
-import { LobeDefaultAiModelListItem } from '../../../model-bank/src/types/aiModel';
-import { ModelProviderCard } from '@/types/llm';
+import { LobeDefaultAiModelListItem } from 'model-bank';
+
+import { ModelProviderCard } from '../llm';
 
 export enum ProviderSorts {
   Default = 'default',

packages/types/src/message/chat.ts

@@ -46,9 +46,22 @@ export interface ChatMessageExtra {
   tts?: ChatTTS;
 }
 
+export interface AssistantContentBlock {
+  content: string;
+  fileList?: ChatFileItem[];
+  id: string;
+  imageList?: ChatImageItem[];
+  tools?: ChatToolPayload[];
+}
+
 export interface ChatMessage {
   // Group chat fields (alphabetically before other fields)
   agentId?: string | 'supervisor';
+  /**
+   * children messages for grouped display
+   * Used to group tool messages under their parent assistant message
+   */
+  children?: AssistantContentBlock[];
   chunksList?: ChatFileChunk[];
   content: string;
   createdAt: number;

src/app/[variants]/(main)/chat/(workspace)/@conversation/features/ChatList/ChatItem/index.tsx

@@ -1,8 +1,7 @@
 import { createStyles } from 'antd-style';
-import React, { memo, useMemo } from 'react';
+import React, { memo } from 'react';
 
 import { ChatItem } from '@/features/Conversation';
-import ActionsBar from '@/features/Conversation/components/ChatItem/ActionsBar';
 import { useAgentStore } from '@/store/agent';
 import { agentChatConfigSelectors } from '@/store/agent/selectors';
 import { useChatStore } from '@/store/chat';
@@ -64,11 +63,8 @@ const MainChatItem = memo<ThreadChatItemProps>(({ id, index }) => {
 
   const placement = displayMode === 'chat' && userRole === 'user' ? 'end' : 'start';
 
-  const actionBar = useMemo(() => <ActionsBar id={id} index={index} />, [id]);
-
   return (
     <ChatItem
-      actionBar={actionBar}
       className={showThread ? cx(styles.line, styles[placement]) : ''}
       enableHistoryDivider={enableHistoryDivider}
       endRender={

src/app/[variants]/(main)/chat/(workspace)/@conversation/features/ChatList/WelcomeChatItem/WelcomeMessage.tsx

@@ -4,7 +4,7 @@ import React, { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 
-import ChatItem from '@/features/ChatItem';
+import { ChatItem } from '@/features/ChatItem';
 import { useAgentStore } from '@/store/agent';
 import { agentChatConfigSelectors, agentSelectors } from '@/store/agent/selectors';
 import { useChatStore } from '@/store/chat';

src/app/[variants]/(main)/settings/provider/features/ModelList/CreateNewModelModal/Form.tsx

@@ -1,14 +1,13 @@
 import { Input } from '@lobehub/ui';
 import { Checkbox, Form, FormInstance, Select } from 'antd';
+import { AiModelType } from 'model-bank';
 import { memo, useEffect, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import MaxTokenSlider from '@/components/MaxTokenSlider';
 import { useIsMobile } from '@/hooks/useIsMobile';
 import { ChatModelCard } from '@/types/llm';
 
-import { AiModelType } from '../../../../../../../../../packages/model-bank/src/types/aiModel';
-
 interface ModelConfigFormProps {
   idEditable?: boolean;
   initialValues?: ChatModelCard;