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>