Feat: Modify the data structure of the chunk in the conversation infi…

…niflow#3909 (infiniflow#3955)

### What problem does this PR solve?

Feat: Modify the data structure of the chunk in the conversation infiniflow#3909

### Type of change


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

web/src/components/api-service/chat-api-key-modal/index.tsx

@@ -63,7 +63,7 @@ const ChatApiKeyModal = ({
         <Button
           onClick={createToken}
           loading={creatingLoading}
-          disabled={tokenList.length > 0}
+          disabled={tokenList?.length > 0}
         >
           {t('createNewKey')}
         </Button>

web/src/components/api-service/chat-overview-modal/api-content.tsx

@@ -3,8 +3,7 @@ import apiDoc from '@parent/docs/references/http_api_reference.md';
 import MarkdownPreview from '@uiw/react-markdown-preview';
 import { Button, Card, Flex, Space } from 'antd';
 import ChatApiKeyModal from '../chat-api-key-modal';
-import EmbedModal from '../embed-modal';
-import { usePreviewChat, useShowEmbedModal } from '../hooks';
+import { usePreviewChat } from '../hooks';
 import BackendServiceApi from './backend-service-api';
 
 const ApiContent = ({
@@ -22,10 +21,10 @@ const ApiContent = ({
     hideModal: hideApiKeyModal,
     showModal: showApiKeyModal,
   } = useSetModalState();
-  const { embedVisible, hideEmbedModal, showEmbedModal, embedToken } =
-    useShowEmbedModal(idKey, id);
+  // const { embedVisible, hideEmbedModal, showEmbedModal, embedToken } =
+  //   useShowEmbedModal(idKey);
 
-  const { handlePreview } = usePreviewChat(idKey, id);
+  const { handlePreview } = usePreviewChat(idKey);
 
   return (
     <div>
@@ -36,7 +35,9 @@ const ApiContent = ({
             <Flex gap={8} vertical>
               <Space size={'middle'}>
                 <Button onClick={handlePreview}>{t('preview')}</Button>
-                <Button onClick={showEmbedModal}>{t('embedded')}</Button>
+                {/* <Button onClick={() => showEmbedModal(id)}>
+                  {t('embedded')}
+                </Button> */}
               </Space>
             </Flex>
           </Card>
@@ -50,13 +51,13 @@ const ApiContent = ({
           idKey={idKey}
         ></ChatApiKeyModal>
       )}
-      {embedVisible && (
+      {/* {embedVisible && (
         <EmbedModal
           token={embedToken}
           visible={embedVisible}
           hideModal={hideEmbedModal}
         ></EmbedModal>
-      )}
+      )} */}
     </div>
   );
 };

web/src/components/api-service/embed-modal/index.less

@@ -6,3 +6,7 @@
   padding: 10px;
   background-color: #ffffff09;
 }
+
+.id {
+  .linkText();
+}

web/src/components/api-service/embed-modal/index.tsx

@@ -1,21 +1,33 @@
 import CopyToClipboard from '@/components/copy-to-clipboard';
 import HightLightMarkdown from '@/components/highlight-markdown';
+import { SharedFrom } from '@/constants/chat';
 import { useTranslate } from '@/hooks/common-hooks';
 import { IModalProps } from '@/interfaces/common';
-import { Card, Modal, Tabs, TabsProps } from 'antd';
+import { Card, Modal, Tabs, TabsProps, Typography } from 'antd';
+
 import styles from './index.less';
 
+const { Paragraph, Link } = Typography;
+
 const EmbedModal = ({
   visible,
   hideModal,
   token = '',
-}: IModalProps<any> & { token: string }) => {
+  form,
+  beta = '',
+  isAgent,
+}: IModalProps<any> & {
+  token: string;
+  form: SharedFrom;
+  beta: string;
+  isAgent: boolean;
+}) => {
   const { t } = useTranslate('chat');
 
   const text = `
   ~~~ html
   <iframe
-  src="${location.origin}/chat/share?shared_id=${token}"
+  src="${location.origin}/chat/share?shared_id=${token}&from=${form}&auth=${beta}"
   style="width: 100%; height: 100%; min-height: 600px"
   frameborder="0"
 >
@@ -63,6 +75,23 @@ const EmbedModal = ({
       onCancel={hideModal}
     >
       <Tabs defaultActiveKey="1" items={items} onChange={onChange} />
+      <div className="text-base font-medium mt-4 mb-1">
+        {t(isAgent ? 'flow' : 'chat', { keyPrefix: 'header' })}
+        <span className="ml-1 inline-block">ID</span>
+      </div>
+      <Paragraph copyable={{ text: token }} className={styles.id}>
+        {token}
+      </Paragraph>
+      <Link
+        href={
+          isAgent
+            ? 'https://ragflow.io/docs/dev/http_api_reference#create-session-with-an-agent'
+            : 'https://ragflow.io/docs/dev/http_api_reference#create-session-with-chat-assistant'
+        }
+        target="_blank"
+      >
+        {t('howUseId')}
+      </Link>
     </Modal>
   );
 };

web/src/components/api-service/hooks.ts

@@ -6,6 +6,7 @@ import {
 } from '@/hooks/common-hooks';
 import {
   useCreateSystemToken,
+  useFetchManualSystemTokenList,
   useFetchSystemTokenList,
   useRemoveSystemToken,
 } from '@/hooks/user-setting-hooks';
@@ -17,9 +18,7 @@ import { useCallback } from 'react';
 export const useOperateApiKey = (idKey: string, dialogId?: string) => {
   const { removeToken } = useRemoveSystemToken();
   const { createToken, loading: creatingLoading } = useCreateSystemToken();
-  const { data: tokenList, loading: listLoading } = useFetchSystemTokenList({
-    [idKey]: dialogId,
-  });
+  const { data: tokenList, loading: listLoading } = useFetchSystemTokenList();
 
   const showDeleteConfirm = useShowDeleteConfirm();
 
@@ -72,49 +71,68 @@ export const useShowTokenEmptyError = () => {
   return { showTokenEmptyError };
 };
 
+export const useShowBetaEmptyError = () => {
+  const { t } = useTranslate('chat');
+
+  const showBetaEmptyError = useCallback(() => {
+    message.error(t('betaError'));
+  }, [t]);
+  return { showBetaEmptyError };
+};
+
 const getUrlWithToken = (token: string, from: string = 'chat') => {
   const { protocol, host } = window.location;
   return `${protocol}//${host}/chat/share?shared_id=${token}&from=${from}`;
 };
 
-const useFetchTokenListBeforeOtherStep = (idKey: string, dialogId?: string) => {
+const useFetchTokenListBeforeOtherStep = () => {
   const { showTokenEmptyError } = useShowTokenEmptyError();
+  const { showBetaEmptyError } = useShowBetaEmptyError();
+
+  const { data: tokenList, fetchSystemTokenList } =
+    useFetchManualSystemTokenList();
 
-  const { data: tokenList, refetch } = useFetchSystemTokenList({
-    [idKey]: dialogId,
-  });
+  let token = '',
+    beta = '';
 
-  const token =
+  if (Array.isArray(tokenList) && tokenList.length > 0) {
+    token = tokenList[0].token;
+    beta = tokenList[0].beta;
+  }
+
+  token =
     Array.isArray(tokenList) && tokenList.length > 0 ? tokenList[0].token : '';
 
   const handleOperate = useCallback(async () => {
-    const ret = await refetch();
-    const list = ret.data;
+    const ret = await fetchSystemTokenList();
+    const list = ret;
     if (Array.isArray(list) && list.length > 0) {
+      if (!list[0].beta) {
+        showBetaEmptyError();
+        return false;
+      }
       return list[0]?.token;
     } else {
       showTokenEmptyError();
       return false;
     }
-  }, [showTokenEmptyError, refetch]);
+  }, [fetchSystemTokenList, showBetaEmptyError, showTokenEmptyError]);
 
   return {
     token,
+    beta,
     handleOperate,
   };
 };
 
-export const useShowEmbedModal = (idKey: string, dialogId?: string) => {
+export const useShowEmbedModal = () => {
   const {
     visible: embedVisible,
     hideModal: hideEmbedModal,
     showModal: showEmbedModal,
   } = useSetModalState();
 
-  const { handleOperate, token } = useFetchTokenListBeforeOtherStep(
-    idKey,
-    dialogId,
-  );
+  const { handleOperate, token, beta } = useFetchTokenListBeforeOtherStep();
 
   const handleShowEmbedModal = useCallback(async () => {
     const succeed = await handleOperate();
@@ -128,11 +146,12 @@ export const useShowEmbedModal = (idKey: string, dialogId?: string) => {
     hideEmbedModal,
     embedVisible,
     embedToken: token,
+    beta,
   };
 };
 
-export const usePreviewChat = (idKey: string, dialogId?: string) => {
-  const { handleOperate } = useFetchTokenListBeforeOtherStep(idKey, dialogId);
+export const usePreviewChat = (idKey: string) => {
+  const { handleOperate } = useFetchTokenListBeforeOtherStep();
 
   const open = useCallback(
     (t: string) => {

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

@@ -1,8 +1,7 @@
 import { ReactComponent as AssistantIcon } from '@/assets/svg/assistant.svg';
 import { MessageType } from '@/constants/chat';
 import { useSetModalState } from '@/hooks/common-hooks';
-import { IReference } from '@/interfaces/database/chat';
-import { IChunk } from '@/interfaces/database/knowledge';
+import { IReference, IReferenceChunk } from '@/interfaces/database/chat';
 import classNames from 'classnames';
 import { memo, useCallback, useEffect, useMemo, useState } from 'react';
 
@@ -31,7 +30,7 @@ interface IProps extends Partial<IRemoveMessageById>, IRegenerateMessage {
   sendLoading?: boolean;
   nickname?: string;
   avatar?: string;
-  clickDocumentButton?: (documentId: string, chunk: IChunk) => void;
+  clickDocumentButton?: (documentId: string, chunk: IReferenceChunk) => void;
   index: number;
   showLikeButton?: boolean;
 }

web/src/components/pdf-drawer/hooks.ts

@@ -1,14 +1,16 @@
 import { useSetModalState } from '@/hooks/common-hooks';
-import { IChunk } from '@/interfaces/database/knowledge';
+import { IReferenceChunk } from '@/interfaces/database/chat';
 import { useCallback, useState } from 'react';
 
 export const useClickDrawer = () => {
   const { visible, showModal, hideModal } = useSetModalState();
-  const [selectedChunk, setSelectedChunk] = useState<IChunk>({} as IChunk);
+  const [selectedChunk, setSelectedChunk] = useState<IReferenceChunk>(
+    {} as IReferenceChunk,
+  );
   const [documentId, setDocumentId] = useState<string>('');
 
   const clickDocumentButton = useCallback(
-    (documentId: string, chunk: IChunk) => {
+    (documentId: string, chunk: IReferenceChunk) => {
       showModal();
       setSelectedChunk(chunk);
       setDocumentId(documentId);

web/src/components/pdf-drawer/index.tsx

@@ -1,11 +1,12 @@
 import { IModalProps } from '@/interfaces/common';
+import { IReferenceChunk } from '@/interfaces/database/chat';
 import { IChunk } from '@/interfaces/database/knowledge';
 import { Drawer } from 'antd';
 import DocumentPreviewer from '../pdf-previewer';
 
 interface IProps extends IModalProps<any> {
   documentId: string;
-  chunk: IChunk;
+  chunk: IChunk | IReferenceChunk;
 }
 
 export const PdfDrawer = ({

web/src/components/pdf-previewer/index.tsx

@@ -2,7 +2,9 @@ import {
   useGetChunkHighlights,
   useGetDocumentUrl,
 } from '@/hooks/document-hooks';
+import { IReferenceChunk } from '@/interfaces/database/chat';
 import { IChunk } from '@/interfaces/database/knowledge';
+import FileError from '@/pages/document-viewer/file-error';
 import { Skeleton } from 'antd';
 import { useEffect, useRef, useState } from 'react';
 import {
@@ -13,13 +15,12 @@ import {
   PdfLoader,
   Popup,
 } from 'react-pdf-highlighter';
-
-import FileError from '@/pages/document-viewer/file-error';
 import { useCatchDocumentError } from './hooks';
+
 import styles from './index.less';
 
 interface IProps {
-  chunk: IChunk;
+  chunk: IChunk | IReferenceChunk;
   documentId: string;
   visible: boolean;
 }

web/src/hooks/chat-hooks.ts

@@ -504,11 +504,17 @@ export const useCreateNextSharedConversation = () => {
   return { data, loading, createSharedConversation: mutateAsync };
 };
 
-export const useFetchNextSharedConversation = (conversationId: string) => {
+// deprecated
+export const useFetchNextSharedConversation = (
+  conversationId?: string | null,
+) => {
   const { data, isPending: loading } = useQuery({
     queryKey: ['fetchSharedConversation'],
     enabled: !!conversationId,
     queryFn: async () => {
+      if (!conversationId) {
+        return {};
+      }
       const { data } = await chatService.getExternalConversation(
         null,
         conversationId,

web/src/hooks/document-hooks.ts

@@ -1,3 +1,4 @@
+import { IReferenceChunk } from '@/interfaces/database/chat';
 import { IDocumentInfo } from '@/interfaces/database/document';
 import { IChunk } from '@/interfaces/database/knowledge';
 import { IChangeParserConfigRequestBody } from '@/interfaces/request/document';
@@ -32,7 +33,9 @@ export const useGetDocumentUrl = (documentId?: string) => {
   return getDocumentUrl;
 };
 
-export const useGetChunkHighlights = (selectedChunk: IChunk) => {
+export const useGetChunkHighlights = (
+  selectedChunk: IChunk | IReferenceChunk,
+) => {
   const [size, setSize] = useState({ width: 849, height: 1200 });
 
   const highlights: IHighlight[] = useMemo(() => {

web/src/hooks/logic-hooks.ts

@@ -12,6 +12,7 @@ import { PaginationProps, message } from 'antd';
 import { FormInstance } from 'antd/lib';
 import axios from 'axios';
 import { EventSourceParserStream } from 'eventsource-parser/stream';
+import { omit } from 'lodash';
 import {
   ChangeEventHandler,
   useCallback,
@@ -336,6 +337,7 @@ export const useSelectDerivedMessages = () => {
           }),
           prompt: answer.prompt,
           audio_binary: answer.audio_binary,
+          ...omit(answer, 'reference'),
         },
       ];
     });