From 84eb7a911094f6a888fc8f7753d1a6c496b43ab3 Mon Sep 17 00:00:00 2001
From: bill <yibie_jingnian@163.com>
Date: Fri, 23 Aug 2024 18:57:07 +0800
Subject: [PATCH] feat: Add FeedbackModal

---
 .../message-item/feedback-modal.tsx           | 37 +++++++++++++
 .../components/message-item/group-button.tsx  | 53 +++++++++++++++++++
 web/src/components/message-item/index.tsx     | 13 ++++-
 3 files changed, 101 insertions(+), 2 deletions(-)
 create mode 100644 web/src/components/message-item/feedback-modal.tsx
 create mode 100644 web/src/components/message-item/group-button.tsx

diff --git a/web/src/components/message-item/feedback-modal.tsx b/web/src/components/message-item/feedback-modal.tsx
new file mode 100644
index 00000000000..0dca166fa58
--- /dev/null
+++ b/web/src/components/message-item/feedback-modal.tsx
@@ -0,0 +1,37 @@
+import { Form, Input, Modal } from 'antd';
+
+import { IModalProps } from '@/interfaces/common';
+
+type FieldType = {
+  username?: string;
+};
+
+const FeedbackModal = ({ visible, hideModal }: IModalProps<any>) => {
+  const [form] = Form.useForm();
+
+  const handleOk = async () => {
+    const ret = await form.validateFields();
+  };
+
+  return (
+    <Modal title="Feedback" open={visible} onOk={handleOk} onCancel={hideModal}>
+      <Form
+        name="basic"
+        labelCol={{ span: 0 }}
+        wrapperCol={{ span: 24 }}
+        style={{ maxWidth: 600 }}
+        autoComplete="off"
+        form={form}
+      >
+        <Form.Item<FieldType>
+          name="username"
+          rules={[{ required: true, message: 'Please input your username!' }]}
+        >
+          <Input.TextArea rows={8} placeholder="Please input your username!" />
+        </Form.Item>
+      </Form>
+    </Modal>
+  );
+};
+
+export default FeedbackModal;
diff --git a/web/src/components/message-item/group-button.tsx b/web/src/components/message-item/group-button.tsx
new file mode 100644
index 00000000000..619fb924695
--- /dev/null
+++ b/web/src/components/message-item/group-button.tsx
@@ -0,0 +1,53 @@
+import CopyToClipboard from '@/components/copy-to-clipboard';
+import { useSetModalState } from '@/hooks/common-hooks';
+import {
+  DeleteOutlined,
+  DislikeOutlined,
+  LikeOutlined,
+  SoundOutlined,
+  SyncOutlined,
+} from '@ant-design/icons';
+import { Radio } from 'antd';
+import FeedbackModal from './feedback-modal';
+
+export const AssistantGroupButton = () => {
+  const { visible, hideModal, showModal } = useSetModalState();
+
+  return (
+    <>
+      <Radio.Group size="small">
+        <Radio.Button value="a">
+          <CopyToClipboard text="xxx"></CopyToClipboard>
+        </Radio.Button>
+        <Radio.Button value="b">
+          <SoundOutlined />
+        </Radio.Button>
+        <Radio.Button value="c">
+          <LikeOutlined />
+        </Radio.Button>
+        <Radio.Button value="d" onClick={showModal}>
+          <DislikeOutlined />
+        </Radio.Button>
+      </Radio.Group>
+      {visible && (
+        <FeedbackModal visible={visible} hideModal={hideModal}></FeedbackModal>
+      )}
+    </>
+  );
+};
+
+export const UserGroupButton = () => {
+  return (
+    <Radio.Group size="small">
+      <Radio.Button value="a">
+        <CopyToClipboard text="xxx"></CopyToClipboard>
+      </Radio.Button>
+      <Radio.Button value="b">
+        <SyncOutlined />
+      </Radio.Button>
+      <Radio.Button value="c">
+        <DeleteOutlined />
+      </Radio.Button>
+    </Radio.Group>
+  );
+};
diff --git a/web/src/components/message-item/index.tsx b/web/src/components/message-item/index.tsx
index 89e0a7edee6..a90e921755a 100644
--- a/web/src/components/message-item/index.tsx
+++ b/web/src/components/message-item/index.tsx
@@ -13,10 +13,11 @@ import {
 } from '@/hooks/document-hooks';
 import MarkdownContent from '@/pages/chat/markdown-content';
 import { getExtension, isImage } from '@/utils/document-util';
-import { Avatar, Button, Flex, List, Typography } from 'antd';
+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 styles from './index.less';
 
 const { Text } = Typography;
@@ -109,7 +110,15 @@ const MessageItem = ({
             <AssistantIcon></AssistantIcon>
           )}
           <Flex vertical gap={8} flex={1}>
-            <b>{isAssistant ? '' : nickname}</b>
+            <Space>
+              {isAssistant ? (
+                <AssistantGroupButton></AssistantGroupButton>
+              ) : (
+                <UserGroupButton></UserGroupButton>
+              )}
+
+              {/* <b>{isAssistant ? '' : nickname}</b> */}
+            </Space>
             <div
               className={
                 isAssistant ? styles.messageText : styles.messageUserText