From 5ba51b21c98e1a74be37d1d75df5445d82efe243 Mon Sep 17 00:00:00 2001
From: balibabu <cike8899@users.noreply.github.com>
Date: Mon, 22 Dec 2025 14:37:39 +0800
Subject: [PATCH] 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>
---
 .../components/webhook-response-status.tsx    | 19 ++++++++++++
 .../form/begin-form/webhook/response.tsx      |  9 ++----
 .../pages/agent/form/message-form/index.tsx   |  8 +++++
 .../message-form/use-show-response-status.ts  | 30 +++++++++++++++++++
 4 files changed, 60 insertions(+), 6 deletions(-)
 create mode 100644 web/src/components/webhook-response-status.tsx
 create mode 100644 web/src/pages/agent/form/message-form/use-show-response-status.ts

diff --git a/web/src/components/webhook-response-status.tsx b/web/src/components/webhook-response-status.tsx
new file mode 100644
index 000000000..5c6725c4e
--- /dev/null
+++ b/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>
+  );
+}
diff --git a/web/src/pages/agent/form/begin-form/webhook/response.tsx b/web/src/pages/agent/form/begin-form/webhook/response.tsx
index a3813bd8e..69fb8f09b 100644
--- a/web/src/pages/agent/form/begin-form/webhook/response.tsx
+++ b/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')}
diff --git a/web/src/pages/agent/form/message-form/index.tsx b/web/src/pages/agent/form/message-form/index.tsx
index 73f52f85e..55a44def0 100644
--- a/web/src/pages/agent/form/message-form/index.tsx
+++ b/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>
diff --git a/web/src/pages/agent/form/message-form/use-show-response-status.ts b/web/src/pages/agent/form/message-form/use-show-response-status.ts
new file mode 100644
index 000000000..75ba1fb64
--- /dev/null
+++ b/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;
+}