fix(web): audio recorder add max size check
This commit is contained in:
@@ -2,10 +2,12 @@
|
|||||||
* @Author: ZhaoYing
|
* @Author: ZhaoYing
|
||||||
* @Date: 2026-02-06 21:11:51
|
* @Date: 2026-02-06 21:11:51
|
||||||
* @Last Modified by: ZhaoYing
|
* @Last Modified by: ZhaoYing
|
||||||
* @Last Modified time: 2026-03-16 18:06:00
|
* @Last Modified time: 2026-03-17 18:39:09
|
||||||
*/
|
*/
|
||||||
import { type FC, useRef, useState } from 'react'
|
import { type FC, useRef, useState } from 'react'
|
||||||
import RecordRTC from 'recordrtc'
|
import RecordRTC from 'recordrtc'
|
||||||
|
import { App } from 'antd'
|
||||||
|
import { useTranslation } from 'react-i18next';
|
||||||
|
|
||||||
import { fileUploadUrlWithoutApiPrefix } from '@/api/fileStorage'
|
import { fileUploadUrlWithoutApiPrefix } from '@/api/fileStorage'
|
||||||
import { request } from '@/utils/request'
|
import { request } from '@/utils/request'
|
||||||
@@ -20,6 +22,7 @@ interface AudioRecorderProps {
|
|||||||
/** Additional config passed to the upload request */
|
/** Additional config passed to the upload request */
|
||||||
requestConfig?: Record<string, any>;
|
requestConfig?: Record<string, any>;
|
||||||
disabled?: boolean;
|
disabled?: boolean;
|
||||||
|
maxSize?: number;
|
||||||
}
|
}
|
||||||
|
|
||||||
const AudioRecorder: FC<AudioRecorderProps> = ({
|
const AudioRecorder: FC<AudioRecorderProps> = ({
|
||||||
@@ -27,8 +30,11 @@ const AudioRecorder: FC<AudioRecorderProps> = ({
|
|||||||
className = '',
|
className = '',
|
||||||
action = fileUploadUrlWithoutApiPrefix,
|
action = fileUploadUrlWithoutApiPrefix,
|
||||||
requestConfig = {},
|
requestConfig = {},
|
||||||
disabled = false
|
disabled = false,
|
||||||
|
maxSize,
|
||||||
}) => {
|
}) => {
|
||||||
|
const { message } = App.useApp()
|
||||||
|
const { t } = useTranslation();
|
||||||
// Whether the recorder is currently capturing audio
|
// Whether the recorder is currently capturing audio
|
||||||
const [isRecording, setIsRecording] = useState(false)
|
const [isRecording, setIsRecording] = useState(false)
|
||||||
// Holds the RecordRTC instance across renders
|
// Holds the RecordRTC instance across renders
|
||||||
@@ -57,6 +63,12 @@ const AudioRecorder: FC<AudioRecorderProps> = ({
|
|||||||
recorderRef.current.stopRecording(() => {
|
recorderRef.current.stopRecording(() => {
|
||||||
const blob = recorderRef.current!.getBlob()
|
const blob = recorderRef.current!.getBlob()
|
||||||
const url = recorderRef.current!.toURL()
|
const url = recorderRef.current!.toURL()
|
||||||
|
|
||||||
|
if (maxSize && blob.size > maxSize * 1024 * 1024) {
|
||||||
|
message.error(t('common.fileSizeTip', { size: maxSize }));
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
const formData = new FormData()
|
const formData = new FormData()
|
||||||
formData.append('file', blob, `recording_${Date.now()}.webm`)
|
formData.append('file', blob, `recording_${Date.now()}.webm`)
|
||||||
request
|
request
|
||||||
|
|||||||
@@ -1,8 +1,8 @@
|
|||||||
/*
|
/*
|
||||||
* @Author: ZhaoYing
|
* @Author: ZhaoYing
|
||||||
* @Date: 2026-03-17 14:22:25
|
* @Date: 2026-03-17 14:22:25
|
||||||
* @Last Modified by: ZhaoYing
|
* @Last Modified by: ZhaoYing
|
||||||
* @Last Modified time: 2026-03-17 14:22:25
|
* @Last Modified time: 2026-03-17 18:39:49
|
||||||
*/
|
*/
|
||||||
// Toolbar component for chat input area, supporting file upload, audio recording, and variable configuration
|
// Toolbar component for chat input area, supporting file upload, audio recording, and variable configuration
|
||||||
import { useRef, forwardRef, useImperativeHandle, type ReactNode, useEffect } from 'react'
|
import { useRef, forwardRef, useImperativeHandle, type ReactNode, useEffect } from 'react'
|
||||||
@@ -151,8 +151,6 @@ const ChatToolbar = forwardRef<ChatToolbarRef, ChatToolbarProps>(({
|
|||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
console.log('queryValues', queryValues)
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Form form={form} initialValues={{ files: [], variables: [] }}>
|
<Form form={form} initialValues={{ files: [], variables: [] }}>
|
||||||
<Flex justify="space-between" className="rb:flex-1">
|
<Flex justify="space-between" className="rb:flex-1">
|
||||||
@@ -183,6 +181,7 @@ const ChatToolbar = forwardRef<ChatToolbarRef, ChatToolbarProps>(({
|
|||||||
action={uploadAction}
|
action={uploadAction}
|
||||||
requestConfig={uploadRequestConfig}
|
requestConfig={uploadRequestConfig}
|
||||||
onRecordingComplete={handleRecordingComplete}
|
onRecordingComplete={handleRecordingComplete}
|
||||||
|
maxSize={file_upload?.audio_max_size_mb}
|
||||||
/>
|
/>
|
||||||
<Divider type="vertical" className="rb:ml-1.5! rb:mr-3!" />
|
<Divider type="vertical" className="rb:ml-1.5! rb:mr-3!" />
|
||||||
</Flex>
|
</Flex>
|
||||||
|
|||||||
@@ -2,7 +2,7 @@
|
|||||||
* @Author: ZhaoYing
|
* @Author: ZhaoYing
|
||||||
* @Date: 2026-02-03 16:58:03
|
* @Date: 2026-02-03 16:58:03
|
||||||
* @Last Modified by: ZhaoYing
|
* @Last Modified by: ZhaoYing
|
||||||
* @Last Modified time: 2026-03-17 15:39:17
|
* @Last Modified time: 2026-03-17 18:30:58
|
||||||
*/
|
*/
|
||||||
/**
|
/**
|
||||||
* Conversation Page
|
* Conversation Page
|
||||||
@@ -369,7 +369,7 @@ const Conversation: FC = () => {
|
|||||||
}}
|
}}
|
||||||
extra={
|
extra={
|
||||||
<>
|
<>
|
||||||
{features.web_search?.enabled &&
|
{features?.web_search?.enabled &&
|
||||||
<ButtonCheckbox
|
<ButtonCheckbox
|
||||||
icon={OnlineIcon}
|
icon={OnlineIcon}
|
||||||
checkedIcon={OnlineCheckedIcon}
|
checkedIcon={OnlineCheckedIcon}
|
||||||
|
|||||||
Reference in New Issue
Block a user