fix: reference file with 'docx' type can not open #844 (#1635)

### What problem does this PR solve?

fix: reference file with 'docx' type can not open #844

### Type of change

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

web/src/components/message-item/index.tsx

@@ -1,7 +1,6 @@
 import { ReactComponent as AssistantIcon } from '@/assets/svg/assistant.svg';
 import { MessageType } from '@/constants/chat';
 import { useTranslate } from '@/hooks/common-hooks';
-import { useGetDocumentUrl } from '@/hooks/document-hooks';
 import { useSelectFileThumbnails } from '@/hooks/knowledge-hooks';
 import { IReference, Message } from '@/interfaces/database/chat';
 import { IChunk } from '@/interfaces/database/knowledge';
@@ -9,7 +8,7 @@ import classNames from 'classnames';
 import { useMemo } from 'react';
 
 import MarkdownContent from '@/pages/chat/markdown-content';
-import { getExtension, isPdf } from '@/utils/documentUtils';
+import { getExtension } from '@/utils/documentUtils';
 import { Avatar, Flex, List } from 'antd';
 import NewDocumentLink from '../new-document-link';
 import SvgIcon from '../svg-icon';
@@ -35,7 +34,6 @@ const MessageItem = ({
   const isAssistant = item.role === MessageType.Assistant;
   const { t } = useTranslate('chat');
   const fileThumbnails = useSelectFileThumbnails();
-  const getDocumentUrl = useGetDocumentUrl();
 
   const referenceDocumentList = useMemo(() => {
     return reference?.doc_aggs ?? [];
@@ -114,8 +112,9 @@ const MessageItem = ({
                         )}
 
                         <NewDocumentLink
-                          link={getDocumentUrl(item.doc_id)}
-                          preventDefault={!isPdf(item.doc_name)}
+                          documentId={item.doc_id}
+                          documentName={item.doc_name}
+                          prefix="document"
                         >
                           {item.doc_name}
                         </NewDocumentLink>

web/src/components/new-document-link.tsx

@@ -1,9 +1,16 @@
+import {
+  getExtension,
+  isSupportedPreviewDocumentType,
+} from '@/utils/documentUtils';
 import React from 'react';
 
 interface IProps extends React.PropsWithChildren {
-  link: string;
+  link?: string;
   preventDefault?: boolean;
   color?: string;
+  documentName: string;
+  documentId?: string;
+  prefix?: string;
 }
 
 const NewDocumentLink = ({
@@ -11,12 +18,25 @@ const NewDocumentLink = ({
   link,
   preventDefault = false,
   color = 'rgb(15, 79, 170)',
+  documentId,
+  documentName,
+  prefix = 'file',
 }: IProps) => {
+  let nextLink = link;
+  const extension = getExtension(documentName);
+  if (!link) {
+    nextLink = `/document/${documentId}?ext=${extension}&prefix=${prefix}`;
+  }
+
   return (
     <a
       target="_blank"
-      onClick={!preventDefault ? undefined : (e) => e.preventDefault()}
-      href={link}
+      onClick={
+        !preventDefault || isSupportedPreviewDocumentType(extension)
+          ? undefined
+          : (e) => e.preventDefault()
+      }
+      href={nextLink}
       rel="noreferrer"
       style={{ color, wordBreak: 'break-all' }}
     >

web/src/pages/add-knowledge/components/knowledge-testing/testing-result/select-files.tsx

@@ -1,9 +1,8 @@
-import { ReactComponent as NavigationPointerIcon } from '@/assets/svg/navigation-pointer.svg';
 import NewDocumentLink from '@/components/new-document-link';
-import { useGetDocumentUrl } from '@/hooks/document-hooks';
+import { useTranslate } from '@/hooks/common-hooks';
 import { ITestingDocument } from '@/interfaces/database/knowledge';
-import { isPdf } from '@/utils/documentUtils';
-import { Table, TableProps } from 'antd';
+import { EyeOutlined } from '@ant-design/icons';
+import { Button, Table, TableProps, Tooltip } from 'antd';
 import { useDispatch, useSelector } from 'umi';
 
 interface IProps {
@@ -14,9 +13,9 @@ const SelectFiles = ({ handleTesting }: IProps) => {
   const documents: ITestingDocument[] = useSelector(
     (state: any) => state.testingModel.documents,
   );
+  const { t } = useTranslate('fileManager');
 
   const dispatch = useDispatch();
-  const getDocumentUrl = useGetDocumentUrl();
 
   const columns: TableProps<ITestingDocument>['columns'] = [
     {
@@ -38,10 +37,15 @@ const SelectFiles = ({ handleTesting }: IProps) => {
       width: 50,
       render: (_, { doc_id, doc_name }) => (
         <NewDocumentLink
-          link={getDocumentUrl(doc_id)}
-          preventDefault={!isPdf(doc_name)}
+          documentName={doc_name}
+          documentId={doc_id}
+          prefix="document"
         >
-          <NavigationPointerIcon />
+          <Tooltip title={t('preview')}>
+            <Button type="text">
+              <EyeOutlined size={20} />
+            </Button>
+          </Tooltip>
         </NewDocumentLink>
       ),
     },

web/src/pages/document-viewer/index.tsx

@@ -12,9 +12,10 @@ import styles from './index.less';
 
 const DocumentViewer = () => {
   const { id: documentId } = useParams();
-  const api = `${api_host}/file/get/${documentId}`;
   const [currentQueryParameters] = useSearchParams();
   const ext = currentQueryParameters.get('ext');
+  const prefix = currentQueryParameters.get('prefix');
+  const api = `${api_host}/${prefix || 'file'}/get/${documentId}`;
 
   return (
     <section className={styles.viewerWrapper}>

web/src/pages/file-manager/action-cell/index.tsx

@@ -13,14 +13,12 @@ import { Button, Space, Tooltip } from 'antd';
 import { useHandleDeleteFile } from '../hooks';
 
 import NewDocumentLink from '@/components/new-document-link';
-import { SupportedPreviewDocumentTypes } from '@/constants/common';
-import { getExtension } from '@/utils/documentUtils';
+import {
+  getExtension,
+  isSupportedPreviewDocumentType,
+} from '@/utils/documentUtils';
 import styles from './index.less';
 
-const isSupportedPreviewDocumentType = (fileExtension: string) => {
-  return SupportedPreviewDocumentTypes.includes(fileExtension);
-};
-
 interface IProps {
   record: IFile;
   setCurrentRecord: (record: any) => void;
@@ -118,8 +116,9 @@ const ActionCell = ({
       )}
       {isSupportedPreviewDocumentType(extension) && (
         <NewDocumentLink
+          documentId={documentId}
+          documentName={record.name}
           color="black"
-          link={`/document/${documentId}?ext=${extension}`}
         >
           <Tooltip title={t('preview')}>
             <Button type="text" className={styles.iconButton}>

web/src/utils/documentUtils.ts

@@ -1,3 +1,4 @@
+import { SupportedPreviewDocumentTypes } from '@/constants/common';
 import { IChunk } from '@/interfaces/database/knowledge';
 import { UploadFile } from 'antd';
 import { v4 as uuid } from 'uuid';
@@ -46,3 +47,7 @@ export const isPdf = (name: string) => {
 export const getUnSupportedFilesCount = (message: string) => {
   return message.split('\n').length;
 };
+
+export const isSupportedPreviewDocumentType = (fileExtension: string) => {
+  return SupportedPreviewDocumentTypes.includes(fileExtension);
+};