Implement delete message functionality

- Added a new `deleteMessage` function in `chatSlice.ts` to handle message deletion.
- Modified `MessageContainer.tsx` and `MessageHeader.tsx` to pass the entire message item instead of individual properties.
- Updated the `showDelete` prop in `MessageContainer.tsx` to only show the delete icon for the second last message.
- Dispatch the `deleteMessage` action when the delete icon is clicked in `MessageHeader.tsx`.
- Updated the message structure in `chatSlice.ts` to include `date` and `hash` properties.
- Added a case for `deleteMessage.fulfilled` in `chatSlice.ts` to remove the deleted message from the state.

src/views/MessageContainer.tsx

@@ -105,9 +105,8 @@ const MessageContainer = (props: any) => {
             }}>
             <MessageHeader
                 key={`message-header-${index}`}
-                type={messageType}
+                showDelete={index === messages.length - 2}
-                message={messageText}
+                item={item} />
-                contexts={contexts} />
             <Container
                 key={`message-container-${index}`}
                 sx={{

src/views/MessageHeader.tsx

@@ -14,8 +14,13 @@ import {
     setValue,
 } from './inputSlice';
 
+import {
+    deleteMessage
+} from './chatSlice';
+
 const MessageHeader = (props: any) => {
-    const { type, message, contexts, showEdit = false, showDelete = true } = props;
+    const { item, showEdit = false, showDelete = true } = props;
+    const { contexts, message, type, hash } = item;
     const dispatch = useAppDispatch();
     const [done, setDone] = React.useState(false);
     return (<Flex
@@ -66,10 +71,10 @@ const MessageHeader = (props: any) => {
                         <IconEdit size="1.125rem" />
                     </ActionIcon>
                 </Tooltip >}
-                {showDelete && <Tooltip sx={{ padding: '3px', fontSize: 'var(--vscode-editor-font-size)' }} label="Delete message" withArrow position="left" color="gray">
+                {showDelete && hash && <Tooltip sx={{ padding: '3px', fontSize: 'var(--vscode-editor-font-size)' }} label="Delete message" withArrow position="left" color="gray">
                     <ActionIcon size='sm'
                         onClick={() => {
-
+                            dispatch(deleteMessage(item));
                         }}>
                         <IconTrash size="1.125rem" />
                     </ActionIcon>

src/views/chatSlice.ts

@@ -19,6 +19,23 @@ export const fetchHistoryMessages = createAsyncThunk<{ pageIndex: number, entrie
     });
 });
 
+export const deleteMessage = createAsyncThunk<{ hash }, { hash }>('chat/deleteMessage', async (params) => {
+    debugger
+    const { hash } = params;
+    return new Promise((resolve, reject) => {
+        try {
+            messageUtil.sendMessage({ command: 'deleteChatMessage', hash: hash });
+            messageUtil.registerHandler('deletedChatMessage', (rhash: any) => {
+                resolve({
+                    hash: rhash
+                });
+            });
+        } catch (e) {
+            reject(e);
+        }
+    });
+});
+
 export const chatSlice = createSlice({
     name: 'chat',
     initialState: {
@@ -110,8 +127,8 @@ export const chatSlice = createSlice({
                             const { hash, user, date, request, response, context } = item;
                             const contexts = context?.map(({ content, role }) => ({ context: JSON.parse(content) }));
                             return [
-                                { type: 'user', message: request, contexts: contexts },
+                                { type: 'user', message: request, contexts: contexts, date: date, hash: hash },
-                                { type: 'bot', message: response },
+                                { type: 'bot', message: response, date: date, hash: hash },
                             ];
                         })
                         .flat();
@@ -123,6 +140,13 @@ export const chatSlice = createSlice({
                 } else {
                     state.isLastPage = true;
                 }
+            })
+            .addCase(deleteMessage.fulfilled, (state, action) => {
+                const { hash } = action.payload;
+                const index = state.messages.findIndex((item: any) => item.hash === hash);
+                if (index > -1) {
+                    state.messages.splice(index);
+                }
             });
     }
 });