From 7a6e70d6b332f95f1ee1f93337f8c06cfaae02ff Mon Sep 17 00:00:00 2001 From: balibabu Date: Thu, 27 Feb 2025 16:09:12 +0800 Subject: [PATCH] Feat: Wrap DynamicVariableForm with Collapsible. #3221 (#5440) ### What problem does this PR solve? Feat: Wrap DynamicVariableForm with Collapsible. #3221 ### Type of change - [x] New Feature (non-breaking change which adds functionality) --- web/src/assets/icon/Icon.tsx | 13 ++++++ web/src/components/ui/select.tsx | 8 +++- web/src/pages/agent/agent-sidebar.tsx | 10 +---- web/src/pages/agent/form-sheet/next.tsx | 2 +- .../next-dynamic-input-variable.tsx | 43 ++++++++++++++++--- .../pages/agent/form/retrieval-form/next.tsx | 4 +- 6 files changed, 61 insertions(+), 19 deletions(-) diff --git a/web/src/assets/icon/Icon.tsx b/web/src/assets/icon/Icon.tsx index e363af970..2854f4c41 100644 --- a/web/src/assets/icon/Icon.tsx +++ b/web/src/assets/icon/Icon.tsx @@ -1,5 +1,7 @@ +import { cn } from '@/lib/utils'; import Icon from '@ant-design/icons'; import { CustomIconComponentProps } from '@ant-design/icons/lib/components/Icon'; +import { ChevronDown } from 'lucide-react'; type IconComponentProps = CustomIconComponentProps; const currentColor = 'currentColor'; @@ -276,3 +278,14 @@ export const SemicolonIcon = (props: Partial) => ( export const CommaIcon = (props: Partial) => ( ); + +export function SideDown({ className }: { className?: string }) { + return ( + + ); +} diff --git a/web/src/components/ui/select.tsx b/web/src/components/ui/select.tsx index caa4c843a..e0b1c361e 100644 --- a/web/src/components/ui/select.tsx +++ b/web/src/components/ui/select.tsx @@ -190,7 +190,8 @@ type RAGFlowSelectProps = Partial & { FormControlComponent?: typeof FormControl; options?: (RAGFlowSelectOptionType | RAGFlowSelectGroupOptionType)[]; allowClear?: boolean; -}; + placeholder?: React.ReactNode; +} & SelectPrimitive.SelectProps; /** * @@ -218,6 +219,7 @@ export const RAGFlowSelect = forwardRef< FormControlComponent, options = [], allowClear, + placeholder, }, ref, ) { @@ -260,7 +262,7 @@ export const RAGFlowSelect = forwardRef< allowClear={allowClear} ref={ref} > - + @@ -292,3 +294,5 @@ export const RAGFlowSelect = forwardRef< ); }); + +RAGFlowSelect.displayName = 'RAGFlowSelect'; diff --git a/web/src/pages/agent/agent-sidebar.tsx b/web/src/pages/agent/agent-sidebar.tsx index c175924eb..42f399a82 100644 --- a/web/src/pages/agent/agent-sidebar.tsx +++ b/web/src/pages/agent/agent-sidebar.tsx @@ -1,3 +1,4 @@ +import { SideDown } from '@/assets/icon/Icon'; import { Card, CardContent } from '@/components/ui/card'; import { Collapsible, @@ -13,7 +14,6 @@ import { SidebarHeader, SidebarMenu, } from '@/components/ui/sidebar'; -import { ChevronDown } from 'lucide-react'; import { useMemo } from 'react'; import { AgentOperatorList, @@ -23,12 +23,6 @@ import { } from './constant'; import OperatorIcon from './operator-icon'; -function SideDown() { - return ( - - ); -} - type OperatorItem = { name: Operator; }; @@ -59,7 +53,7 @@ function OperatorCollapsible({ {title} - + diff --git a/web/src/pages/agent/form-sheet/next.tsx b/web/src/pages/agent/form-sheet/next.tsx index 0ea3573f5..f12cac762 100644 --- a/web/src/pages/agent/form-sheet/next.tsx +++ b/web/src/pages/agent/form-sheet/next.tsx @@ -87,7 +87,7 @@ const FormSheet = ({ }, [visible, form, node?.data?.form, node?.id, node, operatorName]); return ( - +
diff --git a/web/src/pages/agent/form/components/next-dynamic-input-variable.tsx b/web/src/pages/agent/form/components/next-dynamic-input-variable.tsx index 491bc7499..c255ec9d6 100644 --- a/web/src/pages/agent/form/components/next-dynamic-input-variable.tsx +++ b/web/src/pages/agent/form/components/next-dynamic-input-variable.tsx @@ -1,6 +1,12 @@ 'use client'; +import { SideDown } from '@/assets/icon/Icon'; import { Button } from '@/components/ui/button'; +import { + Collapsible, + CollapsibleContent, + CollapsibleTrigger, +} from '@/components/ui/collapsible'; import { FormControl, FormDescription, @@ -11,7 +17,7 @@ import { import { Input } from '@/components/ui/input'; import { RAGFlowSelect } from '@/components/ui/select'; import { RAGFlowNodeType } from '@/interfaces/database/flow'; -import { CircleMinus, Plus } from 'lucide-react'; +import { Plus, Trash2 } from 'lucide-react'; import { useFieldArray, useFormContext } from 'react-hook-form'; import { useTranslation } from 'react-i18next'; import { useBuildComponentIdSelectOptions } from '../../hooks/use-get-begin-query'; @@ -61,9 +67,14 @@ export function DynamicVariableForm({ node }: IProps) { { + field.onChange(val); + form.resetField(`query.${index}.value`); + form.resetField(`query.${index}.component_id`); + }} > @@ -79,7 +90,7 @@ export function DynamicVariableForm({ node }: IProps) { {typeValue === VariableType.Reference ? ( @@ -91,17 +102,37 @@ export function DynamicVariableForm({ node }: IProps) { )} /> - remove(index)} /> ); })} - ); } + +export function DynamicInputVariable({ node }: IProps) { + const { t } = useTranslation(); + + return ( + + + + {t('flow.input')} + + + + + + + + ); +} diff --git a/web/src/pages/agent/form/retrieval-form/next.tsx b/web/src/pages/agent/form/retrieval-form/next.tsx index 82747e7c8..ed7a387f9 100644 --- a/web/src/pages/agent/form/retrieval-form/next.tsx +++ b/web/src/pages/agent/form/retrieval-form/next.tsx @@ -13,7 +13,7 @@ import { import { Textarea } from '@/components/ui/textarea'; import { useTranslation } from 'react-i18next'; import { INextOperatorForm } from '../../interface'; -import { DynamicVariableForm } from '../components/next-dynamic-input-variable'; +import { DynamicInputVariable } from '../components/next-dynamic-input-variable'; const RetrievalForm = ({ form, node }: INextOperatorForm) => { const { t } = useTranslation(); @@ -25,7 +25,7 @@ const RetrievalForm = ({ form, node }: INextOperatorForm) => { e.preventDefault(); }} > - +