feat: add Upload to AssistantSetting

web/src/pages/add-knowledge/components/knowledge-file/index.tsx

@@ -23,7 +23,7 @@ import {
 import type { ColumnsType } from 'antd/es/table';
 import { PaginationProps } from 'antd/lib';
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
-import { Link, useDispatch, useNavigate, useSelector } from 'umi';
+import { useDispatch, useNavigate, useSelector } from 'umi';
 import CreateEPModal from './createEFileModal';
 import styles from './index.less';
 import ParsingActionCell from './parsing-action-cell';
@@ -144,19 +144,22 @@ const KnowledgeFile = () => {
     });
   }, [dispatch]);
 
+  const linkToUploadPage = useCallback(() => {
+    navigate(`/knowledge/dataset/upload?id=${knowledgeBaseId}`);
+  }, [navigate, knowledgeBaseId]);
+
   const actionItems: MenuProps['items'] = useMemo(() => {
     return [
       {
         key: '1',
+        onClick: linkToUploadPage,
         label: (
           <div>
             <Button type="link">
-              <Link to={`/knowledge/dataset/upload?id=${knowledgeBaseId}`}>
-                <Space>
-                  <FileTextOutlined />
-                  Local files
-                </Space>
-              </Link>
+              <Space>
+                <FileTextOutlined />
+                Local files
+              </Space>
             </Button>
           </div>
         ),
@@ -164,9 +167,10 @@ const KnowledgeFile = () => {
       { type: 'divider' },
       {
         key: '2',
+        onClick: showCEFModal,
         label: (
           <div>
-            <Button type="link" onClick={showCEFModal}>
+            <Button type="link">
               <FileOutlined />
               Create empty file
             </Button>
@@ -175,7 +179,7 @@ const KnowledgeFile = () => {
         // disabled: true,
       },
     ];
-  }, [knowledgeBaseId, showCEFModal]);
+  }, [linkToUploadPage, showCEFModal]);
 
   const toChunk = (id: string) => {
     navigate(

web/src/pages/chat/chat-configuration-modal/assistant-setting.tsx

@@ -1,9 +1,10 @@
-import { Form, Input, Select } from 'antd';
+import { Form, Input, Select, Upload } from 'antd';
 
 import classNames from 'classnames';
 import { ISegmentedContentProps } from '../interface';
 
 import { useFetchKnowledgeList } from '@/hooks/knowledgeHook';
+import { PlusOutlined } from '@ant-design/icons';
 import styles from './index.less';
 
 const AssistantSetting = ({ show }: ISegmentedContentProps) => {
@@ -13,6 +14,13 @@ const AssistantSetting = ({ show }: ISegmentedContentProps) => {
     value: x.id,
   }));
 
+  const normFile = (e: any) => {
+    if (Array.isArray(e)) {
+      return e;
+    }
+    return e?.fileList;
+  };
+
   return (
     <section
       className={classNames({
@@ -26,8 +34,22 @@ const AssistantSetting = ({ show }: ISegmentedContentProps) => {
       >
         <Input placeholder="e.g. Resume Jarvis" />
       </Form.Item>
-      <Form.Item name={'icon'} label="Assistant avatar">
-        <Input />
+      <Form.Item
+        name="icon"
+        label="Assistant avatar"
+        valuePropName="fileList"
+        getValueFromEvent={normFile}
+      >
+        <Upload
+          listType="picture-card"
+          maxCount={1}
+          showUploadList={{ showPreviewIcon: false, showRemoveIcon: false }}
+        >
+          <button style={{ border: 0, background: 'none' }} type="button">
+            <PlusOutlined />
+            <div style={{ marginTop: 8 }}>Upload</div>
+          </button>
+        </Upload>
       </Form.Item>
       <Form.Item name={'language'} label="Language" initialValue={'Chinese'}>
         <Select

web/src/pages/chat/chat-configuration-modal/index.tsx

@@ -1,6 +1,6 @@
 import { ReactComponent as ChatConfigurationAtom } from '@/assets/svg/chat-configuration-atom.svg';
 import { IModalManagerChildrenProps } from '@/components/modal-manager';
-import { Divider, Flex, Form, Modal, Segmented } from 'antd';
+import { Divider, Flex, Form, Modal, Segmented, UploadFile } from 'antd';
 import { SegmentedValue } from 'antd/es/segmented';
 import omit from 'lodash/omit';
 import { useEffect, useRef, useState } from 'react';
@@ -67,6 +67,14 @@ const ChatConfigurationModal = ({ visible, hideModal, id }: IProps) => {
       ...excludeUnEnabledVariables(values),
     ]);
     const emptyResponse = nextValues.prompt_config?.empty_response ?? '';
+
+    const fileList = values.icon;
+    let icon;
+
+    if (Array.isArray(fileList) && fileList.length > 0) {
+      icon = fileList[0].thumbUrl;
+    }
+
     const finalValues = {
       dialog_id: id,
       ...nextValues,
@@ -75,6 +83,7 @@ const ChatConfigurationModal = ({ visible, hideModal, id }: IProps) => {
         parameters: promptEngineRef.current,
         empty_response: emptyResponse,
       },
+      icon,
     };
     console.info(promptEngineRef.current);
     console.info(nextValues);
@@ -112,7 +121,13 @@ const ChatConfigurationModal = ({ visible, hideModal, id }: IProps) => {
   );
 
   useEffect(() => {
-    form.setFieldsValue(currentDialog);
+    const icon = currentDialog.icon;
+    let fileList: UploadFile[] = [];
+
+    if (icon) {
+      fileList = [{ uid: '1', name: 'file', thumbUrl: icon, status: 'done' }];
+    }
+    form.setFieldsValue({ ...currentDialog, icon: fileList });
   }, [currentDialog, form]);
 
   return (

web/src/pages/chat/index.tsx

@@ -2,6 +2,7 @@ import { ReactComponent as ChatAppCube } from '@/assets/svg/chat-app-cube.svg';
 import { useSetModalState } from '@/hooks/commonHooks';
 import { DeleteOutlined, EditOutlined, FormOutlined } from '@ant-design/icons';
 import {
+  Avatar,
   Button,
   Card,
   Divider,
@@ -208,8 +209,8 @@ const Chat = () => {
                 onClick={handleDialogCardClick(x.id)}
               >
                 <Flex justify="space-between" align="center">
-                  <Space>
-                    {x.icon}
+                  <Space size={15}>
+                    <Avatar src={x.icon} shape={'square'} />
                     <section>
                       <b>{x.name}</b>
                       <div>{x.description}</div>