fix(chatbot): fix item render content key (#259)

Author: LzhengH

src/chat-message/chat-item.tsx

@@ -181,15 +181,23 @@ export default class ChatItem extends Component<ChatMessageProps> {
       const elementKey = `${id}-${index}`;
       // 系统消息渲染
       if (role === 'system') {
-        return <div className={`${getClassPrefix()}-chat__text--${role}`}>{content.data}</div>;
+        return (
+          <div key={elementKey} className={`${getClassPrefix()}-chat__text--${role}`}>
+            {content.data}
+          </div>
+        );
       }
       // 用户消息渲染
       if (role === 'user') {
         if (isAttachmentContent(content)) {
-          return renderAttachments({ content: content.data }, this);
+          return renderAttachments({ key: elementKey, content: content.data }, this);
         }
         if (isTextContent(content) || isMarkdownContent(content)) {
-          return <div className={`${getClassPrefix()}-chat__text--${role}`}>{content.data}</div>;
+          return (
+            <div key={elementKey} className={`${getClassPrefix()}-chat__text--${role}`}>
+              {content.data}
+            </div>
+          );
         }
         return <slot key={elementKey} name={`${content?.slotName || `${content.type}-${index}`}`}></slot>;
       }
@@ -198,6 +206,7 @@ export default class ChatItem extends Component<ChatMessageProps> {
       if (role === 'assistant') {
         if (isSearchContent(content)) {
           return renderSearch({
+            key: elementKey,
             content: content.data,
             status: content.status,
             useCollapse: chatContentProps?.search?.useCollapse,
@@ -208,13 +217,15 @@ export default class ChatItem extends Component<ChatMessageProps> {
 
         if (isSuggestionContent(content)) {
           return renderSuggestion({
+            key: elementKey,
             content: content.data,
             handlePromptClick: (data) => this.handleClickAction('suggestion', data),
           });
         }
         if (isThinkingContent(content)) {
           // 思考
           return renderThinking({
+            key: elementKey,
             content: content.data,
             status: content.status,
             animation,

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

@@ -11,13 +11,14 @@ import styles from '../style/chat-item.less';
 const className = `${getClassPrefix()}-chat__item`;
 
 export type TdChatAttachmentContentProps = {
+  key?: string;
   content?: AttachmentItem[];
   onFileClick?: (event: CustomEvent<TdAttachmentItem>) => void;
 };
 
 // 纯函数渲染器
-export const renderAttachments = ({ content }: TdChatAttachmentContentProps, self: any) => (
-  <div className={`${className}__attachments`}>
+export const renderAttachments = ({ key, content }: TdChatAttachmentContentProps, self: any) => (
+  <div key={key} className={`${className}__attachments`}>
     <t-attachments
       items={content}
       removable={false}

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

@@ -17,6 +17,7 @@ type SearchContent = {
   references?: ReferenceItem[];
 };
 export type TdChatSearchContentProps = {
+  key?: string;
   content?: SearchContent;
   status?: ChatMessageStatus | ((currentStatus: ChatMessageStatus | undefined) => ChatMessageStatus);
   onChange?: (value: CollapseValue) => void;
@@ -26,6 +27,7 @@ export type TdChatSearchContentProps = {
 
 // 纯函数渲染器
 export const renderSearch = ({
+  key,
   content,
   status,
   useCollapse = true,
@@ -51,7 +53,7 @@ export const renderSearch = ({
   );
 
   return (
-    <div className={`${className}__search__wrapper`}>
+    <div key={key} className={`${className}__search__wrapper`}>
       {useCollapse ? (
         <t-collapse
           className={`${className}__search`}

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

@@ -11,13 +11,14 @@ import styles from '../style/chat-item.less';
 const className = `${getClassPrefix()}-chat__item`;
 
 export type TdChatSuggestionContentProps = {
+  key?: string;
   content?: SuggestionItem[];
   handlePromptClick?: ({ event, content }: { event: MouseEvent; content: SuggestionItem }) => void;
 };
 
 // 纯函数渲染器
-export const renderSuggestion = ({ content, handlePromptClick }: TdChatSuggestionContentProps) => (
-  <div className={`${className}__suggestion`}>
+export const renderSuggestion = ({ key, content, handlePromptClick }: TdChatSuggestionContentProps) => (
+  <div key={key} className={`${className}__suggestion`}>
     {content.map(
       (s, i) =>
         s?.title && (

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

@@ -17,6 +17,7 @@ import styles from '../style/chat-item.less';
 const className = `${getClassPrefix()}-chat__item`;
 
 type TdChatThinkBaseProps = {
+  key?: string;
   content?: {
     text?: string;
     title?: string;
@@ -35,6 +36,7 @@ export interface IRenderThinking extends TdChatThinkBaseProps {
 
 // 纯函数渲染器（无shadow root）
 export const renderThinking = ({
+  key,
   content,
   status,
   maxHeight,
@@ -58,7 +60,7 @@ export const renderThinking = ({
   return (
     <t-collapse
       // collapsed做key可在非受控更新时触发展开收起
-      key={onChange ? undefined : collapsed}
+      key={onChange ? key : `${collapsed}-${key}`}
       className={`${className}__think ${layoutClass}`}
       expandIconPlacement={'right'}
       value={onChange ? defaultCollapsed : undefined}