build: output files to dir

src/pages/playground/components/ground-left.tsx

@@ -16,14 +16,21 @@ import ViewCodeModal from './view-code-modal';
 interface MessageProps {
   parameters: any;
 }
+
+interface MessageItemProps {
+  role: string;
+  content: string;
+  uid: number;
+}
+
 const MessageList: React.FC<MessageProps> = (props) => {
   const { parameters } = props;
-  const [messageList, setMessageList] = useState<
-    { role: string; content: string }[]
-  >([
+  const messageId = useRef<number>(0);
+  const [messageList, setMessageList] = useState<MessageItemProps[]>([
     {
       role: 'user',
-      content: ''
+      content: '',
+      uid: messageId.current
     }
   ]);
 
@@ -37,11 +44,17 @@ const MessageList: React.FC<MessageProps> = (props) => {
   const handleSystemMessageChange = (e: any) => {
     setSystemMessage(e.target.value);
   };
+
+  const setMessageId = () => {
+    messageId.current = messageId.current + 1;
+  };
   const handleNewMessage = () => {
     messageList.push({
       role: 'user',
-      content: ''
+      content: '',
+      uid: messageId.current + 1
     });
+    setMessageId();
     setMessageList([...messageList]);
     setActiveIndex(messageList.length - 1);
   };
@@ -71,9 +84,11 @@ const MessageList: React.FC<MessageProps> = (props) => {
         ...messageList,
         {
           role: Roles.Assistant,
-          content: assistant.content
+          content: assistant.content,
+          uid: messageId.current + 1
         }
       ]);
+      setMessageId();
       setLoading(false);
     } catch (error) {
       setLoading(false);
@@ -101,10 +116,7 @@ const MessageList: React.FC<MessageProps> = (props) => {
     setMessageList([...messageList]);
   };
 
-  const handleUpdateMessage = (
-    index: number,
-    message: { role: string; content: string }
-  ) => {
+  const handleUpdateMessage = (index: number, message: MessageItemProps) => {
     messageList[index] = message;
     console.log('updatemessage========', index, message);
     setMessageList([...messageList]);
@@ -143,12 +155,12 @@ const MessageList: React.FC<MessageProps> = (props) => {
           {messageList.map((item, index) => {
             return (
               <MessageItem
-                key={index}
+                key={item.uid}
                 isFocus={index === activeIndex}
                 islast={index === messageList.length - 1}
                 loading={loading}
                 onDelete={() => handleDelete(index)}
-                updateMessage={(message: { role: string; content: string }) =>
+                updateMessage={(message: MessageItemProps) =>
                   handleUpdateMessage(index, message)
                 }
                 message={item}

src/pages/playground/components/message-item.tsx

@@ -4,18 +4,20 @@ import _ from 'lodash';
 import { memo, useEffect, useRef, useState } from 'react';
 import { Roles } from '../config';
 import '../style/message-item.less';
+interface MessageItemProps {
+  role: string;
+  content: string;
+  uid: number;
+}
 
 const MessageItem: React.FC<{
-  message: {
-    role: string;
-    content: string;
-  };
+  message: MessageItemProps;
   loading?: boolean;
   islast?: boolean;
-  updateMessage: (message: { role: string; content: string }) => void;
+  updateMessage: (message: MessageItemProps) => void;
   isFocus: boolean;
   onDelete: () => void;
-}> = ({ message, isFocus, onDelete, updateMessage, loading, islast }) => {
+}> = ({ message, isFocus, onDelete, updateMessage }) => {
   const [roleType, setRoleType] = useState(message.role);
   const [isTyping, setIsTyping] = useState(false);
   const [messageContent, setMessageContent] = useState(message.content);
@@ -51,7 +53,11 @@ const MessageItem: React.FC<{
 
   useEffect(() => {
     if (!isAnimating && !isInitialRender.current) {
-      updateMessage({ role: roleType, content: messageContent });
+      updateMessage({
+        role: roleType,
+        content: messageContent,
+        uid: message.uid
+      });
     } else {
       isInitialRender.current = false;
     }