From 6a170b2f6e3748fb7c2821dfc0fcb5ced8454a2f Mon Sep 17 00:00:00 2001 From: balibabu Date: Thu, 31 Jul 2025 09:34:45 +0800 Subject: [PATCH] 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/components/llm-select/llm-label.tsx | 2 +- web/src/components/message-input/next.tsx | 1 + web/src/hooks/use-agent-request.ts | 27 ++++++++++++++ .../agent/chat/use-send-agent-message.ts | 10 ++++-- web/src/pages/agent/constant.tsx | 10 ++++++ .../pages/agent/form/exesql-form/index.tsx | 7 ++++ web/src/pages/agent/index.tsx | 16 ++------- .../hooks/use-send-shared-message.ts | 24 ++++++++++++- web/src/pages/next-chats/share/index.tsx | 35 ++++++++++++------- .../next-chats/share/parameter-dialog.tsx | 33 +++++++++++++++++ web/src/services/agent-service.ts | 5 +++ web/src/utils/api.ts | 3 ++ 12 files changed, 141 insertions(+), 32 deletions(-) create mode 100644 web/src/pages/next-chats/share/parameter-dialog.tsx diff --git a/web/src/components/llm-select/llm-label.tsx b/web/src/components/llm-select/llm-label.tsx index 1840ae957..1bccd1778 100644 --- a/web/src/components/llm-select/llm-label.tsx +++ b/web/src/components/llm-select/llm-label.tsx @@ -20,7 +20,7 @@ const LLMLabel = ({ value }: IProps) => { height={20} size={'small'} /> - {llmName} + {llmName} ); }; diff --git a/web/src/components/message-input/next.tsx b/web/src/components/message-input/next.tsx index 189033678..2e612836b 100644 --- a/web/src/components/message-input/next.tsx +++ b/web/src/components/message-input/next.tsx @@ -143,6 +143,7 @@ export function NextMessageInput({ size="icon" variant="ghost" className="size-7 rounded-sm" + disabled={isUploading || sendLoading} > Attach file diff --git a/web/src/hooks/use-agent-request.ts b/web/src/hooks/use-agent-request.ts index b3b972f27..0799d525e 100644 --- a/web/src/hooks/use-agent-request.ts +++ b/web/src/hooks/use-agent-request.ts @@ -10,6 +10,7 @@ import { DSL, IFlow, IFlowTemplate } from '@/interfaces/database/flow'; import { IDebugSingleRequestBody } from '@/interfaces/request/agent'; import i18n from '@/locales/config'; import { BeginId } from '@/pages/agent/constant'; +import { BeginQuery } from '@/pages/agent/interface'; import { useGetSharedChatSearchParams } from '@/pages/chat/shared-hooks'; import agentService, { fetchAgentLogsByCanvasId, @@ -46,6 +47,7 @@ export const enum AgentApiAction { FetchVersionList = 'fetchVersionList', FetchVersion = 'fetchVersion', FetchAgentAvatar = 'fetchAgentAvatar', + FetchExternalAgentInputs = 'fetchExternalAgentInputs', } export const EmptyDsl = { @@ -584,3 +586,28 @@ export const useFetchAgentLog = (searchParams: IAgentLogsRequest) => { return { data, loading }; }; + +export const useFetchExternalAgentInputs = () => { + const { sharedId } = useGetSharedChatSearchParams(); + + const { + data, + isFetching: loading, + refetch, + } = useQuery>({ + queryKey: [AgentApiAction.FetchExternalAgentInputs], + initialData: {} as Record, + refetchOnReconnect: false, + refetchOnMount: false, + refetchOnWindowFocus: false, + gcTime: 0, + enabled: !!sharedId, + queryFn: async () => { + const { data } = await agentService.fetchExternalAgentInputs(sharedId!); + + return data?.data ?? {}; + }, + }); + + return { data, loading, refetch }; +}; diff --git a/web/src/pages/agent/chat/use-send-agent-message.ts b/web/src/pages/agent/chat/use-send-agent-message.ts index 9a262d44d..cb1bc0e2c 100644 --- a/web/src/pages/agent/chat/use-send-agent-message.ts +++ b/web/src/pages/agent/chat/use-send-agent-message.ts @@ -176,6 +176,7 @@ export function useSetUploadResponseData() { export const useSendAgentMessage = ( url?: string, addEventList?: (data: IEventList, messageId: string) => void, + beginParams?: any[], ) => { const { id: agentId } = useParams(); const { handleInputChange, value, setValue } = useHandleMessageInputChange(); @@ -226,7 +227,9 @@ export const useSendAgentMessage = ( params.query = message.content; // params.message_id = message.id; - params.inputs = transferInputsArrayToObject(query); // begin operator inputs + params.inputs = transferInputsArrayToObject( + beginParams ? beginParams : query, + ); // begin operator inputs params.files = uploadResponseList; @@ -248,13 +251,14 @@ export const useSendAgentMessage = ( }, [ agentId, - sessionId, send, + clearUploadResponseList, inputs, + beginParams, uploadResponseList, + sessionId, setValue, removeLatestMessage, - clearUploadResponseList, ], ); diff --git a/web/src/pages/agent/constant.tsx b/web/src/pages/agent/constant.tsx index 8e6af99fe..8950b658b 100644 --- a/web/src/pages/agent/constant.tsx +++ b/web/src/pages/agent/constant.tsx @@ -487,6 +487,16 @@ export const initialExeSqlValues = { port: 3306, password: '', max_records: 1024, + outputs: { + formalized_content: { + value: '', + type: 'string', + }, + json: { + value: [], + type: 'Array', + }, + }, }; export const initialSwitchValues = { diff --git a/web/src/pages/agent/form/exesql-form/index.tsx b/web/src/pages/agent/form/exesql-form/index.tsx index 9b4e32f60..a0f05a41c 100644 --- a/web/src/pages/agent/form/exesql-form/index.tsx +++ b/web/src/pages/agent/form/exesql-form/index.tsx @@ -20,10 +20,14 @@ import { useFormValues } from '../../hooks/use-form-values'; import { useWatchFormChange } from '../../hooks/use-watch-form-change'; import { INextOperatorForm } from '../../interface'; import { ExeSQLOptions } from '../../options'; +import { buildOutputList } from '../../utils/build-output-list'; import { FormWrapper } from '../components/form-wrapper'; +import { Output } from '../components/output'; import { QueryVariable } from '../components/query-variable'; import { FormSchema, useSubmitForm } from './use-submit-form'; +const outputList = buildOutputList(initialExeSqlValues.outputs); + export function ExeSQLFormWidgets({ loading }: { loading: boolean }) { const form = useFormContext(); const { t } = useTranslate('flow'); @@ -153,6 +157,9 @@ function ExeSQLForm({ node }: INextOperatorForm) { +
+ +
); } diff --git a/web/src/pages/agent/index.tsx b/web/src/pages/agent/index.tsx index f306a4ba6..4abb178d1 100644 --- a/web/src/pages/agent/index.tsx +++ b/web/src/pages/agent/index.tsx @@ -18,7 +18,6 @@ import { import { SharedFrom } from '@/constants/chat'; import { useSetModalState } from '@/hooks/common-hooks'; import { useNavigatePage } from '@/hooks/logic-hooks/navigate-hooks'; -import { useFetchUserInfo } from '@/hooks/user-setting-hooks'; import { ReactFlowProvider } from '@xyflow/react'; import { ChevronDown, @@ -37,10 +36,7 @@ import AgentCanvas from './canvas'; import EmbedDialog from './embed-dialog'; import { useHandleExportOrImportJsonFile } from './hooks/use-export-json'; import { useFetchDataOnMount } from './hooks/use-fetch-data'; -import { - useGetBeginNodeDataInputs, - useGetBeginNodeDataQueryIsSafe, -} from './hooks/use-get-begin-query'; +import { useGetBeginNodeDataInputs } from './hooks/use-get-begin-query'; import { useSaveGraph, useSaveGraphBeforeOpeningDebugDrawer, @@ -69,7 +65,6 @@ export default function Agent() { showModal: showChatDrawer, } = useSetModalState(); const { t } = useTranslation(); - const { data: userInfo } = useFetchUserInfo(); // const openDocument = useOpenDocument(); const { @@ -99,7 +94,6 @@ export default function Agent() { const { showEmbedModal, hideEmbedModal, embedVisible, beta } = useShowEmbedModal(); const { navigateToAgentLogs } = useNavigatePage(); - const isBeginNodeDataQuerySafe = useGetBeginNodeDataQueryIsSafe(); return (
@@ -165,13 +159,7 @@ export default function Agent() { {location.hostname !== 'demo.ragflow.io' && ( <> - + {t('common.embedIntoSite')} diff --git a/web/src/pages/next-chats/hooks/use-send-shared-message.ts b/web/src/pages/next-chats/hooks/use-send-shared-message.ts index bdbb472b9..e241422aa 100644 --- a/web/src/pages/next-chats/hooks/use-send-shared-message.ts +++ b/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([]); + + 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, }; }; diff --git a/web/src/pages/next-chats/share/index.tsx b/web/src/pages/next-chats/share/index.tsx index aef9b1e1a..bb197e44f 100644 --- a/web/src/pages/next-chats/share/index.tsx +++ b/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 = 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
empty
; } - return (
@@ -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} > )} + {parameterDialogVisible && ( + + )}
); }; diff --git a/web/src/pages/next-chats/share/parameter-dialog.tsx b/web/src/pages/next-chats/share/parameter-dialog.tsx new file mode 100644 index 000000000..7868d32f2 --- /dev/null +++ b/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 { + ok(parameters: any[]): void; +} +export function ParameterDialog({ hideModal, ok }: IProps) { + const { data } = useFetchExternalAgentInputs(); + + return ( + + + + Parameter + + + + + ); +} diff --git a/web/src/services/agent-service.ts b/web/src/services/agent-service.ts index b7684ac68..978100b1a 100644 --- a/web/src/services/agent-service.ts +++ b/web/src/services/agent-service.ts @@ -24,6 +24,7 @@ const { fetchCanvas, fetchAgentAvatar, fetchAgentLogs, + fetchExternalAgentInputs, } = api; const methods = { @@ -107,6 +108,10 @@ const methods = { url: fetchAgentLogs, method: 'get', }, + fetchExternalAgentInputs: { + url: fetchExternalAgentInputs, + method: 'get', + }, } as const; const agentService = registerNextServer(methods); diff --git a/web/src/utils/api.ts b/web/src/utils/api.ts index 679dfeddf..316820687 100644 --- a/web/src/utils/api.ts +++ b/web/src/utils/api.ts @@ -1,4 +1,5 @@ let api_host = `/v1`; +const ExternalApi = `/api`; export { api_host }; @@ -155,6 +156,8 @@ export default { uploadAgentFile: (id?: string) => `${api_host}/canvas/upload/${id}`, fetchAgentLogs: (canvasId: string) => `${api_host}/canvas/${canvasId}/sessions`, + fetchExternalAgentInputs: (canvasId: string) => + `${ExternalApi}${api_host}/agentbots/${canvasId}/inputs`, // mcp server listMcpServer: `${api_host}/mcp_server/list`,