chat input area

web/app/components/base/chat/chat/chat-input-area/index.tsx

@@ -1,14 +1,38 @@
 import {
   memo,
+  useCallback,
   useState,
 } from 'react'
 import Textarea from 'rc-textarea'
+import { useTranslation } from 'react-i18next'
+import Recorder from 'js-audio-recorder'
+import type {
+  EnableType,
+  OnSend,
+  VisionConfig,
+} from '../../types'
+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 VoiceInput from '@/app/components/base/voice-input'
+import { useToastContext } from '@/app/components/base/toast'
 
-const ChatInputArea = () => {
+type ChatInputAreaProps = {
+  visionConfig?: VisionConfig
+  speechToTextConfig?: EnableType
+  onSend?: OnSend
+  theme?: Theme | null
+}
+const ChatInputArea = ({
+  visionConfig,
+  speechToTextConfig = { enabled: true },
+  onSend,
+  theme,
+}: ChatInputAreaProps) => {
+  const { t } = useTranslation()
+  const { notify } = useToastContext()
   const {
     wrapperRef,
     textareaRef,
@@ -18,16 +42,31 @@ const ChatInputArea = () => {
     isMultipleLine,
   } = useTextAreaHeight()
   const [value, setValue] = useState('')
+  const [showVoiceInput, setShowVoiceInput] = useState(false)
 
-  const operation = <Operation ref={holdSpaceRef} />
+  const handleShowVoiceInput = useCallback(() => {
+    (Recorder as any).getPermission().then(() => {
+      setShowVoiceInput(true)
+    }, () => {
+      notify({ type: 'error', message: t('common.voiceInput.notAllow') })
+    })
+  }, [t, notify])
+
+  const operation = (
+    <Operation
+      ref={holdSpaceRef}
+      speechToTextConfig={speechToTextConfig}
+      onShowVoiceInput={handleShowVoiceInput}
+    />
+  )
 
   return (
     <div
       className={cn(
-        'p-[9px] bg-components-panel-bg-blur border border-blue-300 rounded-xl shadow-md',
+        'py-[9px] bg-components-panel-bg-blur border border-blue-300 rounded-xl shadow-md',
       )}
     >
-      <div className='max-h-[158px] overflow-y-auto'>
+      <div className='relative px-[9px] max-h-[158px] overflow-y-auto'>
         <FileListFlexOperation />
         <div
           ref={wrapperRef}
@@ -57,9 +96,19 @@ const ChatInputArea = () => {
             !isMultipleLine && operation
           }
         </div>
+        {
+          showVoiceInput && (
+            <VoiceInput
+              onCancel={() => setShowVoiceInput(false)}
+              onConverted={text => setValue(text)}
+            />
+          )
+        }
       </div>
       {
-        isMultipleLine && operation
+        isMultipleLine && (
+          <div className='px-[9px]'>{operation}</div>
+        )
       }
     </div>
   )

web/app/components/base/chat/chat/chat-input-area/operation.tsx

@@ -1,10 +1,27 @@
-import { forwardRef } from 'react'
+import {
-import { RiSendPlane2Fill } from '@remixicon/react'
+  forwardRef,
+  memo,
+} from 'react'
+import {
+  RiMicLine,
+  RiSendPlane2Fill,
+} from '@remixicon/react'
+import type {
+  EnableType,
+} from '../../types'
 import Button from '@/app/components/base/button'
+import ActionButton from '@/app/components/base/action-button'
 import { FileUploaderInChatInput } from '@/app/components/base/file-uploader'
 import cn from '@/utils/classnames'
 
-const Operation = forwardRef<HTMLDivElement>((_, ref) => {
+type OperationProps = {
+  speechToTextConfig?: EnableType
+  onShowVoiceInput?: () => void
+}
+const Operation = forwardRef<HTMLDivElement, OperationProps>(({
+  speechToTextConfig,
+  onShowVoiceInput,
+}, ref) => {
   return (
     <div
       className={cn(
@@ -15,8 +32,18 @@ const Operation = forwardRef<HTMLDivElement>((_, ref) => {
         className='flex items-center pl-1'
         ref={ref}
       >
-        <div className='flex items-center'>
+        <div className='flex items-center space-x-1'>
           <FileUploaderInChatInput />
+          {
+            speechToTextConfig?.enabled && (
+              <ActionButton
+                size='l'
+                onClick={onShowVoiceInput}
+              >
+                <RiMicLine className='w-5 h-5' />
+              </ActionButton>
+            )
+          }
         </div>
         <Button
           className='ml-3 px-0 w-8'
@@ -30,4 +57,4 @@ const Operation = forwardRef<HTMLDivElement>((_, ref) => {
 })
 Operation.displayName = 'Operation'
 
-export default Operation
+export default memo(Operation)

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

@@ -14,11 +14,6 @@ const FileListFlexOperation = forwardRef<HTMLDivElement>((_, ref) => {
       <FileListItem />
       <FileListItem isFile />
       <FileListItem isFile />
-      <FileListItem isFile />
-      <FileListItem />
-      <FileListItem />
-      <FileListItem />
-      <FileListItem />
     </div>
   )
 })

web/app/components/base/file-uploader/file-uploader-in-attachment/index.tsx

@@ -31,7 +31,7 @@ const FileUploaderInAttachment = () => {
               className='grow'
             >
               {option.icon}
-              {option.label}
+              <span className='ml-1'>{option.label}</span>
             </Button>
           ))
         }