From 52d69dd55b07aa759a100061e16833ee023587f0 Mon Sep 17 00:00:00 2001
From: StyleZhang <jasonapring2015@outlook.com>
Date: Mon, 29 Jul 2024 17:22:11 +0800
Subject: [PATCH] file uploader

---
 .../base/chat/chat/chat-input-area/hooks.ts   | 37 ++++++----
 .../base/chat/chat/chat-input-area/index.tsx  | 67 ++++++++++++-------
 .../chat/chat/chat-input-area/operation.tsx   | 33 +++++++++
 .../file-list-flex-operation.tsx              | 27 ++++++++
 .../file-list-flex/file-list-item.tsx         | 31 +++++++++
 .../file-list/file-list-flex/index.tsx        |  9 ---
 .../file-list/file-list-full-width/index.tsx  |  9 ---
 .../base/file-uploader/file-list/hooks.ts     |  0
 .../base/file-uploader/file-list/index.tsx    |  0
 .../components/base/file-uploader/index.ts    |  1 +
 .../share/text-generation/run-once/index.tsx  |  4 ++
 11 files changed, 162 insertions(+), 56 deletions(-)
 create mode 100644 web/app/components/base/chat/chat/chat-input-area/operation.tsx
 create mode 100644 web/app/components/base/file-uploader/file-list-flex/file-list-flex-operation.tsx
 create mode 100644 web/app/components/base/file-uploader/file-list-flex/file-list-item.tsx
 delete mode 100644 web/app/components/base/file-uploader/file-list/file-list-flex/index.tsx
 delete mode 100644 web/app/components/base/file-uploader/file-list/file-list-full-width/index.tsx
 delete mode 100644 web/app/components/base/file-uploader/file-list/hooks.ts
 delete mode 100644 web/app/components/base/file-uploader/file-list/index.tsx

diff --git a/web/app/components/base/chat/chat/chat-input-area/hooks.ts b/web/app/components/base/chat/chat/chat-input-area/hooks.ts
index 3559cb8799..5f54012a09 100644
--- a/web/app/components/base/chat/chat/chat-input-area/hooks.ts
+++ b/web/app/components/base/chat/chat/chat-input-area/hooks.ts
@@ -1,36 +1,47 @@
 import {
   useCallback,
-  useEffect,
-  useMemo,
   useRef,
   useState,
 } from 'react'
 import type { TextAreaRef } from 'rc-textarea'
 
 export const useTextAreaHeight = () => {
+  const wrapperRef = useRef<HTMLDivElement>(null)
   const textareaRef = useRef<TextAreaRef>(null)
-  const [height, setHeight] = useState(0)
+  const textValueRef = useRef<HTMLDivElement>(null)
+  const holdSpaceRef = useRef<HTMLDivElement>(null)
+  const [isMultipleLine, setIsMultipleLine] = useState(false)
 
-  const handleComputeHeight = () => {
+  const handleComputeHeight = useCallback(() => {
     const textareaElement = textareaRef.current?.resizableTextArea.textArea
-    if (textareaElement) {
-      const { height } = textareaElement.getBoundingClientRect()
+    if (wrapperRef.current && textareaElement && textValueRef.current && holdSpaceRef.current) {
+      const { width: wrapperWidth } = wrapperRef.current.getBoundingClientRect()
+      const { height: textareaHeight } = textareaElement.getBoundingClientRect()
+      const { width: textValueWidth } = textValueRef.current.getBoundingClientRect()
+      const { width: holdSpaceWidth } = holdSpaceRef.current.getBoundingClientRect()
 
-      setHeight(height)
+      if (textareaHeight > 32) {
+        setIsMultipleLine(true)
+      }
+      else {
+        if (textValueWidth + holdSpaceWidth >= wrapperWidth)
+          setIsMultipleLine(true)
+        else
+          setIsMultipleLine(false)
+      }
     }
-  }
-
-  useEffect(() => {
-    handleComputeHeight()
   }, [])
 
   const handleTextareaResize = useCallback(() => {
     handleComputeHeight()
-  }, [])
+  }, [handleComputeHeight])
 
   return {
+    wrapperRef,
     textareaRef,
+    textValueRef,
+    holdSpaceRef,
     handleTextareaResize,
-    isMultipleLine: useMemo(() => height > 32, [height]),
+    isMultipleLine,
   }
 }
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 be49248cb6..c79df7d7bb 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
@@ -1,49 +1,66 @@
 import {
   memo,
+  useState,
 } from 'react'
 import Textarea from 'rc-textarea'
-import { RiSendPlane2Fill } from '@remixicon/react'
 import { useTextAreaHeight } from './hooks'
-import Button from '@/app/components/base/button'
-import { FileUploaderInChatInput } from '@/app/components/base/file-uploader'
+import Operation from './operation'
 import cn from '@/utils/classnames'
+import { FileListFlexOperation } from '@/app/components/base/file-uploader'
 
 const ChatInputArea = () => {
   const {
+    wrapperRef,
     textareaRef,
+    textValueRef,
+    holdSpaceRef,
     handleTextareaResize,
     isMultipleLine,
   } = useTextAreaHeight()
+  const [value, setValue] = useState('')
+
+  const operation = <Operation ref={holdSpaceRef} />
 
   return (
     <div
       className={cn(
-        'p-[9px] bg-components-panel-bg-blur border border-components-chat-input-border rounded-xl shadow-md',
-        'max-h-[210px] overflow-y-auto',
-        !isMultipleLine && 'flex items-center',
+        'p-[9px] bg-components-panel-bg-blur border border-blue-300 rounded-xl shadow-md',
       )}
     >
-      <Textarea
-        ref={textareaRef}
-        className='grow w-full p-1 leading-6 body-lg-regular text-text-tertiary'
-        placeholder='Enter message...'
-        autoSize
-        onResize={handleTextareaResize}
-      />
-      <div className={cn(
-        'shrink-0 flex items-center justify-end ml-1',
-        isMultipleLine && 'sticky bottom-0',
-      )}>
-        <div className='flex items-center'>
-          <FileUploaderInChatInput />
-        </div>
-        <Button
-          className='ml-3 px-0 w-8'
-          variant='primary'
+      <div className='max-h-[158px] overflow-y-auto'>
+        <FileListFlexOperation />
+        <div
+          ref={wrapperRef}
+          className='flex items-center justify-between'
         >
-          <RiSendPlane2Fill className='w-4 h-4' />
-        </Button>
+          <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'
+            >
+              {value}
+            </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={value}
+              onChange={(e) => {
+                setValue(e.target.value)
+                handleTextareaResize()
+              }}
+            />
+          </div>
+          {
+            !isMultipleLine && operation
+          }
+        </div>
       </div>
+      {
+        isMultipleLine && operation
+      }
     </div>
   )
 }
diff --git a/web/app/components/base/chat/chat/chat-input-area/operation.tsx b/web/app/components/base/chat/chat/chat-input-area/operation.tsx
new file mode 100644
index 0000000000..db8ae62636
--- /dev/null
+++ b/web/app/components/base/chat/chat/chat-input-area/operation.tsx
@@ -0,0 +1,33 @@
+import { forwardRef } from 'react'
+import { RiSendPlane2Fill } from '@remixicon/react'
+import Button from '@/app/components/base/button'
+import { FileUploaderInChatInput } from '@/app/components/base/file-uploader'
+import cn from '@/utils/classnames'
+
+const Operation = forwardRef<HTMLDivElement>((_, ref) => {
+  return (
+    <div
+      className={cn(
+        'shrink-0 flex items-center justify-end',
+      )}
+    >
+      <div
+        className='flex items-center pl-1'
+        ref={ref}
+      >
+        <div className='flex items-center'>
+          <FileUploaderInChatInput />
+        </div>
+        <Button
+          className='ml-3 px-0 w-8'
+          variant='primary'
+        >
+          <RiSendPlane2Fill className='w-4 h-4' />
+        </Button>
+      </div>
+    </div>
+  )
+})
+Operation.displayName = 'Operation'
+
+export default Operation
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
new file mode 100644
index 0000000000..8685dfe786
--- /dev/null
+++ b/web/app/components/base/file-uploader/file-list-flex/file-list-flex-operation.tsx
@@ -0,0 +1,27 @@
+import {
+  forwardRef,
+  memo,
+} from 'react'
+import FileListItem from './file-list-item'
+
+const FileListFlexOperation = forwardRef<HTMLDivElement>((_, ref) => {
+  return (
+    <div
+      ref={ref}
+      className='flex flex-wrap gap-2'
+    >
+      <FileListItem />
+      <FileListItem />
+      <FileListItem isFile />
+      <FileListItem isFile />
+      <FileListItem isFile />
+      <FileListItem />
+      <FileListItem />
+      <FileListItem />
+      <FileListItem />
+    </div>
+  )
+})
+FileListFlexOperation.displayName = 'FileListFlexOperation'
+
+export default memo(FileListFlexOperation)
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-item.tsx
new file mode 100644
index 0000000000..273024ebd9
--- /dev/null
+++ b/web/app/components/base/file-uploader/file-list-flex/file-list-item.tsx
@@ -0,0 +1,31 @@
+import { memo } from 'react'
+import cn from '@/utils/classnames'
+
+type FileListItemProps = {
+  isFile?: boolean
+  className?: string
+}
+const FileListItem = ({
+  isFile,
+  className,
+}: FileListItemProps) => {
+  if (isFile) {
+    return (
+      <div className={cn(
+        'w-[144px] h-[68px] rounded-lg border-[0.5px] border-components-panel-border bg-components-card-bg-alt shadow-xs',
+        className,
+      )}>
+
+      </div>
+    )
+  }
+
+  return (
+    <div className={cn(
+      'w-[68px] h-[68px] border-[2px] border-components-panel-border shadow-xs',
+      className,
+    )}></div>
+  )
+}
+
+export default memo(FileListItem)
diff --git a/web/app/components/base/file-uploader/file-list/file-list-flex/index.tsx b/web/app/components/base/file-uploader/file-list/file-list-flex/index.tsx
deleted file mode 100644
index 1958fbd97d..0000000000
--- a/web/app/components/base/file-uploader/file-list/file-list-flex/index.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-import { memo } from 'react'
-
-const FileListFlex = () => {
-  return (
-    <div className='flex'></div>
-  )
-}
-
-export default memo(FileListFlex)
diff --git a/web/app/components/base/file-uploader/file-list/file-list-full-width/index.tsx b/web/app/components/base/file-uploader/file-list/file-list-full-width/index.tsx
deleted file mode 100644
index 143289c33a..0000000000
--- a/web/app/components/base/file-uploader/file-list/file-list-full-width/index.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-import { memo } from 'react'
-
-const FileListFullWidth = () => {
-  return (
-    <div></div>
-  )
-}
-
-export default memo(FileListFullWidth)
diff --git a/web/app/components/base/file-uploader/file-list/hooks.ts b/web/app/components/base/file-uploader/file-list/hooks.ts
deleted file mode 100644
index e69de29bb2..0000000000
diff --git a/web/app/components/base/file-uploader/file-list/index.tsx b/web/app/components/base/file-uploader/file-list/index.tsx
deleted file mode 100644
index e69de29bb2..0000000000
diff --git a/web/app/components/base/file-uploader/index.ts b/web/app/components/base/file-uploader/index.ts
index 0adcdf3374..79885c4370 100644
--- a/web/app/components/base/file-uploader/index.ts
+++ b/web/app/components/base/file-uploader/index.ts
@@ -1,3 +1,4 @@
 export { default as FileUploaderInAttachment } 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 e3b8d6a0a4..53871037ca 100644
--- a/web/app/components/share/text-generation/run-once/index.tsx
+++ b/web/app/components/share/text-generation/run-once/index.tsx
@@ -11,6 +11,8 @@ import Button from '@/app/components/base/button'
 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'
 
 export type IRunOnceProps = {
   siteInfo: SiteInfo
@@ -112,6 +114,8 @@ const RunOnce: FC<IRunOnceProps> = ({
               </div>
             )
           }
+          <ChatInputArea />
+          <FileUploaderInAttachment />
           {promptConfig.prompt_variables.length > 0 && (
             <div className='mt-4 h-[1px] bg-gray-100'></div>
           )}