Feat: Add webhook component

web/src/locales/en.ts

@@ -1910,6 +1910,15 @@ Important structured information may include: names, dates, locations, events, k
         removeFirst: 'Remove first',
         removeLast: 'Remove last',
       },
+      webhook: {
+        name: 'Webhook',
+        methods: 'Methods',
+        contentTypes: 'Content types',
+        security: 'Security',
+        schema: 'Schema',
+        response: 'Response',
+        executionMode: 'Execution mode',
+      },
     },
     llmTools: {
       bad_calculator: {

web/src/locales/zh.ts

@@ -1755,6 +1755,14 @@ Tokenizer 会根据所选方式将内容存储为对应的数据结构。`,
         removeFirst: '移除第一个',
         removeLast: '移除最后一个',
       },
+      webhook: {
+        methods: '方法',
+        contentTypes: '内容类型',
+        security: '安全配置',
+        schema: 'Schema',
+        response: '响应内容',
+        executionMode: '执行模式',
+      },
     },
     footer: {
       profile: 'All rights reserved @ React',

web/src/pages/agent/constant/index.tsx

@@ -25,6 +25,7 @@ export * from './pipeline';
 export enum AgentDialogueMode {
   Conversational = 'conversational',
   Task = 'task',
+  Webhook = 'Webhook',
 }
 
 import { ModelVariableType } from '@/constants/knowledge';
@@ -930,3 +931,25 @@ export enum AgentVariableType {
   Begin = 'begin',
   Conversation = 'conversation',
 }
+
+export enum WebhookMethod {
+  Post = 'POST',
+  Get = 'GET',
+  Put = 'PUT',
+  Patch = 'PATCH',
+  Delete = 'DELETE',
+  Head = 'HEAD',
+}
+
+export enum WebhookContentType {
+  ApplicationJson = 'application/json',
+  MultipartFormData = 'multipart/form-data',
+  ApplicationXWwwFormUrlencoded = 'application/x-www-form-urlencoded',
+  TextPlain = 'text/plain',
+  ApplicationOctetStream = 'application/octet-stream',
+}
+
+export enum WebhookExecutionMode {
+  Immediately = 'Immediately',
+  Streaming = 'Streaming',
+}

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

@@ -26,10 +26,12 @@ import { QueryTable } from './query-table';
 import { useEditQueryRecord } from './use-edit-query';
 import { useValues } from './use-values';
 import { useWatchFormChange } from './use-watch-change';
+import { WebHook } from './webhook';
 
 const ModeOptions = [
   { value: AgentDialogueMode.Conversational, label: t('flow.conversational') },
   { value: AgentDialogueMode.Task, label: t('flow.task') },
+  { value: AgentDialogueMode.Webhook, label: t('flow.webhook.name') },
 ];
 
 function BeginForm({ node }: INextOperatorForm) {
@@ -53,6 +55,12 @@ function BeginForm({ node }: INextOperatorForm) {
         }),
       )
       .optional(),
+    methods: z.string().optional(),
+    content_types: z.string().optional(),
+    security: z.string().optional(),
+    schema: z.string().optional(),
+    response: z.string().optional(),
+    execution_mode: z.string().optional(),
   });
 
   const form = useForm({
@@ -158,6 +166,7 @@ function BeginForm({ node }: INextOperatorForm) {
             )}
           />
         )}
+        {mode === AgentDialogueMode.Webhook && <WebHook></WebHook>}
         {/* Create a hidden field to make Form instance record this */}
         <FormField
           control={form.control}

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

@@ -0,0 +1,49 @@
+import { SelectWithSearch } from '@/components/originui/select-with-search';
+import { RAGFlowFormItem } from '@/components/ragflow-form';
+import { Textarea } from '@/components/ui/textarea';
+import { buildOptions } from '@/utils/form';
+import { useTranslation } from 'react-i18next';
+import {
+  WebhookContentType,
+  WebhookExecutionMode,
+  WebhookMethod,
+} from '../../constant';
+
+export function WebHook() {
+  const { t } = useTranslation();
+
+  return (
+    <>
+      <RAGFlowFormItem name="methods" label={t('flow.webhook.methods')}>
+        <SelectWithSearch
+          options={buildOptions(WebhookMethod)}
+        ></SelectWithSearch>
+      </RAGFlowFormItem>
+      <RAGFlowFormItem
+        name="content_types"
+        label={t('flow.webhook.contentTypes')}
+      >
+        <SelectWithSearch
+          options={buildOptions(WebhookContentType)}
+        ></SelectWithSearch>
+      </RAGFlowFormItem>
+      <RAGFlowFormItem name="security" label={t('flow.webhook.security')}>
+        <Textarea></Textarea>
+      </RAGFlowFormItem>
+      <RAGFlowFormItem name="schema" label={t('flow.webhook.schema')}>
+        <Textarea></Textarea>
+      </RAGFlowFormItem>
+      <RAGFlowFormItem name="response" label={t('flow.webhook.response')}>
+        <Textarea></Textarea>
+      </RAGFlowFormItem>
+      <RAGFlowFormItem
+        name="execution_mode"
+        label={t('flow.webhook.executionMode')}
+      >
+        <SelectWithSearch
+          options={buildOptions(WebhookExecutionMode)}
+        ></SelectWithSearch>
+      </RAGFlowFormItem>
+    </>
+  );
+}