Feat: Fixed the issue where the begin operator parameters could not be submitted during debugging #3221 (#8539)

### What problem does this PR solve?

Feat: Fixed the issue where the begin operator parameters could not be
submitted during debugging #3221

### Type of change


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

web/src/hooks/use-send-message.ts

@@ -11,6 +11,7 @@ export enum MessageEventType {
   Message = 'message',
   MessageEnd = 'message_end',
   WorkflowFinished = 'workflow_finished',
+  UserInputs = 'user_inputs',
 }
 
 export interface IAnswerEvent<T> {

web/src/pages/agent/chat/hooks.ts

@@ -83,8 +83,6 @@ export const useSendNextMessage = () => {
     loading,
     derivedMessages,
     ref,
-    addNewestQuestion,
-    addNewestAnswer,
     removeLatestMessage,
     removeMessageById,
     addNewestOneQuestion,

web/src/pages/agent/constant.tsx

@@ -852,6 +852,7 @@ export const RestrictedUpstreamMap = {
   [Operator.Agent]: [Operator.Begin],
   [Operator.TavilySearch]: [Operator.Begin],
   [Operator.StringTransform]: [Operator.Begin],
+  [Operator.UserFillUp]: [Operator.Begin],
 };
 
 export const NodeMap = {

web/src/pages/agent/debug-content/index.tsx

@@ -263,7 +263,6 @@ const DebugContent = ({
   const onSubmit = useCallback(
     (values: z.infer<typeof FormSchema>) => {
       console.log('🚀 ~ values:', values);
-      return values;
       const nextValues = Object.entries(values).map(([key, value]) => {
         const item = parameters[Number(key)];
         let nextValue = value;

web/src/pages/agent/form/components/query-variable.tsx

@@ -6,6 +6,7 @@ import {
   FormLabel,
   FormMessage,
 } from '@/components/ui/form';
+import { toLower } from 'lodash';
 import { ReactNode, useMemo } from 'react';
 import { useFormContext } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
@@ -31,7 +32,10 @@ export function QueryVariable({
   const finalOptions = useMemo(() => {
     return type
       ? nextOptions.map((x) => {
-          return { ...x, options: x.options.filter((y) => y.type === type) };
+          return {
+            ...x,
+            options: x.options.filter((y) => toLower(y.type).startsWith(type)),
+          };
         })
       : nextOptions;
   }, [nextOptions, type]);

web/src/pages/agent/run-sheet/index.tsx

@@ -1,5 +1,11 @@
+import {
+  Sheet,
+  SheetContent,
+  SheetHeader,
+  SheetTitle,
+} from '@/components/ui/sheet';
 import { IModalProps } from '@/interfaces/common';
-import { Drawer } from 'antd';
+import { cn } from '@/lib/utils';
 import { useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 import { BeginId } from '../constant';
@@ -8,14 +14,13 @@ import { useGetBeginNodeDataQuery } from '../hooks/use-get-begin-query';
 import { useSaveGraphBeforeOpeningDebugDrawer } from '../hooks/use-save-graph';
 import { BeginQuery } from '../interface';
 import useGraphStore from '../store';
-import { getDrawerWidth } from '../utils';
 
 const RunSheet = ({
   hideModal,
   showModal: showChatModal,
 }: IModalProps<any>) => {
   const { t } = useTranslation();
-  const updateNodeForm = useGraphStore((state) => state.updateNodeForm);
+  const { updateNodeForm, getNode } = useGraphStore((state) => state);
 
   const getBeginNodeDataQuery = useGetBeginNodeDataQuery();
   const query: BeginQuery[] = getBeginNodeDataQuery();
@@ -25,12 +30,26 @@ const RunSheet = ({
   );
 
   const handleRunAgent = useCallback(
-    (nextValues: Record<string, any>) => {
+    (nextValues: BeginQuery[]) => {
-      const currentNodes = updateNodeForm(BeginId, nextValues, ['query']);
+      const beginNode = getNode(BeginId);
+      const inputs: Record<string, BeginQuery> = beginNode?.data.form.inputs;
+
+      const nextInputs = Object.keys(inputs).reduce<Record<string, BeginQuery>>(
+        (pre, key) => {
+          const item = nextValues.find((x) => x.key === key);
+          if (item) {
+            pre[key] = { ...item };
+          }
+          return pre;
+        },
+        {},
+      );
+
+      const currentNodes = updateNodeForm(BeginId, nextInputs, ['inputs']);
       handleRun(currentNodes);
       hideModal?.();
     },
-    [handleRun, hideModal, updateNodeForm],
+    [getNode, handleRun, hideModal, updateNodeForm],
   );
 
   const onOk = useCallback(
@@ -41,21 +60,18 @@ const RunSheet = ({
   );
 
   return (
-    <Drawer
+    <Sheet onOpenChange={hideModal} open>
-      title={t('flow.testRun')}
+      <SheetContent className={cn('top-20 p-2')}>
-      placement="right"
+        <SheetHeader>
-      onClose={hideModal}
+          <SheetTitle>{t('flow.testRun')}</SheetTitle>
-      open
-      getContainer={false}
-      width={getDrawerWidth()}
-      mask={false}
-    >
           <DebugContent
             ok={onOk}
             parameters={query}
             loading={loading}
           ></DebugContent>
-    </Drawer>
+        </SheetHeader>
+      </SheetContent>
+    </Sheet>
   );
 };