file uploader

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) {
+    if (wrapperRef.current && textareaElement && textValueRef.current && holdSpaceRef.current) {
-      const { height } = textareaElement.getBoundingClientRect()
+      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,
   }
 }

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 Operation from './operation'
-import { FileUploaderInChatInput } from '@/app/components/base/file-uploader'
 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',
+        'p-[9px] bg-components-panel-bg-blur border border-blue-300 rounded-xl shadow-md',
-        'max-h-[210px] overflow-y-auto',
-        !isMultipleLine && 'flex items-center',
       )}
     >
-      <Textarea
+      <div className='max-h-[158px] overflow-y-auto'>
-        ref={textareaRef}
+        <FileListFlexOperation />
-        className='grow w-full p-1 leading-6 body-lg-regular text-text-tertiary'
+        <div
-        placeholder='Enter message...'
+          ref={wrapperRef}
-        autoSize
+          className='flex items-center justify-between'
-        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'
         >
-          <RiSendPlane2Fill className='w-4 h-4' />
+          <div className='flex items-center relative grow w-full'>
-        </Button>
+            <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>
   )
 }

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

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)

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)

web/app/components/base/file-uploader/file-list/file-list-flex/index.tsx

@@ -1,9 +0,0 @@
-import { memo } from 'react'
-
-const FileListFlex = () => {
-  return (
-    <div className='flex'></div>
-  )
-}
-
-export default memo(FileListFlex)

web/app/components/base/file-uploader/file-list/file-list-full-width/index.tsx

@@ -1,9 +0,0 @@
-import { memo } from 'react'
-
-const FileListFullWidth = () => {
-  return (
-    <div></div>
-  )
-}
-
-export default memo(FileListFullWidth)

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'

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