fix: Optimize small screen dialogue style

ui/src/components/ai-chat/KnowledgeSource.vue

@@ -1,4 +1,5 @@
 <template>
+  <div class="chat-knowledge-source">
     <div class="flex align-center mt-16" v-if="!isWorkFlow(props.type)">
       <span class="mr-4 color-secondary">{{ $t('chat.KnowledgeSource.title') }}</span>
       <el-divider direction="vertical" />
@@ -38,20 +39,23 @@
     </div>
 
     <div
-    class="border-t color-secondary flex-between mt-12"
+      class="execution-details border-t color-secondary flex-between mt-12"
       style="padding-top: 12px; padding-bottom: 8px"
     >
       <div>
         <span class="mr-8">
           {{ $t('chat.KnowledgeSource.consume') }}: {{ data?.message_tokens + data?.answer_tokens }}
         </span>
-      <span> {{ $t('chat.KnowledgeSource.consumeTime') }}: {{ data?.run_time?.toFixed(2) }} s</span>
+        <span>
+          {{ $t('chat.KnowledgeSource.consumeTime') }}: {{ data?.run_time?.toFixed(2) }} s</span
+        >
       </div>
       <el-button
         v-if="isWorkFlow(props.type)"
         type="primary"
         link
         @click="openExecutionDetail(data.execution_details)"
+        style="padding: 0;"
       >
         <el-icon class="mr-4"><Document /></el-icon>
         {{ $t('chat.executionDetails.title') }}</el-button
@@ -61,6 +65,7 @@
     <ParagraphSourceDialog ref="ParagraphSourceDialogRef" />
     <!-- 执行详情 dialog -->
     <ExecutionDetailDialog ref="ExecutionDetailDialogRef" />
+  </div>
 </template>
 <script setup lang="ts">
 import { computed, ref } from 'vue'
@@ -107,13 +112,11 @@ const uniqueParagraphList = computed(() => {
 })
 </script>
 <style lang="scss" scoped>
-.source_dataset-button {
+@media only screen and (max-width: 430px) {
-  background: var(--app-text-color-light-1);
+  .chat-knowledge-source {
-  border: 1px solid #ffffff;
+    .execution-details {
-  &:hover {
+      display: block;
-    border: 1px solid var(--el-color-primary);
+    }
-    background: var(--el-color-primary-light-9);
-    color: var(--el-text-color-primary);
   }
 }
 </style>

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

@@ -34,9 +34,11 @@
             {{ $t('chat.tip.answerLoading') }} <span class="dotting"></span>
           </p>
           <!-- 知识来源 -->
-          <div v-if="showSource(chatRecord) && index === chatRecord.answer_text_list.length - 1">
+          <KnowledgeSource
-            <KnowledgeSource :data="chatRecord" :type="application.type" />
+            :data="chatRecord"
-          </div>
+            :type="application.type"
+            v-if="showSource(chatRecord) && index === chatRecord.answer_text_list.length - 1"
+          />
         </el-card>
       </div>
     </template>

ui/src/components/ai-chat/component/operation-button/ChatOperationButton.vue

@@ -1,13 +1,18 @@
 <template>
-  <div>
+  <div class="chat-operation-button flex-between">
     <el-text type="info">
       <span class="ml-4">{{ datetimeFormat(data.create_time) }}</span>
     </el-text>
-  </div>
+
     <div>
       <!-- 语音播放 -->
       <span v-if="tts">
-      <el-tooltip effect="dark" :content="$t('chat.operation.play')" placement="top" v-if="!audioPlayerStatus">
+        <el-tooltip
+          effect="dark"
+          :content="$t('chat.operation.play')"
+          placement="top"
+          v-if="!audioPlayerStatus"
+        >
           <el-button text :disabled="!data?.write_ed" @click="playAnswerText(data?.answer_text)">
             <AppIcon iconName="app-video-play"></AppIcon>
           </el-button>
@@ -77,6 +82,7 @@
     </div>
     <!-- 先渲染，不然不能播放   -->
     <audio ref="audioPlayer" v-for="item in audioList" :key="item" controls hidden="hidden"></audio>
+  </div>
 </template>
 <script setup lang="ts">
 import { nextTick, onMounted, ref } from 'vue'
@@ -158,9 +164,7 @@ function markdownToPlainText(md: string) {
 }
 
 function removeFormRander(text: string) {
-  return text
+  return text.replace(/<form_rander>[\s\S]*?<\/form_rander>/g, '').trim()
-    .replace(/<form_rander>[\s\S]*?<\/form_rander>/g, '')
-    .trim()
 }
 
 const playAnswerText = (text: string) => {
@@ -190,7 +194,8 @@ const playAnswerTextPart = () => {
   }
   if (audioList.value[currentAudioIndex.value].includes('<audio')) {
     if (audioPlayer.value) {
-      audioPlayer.value[currentAudioIndex.value].src = audioList.value[currentAudioIndex.value].match(/src="([^"]*)"/)?.[1] || ''
+      audioPlayer.value[currentAudioIndex.value].src =
+        audioList.value[currentAudioIndex.value].match(/src="([^"]*)"/)?.[1] || ''
       audioPlayer.value[currentAudioIndex.value].play() // 自动播放音频
       audioPlayer.value[currentAudioIndex.value].onended = () => {
         currentAudioIndex.value += 1
@@ -201,7 +206,10 @@ const playAnswerTextPart = () => {
     if (audioList.value[currentAudioIndex.value] !== utterance.value?.text) {
       window.speechSynthesis.cancel()
     }
-    if (window.speechSynthesis.paused && audioList.value[currentAudioIndex.value] === utterance.value?.text) {
+    if (
+      window.speechSynthesis.paused &&
+      audioList.value[currentAudioIndex.value] === utterance.value?.text
+    ) {
       window.speechSynthesis.resume()
       return
     }
@@ -225,7 +233,11 @@ const playAnswerTextPart = () => {
       return
     }
     applicationApi
-      .postTextToSpeech((props.applicationId as string) || (id as string), { text: audioList.value[currentAudioIndex.value] }, loading)
+      .postTextToSpeech(
+        (props.applicationId as string) || (id as string),
+        { text: audioList.value[currentAudioIndex.value] },
+        loading
+      )
       .then(async (res: any) => {
         if (res.type === 'application/json') {
           const text = await res.text()
@@ -284,9 +296,20 @@ onMounted(() => {
   })
   bus.emit('pause-autoplay')
   // 第一次回答后自动播放， 打开历史记录不自动播放
-  if (props.tts && props.tts_autoplay && buttonData.value.write_ed && !buttonData.value.update_time) {
+  if (
+    props.tts &&
+    props.tts_autoplay &&
+    buttonData.value.write_ed &&
+    !buttonData.value.update_time
+  ) {
     playAnswerText(buttonData.value.answer_text)
   }
 })
 </script>
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+@media only screen and (max-width: 430px) {
+  .chat-operation-button {
+    display: block;
+  }
+}
+</style>

ui/src/components/ai-chat/component/operation-button/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="chat-operation-button">
     <LogOperationButton
       v-if="type === 'log'"
       v-bind:data="chatRecord"
@@ -10,8 +10,7 @@
       :type="type"
     />
 
-    <div class="flex-between mt-8" v-else>
+    <div class="mt-8" v-else>
-      <div>
       <el-button
         type="primary"
         v-if="chatRecord.is_stop && !chatRecord.write_ed"
@@ -19,17 +18,13 @@
         link
         >{{ $t('chat.operation.continue') }}
       </el-button>
-        <el-button
+      <el-button type="primary" v-else-if="!chatRecord.write_ed" @click="stopChat(chatRecord)" link
-          type="primary"
-          v-else-if="!chatRecord.write_ed"
-          @click="stopChat(chatRecord)"
-          link
         >{{ $t('chat.operation.stopChat') }}
       </el-button>
     </div>
-    </div>
+
-    <div v-if="chatRecord.write_ed && 500 != chatRecord.status" class="flex-between">
     <ChatOperationButton
+      v-if="chatRecord.write_ed && 500 != chatRecord.status"
       :tts="application.tts_model_enable"
       :tts_type="application.tts_type"
       :tts_autoplay="application.tts_autoplay"
@@ -41,7 +36,6 @@
       @regeneration="regenerationChart(chatRecord)"
     />
   </div>
-  </div>
 </template>
 <script setup lang="ts">
 import ChatOperationButton from '@/components/ai-chat/component/operation-button/ChatOperationButton.vue'