Refactor MessageAvatar component and update ChatStore

- Expanded MessageAvatar props to include avatarType, copyMessage, messageContexts, and deleteHash.
- Updated MessageAvatar to use new props instead of item prop.
- Updated MessageList to pass new props to MessageAvatar.
- Refactored deleteMessage function in ChatStore to accept messageHash instead of item.
- Updated setContexts function in InputStore to accept IChatContext array.

src/views/components/MessageAvatar/index.tsx

@@ -10,19 +10,33 @@ import { observer } from "mobx-react-lite";
 import { useMst } from "@/views/stores/RootStore";
 
 import { IMessage } from "@/views/stores/ChatStore";
+import { IChatContext } from "@/views/stores/InputStore";
 
 interface IProps {
-    item: IMessage,
+    key?: string,
+    item?: IMessage,
+    avatarType?: "user" | "bot" | "system",
+    copyMessage?: string,
+    messageContexts?: IChatContext[],
+    deleteHash?: string,
     showEdit?: boolean,
-    showDelete: boolean
+    showDelete?: boolean
 }
 
 const MessageAvatar = observer((props: IProps) => {
-    const { item, showEdit = false, showDelete = true } = props;
-    const { contexts, message, type, hash } = item;
+    const {
+        messageContexts = [],
+        copyMessage = "",
+        deleteHash = undefined,
+        avatarType = "user",
+        showEdit = false,
+        showDelete = false,
+        key
+    } = props;
     const { input, chat } = useMst();
     const [done, setDone] = React.useState(false);
     return (<Flex
+        key={key}
         m='10px 0 10px 0'
         gap="sm"
         justify="flex-start"
@@ -30,7 +44,7 @@ const MessageAvatar = observer((props: IProps) => {
         direction="row"
         wrap="wrap">
         {
-            type === 'bot'
+            avatarType === 'bot'
                 ? <Avatar
                     color="indigo"
                     size={25}
@@ -42,8 +56,8 @@ const MessageAvatar = observer((props: IProps) => {
                     radius="xl"
                     src={SvgAvatarUser} />
         }
-        <Text weight='bold'>{type === 'bot' ? 'DevChat' : 'User'}</Text>
-        {type === 'user'
+        <Text weight='bold'>{avatarType === 'bot' ? 'DevChat' : 'User'}</Text>
+        {avatarType === 'user'
             ? <Flex
                 gap="xs"
                 justify="flex-end"
@@ -54,8 +68,8 @@ const MessageAvatar = observer((props: IProps) => {
                 <Tooltip sx={{ padding: '3px', fontSize: 'var(--vscode-editor-font-size)' }} label={done ? 'Refilled' : 'Refill prompt'} withArrow position="left" color="gray">
                     <ActionIcon size='sm'
                         onClick={() => {
-                            input.setValue(message);
-                            input.setContexts(contexts);
+                            input.setValue(copyMessage);
+                            input.setContexts(messageContexts);
                             setDone(true);
                             setTimeout(() => { setDone(false); }, 2000);
                         }}>
@@ -70,11 +84,11 @@ const MessageAvatar = observer((props: IProps) => {
                         <IconEdit size="1.125rem" />
                     </ActionIcon>
                 </Tooltip >}
-                {showDelete && hash !== 'message' && <Tooltip sx={{ padding: '3px', fontSize: 'var(--vscode-editor-font-size)' }} label="Delete message" withArrow position="left" color="gray">
+                {showDelete && deleteHash !== 'message' && <Tooltip sx={{ padding: '3px', fontSize: 'var(--vscode-editor-font-size)' }} label="Delete message" withArrow position="left" color="gray">
                     <ActionIcon size='sm'
                         onClick={() => {
-                            if (item.hash) {
-                                chat.deleteMessage(item).then();
+                            if (deleteHash) {
+                                chat.deleteMessage(deleteHash).then();
                             } else {
                                 chat.popMessage();
                                 chat.popMessage();
@@ -84,7 +98,7 @@ const MessageAvatar = observer((props: IProps) => {
                     </ActionIcon>
                 </Tooltip >}
             </Flex >
-            : <CopyButton value={message} timeout={2000}>
+            : <CopyButton value={copyMessage} timeout={2000}>
                 {({ copied, copy }) => (
                     <Tooltip sx={{ padding: '3px', fontSize: 'var(--vscode-editor-font-size)' }} label={copied ? 'Copied' : 'Copy message'} withArrow position="left" color="gray">
                         <ActionIcon size='xs' color={copied ? 'teal' : 'gray'} onClick={copy} style={{ marginLeft: 'auto', marginRight: '10px' }}>

src/views/components/MessageList/index.tsx

@@ -14,7 +14,7 @@ const MessageList = observer((props: any) => {
 
     return (<>
         {chat.messages.map((item, index: number) => {
-            const { message: messageText, type: messageType, contexts } = item;
+            const { message: messageText, type: messageType, hash: messageHash, contexts } = item;
             // setMessage(messageText);
             return <Stack
                 spacing={0}
@@ -27,7 +27,10 @@ const MessageList = observer((props: any) => {
                 <MessageAvatar
                     key={`message-header-${index}`}
                     showDelete={index === chat.messages.length - 2}
-                    item={item} />
+                    deleteHash={messageHash}
+                    avatarType={messageType}
+                    copyMessage={messageText}
+                    messageContexts={contexts} />
                 <Container
                     key={`message-container-${index}`}
                     sx={{

src/views/stores/ChatStore.ts

@@ -39,11 +39,10 @@ export const fetchHistoryMessages = async (params) => {
     });
 };
 
-export const deleteMessage = async (item: IMessage) => {
-    const { hash } = item;
+export const deleteMessage = async (messageHash: string) => {
     return new Promise<{ hash: string }>((resolve, reject) => {
         try {
-            messageUtil.sendMessage({ command: 'deleteChatMessage', hash: hash });
+            messageUtil.sendMessage({ command: 'deleteChatMessage', hash: messageHash });
             messageUtil.registerHandler('deletedChatMessage', (message) => {
                 resolve({
                     hash: message.hash
@@ -203,8 +202,8 @@ export const ChatStore = types.model('Chat', {
                 self.isLastPage = true;
             }
         }),
-        deleteMessage: flow(function* (item: IMessage) {
-            const { hash } = yield deleteMessage(item);
+        deleteMessage: flow(function* (messageHash: string) {
+            const { hash } = yield deleteMessage(messageHash);
             const index = self.messages.findIndex((item: any) => item.hash === hash);
             if (index > -1) {
                 self.messages.splice(index);

src/views/stores/InputStore.ts

@@ -69,7 +69,7 @@ export const InputStore = types
         clearContexts() {
             self.contexts.clear();
         },
-        setContexts(contexts: IMessage['contexts']) {
+        setContexts(contexts: IChatContext[]) {
             self.contexts.clear();
             contexts?.forEach(context => {
                 self.contexts.push({ ...context });