delete message (mckaywrigley#531)

* feat: delete single message * improve plugin hotkey support (mckaywrigley#426) * feat: delete single message * remove logs * remove logs --------- Co-authored-by: Ryland <[email protected]> Co-authored-by: Dornfeld Capital <[email protected]> Co-authored-by: L.Ryland <[email protected]>
vizar1 · Apr 13, 2023 · d1eb6ee · d1eb6ee
1 parent f61e91d
commit d1eb6ee
Show file tree

Hide file tree

Showing 2 changed files with 57 additions and 13 deletions.
diff --git a/.gitignore b/.gitignore
@@ -36,4 +36,5 @@ yarn-error.log*
 # typescript
 *.tsbuildinfo
 next-env.d.ts
-.idea
+.idea
+pnpm-lock.yaml
diff --git a/components/Chat/ChatMessage.tsx b/components/Chat/ChatMessage.tsx
@@ -3,6 +3,7 @@ import {
   IconCopy,
   IconEdit,
   IconRobot,
+  IconTrash,
   IconUser,
 } from '@tabler/icons-react';
 import { FC, memo, useContext, useEffect, useRef, useState } from 'react';
@@ -31,7 +32,7 @@ export const ChatMessage: FC<Props> = memo(({ message, messageIndex }) => {
   const { t } = useTranslation('chat');
 
   const {
-    state: { selectedConversation, conversations },
+    state: { selectedConversation, conversations, currentMessage },
     dispatch: homeDispatch,
   } = useContext(HomeContext);
 
@@ -86,6 +87,35 @@ export const ChatMessage: FC<Props> = memo(({ message, messageIndex }) => {
     setIsEditing(false);
   };
 
+  const handleDeleteMessage = () => {
+    if (!selectedConversation) return;
+
+    const { messages } = selectedConversation;
+    const findIndex = messages.findIndex((elm) => elm === message);
+
+    if (findIndex < 0) return;
+
+    if (
+      findIndex < messages.length - 1 &&
+      messages[findIndex + 1].role === 'assistant'
+    ) {
+      messages.splice(findIndex, 2);
+    } else {
+      messages.splice(findIndex, 1);
+    }
+    const updatedConversation = {
+      ...selectedConversation,
+      messages,
+    };
+
+    const { single, all } = updateConversation(
+      updatedConversation,
+      conversations,
+    );
+    homeDispatch({ field: 'selectedConversation', value: single });
+    homeDispatch({ field: 'conversations', value: all });
+  };
+
   const handlePressEnter = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
     if (e.key === 'Enter' && !isTyping && !e.shiftKey) {
       e.preventDefault();
@@ -178,17 +208,30 @@ export const ChatMessage: FC<Props> = memo(({ message, messageIndex }) => {
               )}
 
               {(window.innerWidth < 640 || !isEditing) && (
-                <button
-                  className={`absolute translate-x-[1000px] text-gray-500 hover:text-gray-700 focus:translate-x-0 group-hover:translate-x-0 dark:text-gray-400 dark:hover:text-gray-300 ${
-                    window.innerWidth < 640
-                      ? 'bottom-1 right-3'
-                      : 'right-0 top-[26px]'
-                  }
-                    `}
-                  onClick={toggleEditing}
-                >
-                  <IconEdit size={20} />
-                </button>
+                <>
+                  <button
+                    className={`absolute translate-x-[1000px] text-gray-500 hover:text-gray-700 focus:translate-x-0 group-hover:translate-x-0 dark:text-gray-400 dark:hover:text-gray-300 ${
+                      window.innerWidth < 640
+                        ? 'bottom-1 right-3'
+                        : 'right-6 top-[26px]'
+                    }
+                      `}
+                    onClick={toggleEditing}
+                  >
+                    <IconEdit size={20} />
+                  </button>
+                  <button
+                    className={`absolute translate-x-[1000px] text-gray-500 hover:text-gray-700 focus:translate-x-0 group-hover:translate-x-0 dark:text-gray-400 dark:hover:text-gray-300 ${
+                      window.innerWidth < 640
+                        ? 'bottom-1 right-3'
+                        : 'right-0 top-[26px]'
+                    }
+                      `}
+                    onClick={handleDeleteMessage}
+                  >
+                    <IconTrash size={20} />
+                  </button>
+                </>
               )}
             </div>
           ) : (