feat: Submit Feedback #2088 (#2134)

### What problem does this PR solve?

feat: Submit Feedback #2088

### Type of change


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

web/src/components/message-item/feedback-modal.tsx

@@ -1,20 +1,34 @@
 import { Form, Input, Modal } from 'antd';
 
 import { IModalProps } from '@/interfaces/common';
+import { IFeedbackRequestBody } from '@/interfaces/request/chat';
+import { useCallback } from 'react';
 
 type FieldType = {
-  username?: string;
+  feedback?: string;
 };
 
-const FeedbackModal = ({ visible, hideModal }: IModalProps<any>) => {
+const FeedbackModal = ({
+  visible,
+  hideModal,
+  onOk,
+  loading,
+}: IModalProps<IFeedbackRequestBody>) => {
   const [form] = Form.useForm();
 
-  const handleOk = async () => {
+  const handleOk = useCallback(async () => {
     const ret = await form.validateFields();
-  };
+    return onOk?.({ thumbup: false, feedback: ret.feedback });
+  }, [onOk, form]);
 
   return (
-    <Modal title="Feedback" open={visible} onOk={handleOk} onCancel={hideModal}>
+    <Modal
+      title="Feedback"
+      open={visible}
+      onOk={handleOk}
+      onCancel={hideModal}
+      confirmLoading={loading}
+    >
       <Form
         name="basic"
         labelCol={{ span: 0 }}
@@ -24,10 +38,10 @@ const FeedbackModal = ({ visible, hideModal }: IModalProps<any>) => {
         form={form}
       >
         <Form.Item<FieldType>
-          name="username"
-          rules={[{ required: true, message: 'Please input your username!' }]}
+          name="feedback"
+          rules={[{ required: true, message: 'Please input your feedback!' }]}
         >
-          <Input.TextArea rows={8} placeholder="Please input your username!" />
+          <Input.TextArea rows={8} placeholder="Please input your feedback!" />
         </Form.Item>
       </Form>
     </Modal>

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

@@ -1,5 +1,4 @@
 import CopyToClipboard from '@/components/copy-to-clipboard';
-import { useSetModalState } from '@/hooks/common-hooks';
 import {
   DeleteOutlined,
   DislikeOutlined,
@@ -8,21 +7,33 @@ import {
   SyncOutlined,
 } from '@ant-design/icons';
 import { Radio } from 'antd';
+import { useCallback } from 'react';
 import FeedbackModal from './feedback-modal';
+import { useSendFeedback } from './hooks';
 
-export const AssistantGroupButton = () => {
-  const { visible, hideModal, showModal } = useSetModalState();
+interface IProps {
+  messageId: string;
+  content: string;
+}
+
+export const AssistantGroupButton = ({ messageId, content }: IProps) => {
+  const { visible, hideModal, showModal, onFeedbackOk, loading } =
+    useSendFeedback(messageId);
+
+  const handleLike = useCallback(() => {
+    onFeedbackOk({ thumbup: true });
+  }, [onFeedbackOk]);
 
   return (
     <>
       <Radio.Group size="small">
         <Radio.Button value="a">
-          <CopyToClipboard text="xxx"></CopyToClipboard>
+          <CopyToClipboard text={content}></CopyToClipboard>
         </Radio.Button>
         <Radio.Button value="b">
           <SoundOutlined />
         </Radio.Button>
-        <Radio.Button value="c">
+        <Radio.Button value="c" onClick={handleLike}>
           <LikeOutlined />
         </Radio.Button>
         <Radio.Button value="d" onClick={showModal}>
@@ -30,7 +41,12 @@ export const AssistantGroupButton = () => {
         </Radio.Button>
       </Radio.Group>
       {visible && (
-        <FeedbackModal visible={visible} hideModal={hideModal}></FeedbackModal>
+        <FeedbackModal
+          visible={visible}
+          hideModal={hideModal}
+          onOk={onFeedbackOk}
+          loading={loading}
+        ></FeedbackModal>
       )}
     </>
   );

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

@@ -0,0 +1,32 @@
+import { useFeedback } from '@/hooks/chat-hooks';
+import { useSetModalState } from '@/hooks/common-hooks';
+import { IFeedbackRequestBody } from '@/interfaces/request/chat';
+import { getMessagePureId } from '@/utils/chat';
+import { useCallback } from 'react';
+
+export const useSendFeedback = (messageId: string) => {
+  const { visible, hideModal, showModal } = useSetModalState();
+  const { feedback, loading } = useFeedback();
+
+  const onFeedbackOk = useCallback(
+    async (params: IFeedbackRequestBody) => {
+      const ret = await feedback({
+        ...params,
+        messageId: getMessagePureId(messageId),
+      });
+
+      if (ret === 0) {
+        hideModal();
+      }
+    },
+    [feedback, hideModal, messageId],
+  );
+
+  return {
+    loading,
+    onFeedbackOk,
+    visible,
+    hideModal,
+    showModal,
+  };
+};

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

@@ -2,7 +2,7 @@ import { ReactComponent as AssistantIcon } from '@/assets/svg/assistant.svg';
 import { MessageType } from '@/constants/chat';
 import { useSetModalState, useTranslate } from '@/hooks/common-hooks';
 import { useSelectFileThumbnails } from '@/hooks/knowledge-hooks';
-import { IReference, Message } from '@/interfaces/database/chat';
+import { IReference } from '@/interfaces/database/chat';
 import { IChunk } from '@/interfaces/database/knowledge';
 import classNames from 'classnames';
 import { memo, useCallback, useEffect, useMemo, useState } from 'react';
@@ -11,19 +11,20 @@ import {
   useFetchDocumentInfosByIds,
   useFetchDocumentThumbnailsByIds,
 } from '@/hooks/document-hooks';
+import { IMessage } from '@/pages/chat/interface';
 import MarkdownContent from '@/pages/chat/markdown-content';
 import { getExtension, isImage } from '@/utils/document-util';
 import { Avatar, Button, Flex, List, Space, Typography } from 'antd';
 import FileIcon from '../file-icon';
 import IndentedTreeModal from '../indented-tree/modal';
 import NewDocumentLink from '../new-document-link';
-// import { AssistantGroupButton, UserGroupButton } from './group-button';
+import { AssistantGroupButton, UserGroupButton } from './group-button';
 import styles from './index.less';
 
 const { Text } = Typography;
 
 interface IProps {
-  item: Message;
+  item: IMessage;
   reference: IReference;
   loading?: boolean;
   nickname?: string;
@@ -36,7 +37,6 @@ const MessageItem = ({
   reference,
   loading = false,
   avatar = '',
-  nickname = '',
   clickDocumentButton,
 }: IProps) => {
   const isAssistant = item.role === MessageType.Assistant;
@@ -111,13 +111,16 @@ const MessageItem = ({
           )}
           <Flex vertical gap={8} flex={1}>
             <Space>
-              {/* {isAssistant ? (
-                <AssistantGroupButton></AssistantGroupButton>
+              {isAssistant ? (
+                <AssistantGroupButton
+                  messageId={item.id}
+                  content={item.content}
+                ></AssistantGroupButton>
               ) : (
                 <UserGroupButton></UserGroupButton>
-              )} */}
+              )}
 
-              <b>{isAssistant ? '' : nickname}</b>
+              {/* <b>{isAssistant ? '' : nickname}</b> */}
             </Space>
             <div
               className={