From d7c8bced9b3034b2994446e85efac9be218ee52c Mon Sep 17 00:00:00 2001
From: StyleZhang <jasonapring2015@outlook.com>
Date: Tue, 13 Aug 2024 15:24:09 +0800
Subject: [PATCH] file uploader

---
 .../base/chat/chat/chat-input-area/index.tsx  | 91 ++++++++++---------
 ...-list-item.tsx => file-list-flex-item.tsx} |  4 +-
 .../file-list-flex-operation.tsx              | 36 ++++----
 .../file-list-flex/file-list-flex-preview.tsx | 10 +-
 .../file-uploader-in-attachment/index.tsx     | 25 ++++-
 .../components/base/file-uploader/index.ts    |  2 +-
 .../share/text-generation/run-once/index.tsx  |  6 +-
 7 files changed, 95 insertions(+), 79 deletions(-)
 rename web/app/components/base/file-uploader/file-list-flex/{file-list-item.tsx => file-list-flex-item.tsx} (95%)

diff --git a/web/app/components/base/chat/chat/chat-input-area/index.tsx b/web/app/components/base/chat/chat/chat-input-area/index.tsx
index 7189017b90..c1df858d95 100644
--- a/web/app/components/base/chat/chat/chat-input-area/index.tsx
+++ b/web/app/components/base/chat/chat/chat-input-area/index.tsx
@@ -16,7 +16,8 @@ import type { Theme } from '../../embedded-chatbot/theme/theme-context'
 import { useTextAreaHeight } from './hooks'
 import Operation from './operation'
 import cn from '@/utils/classnames'
-// import { FileListFlexOperation } from '@/app/components/base/file-uploader'
+import { FileListFlexOperation } from '@/app/components/base/file-uploader'
+import { FileContextProvider } from '@/app/components/base/file-uploader/store'
 import VoiceInput from '@/app/components/base/voice-input'
 import { useToastContext } from '@/app/components/base/toast'
 
@@ -92,58 +93,60 @@ const ChatInputArea = ({
   )
 
   return (
-    <div
-      className={cn(
-        'py-[9px] bg-components-panel-bg-blur border border-components-chat-input-border rounded-xl shadow-md',
-      )}
-    >
-      <div className='relative px-[9px] max-h-[158px] overflow-x-hidden overflow-y-auto'>
-        {/* <FileListFlexOperation /> */}
-        <div
-          ref={wrapperRef}
-          className='flex items-center justify-between'
-        >
-          <div className='flex items-center relative grow w-full'>
-            <div
-              ref={textValueRef}
-              className='absolute w-auto h-auto p-1 leading-6 body-lg-regular pointer-events-none whitespace-pre invisible'
-            >
-              {query}
+    <FileContextProvider>
+      <div
+        className={cn(
+          'py-[9px] bg-components-panel-bg-blur border border-components-chat-input-border rounded-xl shadow-md',
+        )}
+      >
+        <div className='relative px-[9px] max-h-[158px] overflow-x-hidden overflow-y-auto'>
+          <FileListFlexOperation />
+          <div
+            ref={wrapperRef}
+            className='flex items-center justify-between'
+          >
+            <div className='flex items-center relative grow w-full'>
+              <div
+                ref={textValueRef}
+                className='absolute w-auto h-auto p-1 leading-6 body-lg-regular pointer-events-none whitespace-pre invisible'
+              >
+                {query}
+              </div>
+              <Textarea
+                ref={textareaRef}
+                className='p-1 w-full leading-6 body-lg-regular text-text-tertiary outline-none'
+                placeholder='Enter message...'
+                autoSize={{ minRows: 1 }}
+                onResize={handleTextareaResize}
+                value={query}
+                onChange={(e) => {
+                  setQuery(e.target.value)
+                  handleTextareaResize()
+                }}
+                onKeyUp={handleKeyUp}
+                onKeyDown={handleKeyDown}
+              />
             </div>
-            <Textarea
-              ref={textareaRef}
-              className='p-1 w-full leading-6 body-lg-regular text-text-tertiary outline-none'
-              placeholder='Enter message...'
-              autoSize={{ minRows: 1 }}
-              onResize={handleTextareaResize}
-              value={query}
-              onChange={(e) => {
-                setQuery(e.target.value)
-                handleTextareaResize()
-              }}
-              onKeyUp={handleKeyUp}
-              onKeyDown={handleKeyDown}
-            />
+            {
+              !isMultipleLine && operation
+            }
           </div>
           {
-            !isMultipleLine && operation
+            showVoiceInput && (
+              <VoiceInput
+                onCancel={() => setShowVoiceInput(false)}
+                onConverted={text => setQuery(text)}
+              />
+            )
           }
         </div>
         {
-          showVoiceInput && (
-            <VoiceInput
-              onCancel={() => setShowVoiceInput(false)}
-              onConverted={text => setQuery(text)}
-            />
+          isMultipleLine && (
+            <div className='px-[9px]'>{operation}</div>
           )
         }
       </div>
-      {
-        isMultipleLine && (
-          <div className='px-[9px]'>{operation}</div>
-        )
-      }
-    </div>
+    </FileContextProvider>
   )
 }
 
diff --git a/web/app/components/base/file-uploader/file-list-flex/file-list-item.tsx b/web/app/components/base/file-uploader/file-list-flex/file-list-flex-item.tsx
similarity index 95%
rename from web/app/components/base/file-uploader/file-list-flex/file-list-item.tsx
rename to web/app/components/base/file-uploader/file-list-flex/file-list-flex-item.tsx
index 5177a2f528..4a91ba6489 100644
--- a/web/app/components/base/file-uploader/file-list-flex/file-list-item.tsx
+++ b/web/app/components/base/file-uploader/file-list-flex/file-list-flex-item.tsx
@@ -8,7 +8,7 @@ type FileListItemProps = {
   isFile?: boolean
   className?: string
 }
-const FileListItem = ({
+const FileListFlexItem = ({
   isFile,
   className,
 }: FileListItemProps) => {
@@ -48,4 +48,4 @@ const FileListItem = ({
   )
 }
 
-export default memo(FileListItem)
+export default memo(FileListFlexItem)
diff --git a/web/app/components/base/file-uploader/file-list-flex/file-list-flex-operation.tsx b/web/app/components/base/file-uploader/file-list-flex/file-list-flex-operation.tsx
index 37ed31dec2..c1e55de7f2 100644
--- a/web/app/components/base/file-uploader/file-list-flex/file-list-flex-operation.tsx
+++ b/web/app/components/base/file-uploader/file-list-flex/file-list-flex-operation.tsx
@@ -3,33 +3,31 @@ import {
   memo,
 } from 'react'
 import { RiCloseLine } from '@remixicon/react'
-import FileListItem from './file-list-item'
+import { useStore } from '../store'
+import FileListItem from './file-list-flex-item'
 import Button from '@/app/components/base/button'
 
 const FileListFlexOperation = forwardRef<HTMLDivElement>((_, ref) => {
+  const files = useStore(s => s.files)
+
   return (
     <div
       ref={ref}
       className='flex flex-wrap gap-2'
     >
-      <div className='relative'>
-        <Button className='absolute -right-1.5 -top-1.5 p-0 w-5 h-5 rounded-full'>
-          <RiCloseLine className='w-4 h-4 text-components-button-secondary-text' />
-        </Button>
-        <FileListItem />
-      </div>
-      <div className='relative'>
-        <Button className='absolute -right-1.5 -top-1.5 p-0 w-5 h-5 rounded-full'>
-          <RiCloseLine className='w-4 h-4 text-components-button-secondary-text' />
-        </Button>
-        <FileListItem />
-      </div>
-      <div className='relative'>
-        <Button className='absolute -right-1.5 -top-1.5 p-0 w-5 h-5 rounded-full'>
-          <RiCloseLine className='w-4 h-4 text-components-button-secondary-text' />
-        </Button>
-        <FileListItem isFile />
-      </div>
+      {
+        files.map(file => (
+          <div
+            key={file._id}
+            className='relative'
+          >
+            <Button className='absolute -right-1.5 -top-1.5 p-0 w-5 h-5 rounded-full'>
+              <RiCloseLine className='w-4 h-4 text-components-button-secondary-text' />
+            </Button>
+            <FileListItem />
+          </div>
+        ))
+      }
     </div>
   )
 })
diff --git a/web/app/components/base/file-uploader/file-list-flex/file-list-flex-preview.tsx b/web/app/components/base/file-uploader/file-list-flex/file-list-flex-preview.tsx
index 6d6afb0eb3..ca22f67dfd 100644
--- a/web/app/components/base/file-uploader/file-list-flex/file-list-flex-preview.tsx
+++ b/web/app/components/base/file-uploader/file-list-flex/file-list-flex-preview.tsx
@@ -2,7 +2,7 @@ import {
   forwardRef,
   memo,
 } from 'react'
-import FileListItem from './file-list-item'
+import FileListFlexItem from './file-list-flex-item'
 
 const FileListFlexPreview = forwardRef<HTMLDivElement>((_, ref) => {
   return (
@@ -10,10 +10,10 @@ const FileListFlexPreview = forwardRef<HTMLDivElement>((_, ref) => {
       ref={ref}
       className='flex flex-wrap gap-2'
     >
-      <FileListItem />
-      <FileListItem />
-      <FileListItem isFile />
-      <FileListItem isFile />
+      <FileListFlexItem />
+      <FileListFlexItem />
+      <FileListFlexItem isFile />
+      <FileListFlexItem isFile />
     </div>
   )
 })
diff --git a/web/app/components/base/file-uploader/file-uploader-in-attachment/index.tsx b/web/app/components/base/file-uploader/file-uploader-in-attachment/index.tsx
index ebac040ec2..c87dbab237 100644
--- a/web/app/components/base/file-uploader/file-uploader-in-attachment/index.tsx
+++ b/web/app/components/base/file-uploader/file-uploader-in-attachment/index.tsx
@@ -1,5 +1,4 @@
 import {
-  memo,
   useCallback,
 } from 'react'
 import {
@@ -8,6 +7,10 @@ import {
 } from '@remixicon/react'
 import { useTranslation } from 'react-i18next'
 import FileFromLinkOrLocal from '../file-from-link-or-local'
+import {
+  FileContextProvider,
+  useStore,
+} from '../store'
 import FileInAttachmentItem from './file-in-attachment-item'
 import Button from '@/app/components/base/button'
 import cn from '@/utils/classnames'
@@ -19,6 +22,7 @@ type Option = {
 }
 const FileUploaderInAttachment = () => {
   const { t } = useTranslation()
+  const files = useStore(s => s.files)
   const options = [
     {
       value: 'local',
@@ -68,11 +72,24 @@ const FileUploaderInAttachment = () => {
         {options.map(renderOption)}
       </div>
       <div className='mt-1 space-y-1'>
-        <FileInAttachmentItem />
-        <FileInAttachmentItem />
+        {
+          files.map(file => (
+            <FileInAttachmentItem
+              key={file._id}
+            />
+          ))
+        }
       </div>
     </div>
   )
 }
 
-export default memo(FileUploaderInAttachment)
+const FileUploaderInAttachmentWrapper = () => {
+  return (
+    <FileContextProvider>
+      <FileUploaderInAttachment />
+    </FileContextProvider>
+  )
+}
+
+export default FileUploaderInAttachmentWrapper
diff --git a/web/app/components/base/file-uploader/index.ts b/web/app/components/base/file-uploader/index.ts
index 79885c4370..6ee9ec65fb 100644
--- a/web/app/components/base/file-uploader/index.ts
+++ b/web/app/components/base/file-uploader/index.ts
@@ -1,4 +1,4 @@
-export { default as FileUploaderInAttachment } from './file-uploader-in-attachment'
+export { default as FileUploaderInAttachmentWrapper } from './file-uploader-in-attachment'
 export { default as FileUploaderInChatInput } from './file-uploader-in-chat-input'
 export { default as FileTypeIcon } from './file-type-icon'
 export { default as FileListFlexOperation } from './file-list-flex/file-list-flex-operation'
diff --git a/web/app/components/share/text-generation/run-once/index.tsx b/web/app/components/share/text-generation/run-once/index.tsx
index 9e1f278b85..57ea2bea87 100644
--- a/web/app/components/share/text-generation/run-once/index.tsx
+++ b/web/app/components/share/text-generation/run-once/index.tsx
@@ -12,8 +12,7 @@ import Textarea from '@/app/components/base/textarea'
 import { DEFAULT_VALUE_MAX_LEN } from '@/config'
 import TextGenerationImageUploader from '@/app/components/base/image-uploader/text-generation-image-uploader'
 import type { VisionFile, VisionSettings } from '@/types/app'
-import ChatInputArea from '@/app/components/base/chat/chat/chat-input-area'
-import { FileUploaderInAttachment } from '@/app/components/base/file-uploader'
+import { FileUploaderInAttachmentWrapper } from '@/app/components/base/file-uploader'
 
 export type IRunOnceProps = {
   siteInfo: SiteInfo
@@ -115,8 +114,7 @@ const RunOnce: FC<IRunOnceProps> = ({
               </div>
             )
           }
-          <ChatInputArea />
-          <FileUploaderInAttachment />
+          <FileUploaderInAttachmentWrapper />
           {promptConfig.prompt_variables.length > 0 && (
             <div className='mt-4 h-[1px] bg-gray-100'></div>
           )}