feat(chat): add Chat before type

Author: carolin913

src/chat-message/content/search-content.tsx

@@ -5,7 +5,7 @@ import { Component, OmiProps, signal, tag } from 'omi';
 
 import { getClassPrefix } from '../../_util/classname';
 import { TdChatContentProps } from '../../chatbot';
-import { MessageStatus, ReferenceItem } from '../../chatbot/core/type';
+import { ChatMessageStatus, ReferenceItem } from '../../chatbot/core/type';
 import { CollapseValue } from '../../collapse';
 
 import styles from '../style/chat-item.less';
@@ -18,7 +18,7 @@ type SearchContent = {
 };
 export type TdChatSearchContentProps = {
   content?: SearchContent;
-  status?: MessageStatus | ((currentStatus: MessageStatus | undefined) => MessageStatus);
+  status?: ChatMessageStatus | ((currentStatus: ChatMessageStatus | undefined) => ChatMessageStatus);
   onChange?: (value: CollapseValue) => void;
   handleSearchResultClick?: ({ event, content }: { event: MouseEvent; content: SearchContent }) => void;
   handleSearchItemClick?: ({ event, content }: { event: MouseEvent; content: ReferenceItem }) => void;

src/chat-message/content/thinking-content.tsx

@@ -8,7 +8,7 @@ import { Component, OmiProps, signal, tag } from 'omi';
 
 import { getClassPrefix } from '../../_util/classname';
 import { convertToLightDomNode } from '../../_util/lightDom';
-import type { MessageStatus, TdChatContentProps } from '../../chatbot';
+import type { ChatMessageStatus, TdChatContentProps } from '../../chatbot';
 import { CollapseValue } from '../../collapse';
 
 import styles from '../style/chat-item.less';
@@ -20,7 +20,7 @@ export type TdChatThinkContentProps = {
     text?: string;
     title?: string;
   };
-  status?: MessageStatus | ((currentStatus: MessageStatus | undefined) => MessageStatus);
+  status?: ChatMessageStatus | ((currentStatus: ChatMessageStatus | undefined) => ChatMessageStatus);
 } & TdChatContentProps['thinking'];
 
 export interface IRenderThinking extends TdChatThinkContentProps {
@@ -38,7 +38,7 @@ export const renderThinking = ({
   onChange,
 }: IRenderThinking) => {
   const defaultCollapsed = collapsed ? [] : [1];
-  const renderThinkingStatus = (s: MessageStatus) => {
+  const renderThinkingStatus = (s: ChatMessageStatus) => {
     if (s === 'complete' || s === 'stop')
       return convertToLightDomNode(<t-icon-check-circle class={`${className}__think__status--complete`} />);
     if (s === 'error')
@@ -73,7 +73,7 @@ export const renderThinking = ({
           </t-auto-scroll>
         )}
         <div slot="header" className={`${className}__think__header__content`}>
-          {status !== 'stop' && renderThinkingStatus(status as MessageStatus)}
+          {status !== 'stop' && renderThinkingStatus(status as ChatMessageStatus)}
           {status === 'stop' ? '思考已终止' : title}
         </div>
       </t-collapse-panel>

src/chat-sender/_example/custom.tsx

@@ -94,11 +94,11 @@ export default class CustomExample extends Component {
           onSend={this.onSend}
         >
           {this.renderPanel()}
-          <div slot="prefix" className="prefix" onClick={() => this.senderRef.current?.selectFile()}>
+          <div slot="input-prefix" className="prefix" onClick={() => this.senderRef.current?.selectFile()}>
             <t-icon-focus className="icon" />
           </div>
           <div slot="inner-header">我是innerHeader</div>
-          <div slot="footer-left">
+          <div slot="footer-prefix">
             <t-button
               onClick={() => {
                 this.panel.value = true;

src/chat-sender/chat-sender.tsx

@@ -227,7 +227,7 @@ export default class ChatSender extends Component<TdChatSenderProps> {
         <div className={`${className}__content`}>
           <slot name="inner-header"></slot>
           <div className={`${className}__textarea__wrapper`}>
-            <slot name="prefix"></slot>
+            <slot name="input-prefix"></slot>
             <t-textarea
               ref={this.inputRef}
               className={`${className}__textarea`}
@@ -248,7 +248,7 @@ export default class ChatSender extends Component<TdChatSenderProps> {
           </div>
           <div className={`${className}__footer`}>
             <div className={`${className}__footer__left`}>
-              <slot name="footer-left"></slot>
+              <slot name="footer-prefix"></slot>
             </div>
             <div className={`${className}__footer__right`}>
               <div className={`${className}__actions`}>

src/chatbot/README.md

@@ -72,7 +72,7 @@ spline: base
 |--------|------|
 | `sender-header` | 输入框头部内容 |
 | `sender-inner-header` | 输入框边框内头部内容 |
-| `sender-footer-left` | 输入框底部左侧内容 |
+| `sender-footer-prefix` | 输入框底部左侧内容 |
 | `sender-actions` | 输入框操作按钮 |
 | `[message-id]` | 特定消息ID的自定义内容 |
 
@@ -88,10 +88,10 @@ spline: base
 | name | `string` \| `TNode` | 作者名称或自定义渲染节点 |
 | avatar | `string` \| `TNode` | 头像URL或自定义渲染节点 |
 | datetime | `string` \| `TNode` | 时间显示或自定义渲染节点 |
-| role | `MessageRole` | 消息角色类型 |
+| role | `ChatMessageRole` | 消息角色类型 |
 | variant | `'base'` \| `'text'` \| `'outline'` | 消息气泡样式变体 |
 | placement | `'left'` \| `'right'` | 消息气泡位置 |
-| chatContentProps | `{[key in ContentType]?: {}}` | 可以针对不同内容类型进行定制化配置。ContentType类型有`text`、`markdown`、`search`、`thinking`、`suggestion`，|
+| chatContentProps | `{[key in ChatContentType]?: {}}` | 可以针对不同内容类型进行定制化配置。ContentType类型有`text`、`markdown`、`search`、`thinking`、`suggestion`，|
 | onMessageChange | `(e: CustomEvent<ChatMessagesData[]>) => void` | 消息更新时触发 |
 
 ### ChatServiceConfig属性
@@ -126,21 +126,21 @@ type ChatMessagesData = UserMessage | AIMessage | SystemMessage;
 
 ## 角色消息类型
 
-### 公共基础属性 (BaseMessage)
+### 公共基础属性 (ChatBaseMessage)
 
-所有消息类型都继承自 `BaseMessage`，包含以下公共属性：
+所有消息类型都继承自 `ChatBaseMessage`，包含以下公共属性：
 
 | 属性名 | 类型 | 说明 |
 |--------|------|------|
 | id | string | 消息唯一标识符 |
-| status | `MessageStatus` | 消息状态：'pending'(等待中)、'streaming'(流式传输中)、'complete'(完成)、'stop'(停止)、'error'(错误) |
+| status | `ChatMessageStatus` | 消息状态：'pending'(等待中)、'streaming'(流式传输中)、'complete'(完成)、'stop'(停止)、'error'(错误) |
 | datetime | string | 消息时间戳 (ISO 8601 格式) |
 | ext | any | 扩展数据，可存放自定义业务数据 |
 
 ### 1. SystemMessage (系统消息)
 
 ```typescript
-interface SystemMessage extends BaseMessage {
+interface SystemMessage extends ChatBaseMessage {
   role: 'system';  // 固定为'system'
   content: TextContent[];  // 仅支持纯文本内容
 }
@@ -149,7 +149,7 @@ interface SystemMessage extends BaseMessage {
 ### 2. UserMessage (用户消息)
 
 ```typescript
-interface UserMessage extends BaseMessage {
+interface UserMessage extends ChatBaseMessage {
   role: 'user';  // 固定为'user'
   content: UserMessageContent[];  // 消息内容数组
 }
@@ -162,7 +162,7 @@ interface UserMessage extends BaseMessage {
 ### 3. AIMessage (AI助手消息)
 
 ```typescript
-interface AIMessage extends BaseMessage {
+interface AIMessage extends ChatBaseMessage {
   role: 'assistant';  // 固定为'assistant'
   content: AIMessageContent[];  // 消息内容数组
   comment?: 'good' | 'bad';  // 用户反馈：'good'(点赞)、'bad'(点踩)
@@ -184,7 +184,7 @@ interface AIMessage extends BaseMessage {
 interface TextContent {
   type: 'text';  // 固定为'text'
   data: string;  // 文本内容
-  status?: MessageStatus;  // 内容状态
+  status?: ChatMessageStatus;  // 内容状态
   id?: string;  // 内容ID
 }
 ```
@@ -195,7 +195,7 @@ interface TextContent {
 interface AttachmentContent {
   type: 'attachment';  // 固定为'attachment'
   data: AttachmentItem[];  // 附件项数组
-  status?: MessageStatus;  // 内容状态
+  status?: ChatMessageStatus;  // 内容状态
   id?: string;  // 内容ID
 }
 

src/chatbot/_example/input.tsx

@@ -63,7 +63,7 @@ export default class ChatSender extends Component {
   };
 
   renderModel = () => (
-    <div className={`${className}__model`} slot="footer-left">
+    <div className={`${className}__model`} slot="footer-prefix">
       <t-dropdown
         options={[
           { value: 'hunyuan', content: 'HunYuan' },

src/chatbot/chat.tsx

@@ -353,7 +353,7 @@ export default class Chatbot extends Component<TdChatProps> implements TdChatbot
    * 渲染输入框插槽
    */
   private renderInputSlots = () => {
-    // sender-header、sender-footer-left、sender-actions、sender-sender
+    // sender-header、sender-footer-prefix、sender-actions、sender-sender
     const itemSlotNames = this.slotNames.filter((key) => key.includes('sender-'));
     return itemSlotNames.map((slotName) => {
       const str = slotName.replace(/^sender-/, '');

src/chatbot/core/store/message.ts

@@ -2,8 +2,8 @@ import {
   type AIMessage,
   type AIMessageContent,
   type ChatMessagesData,
+  ChatMessageStatus,
   type ChatMessageStore,
-  MessageStatus,
   UserMessage,
 } from '../type';
 import { isAIMessage, isUserMessage } from '../utils';
@@ -166,7 +166,7 @@ export class MessageStore extends ReactiveState<ChatMessageStore> {
     return userMessages.at(-1);
   }
 
-  private resolvedStatus(content: AIMessageContent, status: MessageStatus): MessageStatus {
+  private resolvedStatus(content: AIMessageContent, status: ChatMessageStatus): ChatMessageStatus {
     return typeof content.status === 'function' ? content.status(status) : content.status;
   }
 

src/chatbot/core/type.ts

@@ -1,7 +1,7 @@
-export type MessageRole = 'user' | 'assistant' | 'system';
-export type MessageStatus = 'pending' | 'streaming' | 'complete' | 'stop' | 'error';
-export type ChatStatus = 'idle' | MessageStatus;
-export type ContentType =
+export type ChatMessageRole = 'user' | 'assistant' | 'system';
+export type ChatMessageStatus = 'pending' | 'streaming' | 'complete' | 'stop' | 'error';
+export type ChatStatus = 'idle' | ChatMessageStatus;
+export type ChatContentType =
   | 'text'
   | 'markdown'
   | 'search'
@@ -17,7 +17,7 @@ export type AttachmentType = 'image' | 'video' | 'audio' | 'pdf' | 'doc' | 'ppt'
 export interface ChatBaseContent<T extends string, TData> {
   type: T;
   data: TData;
-  status?: MessageStatus | ((currentStatus: MessageStatus | undefined) => MessageStatus);
+  status?: ChatMessageStatus | ((currentStatus: ChatMessageStatus | undefined) => ChatMessageStatus);
   id?: string;
 }
 
@@ -86,9 +86,9 @@ export type ThinkingContent = ChatBaseContent<
 // 消息主体
 // 基础消息结构
 
-export interface BaseMessage {
+export interface ChatBaseMessage {
   id: string;
-  status?: MessageStatus;
+  status?: ChatMessageStatus;
   datetime?: string;
   ext?: any;
 }
@@ -118,21 +118,21 @@ export type AIContentType = keyof AIContentTypeMap;
 export type AIMessageContent = AIContentTypeMap[AIContentType];
 export type UserMessageContent = TextContent | AttachmentContent;
 
-export interface UserMessage extends BaseMessage {
+export interface UserMessage extends ChatBaseMessage {
   role: 'user';
   content: UserMessageContent[];
 }
 
 export type ChatComment = 'good' | 'bad' | '';
 
-export interface AIMessage extends BaseMessage {
+export interface AIMessage extends ChatBaseMessage {
   role: 'assistant';
   content?: AIMessageContent[];
   /** 点赞点踩 */
   comment?: ChatComment;
 }
 
-export interface SystemMessage extends BaseMessage {
+export interface SystemMessage extends ChatBaseMessage {
   role: 'system';
   content: TextContent[];
 }

src/chatbot/type.ts

@@ -5,10 +5,10 @@ import { type TdChatSenderProps } from '../chat-sender';
 import type { StyledProps, TNode } from '../common';
 import type {
   AIMessageContent,
+  ChatContentType,
   ChatRequestParams,
   ChatServiceConfigSetter,
   ChatStatus,
-  ContentType,
 } from './core/type';
 import type { ChatMessagesData } from './core/type';
 
@@ -24,7 +24,7 @@ export type TdChatContentProps = {
   thinking?: TdChatContentThinkProps;
   suggestion?: TdChatContentSuggestionProps;
   [key: string]: any; // 处理其他ContentType情况
-} & Partial<Record<Exclude<ContentType, 'markdown' | 'search' | 'thinking' | 'suggestion'>, any>>;
+} & Partial<Record<Exclude<ChatContentType, 'markdown' | 'search' | 'thinking' | 'suggestion'>, any>>;
 
 export interface TdChatItemProps {
   /**