Feat: Displays the embedded page of the chat module #3221 (#9532)

### What problem does this PR solve?

Feat: Displays the embedded page of the chat module #3221
Feat: Let the agen operator support the selection of tts model #3221

### Type of change


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

web/src/pages/agent/hooks/use-send-shared-message.ts

@@ -0,0 +1,65 @@
+import { SharedFrom } from '@/constants/chat';
+import { useSetModalState } from '@/hooks/common-hooks';
+import { IEventList } from '@/hooks/use-send-message';
+import { useSendAgentMessage } from '@/pages/agent/chat/use-send-agent-message';
+import trim from 'lodash/trim';
+import { useCallback, useState } from 'react';
+import { useSearchParams } from 'umi';
+
+export const useSendButtonDisabled = (value: string) => {
+  return trim(value) === '';
+};
+
+export const useGetSharedChatSearchParams = () => {
+  const [searchParams] = useSearchParams();
+  const data_prefix = 'data_';
+  const data = Object.fromEntries(
+    searchParams
+      .entries()
+      .filter(([key]) => key.startsWith(data_prefix))
+      .map(([key, value]) => [key.replace(data_prefix, ''), value]),
+  );
+  return {
+    from: searchParams.get('from') as SharedFrom,
+    sharedId: searchParams.get('shared_id'),
+    locale: searchParams.get('locale'),
+    data: data,
+    visibleAvatar: searchParams.get('visible_avatar')
+      ? searchParams.get('visible_avatar') !== '1'
+      : true,
+  };
+};
+
+export const useSendNextSharedMessage = (
+  addEventList: (data: IEventList, messageId: string) => void,
+) => {
+  const { from, sharedId: conversationId } = useGetSharedChatSearchParams();
+  const url = `/api/v1/${from === SharedFrom.Agent ? 'agentbots' : 'chatbots'}/${conversationId}/completions`;
+
+  const [params, setParams] = useState<any[]>([]);
+
+  const {
+    visible: parameterDialogVisible,
+    hideModal: hideParameterDialog,
+    showModal: showParameterDialog,
+  } = useSetModalState();
+
+  const ret = useSendAgentMessage(url, addEventList, params);
+
+  const ok = useCallback(
+    (params: any[]) => {
+      setParams(params);
+      hideParameterDialog();
+    },
+    [hideParameterDialog],
+  );
+
+  return {
+    ...ret,
+    hasError: false,
+    parameterDialogVisible,
+    hideParameterDialog,
+    showParameterDialog,
+    ok,
+  };
+};

web/src/pages/agent/hooks/use-show-dialog.ts

@@ -1,18 +1,13 @@
+import { useFetchTokenListBeforeOtherStep } from '@/components/embed-dialog/use-show-embed-dialog';
 import { SharedFrom } from '@/constants/chat';
-import {
-  useSetModalState,
-  useShowDeleteConfirm,
-  useTranslate,
-} from '@/hooks/common-hooks';
+import { useShowDeleteConfirm } from '@/hooks/common-hooks';
 import {
   useCreateSystemToken,
-  useFetchManualSystemTokenList,
   useFetchSystemTokenList,
   useRemoveSystemToken,
 } from '@/hooks/user-setting-hooks';
 import { IStats } from '@/interfaces/database/chat';
 import { useQueryClient } from '@tanstack/react-query';
-import { message } from 'antd';
 import { useCallback } from 'react';
 
 export const useOperateApiKey = (idKey: string, dialogId?: string) => {
@@ -62,94 +57,11 @@ export const useSelectChartStatsList = (): ChartStatsType => {
   }, {} as ChartStatsType);
 };
 
-export const useShowTokenEmptyError = () => {
-  const { t } = useTranslate('chat');
-
-  const showTokenEmptyError = useCallback(() => {
-    message.error(t('tokenError'));
-  }, [t]);
-  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}`;
 };
 
-export const useFetchTokenListBeforeOtherStep = () => {
-  const { showTokenEmptyError } = useShowTokenEmptyError();
-  const { showBetaEmptyError } = useShowBetaEmptyError();
-
-  const { data: tokenList, fetchSystemTokenList } =
-    useFetchManualSystemTokenList();
-
-  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 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;
-    }
-  }, [fetchSystemTokenList, showBetaEmptyError, showTokenEmptyError]);
-
-  return {
-    token,
-    beta,
-    handleOperate,
-  };
-};
-
-export const useShowEmbedModal = () => {
-  const {
-    visible: embedVisible,
-    hideModal: hideEmbedModal,
-    showModal: showEmbedModal,
-  } = useSetModalState();
-
-  const { handleOperate, token, beta } = useFetchTokenListBeforeOtherStep();
-
-  const handleShowEmbedModal = useCallback(async () => {
-    const succeed = await handleOperate();
-    if (succeed) {
-      showEmbedModal();
-    }
-  }, [handleOperate, showEmbedModal]);
-
-  return {
-    showEmbedModal: handleShowEmbedModal,
-    hideEmbedModal,
-    embedVisible,
-    embedToken: token,
-    beta,
-  };
-};
-
 export const usePreviewChat = (idKey: string) => {
   const { handleOperate } = useFetchTokenListBeforeOtherStep();