Feat: Modify the data structure of the chunk in the conversation #3909 (#3955)

### What problem does this PR solve?

Feat: Modify the data structure of the chunk in the conversation #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, refetch } = useFetchSystemTokenList({
-    [idKey]: dialogId,
-  });
+  const { data: tokenList, fetchSystemTokenList } =
+    useFetchManualSystemTokenList();
 
-  const token =
+  let token = '',
+    beta = '';
+
+  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) => {