feat: Delete message by id #2088 (#2155)

### What problem does this PR solve?

feat: Delete message by id #2088

### Type of change


- [x] New Feature (non-breaking change which adds functionality)

web/src/components/message-item/group-button.tsx

@@ -1,5 +1,6 @@
 import CopyToClipboard from '@/components/copy-to-clipboard';
 import { useSetModalState } from '@/hooks/common-hooks';
+import { IRemoveMessageById } from '@/hooks/logic-hooks';
 import {
   DeleteOutlined,
   DislikeOutlined,
@@ -11,7 +12,7 @@ import { Radio } from 'antd';
 import { useCallback } from 'react';
 import SvgIcon from '../svg-icon';
 import FeedbackModal from './feedback-modal';
-import { useSendFeedback } from './hooks';
+import { useRemoveMessage, useSendFeedback } from './hooks';
 import PromptModal from './prompt-modal';
 
 interface IProps {
@@ -77,12 +78,20 @@ export const AssistantGroupButton = ({
   );
 };
 
-interface UserGroupButtonProps {
+interface UserGroupButtonProps extends IRemoveMessageById {
   messageId: string;
   content: string;
 }
 
-export const UserGroupButton = ({ content }: UserGroupButtonProps) => {
+export const UserGroupButton = ({
+  content,
+  messageId,
+  removeMessageById,
+}: UserGroupButtonProps) => {
+  const { onRemoveMessage, loading } = useRemoveMessage(
+    messageId,
+    removeMessageById,
+  );
   return (
     <Radio.Group size="small">
       <Radio.Button value="a">
@@ -91,8 +100,8 @@ export const UserGroupButton = ({ content }: UserGroupButtonProps) => {
       <Radio.Button value="b">
         <SyncOutlined />
       </Radio.Button>
-      <Radio.Button value="c">
-        <DeleteOutlined />
+      <Radio.Button value="c" onClick={onRemoveMessage} disabled={loading}>
+        <DeleteOutlined spin={loading} />
       </Radio.Button>
     </Radio.Group>
   );

web/src/components/message-item/hooks.ts

@@ -1,5 +1,6 @@
-import { useFeedback } from '@/hooks/chat-hooks';
+import { useDeleteMessage, useFeedback } from '@/hooks/chat-hooks';
 import { useSetModalState } from '@/hooks/common-hooks';
+import { IRemoveMessageById } from '@/hooks/logic-hooks';
 import { IFeedbackRequestBody } from '@/interfaces/request/chat';
 import { getMessagePureId } from '@/utils/chat';
 import { useCallback } from 'react';
@@ -30,3 +31,22 @@ export const useSendFeedback = (messageId: string) => {
     showModal,
   };
 };
+
+export const useRemoveMessage = (
+  messageId: string,
+  removeMessageById: IRemoveMessageById['removeMessageById'],
+) => {
+  const { deleteMessage, loading } = useDeleteMessage();
+
+  const onRemoveMessage = useCallback(async () => {
+    const pureId = getMessagePureId(messageId);
+    if (pureId) {
+      const retcode = await deleteMessage(pureId);
+      if (retcode === 0) {
+        removeMessageById(messageId);
+      }
+    }
+  }, [deleteMessage, messageId, removeMessageById]);
+
+  return { onRemoveMessage, loading };
+};

web/src/components/message-item/index.tsx

@@ -11,6 +11,7 @@ import {
   useFetchDocumentInfosByIds,
   useFetchDocumentThumbnailsByIds,
 } from '@/hooks/document-hooks';
+import { IRemoveMessageById } from '@/hooks/logic-hooks';
 import { IMessage } from '@/pages/chat/interface';
 import MarkdownContent from '@/pages/chat/markdown-content';
 import { getExtension, isImage } from '@/utils/document-util';
@@ -23,7 +24,7 @@ import styles from './index.less';
 
 const { Text } = Typography;
 
-interface IProps {
+interface IProps extends IRemoveMessageById {
   item: IMessage;
   reference: IReference;
   loading?: boolean;
@@ -40,6 +41,7 @@ const MessageItem = ({
   avatar = '',
   clickDocumentButton,
   index,
+  removeMessageById,
 }: IProps) => {
   const isAssistant = item.role === MessageType.Assistant;
   const isUser = item.role === MessageType.User;
@@ -125,6 +127,7 @@ const MessageItem = ({
                 <UserGroupButton
                   content={item.content}
                   messageId={item.id}
+                  removeMessageById={removeMessageById}
                 ></UserGroupButton>
               )}