feat: Support reasoning content(WIP)

Author: shaohuzhang1

ui/src/components/ai-chat/component/answer-content/index.vue

@@ -16,7 +16,8 @@
           ></MdRenderer>
           <template v-else-if="answer_text.length > 0">
             <MdRenderer
-              v-for="answer in answer_text"
+              v-for="(answer, index) in answer_text"
+              :key="index"
               :chat_record_id="answer.chat_record_id"
               :child_node="answer.child_node"
               :runtime_node_id="answer.runtime_node_id"

ui/src/components/markdown/MdRenderer.vue

@@ -1,9 +1,7 @@
 <template>
   <div>
-    <!-- todo  推理过程组件需要完善,目前用span占位   -->
-    <span style="color: red">
-      {{ reasoning_content }}
-    </span>
+    <!-- 推理过程组件 -->
+    <ReasoningRander :content="reasoning_content" v-if="reasoning_content" />
     <template v-for="(item, index) in md_view_list" :key="index">
       <div
         v-if="item.type === 'question'"
@@ -48,6 +46,7 @@ import { config } from 'md-editor-v3'
 import HtmlRander from './HtmlRander.vue'
 import EchartsRander from './EchartsRander.vue'
 import FormRander from './FormRander.vue'
+import ReasoningRander from './ReasoningRander.vue'
 config({
   markdownItConfig(md) {
     md.renderer.rules.image = (tokens, idx, options, env, self) => {

ui/src/components/markdown/ReasoningRander.vue

@@ -0,0 +1,27 @@
+<template>
+  <div class="reasoning">
+    <el-button link>
+      {{ $t('views.applicationWorkflow.nodes.aiChatNode.think') }}
+    </el-button>
+    <div class="border-l">
+      <MdPreview
+        noIconfont
+        ref="editorRef"
+        editorId="preview-only"
+        :modelValue="content"
+        class="reasoning-md"
+      />
+    </div>
+  </div>
+</template>
+<script lang="ts" setup>
+const props = defineProps<{ content?: string }>()
+</script>
+<style lang="scss" scoped>
+.reasoning {
+  padding-left: 8px;
+  .reasoning-md {
+    --md-color: var(--app-text-color-secondary) !important;
+  }
+}
+</style>

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

@@ -105,7 +105,8 @@ export default {
         tooltip: `If turned off, the content of this node will not be output to the user.
                   If you want the user to see the output of this node, please turn on the switch.`
       },
-      defaultPrompt: 'Known Information'
+      defaultPrompt: 'Known Information',
+      think: 'Thinking Process',
     },
     searchDatasetNode: {
       label: 'Knowledge Search',

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

@@ -62,8 +62,9 @@ export default {
         references: ' (References Knowledge)',
         placeholder: 'Please enter prompt',
         requiredMessage: 'Please enter prompt',
-        tooltip:'By adjusting the content of the prompt, you can guide the direction of the large model chat.',
-        
+        tooltip:
+          'By adjusting the content of the prompt, you can guide the direction of the large model chat.',
+
         noReferencesTooltip:
           'By adjusting the content of the prompt, you can guide the direction of the large model chat. This prompt will be fixed at the beginning of the context. Variables used: {question} is the question posed by the user.',
         referencesTooltip:
@@ -108,9 +109,11 @@ export default {
         listeningTest: 'Preview'
       },
       reasoningContent: {
-        enable: 'Show Reasoning',
+        label: 'Output Thinking',
+        tooltip:
+          'According to the thinking tags set by the model, the content between the tags will be considered as the thought process.',
         start: 'Start',
-        end: 'End',
+        end: 'End'
       }
     },
     buttons: {

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

@@ -106,7 +106,8 @@ export default {
         tooltip: `关闭后该节点的内容则不输出给用户。
                   如果你想让用户看到该节点的输出内容，请打开开关。`
       },
-      defaultPrompt: '已知信息'
+      defaultPrompt: '已知信息',
+      think: '思考过程',
     },
     searchDatasetNode: {
       label: '知识库检索',

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

@@ -56,7 +56,8 @@ export default {
         references: ' (引用知识库)',
         placeholder: '请输入提示词',
         requiredMessage: '请输入提示词',
-        tooltip:'通过调整提示词内容，可以引导大模型聊天方向，该提示词会被固定在上下文的开头，可以使用变量。',
+        tooltip:
+          '通过调整提示词内容，可以引导大模型聊天方向，该提示词会被固定在上下文的开头，可以使用变量。',
         noReferencesTooltip:
           '通过调整提示词内容，可以引导大模型聊天方向，该提示词会被固定在上下文的开头。可以使用变量：{question} 是用户提出问题的占位符。',
         referencesTooltip:
@@ -99,9 +100,10 @@ export default {
         listeningTest: '试听'
       },
       reasoningContent: {
-        enable: '输出思考',
+        label: '输出思考',
+        tooltip: '请根据模型返回的思考标签设置，标签中间的内容将为认定为思考过程',
         start: '开始',
-        end: '结束',
+        end: '结束'
       }
     },
     buttons: {
@@ -201,6 +203,5 @@ export default {
     text: '针对用户提问调试段落匹配情况，保障回答效果。',
     emptyMessage1: '命中段落显示在这里',
     emptyMessage2: '没有命中的分段'
-  },
-
+  }
 }

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

@@ -106,7 +106,8 @@ export default {
         tooltip: `關閉後該節點的內容則不輸出給用戶。
                   如果你想讓用戶看到該節點的輸出內容，請打開開關。`
       },
-      defaultPrompt: '已知信息'
+      defaultPrompt: '已知信息',
+      think: '思考過程',
     },
     searchDatasetNode: {
       label: '知識庫檢索',

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

@@ -100,9 +100,10 @@ export default {
         listeningTest: '試聽'
       },
       reasoningContent: {
-        enable: '输出思考',
-        start: '开始',
-        end: '结束',
+        label: '輸出思考',
+        tooltip:'請根據模型返回的思考標簽設置，標簽中間的內容將爲認定爲思考過程',
+        start: '開始',
+        end: '結束',
       }
     },
     buttons: {

ui/src/views/application/ApplicationSetting.vue

@@ -65,14 +65,7 @@
                 <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
@@ -284,6 +277,27 @@
                   @submitDialog="submitPrologueDialog"
                 />
               </el-form-item>
+              <el-form-item @click.prevent>
+                <template #label>
+                  <div class="flex-between">
+                    <span class="mr-4">
+                      {{ $t('views.application.applicationForm.form.reasoningContent.label') }}
+                    </span>
+
+                    <div class="flex">
+                      <el-button type="primary" link @click="openReasoningParamSettingDialog">
+                        <el-icon><Setting /></el-icon>
+                      </el-button>
+                      <el-switch
+                        class="ml-8"
+                        size="small"
+                        v-model="applicationForm.model_setting.reasoning_content_enable"
+                        @change="sttModelEnableChange"
+                      />
+                    </div>
+                  </div>
+                </template>
+              </el-form-item>
 
               <el-form-item
                 prop="stt_model_id"
@@ -461,7 +475,10 @@
     />
 
     <EditAvatarDialog ref="EditAvatarDialogRef" @refresh="refreshIcon" />
-    <ReasoningParamSettingDialog ref="ReasoningParamSettingDialogRef" @refresh="submitReasoningDialog"/>
+    <ReasoningParamSettingDialog
+      ref="ReasoningParamSettingDialogRef"
+      @refresh="submitReasoningDialog"
+    />
   </LayoutContainer>
 </template>
 <script setup lang="ts">
@@ -533,7 +550,8 @@ const applicationForm = ref<ApplicationFormType>({
   model_setting: {
     prompt: defaultPrompt,
     system: t('views.application.applicationForm.form.roleSettings.placeholder'),
-    no_references_prompt: '{question}'
+    no_references_prompt: '{question}',
+    reasoning_content_enable: false,
   },
   model_params_setting: {},
   problem_optimization: false,
@@ -574,7 +592,6 @@ 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
@@ -610,9 +627,7 @@ const openAIParamSettingDialog = () => {
 }
 
 const openReasoningParamSettingDialog = () => {
-  if (applicationForm.value.model_id) {
-    ReasoningParamSettingDialogRef.value?.open(applicationForm.value.model_setting)
-  }
+  ReasoningParamSettingDialogRef.value?.open(applicationForm.value.model_setting)
 }
 
 const openTTSParamSettingDialog = () => {