Feat: Make the agent dialog window exposed to the outside world fill in the begin form #3221 (#9124)

### What problem does this PR solve?
Feat: Make the agent dialog window exposed to the outside world fill in
the begin form #3221

### Type of change


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

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

@@ -1,7 +1,9 @@
 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) => {
@@ -34,10 +36,30 @@ export const useSendNextSharedMessage = (
   const { from, sharedId: conversationId } = useGetSharedChatSearchParams();
   const url = `/api/v1/${from === SharedFrom.Agent ? 'agentbots' : 'chatbots'}/${conversationId}/completions`;
 
-  const ret = useSendAgentMessage(url, addEventList);
+  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/next-chats/share/index.tsx

@@ -3,10 +3,9 @@ import { NextMessageInput } from '@/components/message-input/next';
 import MessageItem from '@/components/next-message-item';
 import PdfDrawer from '@/components/pdf-drawer';
 import { useClickDrawer } from '@/components/pdf-drawer/hooks';
-import { MessageType, SharedFrom } from '@/constants/chat';
-import { useFetchNextConversationSSE } from '@/hooks/chat-hooks';
+import { MessageType } from '@/constants/chat';
 import {
-  useFetchAgentAvatar,
+  useFetchExternalAgentInputs,
   useUploadCanvasFileWithProgress,
 } from '@/hooks/use-agent-request';
 import { cn } from '@/lib/utils';
@@ -14,11 +13,13 @@ import i18n from '@/locales/config';
 import { useCacheChatLog } from '@/pages/agent/hooks/use-cache-chat-log';
 import { useSendButtonDisabled } from '@/pages/chat/hooks';
 import { buildMessageUuidWithRole } from '@/utils/chat';
-import React, { forwardRef, useCallback, useMemo } from 'react';
+import { isEmpty } from 'lodash';
+import React, { forwardRef, useCallback } from 'react';
 import {
   useGetSharedChatSearchParams,
   useSendNextSharedMessage,
 } from '../hooks/use-send-shared-message';
+import { ParameterDialog } from './parameter-dialog';
 
 const ChatContainer = () => {
   const {
@@ -48,8 +49,13 @@ const ChatContainer = () => {
     stopOutputMessage,
     findReferenceByMessageId,
     appendUploadResponseList,
+    parameterDialogVisible,
+    hideParameterDialog,
+    showParameterDialog,
+    ok,
   } = useSendNextSharedMessage(addEventList);
 
+  const { data } = useFetchExternalAgentInputs();
   const sendDisabled = useSendButtonDisabled(value);
 
   // useEffect(() => {
@@ -64,12 +70,6 @@ const ChatContainer = () => {
   //   }
   // }, [derivedMessages, setCurrentMessageId]);
 
-  const useFetchAvatar = useMemo(() => {
-    return from === SharedFrom.Agent
-      ? useFetchAgentAvatar
-      : useFetchNextConversationSSE;
-  }, [from]);
-
   const handleUploadFile: NonNullable<FileUploadProps['onUpload']> =
     useCallback(
       async (files, options) => {
@@ -84,12 +84,16 @@ const ChatContainer = () => {
       i18n.changeLanguage(locale);
     }
   }, [locale, visibleAvatar]);
-  const { data: avatarData } = useFetchAvatar();
+
+  React.useEffect(() => {
+    if (!isEmpty(data)) {
+      showParameterDialog();
+    }
+  }, [data, showParameterDialog]);
 
   if (!conversationId) {
     return <div>empty</div>;
   }
-
   return (
     <section className="h-[100vh] flex justify-center items-center">
       <div className=" w-[80vw]">
@@ -108,7 +112,6 @@ const ChatContainer = () => {
                     }
                     setCurrentMessageId={setCurrentMessageId}
                     key={buildMessageUuidWithRole(message)}
-                    avatarDialog={avatarData.avatar}
                     item={message}
                     nickname="You"
                     reference={findReferenceByMessageId(message.id)}
@@ -156,6 +159,12 @@ const ChatContainer = () => {
           chunk={selectedChunk}
         ></PdfDrawer>
       )}
+      {parameterDialogVisible && (
+        <ParameterDialog
+          hideModal={hideParameterDialog}
+          ok={ok}
+        ></ParameterDialog>
+      )}
     </section>
   );
 };

web/src/pages/next-chats/share/parameter-dialog.tsx

@@ -0,0 +1,33 @@
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog';
+import { useFetchExternalAgentInputs } from '@/hooks/use-agent-request';
+import { IModalProps } from '@/interfaces/common';
+import DebugContent from '@/pages/agent/debug-content';
+import { buildBeginInputListFromObject } from '@/pages/agent/form/begin-form/utils';
+
+interface IProps extends IModalProps<any> {
+  ok(parameters: any[]): void;
+}
+export function ParameterDialog({ hideModal, ok }: IProps) {
+  const { data } = useFetchExternalAgentInputs();
+
+  return (
+    <Dialog open onOpenChange={hideModal}>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>Parameter</DialogTitle>
+        </DialogHeader>
+        <DebugContent
+          parameters={buildBeginInputListFromObject(data)}
+          ok={ok}
+          isNext={false}
+          btnText={'Submit'}
+        ></DebugContent>
+      </DialogContent>
+    </Dialog>
+  );
+}