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 (#628)

### What problem does this PR solve?

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

### Type of change

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

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,12 +22,18 @@ 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;
@@ -35,6 +41,7 @@ interface IProps {
   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}