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)

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",
+      "version": "1.7.14",
-      "resolved": "https://registry.npmmirror.com/@js-preview/excel/-/excel-1.7.8.tgz",
+      "resolved": "https://registry.npmmirror.com/@js-preview/excel/-/excel-1.7.14.tgz",
-      "integrity": "sha512-pLJTDIhbzqaiH3kUPnbeWLsBFeCAHjnBwloMvoREdW4YUYTcsHDQ5h41QTyRJWSYRJBCcsy6Kt7KeDHOHDbVEw=="
+      "integrity": "sha512-7QHtuRalWQzWIKARc/IRN8+kj1S5eWV4+cAQipzZngE3mVxMPL1RHXKJt/ONmpcKZ410egYkaBuOOs9+LctBkA==",
+      "license": "MIT"
     },
     "node_modules/@lexical/clipboard": {
       "version": "0.23.1",

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",

web/src/components/edit-tag/index.tsx

@@ -15,7 +15,8 @@ interface EditTagsProps {
   onChange?: (tags: string[]) => void;
 }
 
-const EditTag = ({ value = [], onChange }: EditTagsProps) => {
+const EditTag = React.forwardRef<HTMLDivElement, EditTagsProps>(
+  ({ value = [], onChange }: EditTagsProps, ref) => {
     const [inputVisible, setInputVisible] = useState(false);
     const [inputValue, setInputValue] = useState('');
     const inputRef = useRef<HTMLInputElement>(null);
@@ -53,13 +54,10 @@ const EditTag = ({ value = [], onChange }: EditTagsProps) => {
 
     const forMap = (tag: string) => {
       return (
-      <HoverCard>
+        <HoverCard key={tag}>
           <HoverCardContent side="top">{tag}</HoverCardContent>
-        <HoverCardTrigger>
+          <HoverCardTrigger asChild>
-          <div
+            <div className="w-fit flex items-center justify-center gap-2 border-dashed border px-1 rounded-sm bg-bg-card">
-            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}
@@ -132,6 +130,7 @@ const EditTag = ({ value = [], onChange }: EditTagsProps) => {
         )}
       </div>
     );
-};
+  },
+);
 
 export default EditTag;

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">
+                      <div className="flex gap-4 items-center">
-                        <Input {...field} defaultValue={0} />
+                        <Input {...field} defaultValue={0} type="number" />
                         <Button
                           size={'sm'}
                           onClick={handleGenerate}

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 ?? ''}
+        value={inputValue ?? ''}
-        {...props}
+        onChange={handleChange}
+        {...restProps}
       />
     );
   },

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]);

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,26 +40,32 @@ 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 gap-[40px] py-4 px-2">
-      <div className="flex items-center gap-3 cursor-pointer text-muted-foreground hover:text-white">
+      <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>
+      {isSelected && (
+        <>
           <div
-        className="flex items-center cursor-pointer text-muted-foreground hover:text-white"
+            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-white"
+            className="flex items-center cursor-pointer text-muted-foreground hover:text-text-primary"
             onClick={handleDisabledClick}
           >
             <Ban size={16} />
@@ -65,6 +78,8 @@ export default (props: ICheckboxSetProps) => {
             <Trash2 size={16} />
             <span className="block ml-1">{t('chunk.delete')}</span>
           </div>
+        </>
+      )}
     </div>
   );
 };

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}>