Feat: When the webhook returns a field in streaming format, the message displays the status field. #10427 (#12075)

### What problem does this PR solve?

Feat: When the webhook returns a field in streaming format, the message
displays the status field. #10427

### Type of change


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

Co-authored-by: balibabu <assassin_cike@163.com>

web/src/components/webhook-response-status.tsx

@@ -0,0 +1,19 @@
+import { useTranslation } from 'react-i18next';
+import { RAGFlowFormItem } from './ragflow-form';
+import { Input } from './ui/input';
+
+type WebHookResponseStatusFormFieldProps = {
+  name: string;
+};
+
+export function WebHookResponseStatusFormField({
+  name,
+}: WebHookResponseStatusFormFieldProps) {
+  const { t } = useTranslation();
+
+  return (
+    <RAGFlowFormItem name={name} label={t('flow.webhook.status')}>
+      <Input type="number"></Input>
+    </RAGFlowFormItem>
+  );
+}

web/src/pages/agent/form/begin-form/webhook/response.tsx

@@ -1,8 +1,8 @@
 import { Collapse } from '@/components/collapse';
 import { SelectWithSearch } from '@/components/originui/select-with-search';
 import { RAGFlowFormItem } from '@/components/ragflow-form';
-import { Input } from '@/components/ui/input';
 import { Textarea } from '@/components/ui/textarea';
+import { WebHookResponseStatusFormField } from '@/components/webhook-response-status';
 import { WebhookExecutionMode } from '@/pages/agent/constant';
 import { buildOptions } from '@/utils/form';
 import { useFormContext, useWatch } from 'react-hook-form';
@@ -31,12 +31,9 @@ export function WebhookResponse() {
         </RAGFlowFormItem>
         {executionMode === WebhookExecutionMode.Immediately && (
           <>
-            <RAGFlowFormItem
+            <WebHookResponseStatusFormField
               name={'response.status'}
-              label={t('flow.webhook.status')}
-            >
-              <Input type="number"></Input>
-            </RAGFlowFormItem>
+            ></WebHookResponseStatusFormField>
             {/* <DynamicResponse
               name="response.headers_template"
               label={t('flow.webhook.headersTemplate')}

web/src/pages/agent/form/message-form/index.tsx

@@ -10,6 +10,7 @@ import {
 } from '@/components/ui/form';
 import { RAGFlowSelect } from '@/components/ui/select';
 import { Switch } from '@/components/ui/switch';
+import { WebHookResponseStatusFormField } from '@/components/webhook-response-status';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { X } from 'lucide-react';
 import { memo } from 'react';
@@ -20,6 +21,7 @@ import { ExportFileType } from '../../constant';
 import { INextOperatorForm } from '../../interface';
 import { FormWrapper } from '../components/form-wrapper';
 import { PromptEditor } from '../components/prompt-editor';
+import { useShowWebhookResponseStatus } from './use-show-response-status';
 import { useValues } from './use-values';
 import { useWatchFormChange } from './use-watch-change';
 
@@ -38,6 +40,7 @@ function MessageForm({ node }: INextOperatorForm) {
       .optional(),
     output_format: z.string().optional(),
     auto_play: z.boolean().optional(),
+    status: z.number().optional(),
   });
 
   const form = useForm({
@@ -56,9 +59,14 @@ function MessageForm({ node }: INextOperatorForm) {
     control: form.control,
   });
 
+  const showWebhookResponseStatus = useShowWebhookResponseStatus(form);
+
   return (
     <Form {...form}>
       <FormWrapper>
+        {showWebhookResponseStatus && (
+          <WebHookResponseStatusFormField name="status"></WebHookResponseStatusFormField>
+        )}
         <FormContainer>
           <FormItem>
             <FormLabel tooltip={t('flow.msgTip')}>{t('flow.msg')}</FormLabel>

web/src/pages/agent/form/message-form/use-show-response-status.ts

@@ -0,0 +1,30 @@
+import { isEmpty } from 'lodash';
+import { useEffect, useMemo } from 'react';
+import { UseFormReturn } from 'react-hook-form';
+import {
+  AgentDialogueMode,
+  BeginId,
+  WebhookExecutionMode,
+} from '../../constant';
+import useGraphStore from '../../store';
+import { BeginFormSchemaType } from '../begin-form/schema';
+
+export function useShowWebhookResponseStatus(form: UseFormReturn<any>) {
+  const getNode = useGraphStore((state) => state.getNode);
+
+  const showWebhookResponseStatus = useMemo(() => {
+    const formData: BeginFormSchemaType = getNode(BeginId)?.data.form;
+    return (
+      formData.mode === AgentDialogueMode.Webhook &&
+      formData.execution_mode === WebhookExecutionMode.Streaming
+    );
+  }, []);
+
+  useEffect(() => {
+    if (showWebhookResponseStatus && isEmpty(form.getValues('status'))) {
+      form.setValue('status', 200, { shouldValidate: true, shouldDirty: true });
+    }
+  }, []);
+
+  return showWebhookResponseStatus;
+}