Fix: Optimized Input and MultiSelect component functionality and dataSet-chunk page styling #9779 (#9815)

### What problem does this PR solve? Fix: Optimized Input and MultiSelect component functionality and dataSet-chunk page styling - Updated @js-preview/excel to version 1.7.14 #9779 - Optimized the EditTag component - Updated the Input component to optimize numeric input processing - Adjusted the MultiSelect component to use lodash's isEmpty method - Optimized the CheckboxSets component to display action buttons based on the selected state ### Type of change - [x] Bug Fix (non-breaking change which fixes an issue)
2025-12-08 12:32:30 +08:00 · 2025-08-29 10:57:29 +08:00
parent c7f7adf029
commit fe9adbf0a5
8 changed files with 188 additions and 149 deletions
--- a/web/package-lock.json
+++ b/web/package-lock.json
@ -12,7 +12,7 @@
        "@antv/g2": "^5.2.10",
        "@antv/g6": "^5.0.10",
        "@hookform/resolvers": "^3.9.1",
-        "@js-preview/excel": "^1.7.8",
+        "@js-preview/excel": "^1.7.14",
        "@lexical/react": "^0.23.1",
        "@monaco-editor/react": "^4.6.0",
        "@radix-ui/react-accordion": "^1.2.3",
@ -4114,9 +4114,10 @@
      }
    },
    "node_modules/@js-preview/excel": {
-      "version": "1.7.8",
-      "resolved": "https://registry.npmmirror.com/@js-preview/excel/-/excel-1.7.8.tgz",
-      "integrity": "sha512-pLJTDIhbzqaiH3kUPnbeWLsBFeCAHjnBwloMvoREdW4YUYTcsHDQ5h41QTyRJWSYRJBCcsy6Kt7KeDHOHDbVEw=="
+      "version": "1.7.14",
+      "resolved": "https://registry.npmmirror.com/@js-preview/excel/-/excel-1.7.14.tgz",
+      "integrity": "sha512-7QHtuRalWQzWIKARc/IRN8+kj1S5eWV4+cAQipzZngE3mVxMPL1RHXKJt/ONmpcKZ410egYkaBuOOs9+LctBkA==",
+      "license": "MIT"
    },
    "node_modules/@lexical/clipboard": {
      "version": "0.23.1",
--- a/web/package.json
+++ b/web/package.json
@ -23,7 +23,7 @@
    "@antv/g2": "^5.2.10",
    "@antv/g6": "^5.0.10",
    "@hookform/resolvers": "^3.9.1",
-    "@js-preview/excel": "^1.7.8",
+    "@js-preview/excel": "^1.7.14",
    "@lexical/react": "^0.23.1",
    "@monaco-editor/react": "^4.6.0",
    "@radix-ui/react-accordion": "^1.2.3",
--- a/web/src/components/edit-tag/index.tsx
+++ b/web/src/components/edit-tag/index.tsx
@ -15,123 +15,122 @@ interface EditTagsProps {
  onChange?: (tags: string[]) => void;
 }

-const EditTag = ({ value = [], onChange }: EditTagsProps) => {
-  const [inputVisible, setInputVisible] = useState(false);
-  const [inputValue, setInputValue] = useState('');
-  const inputRef = useRef<HTMLInputElement>(null);
+const EditTag = React.forwardRef<HTMLDivElement, EditTagsProps>(
+  ({ value = [], onChange }: EditTagsProps, ref) => {
+    const [inputVisible, setInputVisible] = useState(false);
+    const [inputValue, setInputValue] = useState('');
+    const inputRef = useRef<HTMLInputElement>(null);

-  useEffect(() => {
-    if (inputVisible) {
-      inputRef.current?.focus();
-    }
-  }, [inputVisible]);
+    useEffect(() => {
+      if (inputVisible) {
+        inputRef.current?.focus();
+      }
+    }, [inputVisible]);

-  const handleClose = (removedTag: string) => {
-    const newTags = value?.filter((tag) => tag !== removedTag);
-    onChange?.(newTags ?? []);
-  };
+    const handleClose = (removedTag: string) => {
+      const newTags = value?.filter((tag) => tag !== removedTag);
+      onChange?.(newTags ?? []);
+    };

-  const showInput = () => {
-    setInputVisible(true);
-  };
+    const showInput = () => {
+      setInputVisible(true);
+    };

-  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    setInputValue(e.target.value);
-  };
+    const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+      setInputValue(e.target.value);
+    };

-  const handleInputConfirm = () => {
-    if (inputValue && value) {
-      const newTags = inputValue
-        .split(';')
-        .map((tag) => tag.trim())
-        .filter((tag) => tag && !value.includes(tag));
-      onChange?.([...value, ...newTags]);
-    }
-    setInputVisible(false);
-    setInputValue('');
-  };
+    const handleInputConfirm = () => {
+      if (inputValue && value) {
+        const newTags = inputValue
+          .split(';')
+          .map((tag) => tag.trim())
+          .filter((tag) => tag && !value.includes(tag));
+        onChange?.([...value, ...newTags]);
+      }
+      setInputVisible(false);
+      setInputValue('');
+    };

-  const forMap = (tag: string) => {
-    return (
-      <HoverCard>
-        <HoverCardContent side="top">{tag}</HoverCardContent>
-        <HoverCardTrigger>
-          <div
-            key={tag}
-            className="w-fit flex items-center justify-center gap-2 border-dashed border px-1 rounded-sm bg-bg-card"
-          >
-            <div className="flex gap-2 items-center">
-              <div className="max-w-80 overflow-hidden text-ellipsis">
-                {tag}
+    const forMap = (tag: string) => {
+      return (
+        <HoverCard key={tag}>
+          <HoverCardContent side="top">{tag}</HoverCardContent>
+          <HoverCardTrigger asChild>
+            <div className="w-fit flex items-center justify-center gap-2 border-dashed border px-1 rounded-sm bg-bg-card">
+              <div className="flex gap-2 items-center">
+                <div className="max-w-80 overflow-hidden text-ellipsis">
+                  {tag}
+                </div>
+                <X
+                  className="w-4 h-4 text-muted-foreground hover:text-primary"
+                  onClick={(e) => {
+                    e.preventDefault();
+                    handleClose(tag);
+                  }}
+                />
              </div>
-              <X
-                className="w-4 h-4 text-muted-foreground hover:text-primary"
-                onClick={(e) => {
-                  e.preventDefault();
-                  handleClose(tag);
-                }}
-              />
            </div>
-          </div>
-        </HoverCardTrigger>
-      </HoverCard>
+          </HoverCardTrigger>
+        </HoverCard>
+      );
+    };
+
+    const tagChild = value?.map(forMap);
+
+    const tagPlusStyle: React.CSSProperties = {
+      borderStyle: 'dashed',
+    };
+
+    return (
+      <div>
+        {inputVisible ? (
+          <Input
+            ref={inputRef}
+            type="text"
+            className="h-8 bg-bg-card"
+            value={inputValue}
+            onChange={handleInputChange}
+            onBlur={handleInputConfirm}
+            onKeyDown={(e) => {
+              if (e?.key === 'Enter') {
+                handleInputConfirm();
+              }
+            }}
+          />
+        ) : (
+          <Button
+            variant="dashed"
+            className="w-fit flex items-center justify-center gap-2 bg-bg-card"
+            onClick={showInput}
+            style={tagPlusStyle}
+          >
+            <PlusOutlined />
+          </Button>
+        )}
+        {Array.isArray(tagChild) && tagChild.length > 0 && (
+          <TweenOneGroup
+            className="flex gap-2 flex-wrap mt-2"
+            enter={{
+              scale: 0.8,
+              opacity: 0,
+              type: 'from',
+              duration: 100,
+            }}
+            onEnd={(e) => {
+              if (e.type === 'appear' || e.type === 'enter') {
+                (e.target as any).style = 'display: inline-block';
+              }
+            }}
+            leave={{ opacity: 0, width: 0, scale: 0, duration: 200 }}
+            appear={false}
+          >
+            {tagChild}
+          </TweenOneGroup>
+        )}
+      </div>
    );
-  };
-
-  const tagChild = value?.map(forMap);
-
-  const tagPlusStyle: React.CSSProperties = {
-    borderStyle: 'dashed',
-  };
-
-  return (
-    <div>
-      {inputVisible ? (
-        <Input
-          ref={inputRef}
-          type="text"
-          className="h-8 bg-bg-card"
-          value={inputValue}
-          onChange={handleInputChange}
-          onBlur={handleInputConfirm}
-          onKeyDown={(e) => {
-            if (e?.key === 'Enter') {
-              handleInputConfirm();
-            }
-          }}
-        />
-      ) : (
-        <Button
-          variant="dashed"
-          className="w-fit flex items-center justify-center gap-2 bg-bg-card"
-          onClick={showInput}
-          style={tagPlusStyle}
-        >
-          <PlusOutlined />
-        </Button>
-      )}
-      {Array.isArray(tagChild) && tagChild.length > 0 && (
-        <TweenOneGroup
-          className="flex gap-2 flex-wrap mt-2"
-          enter={{
-            scale: 0.8,
-            opacity: 0,
-            type: 'from',
-            duration: 100,
-          }}
-          onEnd={(e) => {
-            if (e.type === 'appear' || e.type === 'enter') {
-              (e.target as any).style = 'display: inline-block';
-            }
-          }}
-          leave={{ opacity: 0, width: 0, scale: 0, duration: 200 }}
-          appear={false}
-        >
-          {tagChild}
-        </TweenOneGroup>
-      )}
-    </div>
-  );
-};
+  },
+);

 export default EditTag;
--- a/web/src/components/parse-configuration/raptor-form-fields.tsx
+++ b/web/src/components/parse-configuration/raptor-form-fields.tsx
@ -183,13 +183,13 @@ const RaptorFormFields = () => {
            render={({ field }) => (
              <FormItem className=" items-center space-y-0 ">
                <div className="flex items-center">
-                  <FormLabel className="text-sm text-muted-foreground whitespace-nowrap w-1/4">
+                  <FormLabel className="text-sm text-muted-foreground whitespace-wrap w-1/4">
                    {t('randomSeed')}
                  </FormLabel>
                  <div className="w-3/4">
                    <FormControl defaultValue={0}>
-                      <div className="flex gap-4">
-                        <Input {...field} defaultValue={0} />
+                      <div className="flex gap-4 items-center">
+                        <Input {...field} defaultValue={0} type="number" />
                        <Button
                          size={'sm'}
                          onClick={handleGenerate}
--- a/web/src/components/ui/input.tsx
+++ b/web/src/components/ui/input.tsx
@ -9,7 +9,24 @@ export interface InputProps
 }

 const Input = React.forwardRef<HTMLInputElement, InputProps>(
-  ({ className, type, value, ...props }, ref) => {
+  ({ className, type, value, onChange, ...props }, ref) => {
+    const isControlled = value !== undefined;
+    const { defaultValue, ...restProps } = props;
+    const inputValue = isControlled ? value : defaultValue;
+    const handleChange: React.ChangeEventHandler<HTMLInputElement> = (e) => {
+      if (type === 'number') {
+        const numValue = e.target.value === '' ? '' : Number(e.target.value);
+        onChange?.({
+          ...e,
+          target: {
+            ...e.target,
+            value: numValue,
+          },
+        } as React.ChangeEvent<HTMLInputElement>);
+      } else {
+        onChange?.(e);
+      }
+    };
    return (
      <input
        type={type}
@ -18,8 +35,9 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
          className,
        )}
        ref={ref}
-        value={value ?? ''}
-        {...props}
+        value={inputValue ?? ''}
+        onChange={handleChange}
+        {...restProps}
      />
    );
  },
--- a/web/src/components/ui/multi-select.tsx
+++ b/web/src/components/ui/multi-select.tsx
@ -29,6 +29,7 @@ import {
 } from '@/components/ui/popover';
 import { Separator } from '@/components/ui/separator';
 import { cn } from '@/lib/utils';
+import { isEmpty } from 'lodash';

 export type MultiSelectOptionType = {
  label: React.ReactNode;
@ -209,13 +210,17 @@ export const MultiSelect = React.forwardRef<
    const [isAnimating, setIsAnimating] = React.useState(false);

    React.useEffect(() => {
-      if (!selectedValues?.length && props.value) {
+      if (isEmpty(selectedValues) && !isEmpty(props.value)) {
        setSelectedValues(props.value as string[]);
      }
    }, [props.value, selectedValues]);

    React.useEffect(() => {
-      if (!selectedValues?.length && !props.value && defaultValue) {
+      if (
+        isEmpty(selectedValues) &&
+        isEmpty(props.value) &&
+        !isEmpty(defaultValue)
+      ) {
        setSelectedValues(defaultValue);
      }
    }, [defaultValue, props.value, selectedValues]);
--- a/web/src/pages/chunk/parsed-result/add-knowledge/components/knowledge-chunk/components/chunk-result-bar/checkbox-sets.tsx
+++ b/web/src/pages/chunk/parsed-result/add-knowledge/components/knowledge-chunk/components/chunk-result-bar/checkbox-sets.tsx
@ -1,7 +1,7 @@
 import { Checkbox } from '@/components/ui/checkbox';
 import { Label } from '@/components/ui/label';
 import { Ban, CircleCheck, Trash2 } from 'lucide-react';
-import { useCallback } from 'react';
+import { useCallback, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';

 type ICheckboxSetProps = {
@ -9,9 +9,16 @@ type ICheckboxSetProps = {
  removeChunk: (e?: any) => void;
  switchChunk: (available: number) => void;
  checked: boolean;
+  selectedChunkIds: string[];
 };
 export default (props: ICheckboxSetProps) => {
-  const { selectAllChunk, removeChunk, switchChunk, checked } = props;
+  const {
+    selectAllChunk,
+    removeChunk,
+    switchChunk,
+    checked,
+    selectedChunkIds,
+  } = props;
  const { t } = useTranslation();
  const handleSelectAllCheck = useCallback(
    (e: any) => {
@ -33,38 +40,46 @@ export default (props: ICheckboxSetProps) => {
    switchChunk(0);
  }, [switchChunk]);

+  const isSelected = useMemo(() => {
+    return selectedChunkIds?.length > 0;
+  }, [selectedChunkIds]);
+
  return (
-    <div className="flex gap-[40px] p-4">
-      <div className="flex items-center gap-3 cursor-pointer text-muted-foreground hover:text-white">
+    <div className="flex gap-[40px] py-4 px-2">
+      <div className="flex items-center gap-3 cursor-pointer text-muted-foreground hover:text-text-primary">
        <Checkbox
          id="all_chunks_checkbox"
          onCheckedChange={handleSelectAllCheck}
          checked={checked}
-          className=" data-[state=checked]:bg-white data-[state=checked]:border-white data-[state=checked]:text-black  border-muted-foreground text-muted-foreground hover:text-black hover:border-white "
+          className=" data-[state=checked]:bg-text-primary data-[state=checked]:border-text-primary data-[state=checked]:text-bg-base  border-muted-foreground text-muted-foreground hover:text-bg-base hover:border-text-primary "
        />
        <Label htmlFor="all_chunks_checkbox">{t('chunk.selectAll')}</Label>
      </div>
-      <div
-        className="flex items-center cursor-pointer text-muted-foreground hover:text-white"
-        onClick={handleEnabledClick}
-      >
-        <CircleCheck size={16} />
-        <span className="block ml-1">{t('chunk.enable')}</span>
-      </div>
-      <div
-        className="flex items-center cursor-pointer text-muted-foreground hover:text-white"
-        onClick={handleDisabledClick}
-      >
-        <Ban size={16} />
-        <span className="block ml-1">{t('chunk.disable')}</span>
-      </div>
-      <div
-        className="flex items-center cursor-pointer text-red-400 hover:text-red-500"
-        onClick={handleDeleteClick}
-      >
-        <Trash2 size={16} />
-        <span className="block ml-1">{t('chunk.delete')}</span>
-      </div>
+      {isSelected && (
+        <>
+          <div
+            className="flex items-center cursor-pointer text-muted-foreground hover:text-text-primary"
+            onClick={handleEnabledClick}
+          >
+            <CircleCheck size={16} />
+            <span className="block ml-1">{t('chunk.enable')}</span>
+          </div>
+          <div
+            className="flex items-center cursor-pointer text-muted-foreground hover:text-text-primary"
+            onClick={handleDisabledClick}
+          >
+            <Ban size={16} />
+            <span className="block ml-1">{t('chunk.disable')}</span>
+          </div>
+          <div
+            className="flex items-center cursor-pointer text-red-400 hover:text-red-500"
+            onClick={handleDeleteClick}
+          >
+            <Trash2 size={16} />
+            <span className="block ml-1">{t('chunk.delete')}</span>
+          </div>
+        </>
+      )}
    </div>
  );
 };
--- a/web/src/pages/chunk/parsed-result/add-knowledge/components/knowledge-chunk/index.tsx
+++ b/web/src/pages/chunk/parsed-result/add-knowledge/components/knowledge-chunk/index.tsx
@ -197,7 +197,7 @@ const Chunk = () => {
            </BreadcrumbItem>
            <BreadcrumbSeparator />
            <BreadcrumbItem>
-              <BreadcrumbPage>{documentInfo.name}</BreadcrumbPage>
+              <BreadcrumbPage>{documentInfo?.name}</BreadcrumbPage>
            </BreadcrumbItem>
          </BreadcrumbList>
        </Breadcrumb>
@ -249,6 +249,7 @@ const Chunk = () => {
                    switchChunk={handleSwitchChunk}
                    removeChunk={handleRemoveChunk}
                    checked={selectedChunkIds.length === data.length}
+                    selectedChunkIds={selectedChunkIds}
                  />
                </div>
                <div className={styles.pageContent}>