fix: omit long file names (#608)

### What problem does this PR solve?

#607
fix: omit long file names
fix: change the parsing method from tag to select
fix: replace icon for new chat
fix: change the OK button text of the Chat Bot API modal to close


### Type of change

- [x] Bug Fix (non-breaking change which fixes an issue)

web/src/components/chunk-method-modal/hooks.ts

@@ -74,9 +74,9 @@ export const useFetchParserListOnMount = (
     setSelectedTag(parserId);
   }, [parserId, documentId]);
 
-  const handleChange = (tag: string, checked: boolean) => {
-    const nextSelectedTag = checked ? tag : selectedTag;
-    setSelectedTag(nextSelectedTag);
+  const handleChange = (tag: string) => {
+    // const nextSelectedTag = checked ? tag : selectedTag;
+    setSelectedTag(tag);
   };
 
   return { parserList: nextParserList, handleChange, selectedTag };

web/src/components/chunk-method-modal/index.less

@@ -8,3 +8,7 @@
   cursor: help;
   writing-mode: horizontal-tb;
 }
+
+.chunkMethod {
+  margin-bottom: 0;
+}

web/src/components/chunk-method-modal/index.tsx

@@ -13,9 +13,9 @@ import {
   Form,
   InputNumber,
   Modal,
+  Select,
   Space,
   Switch,
-  Tag,
   Tooltip,
 } from 'antd';
 import omit from 'lodash/omit';
@@ -25,8 +25,6 @@ import { useFetchParserListOnMount } from './hooks';
 import { useTranslate } from '@/hooks/commonHooks';
 import styles from './index.less';
 
-const { CheckableTag } = Tag;
-
 interface IProps extends Omit<IModalManagerChildrenProps, 'showModal'> {
   loading: boolean;
   onOk: (
@@ -113,21 +111,14 @@ const ChunkMethodModal: React.FC<IProps> = ({
       afterClose={afterClose}
     >
       <Space size={[0, 8]} wrap>
-        <div className={styles.tags}>
-          {parserList.map((x) => {
-            return (
-              <CheckableTag
-                key={x.value}
-                checked={selectedTag === x.value}
-                onChange={(checked) => {
-                  handleChange(x.value, checked);
-                }}
-              >
-                {x.label}
-              </CheckableTag>
-            );
-          })}
-        </div>
+        <Form.Item label={t('chunkMethod')} className={styles.chunkMethod}>
+          <Select
+            style={{ width: 120 }}
+            onChange={handleChange}
+            value={selectedTag}
+            options={parserList}
+          />
+        </Form.Item>
       </Space>
       {hideDivider || <Divider></Divider>}
       <Form name="dynamic_form_nest_item" autoComplete="off" form={form}>

web/src/locales/en.ts

@@ -24,6 +24,7 @@ export default {
       copied: 'Copied',
       comingSoon: 'Coming Soon',
       download: 'Download',
+      close: 'Close',
     },
     login: {
       login: 'Sign in',

web/src/locales/zh-traditional.ts

@@ -24,6 +24,7 @@ export default {
       copied: '複製成功',
       comingSoon: '即將推出',
       download: '下載',
+      close: '关闭',
     },
     login: {
       login: '登入',

web/src/locales/zh.ts

@@ -24,6 +24,7 @@ export default {
       copied: '复制成功',
       comingSoon: '即将推出',
       download: '下载',
+      close: '关闭',
     },
     login: {
       login: '登录',

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

@@ -28,7 +28,7 @@
   min-width: 200px;
 }
 
-.tochunks {
+.toChunks {
   cursor: pointer;
 }
 
@@ -42,3 +42,7 @@
   cursor: help;
   writing-mode: horizontal-tb;
 }
+
+.nameText {
+  color: #1677ff;
+}

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

@@ -8,7 +8,7 @@ import { useSetSelectedRecord } from '@/hooks/logicHooks';
 import { useSelectParserList } from '@/hooks/userSettingHook';
 import { IKnowledgeFile } from '@/interfaces/database/knowledge';
 import { getExtension } from '@/utils/documentUtils';
-import { Divider, Flex, Switch, Table } from 'antd';
+import { Divider, Flex, Switch, Table, Typography } from 'antd';
 import type { ColumnsType } from 'antd/es/table';
 import { useTranslation } from 'react-i18next';
 import CreateFileModal from './create-file-modal';
@@ -31,6 +31,8 @@ import FileUploadModal from '@/components/file-upload-modal';
 import { formatDate } from '@/utils/date';
 import styles from './index.less';
 
+const { Text } = Typography;
+
 const KnowledgeFile = () => {
   const data = useSelectDocumentList();
   const { fetchDocumentList } = useFetchDocumentListOnMount();
@@ -80,7 +82,7 @@ const KnowledgeFile = () => {
       key: 'name',
       fixed: 'left',
       render: (text: any, { id, thumbnail, name }) => (
-        <div className={styles.tochunks} onClick={() => toChunk(id)}>
+        <div className={styles.toChunks} onClick={() => toChunk(id)}>
           <Flex gap={10} align="center">
             {thumbnail ? (
               <img className={styles.img} src={thumbnail} alt="" />
@@ -90,7 +92,9 @@ const KnowledgeFile = () => {
                 width={24}
               ></SvgIcon>
             )}
-            {text}
+            <Text ellipsis={{ tooltip: text }} className={styles.nameText}>
+              {text}
+            </Text>
           </Flex>
         </div>
       ),

web/src/pages/add-knowledge/components/knowledge-file/model.ts

@@ -218,7 +218,13 @@ const model: DvaModel<KFModelState> = {
       });
 
       const { data } = yield call(kbService.document_upload, formData);
-      if (data.retcode === 0 || data.retcode === 500) {
+
+      const succeed = data.retcode === 0;
+
+      if (succeed) {
+        message.success(i18n.t('message.uploaded'));
+      }
+      if (succeed || data.retcode === 500) {
         yield put({
           type: 'getKfList',
           payload: { kb_id: payload.kb_id },

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

@@ -93,22 +93,26 @@ const ParsingActionCell = ({
           <EditOutlined size={20} />
         </Button>
       </Tooltip>
-      <Button
-        type="text"
-        disabled={isRunning}
-        onClick={onRmDocument}
-        className={styles.iconButton}
-      >
-        <DeleteOutlined size={20} />
-      </Button>
-      <Button
-        type="text"
-        disabled={isRunning}
-        onClick={onDownloadDocument}
-        className={styles.iconButton}
-      >
-        <DownloadOutlined size={20} />
-      </Button>
+      <Tooltip title={t('delete', { keyPrefix: 'common' })}>
+        <Button
+          type="text"
+          disabled={isRunning}
+          onClick={onRmDocument}
+          className={styles.iconButton}
+        >
+          <DeleteOutlined size={20} />
+        </Button>
+      </Tooltip>
+      <Tooltip title={t('download', { keyPrefix: 'common' })}>
+        <Button
+          type="text"
+          disabled={isRunning}
+          onClick={onDownloadDocument}
+          className={styles.iconButton}
+        >
+          <DownloadOutlined size={20} />
+        </Button>
+      </Tooltip>
     </Space>
   );
 };

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

@@ -73,6 +73,7 @@ const ChatOverviewModal = ({
         cancelButtonProps={{ style: { display: 'none' } }}
         onOk={hideModal}
         width={'100vw'}
+        okText={t('close', { keyPrefix: 'common' })}
       >
         <Flex vertical gap={'middle'}>
           <Card title={t('backendServiceApi')}>

web/src/pages/chat/index.tsx

@@ -4,7 +4,7 @@ import {
   CloudOutlined,
   DeleteOutlined,
   EditOutlined,
-  FormOutlined,
+  PlusOutlined,
 } from '@ant-design/icons';
 import {
   Avatar,
@@ -157,7 +157,7 @@ const Chat = () => {
       onClick: handleCreateTemporaryConversation,
       label: (
         <Space>
-          <EditOutlined />
+          <PlusOutlined />
           {t('newChat')}
         </Space>
       ),
@@ -293,7 +293,8 @@ const Chat = () => {
               <Tag>{conversationList.length}</Tag>
             </Space>
             <Dropdown menu={{ items }}>
-              <FormOutlined />
+              {/* <FormOutlined /> */}
+              <PlusOutlined />
             </Dropdown>
           </Flex>
           <Divider></Divider>