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)
2025-12-08 20:42:30 +08:00 · 2025-07-03 19:04:06 +08:00
parent 9771b521cd
commit 3234a15aae
11 changed files with 113 additions and 62 deletions
--- 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}
    ></SliderInputFormField>
  );
 }
@ -25,6 +27,7 @@ export function AutoQuestionsFormField() {
      max={10}
      min={0}
      tooltip={t('autoQuestionsTip')}
+      layout={FormLayout.Horizontal}
    ></SliderInputFormField>
  );
 }
--- 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}
    ></SliderInputFormField>
  );
 }
--- 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}
    ></SliderInputFormField>
  );
 }
--- 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}
          ></SliderInputFormField>
          <SliderInputFormField
            name={'parser_config.raptor.threshold'}
@ -139,6 +141,7 @@ const RaptorFormFields = () => {
            step={0.01}
            max={1}
            min={0}
+            layout={FormLayout.Horizontal}
          ></SliderInputFormField>
          <SliderInputFormField
            name={'parser_config.raptor.max_cluster'}
@ -147,6 +150,7 @@ const RaptorFormFields = () => {
            defaultValue={64}
            max={1024}
            min={1}
+            layout={FormLayout.Horizontal}
          ></SliderInputFormField>
          <FormField
            control={form.control}
--- a/web/src/components/slider-input-form-field.tsx
+++ b/web/src/components/slider-input-form-field.tsx
@ -1,3 +1,4 @@
+import { FormLayout } from '@/constants/form';
 import { cn } from '@/lib/utils';
 import { ReactNode } from 'react';
 import { useFormContext } from 'react-hook-form';
@ -11,6 +12,10 @@ import {
 } from './ui/form';
 import { Input } from './ui/input';

+export type FormLayoutType = {
+  layout?: FormLayout;
+};
+
 type SliderInputFormFieldProps = {
  max?: number;
  min?: number;
@ -20,7 +25,7 @@ type SliderInputFormFieldProps = {
  tooltip?: ReactNode;
  defaultValue?: number;
  className?: string;
-};
+} & FormLayoutType;

 export function SliderInputFormField({
  max,
@ -31,57 +36,63 @@ export function SliderInputFormField({
  tooltip,
  defaultValue,
  className,
+  layout = FormLayout.Vertical,
 }: SliderInputFormFieldProps) {
  const form = useFormContext();

+  const isHorizontal = layout === FormLayout.Horizontal;
+
  return (
    <FormField
      control={form.control}
      name={name}
      defaultValue={defaultValue || 0}
      render={({ field }) => (
-        <FormItem className=" items-center space-y-0 ">
-          <div className="flex items-center">
-            <FormLabel
-              tooltip={tooltip}
-              className="text-sm text-muted-foreground whitespace-nowrap w-1/4"
-            >
-              {label}
-            </FormLabel>
-            <div
-              className={cn(
-                'flex items-center gap-14 justify-between',
-                'w-3/4',
-                className,
-              )}
-            >
-              <FormControl>
-                <SingleFormSlider
-                  {...field}
-                  max={max}
-                  min={min}
-                  step={step}
-                  // defaultValue={
-                  //   typeof defaultValue === 'number' ? [defaultValue] : undefined
-                  // }
-                ></SingleFormSlider>
-              </FormControl>
-              <FormControl>
-                <Input
-                  type={'number'}
-                  className="h-7 w-20"
-                  max={max}
-                  min={min}
-                  step={step}
-                  {...field}
-                  onChange={(ev) => {
-                    const value = ev.target.value;
-                    field.onChange(value === '' ? 0 : Number(value)); // convert to number
-                  }}
-                  // defaultValue={defaultValue}
-                ></Input>
-              </FormControl>
-            </div>
+        <FormItem
+          className={cn({ 'flex items-center space-y-0': isHorizontal })}
+        >
+          <FormLabel
+            tooltip={tooltip}
+            className={cn({
+              'text-sm text-muted-foreground whitespace-nowrap w-1/4':
+                isHorizontal,
+            })}
+          >
+            {label}
+          </FormLabel>
+          <div
+            className={cn(
+              'flex items-center gap-14 justify-between',
+              { 'w-3/4': isHorizontal },
+              className,
+            )}
+          >
+            <FormControl>
+              <SingleFormSlider
+                {...field}
+                max={max}
+                min={min}
+                step={step}
+                // defaultValue={
+                //   typeof defaultValue === 'number' ? [defaultValue] : undefined
+                // }
+              ></SingleFormSlider>
+            </FormControl>
+            <FormControl>
+              <Input
+                type={'number'}
+                className="h-7 w-20"
+                max={max}
+                min={min}
+                step={step}
+                {...field}
+                onChange={(ev) => {
+                  const value = ev.target.value;
+                  field.onChange(value === '' ? 0 : Number(value)); // convert to number
+                }}
+                // defaultValue={defaultValue}
+              ></Input>
+            </FormControl>
          </div>
          <FormMessage />
        </FormItem>
--- a/web/src/constants/form.ts
+++ b/web/src/constants/form.ts
@ -0,0 +1,5 @@
+export enum FormLayout {
+  Horizontal = 'horizontal',
+  Vertical = 'vertical',
+  Inline = 'inline',
+}
--- 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.',
--- 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 <IconFont name={name!}></IconFont>;
+    const item = SwitchOperatorOptions.find((x) => x.value === operator);
+    if (item) {
+      return (
+        <LogicalOperatorIcon
+          icon={item?.icon}
+          value={item?.value}
+        ></LogicalOperatorIcon>
+      );
+    }
+    return <></>;
  }, []);

  return (
--- 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: <Circle className="size-4" />,
+  },
+  {
+    value: 'not empty',
+    label: 'notEmpty',
+    icon: <CircleSlash2 className="size-4" />,
+  },
 ];

 export const SwitchElseTo = 'end_cpn_ids';
--- 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<Record<string, string>>((pre, cur) => {
-    if (cur.name && cur.type) {
-      pre[cur.name] = cur.type;
-    }
+    pre[cur.name] = cur.type;

    return pre;
  }, {});
--- 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 (
-    <IconFont
-      name={icon}
-      className={cn('size-4', {
-        'rotate-180': value === '>',
-      })}
-    ></IconFont>
-  );
+  if (typeof icon === 'string') {
+    return (
+      <IconFont
+        name={icon}
+        className={cn('size-4', {
+          'rotate-180': value === '>',
+        })}
+      ></IconFont>
+    );
+  }
+  return icon;
 };

 function useBuildSwitchOperatorOptions() {
@ -61,7 +64,12 @@ function useBuildSwitchOperatorOptions() {
  const switchOperatorOptions = useMemo(() => {
    return SwitchOperatorOptions.map((x) => ({
      value: x.value,
-      icon: <OperatorIcon icon={x.icon} value={x.value}></OperatorIcon>,
+      icon: (
+        <LogicalOperatorIcon
+          icon={x.icon}
+          value={x.value}
+        ></LogicalOperatorIcon>
+      ),
      label: t(`flow.switchOperatorOptions.${x.label}`),
    }));
  }, [t]);