From 2ffe2a98b808ae2d76c05eca363b391095087828 Mon Sep 17 00:00:00 2001
From: GOWxx <sunbowen523@gmail.com>
Date: Fri, 31 Mar 2023 22:55:49 +0800
Subject: [PATCH] feat: Add button to remove messages and responses

---
 app/components/home.module.scss | 17 ++++++++-
 app/components/home.tsx         | 66 ++++++++++++++++++++-------------
 app/locales/cn.ts               |  1 +
 app/locales/en.ts               |  1 +
 app/locales/tw.ts               |  1 +
 app/store/app.ts                | 10 +++++
 6 files changed, 69 insertions(+), 27 deletions(-)

diff --git a/app/components/home.module.scss b/app/components/home.module.scss
index cef1662b5..d59584ba6 100644
--- a/app/components/home.module.scss
+++ b/app/components/home.module.scss
@@ -324,8 +324,21 @@
   }
 }
 
-.chat-message-user > .chat-message-container > .chat-message-item {
-  background-color: var(--second);
+.chat-message-user > .chat-message-container {
+  .chat-message-top-actions {
+    flex-direction: row;
+    right: unset;
+    left: 20px;
+  }
+  &:hover {
+    .chat-message-top-actions {
+      left: 10px;
+    }
+  }
+
+  & > .chat-message-item {
+    background-color: var(--second);
+  }
 }
 
 .chat-message-actions {
diff --git a/app/components/home.tsx b/app/components/home.tsx
index 2f09aa273..a9e1cde36 100644
--- a/app/components/home.tsx
+++ b/app/components/home.tsx
@@ -274,6 +274,10 @@ export function Chat(props: {
     }
   };
 
+  const onMessageDelete = (messageIndex: number) => {
+    chatStore.removeMessage(sessionIndex, messageIndex);
+  };
+
   const onResend = (botIndex: number) => {
     // find last user input message and resend
     for (let i = botIndex; i >= 0; i -= 1) {
@@ -418,33 +422,45 @@ export function Chat(props: {
                   </div>
                 )}
                 <div className={styles["chat-message-item"]}>
-                  {!isUser &&
-                    !(message.preview || message.content.length === 0) && (
-                      <div className={styles["chat-message-top-actions"]}>
-                        {message.streaming ? (
-                          <div
-                            className={styles["chat-message-top-action"]}
-                            onClick={() => onUserStop(i)}
-                          >
-                            {Locale.Chat.Actions.Stop}
-                          </div>
-                        ) : (
-                          <div
-                            className={styles["chat-message-top-action"]}
-                            onClick={() => onResend(i)}
-                          >
-                            {Locale.Chat.Actions.Retry}
-                          </div>
-                        )}
+                  {!isUser
+                    ? !(message.preview || message.content.length === 0) && (
+                        <div className={styles["chat-message-top-actions"]}>
+                          {message.streaming ? (
+                            <div
+                              className={styles["chat-message-top-action"]}
+                              onClick={() => onUserStop(i)}
+                            >
+                              {Locale.Chat.Actions.Stop}
+                            </div>
+                          ) : (
+                            <div
+                              className={styles["chat-message-top-action"]}
+                              onClick={() => onResend(i)}
+                            >
+                              {Locale.Chat.Actions.Retry}
+                            </div>
+                          )}
 
-                        <div
-                          className={styles["chat-message-top-action"]}
-                          onClick={() => copyToClipboard(message.content)}
-                        >
-                          {Locale.Chat.Actions.Copy}
+                          <div
+                            className={styles["chat-message-top-action"]}
+                            onClick={() => copyToClipboard(message.content)}
+                          >
+                            {Locale.Chat.Actions.Copy}
+                          </div>
                         </div>
-                      </div>
-                    )}
+                      )
+                    : !(message.preview || message.content.length === 0) && (
+                        <div className={styles["chat-message-top-actions"]}>
+                          {!message.streaming && (
+                            <div
+                              className={styles["chat-message-top-action"]}
+                              onClick={(e) => onMessageDelete(i)}
+                            >
+                              {Locale.Chat.Actions.Delete}
+                            </div>
+                          )}
+                        </div>
+                      )}
                   {(message.preview || message.content.length === 0) &&
                   !isUser ? (
                     <LoadingIcon />
diff --git a/app/locales/cn.ts b/app/locales/cn.ts
index 239da23fa..bc7c836b5 100644
--- a/app/locales/cn.ts
+++ b/app/locales/cn.ts
@@ -17,6 +17,7 @@ const cn = {
       Copy: "复制",
       Stop: "停止",
       Retry: "重试",
+      Delete: "删除",
     },
     Rename: "重命名对话",
     Typing: "正在输入…",
diff --git a/app/locales/en.ts b/app/locales/en.ts
index 296992435..e238be3a8 100644
--- a/app/locales/en.ts
+++ b/app/locales/en.ts
@@ -19,6 +19,7 @@ const en: LocaleType = {
       Copy: "Copy",
       Stop: "Stop",
       Retry: "Retry",
+      Delete: "Delete",
     },
     Rename: "Rename Chat",
     Typing: "Typing…",
diff --git a/app/locales/tw.ts b/app/locales/tw.ts
index e63c57a6e..2035e09c1 100644
--- a/app/locales/tw.ts
+++ b/app/locales/tw.ts
@@ -18,6 +18,7 @@ const tw: LocaleType = {
       Copy: "複製",
       Stop: "停止",
       Retry: "重試",
+      Delete: "刪除",
     },
     Rename: "重命名對話",
     Typing: "正在輸入…",
diff --git a/app/store/app.ts b/app/store/app.ts
index 6ab3229ac..5e982c53a 100644
--- a/app/store/app.ts
+++ b/app/store/app.ts
@@ -194,6 +194,7 @@ interface ChatStore {
   summarizeSession: () => void;
   updateStat: (message: Message) => void;
   updateCurrentSession: (updater: (session: ChatSession) => void) => void;
+  removeMessage: (sessionIndex: number, messageIndex: number) => void;
   updateMessage: (
     sessionIndex: number,
     messageIndex: number,
@@ -384,6 +385,15 @@ export const useChatStore = create<ChatStore>()(
         return recentMessages;
       },
 
+      removeMessage(sessionIndex: number, messageIndex: number) {
+        const sessions = get().sessions;
+        const session = sessions.at(sessionIndex);
+        const messages = session?.messages;
+        // remove user's message and bot's response
+        messages?.splice(messageIndex, 2);
+        set(() => ({ sessions }));
+      },
+
       updateMessage(
         sessionIndex: number,
         messageIndex: number,