fix: hide drop-zone upload button when picked an image (#12088)

### What problem does this PR solve?

Hide drop-zone upload button when picked an image in chunk editor dialog

### Type of change

- [x] Bug Fix (non-breaking change which fixes an issue)

web/src/components/file-uploader.tsx

@@ -145,6 +145,8 @@ interface FileUploaderProps
    */
   maxFileCount?: DropzoneProps['maxFiles'];
 
+  hideDropzoneOnMaxFileCount?: boolean;
+
   /**
    * Whether the uploader should accept multiple files.
    * @type boolean
@@ -178,6 +180,7 @@ export function FileUploader(props: FileUploaderProps) {
     maxFileCount = 100000000000,
     multiple = false,
     disabled = false,
+    hideDropzoneOnMaxFileCount = false,
     className,
     title,
     description,
@@ -189,6 +192,8 @@ export function FileUploader(props: FileUploaderProps) {
     onChange: onValueChange,
   });
 
+  const reachesMaxFileCount = (files?.length ?? 0) >= maxFileCount;
+
   const onDrop = React.useCallback(
     (acceptedFiles: File[], rejectedFiles: FileRejection[]) => {
       if (!multiple && maxFileCount === 1 && acceptedFiles.length > 1) {
@@ -263,65 +268,68 @@ export function FileUploader(props: FileUploaderProps) {
 
   return (
     <div className="relative flex flex-col gap-6 overflow-hidden">
-      <Dropzone
+      {!(hideDropzoneOnMaxFileCount && reachesMaxFileCount) && (
-        onDrop={onDrop}
+        <Dropzone
-        accept={accept}
+          onDrop={onDrop}
-        maxSize={maxSize}
+          accept={accept}
-        maxFiles={maxFileCount}
+          maxSize={maxSize}
-        multiple={maxFileCount > 1 || multiple}
+          maxFiles={maxFileCount}
-        disabled={isDisabled}
+          multiple={maxFileCount > 1 || multiple}
-      >
+          disabled={isDisabled}
-        {({ getRootProps, getInputProps, isDragActive }) => (
+        >
-          <div
+          {({ getRootProps, getInputProps, isDragActive }) => (
-            {...getRootProps()}
+            <div
-            className={cn(
+              {...getRootProps()}
-              'group relative grid h-72 w-full cursor-pointer place-items-center rounded-lg border border-dashed border-border-default px-5 py-2.5 text-center transition hover:bg-border-button bg-bg-card',
+              className={cn(
-              'ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
+                'group relative grid h-72 w-full cursor-pointer place-items-center rounded-lg border border-dashed border-border-default px-5 py-2.5 text-center transition hover:bg-border-button bg-bg-card',
-              isDragActive && 'border-border-button',
+                'ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
-              isDisabled && 'pointer-events-none opacity-60',
+                isDragActive && 'border-border-button',
-              className,
+                isDisabled && 'pointer-events-none opacity-60',
-            )}
+                className,
-            {...dropzoneProps}
+              )}
-          >
+              {...dropzoneProps}
-            <input {...getInputProps()} />
+            >
-            {isDragActive ? (
+              <input {...getInputProps()} />
-              <div className="flex flex-col items-center justify-center gap-4 sm:px-5">
+              {isDragActive ? (
-                <div className="rounded-full border border-dashed p-3">
+                <div className="flex flex-col items-center justify-center gap-4 sm:px-5">
-                  <Upload
+                  <div className="rounded-full border border-dashed p-3">
-                    className="size-7 text-text-secondary transition-colors group-hover:text-text-primary"
+                    <Upload
-                    aria-hidden="true"
+                      className="size-7 text-text-secondary transition-colors group-hover:text-text-primary"
-                  />
+                      aria-hidden="true"
-                </div>
+                    />
-                <p className="font-medium text-text-secondary">
+                  </div>
-                  Drop the files here
-                </p>
-              </div>
-            ) : (
-              <div className="flex flex-col items-center justify-center gap-4 sm:px-5">
-                <div className="rounded-full border border-dashed p-3">
-                  <Upload
-                    className="size-7 text-text-secondary transition-colors group-hover:text-text-primary"
-                    aria-hidden="true"
-                  />
-                </div>
-                <div className="flex flex-col gap-px">
                   <p className="font-medium text-text-secondary">
-                    {title || t('knowledgeDetails.uploadTitle')}
+                    Drop the files here
-                  </p>
-                  <p className="text-sm text-text-disabled">
-                    {description || t('knowledgeDetails.uploadDescription')}
-                    {/* You can upload
-                    {maxFileCount > 1
-                      ? ` ${maxFileCount === Infinity ? 'multiple' : maxFileCount}
-                      files (up to ${formatBytes(maxSize)} each)`
-                      : ` a file with ${formatBytes(maxSize)}`} */}
                   </p>
                 </div>
-              </div>
+              ) : (
-            )}
+                <div className="flex flex-col items-center justify-center gap-4 sm:px-5">
-          </div>
+                  <div className="rounded-full border border-dashed p-3">
-        )}
+                    <Upload
-      </Dropzone>
+                      className="size-7 text-text-secondary transition-colors group-hover:text-text-primary"
+                      aria-hidden="true"
+                    />
+                  </div>
+                  <div className="flex flex-col gap-px">
+                    <p className="font-medium text-text-secondary">
+                      {title || t('knowledgeDetails.uploadTitle')}
+                    </p>
+                    <p className="text-sm text-text-disabled">
+                      {description || t('knowledgeDetails.uploadDescription')}
+                      {/* You can upload
+                      {maxFileCount > 1
+                        ? ` ${maxFileCount === Infinity ? 'multiple' : maxFileCount}
+                        files (up to ${formatBytes(maxSize)} each)`
+                        : ` a file with ${formatBytes(maxSize)}`} */}
+                    </p>
+                  </div>
+                </div>
+              )}
+            </div>
+          )}
+        </Dropzone>
+      )}
+
       {files?.length ? (
         <div className="h-fit w-full px-3">
           <div className="flex max-h-48 flex-col gap-4 overflow-auto scrollbar-auto">

web/src/pages/chunk/parsed-result/add-knowledge/components/knowledge-chunk/components/chunk-creating-modal/index.tsx

@@ -175,18 +175,18 @@ const ChunkCreatingModal: React.FC<IModalProps<any> & kFProps> = ({
               <FormItem>
                 <FormLabel className="gap-1">{t('chunk.image')}</FormLabel>
 
-                <div className="grid grid-cols-2 gap-4 items-start">
+                <div className="space-y-4">
                   {data?.data?.img_id && (
                     <Image
                       id={data?.data?.img_id}
-                      className="w-full object-contain"
+                      className="mx-auto w-auto max-w-full object-contain max-h-[800px]"
                     />
                   )}
 
                   <div className="col-start-2 col-end-3 only:col-span-2">
                     <FormControl>
                       <FileUploader
-                        className="h-48"
+                        className="h-auto p-6"
                         value={field.value}
                         onValueChange={field.onChange}
                         accept={{
@@ -195,6 +195,7 @@ const ChunkCreatingModal: React.FC<IModalProps<any> & kFProps> = ({
                           'image/webp': [],
                         }}
                         maxFileCount={1}
+                        hideDropzoneOnMaxFileCount
                         title={t('chunk.imageUploaderTitle')}
                         description={<></>}
                       />