fix: filter knowledge list by keywords and clear the selected file list after the file is uploaded successfully and add ellipsis pattern to chunk list

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

@@ -48,6 +48,7 @@ const ChunkMethodModal: React.FC<IProps> = ({
   visible,
   documentExtension,
   parserConfig,
+  loading,
 }) => {
   const { parserList, handleChange, selectedTag } = useFetchParserListOnMount(
     documentId,
@@ -109,6 +110,7 @@ const ChunkMethodModal: React.FC<IProps> = ({
       onOk={handleOk}
       onCancel={hideModal}
       afterClose={afterClose}
+      confirmLoading={loading}
     >
       <Space size={[0, 8]} wrap>
         <Form.Item label={t('chunkMethod')} className={styles.chunkMethod}>

web/src/components/file-upload-modal/index.tsx

@@ -68,15 +68,20 @@ const FileUploadModal = ({
   const [fileList, setFileList] = useState<UploadFile[]>([]);
   const [directoryFileList, setDirectoryFileList] = useState<UploadFile[]>([]);
 
+  const clearFileList = () => {
+    setFileList([]);
+    setDirectoryFileList([]);
+  };
+
   const onOk = async () => {
     const ret = await onFileUploadOk?.([...fileList, ...directoryFileList]);
-    if (ret !== undefined && ret === 0) {
-      setFileList([]);
-      setDirectoryFileList([]);
-    }
     return ret;
   };
 
+  const afterClose = () => {
+    clearFileList();
+  };
+
   const items: TabsProps['items'] = [
     {
       key: '1',
@@ -110,6 +115,7 @@ const FileUploadModal = ({
         onOk={onOk}
         onCancel={hideModal}
         confirmLoading={loading}
+        afterClose={afterClose}
       >
         <Flex gap={'large'} vertical>
           <Segmented

web/src/hooks/knowledgeHook.ts

@@ -125,13 +125,19 @@ export const useFetchKnowledgeBaseConfiguration = () => {
   }, [fetchKnowledgeBaseConfiguration]);
 };
 
+export const useSelectKnowledgeList = () => {
+  const knowledgeModel = useSelector((state) => state.knowledgeModel);
+  const { data = [] } = knowledgeModel;
+  return data;
+};
+
 export const useFetchKnowledgeList = (
   shouldFilterListWithoutDocument: boolean = false,
 ) => {
   const dispatch = useDispatch();
   const loading = useOneNamespaceEffectsLoading('knowledgeModel', ['getList']);
 
-  const knowledgeModel = useSelector((state: any) => state.knowledgeModel);
+  const knowledgeModel = useSelector((state) => state.knowledgeModel);
   const { data = [] } = knowledgeModel;
   const list: IKnowledge[] = useMemo(() => {
     return shouldFilterListWithoutDocument

web/src/less/mixins.less

@@ -42,3 +42,17 @@
     }
   }
 }
+
+.textEllipsis() {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.multipleLineEllipsis(@line) {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: @line;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}

web/src/locales/en.ts

@@ -64,6 +64,7 @@ export default {
       name: 'Name',
       namePlaceholder: 'Please input name!',
       doc: 'Docs',
+      searchKnowledgePlaceholder: 'Search',
     },
     knowledgeDetails: {
       dataset: 'Dataset',
@@ -278,6 +279,8 @@ export default {
       keyword: 'Keyword',
       function: 'Function',
       chunkMessage: 'Please input value!',
+      full: 'Full text',
+      ellipse: 'Ellipse',
     },
     chat: {
       createAssistant: 'Create an Assistant',

web/src/locales/zh-traditional.ts

@@ -64,6 +64,7 @@ export default {
       name: '名稱',
       namePlaceholder: '請輸入名稱',
       doc: '文件',
+      searchKnowledgePlaceholder: '搜索',
     },
     knowledgeDetails: {
       dataset: '數據集',
@@ -251,6 +252,8 @@ export default {
       keyword: '關鍵詞',
       function: '函數',
       chunkMessage: '請輸入值！',
+      full: '全文',
+      ellipse: '省略',
     },
     chat: {
       createAssistant: '新建助理',

web/src/locales/zh.ts

@@ -64,6 +64,7 @@ export default {
       name: '名称',
       namePlaceholder: '请输入名称',
       doc: '文档',
+      searchKnowledgePlaceholder: '搜索',
     },
     knowledgeDetails: {
       dataset: '数据集',
@@ -268,6 +269,8 @@ export default {
       keyword: '关键词',
       function: '函数',
       chunkMessage: '请输入值！',
+      full: '全文',
+      ellipse: '省略',
     },
     chat: {
       createAssistant: '新建助理',

web/src/pages/add-knowledge/components/knowledge-chunk/components/chunk-card/index.less

@@ -14,6 +14,10 @@
   .chunkText;
 }
 
+.contentEllipsis {
+  .multipleLineEllipsis(3);
+}
+
 .chunkCard {
   width: 100%;
 }

web/src/pages/add-knowledge/components/knowledge-chunk/components/chunk-card/index.tsx

@@ -4,6 +4,7 @@ import { Card, Checkbox, CheckboxProps, Flex, Popover, Switch } from 'antd';
 import classNames from 'classnames';
 import { useState } from 'react';
 
+import { ChunkTextMode } from '../../constant';
 import styles from './index.less';
 
 interface IProps {
@@ -14,6 +15,7 @@ interface IProps {
   handleCheckboxClick: (chunkId: string, checked: boolean) => void;
   selected: boolean;
   clickChunkCard: (chunkId: string) => void;
+  textMode: ChunkTextMode;
 }
 
 const ChunkCard = ({
@@ -24,6 +26,7 @@ const ChunkCard = ({
   switchChunk,
   selected,
   clickChunkCard,
+  textMode,
 }: IProps) => {
   const available = Number(item.available_int);
   const [enabled, setEnabled] = useState(available === 1);
@@ -68,8 +71,15 @@ const ChunkCard = ({
           onDoubleClick={handleContentDoubleClick}
           onClick={handleContentClick}
           className={styles.content}
-          dangerouslySetInnerHTML={{ __html: item.content_with_weight }}
-        ></section>
+        >
+          <div
+            dangerouslySetInnerHTML={{ __html: item.content_with_weight }}
+            className={classNames({
+              [styles.contentEllipsis]: textMode === ChunkTextMode.Ellipse,
+            })}
+          ></div>
+        </section>
+
         <div>
           <Switch checked={enabled} onChange={onChange} />
         </div>

web/src/pages/add-knowledge/components/knowledge-chunk/components/chunk-toolbar/index.tsx

@@ -22,19 +22,26 @@ import {
   Popover,
   Radio,
   RadioChangeEvent,
+  Segmented,
+  SegmentedProps,
   Space,
+  Typography,
 } from 'antd';
 import { ChangeEventHandler, useCallback, useMemo, useState } from 'react';
 import { Link, useDispatch, useSelector } from 'umi';
+import { ChunkTextMode } from '../../constant';
 import { ChunkModelState } from '../../model';
 
+const { Text } = Typography;
+
 interface IProps {
   checked: boolean;
   getChunkList: () => void;
   selectAllChunk: (checked: boolean) => void;
   createChunk: () => void;
   removeChunk: () => void;
   switchChunk: (available: number) => void;
+  changeChunkTextMode(mode: ChunkTextMode): void;
 }
 
 const ChunkToolBar = ({
@@ -44,6 +51,7 @@ const ChunkToolBar = ({
   createChunk,
   removeChunk,
   switchChunk,
+  changeChunkTextMode,
 }: IProps) => {
   const { documentInfo, available, searchString }: ChunkModelState =
     useSelector((state: any) => state.chunkModel);
@@ -170,9 +178,18 @@ const ChunkToolBar = ({
           <ArrowLeftOutlined />
         </Link>
         <FilePdfOutlined />
-        {documentInfo.name}
+        <Text ellipsis={{ tooltip: documentInfo.name }} style={{ width: 150 }}>
+          {documentInfo.name}
+        </Text>
       </Space>
       <Space>
+        <Segmented
+          options={[
+            { label: t(ChunkTextMode.Full), value: ChunkTextMode.Full },
+            { label: t(ChunkTextMode.Ellipse), value: ChunkTextMode.Ellipse },
+          ]}
+          onChange={changeChunkTextMode as SegmentedProps['onChange']}
+        />
         <Popover content={content} placement="bottom" arrow={false}>
           <Button>
             {t('bulk')}

web/src/pages/add-knowledge/components/knowledge-chunk/constant.ts

@@ -0,0 +1,4 @@
+export enum ChunkTextMode {
+  Full = 'full',
+  Ellipse = 'ellipse',
+}

web/src/pages/add-knowledge/components/knowledge-chunk/hooks.ts

@@ -4,6 +4,7 @@ import { buildChunkHighlights } from '@/utils/documentUtils';
 import { useCallback, useMemo, useState } from 'react';
 import { IHighlight } from 'react-pdf-highlighter';
 import { useSelector } from 'umi';
+import { ChunkTextMode } from './constant';
 
 export const useSelectDocumentInfo = () => {
   const documentInfo: IKnowledgeFile = useSelector(
@@ -63,3 +64,14 @@ export const useSelectChunkListLoading = () => {
     'switch_chunk',
   ]);
 };
+
+// Switch chunk text to be fully displayed or ellipse
+export const useChangeChunkTextMode = () => {
+  const [textMode, setTextMode] = useState<ChunkTextMode>(ChunkTextMode.Full);
+
+  const changeChunkTextMode = useCallback((mode: ChunkTextMode) => {
+    setTextMode(mode);
+  }, []);
+
+  return { textMode, changeChunkTextMode };
+};

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

@@ -10,6 +10,7 @@ import CreatingModal from './components/chunk-creating-modal';
 import ChunkToolBar from './components/chunk-toolbar';
 import DocumentPreview from './components/document-preview/preview';
 import {
+  useChangeChunkTextMode,
   useHandleChunkCardClick,
   useSelectChunkListLoading,
   useSelectDocumentInfo,
@@ -35,6 +36,7 @@ const Chunk = () => {
   const { handleChunkCardClick, selectedChunkId } = useHandleChunkCardClick();
   const isPdf = documentInfo.type === 'pdf';
   const { t } = useTranslation();
+  const { changeChunkTextMode, textMode } = useChangeChunkTextMode();
 
   const getChunkList = useFetchChunkList();
 
@@ -87,9 +89,10 @@ const Chunk = () => {
     },
     [],
   );
-  const showSelectedChunkWarning = () => {
+
+  const showSelectedChunkWarning = useCallback(() => {
     message.warning(t('message.pleaseSelectChunk'));
-  };
+  }, [t]);
 
   const handleRemoveChunk = useCallback(async () => {
     if (selectedChunkIds.length > 0) {
@@ -100,7 +103,7 @@ const Chunk = () => {
     } else {
       showSelectedChunkWarning();
     }
-  }, [selectedChunkIds, documentId, removeChunk]);
+  }, [selectedChunkIds, documentId, removeChunk, showSelectedChunkWarning]);
 
   const switchChunk = useCallback(
     async (available?: number, chunkIds?: string[]) => {
@@ -125,7 +128,13 @@ const Chunk = () => {
         getChunkList();
       }
     },
-    [dispatch, documentId, getChunkList, selectedChunkIds],
+    [
+      dispatch,
+      documentId,
+      getChunkList,
+      selectedChunkIds,
+      showSelectedChunkWarning,
+    ],
   );
 
   useEffect(() => {
@@ -147,6 +156,7 @@ const Chunk = () => {
           removeChunk={handleRemoveChunk}
           checked={selectedChunkIds.length === data.length}
           switchChunk={switchChunk}
+          changeChunkTextMode={changeChunkTextMode}
         ></ChunkToolBar>
         <Divider></Divider>
         <Flex flex={1} gap={'middle'}>
@@ -175,6 +185,7 @@ const Chunk = () => {
                       switchChunk={switchChunk}
                       clickChunkCard={handleChunkCardClick}
                       selected={item.chunk_id === selectedChunkId}
+                      textMode={textMode}
                     ></ChunkCard>
                   ))}
                 </Space>

web/src/pages/add-knowledge/components/knowledge-file/document-toolbar.tsx

@@ -23,7 +23,6 @@ import {
   useFetchDocumentListOnMount,
   useGetPagination,
   useHandleSearchChange,
-  useNavigateToOtherPage,
 } from './hooks';
 import styles from './index.less';
 
@@ -44,7 +43,6 @@ const DocumentToolbar = ({
   const { handleInputChange } = useHandleSearchChange(setPagination);
   const removeDocument = useRemoveDocument();
   const showDeleteConfirm = useShowDeleteConfirm();
-  const { linkToUploadPage } = useNavigateToOtherPage();
   const runDocumentByIds = useRunDocument();
   const { knowledgeId } = useGetKnowledgeSearchParams();
   const changeStatus = useSetDocumentStatus();
@@ -77,7 +75,6 @@ const DocumentToolbar = ({
             </Button>
           </div>
         ),
-        // disabled: true,
       },
     ];
   }, [showDocumentUploadModal, showCreateModal, t]);

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

@@ -1,6 +1,12 @@
 .datasetWrapper {
-  padding: 30px;
-  flex: 1;
+  padding: 30px 30px 0;
+  height: 100%;
+}
+
+.documentTable {
+  tbody {
+    // height: calc(100vh - 508px);
+  }
 }
 
 .filter {

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

@@ -179,7 +179,8 @@ const KnowledgeFile = () => {
         // loading={loading}
         pagination={pagination}
         rowSelection={rowSelection}
-        scroll={{ scrollToFirstRowOnChange: true, x: 1300, y: 'fill' }}
+        className={styles.documentTable}
+        scroll={{ scrollToFirstRowOnChange: true, x: 1300 }}
       />
       <CreateFileModal
         visible={createVisible}