From 02fd381072c0bd61b95eed723ba0d1c2326bae07 Mon Sep 17 00:00:00 2001 From: balibabu Date: Thu, 22 May 2025 16:58:47 +0800 Subject: [PATCH] Feat: Verify the parameters of the begin operator #3221 (#7794) ### What problem does this PR solve? Feat: Verify the parameters of the begin operator #3221 ### Type of change - [x] New Feature (non-breaking change which adds functionality) --- web/src/components/ui/button.tsx | 17 ++- web/src/pages/agent/constant.tsx | 5 + .../agent/form-sheet/use-form-config-map.tsx | 6 +- web/src/pages/agent/form/begin-form/index.tsx | 142 ++++++++++++------ ...ramater-modal.tsx => paramater-dialog.tsx} | 46 ++++-- web/src/utils/common-util.ts | 4 + web/tailwind.config.js | 2 + web/tailwind.css | 4 + 8 files changed, 162 insertions(+), 64 deletions(-) rename web/src/pages/agent/form/begin-form/{next-paramater-modal.tsx => paramater-dialog.tsx} (83%) diff --git a/web/src/components/ui/button.tsx b/web/src/components/ui/button.tsx index b98e83f08..b6bb54c2e 100644 --- a/web/src/components/ui/button.tsx +++ b/web/src/components/ui/button.tsx @@ -3,7 +3,7 @@ import { cva, type VariantProps } from 'class-variance-authority'; import * as React from 'react'; import { cn } from '@/lib/utils'; -import { Loader2 } from 'lucide-react'; +import { Loader2, Plus } from 'lucide-react'; const buttonVariants = cva( 'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0', @@ -93,3 +93,18 @@ export const ButtonLoading = React.forwardRef< ButtonLoading.displayName = 'ButtonLoading'; export { Button, buttonVariants }; + +export const BlockButton = React.forwardRef( + ({ children, className, ...props }, ref) => { + return ( + + ); + }, +); diff --git a/web/src/pages/agent/constant.tsx b/web/src/pages/agent/constant.tsx index a52d9892f..9a8f83926 100644 --- a/web/src/pages/agent/constant.tsx +++ b/web/src/pages/agent/constant.tsx @@ -3006,3 +3006,8 @@ export const NoDebugOperatorsList = [ Operator.Switch, Operator.Iteration, ]; + +export enum AgentDialogueMode { + Conversational = 'Conversational', + Task = 'Task', +} diff --git a/web/src/pages/agent/form-sheet/use-form-config-map.tsx b/web/src/pages/agent/form-sheet/use-form-config-map.tsx index 8add23ab3..df9ace65c 100644 --- a/web/src/pages/agent/form-sheet/use-form-config-map.tsx +++ b/web/src/pages/agent/form-sheet/use-form-config-map.tsx @@ -1,7 +1,7 @@ import { CodeTemplateStrMap, ProgrammingLanguage } from '@/constants/agent'; import { useTranslation } from 'react-i18next'; import { z } from 'zod'; -import { Operator } from '../constant'; +import { AgentDialogueMode, Operator } from '../constant'; import AkShareForm from '../form/akshare-form'; import AnswerForm from '../form/answer-form'; import ArXivForm from '../form/arxiv-form'; @@ -44,15 +44,19 @@ export function useFormConfigMap() { [Operator.Begin]: { component: BeginForm, defaultValues: { + enablePrologue: true, prologue: t('chat.setAnOpenerInitial'), + mode: AgentDialogueMode.Conversational, }, schema: z.object({ + enablePrologue: z.boolean(), prologue: z .string() .min(1, { message: t('common.namePlaceholder'), }) .trim(), + mode: z.string(), query: z.array( z.object({ key: z.string(), diff --git a/web/src/pages/agent/form/begin-form/index.tsx b/web/src/pages/agent/form/begin-form/index.tsx index 3e73e6e8e..30a6ef0a6 100644 --- a/web/src/pages/agent/form/begin-form/index.tsx +++ b/web/src/pages/agent/form/begin-form/index.tsx @@ -1,4 +1,4 @@ -import { Button } from '@/components/ui/button'; +import { BlockButton } from '@/components/ui/button'; import { Form, FormControl, @@ -7,19 +7,31 @@ import { FormLabel, FormMessage, } from '@/components/ui/form'; +import { RAGFlowSelect } from '@/components/ui/select'; +import { Switch } from '@/components/ui/switch'; import { Textarea } from '@/components/ui/textarea'; +import { buildSelectOptions } from '@/utils/common-util'; import { useCallback } from 'react'; import { useWatch } from 'react-hook-form'; import { useTranslation } from 'react-i18next'; +import { AgentDialogueMode } from '../../constant'; import { BeginQuery, INextOperatorForm } from '../../interface'; import { useEditQueryRecord } from './hooks'; -import { ParameterDialog } from './next-paramater-modal'; +import { ParameterDialog } from './paramater-dialog'; import QueryTable from './query-table'; +const ModeOptions = buildSelectOptions([ + (AgentDialogueMode.Conversational, AgentDialogueMode.Task), +]); + const BeginForm = ({ form }: INextOperatorForm) => { const { t } = useTranslation(); const query = useWatch({ control: form.control, name: 'query' }); + const enablePrologue = useWatch({ + control: form.control, + name: 'enablePrologue', + }); const { ok, @@ -47,51 +59,89 @@ const BeginForm = ({ form }: INextOperatorForm) => { ); return ( -
- ( - - - {t('chat.setAnOpener')} - - - - - - +
+ + ( + + Mode + + + + + + )} + /> + ( + + + Welcome Message + + + + + + + )} + /> + {enablePrologue && ( + ( + + + {t('chat.setAnOpener')} + + + + + + + )} + /> )} - /> - {/* Create a hidden field to make Form instance record this */} -
} - /> - - - - - - {visible && ( - - )} - + {/* Create a hidden field to make Form instance record this */} + {/*
} + /> */} + + showModal()}> + {t('flow.addItem')} + + {visible && ( + + )} + +
); }; diff --git a/web/src/pages/agent/form/begin-form/next-paramater-modal.tsx b/web/src/pages/agent/form/begin-form/paramater-dialog.tsx similarity index 83% rename from web/src/pages/agent/form/begin-form/next-paramater-modal.tsx rename to web/src/pages/agent/form/begin-form/paramater-dialog.tsx index 8dcdd43ee..13e31bd1a 100644 --- a/web/src/pages/agent/form/begin-form/next-paramater-modal.tsx +++ b/web/src/pages/agent/form/begin-form/paramater-dialog.tsx @@ -1,4 +1,3 @@ -import { toast } from '@/components/hooks/use-toast'; import { Button } from '@/components/ui/button'; import { Dialog, @@ -44,13 +43,15 @@ function ParameterForm({ key: z .string() .trim() + .min(1) .refine( (value) => !value || !otherThanCurrentQuery.some((x) => x.key === value), { message: 'The key cannot be repeated!' }, ), optional: z.boolean(), - options: z.array(z.string().or(z.boolean()).or(z.number())), + name: z.string().trim().min(1), + options: z.array(z.string().or(z.boolean()).or(z.number())).optional(), }); const form = useForm>({ @@ -58,6 +59,8 @@ function ParameterForm({ defaultValues: { type: BeginQueryType.Line, optional: false, + key: '', + name: '', }, }); @@ -95,19 +98,17 @@ function ParameterForm({ }, [form, initialValue]); function onSubmit(data: z.infer) { - toast({ - title: 'You submitted the following values:', - description: ( - 
-          {JSON.stringify(data, null, 2)}
-
- ), - }); + console.log('🚀 ~ onSubmit ~ data:', data); } return (
- + ( Key + + + + + + )} + /> + ( + + Name @@ -175,12 +189,12 @@ export function ParameterDialog({ initialValue={initialValue} otherThanCurrentQuery={otherThanCurrentQuery} > + + + - - - ); } diff --git a/web/src/utils/common-util.ts b/web/src/utils/common-util.ts index c602d9f3d..418e3de71 100644 --- a/web/src/utils/common-util.ts +++ b/web/src/utils/common-util.ts @@ -140,3 +140,7 @@ export function formatFileSize(bytes: number, si = true, dp = 1) { return nextBytes.toFixed(dp) + ' ' + units[u]; } + +export function buildSelectOptions(list: Array) { + return list.map((x) => ({ label: x, value: x })); +} diff --git a/web/tailwind.config.js b/web/tailwind.config.js index d0b2ec70c..4f097dd19 100644 --- a/web/tailwind.config.js +++ b/web/tailwind.config.js @@ -52,6 +52,8 @@ module.exports = { 'background-card': 'var(--background-card)', 'background-checked': 'var(--background-checked)', + 'input-border': 'var(--input-border)', + primary: { DEFAULT: 'hsl(var(--primary))', foreground: 'hsl(var(--primary-foreground))', diff --git a/web/tailwind.css b/web/tailwind.css index 7a37344c9..0c58eef19 100644 --- a/web/tailwind.css +++ b/web/tailwind.css @@ -86,6 +86,8 @@ --background-card: rgba(22, 22, 24, 0.05); --background-checked: rgba(76, 164, 231, 1); + + --input-border: rgba(22, 22, 24, 0.2); } .dark { @@ -192,6 +194,8 @@ --background-card: rgba(255, 255, 255, 0.05); --background-checked: rgba(76, 164, 231, 1); + + --input-border: rgba(255, 255, 255, 0.2); } }