From 3234a15aae8a3a2e1a22f4397240166856897f64 Mon Sep 17 00:00:00 2001 From: balibabu Date: Thu, 3 Jul 2025 19:04:06 +0800 Subject: [PATCH] Fix: Fixed the issue of retrieval operator text overlapping #3221 (#8652) ### What problem does this PR solve? Fix: Fixed the issue of retrieval operator text overlapping #3221 ### Type of change - [x] Bug Fix (non-breaking change which fixes an issue) --- .../components/auto-keywords-form-field.tsx | 3 + .../max-token-number-from-field.tsx | 2 + web/src/components/page-rank-form-field.tsx | 2 + .../raptor-form-fields.tsx | 4 + .../components/slider-input-form-field.tsx | 97 +++++++++++-------- web/src/constants/form.ts | 5 + web/src/locales/en.ts | 2 +- .../pages/agent/canvas/node/switch-node.tsx | 14 ++- web/src/pages/agent/constant.tsx | 14 ++- .../agent/form/code-form/use-watch-change.ts | 4 +- .../pages/agent/form/switch-form/index.tsx | 28 ++++-- 11 files changed, 113 insertions(+), 62 deletions(-) create mode 100644 web/src/constants/form.ts diff --git a/web/src/components/auto-keywords-form-field.tsx b/web/src/components/auto-keywords-form-field.tsx index d25a7af1f..9b8b9da73 100644 --- a/web/src/components/auto-keywords-form-field.tsx +++ b/web/src/components/auto-keywords-form-field.tsx @@ -1,3 +1,4 @@ +import { FormLayout } from '@/constants/form'; import { useTranslate } from '@/hooks/common-hooks'; import { SliderInputFormField } from './slider-input-form-field'; @@ -11,6 +12,7 @@ export function AutoKeywordsFormField() { max={30} min={0} tooltip={t('autoKeywordsTip')} + layout={FormLayout.Horizontal} > ); } @@ -25,6 +27,7 @@ export function AutoQuestionsFormField() { max={10} min={0} tooltip={t('autoQuestionsTip')} + layout={FormLayout.Horizontal} > ); } diff --git a/web/src/components/max-token-number-from-field.tsx b/web/src/components/max-token-number-from-field.tsx index bc82cfe51..a9646f90f 100644 --- a/web/src/components/max-token-number-from-field.tsx +++ b/web/src/components/max-token-number-from-field.tsx @@ -1,3 +1,4 @@ +import { FormLayout } from '@/constants/form'; import { useTranslate } from '@/hooks/common-hooks'; import { SliderInputFormField } from './slider-input-form-field'; @@ -14,6 +15,7 @@ export function MaxTokenNumberFormField({ max = 2048 }: IProps) { name={'parser_config.chunk_token_num'} label={t('chunkTokenNumber')} max={max} + layout={FormLayout.Horizontal} > ); } diff --git a/web/src/components/page-rank-form-field.tsx b/web/src/components/page-rank-form-field.tsx index dce708b72..ea7d34590 100644 --- a/web/src/components/page-rank-form-field.tsx +++ b/web/src/components/page-rank-form-field.tsx @@ -1,3 +1,4 @@ +import { FormLayout } from '@/constants/form'; import { useTranslate } from '@/hooks/common-hooks'; import { SliderInputFormField } from './slider-input-form-field'; @@ -12,6 +13,7 @@ export function PageRankFormField() { defaultValue={0} max={100} min={0} + layout={FormLayout.Horizontal} > ); } diff --git a/web/src/components/parse-configuration/raptor-form-fields.tsx b/web/src/components/parse-configuration/raptor-form-fields.tsx index 3a262718a..b38db7c87 100644 --- a/web/src/components/parse-configuration/raptor-form-fields.tsx +++ b/web/src/components/parse-configuration/raptor-form-fields.tsx @@ -1,3 +1,4 @@ +import { FormLayout } from '@/constants/form'; import { DocumentParserType } from '@/constants/knowledge'; import { useTranslate } from '@/hooks/common-hooks'; import random from 'lodash/random'; @@ -130,6 +131,7 @@ const RaptorFormFields = () => { defaultValue={256} max={2048} min={0} + layout={FormLayout.Horizontal} > { step={0.01} max={1} min={0} + layout={FormLayout.Horizontal} > { defaultValue={64} max={1024} min={1} + layout={FormLayout.Horizontal} > ( - -
- - {label} - -
- - - - - { - const value = ev.target.value; - field.onChange(value === '' ? 0 : Number(value)); // convert to number - }} - // defaultValue={defaultValue} - > - -
+ + + {label} + +
+ + + + + { + const value = ev.target.value; + field.onChange(value === '' ? 0 : Number(value)); // convert to number + }} + // defaultValue={defaultValue} + > +
diff --git a/web/src/constants/form.ts b/web/src/constants/form.ts new file mode 100644 index 000000000..9f2043d03 --- /dev/null +++ b/web/src/constants/form.ts @@ -0,0 +1,5 @@ +export enum FormLayout { + Horizontal = 'horizontal', + Vertical = 'vertical', + Inline = 'inline', +} diff --git a/web/src/locales/en.ts b/web/src/locales/en.ts index cbb3655d7..399898c6c 100644 --- a/web/src/locales/en.ts +++ b/web/src/locales/en.ts @@ -1275,7 +1275,7 @@ This delimiter is used to split the input text into several text pieces echo of inputVariables: 'Input variables', runningHintText: 'is running...🕞', openingSwitch: 'Opening switch', - openingCopy: 'Opening copy', + openingCopy: 'Opening greeting', openingSwitchTip: 'Your users will see this welcome message at the beginning.', modeTip: 'The mode defines how the workflow is initiated.', diff --git a/web/src/pages/agent/canvas/node/switch-node.tsx b/web/src/pages/agent/canvas/node/switch-node.tsx index 1bd2f45b6..0045fdf99 100644 --- a/web/src/pages/agent/canvas/node/switch-node.tsx +++ b/web/src/pages/agent/canvas/node/switch-node.tsx @@ -1,9 +1,9 @@ -import { IconFont } from '@/components/icon-font'; import { Card, CardContent } from '@/components/ui/card'; import { ISwitchCondition, ISwitchNode } from '@/interfaces/database/flow'; import { NodeProps, Position } from '@xyflow/react'; import { memo, useCallback } from 'react'; import { NodeHandleId, SwitchOperatorOptions } from '../../constant'; +import { LogicalOperatorIcon } from '../../form/switch-form'; import { useGetVariableLabelByValue } from '../../hooks/use-get-begin-query'; import { CommonHandle } from './handle'; import { RightHandleStyle } from './handle-icon'; @@ -30,8 +30,16 @@ const ConditionBlock = ({ const getLabel = useGetVariableLabelByValue(nodeId); const renderOperatorIcon = useCallback((operator?: string) => { - const name = SwitchOperatorOptions.find((x) => x.value === operator)?.icon; - return ; + const item = SwitchOperatorOptions.find((x) => x.value === operator); + if (item) { + return ( + + ); + } + return <>; }, []); return ( diff --git a/web/src/pages/agent/constant.tsx b/web/src/pages/agent/constant.tsx index e1ac5cc07..788a697e5 100644 --- a/web/src/pages/agent/constant.tsx +++ b/web/src/pages/agent/constant.tsx @@ -34,6 +34,8 @@ export enum PromptRole { } import { + Circle, + CircleSlash2, CloudUpload, ListOrdered, OptionIcon, @@ -378,8 +380,16 @@ export const SwitchOperatorOptions = [ { value: 'not contains', label: 'notContains', icon: 'not-contains' }, { value: 'start with', label: 'startWith', icon: 'list-start' }, { value: 'end with', label: 'endWith', icon: 'list-end' }, - { value: 'empty', label: 'empty', icon: 'circle' }, - { value: 'not empty', label: 'notEmpty', icon: 'circle-slash-2' }, + { + value: 'empty', + label: 'empty', + icon: , + }, + { + value: 'not empty', + label: 'notEmpty', + icon: , + }, ]; export const SwitchElseTo = 'end_cpn_ids'; diff --git a/web/src/pages/agent/form/code-form/use-watch-change.ts b/web/src/pages/agent/form/code-form/use-watch-change.ts index f01241e71..80e0c8b15 100644 --- a/web/src/pages/agent/form/code-form/use-watch-change.ts +++ b/web/src/pages/agent/form/code-form/use-watch-change.ts @@ -8,9 +8,7 @@ import { FormSchemaType } from './schema'; function convertToObject(list: FormSchemaType['arguments'] = []) { return list.reduce>((pre, cur) => { - if (cur.name && cur.type) { - pre[cur.name] = cur.type; - } + pre[cur.name] = cur.type; return pre; }, {}); diff --git a/web/src/pages/agent/form/switch-form/index.tsx b/web/src/pages/agent/form/switch-form/index.tsx index 4882d01e1..64b791974 100644 --- a/web/src/pages/agent/form/switch-form/index.tsx +++ b/web/src/pages/agent/form/switch-form/index.tsx @@ -41,18 +41,21 @@ type ConditionCardsProps = { parentLength: number; } & IOperatorForm; -const OperatorIcon = function OperatorIcon({ +export const LogicalOperatorIcon = function OperatorIcon({ icon, value, }: Omit<(typeof SwitchOperatorOptions)[0], 'label'>) { - return ( - ', - })} - > - ); + if (typeof icon === 'string') { + return ( + ', + })} + > + ); + } + return icon; }; function useBuildSwitchOperatorOptions() { @@ -61,7 +64,12 @@ function useBuildSwitchOperatorOptions() { const switchOperatorOptions = useMemo(() => { return SwitchOperatorOptions.map((x) => ({ value: x.value, - icon: , + icon: ( + + ), label: t(`flow.switchOperatorOptions.${x.label}`), })); }, [t]);