feat: Supports chatting with files/images #1880 (#1943)

### What problem does this PR solve?

feat: Supports chatting with files/images #1880

### Type of change


- [x] New Feature (non-breaking change which adds functionality)

web/src/hooks/chunk-hooks.ts

@@ -207,12 +207,13 @@ export const useFetchChunk = (chunkId?: string): ResponseType<any> => {
   return data;
 };
 
-export const useFetchKnowledgeGraph = (): ResponseType<any> => {
-  const { documentId } = useGetKnowledgeSearchParams();
-
+export const useFetchKnowledgeGraph = (
+  documentId: string,
+): ResponseType<any> => {
   const { data } = useQuery({
     queryKey: ['fetchKnowledgeGraph', documentId],
     initialData: true,
+    enabled: !!documentId,
     gcTime: 0,
     queryFn: async () => {
       const data = await kbService.knowledge_graph({

web/src/hooks/common-hooks.tsx

@@ -7,16 +7,16 @@ import { useTranslation } from 'react-i18next';
 export const useSetModalState = () => {
   const [visible, setVisible] = useState(false);
 
-  const showModal = () => {
+  const showModal = useCallback(() => {
     setVisible(true);
-  };
-  const hideModal = () => {
+  }, []);
+  const hideModal = useCallback(() => {
     setVisible(false);
-  };
+  }, []);
 
-  const switchVisible = () => {
+  const switchVisible = useCallback(() => {
     setVisible(!visible);
-  };
+  }, [visible]);
 
   return { visible, showModal, hideModal, switchVisible };
 };

web/src/hooks/document-hooks.ts

@@ -1,7 +1,10 @@
+import { IDocumentInfo } from '@/interfaces/database/document';
 import { IChunk, IKnowledgeFile } from '@/interfaces/database/knowledge';
 import { IChangeParserConfigRequestBody } from '@/interfaces/request/document';
+import kbService from '@/services/knowledge-service';
 import { api_host } from '@/utils/api';
 import { buildChunkHighlights } from '@/utils/document-util';
+import { useQuery } from '@tanstack/react-query';
 import { UploadFile } from 'antd';
 import { useCallback, useMemo, useState } from 'react';
 import { IHighlight } from 'react-pdf-highlighter';
@@ -253,3 +256,37 @@ export const useSelectRunDocumentLoading = () => {
   const loading = useOneNamespaceEffectsLoading('kFModel', ['document_run']);
   return loading;
 };
+
+export const useFetchDocumentInfosByIds = () => {
+  const [ids, setDocumentIds] = useState<string[]>([]);
+  const { data } = useQuery<IDocumentInfo[]>({
+    queryKey: ['fetchDocumentInfos', ids],
+    enabled: ids.length > 0,
+    initialData: [],
+    queryFn: async () => {
+      const { data } = await kbService.document_infos({ doc_ids: ids });
+      if (data.retcode === 0) {
+        return data.data;
+      }
+
+      return [];
+    },
+  });
+
+  return { data, setDocumentIds };
+};
+
+export const useFetchDocumentThumbnailsByIds = () => {
+  const [ids, setDocumentIds] = useState<string[]>([]);
+  const { data } = useQuery({
+    queryKey: ['fetchDocumentThumbnails', ids],
+    initialData: [],
+    queryFn: async () => {
+      const { data } = await kbService.document_thumbnails({ doc_ids: ids });
+
+      return data;
+    },
+  });
+
+  return { data, setDocumentIds };
+};