feat: Regenerate chat message #2088 (#2166)

### What problem does this PR solve?

feat: Regenerate chat message #2088
### Type of change

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

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>
               )}