pengjunjie/ragflow
1
0
Fork 1
mirror of https://github.com/infiniflow/ragflow.git synced 2025-12-24 15:36:50 +08:00
Code Issues Packages Projects Releases Wiki Activity

Feat: Set the return value of the webhook to a string. #10427 (#11945)

Browse Source 
### What problem does this PR solve?

Feat: Set the return value of the webhook to a string. #10427

### Type of change


- [x] New Feature (non-breaking change which adds functionality)
This commit is contained in:
balibabu
2025-12-15 11:09:08 +08:00
committed by GitHub
parent 81eb03d230
commit 1ddd11f045
11 changed files with 132 additions and 147 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
web/src/locales/en.ts
View File

@ -2006,28 +2006,28 @@ Important structured information may include: names, dates, locations, events, k
schema: 'Schema',
response: 'Response',
executionMode: 'Execution mode',
authMethods: 'Authentication Methods',
authType: 'Authentication Type',
limit: 'Request Limit',
per: 'Time Period',
maxBodySize: 'Maximum Body Size',
ipWhitelist: 'IP Whitelist',
tokenHeader: 'Token Header',
tokenValue: 'Token Value',
authMethods: 'Authentication methods',
authType: 'Authentication type',
limit: 'Request limit',
per: 'Time period',
maxBodySize: 'Maximum body size',
ipWhitelist: 'Ip whitelist',
tokenHeader: 'Token header',
tokenValue: 'Token value',
username: 'Username',
password: 'Password',
algorithm: 'Algorithm',
secret: 'Secret',
issuer: 'Issuer',
audience: 'Audience',
requiredClaims: 'Required Claims',
requiredClaims: 'Required claims',
header: 'Header',
status: 'Status',
headersTemplate: 'Headers Template',
bodyTemplate: 'Body Template',
headersTemplate: 'Headers template',
bodyTemplate: 'Body template',
basic: 'Basic',
bearer: 'Bearer',
apiKey: 'Api Key',
apiKey: 'Api key',
queryParameters: 'Query parameters',
headerParameters: 'Header parameters',
requestBodyParameters: 'Request body parameters',

6
web/src/pages/agent/constant/index.tsx
View File

@ -1037,3 +1037,9 @@ export enum WebhookRequestParameters {
Number = TypesWithArray.Number,
Boolean = TypesWithArray.Boolean,
}
export enum WebhookStatus {
Testing = 'testing',
Live = 'live',
Stopped = 'stopped',
}

2
web/src/pages/agent/form/begin-form/index.tsx
View File

@ -83,7 +83,7 @@ function BeginForm({ node }: INextOperatorForm) {
});
return (
<section className="px-5 space-y-5">
<section className="px-5 space-y-5 pb-4">
<Form {...form}>
<FormField
control={form.control}

8
web/src/pages/agent/form/begin-form/schema.ts
View File

@ -69,10 +69,10 @@ export const BeginFormSchema = z.object({
response: z
.object({
status: z.number(),
headers_template: z.array(
z.object({ key: z.string(), value: z.string() }),
),
body_template: z.array(z.object({ key: z.string(), value: z.string() })),
// headers_template: z.array(
// z.object({ key: z.string(), value: z.string() }),
// ),
body_template: z.string().optional(),
})
.optional(),
execution_mode: z.string().optional(),

2
web/src/pages/agent/form/begin-form/use-handle-mode-change.ts
View File

@ -15,7 +15,9 @@ const initialFormValuesMap = {
schema: {},
'security.auth_type': WebhookSecurityAuthType.Basic,
'security.rate_limit.per': RateLimitPerList[0],
'security.rate_limit.limit': 10,
'security.max_body_size': WebhookMaxBodySize[0],
'response.status': 200,
execution_mode: WebhookExecutionMode.Immediately,
content_types: WebhookContentType.ApplicationJson,
};

18
web/src/pages/agent/form/begin-form/webhook/dynamic-request.tsx
View File

@ -9,8 +9,12 @@ import { loader } from '@monaco-editor/react';
import { omit } from 'lodash';
import { X } from 'lucide-react';
import { ReactNode } from 'react';
import { useFieldArray, useFormContext } from 'react-hook-form';
import { TypesWithArray, WebhookRequestParameters } from '../../../constant';
import { useFieldArray, useFormContext, useWatch } from 'react-hook-form';
import {
TypesWithArray,
WebhookContentType,
WebhookRequestParameters,
} from '../../../constant';
import { DynamicFormHeader } from '../../components/dynamic-fom-header';
loader.config({ paths: { vs: '/vs' } });
@ -44,6 +48,12 @@ export function DynamicRequest({
isObject = false,
}: SelectKeysProps) {
const form = useFormContext();
const contentType = useWatch({
name: 'content_types',
control: form.control,
});
const isFormDataContentType =
contentType === WebhookContentType.MultipartFormData;
const { fields, remove, append } = useFieldArray({
name: name,
@ -84,7 +94,9 @@ export function DynamicRequest({
onChange={(val) => {
field.onChange(val);
}}
options={buildParametersOptions(isObject)}
options={buildParametersOptions(
isObject && isFormDataContentType,
)}
></SelectWithSearch>
)}
</RAGFlowFormItem>

109
web/src/pages/agent/form/begin-form/webhook/dynamic-response.tsx
View File

@ -11,13 +11,9 @@ import { Editor, loader } from '@monaco-editor/react';
import { X } from 'lucide-react';
import { ReactNode, useCallback } from 'react';
import { useFieldArray, useFormContext } from 'react-hook-form';
import { InputMode, TypesWithArray } from '../../../constant';
import {
InputModeOptions,
buildConversationVariableSelectOptions,
} from '../../../utils';
import { TypesWithArray } from '../../../constant';
import { buildConversationVariableSelectOptions } from '../../../utils';
import { DynamicFormHeader } from '../../components/dynamic-fom-header';
import { QueryVariable } from '../../components/query-variable';
loader.config({ paths: { vs: '/vs' } });
@ -33,8 +29,6 @@ type SelectKeysProps = {
const VariableTypeOptions = buildConversationVariableSelectOptions();
const modeField = 'input_mode';
const ConstantValueMap = {
[TypesWithArray.Boolean]: true,
[TypesWithArray.Number]: 0,
@ -63,71 +57,46 @@ export function DynamicResponse({
});
const initializeValue = useCallback(
(mode: string, variableType: string, valueFieldAlias: string) => {
if (mode === InputMode.Variable) {
form.setValue(valueFieldAlias, '', { shouldDirty: true });
} else {
const val = ConstantValueMap[variableType as TypesWithArray];
form.setValue(valueFieldAlias, val, { shouldDirty: true });
}
(variableType: string, valueFieldAlias: string) => {
const val = ConstantValueMap[variableType as TypesWithArray];
form.setValue(valueFieldAlias, val, { shouldDirty: true });
},
[form],
);
const handleModeChange = useCallback(
(mode: string, valueFieldAlias: string, operatorFieldAlias: string) => {
const variableType = form.getValues(operatorFieldAlias);
initializeValue(mode, variableType, valueFieldAlias);
},
[form, initializeValue],
);
const handleVariableTypeChange = useCallback(
(variableType: string, valueFieldAlias: string, modeFieldAlias: string) => {
const mode = form.getValues(modeFieldAlias);
initializeValue(mode, variableType, valueFieldAlias);
(variableType: string, valueFieldAlias: string) => {
initializeValue(variableType, valueFieldAlias);
},
[form, initializeValue],
[initializeValue],
);
const renderParameter = useCallback(
(operatorFieldName: string, modeFieldName: string) => {
const mode = form.getValues(modeFieldName);
(operatorFieldName: string) => {
const logicalOperator = form.getValues(operatorFieldName);
if (mode === InputMode.Constant) {
if (logicalOperator === TypesWithArray.Boolean) {
return <BoolSegmented></BoolSegmented>;
}
if (logicalOperator === TypesWithArray.Boolean) {
return <BoolSegmented></BoolSegmented>;
}
if (logicalOperator === TypesWithArray.Number) {
return <Input className="w-full" type="number"></Input>;
}
if (logicalOperator === TypesWithArray.Number) {
return <Input className="w-full" type="number"></Input>;
}
if (logicalOperator === TypesWithArray.String) {
return <Textarea></Textarea>;
}
return (
<Editor
height={300}
theme={isDarkTheme ? 'vs-dark' : 'vs'}
language={'json'}
options={{
minimap: { enabled: false },
automaticLayout: true,
}}
/>
);
if (logicalOperator === TypesWithArray.String) {
return <Textarea></Textarea>;
}
return (
<QueryVariable
types={[logicalOperator]}
hideLabel
pureQuery
></QueryVariable>
<Editor
height={300}
theme={isDarkTheme ? 'vs-dark' : 'vs'}
language={'json'}
options={{
minimap: { enabled: false },
automaticLayout: true,
}}
/>
);
},
[form, isDarkTheme],
@ -142,7 +111,6 @@ export function DynamicResponse({
append({
[keyField]: '',
[valueField]: '',
[modeField]: InputMode.Constant,
[operatorField]: TypesWithArray.String,
})
}
@ -152,7 +120,6 @@ export function DynamicResponse({
const keyFieldAlias = `${name}.${index}.${keyField}`;
const valueFieldAlias = `${name}.${index}.${valueField}`;
const operatorFieldAlias = `${name}.${index}.${operatorField}`;
const modeFieldAlias = `${name}.${index}.${modeField}`;
return (
<section key={field.id} className="flex gap-2">
@ -167,11 +134,7 @@ export function DynamicResponse({
<SelectWithSearch
value={field.value}
onChange={(val) => {
handleVariableTypeChange(
val,
valueFieldAlias,
modeFieldAlias,
);
handleVariableTypeChange(val, valueFieldAlias);
field.onChange(val);
}}
options={VariableTypeOptions}
@ -179,25 +142,9 @@ export function DynamicResponse({
)}
</RAGFlowFormItem>
<Separator className="w-2" />
<RAGFlowFormItem name={modeFieldAlias} className="flex-1">
{(field) => (
<SelectWithSearch
value={field.value}
onChange={(val) => {
handleModeChange(
val,
valueFieldAlias,
operatorFieldAlias,
);
field.onChange(val);
}}
options={InputModeOptions}
></SelectWithSearch>
)}
</RAGFlowFormItem>
</div>
<RAGFlowFormItem name={valueFieldAlias} className="w-full">
{renderParameter(operatorFieldAlias, modeFieldAlias)}
{renderParameter(operatorFieldAlias)}
</RAGFlowFormItem>
</div>

38
web/src/pages/agent/form/begin-form/webhook/index.tsx
View File

@ -1,16 +1,15 @@
import { Collapse } from '@/components/collapse';
import CopyToClipboard from '@/components/copy-to-clipboard';
import { SelectWithSearch } from '@/components/originui/select-with-search';
import { RAGFlowFormItem } from '@/components/ragflow-form';
import { Input } from '@/components/ui/input';
import { MultiSelect } from '@/components/ui/multi-select';
import { Textarea } from '@/components/ui/textarea';
import { buildOptions } from '@/utils/form';
import { useFormContext, useWatch } from 'react-hook-form';
import { useTranslation } from 'react-i18next';
import { useParams } from 'umi';
import {
RateLimitPerList,
WebhookContentType,
WebhookExecutionMode,
WebhookMaxBodySize,
WebhookMethod,
WebhookSecurityAuthType,
@ -24,15 +23,16 @@ const RateLimitPerOptions = buildOptions(RateLimitPerList);
export function WebHook() {
const { t } = useTranslation();
const form = useFormContext();
const { id } = useParams();
const executionMode = useWatch({
control: form.control,
name: 'execution_mode',
});
const text = `${location.protocol}//${location.host}/api/v1/webhook/${id}`;
return (
<>
<div className="bg-bg-card p-1 rounded-md flex gap-2">
<span className="flex-1 truncate">{text}</span>
<CopyToClipboard text={text}></CopyToClipboard>
</div>
<RAGFlowFormItem name="methods" label={t('flow.webhook.methods')}>
{(field) => (
<MultiSelect
@ -45,14 +45,7 @@ export function WebHook() {
/>
)}
</RAGFlowFormItem>
<RAGFlowFormItem
name="content_types"
label={t('flow.webhook.contentTypes')}
>
<SelectWithSearch
options={buildOptions(WebhookContentType)}
></SelectWithSearch>
</RAGFlowFormItem>
<Collapse title={<div>Security</div>}>
<section className="space-y-4">
<RAGFlowFormItem
@ -98,17 +91,8 @@ export function WebHook() {
>
<Textarea></Textarea>
</RAGFlowFormItem>
<RAGFlowFormItem
name="execution_mode"
label={t('flow.webhook.executionMode')}
>
<SelectWithSearch
options={buildOptions(WebhookExecutionMode)}
></SelectWithSearch>
</RAGFlowFormItem>
{executionMode === WebhookExecutionMode.Immediately && (
<WebhookResponse></WebhookResponse>
)}
<WebhookResponse></WebhookResponse>
</>
);
}

12
web/src/pages/agent/form/begin-form/webhook/request-schema.tsx
View File

@ -1,4 +1,8 @@
import { Collapse } from '@/components/collapse';
import { SelectWithSearch } from '@/components/originui/select-with-search';
import { RAGFlowFormItem } from '@/components/ragflow-form';
import { WebhookContentType } from '@/pages/agent/constant';
import { buildOptions } from '@/utils/form';
import { useTranslation } from 'react-i18next';
import { DynamicRequest } from './dynamic-request';
@ -8,6 +12,14 @@ export function WebhookRequestSchema() {
return (
<Collapse title={<div>{t('flow.webhook.schema')}</div>}>
<section className="space-y-4">
<RAGFlowFormItem
name="content_types"
label={t('flow.webhook.contentTypes')}
>
<SelectWithSearch
options={buildOptions(WebhookContentType)}
></SelectWithSearch>
</RAGFlowFormItem>
<DynamicRequest
name="schema.query"
label={t('flow.webhook.queryParameters')}

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

@ -1,29 +1,58 @@
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 { WebhookExecutionMode } from '@/pages/agent/constant';
import { buildOptions } from '@/utils/form';
import { useFormContext, useWatch } from 'react-hook-form';
import { useTranslation } from 'react-i18next';
import { DynamicResponse } from './dynamic-response';
export function WebhookResponse() {
const { t } = useTranslation();
const form = useFormContext();
const executionMode = useWatch({
control: form.control,
name: 'execution_mode',
});
return (
<Collapse title={<div>Response</div>}>
<section className="space-y-4">
<RAGFlowFormItem
name={'response.status'}
label={t('flow.webhook.status')}
name="execution_mode"
label={t('flow.webhook.executionMode')}
>
<Input type="number"></Input>
<SelectWithSearch
options={buildOptions(WebhookExecutionMode)}
></SelectWithSearch>
</RAGFlowFormItem>
<DynamicResponse
name="response.headers_template"
label={t('flow.webhook.headersTemplate')}
></DynamicResponse>
<DynamicResponse
name="response.body_template"
label={t('flow.webhook.bodyTemplate')}
></DynamicResponse>
{executionMode === WebhookExecutionMode.Immediately && (
<>
<RAGFlowFormItem
name={'response.status'}
label={t('flow.webhook.status')}
>
<Input type="number"></Input>
</RAGFlowFormItem>
{/* <DynamicResponse
name="response.headers_template"
label={t('flow.webhook.headersTemplate')}
></DynamicResponse> */}
{/* <DynamicResponse
name="response.body_template"
label={t('flow.webhook.bodyTemplate')}
></DynamicResponse> */}
<RAGFlowFormItem
name="response.body_template"
label={t('flow.webhook.bodyTemplate')}
>
<Textarea></Textarea>
</RAGFlowFormItem>
</>
)}
</section>
</Collapse>
);

7
web/src/pages/agent/utils.ts
View File

@ -355,13 +355,6 @@ function transformBeginParams(params: BeginFormSchemaType) {
...params.security,
ip_whitelist: params.security?.ip_whitelist.map((x) => x.value),
},
response: {
...params.response,
headers_template: transformArrayToObject(
params.response?.headers_template,
),
body_template: transformArrayToObject(params.response?.body_template),
},
};
}