Feat: expose shared chat

isthaison · Dec 6, 2024 · 8191c9f · 8191c9f
1 parent f54a8d7
commit 8191c9f
Show file tree

Hide file tree

Showing 8 changed files with 87 additions and 84 deletions.
diff --git a/web/src/components/api-service/embed-modal/index.tsx b/web/src/components/api-service/embed-modal/index.tsx
@@ -1,5 +1,6 @@
 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';
@@ -9,13 +10,15 @@ const EmbedModal = ({
   visible,
   hideModal,
   token = '',
-}: IModalProps<any> & { token: string }) => {
+  form,
+  beta = '',
+}: IModalProps<any> & { token: string; form: SharedFrom; beta: string }) => {
   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"
 >

diff --git a/web/src/components/api-service/hooks.ts b/web/src/components/api-service/hooks.ts
@@ -84,7 +84,15 @@ const useFetchTokenListBeforeOtherStep = (idKey: string, dialogId?: string) => {
     [idKey]: dialogId,
   });
 
-  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 () => {
@@ -100,6 +108,7 @@ const useFetchTokenListBeforeOtherStep = (idKey: string, dialogId?: string) => {
 
   return {
     token,
+    beta,
     handleOperate,
   };
 };
@@ -111,7 +120,7 @@ export const useShowEmbedModal = (idKey: string, dialogId?: string) => {
     showModal: showEmbedModal,
   } = useSetModalState();
 
-  const { handleOperate, token } = useFetchTokenListBeforeOtherStep(
+  const { handleOperate, token, beta } = useFetchTokenListBeforeOtherStep(
     idKey,
     dialogId,
   );
@@ -128,6 +137,7 @@ export const useShowEmbedModal = (idKey: string, dialogId?: string) => {
     hideEmbedModal,
     embedVisible,
     embedToken: token,
+    beta,
   };
 };
 

diff --git a/web/src/hooks/chat-hooks.ts b/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,

diff --git a/web/src/interfaces/database/chat.ts b/web/src/interfaces/database/chat.ts
@@ -117,6 +117,7 @@ export interface IToken {
   token: string;
   update_date?: any;
   update_time?: any;
+  beta: string;
 }
 
 export interface IStats {

diff --git a/web/src/pages/chat/share/large.tsx b/web/src/pages/chat/share/large.tsx
@@ -1,21 +1,20 @@
 import MessageInput from '@/components/message-input';
 import MessageItem from '@/components/message-item';
 import { MessageType, SharedFrom } from '@/constants/chat';
-import { useFetchNextSharedConversation } from '@/hooks/chat-hooks';
 import { useSendButtonDisabled } from '@/pages/chat/hooks';
 import { Flex, Spin } from 'antd';
 import { forwardRef } from 'react';
 import {
-  useCreateSharedConversationOnMount,
   useGetSharedChatSearchParams,
   useSendSharedMessage,
 } from '../shared-hooks';
 import { buildMessageItemReference } from '../utils';
 import styles from './index.less';
 
 const ChatContainer = () => {
-  const { conversationId } = useCreateSharedConversationOnMount();
-  const { data } = useFetchNextSharedConversation(conversationId);
+  const { from, sharedId: conversationId } = useGetSharedChatSearchParams();
+
+  // const { data } = useFetchNextSharedConversation(conversationId);
 
   const {
     handlePressEnter,
@@ -25,9 +24,12 @@ const ChatContainer = () => {
     loading,
     ref,
     derivedMessages,
-  } = useSendSharedMessage(conversationId);
+  } = useSendSharedMessage();
   const sendDisabled = useSendButtonDisabled(value);
-  const { from } = useGetSharedChatSearchParams();
+
+  if (!conversationId) {
+    return <div>empty</div>;
+  }
 
   return (
     <>
@@ -44,7 +46,7 @@ const ChatContainer = () => {
                     reference={buildMessageItemReference(
                       {
                         message: derivedMessages,
-                        reference: data?.data?.reference,
+                        reference: [],
                       },
                       message,
                     )}

diff --git a/web/src/pages/chat/shared-hooks.ts b/web/src/pages/chat/shared-hooks.ts
@@ -1,48 +1,19 @@
 import { MessageType, SharedFrom } from '@/constants/chat';
-import {
-  useCreateNextSharedConversation,
-  useFetchNextSharedConversation,
-} from '@/hooks/chat-hooks';
+import { useCreateNextSharedConversation } from '@/hooks/chat-hooks';
 import {
   useSelectDerivedMessages,
   useSendMessageWithSse,
 } from '@/hooks/logic-hooks';
 import { Message } from '@/interfaces/database/chat';
-import api from '@/utils/api';
+import { get } from 'lodash';
 import trim from 'lodash/trim';
-import { useCallback, useEffect, useState } from 'react';
+import { useCallback, useEffect } from 'react';
 import { useSearchParams } from 'umi';
 import { v4 as uuid } from 'uuid';
 import { useHandleMessageInputChange } from './hooks';
 
-export const useCreateSharedConversationOnMount = () => {
-  const [currentQueryParameters] = useSearchParams();
-  const [conversationId, setConversationId] = useState('');
-
-  const { createSharedConversation: createConversation } =
-    useCreateNextSharedConversation();
-  const sharedId = currentQueryParameters.get('shared_id');
-  const userId = currentQueryParameters.get('user_id');
-
-  const setConversation = useCallback(async () => {
-    if (sharedId) {
-      const data = await createConversation(userId ?? undefined);
-      const id = data.data?.id;
-      if (id) {
-        setConversationId(id);
-      }
-    }
-  }, [createConversation, sharedId, userId]);
-
-  useEffect(() => {
-    setConversation();
-  }, [setConversation]);
-
-  return { conversationId };
-};
-
-export const useSelectNextSharedMessages = (conversationId: string) => {
-  const { data, loading } = useFetchNextSharedConversation(conversationId);
+export const useSelectNextSharedMessages = () => {
+  // const { data, loading } = useFetchNextSharedConversation(conversationId);
 
   const {
     derivedMessages,
@@ -53,16 +24,16 @@ export const useSelectNextSharedMessages = (conversationId: string) => {
     removeLatestMessage,
   } = useSelectDerivedMessages();
 
-  useEffect(() => {
-    setDerivedMessages(data?.data?.message);
-  }, [setDerivedMessages, data]);
+  // useEffect(() => {
+  //   setDerivedMessages(data?.data?.message);
+  // }, [setDerivedMessages, data]);
 
   return {
     derivedMessages,
     addNewestAnswer,
     addNewestQuestion,
     removeLatestMessage,
-    loading,
+    // loading,
     ref,
     setDerivedMessages,
   };
@@ -72,28 +43,38 @@ export const useSendButtonDisabled = (value: string) => {
   return trim(value) === '';
 };
 
-export const useSendSharedMessage = (conversationId: string) => {
+export const useGetSharedChatSearchParams = () => {
+  const [searchParams] = useSearchParams();
+
+  return {
+    from: searchParams.get('from') as SharedFrom,
+    sharedId: searchParams.get('shared_id'),
+  };
+};
+
+export const useSendSharedMessage = () => {
+  const { from, sharedId: conversationId } = useGetSharedChatSearchParams();
   const { createSharedConversation: setConversation } =
     useCreateNextSharedConversation();
   const { handleInputChange, value, setValue } = useHandleMessageInputChange();
   const { send, answer, done } = useSendMessageWithSse(
-    api.completeExternalConversation,
+    `/api/v1/${from === SharedFrom.Agent ? 'agentbots' : 'chatbots'}/${conversationId}/completions`,
   );
   const {
     derivedMessages,
     ref,
     removeLatestMessage,
     addNewestAnswer,
     addNewestQuestion,
-    loading,
-  } = useSelectNextSharedMessages(conversationId);
+  } = useSelectNextSharedMessages();
 
   const sendMessage = useCallback(
     async (message: Message, id?: string) => {
       const res = await send({
         conversation_id: id ?? conversationId,
         quote: false,
-        messages: [...(derivedMessages ?? []), message],
+        question: message,
+        session_id: get(derivedMessages, '0.session_id'),
       });
 
       if (res && (res?.response.status !== 200 || res?.data?.code !== 0)) {
@@ -102,7 +83,7 @@ export const useSendSharedMessage = (conversationId: string) => {
         removeLatestMessage();
       }
     },
-    [conversationId, derivedMessages, removeLatestMessage, setValue, send],
+    [send, conversationId, derivedMessages, setValue, removeLatestMessage],
   );
 
   const handleSendMessage = useCallback(
@@ -120,6 +101,15 @@ export const useSendSharedMessage = (conversationId: string) => {
     [conversationId, setConversation, sendMessage],
   );
 
+  const fetchSessionId = useCallback(async () => {
+    const ret = await send({ question: '' });
+    console.log('🚀 ~ fetchSessionId ~ ret:', ret);
+  }, [send]);
+
+  useEffect(() => {
+    fetchSessionId();
+  }, [fetchSessionId, send]);
+
   useEffect(() => {
     if (answer.answer) {
       addNewestAnswer(answer);
@@ -154,16 +144,7 @@ export const useSendSharedMessage = (conversationId: string) => {
     value,
     sendLoading: !done,
     ref,
-    loading,
+    loading: false,
     derivedMessages,
   };
 };
-
-export const useGetSharedChatSearchParams = () => {
-  const [searchParams] = useSearchParams();
-
-  return {
-    from: searchParams.get('from') as SharedFrom,
-    sharedId: searchParams.get('shared_id'),
-  };
-};
diff --git a/web/src/pages/flow/header/index.tsx b/web/src/pages/flow/header/index.tsx
@@ -1,4 +1,6 @@
-import ChatOverviewModal from '@/components/api-service/chat-overview-modal';
+import EmbedModal from '@/components/api-service/embed-modal';
+import { useShowEmbedModal } from '@/components/api-service/hooks';
+import { SharedFrom } from '@/constants/chat';
 import { useSetModalState, useTranslate } from '@/hooks/common-hooks';
 import { useFetchFlow } from '@/hooks/flow-hooks';
 import { ArrowLeftOutlined } from '@ant-design/icons';
@@ -25,15 +27,12 @@ const FlowHeader = ({ showChatDrawer, chatDrawerVisible }: IProps) => {
   const { handleRun } = useSaveGraphBeforeOpeningDebugDrawer(showChatDrawer);
   const { data } = useFetchFlow();
   const { t } = useTranslate('flow');
-  const {
-    visible: overviewVisible,
-    hideModal: hideOverviewModal,
-    // showModal: showOverviewModal,
-  } = useSetModalState();
   const { visible, hideModal, showModal } = useSetModalState();
   const { id } = useParams();
   const time = useWatchAgentChange(chatDrawerVisible);
   const getBeginNodeDataQuery = useGetBeginNodeDataQuery();
+  const { showEmbedModal, hideEmbedModal, embedVisible, beta } =
+    useShowEmbedModal('canvasId', id);
 
   const handleRunAgent = useCallback(() => {
     const query: BeginQuery[] = getBeginNodeDataQuery();
@@ -70,21 +69,22 @@ const FlowHeader = ({ showChatDrawer, chatDrawerVisible }: IProps) => {
           <Button type="primary" onClick={() => saveGraph()}>
             <b>{t('save')}</b>
           </Button>
-          {/* <Button type="primary" onClick={showOverviewModal} disabled>
+          <Button type="primary" onClick={showEmbedModal}>
             <b>{t('publish')}</b>
-          </Button> */}
+          </Button>
           <Button type="primary" onClick={showModal}>
             <b>Agent ID</b>
           </Button>
         </Space>
       </Flex>
-      {overviewVisible && (
-        <ChatOverviewModal
-          visible={overviewVisible}
-          hideModal={hideOverviewModal}
-          id={id!}
-          idKey="canvasId"
-        ></ChatOverviewModal>
+      {embedVisible && (
+        <EmbedModal
+          visible={embedVisible}
+          hideModal={hideEmbedModal}
+          token={id!}
+          form={SharedFrom.Agent}
+          beta={beta}
+        ></EmbedModal>
       )}
       {visible && <FlowIdModal hideModal={hideModal}></FlowIdModal>}
     </>

diff --git a/web/src/utils/authorization-util.ts b/web/src/utils/authorization-util.ts
@@ -47,9 +47,9 @@ const storage = {
 };
 
 export const getAuthorization = () => {
-  const sharedId = getSearchValue('shared_id');
-  const authorization = sharedId
-    ? 'Bearer ' + sharedId
+  const auth = getSearchValue('auth');
+  const authorization = auth
+    ? 'Bearer ' + auth
     : storage.getAuthorization() || '';
 
   return authorization;