feat: Support reasoning content(WIP)

Author: liuruibin

apps/application/models/application.py

@@ -35,7 +35,13 @@ def get_dataset_setting_dict():
 
 
 def get_model_setting_dict():
-    return {'prompt': Application.get_default_model_prompt(), 'no_references_prompt': '{question}'}
+    return {
+        'prompt': Application.get_default_model_prompt(),
+        'no_references_prompt': '{question}',
+        'reasoning_content_start': '<think>',
+        'reasoning_content_end': '</think>',
+        'reasoning_content_enable': False,
+    }
 
 
 class Application(AppModelMixin):

ui/src/locales/lang/en-US/views/application.ts

@@ -106,6 +106,11 @@ export default {
         browser: 'Browser playback (free)',
         tts: 'TTS Model',
         listeningTest: 'Preview'
+      },
+      reasoningContent: {
+        enable: 'Show Reasoning',
+        start: 'Start',
+        end: 'End',
       }
     },
     buttons: {

ui/src/locales/lang/zh-CN/views/application.ts

@@ -97,6 +97,11 @@ export default {
         browser: '浏览器播放(免费)',
         tts: 'TTS模型',
         listeningTest: '试听'
+      },
+      reasoningContent: {
+        enable: '输出思考',
+        start: '开始',
+        end: '结束',
       }
     },
     buttons: {

ui/src/locales/lang/zh-Hant/views/application.ts

@@ -98,6 +98,11 @@ export default {
         browser: '瀏覽器播放(免費)',
         tts: 'TTS模型',
         listeningTest: '試聽'
+      },
+      reasoningContent: {
+        enable: '输出思考',
+        start: '开始',
+        end: '结束',
       }
     },
     buttons: {

ui/src/views/application/ApplicationSetting.vue

@@ -65,6 +65,14 @@
                 <template #label>
                   <div class="flex-between">
                     <span>{{ $t('views.application.applicationForm.form.aiModel.label') }}</span>
+                    <el-button
+                      type="primary"
+                      link
+                      @click="openReasoningParamSettingDialog"
+                      :disabled="!applicationForm.model_id"
+                    >
+                      {{ $t('common.setting') }}
+                    </el-button>
                     <el-button
                       type="primary"
                       link
@@ -453,6 +461,7 @@
     />
 
     <EditAvatarDialog ref="EditAvatarDialogRef" @refresh="refreshIcon" />
+    <ReasoningParamSettingDialog ref="ReasoningParamSettingDialogRef" @refresh="submitReasoningDialog"/>
   </LayoutContainer>
 </template>
 <script setup lang="ts">
@@ -472,6 +481,7 @@ import { MsgSuccess, MsgWarning } from '@/utils/message'
 import useStore from '@/stores'
 import { t } from '@/locales'
 import TTSModeParamSettingDialog from './component/TTSModeParamSettingDialog.vue'
+import ReasoningParamSettingDialog from './component/ReasoningParamSettingDialog.vue'
 
 const { model, application } = useStore()
 
@@ -493,6 +503,7 @@ const optimizationPrompt =
   t('views.application.applicationForm.dialog.defaultPrompt2')
 
 const AIModeParamSettingDialogRef = ref<InstanceType<typeof AIModeParamSettingDialog>>()
+const ReasoningParamSettingDialogRef = ref<InstanceType<typeof ReasoningParamSettingDialog>>()
 const TTSModeParamSettingDialogRef = ref<InstanceType<typeof TTSModeParamSettingDialog>>()
 const ParamSettingDialogRef = ref<InstanceType<typeof ParamSettingDialog>>()
 
@@ -562,6 +573,13 @@ function submitNoReferencesPromptDialog(val: string) {
 function submitSystemDialog(val: string) {
   applicationForm.value.model_setting.system = val
 }
+function submitReasoningDialog(val: any) {
+  console.log(val)
+  applicationForm.value.model_setting = {
+    ...applicationForm.value.model_setting,
+    ...val
+  }
+}
 
 const submit = async (formEl: FormInstance | undefined) => {
   if (!formEl) return
@@ -591,6 +609,12 @@ const openAIParamSettingDialog = () => {
   }
 }
 
+const openReasoningParamSettingDialog = () => {
+  if (applicationForm.value.model_id) {
+    ReasoningParamSettingDialogRef.value?.open(applicationForm.value.model_setting)
+  }
+}
+
 const openTTSParamSettingDialog = () => {
   if (applicationForm.value.tts_model_id) {
     TTSModeParamSettingDialogRef.value?.open(

ui/src/views/application/component/ReasoningParamSettingDialog.vue

@@ -0,0 +1,100 @@
+<template>
+  <el-dialog
+    align-center
+    :title="$t('common.setting')"
+    class="param-dialog"
+    v-model="dialogVisible"
+    style="width: 550px"
+    append-to-body
+    :close-on-click-modal="false"
+    :close-on-press-escape="false"
+  >
+    <el-form label-position="top" ref="paramFormRef" :model="form">
+      <el-form-item>
+        <template #label>
+          <div class="flex-between">
+            <span>{{ $t('views.application.applicationForm.form.reasoningContent.enable') }}</span>
+            <el-switch v-model="form.reasoning_content_enable" />
+          </div>
+        </template>
+      </el-form-item>
+      <el-form-item :label="$t('views.application.applicationForm.form.reasoningContent.start')">
+        <el-input
+          v-model="form.reasoning_content_start"
+          :rows="6"
+          maxlength="50"
+          placeholder="<think>"
+        />
+      </el-form-item>
+      <el-form-item :label="$t('views.application.applicationForm.form.reasoningContent.end')">
+        <el-input
+          v-model="form.reasoning_content_end"
+          :rows="6"
+          maxlength="50"
+          placeholder="</think>"
+        />
+      </el-form-item>
+    </el-form>
+
+    <template #footer>
+      <span class="dialog-footer p-16">
+        <el-button @click.prevent="dialogVisible = false">{{ $t('common.cancel') }}</el-button>
+        <el-button type="primary" @click="submit()" :loading="loading">
+          {{ $t('common.save') }}
+        </el-button>
+      </span>
+    </template>
+  </el-dialog>
+</template>
+<script setup lang="ts">
+import { ref, watch, reactive } from 'vue'
+
+
+const emit = defineEmits(['refresh'])
+
+const form = ref<any>({
+  reasoning_content_enable: false,
+  reasoning_content_start: '<think>',
+  reasoning_content_end: '</think>'
+})
+
+
+const dialogVisible = ref<boolean>(false)
+const loading = ref(false)
+
+
+const open = (data: any) => {
+  form.value = { ...form.value, ...data }
+  dialogVisible.value = true
+}
+
+const submit = () => {
+  emit('refresh', form.value)
+  dialogVisible.value = false
+}
+
+defineExpose({ open })
+</script>
+<style lang="scss" scope>
+.param-dialog {
+  padding: 8px 8px 24px 8px;
+
+  .el-dialog__header {
+    padding: 16px 16px 0 16px;
+  }
+
+  .el-dialog__body {
+    padding: 0 !important;
+  }
+
+  .dialog-max-height {
+    height: 560px;
+  }
+
+  .custom-slider {
+    .el-input-number.is-without-controls .el-input__wrapper {
+      padding: 0 !important;
+    }
+  }
+}
+</style>