Feat: Add the WaitingDialogue operator. #3221 (#7862)

### What problem does this PR solve?

Feat: Add the WaitingDialogue operator. #3221

### Type of change


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

web/src/pages/agent/agent-sidebar.tsx

@@ -21,6 +21,7 @@ import {
   componentMenuList,
   operatorMap,
 } from './constant';
+import { useHandleDrag } from './hooks';
 import OperatorIcon from './operator-icon';
 
 type OperatorItem = {
@@ -28,8 +29,14 @@ type OperatorItem = {
 };
 
 function OperatorCard({ name }: OperatorItem) {
+  const { handleDragStart } = useHandleDrag();
+
   return (
-    <Card className="bg-colors-background-inverse-weak  border-colors-outline-neutral-standard">
+    <Card
+      draggable
+      onDragStart={handleDragStart(name)}
+      className="bg-colors-background-inverse-weak  border-colors-outline-neutral-standard cursor-pointer"
+    >
       <CardContent className="p-2 flex items-center gap-2">
         <OperatorIcon
           name={name}

web/src/pages/agent/constant.tsx

@@ -63,6 +63,7 @@ import {
   CodeXml,
   IterationCcw,
   ListOrdered,
+  MessageSquareMore,
   OptionIcon,
   TextCursorInput,
   ToggleLeft,
@@ -109,6 +110,7 @@ export enum Operator {
   Iteration = 'Iteration',
   IterationStart = 'IterationItem',
   Code = 'Code',
+  WaitingDialogue = 'WaitingDialogue',
 }
 
 export const CommonOperatorList = Object.values(Operator).filter(
@@ -127,6 +129,7 @@ export const AgentOperatorList = [
   Operator.Concentrator,
   Operator.Template,
   Operator.Iteration,
+  Operator.WaitingDialogue,
   Operator.Note,
 ];
 
@@ -168,6 +171,7 @@ export const operatorIconMap = {
   [Operator.Iteration]: IterationCcw,
   [Operator.IterationStart]: CirclePower,
   [Operator.Code]: CodeXml,
+  [Operator.WaitingDialogue]: MessageSquareMore,
 };
 
 export const operatorMap: Record<
@@ -307,6 +311,7 @@ export const operatorMap: Record<
   [Operator.Iteration]: { backgroundColor: '#e6f7ff' },
   [Operator.IterationStart]: { backgroundColor: '#e6f7ff' },
   [Operator.Code]: { backgroundColor: '#4c5458' },
+  [Operator.WaitingDialogue]: { backgroundColor: '#a5d65c' },
 };
 
 export const componentMenuList = [
@@ -347,6 +352,9 @@ export const componentMenuList = [
   {
     name: Operator.Code,
   },
+  {
+    name: Operator.WaitingDialogue,
+  },
   {
     name: Operator.Note,
   },
@@ -670,6 +678,8 @@ export const initialCodeValues = {
   ],
 };
 
+export const initialWaitingDialogueValues = {};
+
 export const CategorizeAnchorPointPositions = [
   { top: 1, right: 34 },
   { top: 8, right: 18 },
@@ -752,6 +762,7 @@ export const RestrictedUpstreamMap = {
   [Operator.Iteration]: [Operator.Begin],
   [Operator.IterationStart]: [Operator.Begin],
   [Operator.Code]: [Operator.Begin],
+  [Operator.WaitingDialogue]: [Operator.Begin],
 };
 
 export const NodeMap = {
@@ -792,6 +803,7 @@ export const NodeMap = {
   [Operator.Iteration]: 'group',
   [Operator.IterationStart]: 'iterationStartNode',
   [Operator.Code]: 'ragNode',
+  [Operator.WaitingDialogue]: 'ragNode',
 };
 
 export const LanguageOptions = [

web/src/pages/agent/form-sheet/use-form-config-map.tsx

@@ -170,6 +170,15 @@ export function useFormConfigMap() {
         ),
       }),
     },
+    [Operator.WaitingDialogue]: {
+      component: CodeForm,
+      defaultValues: {},
+      schema: z.object({
+        arguments: z.array(
+          z.object({ name: z.string(), component_id: z.string() }),
+        ),
+      }),
+    },
     [Operator.Baidu]: {
       component: BaiduForm,
       defaultValues: { top_n: 10 },

web/src/pages/agent/form/begin-form/query-table.tsx

@@ -40,7 +40,7 @@ interface IProps {
   showModal(index: number, record: BeginQuery): void;
 }
 
-export function QueryTable({ data, deleteRecord, showModal }: IProps) {
+export function QueryTable({ data = [], deleteRecord, showModal }: IProps) {
   const { t } = useTranslation();
 
   const [sorting, setSorting] = React.useState<SortingState>([]);

web/src/pages/agent/form/waiting-dialogue-form/index.tsx

@@ -0,0 +1,77 @@
+import Editor, { loader } from '@monaco-editor/react';
+import { INextOperatorForm } from '../../interface';
+
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@/components/ui/form';
+import { RAGFlowSelect } from '@/components/ui/select';
+import { ProgrammingLanguage } from '@/constants/agent';
+import { ICodeForm } from '@/interfaces/database/flow';
+import { useTranslation } from 'react-i18next';
+
+loader.config({ paths: { vs: '/vs' } });
+
+const options = [
+  ProgrammingLanguage.Python,
+  ProgrammingLanguage.Javascript,
+].map((x) => ({ value: x, label: x }));
+
+const CodeForm = ({ form, node }: INextOperatorForm) => {
+  const formData = node?.data.form as ICodeForm;
+  const { t } = useTranslation();
+
+  return (
+    <Form {...form}>
+      <form
+        className="p-5 space-y-5"
+        onSubmit={(e) => {
+          e.preventDefault();
+        }}
+      >
+        <FormField
+          control={form.control}
+          name="script"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel className="flex items-center justify-between">
+                Code
+                <FormField
+                  control={form.control}
+                  name="lang"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormControl>
+                        <RAGFlowSelect {...field} options={options} />
+                      </FormControl>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+              </FormLabel>
+              <FormControl>
+                <Editor
+                  height={300}
+                  theme="vs-dark"
+                  language={formData.lang}
+                  options={{
+                    minimap: { enabled: false },
+                    automaticLayout: true,
+                  }}
+                  {...field}
+                />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+      </form>
+    </Form>
+  );
+};
+
+export default CodeForm;

web/src/pages/agent/hooks/use-watch-form-change.ts

@@ -39,8 +39,6 @@ export const useHandleFormValuesChange = (
 
   useEffect(() => {
     const subscription = form?.watch((value, { name, type, values }) => {
-      console.log('🚀 ~ subscription ~ value:', value);
-
       if (id && name) {
         console.log(
           '🚀 ~ useEffect ~ value:',