Feat: Provide iframe for external calls

isthaison · Dec 9, 2024 · 9e3a3d4 · 9e3a3d4
1 parent fe2b6ba
commit 9e3a3d4
Show file tree

Hide file tree

Showing 14 changed files with 142 additions and 80 deletions.
diff --git a/web/src/components/api-service/chat-api-key-modal/index.tsx b/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>

diff --git a/web/src/components/api-service/chat-overview-modal/api-content.tsx b/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>
   );
 };

diff --git a/web/src/components/api-service/embed-modal/index.less b/web/src/components/api-service/embed-modal/index.less
@@ -6,3 +6,7 @@
   padding: 10px;
   background-color: #e8e8ea;
 }
+
+.id {
+  .linkText();
+}
diff --git a/web/src/components/api-service/embed-modal/index.tsx b/web/src/components/api-service/embed-modal/index.tsx
@@ -3,16 +3,25 @@ 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 = '',
   form,
   beta = '',
-}: IModalProps<any> & { token: string; form: SharedFrom; beta: string }) => {
+  isAgent,
+}: IModalProps<any> & {
+  token: string;
+  form: SharedFrom;
+  beta: string;
+  isAgent: boolean;
+}) => {
   const { t } = useTranslate('chat');
 
   const text = `
@@ -66,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>
   );
 };

diff --git a/web/src/components/api-service/hooks.ts b/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();
 
@@ -77,12 +76,11 @@ const getUrlWithToken = (token: string, from: string = 'chat') => {
   return `${protocol}//${host}/chat/share?shared_id=${token}&from=${from}`;
 };
 
-const useFetchTokenListBeforeOtherStep = (idKey: string, dialogId?: string) => {
+const useFetchTokenListBeforeOtherStep = () => {
   const { showTokenEmptyError } = useShowTokenEmptyError();
 
-  const { data: tokenList, refetch } = useFetchSystemTokenList({
-    [idKey]: dialogId,
-  });
+  const { data: tokenList, fetchSystemTokenList } =
+    useFetchManualSystemTokenList();
 
   let token = '',
     beta = '';
@@ -96,15 +94,15 @@ const useFetchTokenListBeforeOtherStep = (idKey: string, dialogId?: string) => {
     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) {
       return list[0]?.token;
     } else {
       showTokenEmptyError();
       return false;
     }
-  }, [showTokenEmptyError, refetch]);
+  }, [fetchSystemTokenList, showTokenEmptyError]);
 
   return {
     token,
@@ -113,17 +111,14 @@ const useFetchTokenListBeforeOtherStep = (idKey: string, dialogId?: string) => {
   };
 };
 
-export const useShowEmbedModal = (idKey: string, dialogId?: string) => {
+export const useShowEmbedModal = () => {
   const {
     visible: embedVisible,
     hideModal: hideEmbedModal,
     showModal: showEmbedModal,
   } = useSetModalState();
 
-  const { handleOperate, token, beta } = useFetchTokenListBeforeOtherStep(
-    idKey,
-    dialogId,
-  );
+  const { handleOperate, token, beta } = useFetchTokenListBeforeOtherStep();
 
   const handleShowEmbedModal = useCallback(async () => {
     const succeed = await handleOperate();
@@ -141,8 +136,8 @@ export const useShowEmbedModal = (idKey: string, dialogId?: string) => {
   };
 };
 
-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) => {

diff --git a/web/src/hooks/logic-hooks.ts b/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'),
         },
       ];
     });

diff --git a/web/src/hooks/user-setting-hooks.tsx b/web/src/hooks/user-setting-hooks.tsx
@@ -169,17 +169,34 @@ export const useFetchSystemStatus = () => {
   };
 };
 
-export const useFetchSystemTokenList = (params: Record<string, any>) => {
+export const useFetchManualSystemTokenList = () => {
+  const {
+    data,
+    isPending: loading,
+    mutateAsync,
+  } = useMutation({
+    mutationKey: ['fetchManualSystemTokenList'],
+    mutationFn: async () => {
+      const { data } = await userService.listToken();
+
+      return data?.data ?? [];
+    },
+  });
+
+  return { data, loading, fetchSystemTokenList: mutateAsync };
+};
+
+export const useFetchSystemTokenList = () => {
   const {
     data,
     isFetching: loading,
     refetch,
   } = useQuery<IToken[]>({
-    queryKey: ['fetchSystemTokenList', params],
+    queryKey: ['fetchSystemTokenList'],
     initialData: [],
     gcTime: 0,
     queryFn: async () => {
-      const { data } = await userService.listToken(params);
+      const { data } = await userService.listToken();
 
       return data?.data ?? [];
     },
@@ -213,6 +230,7 @@ export const useRemoveSystemToken = () => {
 
 export const useCreateSystemToken = () => {
   const queryClient = useQueryClient();
+
   const {
     data,
     isPending: loading,

diff --git a/web/src/interfaces/database/chat.ts b/web/src/interfaces/database/chat.ts
@@ -35,7 +35,7 @@ export interface IDialog {
   description: string;
   icon: string;
   id: string;
-  dialog_id?: string;
+  dialog_id: string;
   kb_ids: string[];
   kb_names: string[];
   language: string;