Feat: Replace antd with shadcn and delete the template node. #10427 (#11693)

### What problem does this PR solve?

Feat: Replace antd with shadcn and delete the template node. #10427
### Type of change


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

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

@@ -1,51 +0,0 @@
-import { Form, Input, Modal } from 'antd';
-
-import { IModalProps } from '@/interfaces/common';
-import { IFeedbackRequestBody } from '@/interfaces/request/chat';
-import { useCallback } from 'react';
-
-type FieldType = {
-  feedback?: string;
-};
-
-const FeedbackModal = ({
-  visible,
-  hideModal,
-  onOk,
-  loading,
-}: IModalProps<IFeedbackRequestBody>) => {
-  const [form] = Form.useForm();
-
-  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}
-      confirmLoading={loading}
-    >
-      <Form
-        name="basic"
-        labelCol={{ span: 0 }}
-        wrapperCol={{ span: 24 }}
-        style={{ maxWidth: 600 }}
-        autoComplete="off"
-        form={form}
-      >
-        <Form.Item<FieldType>
-          name="feedback"
-          rules={[{ required: true, message: 'Please input your feedback!' }]}
-        >
-          <Input.TextArea rows={8} placeholder="Please input your feedback!" />
-        </Form.Item>
-      </Form>
-    </Modal>
-  );
-};
-
-export default FeedbackModal;

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

@@ -17,10 +17,10 @@ import { Radio, Tooltip } from 'antd';
 import { Download, NotebookText } from 'lucide-react';
 import { useCallback, useContext } from 'react';
 import { useTranslation } from 'react-i18next';
+import FeedbackDialog from '../feedback-dialog';
+import { PromptDialog } from '../prompt-dialog';
 import { ToggleGroup, ToggleGroupItem } from '../ui/toggle-group';
-import FeedbackModal from './feedback-modal';
 import { useRemoveMessage, useSendFeedback, useSpeech } from './hooks';
-import PromptModal from './prompt-modal';
 
 interface IProps {
   messageId: string;
@@ -129,19 +129,19 @@ export const AssistantGroupButton = ({
         )}
       </ToggleGroup>
       {visible && (
-        <FeedbackModal
+        <FeedbackDialog
           visible={visible}
           hideModal={hideModal}
           onOk={onFeedbackOk}
           loading={loading}
-        ></FeedbackModal>
+        ></FeedbackDialog>
       )}
       {promptVisible && (
-        <PromptModal
+        <PromptDialog
           visible={promptVisible}
           hideModal={hidePromptModal}
           prompt={prompt}
-        ></PromptModal>
+        ></PromptDialog>
       )}
     </>
   );

web/src/components/next-message-item/prompt-modal.tsx

@@ -1,30 +0,0 @@
-import { IModalProps } from '@/interfaces/common';
-import { IFeedbackRequestBody } from '@/interfaces/request/chat';
-import { Modal, Space } from 'antd';
-import HightLightMarkdown from '../highlight-markdown';
-import SvgIcon from '../svg-icon';
-
-const PromptModal = ({
-  visible,
-  hideModal,
-  prompt,
-}: IModalProps<IFeedbackRequestBody> & { prompt?: string }) => {
-  return (
-    <Modal
-      title={
-        <Space>
-          <SvgIcon name={`prompt`} width={18}></SvgIcon>
-          Prompt
-        </Space>
-      }
-      width={'80%'}
-      open={visible}
-      onCancel={hideModal}
-      footer={null}
-    >
-      <HightLightMarkdown>{prompt}</HightLightMarkdown>
-    </Modal>
-  );
-};
-
-export default PromptModal;