From b0f2dec3c68fc6bde3e600abc08e0c749dce3d47 Mon Sep 17 00:00:00 2001
From: gray <gray.wen@outlook.com>
Date: Wed, 22 Jan 2025 14:25:41 +0800
Subject: [PATCH] add remove message done

---
 src/FE/apis/clientApis.ts                     |  5 ++
 src/FE/components/ChatMessage/ChatMessage.tsx | 10 ++--
 .../components/ChatMessage/DeleteAction.tsx   | 53 ++++++++++---------
 src/FE/components/ChatMessage/EditAction.tsx  |  6 +--
 .../ChatMessage/ResponseMessage.tsx           |  6 +--
 .../ChatMessage/ResponseMessageActions.tsx    | 22 ++++----
 src/FE/components/ChatMessage/UserMessage.tsx | 11 ++--
 src/FE/pages/home/_components/Chat/Chat.tsx   | 47 ++++++++--------
 8 files changed, 85 insertions(+), 75 deletions(-)

diff --git a/src/FE/apis/clientApis.ts b/src/FE/apis/clientApis.ts
index 9547a598..d17ff9f7 100644
--- a/src/FE/apis/clientApis.ts
+++ b/src/FE/apis/clientApis.ts
@@ -382,3 +382,8 @@ export const putResponseMessageEditInPlace = (
     body: params.content,
   });
 };
+
+export const deleteMessage = (messageId: string) => {
+  const fetchServer = useFetch();
+  return fetchServer.delete(`/api/messages/${messageId}?recursive=true`);
+};
diff --git a/src/FE/components/ChatMessage/ChatMessage.tsx b/src/FE/components/ChatMessage/ChatMessage.tsx
index eff790d3..e882686c 100644
--- a/src/FE/components/ChatMessage/ChatMessage.tsx
+++ b/src/FE/components/ChatMessage/ChatMessage.tsx
@@ -26,8 +26,7 @@ export interface Props {
     isCopy?: boolean,
   ) => void;
   onEditUserMessage?: (messageId: string, content: Content) => void;
-  onDeleteResponseMessage?: (messageId: string) => void;
-  onDeleteUserMessage?: (messageId: string) => void;
+  onDeleteMessage?: (messageId: string) => void;
 }
 
 export const ChatMessage: FC<Props> = memo(
@@ -43,8 +42,7 @@ export const ChatMessage: FC<Props> = memo(
     onReactionMessage,
     onEditResponseMessage,
     onEditUserMessage,
-    onDeleteResponseMessage,
-    onDeleteUserMessage,
+    onDeleteMessage,
   }) => {
     const hasMultipleSpan = selectedMessages.find((x) => x.length > 1);
     return (
@@ -81,7 +79,7 @@ export const ChatMessage: FC<Props> = memo(
                           onChangeMessage={onChangeChatLeafMessageId}
                           onEditAndSendMessage={onEditAndSendMessage}
                           onEditUserMessage={onEditUserMessage}
-                          onDeleteUserMessage={onDeleteUserMessage}
+                          onDeleteMessage={onDeleteMessage}
                         />
                       </div>
                     )}
@@ -119,7 +117,7 @@ export const ChatMessage: FC<Props> = memo(
                             onChangeChatLeafMessageId={
                               onChangeChatLeafMessageId
                             }
-                            onDeleteResponseMessage={onDeleteResponseMessage}
+                            onDeleteMessage={onDeleteMessage}
                           />
                         </div>
                       </div>
diff --git a/src/FE/components/ChatMessage/DeleteAction.tsx b/src/FE/components/ChatMessage/DeleteAction.tsx
index 22a303c7..8447aaa7 100644
--- a/src/FE/components/ChatMessage/DeleteAction.tsx
+++ b/src/FE/components/ChatMessage/DeleteAction.tsx
@@ -8,36 +8,41 @@ import { cn } from '@/lib/utils';
 
 interface Props {
   disabled?: boolean;
-  visible?: boolean;
+  isHoverVisible?: boolean;
+  hidden?: boolean;
   onDelete: () => void;
 }
 
 const DeleteAction = (props: Props) => {
-  const { onDelete, disabled, visible } = props;
+  const { onDelete, disabled, isHoverVisible, hidden } = props;
   const { t } = useTranslation();
 
-  return (
-    <Tips
-      className="h-[28px]"
-      trigger={
-        <Button
-          variant="ghost"
-          disabled={disabled}
-          className={cn(
-            visible ? 'visible' : 'invisible',
-            'p-1 m-0 h-auto group-hover:visible focus:visible',
-          )}
-          onClick={(e) => {
-            onDelete();
-            e.stopPropagation();
-          }}
-        >
-          <IconTrash />
-        </Button>
-      }
-      content={t('Delete message')!}
-    />
-  );
+  const Render = () => {
+    return (
+      <Tips
+        className="h-[28px]"
+        trigger={
+          <Button
+            variant="ghost"
+            disabled={disabled}
+            className={cn(
+              isHoverVisible ? 'invisible' : 'visible',
+              'p-1 m-0 h-auto group-hover:visible focus:visible',
+            )}
+            onClick={(e) => {
+              onDelete();
+              e.stopPropagation();
+            }}
+          >
+            <IconTrash />
+          </Button>
+        }
+        content={t('Delete message')!}
+      />
+    );
+  };
+
+  return <>{!hidden && Render()}</>;
 };
 
 export default DeleteAction;
diff --git a/src/FE/components/ChatMessage/EditAction.tsx b/src/FE/components/ChatMessage/EditAction.tsx
index 842d72ca..59384fb1 100644
--- a/src/FE/components/ChatMessage/EditAction.tsx
+++ b/src/FE/components/ChatMessage/EditAction.tsx
@@ -8,12 +8,12 @@ import { cn } from '@/lib/utils';
 
 interface Props {
   disabled?: boolean;
-  visible?: boolean;
+  isHoverVisible?: boolean;
   onToggleEditing: () => void;
 }
 
 const EditAction = (props: Props) => {
-  const { onToggleEditing, disabled, visible } = props;
+  const { onToggleEditing, disabled, isHoverVisible } = props;
   const { t } = useTranslation();
 
   return (
@@ -24,7 +24,7 @@ const EditAction = (props: Props) => {
           variant="ghost"
           disabled={disabled}
           className={cn(
-            visible ? 'visible' : 'invisible',
+            isHoverVisible ? 'invisible' : 'visible',
             'p-1 m-0 h-auto group-hover:visible focus:visible',
           )}
           onClick={(e) => {
diff --git a/src/FE/components/ChatMessage/ResponseMessage.tsx b/src/FE/components/ChatMessage/ResponseMessage.tsx
index 2c80af18..86da251a 100644
--- a/src/FE/components/ChatMessage/ResponseMessage.tsx
+++ b/src/FE/components/ChatMessage/ResponseMessage.tsx
@@ -38,7 +38,7 @@ interface Props {
     content: Content,
     isCopy?: boolean,
   ) => void;
-  onDeleteResponseMessage?: (messageId: string) => void;
+  onDeleteMessage?: (messageId: string) => void;
 }
 
 const ResponseMessage = (props: Props) => {
@@ -50,7 +50,7 @@ const ResponseMessage = (props: Props) => {
     onRegenerate,
     onReactionMessage,
     onEditResponseMessage,
-    onDeleteResponseMessage,
+    onDeleteMessage,
   } = props;
   const { t } = useTranslation();
 
@@ -234,7 +234,7 @@ const ResponseMessage = (props: Props) => {
         onRegenerate={(messageId: string, modelId: number) => {
           onRegenerate && onRegenerate(message.spanId!, messageId, modelId);
         }}
-        onDeleteResponseMessage={onDeleteResponseMessage}
+        onDeleteMessage={onDeleteMessage}
       />
     </>
   );
diff --git a/src/FE/components/ChatMessage/ResponseMessageActions.tsx b/src/FE/components/ChatMessage/ResponseMessageActions.tsx
index 6c714d66..11e10cba 100644
--- a/src/FE/components/ChatMessage/ResponseMessageActions.tsx
+++ b/src/FE/components/ChatMessage/ResponseMessageActions.tsx
@@ -41,7 +41,7 @@ interface Props {
   onChangeMessage?: (messageId: string) => void;
   onRegenerate?: (messageId: string, modelId: number) => void;
   onReactionMessage?: (type: ReactionMessageType, messageId: string) => void;
-  onDeleteResponseMessage?: (messageId: string) => void;
+  onDeleteMessage?: (messageId: string) => void;
 }
 
 const ResponseMessageActions = (props: Props) => {
@@ -54,7 +54,7 @@ const ResponseMessageActions = (props: Props) => {
     onChangeMessage,
     onRegenerate,
     onReactionMessage,
-    onDeleteResponseMessage,
+    onDeleteMessage,
   } = props;
 
   const { id: messageId, siblingIds, modelId, modelName, parentId } = message;
@@ -80,20 +80,20 @@ const ResponseMessageActions = (props: Props) => {
           />
           <div className="visible flex gap-0 items-center">
             <EditAction
-              visible
               onToggleEditing={() => {
                 onToggleEditingMessage && onToggleEditingMessage(messageId);
               }}
             />
+
             <CopyAction text={message.content.text} />
-            {/* {siblingIds.length > 1 && (
-              <DeleteAction
-                visible
-                onDelete={() => {
-                  onDeleteMessage && onDeleteMessage(messageId);
-                }}
-              />
-            )} */}
+
+            <DeleteAction
+              hidden={siblingIds.length <= 1}
+              onDelete={() => {
+                onDeleteMessage && onDeleteMessage(messageId);
+              }}
+            />
+
             <GenerateInformationAction
               hidden={message.edited}
               message={message}
diff --git a/src/FE/components/ChatMessage/UserMessage.tsx b/src/FE/components/ChatMessage/UserMessage.tsx
index 7d21e2e1..67e613ce 100644
--- a/src/FE/components/ChatMessage/UserMessage.tsx
+++ b/src/FE/components/ChatMessage/UserMessage.tsx
@@ -32,7 +32,7 @@ interface Props {
   onChangeMessage?: (messageId: string) => void;
   onEditAndSendMessage?: (editedMessage: Message, parentId?: string) => void;
   onEditUserMessage?: (messageId: string, content: Content) => void;
-  onDeleteUserMessage?: (messageId: string) => void;
+  onDeleteMessage?: (messageId: string) => void;
 }
 
 const UserMessage = (props: Props) => {
@@ -44,7 +44,7 @@ const UserMessage = (props: Props) => {
     onChangeMessage,
     onEditAndSendMessage,
     onEditUserMessage,
-    onDeleteUserMessage,
+    onDeleteMessage,
   } = props;
   const [isTyping, setIsTyping] = useState<boolean>(false);
   const [isEditing, setIsEditing] = useState<boolean>(false);
@@ -194,6 +194,7 @@ const UserMessage = (props: Props) => {
         {!isEditing && (
           <>
             <EditAction
+              isHoverVisible
               disabled={chatStatus === ChatSpanStatus.Chatting}
               onToggleEditing={handleToggleEditing}
             />
@@ -202,8 +203,12 @@ const UserMessage = (props: Props) => {
               text={content.text}
             />
             <DeleteAction
+              hidden={
+                !(message.parentId !== null || message?.siblingIds?.length > 1)
+              }
+              isHoverVisible
               onDelete={() => {
-                onDeleteUserMessage && onDeleteUserMessage(messageId);
+                onDeleteMessage && onDeleteMessage(messageId);
               }}
             />
             <PaginationAction
diff --git a/src/FE/pages/home/_components/Chat/Chat.tsx b/src/FE/pages/home/_components/Chat/Chat.tsx
index 8a14f76b..3a571eb1 100644
--- a/src/FE/pages/home/_components/Chat/Chat.tsx
+++ b/src/FE/pages/home/_components/Chat/Chat.tsx
@@ -56,6 +56,7 @@ import ChatMessageMemoized from './MemoizedChatMessage';
 import NoModel from './NoModel';
 
 import {
+  deleteMessage,
   putChats,
   putMessageReactionClear,
   putMessageReactionUp,
@@ -565,36 +566,33 @@ const Chat = memo(() => {
     messageDispatch(setSelectedMessages(selectedMsgs));
   };
 
-  const handleDeleteResponseMessage = (messageId: string) => {
-    let nextMessageId = '';
-    const msg = messages.find((x) => x.id === messageId);
-    let msgs = messages.filter((x) => {
-      if (x.id === messageId) {
-        if (msg?.role === ChatRole.User) {
-          nextMessageId = x.parentId!;
-        } else if (msg?.role === ChatRole.Assistant) {
-          const siblingMsgs = messages.filter(
-            (x) =>
-              x.spanId === msg.spanId &&
-              x.parentId === msg.parentId &&
-              x.id !== msg.id,
-          );
-          nextMessageId = siblingMsgs[siblingMsgs.length - 1].id;
+  const handleDeleteMessage = async (messageId: string) => {
+    await deleteMessage(messageId);
+    let nextMsgId = '';
+    let msgs = messages.filter((x) => x.id !== messageId);
+    selectedMessages.forEach((msg) => {
+      msg.forEach((m) => {
+        if (m.id === messageId) {
+          if (m?.siblingIds?.length > 1) {
+            const siblingIds = m.siblingIds.filter((id) => id !== m.id);
+            nextMsgId = siblingIds[siblingIds.length - 1];
+          } else if (m.parentId !== null) {
+            if (m.role === ChatRole.Assistant) {
+              const userMsg = messages.find((x) => x.id === m.parentId);
+              nextMsgId = userMsg?.parentId!;
+              msgs = messages.filter((x) => x.id !== userMsg?.id);
+            } else if (m.role === ChatRole.User) nextMsgId = m.parentId;
+          }
         }
-      }
-      return x.id !== messageId;
+      });
     });
 
-    const leafId = findLastLeafId(msgs, nextMessageId);
-    const selectedMsgs = findSelectedMessageByLeafId(messages, leafId);
+    const leafId = findLastLeafId(msgs, nextMsgId);
+    const selectedMsgs = findSelectedMessageByLeafId(msgs, leafId);
     messageDispatch(setSelectedMessages(selectedMsgs));
     messageDispatch(setMessages(msgs));
   };
 
-  const handleDeleteUserMessage = (messageId: string) => {
-    
-  };
-
   return (
     <div className="relative flex-1">
       <div
@@ -617,8 +615,7 @@ const Chat = memo(() => {
           onReactionMessage={handleReactionMessage}
           onEditResponseMessage={handleUpdateResponseMessage}
           onEditUserMessage={handleUpdateUserMessage}
-          onDeleteResponseMessage={handleDeleteResponseMessage}
-          onDeleteUserMessage={handleDeleteUserMessage}
+          onDeleteMessage={handleDeleteMessage}
         />
       </div>
       {hasModel() && selectedChat && (