From 2498c238b29a7873a6d0a94cb4a8e67ffcf456f4 Mon Sep 17 00:00:00 2001
From: StyleZhang <jasonapring2015@outlook.com>
Date: Fri, 26 Jul 2024 16:54:25 +0800
Subject: [PATCH] file-uploader

---
 .../components/base/action-button/index.css   |  2 +-
 .../base/chat/chat/chat-input-area/hooks.ts   | 36 +++++++++++++
 .../base/chat/chat/chat-input-area/index.tsx  | 51 +++++++++++++++++++
 .../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
 .../file-uploader-in-chat-input/index.tsx     | 51 +++++++++++++++++++
 .../components/base/file-uploader/index.ts    |  1 +
 9 files changed, 158 insertions(+), 1 deletion(-)
 create mode 100644 web/app/components/base/chat/chat/chat-input-area/hooks.ts
 create mode 100644 web/app/components/base/chat/chat/chat-input-area/index.tsx
 create mode 100644 web/app/components/base/file-uploader/file-list/file-list-flex/index.tsx
 create mode 100644 web/app/components/base/file-uploader/file-list/file-list-full-width/index.tsx
 create mode 100644 web/app/components/base/file-uploader/file-list/hooks.ts
 create mode 100644 web/app/components/base/file-uploader/file-list/index.tsx

diff --git a/web/app/components/base/action-button/index.css b/web/app/components/base/action-button/index.css
index b87dbc8d4a..5ed29742db 100644
--- a/web/app/components/base/action-button/index.css
+++ b/web/app/components/base/action-button/index.css
@@ -16,7 +16,7 @@
     }
 
     .action-btn-l {
-        @apply p-1.5 w-[34px] h-[34px] rounded-lg
+        @apply p-1.5 w-8 h-8 rounded-lg
     }
 
     /* m is for the regular button */
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
new file mode 100644
index 0000000000..3559cb8799
--- /dev/null
+++ b/web/app/components/base/chat/chat/chat-input-area/hooks.ts
@@ -0,0 +1,36 @@
+import {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react'
+import type { TextAreaRef } from 'rc-textarea'
+
+export const useTextAreaHeight = () => {
+  const textareaRef = useRef<TextAreaRef>(null)
+  const [height, setHeight] = useState(0)
+
+  const handleComputeHeight = () => {
+    const textareaElement = textareaRef.current?.resizableTextArea.textArea
+    if (textareaElement) {
+      const { height } = textareaElement.getBoundingClientRect()
+
+      setHeight(height)
+    }
+  }
+
+  useEffect(() => {
+    handleComputeHeight()
+  }, [])
+
+  const handleTextareaResize = useCallback(() => {
+    handleComputeHeight()
+  }, [])
+
+  return {
+    textareaRef,
+    handleTextareaResize,
+    isMultipleLine: useMemo(() => height > 32, [height]),
+  }
+}
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
new file mode 100644
index 0000000000..be49248cb6
--- /dev/null
+++ b/web/app/components/base/chat/chat/chat-input-area/index.tsx
@@ -0,0 +1,51 @@
+import {
+  memo,
+} 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 cn from '@/utils/classnames'
+
+const ChatInputArea = () => {
+  const {
+    textareaRef,
+    handleTextareaResize,
+    isMultipleLine,
+  } = useTextAreaHeight()
+
+  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',
+      )}
+    >
+      <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'
+        >
+          <RiSendPlane2Fill className='w-4 h-4' />
+        </Button>
+      </div>
+    </div>
+  )
+}
+
+export default memo(ChatInputArea)
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
new file mode 100644
index 0000000000..1958fbd97d
--- /dev/null
+++ b/web/app/components/base/file-uploader/file-list/file-list-flex/index.tsx
@@ -0,0 +1,9 @@
+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
new file mode 100644
index 0000000000..143289c33a
--- /dev/null
+++ b/web/app/components/base/file-uploader/file-list/file-list-full-width/index.tsx
@@ -0,0 +1,9 @@
+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
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/web/app/components/base/file-uploader/file-list/index.tsx b/web/app/components/base/file-uploader/file-list/index.tsx
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/web/app/components/base/file-uploader/file-uploader-in-chat-input/index.tsx b/web/app/components/base/file-uploader/file-uploader-in-chat-input/index.tsx
index e69de29bb2..d645d2b68f 100644
--- a/web/app/components/base/file-uploader/file-uploader-in-chat-input/index.tsx
+++ b/web/app/components/base/file-uploader/file-uploader-in-chat-input/index.tsx
@@ -0,0 +1,51 @@
+import {
+  memo,
+  useState,
+} from 'react'
+import {
+  RiAttachmentLine,
+} from '@remixicon/react'
+import {
+  PortalToFollowElem,
+  PortalToFollowElemContent,
+  PortalToFollowElemTrigger,
+} from '@/app/components/base/portal-to-follow-elem'
+import ActionButton from '@/app/components/base/action-button'
+import Button from '@/app/components/base/button'
+
+const FileUploaderInChatInput = () => {
+  const [open, setOpen] = useState(false)
+
+  return (
+    <PortalToFollowElem
+      open={open}
+      onOpenChange={setOpen}
+      placement='top'
+      offset={4}
+    >
+      <PortalToFollowElemTrigger onClick={() => setOpen(v => !v)}>
+        <ActionButton size='l'>
+          <RiAttachmentLine className='w-5 h-5' />
+        </ActionButton>
+      </PortalToFollowElemTrigger>
+      <PortalToFollowElemContent>
+        <div className='p-3 w-[280px] bg-components-panel-bg-blur border-[0.5px] border-components-panel-border rounded-xl shadow-lg'>
+          <div className='flex items-center p-1 bg-components-input-bg-active border border-components-input-border-active rounded-lg shadow-xs'>
+            <input
+              className='mr-0.5 p-1 appearance-none system-sm-regular text-text-secondary'
+              placeholder='Enter URL...'
+            />
+            <Button
+              size='small'
+              variant='primary'
+            >
+              OK ↩
+            </Button>
+          </div>
+        </div>
+      </PortalToFollowElemContent>
+    </PortalToFollowElem>
+  )
+}
+
+export default memo(FileUploaderInChatInput)
diff --git a/web/app/components/base/file-uploader/index.ts b/web/app/components/base/file-uploader/index.ts
index c8111581c9..0adcdf3374 100644
--- a/web/app/components/base/file-uploader/index.ts
+++ b/web/app/components/base/file-uploader/index.ts
@@ -1,2 +1,3 @@
 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'