fix(web): audio recorder add max size check

This commit is contained in:
zhaoying
2026-03-17 18:41:27 +08:00
parent 71b3b665b5
commit 599ccb6bde
3 changed files with 19 additions and 8 deletions

View File

@@ -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

View File

@@ -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>

View File

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