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,6 +268,7 @@ export function FileUploader(props: FileUploaderProps) {
 
   return (
     <div className="relative flex flex-col gap-6 overflow-hidden">
+      {!(hideDropzoneOnMaxFileCount && reachesMaxFileCount) && (
         <Dropzone
           onDrop={onDrop}
           accept={accept}
@@ -322,6 +328,8 @@ export function FileUploader(props: FileUploaderProps) {
             </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={<></>}
                       />