diff --git a/ui/src/components/ai-chat/index.vue b/ui/src/components/ai-chat/index.vue index ce3c5d0f5..9e62a4b4c 100644 --- a/ui/src/components/ai-chat/index.vue +++ b/ui/src/components/ai-chat/index.vue @@ -168,7 +168,13 @@ - - - - - - +
+ 00:{{ recorderTime < 10 ? `0${recorderTime}` : recorderTime }} + + + + + +
+ ('') const chartOpenId = ref('') const chatList = ref([]) const inputFieldList = ref([]) @@ -279,6 +291,9 @@ const form_data = ref({}) const api_form_data = ref({}) const showUserInput = ref(true) +const recorderTime = ref(0) +const startRecorderTime = ref(false) +const recorderLoading = ref(false) const isDisabledChart = computed( () => !(inputValue.value.trim() && (props.appId || props.data?.name)) @@ -793,6 +808,7 @@ const mediaRecorderStatus = ref(true) const startRecording = async () => { try { mediaRecorderStatus.value = false + handleTimeChange() mediaRecorder.value = new Recorder({ type: 'mp3', bitRate: 128, @@ -814,6 +830,8 @@ const startRecording = async () => { // 停止录音 const stopRecording = () => { + startRecorderTime.value = false + recorderTime.value = 0 if (mediaRecorder.value) { mediaRecorderStatus.value = true mediaRecorder.value.stop( @@ -823,7 +841,6 @@ const stopRecording = () => { // link.href = window.URL.createObjectURL(blob) // link.download = 'abc.mp3' // link.click() - uploadRecording(blob) // 上传录音文件 }, (err: any) => { @@ -836,18 +853,39 @@ const stopRecording = () => { // 上传录音文件 const uploadRecording = async (audioBlob: Blob) => { try { + recorderLoading.value = true const formData = new FormData() formData.append('file', audioBlob, 'recording.mp3') applicationApi.postSpeechToText(props.data.id as string, formData, loading).then((response) => { console.log('上传成功:', response.data) - inputValue.value = response.data + recorderLoading.value = false + mediaRecorder.value.close() + inputValue.value = typeof response.data === 'string' ? response.data : '' // chatMessage(null, res.data) }) } catch (error) { + recorderLoading.value = false console.error('上传失败:', error) } } +const handleTimeChange = () => { + startRecorderTime.value = true + + setTimeout(() => { + if (recorderTime.value === 60) { + recorderTime.value = 0 + stopRecording() + startRecorderTime.value = false + } + if (!startRecorderTime.value) { + return + } + recorderTime.value++ + handleTimeChange() + }, 1000) +} + onMounted(() => { handleInputFieldList() }) diff --git a/ui/src/views/application-workflow/index.vue b/ui/src/views/application-workflow/index.vue index 193ad29f2..8a591df9c 100644 --- a/ui/src/views/application-workflow/index.vue +++ b/ui/src/views/application-workflow/index.vue @@ -409,7 +409,7 @@ onBeforeUnmount(() => { bottom: 16px; right: 16px; overflow: hidden; - width: 420px; + width: 450px; height: 600px; .workflow-debug-header { background: var(--app-header-bg-color);