Merge branch 'feat/chat-support-voice-input' into deploy/dev

api/services/audio_service.py

@@ -5,7 +5,7 @@ from core.llm.llm_builder import LLMBuilder
 from core.llm.provider.llm_provider_service import LLMProviderService
 from services.errors.audio import NoAudioUploadedError, AudioTooLargeError, UnsupportedAudioTypeError
 
-FILE_SIZE_LIMIT = 25 * 1024 * 1024
+FILE_SIZE_LIMIT = 1 * 1024 * 1024
 ALLOWED_EXTENSIONS = ['mp3', 'mp4', 'mpeg', 'mpga', 'm4a', 'wav', 'webm']
 
 class AudioService:

web/app/components/app/chat/index.tsx

@@ -3,6 +3,7 @@ import type { FC } from 'react'
 import React, { useEffect, useLayoutEffect, useRef, useState } from 'react'
 import { useContext } from 'use-context-selector'
 import cn from 'classnames'
+import Recorder from 'js-audio-recorder'
 import { HandThumbDownIcon, HandThumbUpIcon } from '@heroicons/react/24/outline'
 import { UserCircleIcon } from '@heroicons/react/24/solid'
 import { useTranslation } from 'react-i18next'
@@ -493,6 +494,13 @@ const Chat: FC<IChatProps> = ({
   }, [suggestionList])
 
   const [voiceInputShow, setVoiceInputShow] = useState(false)
+  const handleVoiceInputShow = () => {
+    (Recorder as any).getPermission().then(() => {
+      setVoiceInputShow(true)
+    }, () => {
+      logError(t('common.voiceInput.notAllow'))
+    })
+  }
 
   return (
     <div className={cn('px-3.5', 'h-full')}>
@@ -581,7 +589,7 @@ const Chat: FC<IChatProps> = ({
                     : (
                       <div
                         className='group flex justify-center items-center w-8 h-8 hover:bg-primary-50 rounded-lg cursor-pointer'
-                        onClick={() => setVoiceInputShow(true)}
+                        onClick={handleVoiceInputShow}
                       >
                         <Microphone01 className='block w-4 h-4 text-gray-500 group-hover:hidden' />
                         <Microphone01Solid className='hidden w-4 h-4 text-primary-600 group-hover:block' />

web/app/components/base/voice-input/index.tsx

@@ -86,12 +86,18 @@ const VoiceInput = ({
       onCancel()
     }
   }, [])
-  const handleStartRecord = () => {
-    setStartRecord(true)
-    setStartConvert(false)
-    recorder.current.start()
-    if (canvasRef.current && ctxRef.current)
-      drawRecord()
+  const handleStartRecord = async () => {
+    try {
+      await recorder.current.start()
+      setStartRecord(true)
+      setStartConvert(false)
+
+      if (canvasRef.current && ctxRef.current)
+        drawRecord()
+    }
+    catch (e) {
+      onCancel()
+    }
   }
 
   const initCanvas = () => {
@@ -117,12 +123,8 @@ const VoiceInput = ({
     handleStopRecorder()
 
   useEffect(() => {
-    initCanvas();
-    (Recorder as any).getPermission().then(() => {
-      handleStartRecord()
-    }, () => {
-      handleStopRecorder()
-    })
+    initCanvas()
+    handleStartRecord()
   }, [])
 
   const minutes = parseInt(`${parseInt(`${originDuration}`) / 60}`)

web/i18n/lang/common.en.ts

@@ -228,6 +228,7 @@ const translation = {
   voiceInput: {
     speaking: 'Speak now...',
     converting: 'Converting to text...',
+    notAllow: 'microphone not authorized',
   },
 }
 

web/i18n/lang/common.zh.ts

@@ -229,6 +229,7 @@ const translation = {
   voiceInput: {
     speaking: '现在讲...',
     converting: '正在转换为文本...',
+    notAllow: '麦克风未授权',
   },
 }