feat: Regenerate chat message #2088

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

@@ -8,8 +8,9 @@ import {
   SoundOutlined,
   SyncOutlined,
 } from '@ant-design/icons';
-import { Radio } from 'antd';
+import { Radio, Tooltip } from 'antd';
 import { useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
 import SvgIcon from '../svg-icon';
 import FeedbackModal from './feedback-modal';
 import { useRemoveMessage, useSendFeedback } from './hooks';
@@ -33,6 +34,7 @@ export const AssistantGroupButton = ({
     hideModal: hidePromptModal,
     showModal: showPromptModal,
   } = useSetModalState();
+  const { t } = useTranslation();
 
   const handleLike = useCallback(() => {
     onFeedbackOk({ thumbup: true });
@@ -45,7 +47,9 @@ export const AssistantGroupButton = ({
           <CopyToClipboard text={content}></CopyToClipboard>
         </Radio.Button>
         <Radio.Button value="b">
-          <SoundOutlined />
+          <Tooltip title={t('chat.read')}>
+            <SoundOutlined />
+          </Tooltip>
         </Radio.Button>
         <Radio.Button value="c" onClick={handleLike}>
           <LikeOutlined />
@@ -81,27 +85,41 @@ export const AssistantGroupButton = ({
 interface UserGroupButtonProps extends IRemoveMessageById {
   messageId: string;
   content: string;
+  regenerateMessage(): void;
+  sendLoading: boolean;
 }
 
 export const UserGroupButton = ({
   content,
   messageId,
+  sendLoading,
   removeMessageById,
+  regenerateMessage,
 }: UserGroupButtonProps) => {
   const { onRemoveMessage, loading } = useRemoveMessage(
     messageId,
     removeMessageById,
   );
+  const { t } = useTranslation();
+
   return (
     <Radio.Group size="small">
       <Radio.Button value="a">
         <CopyToClipboard text={content}></CopyToClipboard>
       </Radio.Button>
-      <Radio.Button value="b">
-        <SyncOutlined />
+      <Radio.Button
+        value="b"
+        onClick={regenerateMessage}
+        disabled={sendLoading}
+      >
+        <Tooltip title={t('chat.regenerate')}>
+          <SyncOutlined spin={sendLoading} />
+        </Tooltip>
       </Radio.Button>
       <Radio.Button value="c" onClick={onRemoveMessage} disabled={loading}>
-        <DeleteOutlined spin={loading} />
+        <Tooltip title={t('common.delete')}>
+          <DeleteOutlined spin={loading} />
+        </Tooltip>
       </Radio.Button>
     </Radio.Group>
   );

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

@@ -11,7 +11,7 @@ import {
   useFetchDocumentInfosByIds,
   useFetchDocumentThumbnailsByIds,
 } from '@/hooks/document-hooks';
-import { IRemoveMessageById } from '@/hooks/logic-hooks';
+import { IRegenerateMessage, 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';
@@ -24,10 +24,11 @@ import styles from './index.less';
 
 const { Text } = Typography;
 
-interface IProps extends IRemoveMessageById {
+interface IProps extends IRemoveMessageById, IRegenerateMessage {
   item: IMessage;
   reference: IReference;
   loading?: boolean;
+  sendLoading?: boolean;
   nickname?: string;
   avatar?: string;
   clickDocumentButton?: (documentId: string, chunk: IChunk) => void;
@@ -39,9 +40,11 @@ const MessageItem = ({
   reference,
   loading = false,
   avatar = '',
+  sendLoading = false,
   clickDocumentButton,
   index,
   removeMessageById,
+  regenerateMessage,
 }: IProps) => {
   const isAssistant = item.role === MessageType.Assistant;
   const isUser = item.role === MessageType.User;
@@ -73,6 +76,10 @@ const MessageItem = ({
     [showModal],
   );
 
+  const handleRegenerateMessage = useCallback(() => {
+    regenerateMessage(item);
+  }, [regenerateMessage, item]);
+
   useEffect(() => {
     const ids = item?.doc_ids ?? [];
     if (ids.length) {
@@ -128,6 +135,8 @@ const MessageItem = ({
                   content={item.content}
                   messageId={item.id}
                   removeMessageById={removeMessageById}
+                  regenerateMessage={handleRegenerateMessage}
+                  sendLoading={sendLoading}
                 ></UserGroupButton>
               )}
 

web/src/hooks/logic-hooks.ts

@@ -2,7 +2,7 @@ import { Authorization } from '@/constants/authorization';
 import { LanguageTranslationMap } from '@/constants/common';
 import { Pagination } from '@/interfaces/common';
 import { ResponseType } from '@/interfaces/database/base';
-import { IAnswer } from '@/interfaces/database/chat';
+import { IAnswer, Message } from '@/interfaces/database/chat';
 import { IKnowledgeFile } from '@/interfaces/database/knowledge';
 import { IChangeParserConfigRequestBody } from '@/interfaces/request/document';
 import { IClientConversation } from '@/pages/chat/interface';
@@ -23,6 +23,7 @@ import {
 } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useDispatch } from 'umi';
+import { v4 as uuid } from 'uuid';
 import { useSetModalState, useTranslate } from './common-hooks';
 import { useSetDocumentParser } from './document-hooks';
 import { useSetPaginationParams } from './route-hook';
@@ -336,6 +337,77 @@ export const useRemoveMessageById = (
   return { removeMessageById };
 };
 
+export const useRemoveMessagesAfterCurrentMessage = (
+  setCurrentConversation: (
+    callback: (state: IClientConversation) => IClientConversation,
+  ) => void,
+) => {
+  const removeMessagesAfterCurrentMessage = useCallback(
+    (messageId: string) => {
+      setCurrentConversation((pre) => {
+        const index = pre.message?.findIndex((x) => x.id === messageId);
+        if (index !== -1) {
+          let nextMessages = pre.message?.slice(0, index + 2) ?? [];
+          const latestMessage = nextMessages.at(-1);
+          nextMessages = latestMessage
+            ? [
+                ...nextMessages.slice(0, -1),
+                {
+                  ...latestMessage,
+                  content: '',
+                  reference: undefined,
+                  prompt: undefined,
+                },
+              ]
+            : nextMessages;
+          return {
+            ...pre,
+            message: nextMessages,
+          };
+        }
+        return pre;
+      });
+    },
+    [setCurrentConversation],
+  );
+
+  return { removeMessagesAfterCurrentMessage };
+};
+
+export interface IRegenerateMessage {
+  regenerateMessage(message: Message): void;
+}
+
+export const useRegenerateMessage = ({
+  removeMessagesAfterCurrentMessage,
+  sendMessage,
+  messages,
+}: {
+  removeMessagesAfterCurrentMessage(messageId: string): void;
+  sendMessage({ message }: { message: Message; messages?: Message[] }): void;
+  messages: Message[];
+}) => {
+  const regenerateMessage = useCallback(
+    async (message: Message) => {
+      if (message.id) {
+        removeMessagesAfterCurrentMessage(message.id);
+        const index = messages.findIndex((x) => x.id === message.id);
+        let nextMessages;
+        if (index !== -1) {
+          nextMessages = messages.slice(0, index);
+        }
+        sendMessage({
+          message: { ...message, id: uuid() },
+          messages: nextMessages,
+        });
+      }
+    },
+    [removeMessagesAfterCurrentMessage, sendMessage, messages],
+  );
+
+  return { regenerateMessage };
+};
+
 // #endregion
 
 /**

web/src/locales/en.ts

@@ -425,6 +425,8 @@ The above is the content you need to summarize.`,
       parsing: 'Parsing',
       uploading: 'Uploading',
       uploadFailed: 'Upload failed',
+      regenerate: 'Regenerate',
+      read: 'Read content',
     },
     setting: {
       profile: 'Profile',

web/src/locales/zh-traditional.ts

@@ -395,6 +395,8 @@ export default {
       parsing: '解析中',
       uploading: '上傳中',
       uploadFailed: '上傳失敗',
+      regenerate: '重新生成',
+      read: '朗讀內容',
     },
     setting: {
       profile: '概述',

web/src/locales/zh.ts

@@ -412,6 +412,8 @@ export default {
       parsing: '解析中',
       uploading: '上传中',
       uploadFailed: '上传失败',
+      regenerate: '重新生成',
+      read: '朗读内容',
     },
     setting: {
       profile: '概要',

web/src/pages/chat/chat-container/index.tsx

@@ -28,17 +28,20 @@ const ChatContainer = () => {
     conversationId,
     loading,
     removeMessageById,
+    removeMessagesAfterCurrentMessage,
   } = useFetchConversationOnMount();
   const {
     handleInputChange,
     handlePressEnter,
     value,
     loading: sendLoading,
+    regenerateMessage,
   } = useSendMessage(
     conversation,
     addNewestConversation,
     removeLatestMessage,
     addNewestAnswer,
+    removeMessagesAfterCurrentMessage,
   );
   const { visible, hideModal, documentId, selectedChunk, clickDocumentButton } =
     useClickDrawer();
@@ -71,6 +74,8 @@ const ChatContainer = () => {
                     clickDocumentButton={clickDocumentButton}
                     index={i}
                     removeMessageById={removeMessageById}
+                    regenerateMessage={regenerateMessage}
+                    sendLoading={sendLoading}
                   ></MessageItem>
                 );
               })}