From d1eb6ee29bf89f6f0e15c22be71e7c44ac0bd7cf Mon Sep 17 00:00:00 2001
From: Mckay Wrigley <mckaywrigley@gmail.com>
Date: Thu, 13 Apr 2023 05:01:27 -0600
Subject: [PATCH] delete message (#531)

* feat: delete single message

* improve plugin hotkey support (#426)

* feat: delete single message

* remove logs

* remove logs

---------

Co-authored-by: Ryland <rylandl@qq.com>
Co-authored-by: Dornfeld Capital <75278543+dornfeld-capital@users.noreply.github.com>
Co-authored-by: L.Ryland <41134883+L-Ryland@users.noreply.github.com>
---
 .gitignore                      |  3 +-
 components/Chat/ChatMessage.tsx | 67 +++++++++++++++++++++++++++------
 2 files changed, 57 insertions(+), 13 deletions(-)

diff --git a/.gitignore b/.gitignore
index a731251..5be3dc7 100644
--- a/.gitignore
+++ b/.gitignore
@@ -36,4 +36,5 @@ yarn-error.log*
 # typescript
 *.tsbuildinfo
 next-env.d.ts
-.idea
\ No newline at end of file
+.idea
+pnpm-lock.yaml
diff --git a/components/Chat/ChatMessage.tsx b/components/Chat/ChatMessage.tsx
index bf05825..cf490e3 100644
--- 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>
           ) : (