feat: Support stt mode auto send message

--story=1017616 --user=刘瑞斌 【应用】语音输入支持自动发送 https://www.tapd.cn/57709429/s/1641715

Author: liuruibin

apps/application/migrations/0023_application_stt_autosend.py

@@ -0,0 +1,18 @@
+# Generated by Django 4.2.15 on 2025-01-06 10:37
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('application', '0022_application_tts_autoplay'),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name='application',
+            name='stt_autosend',
+            field=models.BooleanField(default=False, verbose_name='自动发送'),
+        ),
+    ]

apps/application/models/application.py

@@ -66,6 +66,7 @@ class Application(AppModelMixin):
     stt_model_enable = models.BooleanField(verbose_name="语音识别模型是否启用", default=False)
     tts_type = models.CharField(verbose_name="语音播放类型", max_length=20, default="BROWSER")
     tts_autoplay = models.BooleanField(verbose_name="自动播放", default=False)
+    stt_autosend = models.BooleanField(verbose_name="自动发送", default=False)
     clean_time = models.IntegerField(verbose_name="清理时间", default=180)
     file_upload_enable = models.BooleanField(verbose_name="文件上传是否启用", default=False)
     file_upload_setting = models.JSONField(verbose_name="文件上传相关设置", default=dict)

apps/application/serializers/application_serializers.py

@@ -1009,7 +1009,7 @@ def edit(self, instance: Dict, with_valid=True):
             update_keys = ['name', 'desc', 'model_id', 'multiple_rounds_dialogue', 'prologue', 'status',
                            'dataset_setting', 'model_setting', 'problem_optimization', 'dialogue_number',
                            'stt_model_id', 'tts_model_id', 'tts_model_enable', 'stt_model_enable', 'tts_type',
-                           'tts_autoplay', 'file_upload_enable', 'file_upload_setting',
+                           'tts_autoplay', 'stt_autosend', 'file_upload_enable', 'file_upload_setting',
                            'api_key_is_active', 'icon', 'work_flow', 'model_params_setting', 'tts_model_params_setting',
                            'problem_optimization_prompt', 'clean_time']
             for update_key in update_keys:
@@ -1075,6 +1075,8 @@ def get_work_flow_model(instance):
                         instance['tts_type'] = node_data['tts_type']
                     if 'tts_autoplay' in node_data:
                         instance['tts_autoplay'] = node_data['tts_autoplay']
+                    if 'stt_autosend' in node_data:
+                        instance['stt_autosend'] = node_data['stt_autosend']
                     if 'tts_model_params_setting' in node_data:
                         instance['tts_model_params_setting'] = node_data['tts_model_params_setting']
                     if 'file_upload_enable' in node_data:

ui/src/api/type/application.ts

@@ -22,6 +22,7 @@ interface ApplicationFormType {
   tts_model_enable?: boolean
   tts_type?: string
   tts_autoplay?: boolean
+  stt_autosend?: boolean
 }
 interface Chunk {
   real_node_id: string

ui/src/components/ai-chat/component/chat-input-operate/index.vue

@@ -175,7 +175,7 @@
   </div>
 </template>
 <script setup lang="ts">
-import { ref, computed, onMounted } from 'vue'
+import { ref, computed, onMounted, nextTick } from 'vue'
 import Recorder from 'recorder-core'
 import applicationApi from '@/api/application'
 import { MsgAlert } from '@/utils/message'
@@ -254,7 +254,7 @@ const getAcceptList = () => {
   if (video) {
     accepts = [...accepts, ...videoExtensions]
   }
-  // console.log(accepts)
+
   if (accepts.length === 0) {
     return '.请在文件上传配置中选择文件类型'
   }
@@ -462,7 +462,12 @@ const uploadRecording = async (audioBlob: Blob) => {
         recorderLoading.value = false
         mediaRecorder.value.close()
         inputValue.value = typeof response.data === 'string' ? response.data : ''
-        // chatMessage(null, res.data)
+        // 自动发送
+        if (props.applicationDetails.stt_autosend) {
+          nextTick(() => {
+            autoSendMessage()
+          })
+        }
       })
   } catch (error) {
     recorderLoading.value = false
@@ -486,24 +491,28 @@ const handleTimeChange = () => {
   }, 1000)
 }
 
+function autoSendMessage() {
+  props.sendMessage(inputValue.value, {
+    image_list: uploadImageList.value,
+    document_list: uploadDocumentList.value,
+    audio_list: uploadAudioList.value,
+    video_list: uploadVideoList.value
+  })
+  inputValue.value = ''
+  uploadImageList.value = []
+  uploadDocumentList.value = []
+  uploadAudioList.value = []
+  uploadVideoList.value = []
+  quickInputRef.value.textareaStyle.height = '45px'
+}
+
 function sendChatHandle(event?: any) {
   if (!event?.ctrlKey) {
     // 如果没有按下组合键ctrl，则会阻止默认事件
     event?.preventDefault()
     if (!isDisabledChart.value && !props.loading && !event?.isComposing) {
       if (inputValue.value.trim()) {
-        props.sendMessage(inputValue.value, {
-          image_list: uploadImageList.value,
-          document_list: uploadDocumentList.value,
-          audio_list: uploadAudioList.value,
-          video_list: uploadVideoList.value
-        })
-        inputValue.value = ''
-        uploadImageList.value = []
-        uploadDocumentList.value = []
-        uploadAudioList.value = []
-        uploadVideoList.value = []
-        quickInputRef.value.textareaStyle.height = '45px'
+        autoSendMessage()
       }
     }
   } else {

ui/src/views/application/ApplicationSetting.vue

@@ -319,21 +319,16 @@
               <el-form-item>
                 <template #label>
                   <div class="flex-between">
-                    <div class="flex align-center">
-                      <span class="mr-4">语音输入</span>
-                      <!-- <el-tooltip
-                        effect="dark"
-                        content="开启后，需要设定语音转文本模型，语音输入完成后会转化为文字直接发送提问"
-                        placement="right"
-                      >
-                        <AppIcon iconName="app-warning" class="app-warning-icon"></AppIcon>
-                      </el-tooltip> -->
+                    <span class="mr-4">语音输入</span>
+                    <div class="flex">
+                      <el-checkbox v-model="applicationForm.stt_autosend">自动发送</el-checkbox>
+                      <el-switch
+                        class="ml-8"
+                        size="small"
+                        v-model="applicationForm.stt_model_enable"
+                        @change="sttModelEnableChange"
+                      />
                     </div>
-                    <el-switch
-                      size="small"
-                      v-model="applicationForm.stt_model_enable"
-                      @change="sttModelEnableChange"
-                    />
                   </div>
                 </template>
                 <el-select

ui/src/workflow/nodes/base-node/index.vue

@@ -84,21 +84,16 @@
       <el-form-item>
         <template #label>
           <div class="flex-between">
-            <div class="flex align-center">
-              <span class="mr-4">语音输入</span>
-              <!-- <el-tooltip
-                effect="dark"
-                content="开启后，需要设定语音转文本模型，语音输入完成后会转化为文字直接发送提问"
-                placement="right"
-              >
-                <AppIcon iconName="app-warning" class="app-warning-icon"></AppIcon>
-              </el-tooltip> -->
+            <span class="mr-4">语音输入</span>
+            <div class="flex">
+              <el-checkbox v-model="form_data.stt_autosend">自动发送</el-checkbox>
+              <el-switch
+                class="ml-8"
+                size="small"
+                v-model="form_data.stt_model_enable"
+                @change="sttModelEnableChange"
+              />
             </div>
-            <el-switch
-              size="small"
-              v-model="form_data.stt_model_enable"
-              @change="sttModelEnableChange"
-            />
           </div>
         </template>