From 08f294968e63774fb5cc3b61503e28e18c13cef1 Mon Sep 17 00:00:00 2001
From: wangdan-fit2cloud <dan.wang@fit2cloud.com>
Date: Wed, 19 Mar 2025 16:04:23 +0800
Subject: [PATCH 1/4] fix: Optimize small screen dialogue style

---
 ui/src/components/ai-chat/KnowledgeSource.vue | 131 ++++++------
 .../component/answer-content/index.vue        |   8 +-
 .../operation-button/ChatOperationButton.vue  | 189 ++++++++++--------
 .../component/operation-button/index.vue      |  56 +++---
 4 files changed, 203 insertions(+), 181 deletions(-)

diff --git a/ui/src/components/ai-chat/KnowledgeSource.vue b/ui/src/components/ai-chat/KnowledgeSource.vue
index 486e58ffba1..0c98666d85b 100644
--- a/ui/src/components/ai-chat/KnowledgeSource.vue
+++ b/ui/src/components/ai-chat/KnowledgeSource.vue
@@ -1,66 +1,71 @@
 <template>
-  <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" />
-    <el-button type="primary" class="mr-8" link @click="openParagraph(data)">
-      <AppIcon iconName="app-reference-outlined" class="mr-4"></AppIcon>
-      {{ $t('chat.KnowledgeSource.referenceParagraph') }}
-      {{ data.paragraph_list?.length || 0 }}</el-button
-    >
-  </div>
-  <div class="mt-8" v-if="!isWorkFlow(props.type)">
-    <el-row :gutter="8" v-if="uniqueParagraphList?.length">
-      <template v-for="(item, index) in uniqueParagraphList" :key="index">
-        <el-col :span="12" class="mb-8">
-          <el-card shadow="never" class="file-List-card" data-width="40">
-            <div class="flex-between">
-              <div class="flex">
-                <img :src="getImgUrl(item && item?.document_name)" alt="" width="20" />
-                <div class="ml-4 ellipsis-1" :title="item?.document_name" v-if="!item.source_url">
-                  <p>{{ item && item?.document_name }}</p>
-                </div>
-                <div class="ml-8" v-else>
-                  <a
-                    :href="getNormalizedUrl(item?.source_url)"
-                    target="_blank"
-                    class="ellipsis"
-                    :title="item?.document_name?.trim()"
-                  >
-                    <span :title="item?.document_name?.trim()">{{ item?.document_name }}</span>
-                  </a>
+  <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" />
+      <el-button type="primary" class="mr-8" link @click="openParagraph(data)">
+        <AppIcon iconName="app-reference-outlined" class="mr-4"></AppIcon>
+        {{ $t('chat.KnowledgeSource.referenceParagraph') }}
+        {{ data.paragraph_list?.length || 0 }}</el-button
+      >
+    </div>
+    <div class="mt-8" v-if="!isWorkFlow(props.type)">
+      <el-row :gutter="8" v-if="uniqueParagraphList?.length">
+        <template v-for="(item, index) in uniqueParagraphList" :key="index">
+          <el-col :span="12" class="mb-8">
+            <el-card shadow="never" class="file-List-card" data-width="40">
+              <div class="flex-between">
+                <div class="flex">
+                  <img :src="getImgUrl(item && item?.document_name)" alt="" width="20" />
+                  <div class="ml-4 ellipsis-1" :title="item?.document_name" v-if="!item.source_url">
+                    <p>{{ item && item?.document_name }}</p>
+                  </div>
+                  <div class="ml-8" v-else>
+                    <a
+                      :href="getNormalizedUrl(item?.source_url)"
+                      target="_blank"
+                      class="ellipsis"
+                      :title="item?.document_name?.trim()"
+                    >
+                      <span :title="item?.document_name?.trim()">{{ item?.document_name }}</span>
+                    </a>
+                  </div>
                 </div>
               </div>
-            </div>
-          </el-card>
-        </el-col>
-      </template>
-    </el-row>
-  </div>
-
-  <div
-    class="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>
+            </el-card>
+          </el-col>
+        </template>
+      </el-row>
     </div>
-    <el-button
-      v-if="isWorkFlow(props.type)"
-      type="primary"
-      link
-      @click="openExecutionDetail(data.execution_details)"
-    >
-      <el-icon class="mr-4"><Document /></el-icon>
-      {{ $t('chat.executionDetails.title') }}</el-button
+
+    <div
+      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
+        >
+      </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
+      >
+    </div>
+    <!-- 知识库引用 dialog -->
+    <ParagraphSourceDialog ref="ParagraphSourceDialogRef" />
+    <!-- 执行详情 dialog -->
+    <ExecutionDetailDialog ref="ExecutionDetailDialogRef" />
   </div>
-  <!-- 知识库引用 dialog -->
-  <ParagraphSourceDialog ref="ParagraphSourceDialogRef" />
-  <!-- 执行详情 dialog -->
-  <ExecutionDetailDialog ref="ExecutionDetailDialogRef" />
 </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 {
-  background: var(--app-text-color-light-1);
-  border: 1px solid #ffffff;
-  &:hover {
-    border: 1px solid var(--el-color-primary);
-    background: var(--el-color-primary-light-9);
-    color: var(--el-text-color-primary);
+@media only screen and (max-width: 430px) {
+  .chat-knowledge-source {
+    .execution-details {
+      display: block;
+    }
   }
 }
 </style>
diff --git a/ui/src/components/ai-chat/component/answer-content/index.vue b/ui/src/components/ai-chat/component/answer-content/index.vue
index 6a7bd28dbc0..b09e7d68326 100644
--- a/ui/src/components/ai-chat/component/answer-content/index.vue
+++ b/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 :data="chatRecord" :type="application.type" />
-          </div>
+          <KnowledgeSource
+            :data="chatRecord"
+            :type="application.type"
+            v-if="showSource(chatRecord) && index === chatRecord.answer_text_list.length - 1"
+          />
         </el-card>
       </div>
     </template>
diff --git a/ui/src/components/ai-chat/component/operation-button/ChatOperationButton.vue b/ui/src/components/ai-chat/component/operation-button/ChatOperationButton.vue
index 704d825ec34..187bc6a3c5b 100644
--- a/ui/src/components/ai-chat/component/operation-button/ChatOperationButton.vue
+++ b/ui/src/components/ai-chat/component/operation-button/ChatOperationButton.vue
@@ -1,82 +1,88 @@
 <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>
+      <!-- 语音播放 -->
+      <span v-if="tts">
+        <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>
+        </el-tooltip>
+        <el-tooltip v-else effect="dark" :content="$t('chat.operation.pause')" placement="top">
+          <el-button type="primary" text :disabled="!data?.write_ed" @click="pausePlayAnswerText()">
+            <AppIcon iconName="app-video-pause"></AppIcon>
+          </el-button>
+        </el-tooltip>
+        <el-divider direction="vertical" />
+      </span>
+      <span v-if="type == 'ai-chat' || type == 'log'">
+        <el-tooltip effect="dark" :content="$t('chat.operation.regeneration')" placement="top">
+          <el-button :disabled="chat_loading" text @click="regeneration">
+            <el-icon><RefreshRight /></el-icon>
+          </el-button>
+        </el-tooltip>
+        <el-divider direction="vertical" />
+        <el-tooltip effect="dark" :content="$t('common.copy')" placement="top">
+          <el-button text @click="copyClick(data?.answer_text.trim())">
+            <AppIcon iconName="app-copy"></AppIcon>
+          </el-button>
+        </el-tooltip>
+        <el-divider direction="vertical" />
+        <el-tooltip
+          effect="dark"
+          :content="$t('chat.operation.like')"
+          placement="top"
+          v-if="buttonData?.vote_status === '-1'"
+        >
+          <el-button text @click="voteHandle('0')" :disabled="loading">
+            <AppIcon iconName="app-like"></AppIcon>
+          </el-button>
+        </el-tooltip>
+        <el-tooltip
+          effect="dark"
+          :content="$t('chat.operation.cancelLike')"
+          placement="top"
+          v-if="buttonData?.vote_status === '0'"
+        >
+          <el-button text @click="voteHandle('-1')" :disabled="loading">
+            <AppIcon iconName="app-like-color"></AppIcon>
+          </el-button>
+        </el-tooltip>
+        <el-divider direction="vertical" v-if="buttonData?.vote_status === '-1'" />
+        <el-tooltip
+          effect="dark"
+          :content="$t('chat.operation.oppose')"
+          placement="top"
+          v-if="buttonData?.vote_status === '-1'"
+        >
+          <el-button text @click="voteHandle('1')" :disabled="loading">
+            <AppIcon iconName="app-oppose"></AppIcon>
+          </el-button>
+        </el-tooltip>
+        <el-tooltip
+          effect="dark"
+          :content="$t('chat.operation.cancelOppose')"
+          placement="top"
+          v-if="buttonData?.vote_status === '1'"
+        >
+          <el-button text @click="voteHandle('-1')" :disabled="loading">
+            <AppIcon iconName="app-oppose-color"></AppIcon>
+          </el-button>
+        </el-tooltip>
+      </span>
+    </div>
+    <!-- 先渲染，不然不能播放   -->
+    <audio ref="audioPlayer" v-for="item in audioList" :key="item" controls hidden="hidden"></audio>
   </div>
-  <div>
-    <!-- 语音播放 -->
-    <span v-if="tts">
-      <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>
-      </el-tooltip>
-      <el-tooltip v-else effect="dark" :content="$t('chat.operation.pause')" placement="top">
-        <el-button type="primary" text :disabled="!data?.write_ed" @click="pausePlayAnswerText()">
-          <AppIcon iconName="app-video-pause"></AppIcon>
-        </el-button>
-      </el-tooltip>
-      <el-divider direction="vertical" />
-    </span>
-    <span v-if="type == 'ai-chat' || type == 'log'">
-      <el-tooltip effect="dark" :content="$t('chat.operation.regeneration')" placement="top">
-        <el-button :disabled="chat_loading" text @click="regeneration">
-          <el-icon><RefreshRight /></el-icon>
-        </el-button>
-      </el-tooltip>
-      <el-divider direction="vertical" />
-      <el-tooltip effect="dark" :content="$t('common.copy')" placement="top">
-        <el-button text @click="copyClick(data?.answer_text.trim())">
-          <AppIcon iconName="app-copy"></AppIcon>
-        </el-button>
-      </el-tooltip>
-      <el-divider direction="vertical" />
-      <el-tooltip
-        effect="dark"
-        :content="$t('chat.operation.like')"
-        placement="top"
-        v-if="buttonData?.vote_status === '-1'"
-      >
-        <el-button text @click="voteHandle('0')" :disabled="loading">
-          <AppIcon iconName="app-like"></AppIcon>
-        </el-button>
-      </el-tooltip>
-      <el-tooltip
-        effect="dark"
-        :content="$t('chat.operation.cancelLike')"
-        placement="top"
-        v-if="buttonData?.vote_status === '0'"
-      >
-        <el-button text @click="voteHandle('-1')" :disabled="loading">
-          <AppIcon iconName="app-like-color"></AppIcon>
-        </el-button>
-      </el-tooltip>
-      <el-divider direction="vertical" v-if="buttonData?.vote_status === '-1'" />
-      <el-tooltip
-        effect="dark"
-        :content="$t('chat.operation.oppose')"
-        placement="top"
-        v-if="buttonData?.vote_status === '-1'"
-      >
-        <el-button text @click="voteHandle('1')" :disabled="loading">
-          <AppIcon iconName="app-oppose"></AppIcon>
-        </el-button>
-      </el-tooltip>
-      <el-tooltip
-        effect="dark"
-        :content="$t('chat.operation.cancelOppose')"
-        placement="top"
-        v-if="buttonData?.vote_status === '1'"
-      >
-        <el-button text @click="voteHandle('-1')" :disabled="loading">
-          <AppIcon iconName="app-oppose-color"></AppIcon>
-        </el-button>
-      </el-tooltip>
-    </span>
-  </div>
-  <!-- 先渲染，不然不能播放   -->
-  <audio ref="audioPlayer" v-for="item in audioList" :key="item" controls hidden="hidden"></audio>
 </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
-    .replace(/<form_rander>[\s\S]*?<\/form_rander>/g, '')
-    .trim()
+  return text.replace(/<form_rander>[\s\S]*?<\/form_rander>/g, '').trim()
 }
 
 const playAnswerText = (text: string) => {
@@ -175,7 +179,7 @@ const playAnswerText = (text: string) => {
   audioPlayerStatus.value = true
   // 分割成多份
   audioList.value = text.split(/(<audio[^>]*><\/audio>)/).filter((item) => item.trim().length > 0)
-  nextTick(()=>{
+  nextTick(() => {
     // console.log(audioList.value, audioPlayer.value)
     playAnswerTextPart()
   })
@@ -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>
diff --git a/ui/src/components/ai-chat/component/operation-button/index.vue b/ui/src/components/ai-chat/component/operation-button/index.vue
index 4a602a0994e..39a5f81ec9d 100644
--- a/ui/src/components/ai-chat/component/operation-button/index.vue
+++ b/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,37 +10,31 @@
       :type="type"
     />
 
-    <div class="flex-between mt-8" v-else>
-      <div>
-        <el-button
-          type="primary"
-          v-if="chatRecord.is_stop && !chatRecord.write_ed"
-          @click="startChat(chatRecord)"
-          link
-          >{{ $t('chat.operation.continue') }}
-        </el-button>
-        <el-button
-          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
-        :tts="application.tts_model_enable"
-        :tts_type="application.tts_type"
-        :tts_autoplay="application.tts_autoplay"
-        :data="chatRecord"
-        :type="type"
-        :applicationId="application.id"
-        :chatId="chatRecord.chat_id"
-        :chat_loading="loading"
-        @regeneration="regenerationChart(chatRecord)"
-      />
+    <div class="mt-8" v-else>
+      <el-button
+        type="primary"
+        v-if="chatRecord.is_stop && !chatRecord.write_ed"
+        @click="startChat(chatRecord)"
+        link
+        >{{ $t('chat.operation.continue') }}
+      </el-button>
+      <el-button type="primary" v-else-if="!chatRecord.write_ed" @click="stopChat(chatRecord)" link
+        >{{ $t('chat.operation.stopChat') }}
+      </el-button>
     </div>
+
+    <ChatOperationButton
+      v-if="chatRecord.write_ed && 500 != chatRecord.status"
+      :tts="application.tts_model_enable"
+      :tts_type="application.tts_type"
+      :tts_autoplay="application.tts_autoplay"
+      :data="chatRecord"
+      :type="type"
+      :applicationId="application.id"
+      :chatId="chatRecord.chat_id"
+      :chat_loading="loading"
+      @regeneration="regenerationChart(chatRecord)"
+    />
   </div>
 </template>
 <script setup lang="ts">

From 033802bb5ac186b6bd3b2b52f57f87347ed199ce Mon Sep 17 00:00:00 2001
From: wangdan-fit2cloud <dan.wang@fit2cloud.com>
Date: Thu, 20 Mar 2025 19:05:37 +0800
Subject: [PATCH 2/4] feat: Mobile voice conversation new UI

---
 ui/public/index.html                          |  20 +
 ui/src/assets/acoustic-color.svg              |  29 +
 ui/src/assets/acoustic.svg                    |  29 +
 ui/src/components/ai-chat/KnowledgeSource.vue |   2 +-
 .../component/answer-content/index.vue        |   4 +-
 .../chat-input-operate/TouchChat.vue          | 126 ++++
 .../chat-input-operate/index copy 2.vue       | 625 ++++++++++++++++++
 .../component/chat-input-operate/index.vue    | 233 +++++--
 .../operation-button/ChatOperationButton.vue  |   2 +-
 .../component/operation-button/index.vue      |   2 +-
 .../component/prologue-content/index.vue      |   4 +-
 .../component/question-content/index.vue      |   2 +-
 ui/src/components/ai-chat/index.scss          |  68 +-
 ui/src/components/ai-chat/index.vue           |   4 +-
 ui/src/components/dynamics-form/Demo.vue      |   2 +-
 ui/src/components/dynamics-form/index.vue     |   2 +-
 .../items/label/TooltipLabel.vue              |   2 +-
 .../generate-related-dialog/index.vue         |   2 +-
 ui/src/components/icons/index.ts              |  25 +
 ui/src/components/layout-container/index.vue  |   2 +-
 ui/src/components/login-container/index.vue   |   2 +-
 ui/src/components/login-layout/index.vue      |   2 +-
 ui/src/styles/app.scss                        |   1 +
 .../component/APIKeyDialog.vue                |   2 +-
 .../component/DisplaySettingDialog.vue        |   2 +-
 .../component/EditAvatarDialog.vue            |   2 +-
 .../component/EmbedDialog.vue                 |   4 +-
 .../component/LimitDialog.vue                 |   2 +-
 .../component/SettingAPIKeyDialog.vue         |   2 +-
 .../component/XPackDisplaySettingDialog.vue   |   2 +-
 .../views/application/ApplicationSetting.vue  |   2 +-
 .../component/AddDatasetDialog.vue            |   2 +-
 .../component/CopyApplicationDialog.vue       |   2 +-
 .../component/CreateApplicationDialog.vue     |   2 +-
 .../component/ParamSettingDialog.vue          |   2 +-
 .../component/ReasoningParamSettingDialog.vue |   2 +-
 ui/src/views/chat/embed/index.vue             |   4 +-
 ui/src/views/chat/mobile/index.vue            |  23 +-
 .../dataset/component/CreateDatasetDialog.vue |   2 +-
 .../dataset/component/EditParagraphDialog.vue |   2 +-
 .../component/SelectDatasetDialog.vue         |   2 +-
 .../component/EditAvatarDialog.vue            |   2 +-
 .../views/log/component/EditContentDialog.vue |   2 +-
 ui/src/views/log/component/EditMarkDialog.vue |   2 +-
 ui/src/views/login/forgot-password/index.vue  |   2 +-
 ui/src/views/login/index.vue                  |   2 +-
 ui/src/views/login/register/index.vue         |   2 +-
 ui/src/views/login/reset-password/index.vue   |   2 +-
 .../paragraph/component/ParagraphDialog.vue   |   2 +-
 .../component/SelectDocumentDialog.vue        |   2 +-
 .../problem/component/RelateProblemDialog.vue |   2 +-
 .../team/component/CreateMemberDialog.vue     |   2 +-
 .../team/component/PermissionSetting.vue      |   2 +-
 .../user-manage/component/UserDialog.vue      |   2 +-
 .../user-manage/component/UserPwdDialog.vue   |   2 +-
 .../reranker-node/ParamSettingDialog.vue      |   2 +-
 56 files changed, 1091 insertions(+), 190 deletions(-)
 create mode 100644 ui/public/index.html
 create mode 100644 ui/src/assets/acoustic-color.svg
 create mode 100644 ui/src/assets/acoustic.svg
 create mode 100644 ui/src/components/ai-chat/component/chat-input-operate/TouchChat.vue
 create mode 100644 ui/src/components/ai-chat/component/chat-input-operate/index copy 2.vue

diff --git a/ui/public/index.html b/ui/public/index.html
new file mode 100644
index 00000000000..6bb01923cc8
--- /dev/null
+++ b/ui/public/index.html
@@ -0,0 +1,20 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0,  maximum-scale=1.0, minimum-scale=1.0, user-scalable=no,
+viewport-fit=cover"
+    />
+    <title>111</title>
+  </head>
+  <body style="margin: 0; padding: 0; height: 100vh">
+    <script
+    async
+    defer
+    src="http://localhost:3000/api/application/embed?protocol=http&host=localhost:3000&token=7ca95a6b12571284">
+    </script>
+    
+  </body>
+</html>
diff --git a/ui/src/assets/acoustic-color.svg b/ui/src/assets/acoustic-color.svg
new file mode 100644
index 00000000000..d9cfa1498c6
--- /dev/null
+++ b/ui/src/assets/acoustic-color.svg
@@ -0,0 +1,29 @@
+<svg width="89" height="22" viewBox="0 0 89 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_11132_142017)">
+<path d="M9.58875 8.33325H11.1126V14.0475H9.58875V8.33325Z" fill="#3370FF"/>
+<path d="M36.8547 8.33325H38.3785V14.0475H36.8547V8.33325Z" fill="#3370FF"/>
+<path d="M59.5767 8.33325H61.1005V14.0475H59.5767V8.33325Z" fill="#3370FF"/>
+<path d="M86.843 8.33325H88.3668V14.0475H86.843V8.33325Z" fill="#3370FF"/>
+<path d="M41.399 6.80957H42.9229V14.8096H41.399V6.80957Z" fill="#3370FF"/>
+<path d="M55.0322 6.04736H56.556V15.5712H55.0322V6.04736Z" fill="#3370FF"/>
+<path d="M45.9435 8.71411H47.4673V13.2855H45.9435V8.71411Z" fill="#3370FF"/>
+<path d="M50.4879 7.95239H52.0117V14.4286H50.4879V7.95239Z" fill="#3370FF"/>
+<path d="M5.04443 6.04736H6.56824V15.5712H5.04443V6.04736Z" fill="#3370FF"/>
+<path d="M0.5 8.71411H2.02381V13.2855H0.5V8.71411Z" fill="#3370FF"/>
+<path d="M14.1332 6.80957H15.657V15.1905H14.1332V6.80957Z" fill="#3370FF"/>
+<path d="M32.3103 6.80957H33.8341V15.1905H32.3103V6.80957Z" fill="#3370FF"/>
+<path d="M64.1211 6.80957H65.6449V15.5715H64.1211V6.80957Z" fill="#3370FF"/>
+<path d="M82.2986 6.80957H83.8224V15.1905H82.2986V6.80957Z" fill="#3370FF"/>
+<path d="M18.6776 6.04736H20.2014V15.9521H18.6776V6.04736Z" fill="#3370FF"/>
+<path d="M27.7664 5.6665H29.2902V16.7141H27.7664V5.6665Z" fill="#3370FF"/>
+<path d="M68.6654 5.28564H70.1892V16.7142H68.6654V5.28564Z" fill="#3370FF"/>
+<path d="M77.7543 5.28564H79.2781V16.7142H77.7543V5.28564Z" fill="#3370FF"/>
+<path d="M23.2219 2.6189H24.7457V19.3808H23.2219V2.6189Z" fill="#3370FF"/>
+<path d="M73.2098 3.3811H74.7336V18.6192H73.2098V3.3811Z" fill="#3370FF"/>
+</g>
+<defs>
+<clipPath id="clip0_11132_142017">
+<rect width="88" height="22" fill="white" transform="translate(0.5)"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/ui/src/assets/acoustic.svg b/ui/src/assets/acoustic.svg
new file mode 100644
index 00000000000..a400eff9be4
--- /dev/null
+++ b/ui/src/assets/acoustic.svg
@@ -0,0 +1,29 @@
+<svg width="89" height="22" viewBox="0 0 89 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_11133_227282)">
+<path d="M9.58875 8.33325H11.1126V14.0475H9.58875V8.33325Z" fill="#8F959E"/>
+<path d="M36.8547 8.33325H38.3785V14.0475H36.8547V8.33325Z" fill="#8F959E"/>
+<path d="M59.5767 8.33325H61.1005V14.0475H59.5767V8.33325Z" fill="#8F959E"/>
+<path d="M86.843 8.33325H88.3668V14.0475H86.843V8.33325Z" fill="#8F959E"/>
+<path d="M41.399 6.80957H42.9229V14.8096H41.399V6.80957Z" fill="#8F959E"/>
+<path d="M55.0322 6.04736H56.556V15.5712H55.0322V6.04736Z" fill="#8F959E"/>
+<path d="M45.9435 8.71411H47.4673V13.2855H45.9435V8.71411Z" fill="#8F959E"/>
+<path d="M50.4879 7.95239H52.0117V14.4286H50.4879V7.95239Z" fill="#8F959E"/>
+<path d="M5.04443 6.04736H6.56824V15.5712H5.04443V6.04736Z" fill="#8F959E"/>
+<path d="M0.5 8.71411H2.02381V13.2855H0.5V8.71411Z" fill="#8F959E"/>
+<path d="M14.1332 6.80957H15.657V15.1905H14.1332V6.80957Z" fill="#8F959E"/>
+<path d="M32.3103 6.80957H33.8341V15.1905H32.3103V6.80957Z" fill="#8F959E"/>
+<path d="M64.1211 6.80957H65.6449V15.5715H64.1211V6.80957Z" fill="#8F959E"/>
+<path d="M82.2986 6.80957H83.8224V15.1905H82.2986V6.80957Z" fill="#8F959E"/>
+<path d="M18.6776 6.04736H20.2014V15.9521H18.6776V6.04736Z" fill="#8F959E"/>
+<path d="M27.7664 5.6665H29.2902V16.7141H27.7664V5.6665Z" fill="#8F959E"/>
+<path d="M68.6654 5.28564H70.1892V16.7142H68.6654V5.28564Z" fill="#8F959E"/>
+<path d="M77.7543 5.28564H79.2781V16.7142H77.7543V5.28564Z" fill="#8F959E"/>
+<path d="M23.2219 2.6189H24.7457V19.3808H23.2219V2.6189Z" fill="#8F959E"/>
+<path d="M73.2098 3.3811H74.7336V18.6192H73.2098V3.3811Z" fill="#8F959E"/>
+</g>
+<defs>
+<clipPath id="clip0_11133_227282">
+<rect width="88" height="22" fill="white" transform="translate(0.5)"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/ui/src/components/ai-chat/KnowledgeSource.vue b/ui/src/components/ai-chat/KnowledgeSource.vue
index 0c98666d85b..729a6317b62 100644
--- a/ui/src/components/ai-chat/KnowledgeSource.vue
+++ b/ui/src/components/ai-chat/KnowledgeSource.vue
@@ -112,7 +112,7 @@ const uniqueParagraphList = computed(() => {
 })
 </script>
 <style lang="scss" scoped>
-@media only screen and (max-width: 430px) {
+@media only screen and (max-width: 420px) {
   .chat-knowledge-source {
     .execution-details {
       display: block;
diff --git a/ui/src/components/ai-chat/component/answer-content/index.vue b/ui/src/components/ai-chat/component/answer-content/index.vue
index b09e7d68326..3724f3351c6 100644
--- a/ui/src/components/ai-chat/component/answer-content/index.vue
+++ b/ui/src/components/ai-chat/component/answer-content/index.vue
@@ -2,8 +2,8 @@
   <div class="item-content mb-16 lighter">
     <template v-for="(answer_text, index) in answer_text_list" :key="index">
       <div class="avatar">
-        <img v-if="application.avatar" :src="application.avatar" height="32px" width="32px" />
-        <LogoIcon v-else height="32px" width="32px" />
+        <img v-if="application.avatar" :src="application.avatar" height="28px" width="28px" />
+        <LogoIcon v-else height="28px" width="28px" />
       </div>
       <div class="content" @mouseup="openControl">
         <el-card shadow="always" class="mb-8 border-r-8" style="--el-card-padding: 6px 16px">
diff --git a/ui/src/components/ai-chat/component/chat-input-operate/TouchChat.vue b/ui/src/components/ai-chat/component/chat-input-operate/TouchChat.vue
new file mode 100644
index 00000000000..62144a7b634
--- /dev/null
+++ b/ui/src/components/ai-chat/component/chat-input-operate/TouchChat.vue
@@ -0,0 +1,126 @@
+<template>
+  <div class="touch-chat w-full mr-8">
+    <el-button
+      text
+      bg
+      class="microphone-button w-full mt-8 ml-8 mb-8"
+      style="font-size: 1rem; padding: 1.2rem 0 !important; background-color: #eff0f1"
+      @touchstart="onTouchStart"
+      @touchmove="onTouchMove"
+      @touchend="onTouchEnd"
+    >
+      按住说话
+    </el-button>
+    <!-- 使用 custom-class 自定义样式 -->
+    <transition name="el-fade-in-linear">
+      <el-card class="custom-speech-card" :class="isTouching ? '' : 'active'" v-if="dialogVisible">
+        <p>
+          <el-text type="info" v-if="isTouching">{{ '00:06' }}</el-text>
+          <span class="lighter" v-else>
+            {{ message }}
+          </span>
+        </p>
+        <div class="close">
+          <el-icon><Close /></el-icon>
+        </div>
+        <p class="lighter" :style="{ visibility: isTouching ? 'visible' : 'hidden' }">
+          {{ message }}
+        </p>
+        <div class="speech-img flex-center border-r-4 mt-16">
+          <img v-if="isTouching" src="@/assets/acoustic-color.svg" alt="" />
+          <img v-else src="@/assets/acoustic.svg" alt="" />
+        </div>
+      </el-card>
+    </transition>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+// 移动端语音
+const startY = ref(0)
+const isTouching = ref(false)
+const dialogVisible = ref(false)
+const message = ref('按住说话')
+function onTouchStart(event: any) {
+  isTouching.value = true
+  startY.value = event.touches[0].clientY
+  dialogVisible.value = true
+  message.value = '松开发送，上滑取消'
+}
+function onTouchMove(event: any) {
+  if (!isTouching.value) return
+  // 阻止默认滚动行为
+  event.preventDefault()
+  const currentY = event.touches[0].clientY
+  const deltaY = currentY - startY.value
+  // 判断是否上滑
+  if (deltaY < -50) {
+    // -50 是一个阈值，可以根据需要调整
+    message.value = '松开取消发送'
+    isTouching.value = false
+  }
+}
+function onTouchEnd() {
+  if (isTouching.value) {
+    message.value = '发送成功'
+  } else {
+    message.value = '已取消'
+  }
+  isTouching.value = false
+  dialogVisible.value = false
+}
+</script>
+
+<style lang="scss" scoped>
+.custom-speech-card {
+  position: fixed;
+  bottom: 10px;
+  left: 50%; /* 水平居中 */
+  transform: translateX(-50%);
+  width: 92%;
+  background: #ffffff;
+  border: 1px solid #ffffff;
+  box-shadow: 0px 6px 24px 0px rgba(31, 35, 41, 0.08);
+  z-index: 999;
+  text-align: center;
+  color: var(--app-text-color-secondary);
+  user-select: none; /* 禁止选中 */
+  -webkit-user-select: none; /* Safari */
+  -moz-user-select: none; /* 老版Firefox */
+  -ms-user-select: none; /* IE 10及以下 */
+  .close {
+    box-shadow: 0px 4px 8px 0px rgba(31, 35, 41, 0.1);
+    border: 1px solid rgba(222, 224, 227, 1);
+    background: rgba(255, 255, 255, 1);
+    border-radius: 100px;
+    display: inline-block;
+    width: 43px;
+    height: 43px;
+    line-height: 50px;
+    font-size: 1.8rem;
+    margin: 20px 0;
+  }
+  .speech-img {
+    text-align: center;
+    background: #ebf1ff;
+    padding: 8px;
+    img {
+      height: 25px;
+    }
+  }
+  &.active {
+    .close {
+      background: #f54a45;
+      color: #ffffff;
+      width: 50px;
+      height: 50px;
+      line-height: 57px;
+      font-size: 2rem;
+    }
+    .speech-img {
+      background: #eff0f1;
+    }
+  }
+}
+</style>
diff --git a/ui/src/components/ai-chat/component/chat-input-operate/index copy 2.vue b/ui/src/components/ai-chat/component/chat-input-operate/index copy 2.vue
new file mode 100644
index 00000000000..14e185a6996
--- /dev/null
+++ b/ui/src/components/ai-chat/component/chat-input-operate/index copy 2.vue	
@@ -0,0 +1,625 @@
+<template>
+  <div class="ai-chat__operate p-16-24">
+    <slot name="operateBefore" />
+    <div class="operate-textarea">
+      <el-scrollbar max-height="136">
+        <div
+          class="p-8-12"
+          v-loading="localLoading"
+          v-if="
+            uploadDocumentList.length ||
+            uploadImageList.length ||
+            uploadAudioList.length ||
+            uploadVideoList.length
+          "
+        >
+          <el-row :gutter="10">
+            <el-col
+              v-for="(item, index) in uploadDocumentList"
+              :key="index"
+              :xs="24"
+              :sm="props.type === 'debug-ai-chat' ? 24 : 12"
+              :md="props.type === 'debug-ai-chat' ? 24 : 12"
+              :lg="props.type === 'debug-ai-chat' ? 24 : 12"
+              :xl="props.type === 'debug-ai-chat' ? 24 : 12"
+              class="mb-8"
+            >
+              <el-card
+                shadow="never"
+                style="--el-card-padding: 8px; max-width: 100%"
+                class="file cursor"
+              >
+                <div
+                  class="flex align-center"
+                  @mouseenter.stop="mouseenter(item)"
+                  @mouseleave.stop="mouseleave()"
+                >
+                  <div
+                    @click="deleteFile(index, 'document')"
+                    class="delete-icon color-secondary"
+                    v-if="showDelete === item.url"
+                  >
+                    <el-icon>
+                      <CircleCloseFilled />
+                    </el-icon>
+                  </div>
+                  <img :src="getImgUrl(item && item?.name)" alt="" width="24" />
+                  <div class="ml-4 ellipsis-1" :title="item && item?.name">
+                    {{ item && item?.name }}
+                  </div>
+                </div>
+              </el-card>
+            </el-col>
+
+            <el-col
+              :xs="24"
+              :sm="props.type === 'debug-ai-chat' ? 24 : 12"
+              :md="props.type === 'debug-ai-chat' ? 24 : 12"
+              :lg="props.type === 'debug-ai-chat' ? 24 : 12"
+              :xl="props.type === 'debug-ai-chat' ? 24 : 12"
+              class="mb-8"
+              v-for="(item, index) in uploadAudioList"
+              :key="index"
+            >
+              <el-card shadow="never" style="--el-card-padding: 8px" class="file cursor">
+                <div
+                  class="flex align-center"
+                  @mouseenter.stop="mouseenter(item)"
+                  @mouseleave.stop="mouseleave()"
+                >
+                  <div
+                    @click="deleteFile(index, 'audio')"
+                    class="delete-icon color-secondary"
+                    v-if="showDelete === item.url"
+                  >
+                    <el-icon>
+                      <CircleCloseFilled />
+                    </el-icon>
+                  </div>
+                  <img :src="getImgUrl(item && item?.name)" alt="" width="24" />
+                  <div class="ml-4 ellipsis-1" :title="item && item?.name">
+                    {{ item && item?.name }}
+                  </div>
+                </div>
+              </el-card>
+            </el-col>
+          </el-row>
+          <el-space wrap>
+            <template v-for="(item, index) in uploadImageList" :key="index">
+              <div
+                class="file cursor border border-r-4"
+                v-if="item.url"
+                @mouseenter.stop="mouseenter(item)"
+                @mouseleave.stop="mouseleave()"
+              >
+                <div
+                  @click="deleteFile(index, 'image')"
+                  class="delete-icon color-secondary"
+                  v-if="showDelete === item.url"
+                >
+                  <el-icon>
+                    <CircleCloseFilled />
+                  </el-icon>
+                </div>
+                <el-image
+                  :src="item.url"
+                  alt=""
+                  fit="cover"
+                  style="width: 40px; height: 40px; display: block"
+                  class="border-r-4"
+                />
+              </div>
+            </template>
+          </el-space>
+        </div>
+      </el-scrollbar>
+      <div class="flex">
+        <el-input
+          ref="quickInputRef"
+          v-model="inputValue"
+          :placeholder="
+            startRecorderTime
+              ? `${$t('chat.inputPlaceholder.speaking')}...`
+              : recorderLoading
+                ? `${$t('chat.inputPlaceholder.recorderLoading')}...`
+                : $t('chat.inputPlaceholder.default')
+          "
+          :autosize="{ minRows: 1, maxRows: isMobile ? 4 : 10 }"
+          type="textarea"
+          :maxlength="100000"
+          @keydown.enter="sendChatHandle($event)"
+        />
+
+        <div class="operate flex align-center">
+          <span v-if="props.applicationDetails.file_upload_enable" class="flex align-center">
+            <el-upload
+              action="#"
+              multiple
+              :auto-upload="false"
+              :show-file-list="false"
+              :accept="getAcceptList()"
+              :on-change="(file: any, fileList: any) => uploadFile(file, fileList)"
+            >
+              <el-tooltip effect="dark" placement="top" popper-class="upload-tooltip-width">
+                <template #content>
+                  <div class="break-all pre-wrap">
+                    {{ $t('chat.uploadFile.label') }}：{{ $t('chat.uploadFile.most')
+                    }}{{ props.applicationDetails.file_upload_setting.maxFiles
+                    }}{{ $t('chat.uploadFile.limit') }}
+                    {{ props.applicationDetails.file_upload_setting.fileLimit }}MB<br />{{
+                      $t('chat.uploadFile.fileType')
+                    }}：{{ getAcceptList().replace(/\./g, '').replace(/,/g, '、').toUpperCase() }}
+                  </div>
+                </template>
+                <el-button text :disabled="checkMaxFilesLimit()" class="mt-4">
+                  <el-icon><Paperclip /></el-icon>
+                </el-button>
+              </el-tooltip>
+            </el-upload>
+            <el-divider direction="vertical" />
+          </span>
+          <span v-if="props.applicationDetails.stt_model_enable" class="flex align-center">
+            <el-button text @click="startRecording" v-if="mediaRecorderStatus">
+              <el-icon>
+                <Microphone />
+              </el-icon>
+            </el-button>
+
+            <div v-else class="operate flex align-center">
+              <el-text type="info"
+                >00:{{ recorderTime < 10 ? `0${recorderTime}` : recorderTime }}</el-text
+              >
+              <el-button text type="primary" @click="stopRecording" :loading="recorderLoading">
+                <AppIcon iconName="app-video-stop"></AppIcon>
+              </el-button>
+            </div>
+            <el-divider v-if="!startRecorderTime && !recorderLoading" direction="vertical" />
+          </span>
+
+          <el-button
+            v-if="!startRecorderTime && !recorderLoading"
+            text
+            class="sent-button"
+            :disabled="isDisabledChat || loading"
+            @click="sendChatHandle"
+          >
+            <img v-show="isDisabledChat || loading" src="@/assets/icon_send.svg" alt="" />
+            <SendIcon v-show="!isDisabledChat && !loading" />
+          </el-button>
+        </div>
+      </div>
+    </div>
+    <div class="text-center" v-if="applicationDetails.disclaimer" style="margin-top: 8px">
+      <el-text type="info" v-if="applicationDetails.disclaimer" style="font-size: 12px">
+        <auto-tooltip :content="applicationDetails.disclaimer_value">
+          {{ applicationDetails.disclaimer_value }}
+        </auto-tooltip>
+      </el-text>
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+import { ref, computed, onMounted, nextTick } from 'vue'
+import Recorder from 'recorder-core'
+import applicationApi from '@/api/application'
+import { MsgAlert } from '@/utils/message'
+import { type chatType } from '@/api/type/application'
+import { useRoute, useRouter } from 'vue-router'
+import { getImgUrl } from '@/utils/utils'
+import bus from '@/bus'
+import 'recorder-core/src/engine/mp3'
+import 'recorder-core/src/engine/mp3-engine'
+import { MsgWarning } from '@/utils/message'
+import { t } from '@/locales'
+const router = useRouter()
+const route = useRoute()
+const {
+  query: { mode, question }
+} = route as any
+const quickInputRef = ref()
+const props = withDefaults(
+  defineProps<{
+    applicationDetails: any
+    type: 'log' | 'ai-chat' | 'debug-ai-chat'
+    loading: boolean
+    isMobile: boolean
+    appId?: string
+    chatId: string
+    sendMessage: (question: string, other_params_data?: any, chat?: chatType) => void
+    openChatId: () => Promise<string>
+  }>(),
+  {
+    applicationDetails: () => ({}),
+    available: true
+  }
+)
+const emit = defineEmits(['update:chatId', 'update:loading'])
+const chartOpenId = ref<string>()
+const chatId_context = computed({
+  get: () => {
+    if (chartOpenId.value) {
+      return chartOpenId.value
+    }
+    return props.chatId
+  },
+  set: (v) => {
+    chartOpenId.value = v
+    emit('update:chatId', v)
+  }
+})
+const localLoading = computed({
+  get: () => {
+    return props.loading
+  },
+  set: (v) => {
+    emit('update:loading', v)
+  }
+})
+
+const imageExtensions = ['jpg', 'jpeg', 'png', 'gif', 'bmp']
+const documentExtensions = ['pdf', 'docx', 'txt', 'xls', 'xlsx', 'md', 'html', 'csv']
+const videoExtensions = ['mp4', 'avi', 'mov', 'mkv', 'flv']
+const audioExtensions = ['mp3', 'wav', 'ogg', 'aac', 'm4a']
+
+const getAcceptList = () => {
+  const { image, document, audio, video } = props.applicationDetails.file_upload_setting
+  let accepts: any = []
+  if (image) {
+    accepts = [...imageExtensions]
+  }
+  if (document) {
+    accepts = [...accepts, ...documentExtensions]
+  }
+  if (audio) {
+    accepts = [...accepts, ...audioExtensions]
+  }
+  if (video) {
+    accepts = [...accepts, ...videoExtensions]
+  }
+
+  if (accepts.length === 0) {
+    return `.${t('chat.uploadFile.tipMessage')}`
+  }
+  return accepts.map((ext: any) => '.' + ext).join(',')
+}
+
+const checkMaxFilesLimit = () => {
+  return (
+    props.applicationDetails.file_upload_setting.maxFiles <=
+    uploadImageList.value.length +
+      uploadDocumentList.value.length +
+      uploadAudioList.value.length +
+      uploadVideoList.value.length
+  )
+}
+
+const uploadFile = async (file: any, fileList: any) => {
+  const { maxFiles, fileLimit } = props.applicationDetails.file_upload_setting
+  // 单次上传文件数量限制
+  const file_limit_once =
+    uploadImageList.value.length +
+    uploadDocumentList.value.length +
+    uploadAudioList.value.length +
+    uploadVideoList.value.length
+  if (file_limit_once >= maxFiles) {
+    MsgWarning(t('chat.uploadFile.limitMessage1') + maxFiles + t('chat.uploadFile.limitMessage2'))
+    fileList.splice(0, fileList.length)
+    return
+  }
+  if (fileList.filter((f: any) => f.size > fileLimit * 1024 * 1024).length > 0) {
+    // MB
+    MsgWarning(t('chat.uploadFile.sizeLimit') + fileLimit + 'MB')
+    fileList.splice(0, fileList.length)
+    return
+  }
+
+  const formData = new FormData()
+  formData.append('file', file.raw, file.name)
+  //
+  const extension = file.name.split('.').pop().toLowerCase() // 获取文件后缀名并转为小写
+
+  if (imageExtensions.includes(extension)) {
+    uploadImageList.value.push(file)
+  } else if (documentExtensions.includes(extension)) {
+    uploadDocumentList.value.push(file)
+  } else if (videoExtensions.includes(extension)) {
+    uploadVideoList.value.push(file)
+  } else if (audioExtensions.includes(extension)) {
+    uploadAudioList.value.push(file)
+  }
+
+  if (!chatId_context.value) {
+    const res = await props.openChatId()
+    chatId_context.value = res
+  }
+
+  if (props.type === 'debug-ai-chat') {
+    formData.append('debug', 'true')
+  } else {
+    formData.append('debug', 'false')
+  }
+
+  applicationApi
+    .uploadFile(
+      props.applicationDetails.id as string,
+      chatId_context.value as string,
+      formData,
+      localLoading
+    )
+    .then((response) => {
+      fileList.splice(0, fileList.length)
+      uploadImageList.value.forEach((file: any) => {
+        const f = response.data.filter((f: any) => f.name === file.name)
+        if (f.length > 0) {
+          file.url = f[0].url
+          file.file_id = f[0].file_id
+        }
+      })
+      uploadDocumentList.value.forEach((file: any) => {
+        const f = response.data.filter((f: any) => f.name === file.name)
+        if (f.length > 0) {
+          file.url = f[0].url
+          file.file_id = f[0].file_id
+        }
+      })
+      uploadAudioList.value.forEach((file: any) => {
+        const f = response.data.filter((f: any) => f.name === file.name)
+        if (f.length > 0) {
+          file.url = f[0].url
+          file.file_id = f[0].file_id
+        }
+      })
+      uploadVideoList.value.forEach((file: any) => {
+        const f = response.data.filter((f: any) => f.name === file.name)
+        if (f.length > 0) {
+          file.url = f[0].url
+          file.file_id = f[0].file_id
+        }
+      })
+      if (!inputValue.value && uploadImageList.value.length > 0) {
+        inputValue.value = t('chat.uploadFile.imageMessage')
+      }
+    })
+}
+const recorderTime = ref(0)
+const startRecorderTime = ref(false)
+const recorderLoading = ref(false)
+const inputValue = ref<string>('')
+const uploadImageList = ref<Array<any>>([])
+const uploadDocumentList = ref<Array<any>>([])
+const uploadVideoList = ref<Array<any>>([])
+const uploadAudioList = ref<Array<any>>([])
+const mediaRecorderStatus = ref(true)
+const showDelete = ref('')
+
+// 定义响应式引用
+const mediaRecorder = ref<any>(null)
+const isDisabledChat = computed(
+  () => !(inputValue.value.trim() && (props.appId || props.applicationDetails?.name))
+)
+
+// 开始录音
+const startRecording = async () => {
+  try {
+    // 取消录音控制台日志
+    Recorder.CLog = function () {}
+    mediaRecorderStatus.value = false
+    handleTimeChange()
+    mediaRecorder.value = new Recorder({
+      type: 'mp3',
+      bitRate: 128,
+      sampleRate: 16000
+    })
+
+    mediaRecorder.value.open(
+      () => {
+        mediaRecorder.value.start()
+      },
+      (err: any) => {
+        MsgAlert(
+          t('common.tip'),
+          `${t('chat.tip.recorderTip')}
+    <img src="${new URL(`@/assets/tipIMG.jpg`, import.meta.url).href}" style="width: 100%;" />`,
+          {
+            confirmButtonText: t('chat.tip.confirm'),
+            dangerouslyUseHTMLString: true,
+            customClass: 'record-tip-confirm'
+          }
+        )
+      }
+    )
+  } catch (error) {
+    MsgAlert(
+      t('common.tip'),
+      `${t('chat.tip.recorderTip')}
+    <img src="${new URL(`@/assets/tipIMG.jpg`, import.meta.url).href}" style="width: 100%;" />`,
+      {
+        confirmButtonText: t('chat.tip.confirm'),
+        dangerouslyUseHTMLString: true,
+        customClass: 'record-tip-confirm'
+      }
+    )
+  }
+}
+
+// 停止录音
+const stopRecording = () => {
+  startRecorderTime.value = false
+  recorderTime.value = 0
+  if (mediaRecorder.value) {
+    mediaRecorderStatus.value = true
+    mediaRecorder.value.stop(
+      (blob: Blob, duration: number) => {
+        // 测试blob是否能正常播放
+        //  const link = document.createElement('a')
+        //  link.href = window.URL.createObjectURL(blob)
+        //  link.download = 'abc.mp3'
+        //  link.click()
+        uploadRecording(blob) // 上传录音文件
+      },
+      (err: any) => {
+        console.error(`${t('chat.tip.recorderError')}:`, err)
+      }
+    )
+  }
+}
+
+// 上传录音文件
+const uploadRecording = async (audioBlob: Blob) => {
+  try {
+    recorderLoading.value = true
+    const formData = new FormData()
+    formData.append('file', audioBlob, 'recording.mp3')
+    applicationApi
+      .postSpeechToText(props.applicationDetails.id as string, formData, localLoading)
+      .then((response) => {
+        recorderLoading.value = false
+        mediaRecorder.value.close()
+        inputValue.value = typeof response.data === 'string' ? response.data : ''
+        // 自动发送
+        if (props.applicationDetails.stt_autosend) {
+          nextTick(() => {
+            autoSendMessage()
+          })
+        }
+      })
+      .catch((error) => {
+        recorderLoading.value = false
+        console.error(`${t('chat.uploadFile.errorMessage')}:`, error)
+      })
+  } catch (error) {
+    recorderLoading.value = false
+    console.error(`${t('chat.uploadFile.errorMessage')}:`, 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)
+}
+
+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 && !event?.shiftKey && !event?.altKey && !event?.metaKey) {
+    // 如果没有按下组合键，则会阻止默认事件
+    event?.preventDefault()
+    if (!isDisabledChat.value && !props.loading && !event?.isComposing) {
+      if (inputValue.value.trim()) {
+        autoSendMessage()
+      }
+    }
+  } else {
+    // 如果同时按下ctrl/shift/cmd/opt +enter，则会换行
+    insertNewlineAtCursor(event)
+  }
+}
+const insertNewlineAtCursor = (event?: any) => {
+  const textarea = document.querySelector('.el-textarea__inner') as HTMLTextAreaElement
+  const startPos = textarea.selectionStart
+  const endPos = textarea.selectionEnd
+  // 阻止默认行为（避免额外的换行符）
+  event.preventDefault()
+  // 在光标处插入换行符
+  inputValue.value = inputValue.value.slice(0, startPos) + '\n' + inputValue.value.slice(endPos)
+  nextTick(() => {
+    textarea.setSelectionRange(startPos + 1, startPos + 1) // 光标定位到换行后位置
+  })
+}
+
+function deleteFile(index: number, val: string) {
+  if (val === 'image') {
+    uploadImageList.value.splice(index, 1)
+  } else if (val === 'document') {
+    uploadDocumentList.value.splice(index, 1)
+  } else if (val === 'video') {
+    uploadVideoList.value.splice(index, 1)
+  } else if (val === 'audio') {
+    uploadAudioList.value.splice(index, 1)
+  }
+}
+
+function mouseenter(row: any) {
+  showDelete.value = row.url
+}
+
+function mouseleave() {
+  showDelete.value = ''
+}
+
+onMounted(() => {
+  bus.on('chat-input', (message: string) => {
+    inputValue.value = message
+  })
+  if (question) {
+    inputValue.value = decodeURIComponent(question.trim())
+    sendChatHandle()
+    setTimeout(() => {
+      // 获取当前路由信息
+      const route = router.currentRoute.value
+      // 复制query对象
+      const query = { ...route.query }
+      // 删除特定的参数
+      delete query.question
+      const newRoute =
+        Object.entries(query)?.length > 0
+          ? route.path +
+            '?' +
+            Object.entries(query)
+              .map(([key, value]) => `${key}=${value}`)
+              .join('&')
+          : route.path
+
+      history.pushState(null, '', '/ui' + newRoute)
+    }, 100)
+  }
+  setTimeout(() => {
+    if (quickInputRef.value && mode === 'embed') {
+      quickInputRef.value.textarea.style.height = '0'
+    }
+  }, 1800)
+})
+</script>
+<style lang="scss" scope>
+@import '../../index.scss';
+
+.file {
+  position: relative;
+  overflow: inherit;
+
+  .delete-icon {
+    position: absolute;
+    right: -5px;
+    top: -5px;
+    z-index: 1;
+  }
+}
+
+.upload-tooltip-width {
+  width: 300px;
+}
+</style>
diff --git a/ui/src/components/ai-chat/component/chat-input-operate/index.vue b/ui/src/components/ai-chat/component/chat-input-operate/index.vue
index 14e185a6996..08cfc8b93d1 100644
--- a/ui/src/components/ai-chat/component/chat-input-operate/index.vue
+++ b/ui/src/components/ai-chat/component/chat-input-operate/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="ai-chat__operate p-16-24">
+  <div class="ai-chat__operate p-16">
     <slot name="operateBefore" />
     <div class="operate-textarea">
       <el-scrollbar max-height="136">
@@ -114,7 +114,9 @@
         </div>
       </el-scrollbar>
       <div class="flex">
+        <TouchChat v-if="isMicrophone" />
         <el-input
+          v-else
           ref="quickInputRef"
           v-model="inputValue"
           :placeholder="
@@ -131,61 +133,82 @@
         />
 
         <div class="operate flex align-center">
-          <span v-if="props.applicationDetails.file_upload_enable" class="flex align-center">
-            <el-upload
-              action="#"
-              multiple
-              :auto-upload="false"
-              :show-file-list="false"
-              :accept="getAcceptList()"
-              :on-change="(file: any, fileList: any) => uploadFile(file, fileList)"
-            >
-              <el-tooltip effect="dark" placement="top" popper-class="upload-tooltip-width">
-                <template #content>
-                  <div class="break-all pre-wrap">
-                    {{ $t('chat.uploadFile.label') }}：{{ $t('chat.uploadFile.most')
-                    }}{{ props.applicationDetails.file_upload_setting.maxFiles
-                    }}{{ $t('chat.uploadFile.limit') }}
-                    {{ props.applicationDetails.file_upload_setting.fileLimit }}MB<br />{{
-                      $t('chat.uploadFile.fileType')
-                    }}：{{ getAcceptList().replace(/\./g, '').replace(/,/g, '、').toUpperCase() }}
-                  </div>
-                </template>
-                <el-button text :disabled="checkMaxFilesLimit()" class="mt-4">
-                  <el-icon><Paperclip /></el-icon>
+          <template v-if="props.applicationDetails.stt_model_enable">
+            <span v-if="mode === 'mobile'">
+              <el-button text @click="isMicrophone = !isMicrophone">
+                <AppIcon v-if="isMicrophone" iconName="app-keyboard"></AppIcon>
+                <el-icon v-else>
+                  <Microphone />
+                </el-icon>
+              </el-button>
+            </span>
+            <span class="flex align-center" v-else>
+              <el-button text @click="startRecording" v-if="mediaRecorderStatus">
+                <el-icon>
+                  <Microphone />
+                </el-icon>
+              </el-button>
+
+              <div v-else class="operate flex align-center">
+                <el-text type="info"
+                  >00:{{ recorderTime < 10 ? `0${recorderTime}` : recorderTime }}</el-text
+                >
+                <el-button text type="primary" @click="stopRecording" :loading="recorderLoading">
+                  <AppIcon iconName="app-video-stop"></AppIcon>
                 </el-button>
-              </el-tooltip>
-            </el-upload>
-            <el-divider direction="vertical" />
-          </span>
-          <span v-if="props.applicationDetails.stt_model_enable" class="flex align-center">
-            <el-button text @click="startRecording" v-if="mediaRecorderStatus">
-              <el-icon>
-                <Microphone />
-              </el-icon>
-            </el-button>
+              </div>
+            </span>
+          </template>
 
-            <div v-else class="operate flex align-center">
-              <el-text type="info"
-                >00:{{ recorderTime < 10 ? `0${recorderTime}` : recorderTime }}</el-text
+          <template v-if="!startRecorderTime && !recorderLoading">
+            <span v-if="props.applicationDetails.file_upload_enable" class="flex align-center ml-4">
+              <el-upload
+                action="#"
+                multiple
+                :auto-upload="false"
+                :show-file-list="false"
+                :accept="getAcceptList()"
+                :on-change="(file: any, fileList: any) => uploadFile(file, fileList)"
               >
-              <el-button text type="primary" @click="stopRecording" :loading="recorderLoading">
-                <AppIcon iconName="app-video-stop"></AppIcon>
-              </el-button>
-            </div>
-            <el-divider v-if="!startRecorderTime && !recorderLoading" direction="vertical" />
-          </span>
-
-          <el-button
-            v-if="!startRecorderTime && !recorderLoading"
-            text
-            class="sent-button"
-            :disabled="isDisabledChat || loading"
-            @click="sendChatHandle"
-          >
-            <img v-show="isDisabledChat || loading" src="@/assets/icon_send.svg" alt="" />
-            <SendIcon v-show="!isDisabledChat && !loading" />
-          </el-button>
+                <el-tooltip
+                  :disabled="mode === 'mobile'"
+                  effect="dark"
+                  placement="top"
+                  popper-class="upload-tooltip-width"
+                >
+                  <template #content>
+                    <div class="break-all pre-wrap">
+                      {{ $t('chat.uploadFile.label') }}：{{ $t('chat.uploadFile.most')
+                      }}{{ props.applicationDetails.file_upload_setting.maxFiles
+                      }}{{ $t('chat.uploadFile.limit') }}
+                      {{ props.applicationDetails.file_upload_setting.fileLimit }}MB<br />{{
+                        $t('chat.uploadFile.fileType')
+                      }}：{{ getAcceptList().replace(/\./g, '').replace(/,/g, '、').toUpperCase() }}
+                    </div>
+                  </template>
+                  <el-button text :disabled="checkMaxFilesLimit()" class="mt-4">
+                    <el-icon><Paperclip /></el-icon>
+                  </el-button>
+                </el-tooltip>
+              </el-upload>
+            </span>
+            <el-divider
+              direction="vertical"
+              v-if="
+                props.applicationDetails.file_upload_enable ||
+                props.applicationDetails.stt_model_enable
+              "
+            />
+            <el-button
+              text
+              class="sent-button"
+              :disabled="isDisabledChat || loading"
+              @click="sendChatHandle"
+            >
+              <img v-show="isDisabledChat || loading" src="@/assets/icon_send.svg" alt="" />
+              <SendIcon v-show="!isDisabledChat && !loading" />
+            </el-button>
+          </template>
         </div>
       </div>
     </div>
@@ -201,6 +224,7 @@
 <script setup lang="ts">
 import { ref, computed, onMounted, nextTick } from 'vue'
 import Recorder from 'recorder-core'
+import TouchChat from './TouchChat.vue'
 import applicationApi from '@/api/application'
 import { MsgAlert } from '@/utils/message'
 import { type chatType } from '@/api/type/application'
@@ -397,6 +421,8 @@ const mediaRecorder = ref<any>(null)
 const isDisabledChat = computed(
   () => !(inputValue.value.trim() && (props.appId || props.applicationDetails?.name))
 )
+// 移动端语音
+const isMicrophone = ref(false)
 
 // 开始录音
 const startRecording = async () => {
@@ -604,22 +630,95 @@ onMounted(() => {
   }, 1800)
 })
 </script>
-<style lang="scss" scope>
-@import '../../index.scss';
-
-.file {
-  position: relative;
-  overflow: inherit;
-
-  .delete-icon {
-    position: absolute;
-    right: -5px;
-    top: -5px;
-    z-index: 1;
+<style lang="scss" scoped>
+.ai-chat {
+  &__operate {
+    background: #f3f7f9;
+    position: relative;
+    width: 100%;
+    box-sizing: border-box;
+    z-index: 10;
+
+    &:before {
+      background: linear-gradient(0deg, #f3f7f9 0%, rgba(243, 247, 249, 0) 100%);
+      content: '';
+      position: absolute;
+      width: 100%;
+      top: -16px;
+      left: 0;
+      height: 16px;
+    }
+
+    :deep(.operate-textarea) {
+      box-shadow: 0px 6px 24px 0px rgba(31, 35, 41, 0.08);
+      background-color: #ffffff;
+      border-radius: 8px;
+      border: 1px solid #ffffff;
+      box-sizing: border-box;
+
+      &:has(.el-textarea__inner:focus) {
+        border: 1px solid var(--el-color-primary);
+      }
+
+      .el-textarea__inner {
+        border-radius: 8px !important;
+        box-shadow: none;
+        resize: none;
+        padding: 13px 16px;
+        box-sizing: border-box;
+      }
+
+      .operate {
+        padding: 6px 10px;
+        .el-icon {
+          font-size: 20px;
+        }
+
+        .sent-button {
+          max-height: none;
+          .el-icon {
+            font-size: 24px;
+          }
+        }
+
+        .el-loading-spinner {
+          margin-top: -15px;
+
+          .circular {
+            width: 31px;
+            height: 31px;
+          }
+        }
+      }
+    }
+    .file {
+      position: relative;
+      overflow: inherit;
+
+      .delete-icon {
+        position: absolute;
+        right: -5px;
+        top: -5px;
+        z-index: 1;
+      }
+    }
+
+    .upload-tooltip-width {
+      width: 300px;
+    }
   }
 }
 
-.upload-tooltip-width {
-  width: 300px;
+@media only screen and (max-width: 768px) {
+  .ai-chat {
+    &__operate {
+      position: fixed;
+      bottom: 0;
+      font-size: 1rem;
+      .el-icon {
+        font-size: 1.4rem !important;
+      }
+    }
+  }
 }
 </style>
diff --git a/ui/src/components/ai-chat/component/operation-button/ChatOperationButton.vue b/ui/src/components/ai-chat/component/operation-button/ChatOperationButton.vue
index 187bc6a3c5b..5f86fb7bca8 100644
--- a/ui/src/components/ai-chat/component/operation-button/ChatOperationButton.vue
+++ b/ui/src/components/ai-chat/component/operation-button/ChatOperationButton.vue
@@ -307,7 +307,7 @@ onMounted(() => {
 })
 </script>
 <style lang="scss" scoped>
-@media only screen and (max-width: 430px) {
+@media only screen and (max-width: 420px) {
   .chat-operation-button {
     display: block;
   }
diff --git a/ui/src/components/ai-chat/component/operation-button/index.vue b/ui/src/components/ai-chat/component/operation-button/index.vue
index 39a5f81ec9d..dd4ccdb1653 100644
--- a/ui/src/components/ai-chat/component/operation-button/index.vue
+++ b/ui/src/components/ai-chat/component/operation-button/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="chat-operation-button">
+  <div class="operation-button-container">
     <LogOperationButton
       v-if="type === 'log'"
       v-bind:data="chatRecord"
diff --git a/ui/src/components/ai-chat/component/prologue-content/index.vue b/ui/src/components/ai-chat/component/prologue-content/index.vue
index 0ed86b6255e..b9da8fb9f0c 100644
--- a/ui/src/components/ai-chat/component/prologue-content/index.vue
+++ b/ui/src/components/ai-chat/component/prologue-content/index.vue
@@ -2,8 +2,8 @@
   <!-- 开场白组件 -->
   <div class="item-content mb-16">
     <div class="avatar" v-if="prologue">
-      <img v-if="application.avatar" :src="application.avatar" height="32px" width="32px" />
-      <LogoIcon v-else height="32px" width="32px" />
+      <img v-if="application.avatar" :src="application.avatar" height="28px" width="28px" />
+      <LogoIcon v-else height="28px" width="28px" />
     </div>
     <div class="content" v-if="prologue">
       <el-card shadow="always" class="border-r-8" style="--el-card-padding: 10px 16px 12px">
diff --git a/ui/src/components/ai-chat/component/question-content/index.vue b/ui/src/components/ai-chat/component/question-content/index.vue
index cfb4803546c..e95cb41b9f6 100644
--- a/ui/src/components/ai-chat/component/question-content/index.vue
+++ b/ui/src/components/ai-chat/component/question-content/index.vue
@@ -69,7 +69,7 @@
         :src="application.user_avatar"
         alt=""
         fit="cover"
-        style="width: 32px; height: 32px; display: block"
+        style="width: 28px; height: 28px; display: block"
       />
       <AppAvatar v-else>
         <img src="@/assets/user-icon.svg" style="width: 50%" alt="" />
diff --git a/ui/src/components/ai-chat/index.scss b/ui/src/components/ai-chat/index.scss
index c0167c30d48..9183919e308 100644
--- a/ui/src/components/ai-chat/index.scss
+++ b/ui/src/components/ai-chat/index.scss
@@ -1,6 +1,6 @@
 .ai-chat {
-  --padding-left: 40px;
-  height: 100%;
+  --padding-left: 36px;
+  height: calc(100% - 100px);
   display: flex;
   flex-direction: column;
   box-sizing: border-box;
@@ -24,65 +24,9 @@
       }
     }
   }
-  &__operate {
-    background: #f3f7f9;
-    position: relative;
-    width: 100%;
-    box-sizing: border-box;
-    z-index: 10;
-
-    &:before {
-      background: linear-gradient(0deg, #f3f7f9 0%, rgba(243, 247, 249, 0) 100%);
-      content: '';
-      position: absolute;
-      width: 100%;
-      top: -16px;
-      left: 0;
-      height: 16px;
-    }
-
-    .operate-textarea {
-      box-shadow: 0px 6px 24px 0px rgba(31, 35, 41, 0.08);
-      background-color: #ffffff;
-      border-radius: 8px;
-      border: 1px solid #ffffff;
-      box-sizing: border-box;
-
-      &:has(.el-textarea__inner:focus) {
-        border: 1px solid var(--el-color-primary);
-      }
-
-      .el-textarea__inner {
-        border-radius: 8px !important;
-        box-shadow: none;
-        resize: none;
-        padding: 12px 16px;
-        box-sizing: border-box;
-      }
-
-      .operate {
-        padding: 6px 10px;
-        .el-icon {
-          font-size: 20px;
-        }
-
-        .sent-button {
-          max-height: none;
-          .el-icon {
-            font-size: 24px;
-          }
-        }
-
-        .el-loading-spinner {
-          margin-top: -15px;
-
-          .circular {
-            width: 31px;
-            height: 31px;
-          }
-        }
-      }
-    }
+  &.log,
+  &.debug-ai-chat {
+    height: 100%;
   }
 }
 
@@ -96,3 +40,5 @@
     margin: 0 auto;
   }
 }
+.chat-mobile {
+}
diff --git a/ui/src/components/ai-chat/index.vue b/ui/src/components/ai-chat/index.vue
index 24e8c71ec48..4e0e110ec7c 100644
--- a/ui/src/components/ai-chat/index.vue
+++ b/ui/src/components/ai-chat/index.vue
@@ -17,7 +17,7 @@
     </div>
     <template v-if="!isUserInput || !firsUserInput || type === 'log'">
       <el-scrollbar ref="scrollDiv" @scroll="handleScrollTop">
-        <div ref="dialogScrollbar" class="ai-chat__content p-24">
+        <div ref="dialogScrollbar" class="ai-chat__content p-16">
           <PrologueContent
             :type="type"
             :application="applicationDetails"
@@ -514,7 +514,7 @@ defineExpose({
   setScrollBottom
 })
 </script>
-<style lang="scss" scoped>
+<style lang="scss">
 @import './index.scss';
 .firstUserInput {
   height: 100%;
diff --git a/ui/src/components/dynamics-form/Demo.vue b/ui/src/components/dynamics-form/Demo.vue
index dce7f8f0fd4..9e179c3ce8b 100644
--- a/ui/src/components/dynamics-form/Demo.vue
+++ b/ui/src/components/dynamics-form/Demo.vue
@@ -296,4 +296,4 @@ const click = () => {
   dynamicsFormRef.value?.validate()
 }
 </script>
-<style lang="scss" scope></style>
+<style lang="scss" scoped></style>
diff --git a/ui/src/components/dynamics-form/index.vue b/ui/src/components/dynamics-form/index.vue
index 8885aeec9fb..28bea502e23 100644
--- a/ui/src/components/dynamics-form/index.vue
+++ b/ui/src/components/dynamics-form/index.vue
@@ -219,4 +219,4 @@ defineExpose({
   ruleFormRef
 })
 </script>
-<style lang="scss" scope></style>
+<style lang="scss" scoped></style>
diff --git a/ui/src/components/dynamics-form/items/label/TooltipLabel.vue b/ui/src/components/dynamics-form/items/label/TooltipLabel.vue
index d9669fd45e9..2ca9911f4f5 100644
--- a/ui/src/components/dynamics-form/items/label/TooltipLabel.vue
+++ b/ui/src/components/dynamics-form/items/label/TooltipLabel.vue
@@ -17,7 +17,7 @@ defineProps<{
   tooltip: string
 }>()
 </script>
-<style lang="scss" scope>
+<style lang="scss" scoped>
 .aiMode-param-dialog {
   padding: 8px 8px 24px 8px;
 
diff --git a/ui/src/components/generate-related-dialog/index.vue b/ui/src/components/generate-related-dialog/index.vue
index efb89dc0635..ee6669f8bb4 100644
--- a/ui/src/components/generate-related-dialog/index.vue
+++ b/ui/src/components/generate-related-dialog/index.vue
@@ -187,4 +187,4 @@ function getModel() {
 
 defineExpose({ open })
 </script>
-<style lang="scss" scope></style>
+<style lang="scss" scoped></style>
diff --git a/ui/src/components/icons/index.ts b/ui/src/components/icons/index.ts
index 5c7e7ca1f99..81d471b2a5f 100644
--- a/ui/src/components/icons/index.ts
+++ b/ui/src/components/icons/index.ts
@@ -1415,5 +1415,30 @@ export const iconMap: any = {
         )
       ])
     }
+  },
+  'app-keyboard': {
+    iconReader: () => {
+      return h('i', [
+        h(
+          'svg',
+          {
+            style: { height: '100%', width: '100%' },
+            viewBox: '0 0 1024 1024',
+            version: '1.1',
+            xmlns: 'http://www.w3.org/2000/svg'
+          },
+          [
+            h('path', {
+              d: 'M373.333333 352a53.333333 53.333333 0 1 1-106.666666 0 53.333333 53.333333 0 0 1 106.666666 0zM320 576a53.333333 53.333333 0 1 0 0-106.666667 53.333333 53.333333 0 0 0 0 106.666667zM565.333333 352a53.333333 53.333333 0 1 1-106.666666 0 53.333333 53.333333 0 0 1 106.666666 0zM512 576a53.333333 53.333333 0 1 0 0-106.666667 53.333333 53.333333 0 0 0 0 106.666667zM757.333333 352a53.333333 53.333333 0 1 1-106.666666 0 53.333333 53.333333 0 0 1 106.666666 0zM704 576a53.333333 53.333333 0 1 0 0-106.666667 53.333333 53.333333 0 0 0 0 106.666667zM362.666667 661.333333a42.666667 42.666667 0 1 0 0 85.333334h298.666666a42.666667 42.666667 0 1 0 0-85.333334h-298.666666z',
+              fill: 'currentColor'
+            }),
+            h('path', {
+              d: 'M512 42.666667C252.8 42.666667 42.666667 252.8 42.666667 512s210.133333 469.333333 469.333333 469.333333 469.333333-210.133333 469.333333-469.333333S771.2 42.666667 512 42.666667zM128 512a384 384 0 1 1 768 0 384 384 0 0 1-768 0z',
+              fill: 'currentColor'
+            })
+          ]
+        )
+      ])
+    }
   }
 }
diff --git a/ui/src/components/layout-container/index.vue b/ui/src/components/layout-container/index.vue
index ec5d8c3b21f..09f0123f31a 100644
--- a/ui/src/components/layout-container/index.vue
+++ b/ui/src/components/layout-container/index.vue
@@ -30,7 +30,7 @@ const showBack = computed(() => {
 })
 </script>
 
-<style lang="scss" scope>
+<style lang="scss" scoped>
 .content-container {
   transition: 0.3s;
   padding: 0 var(--app-view-padding) var(--app-view-padding);
diff --git a/ui/src/components/login-container/index.vue b/ui/src/components/login-container/index.vue
index 07145339a1c..5675a63c6b3 100644
--- a/ui/src/components/login-container/index.vue
+++ b/ui/src/components/login-container/index.vue
@@ -20,7 +20,7 @@ defineProps({
   subTitle: String
 })
 </script>
-<style lang="scss" scope>
+<style lang="scss" scoped>
 .login-form-container {
   width: 480px;
 
diff --git a/ui/src/components/login-layout/index.vue b/ui/src/components/login-layout/index.vue
index 5ae58f0b80d..cb071e5a706 100644
--- a/ui/src/components/login-layout/index.vue
+++ b/ui/src/components/login-layout/index.vue
@@ -84,7 +84,7 @@ const loginImage = computed(() => {
   }
 })
 </script>
-<style lang="scss" scope>
+<style lang="scss" scoped>
 .login-warp {
   height: 100vh;
 
diff --git a/ui/src/styles/app.scss b/ui/src/styles/app.scss
index 537ff23e099..0f077b84eab 100644
--- a/ui/src/styles/app.scss
+++ b/ui/src/styles/app.scss
@@ -15,6 +15,7 @@
 html {
   height: 100%;
   box-sizing: border-box;
+  font-size: 100%;
 }
 
 body {
diff --git a/ui/src/views/application-overview/component/APIKeyDialog.vue b/ui/src/views/application-overview/component/APIKeyDialog.vue
index 6358b190c98..4ff20eb4a0c 100644
--- a/ui/src/views/application-overview/component/APIKeyDialog.vue
+++ b/ui/src/views/application-overview/component/APIKeyDialog.vue
@@ -140,4 +140,4 @@ function refresh() {
 
 defineExpose({ open })
 </script>
-<style lang="scss" scope></style>
+<style lang="scss" scoped></style>
diff --git a/ui/src/views/application-overview/component/DisplaySettingDialog.vue b/ui/src/views/application-overview/component/DisplaySettingDialog.vue
index 4f35b10ea23..a094bc67088 100644
--- a/ui/src/views/application-overview/component/DisplaySettingDialog.vue
+++ b/ui/src/views/application-overview/component/DisplaySettingDialog.vue
@@ -99,4 +99,4 @@ const submit = async (formEl: FormInstance | undefined) => {
 
 defineExpose({ open })
 </script>
-<style lang="scss" scope></style>
+<style lang="scss" scoped></style>
diff --git a/ui/src/views/application-overview/component/EditAvatarDialog.vue b/ui/src/views/application-overview/component/EditAvatarDialog.vue
index cf8083735e2..c7f7a40d8ed 100644
--- a/ui/src/views/application-overview/component/EditAvatarDialog.vue
+++ b/ui/src/views/application-overview/component/EditAvatarDialog.vue
@@ -139,4 +139,4 @@ function submit() {
 
 defineExpose({ open })
 </script>
-<style lang="scss" scope></style>
+<style lang="scss" scoped></style>
diff --git a/ui/src/views/application-overview/component/EmbedDialog.vue b/ui/src/views/application-overview/component/EmbedDialog.vue
index 8aaf4a9bc33..428a2522446 100644
--- a/ui/src/views/application-overview/component/EmbedDialog.vue
+++ b/ui/src/views/application-overview/component/EmbedDialog.vue
@@ -132,7 +132,7 @@ src="${window.location.origin}/api/application/embed?protocol=${window.location.
 <\/script>
 `
  source3.value = `<iframe
-src="${application.location + val + urlParams1.value}&mode=mobile"
+src="${application.location + val + urlParams1.value}?mode=mobile"
 style="width: 100%; height: 100%;"
 frameborder="0"
 allow="microphone">
@@ -144,7 +144,7 @@ allow="microphone">
 
 defineExpose({ open })
 </script>
-<style lang="scss" scope>
+<style lang="scss" scoped>
 .embed-dialog {
   .title {
     color: var(--app-text-color) !important;
diff --git a/ui/src/views/application-overview/component/LimitDialog.vue b/ui/src/views/application-overview/component/LimitDialog.vue
index 256007cf3d0..2bb3d423819 100644
--- a/ui/src/views/application-overview/component/LimitDialog.vue
+++ b/ui/src/views/application-overview/component/LimitDialog.vue
@@ -186,7 +186,7 @@ function firstGeneration() {
 
 defineExpose({ open })
 </script>
-<style lang="scss" scope>
+<style lang="scss" scoped>
 .authentication-append-input {
   .el-input-group__append {
     padding: 0 !important;
diff --git a/ui/src/views/application-overview/component/SettingAPIKeyDialog.vue b/ui/src/views/application-overview/component/SettingAPIKeyDialog.vue
index b9ff56666bf..a5f3770b316 100644
--- a/ui/src/views/application-overview/component/SettingAPIKeyDialog.vue
+++ b/ui/src/views/application-overview/component/SettingAPIKeyDialog.vue
@@ -110,4 +110,4 @@ const submit = async (formEl: FormInstance | undefined) => {
 
 defineExpose({ open })
 </script>
-<style lang="scss" scope></style>
+<style lang="scss" scoped></style>
diff --git a/ui/src/views/application-overview/component/XPackDisplaySettingDialog.vue b/ui/src/views/application-overview/component/XPackDisplaySettingDialog.vue
index a1aed023faa..852c11767be 100644
--- a/ui/src/views/application-overview/component/XPackDisplaySettingDialog.vue
+++ b/ui/src/views/application-overview/component/XPackDisplaySettingDialog.vue
@@ -550,7 +550,7 @@ const submit = async (formEl: FormInstance | undefined) => {
 
 defineExpose({ open })
 </script>
-<style lang="scss" scope>
+<style lang="scss" scoped>
 .setting-preview {
   background: #f5f6f7;
   height: 570px;
diff --git a/ui/src/views/application/ApplicationSetting.vue b/ui/src/views/application/ApplicationSetting.vue
index e4ddcc788f7..b6342c24136 100644
--- a/ui/src/views/application/ApplicationSetting.vue
+++ b/ui/src/views/application/ApplicationSetting.vue
@@ -419,7 +419,7 @@
           {{ $t('views.application.applicationForm.title.appTest') }}
         </h4>
         <div class="dialog-bg">
-          <div class="flex align-center p-24">
+          <div class="flex align-center p-16 mb-8">
             <div
               class="edit-avatar mr-12"
               @mouseenter="showEditIcon = true"
diff --git a/ui/src/views/application/component/AddDatasetDialog.vue b/ui/src/views/application/component/AddDatasetDialog.vue
index e1937964e3c..71cd9ff9ab8 100644
--- a/ui/src/views/application/component/AddDatasetDialog.vue
+++ b/ui/src/views/application/component/AddDatasetDialog.vue
@@ -144,7 +144,7 @@ const refresh = () => {
 
 defineExpose({ open })
 </script>
-<style lang="scss" scope>
+<style lang="scss" scoped>
 .addDataset-dialog {
   padding: 0;
   .el-dialog__header {
diff --git a/ui/src/views/application/component/CopyApplicationDialog.vue b/ui/src/views/application/component/CopyApplicationDialog.vue
index c9b9c4e4199..6fb8fe5300d 100644
--- a/ui/src/views/application/component/CopyApplicationDialog.vue
+++ b/ui/src/views/application/component/CopyApplicationDialog.vue
@@ -175,4 +175,4 @@ const submitHandle = async (formEl: FormInstance | undefined) => {
 
 defineExpose({ open })
 </script>
-<style lang="scss" scope></style>
+<style lang="scss" scoped></style>
diff --git a/ui/src/views/application/component/CreateApplicationDialog.vue b/ui/src/views/application/component/CreateApplicationDialog.vue
index 11a0796429b..438bfe211a9 100644
--- a/ui/src/views/application/component/CreateApplicationDialog.vue
+++ b/ui/src/views/application/component/CreateApplicationDialog.vue
@@ -259,7 +259,7 @@ function selectedType(type: string) {
 
 defineExpose({ open })
 </script>
-<style lang="scss" scope>
+<style lang="scss" scoped>
 .radio-card {
   line-height: 22px;
   &.active {
diff --git a/ui/src/views/application/component/ParamSettingDialog.vue b/ui/src/views/application/component/ParamSettingDialog.vue
index 2d58be74955..ca4d2213449 100644
--- a/ui/src/views/application/component/ParamSettingDialog.vue
+++ b/ui/src/views/application/component/ParamSettingDialog.vue
@@ -326,7 +326,7 @@ function changeHandle(val: string) {
 
 defineExpose({ open })
 </script>
-<style lang="scss" scope>
+<style lang="scss" scoped>
 .param-dialog {
   padding: 8px 8px 24px 8px;
   .el-dialog__header {
diff --git a/ui/src/views/application/component/ReasoningParamSettingDialog.vue b/ui/src/views/application/component/ReasoningParamSettingDialog.vue
index 7b1752e6b05..8e36294f27a 100644
--- a/ui/src/views/application/component/ReasoningParamSettingDialog.vue
+++ b/ui/src/views/application/component/ReasoningParamSettingDialog.vue
@@ -82,7 +82,7 @@ const submit = () => {
 
 defineExpose({ open })
 </script>
-<style lang="scss" scope>
+<style lang="scss" scoped>
 .param-dialog {
   padding: 8px 8px 24px 8px;
 
diff --git a/ui/src/views/chat/embed/index.vue b/ui/src/views/chat/embed/index.vue
index cabf459bf34..3e342fd694a 100644
--- a/ui/src/views/chat/embed/index.vue
+++ b/ui/src/views/chat/embed/index.vue
@@ -330,8 +330,8 @@ onMounted(() => {
     border-bottom: 1px solid var(--el-border-color);
   }
   &__main {
-    padding-top: calc(var(--app-header-height) + 24px);
-    height: calc(100vh - var(--app-header-height) - 24px);
+    padding-top: calc(var(--app-header-height) + 16px);
+    height: calc(100vh - var(--app-header-height) - 16px);
     overflow: hidden;
   }
   .new-chat-button {
diff --git a/ui/src/views/chat/mobile/index.vue b/ui/src/views/chat/mobile/index.vue
index 4718a197552..2ae05600e14 100644
--- a/ui/src/views/chat/mobile/index.vue
+++ b/ui/src/views/chat/mobile/index.vue
@@ -1,6 +1,6 @@
 <template>
   <div
-    class="chat-embed layout-bg"
+    class="chat-mobile layout-bg"
     v-loading="loading"
     :style="{
       '--el-color-primary': applicationDetail?.custom_theme?.theme_color,
@@ -310,7 +310,7 @@ onMounted(() => {
 })
 </script>
 <style lang="scss">
-.chat-embed {
+.chat-mobile {
   overflow: hidden;
   &__header {
     background: var(--app-header-bg-color);
@@ -325,16 +325,17 @@ onMounted(() => {
     border-bottom: 1px solid var(--el-border-color);
   }
   &__main {
-    padding-top: calc(var(--app-header-height) + 24px);
-    height: calc(100vh - var(--app-header-height) - 24px);
+    padding-top: calc(var(--app-header-height) + 16px);
+    height: calc(100vh - var(--app-header-height) - 16px);
     overflow: hidden;
   }
   .new-chat-button {
     z-index: 11;
+    font-size: 1rem;
   }
   // 历史对话弹出层
   .chat-popover {
-    position: absolute;
+    position: fixed;
     top: var(--app-header-height);
     background: #ffffff;
     padding-bottom: 24px;
@@ -342,7 +343,7 @@ onMounted(() => {
   }
   .chat-popover-button {
     z-index: 2009;
-    position: absolute;
+    position: fixed;
     top: 16px;
     right: 16px;
     font-size: 22px;
@@ -386,11 +387,11 @@ onMounted(() => {
       top: 50%;
     }
   }
-  .AiChat-embed {
-    .ai-chat__operate {
-      padding-top: 12px;
-    }
-  }
+  // .AiChat-embed {
+  //   .ai-chat__operate {
+  //     padding-top: 12px;
+  //   }
+  // }
 }
 </style>
 <style lang="scss" scoped>
diff --git a/ui/src/views/dataset/component/CreateDatasetDialog.vue b/ui/src/views/dataset/component/CreateDatasetDialog.vue
index bf8c8cd5594..52c2e893e39 100644
--- a/ui/src/views/dataset/component/CreateDatasetDialog.vue
+++ b/ui/src/views/dataset/component/CreateDatasetDialog.vue
@@ -190,4 +190,4 @@ function radioChange() {
 
 defineExpose({ open })
 </script>
-<style lang="scss" scope></style>
+<style lang="scss" scoped></style>
diff --git a/ui/src/views/dataset/component/EditParagraphDialog.vue b/ui/src/views/dataset/component/EditParagraphDialog.vue
index 9a142ef3296..9fffaddc7d9 100644
--- a/ui/src/views/dataset/component/EditParagraphDialog.vue
+++ b/ui/src/views/dataset/component/EditParagraphDialog.vue
@@ -132,4 +132,4 @@ const submitHandle = async () => {
 
 defineExpose({ open })
 </script>
-<style lang="scss" scope></style>
+<style lang="scss" scoped></style>
diff --git a/ui/src/views/document/component/SelectDatasetDialog.vue b/ui/src/views/document/component/SelectDatasetDialog.vue
index d04e6bb9dda..73426f2d997 100644
--- a/ui/src/views/document/component/SelectDatasetDialog.vue
+++ b/ui/src/views/document/component/SelectDatasetDialog.vue
@@ -121,7 +121,7 @@ const refresh = () => {
 
 defineExpose({ open })
 </script>
-<style lang="scss" scope>
+<style lang="scss" scoped>
 .select-dataset-dialog {
   padding: 0;
   .el-dialog__header {
diff --git a/ui/src/views/function-lib/component/EditAvatarDialog.vue b/ui/src/views/function-lib/component/EditAvatarDialog.vue
index 8a1c4bec017..b9aba7f1ddb 100644
--- a/ui/src/views/function-lib/component/EditAvatarDialog.vue
+++ b/ui/src/views/function-lib/component/EditAvatarDialog.vue
@@ -128,4 +128,4 @@ function submit() {
 
 defineExpose({open})
 </script>
-<style lang="scss" scope></style>
+<style lang="scss" scoped></style>
diff --git a/ui/src/views/log/component/EditContentDialog.vue b/ui/src/views/log/component/EditContentDialog.vue
index 240984cee9d..be4af4c88fd 100644
--- a/ui/src/views/log/component/EditContentDialog.vue
+++ b/ui/src/views/log/component/EditContentDialog.vue
@@ -295,4 +295,4 @@ const submitForm = async (formEl: FormInstance | undefined) => {
 
 defineExpose({ open })
 </script>
-<style lang="scss" scope></style>
+<style lang="scss" scoped></style>
diff --git a/ui/src/views/log/component/EditMarkDialog.vue b/ui/src/views/log/component/EditMarkDialog.vue
index 8394c0ef4a3..720333c5dc7 100644
--- a/ui/src/views/log/component/EditMarkDialog.vue
+++ b/ui/src/views/log/component/EditMarkDialog.vue
@@ -151,7 +151,7 @@ const submit = async (formEl: FormInstance) => {
 
 defineExpose({ open })
 </script>
-<style lang="scss" scope>
+<style lang="scss" scoped>
 .edit-mark-dialog {
   .el-dialog__header.show-close {
     padding-right: 15px;
diff --git a/ui/src/views/login/forgot-password/index.vue b/ui/src/views/login/forgot-password/index.vue
index 235c61de0ca..c5476dcb245 100644
--- a/ui/src/views/login/forgot-password/index.vue
+++ b/ui/src/views/login/forgot-password/index.vue
@@ -137,4 +137,4 @@ const handleTimeChange = () => {
   }
 }
 </script>
-<style lang="scss" scope></style>
+<style lang="scss" scoped></style>
diff --git a/ui/src/views/login/index.vue b/ui/src/views/login/index.vue
index 647f130f7bb..fff8a874c6d 100644
--- a/ui/src/views/login/index.vue
+++ b/ui/src/views/login/index.vue
@@ -349,7 +349,7 @@ onMounted(() => {
   }
 })
 </script>
-<style lang="scss" scope>
+<style lang="scss" scoped>
 .login-gradient-divider {
   position: relative;
   text-align: center;
diff --git a/ui/src/views/login/register/index.vue b/ui/src/views/login/register/index.vue
index fd53662157d..1fba06992ba 100644
--- a/ui/src/views/login/register/index.vue
+++ b/ui/src/views/login/register/index.vue
@@ -223,4 +223,4 @@ const handleTimeChange = () => {
   }
 }
 </script>
-<style lang="scss" scope></style>
+<style lang="scss" scoped></style>
diff --git a/ui/src/views/login/reset-password/index.vue b/ui/src/views/login/reset-password/index.vue
index df3f8ea70fa..2c2ff02576e 100644
--- a/ui/src/views/login/reset-password/index.vue
+++ b/ui/src/views/login/reset-password/index.vue
@@ -132,4 +132,4 @@ const resetPassword = () => {
     })
 }
 </script>
-<style lang="scss" scope></style>
+<style lang="scss" scoped></style>
diff --git a/ui/src/views/paragraph/component/ParagraphDialog.vue b/ui/src/views/paragraph/component/ParagraphDialog.vue
index cb5cddf830b..1a306b07447 100644
--- a/ui/src/views/paragraph/component/ParagraphDialog.vue
+++ b/ui/src/views/paragraph/component/ParagraphDialog.vue
@@ -150,4 +150,4 @@ const handleDebounceClick = debounce(() => {
 
 defineExpose({ open })
 </script>
-<style lang="scss" scope></style>
+<style lang="scss" scoped></style>
diff --git a/ui/src/views/paragraph/component/SelectDocumentDialog.vue b/ui/src/views/paragraph/component/SelectDocumentDialog.vue
index 3d71eae9ce4..4f7bf0dee74 100644
--- a/ui/src/views/paragraph/component/SelectDocumentDialog.vue
+++ b/ui/src/views/paragraph/component/SelectDocumentDialog.vue
@@ -167,4 +167,4 @@ const submitForm = async (formEl: FormInstance | undefined) => {
 
 defineExpose({ open })
 </script>
-<style lang="scss" scope></style>
+<style lang="scss" scoped></style>
diff --git a/ui/src/views/problem/component/RelateProblemDialog.vue b/ui/src/views/problem/component/RelateProblemDialog.vue
index 296f00d3e8b..13d8ce23930 100644
--- a/ui/src/views/problem/component/RelateProblemDialog.vue
+++ b/ui/src/views/problem/component/RelateProblemDialog.vue
@@ -288,7 +288,7 @@ const open = (problemId: any) => {
 
 defineExpose({ open })
 </script>
-<style lang="scss" scope>
+<style lang="scss" scoped>
 .paragraph-card {
   position: relative;
 }
diff --git a/ui/src/views/team/component/CreateMemberDialog.vue b/ui/src/views/team/component/CreateMemberDialog.vue
index c376093140e..c0ab3476112 100644
--- a/ui/src/views/team/component/CreateMemberDialog.vue
+++ b/ui/src/views/team/component/CreateMemberDialog.vue
@@ -99,7 +99,7 @@ onMounted(() => {})
 
 defineExpose({ open, close })
 </script>
-<style lang="scss" scope>
+<style lang="scss" scoped>
 .member-dialog {
   .el-dialog__header {
     padding-bottom: 19px;
diff --git a/ui/src/views/team/component/PermissionSetting.vue b/ui/src/views/team/component/PermissionSetting.vue
index 6d2803b7b22..6a9585f9579 100644
--- a/ui/src/views/team/component/PermissionSetting.vue
+++ b/ui/src/views/team/component/PermissionSetting.vue
@@ -174,4 +174,4 @@ function checkedOperateChange(Name: string | number, row: any, e: boolean) {
   })
 }
 </script>
-<style lang="scss" scope></style>
+<style lang="scss" scoped></style>
diff --git a/ui/src/views/user-manage/component/UserDialog.vue b/ui/src/views/user-manage/component/UserDialog.vue
index 3bba76c5d4c..61356f6897a 100644
--- a/ui/src/views/user-manage/component/UserDialog.vue
+++ b/ui/src/views/user-manage/component/UserDialog.vue
@@ -186,4 +186,4 @@ const submit = async (formEl: FormInstance | undefined) => {
 
 defineExpose({ open })
 </script>
-<style lang="scss" scope></style>
+<style lang="scss" scoped></style>
diff --git a/ui/src/views/user-manage/component/UserPwdDialog.vue b/ui/src/views/user-manage/component/UserPwdDialog.vue
index f655e71829d..eb33085ff7f 100644
--- a/ui/src/views/user-manage/component/UserPwdDialog.vue
+++ b/ui/src/views/user-manage/component/UserPwdDialog.vue
@@ -130,4 +130,4 @@ const submit = async (formEl: FormInstance | undefined) => {
 
 defineExpose({ open })
 </script>
-<style lang="scss" scope></style>
+<style lang="scss" scoped></style>
diff --git a/ui/src/workflow/nodes/reranker-node/ParamSettingDialog.vue b/ui/src/workflow/nodes/reranker-node/ParamSettingDialog.vue
index 2ce90231e11..8756fe9c3a7 100644
--- a/ui/src/workflow/nodes/reranker-node/ParamSettingDialog.vue
+++ b/ui/src/workflow/nodes/reranker-node/ParamSettingDialog.vue
@@ -125,7 +125,7 @@ const submit = () => {
 
 defineExpose({ open })
 </script>
-<style lang="scss" scope>
+<style lang="scss" scoped>
 .param-dialog {
   padding: 8px 8px 24px 8px;
   .el-dialog__header {

From f2baa15e1f9409eeaef55c6860c15d31204f4887 Mon Sep 17 00:00:00 2001
From: wangdan-fit2cloud <dan.wang@fit2cloud.com>
Date: Fri, 21 Mar 2025 16:39:03 +0800
Subject: [PATCH 3/4] feat: Optimize the mobile voice interaction experience

---
 .../chat-input-operate/TouchChat.vue          |  67 +-
 .../chat-input-operate/index copy 2.vue       | 625 ------------------
 .../component/chat-input-operate/index.vue    |  61 +-
 ui/src/components/ai-chat/index.scss          |  15 +-
 ui/src/components/ai-chat/index.vue           |   2 +-
 ui/src/layout/hooks/useResize.ts              |   4 +-
 6 files changed, 115 insertions(+), 659 deletions(-)
 delete mode 100644 ui/src/components/ai-chat/component/chat-input-operate/index copy 2.vue

diff --git a/ui/src/components/ai-chat/component/chat-input-operate/TouchChat.vue b/ui/src/components/ai-chat/component/chat-input-operate/TouchChat.vue
index 62144a7b634..c7ed86a4333 100644
--- a/ui/src/components/ai-chat/component/chat-input-operate/TouchChat.vue
+++ b/ui/src/components/ai-chat/component/chat-input-operate/TouchChat.vue
@@ -15,7 +15,9 @@
     <transition name="el-fade-in-linear">
       <el-card class="custom-speech-card" :class="isTouching ? '' : 'active'" v-if="dialogVisible">
         <p>
-          <el-text type="info" v-if="isTouching">{{ '00:06' }}</el-text>
+          <el-text type="info" v-if="isTouching"
+            >00:{{ props.time < 10 ? `0${props.time}` : props.time }}</el-text
+          >
           <span class="lighter" v-else>
             {{ message }}
           </span>
@@ -36,17 +38,54 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue'
+import { el } from 'element-plus/es/locale'
+import { ref, watch } from 'vue'
+const props = defineProps({
+  time: {
+    type: Number,
+    default: 0
+  },
+  start: {
+    type: Boolean,
+    default: false
+  }
+})
+const emit = defineEmits(['TouchStart', 'TouchEnd'])
 // 移动端语音
 const startY = ref(0)
 const isTouching = ref(false)
 const dialogVisible = ref(false)
 const message = ref('按住说话')
+
+watch(
+  () => props.time,
+  (val) => {
+    if (val && val === 60) {
+      dialogVisible.value = false
+      emit('TouchEnd', isTouching.value)
+      isTouching.value = false
+    }
+  }
+)
+watch(
+  () => props.start,
+  (val) => {
+    if (val) {
+      isTouching.value = true
+      dialogVisible.value = true
+      message.value = '松开发送，上滑取消'
+    } else {
+      dialogVisible.value = false
+      isTouching.value = false
+    }
+  }
+)
+
 function onTouchStart(event: any) {
-  isTouching.value = true
+  emit('TouchStart')
   startY.value = event.touches[0].clientY
-  dialogVisible.value = true
-  message.value = '松开发送，上滑取消'
+  // 阻止默认滚动行为
+  event.preventDefault()
 }
 function onTouchMove(event: any) {
   if (!isTouching.value) return
@@ -62,13 +101,7 @@ function onTouchMove(event: any) {
   }
 }
 function onTouchEnd() {
-  if (isTouching.value) {
-    message.value = '发送成功'
-  } else {
-    message.value = '已取消'
-  }
-  isTouching.value = false
-  dialogVisible.value = false
+  emit('TouchEnd', isTouching.value)
 }
 </script>
 
@@ -85,10 +118,12 @@ function onTouchEnd() {
   z-index: 999;
   text-align: center;
   color: var(--app-text-color-secondary);
-  user-select: none; /* 禁止选中 */
-  -webkit-user-select: none; /* Safari */
-  -moz-user-select: none; /* 老版Firefox */
-  -ms-user-select: none; /* IE 10及以下 */
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  -khtml-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
   .close {
     box-shadow: 0px 4px 8px 0px rgba(31, 35, 41, 0.1);
     border: 1px solid rgba(222, 224, 227, 1);
diff --git a/ui/src/components/ai-chat/component/chat-input-operate/index copy 2.vue b/ui/src/components/ai-chat/component/chat-input-operate/index copy 2.vue
deleted file mode 100644
index 14e185a6996..00000000000
--- a/ui/src/components/ai-chat/component/chat-input-operate/index copy 2.vue	
+++ /dev/null
@@ -1,625 +0,0 @@
-<template>
-  <div class="ai-chat__operate p-16-24">
-    <slot name="operateBefore" />
-    <div class="operate-textarea">
-      <el-scrollbar max-height="136">
-        <div
-          class="p-8-12"
-          v-loading="localLoading"
-          v-if="
-            uploadDocumentList.length ||
-            uploadImageList.length ||
-            uploadAudioList.length ||
-            uploadVideoList.length
-          "
-        >
-          <el-row :gutter="10">
-            <el-col
-              v-for="(item, index) in uploadDocumentList"
-              :key="index"
-              :xs="24"
-              :sm="props.type === 'debug-ai-chat' ? 24 : 12"
-              :md="props.type === 'debug-ai-chat' ? 24 : 12"
-              :lg="props.type === 'debug-ai-chat' ? 24 : 12"
-              :xl="props.type === 'debug-ai-chat' ? 24 : 12"
-              class="mb-8"
-            >
-              <el-card
-                shadow="never"
-                style="--el-card-padding: 8px; max-width: 100%"
-                class="file cursor"
-              >
-                <div
-                  class="flex align-center"
-                  @mouseenter.stop="mouseenter(item)"
-                  @mouseleave.stop="mouseleave()"
-                >
-                  <div
-                    @click="deleteFile(index, 'document')"
-                    class="delete-icon color-secondary"
-                    v-if="showDelete === item.url"
-                  >
-                    <el-icon>
-                      <CircleCloseFilled />
-                    </el-icon>
-                  </div>
-                  <img :src="getImgUrl(item && item?.name)" alt="" width="24" />
-                  <div class="ml-4 ellipsis-1" :title="item && item?.name">
-                    {{ item && item?.name }}
-                  </div>
-                </div>
-              </el-card>
-            </el-col>
-
-            <el-col
-              :xs="24"
-              :sm="props.type === 'debug-ai-chat' ? 24 : 12"
-              :md="props.type === 'debug-ai-chat' ? 24 : 12"
-              :lg="props.type === 'debug-ai-chat' ? 24 : 12"
-              :xl="props.type === 'debug-ai-chat' ? 24 : 12"
-              class="mb-8"
-              v-for="(item, index) in uploadAudioList"
-              :key="index"
-            >
-              <el-card shadow="never" style="--el-card-padding: 8px" class="file cursor">
-                <div
-                  class="flex align-center"
-                  @mouseenter.stop="mouseenter(item)"
-                  @mouseleave.stop="mouseleave()"
-                >
-                  <div
-                    @click="deleteFile(index, 'audio')"
-                    class="delete-icon color-secondary"
-                    v-if="showDelete === item.url"
-                  >
-                    <el-icon>
-                      <CircleCloseFilled />
-                    </el-icon>
-                  </div>
-                  <img :src="getImgUrl(item && item?.name)" alt="" width="24" />
-                  <div class="ml-4 ellipsis-1" :title="item && item?.name">
-                    {{ item && item?.name }}
-                  </div>
-                </div>
-              </el-card>
-            </el-col>
-          </el-row>
-          <el-space wrap>
-            <template v-for="(item, index) in uploadImageList" :key="index">
-              <div
-                class="file cursor border border-r-4"
-                v-if="item.url"
-                @mouseenter.stop="mouseenter(item)"
-                @mouseleave.stop="mouseleave()"
-              >
-                <div
-                  @click="deleteFile(index, 'image')"
-                  class="delete-icon color-secondary"
-                  v-if="showDelete === item.url"
-                >
-                  <el-icon>
-                    <CircleCloseFilled />
-                  </el-icon>
-                </div>
-                <el-image
-                  :src="item.url"
-                  alt=""
-                  fit="cover"
-                  style="width: 40px; height: 40px; display: block"
-                  class="border-r-4"
-                />
-              </div>
-            </template>
-          </el-space>
-        </div>
-      </el-scrollbar>
-      <div class="flex">
-        <el-input
-          ref="quickInputRef"
-          v-model="inputValue"
-          :placeholder="
-            startRecorderTime
-              ? `${$t('chat.inputPlaceholder.speaking')}...`
-              : recorderLoading
-                ? `${$t('chat.inputPlaceholder.recorderLoading')}...`
-                : $t('chat.inputPlaceholder.default')
-          "
-          :autosize="{ minRows: 1, maxRows: isMobile ? 4 : 10 }"
-          type="textarea"
-          :maxlength="100000"
-          @keydown.enter="sendChatHandle($event)"
-        />
-
-        <div class="operate flex align-center">
-          <span v-if="props.applicationDetails.file_upload_enable" class="flex align-center">
-            <el-upload
-              action="#"
-              multiple
-              :auto-upload="false"
-              :show-file-list="false"
-              :accept="getAcceptList()"
-              :on-change="(file: any, fileList: any) => uploadFile(file, fileList)"
-            >
-              <el-tooltip effect="dark" placement="top" popper-class="upload-tooltip-width">
-                <template #content>
-                  <div class="break-all pre-wrap">
-                    {{ $t('chat.uploadFile.label') }}：{{ $t('chat.uploadFile.most')
-                    }}{{ props.applicationDetails.file_upload_setting.maxFiles
-                    }}{{ $t('chat.uploadFile.limit') }}
-                    {{ props.applicationDetails.file_upload_setting.fileLimit }}MB<br />{{
-                      $t('chat.uploadFile.fileType')
-                    }}：{{ getAcceptList().replace(/\./g, '').replace(/,/g, '、').toUpperCase() }}
-                  </div>
-                </template>
-                <el-button text :disabled="checkMaxFilesLimit()" class="mt-4">
-                  <el-icon><Paperclip /></el-icon>
-                </el-button>
-              </el-tooltip>
-            </el-upload>
-            <el-divider direction="vertical" />
-          </span>
-          <span v-if="props.applicationDetails.stt_model_enable" class="flex align-center">
-            <el-button text @click="startRecording" v-if="mediaRecorderStatus">
-              <el-icon>
-                <Microphone />
-              </el-icon>
-            </el-button>
-
-            <div v-else class="operate flex align-center">
-              <el-text type="info"
-                >00:{{ recorderTime < 10 ? `0${recorderTime}` : recorderTime }}</el-text
-              >
-              <el-button text type="primary" @click="stopRecording" :loading="recorderLoading">
-                <AppIcon iconName="app-video-stop"></AppIcon>
-              </el-button>
-            </div>
-            <el-divider v-if="!startRecorderTime && !recorderLoading" direction="vertical" />
-          </span>
-
-          <el-button
-            v-if="!startRecorderTime && !recorderLoading"
-            text
-            class="sent-button"
-            :disabled="isDisabledChat || loading"
-            @click="sendChatHandle"
-          >
-            <img v-show="isDisabledChat || loading" src="@/assets/icon_send.svg" alt="" />
-            <SendIcon v-show="!isDisabledChat && !loading" />
-          </el-button>
-        </div>
-      </div>
-    </div>
-    <div class="text-center" v-if="applicationDetails.disclaimer" style="margin-top: 8px">
-      <el-text type="info" v-if="applicationDetails.disclaimer" style="font-size: 12px">
-        <auto-tooltip :content="applicationDetails.disclaimer_value">
-          {{ applicationDetails.disclaimer_value }}
-        </auto-tooltip>
-      </el-text>
-    </div>
-  </div>
-</template>
-<script setup lang="ts">
-import { ref, computed, onMounted, nextTick } from 'vue'
-import Recorder from 'recorder-core'
-import applicationApi from '@/api/application'
-import { MsgAlert } from '@/utils/message'
-import { type chatType } from '@/api/type/application'
-import { useRoute, useRouter } from 'vue-router'
-import { getImgUrl } from '@/utils/utils'
-import bus from '@/bus'
-import 'recorder-core/src/engine/mp3'
-import 'recorder-core/src/engine/mp3-engine'
-import { MsgWarning } from '@/utils/message'
-import { t } from '@/locales'
-const router = useRouter()
-const route = useRoute()
-const {
-  query: { mode, question }
-} = route as any
-const quickInputRef = ref()
-const props = withDefaults(
-  defineProps<{
-    applicationDetails: any
-    type: 'log' | 'ai-chat' | 'debug-ai-chat'
-    loading: boolean
-    isMobile: boolean
-    appId?: string
-    chatId: string
-    sendMessage: (question: string, other_params_data?: any, chat?: chatType) => void
-    openChatId: () => Promise<string>
-  }>(),
-  {
-    applicationDetails: () => ({}),
-    available: true
-  }
-)
-const emit = defineEmits(['update:chatId', 'update:loading'])
-const chartOpenId = ref<string>()
-const chatId_context = computed({
-  get: () => {
-    if (chartOpenId.value) {
-      return chartOpenId.value
-    }
-    return props.chatId
-  },
-  set: (v) => {
-    chartOpenId.value = v
-    emit('update:chatId', v)
-  }
-})
-const localLoading = computed({
-  get: () => {
-    return props.loading
-  },
-  set: (v) => {
-    emit('update:loading', v)
-  }
-})
-
-const imageExtensions = ['jpg', 'jpeg', 'png', 'gif', 'bmp']
-const documentExtensions = ['pdf', 'docx', 'txt', 'xls', 'xlsx', 'md', 'html', 'csv']
-const videoExtensions = ['mp4', 'avi', 'mov', 'mkv', 'flv']
-const audioExtensions = ['mp3', 'wav', 'ogg', 'aac', 'm4a']
-
-const getAcceptList = () => {
-  const { image, document, audio, video } = props.applicationDetails.file_upload_setting
-  let accepts: any = []
-  if (image) {
-    accepts = [...imageExtensions]
-  }
-  if (document) {
-    accepts = [...accepts, ...documentExtensions]
-  }
-  if (audio) {
-    accepts = [...accepts, ...audioExtensions]
-  }
-  if (video) {
-    accepts = [...accepts, ...videoExtensions]
-  }
-
-  if (accepts.length === 0) {
-    return `.${t('chat.uploadFile.tipMessage')}`
-  }
-  return accepts.map((ext: any) => '.' + ext).join(',')
-}
-
-const checkMaxFilesLimit = () => {
-  return (
-    props.applicationDetails.file_upload_setting.maxFiles <=
-    uploadImageList.value.length +
-      uploadDocumentList.value.length +
-      uploadAudioList.value.length +
-      uploadVideoList.value.length
-  )
-}
-
-const uploadFile = async (file: any, fileList: any) => {
-  const { maxFiles, fileLimit } = props.applicationDetails.file_upload_setting
-  // 单次上传文件数量限制
-  const file_limit_once =
-    uploadImageList.value.length +
-    uploadDocumentList.value.length +
-    uploadAudioList.value.length +
-    uploadVideoList.value.length
-  if (file_limit_once >= maxFiles) {
-    MsgWarning(t('chat.uploadFile.limitMessage1') + maxFiles + t('chat.uploadFile.limitMessage2'))
-    fileList.splice(0, fileList.length)
-    return
-  }
-  if (fileList.filter((f: any) => f.size > fileLimit * 1024 * 1024).length > 0) {
-    // MB
-    MsgWarning(t('chat.uploadFile.sizeLimit') + fileLimit + 'MB')
-    fileList.splice(0, fileList.length)
-    return
-  }
-
-  const formData = new FormData()
-  formData.append('file', file.raw, file.name)
-  //
-  const extension = file.name.split('.').pop().toLowerCase() // 获取文件后缀名并转为小写
-
-  if (imageExtensions.includes(extension)) {
-    uploadImageList.value.push(file)
-  } else if (documentExtensions.includes(extension)) {
-    uploadDocumentList.value.push(file)
-  } else if (videoExtensions.includes(extension)) {
-    uploadVideoList.value.push(file)
-  } else if (audioExtensions.includes(extension)) {
-    uploadAudioList.value.push(file)
-  }
-
-  if (!chatId_context.value) {
-    const res = await props.openChatId()
-    chatId_context.value = res
-  }
-
-  if (props.type === 'debug-ai-chat') {
-    formData.append('debug', 'true')
-  } else {
-    formData.append('debug', 'false')
-  }
-
-  applicationApi
-    .uploadFile(
-      props.applicationDetails.id as string,
-      chatId_context.value as string,
-      formData,
-      localLoading
-    )
-    .then((response) => {
-      fileList.splice(0, fileList.length)
-      uploadImageList.value.forEach((file: any) => {
-        const f = response.data.filter((f: any) => f.name === file.name)
-        if (f.length > 0) {
-          file.url = f[0].url
-          file.file_id = f[0].file_id
-        }
-      })
-      uploadDocumentList.value.forEach((file: any) => {
-        const f = response.data.filter((f: any) => f.name === file.name)
-        if (f.length > 0) {
-          file.url = f[0].url
-          file.file_id = f[0].file_id
-        }
-      })
-      uploadAudioList.value.forEach((file: any) => {
-        const f = response.data.filter((f: any) => f.name === file.name)
-        if (f.length > 0) {
-          file.url = f[0].url
-          file.file_id = f[0].file_id
-        }
-      })
-      uploadVideoList.value.forEach((file: any) => {
-        const f = response.data.filter((f: any) => f.name === file.name)
-        if (f.length > 0) {
-          file.url = f[0].url
-          file.file_id = f[0].file_id
-        }
-      })
-      if (!inputValue.value && uploadImageList.value.length > 0) {
-        inputValue.value = t('chat.uploadFile.imageMessage')
-      }
-    })
-}
-const recorderTime = ref(0)
-const startRecorderTime = ref(false)
-const recorderLoading = ref(false)
-const inputValue = ref<string>('')
-const uploadImageList = ref<Array<any>>([])
-const uploadDocumentList = ref<Array<any>>([])
-const uploadVideoList = ref<Array<any>>([])
-const uploadAudioList = ref<Array<any>>([])
-const mediaRecorderStatus = ref(true)
-const showDelete = ref('')
-
-// 定义响应式引用
-const mediaRecorder = ref<any>(null)
-const isDisabledChat = computed(
-  () => !(inputValue.value.trim() && (props.appId || props.applicationDetails?.name))
-)
-
-// 开始录音
-const startRecording = async () => {
-  try {
-    // 取消录音控制台日志
-    Recorder.CLog = function () {}
-    mediaRecorderStatus.value = false
-    handleTimeChange()
-    mediaRecorder.value = new Recorder({
-      type: 'mp3',
-      bitRate: 128,
-      sampleRate: 16000
-    })
-
-    mediaRecorder.value.open(
-      () => {
-        mediaRecorder.value.start()
-      },
-      (err: any) => {
-        MsgAlert(
-          t('common.tip'),
-          `${t('chat.tip.recorderTip')}
-    <img src="${new URL(`@/assets/tipIMG.jpg`, import.meta.url).href}" style="width: 100%;" />`,
-          {
-            confirmButtonText: t('chat.tip.confirm'),
-            dangerouslyUseHTMLString: true,
-            customClass: 'record-tip-confirm'
-          }
-        )
-      }
-    )
-  } catch (error) {
-    MsgAlert(
-      t('common.tip'),
-      `${t('chat.tip.recorderTip')}
-    <img src="${new URL(`@/assets/tipIMG.jpg`, import.meta.url).href}" style="width: 100%;" />`,
-      {
-        confirmButtonText: t('chat.tip.confirm'),
-        dangerouslyUseHTMLString: true,
-        customClass: 'record-tip-confirm'
-      }
-    )
-  }
-}
-
-// 停止录音
-const stopRecording = () => {
-  startRecorderTime.value = false
-  recorderTime.value = 0
-  if (mediaRecorder.value) {
-    mediaRecorderStatus.value = true
-    mediaRecorder.value.stop(
-      (blob: Blob, duration: number) => {
-        // 测试blob是否能正常播放
-        //  const link = document.createElement('a')
-        //  link.href = window.URL.createObjectURL(blob)
-        //  link.download = 'abc.mp3'
-        //  link.click()
-        uploadRecording(blob) // 上传录音文件
-      },
-      (err: any) => {
-        console.error(`${t('chat.tip.recorderError')}:`, err)
-      }
-    )
-  }
-}
-
-// 上传录音文件
-const uploadRecording = async (audioBlob: Blob) => {
-  try {
-    recorderLoading.value = true
-    const formData = new FormData()
-    formData.append('file', audioBlob, 'recording.mp3')
-    applicationApi
-      .postSpeechToText(props.applicationDetails.id as string, formData, localLoading)
-      .then((response) => {
-        recorderLoading.value = false
-        mediaRecorder.value.close()
-        inputValue.value = typeof response.data === 'string' ? response.data : ''
-        // 自动发送
-        if (props.applicationDetails.stt_autosend) {
-          nextTick(() => {
-            autoSendMessage()
-          })
-        }
-      })
-      .catch((error) => {
-        recorderLoading.value = false
-        console.error(`${t('chat.uploadFile.errorMessage')}:`, error)
-      })
-  } catch (error) {
-    recorderLoading.value = false
-    console.error(`${t('chat.uploadFile.errorMessage')}:`, 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)
-}
-
-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 && !event?.shiftKey && !event?.altKey && !event?.metaKey) {
-    // 如果没有按下组合键，则会阻止默认事件
-    event?.preventDefault()
-    if (!isDisabledChat.value && !props.loading && !event?.isComposing) {
-      if (inputValue.value.trim()) {
-        autoSendMessage()
-      }
-    }
-  } else {
-    // 如果同时按下ctrl/shift/cmd/opt +enter，则会换行
-    insertNewlineAtCursor(event)
-  }
-}
-const insertNewlineAtCursor = (event?: any) => {
-  const textarea = document.querySelector('.el-textarea__inner') as HTMLTextAreaElement
-  const startPos = textarea.selectionStart
-  const endPos = textarea.selectionEnd
-  // 阻止默认行为（避免额外的换行符）
-  event.preventDefault()
-  // 在光标处插入换行符
-  inputValue.value = inputValue.value.slice(0, startPos) + '\n' + inputValue.value.slice(endPos)
-  nextTick(() => {
-    textarea.setSelectionRange(startPos + 1, startPos + 1) // 光标定位到换行后位置
-  })
-}
-
-function deleteFile(index: number, val: string) {
-  if (val === 'image') {
-    uploadImageList.value.splice(index, 1)
-  } else if (val === 'document') {
-    uploadDocumentList.value.splice(index, 1)
-  } else if (val === 'video') {
-    uploadVideoList.value.splice(index, 1)
-  } else if (val === 'audio') {
-    uploadAudioList.value.splice(index, 1)
-  }
-}
-
-function mouseenter(row: any) {
-  showDelete.value = row.url
-}
-
-function mouseleave() {
-  showDelete.value = ''
-}
-
-onMounted(() => {
-  bus.on('chat-input', (message: string) => {
-    inputValue.value = message
-  })
-  if (question) {
-    inputValue.value = decodeURIComponent(question.trim())
-    sendChatHandle()
-    setTimeout(() => {
-      // 获取当前路由信息
-      const route = router.currentRoute.value
-      // 复制query对象
-      const query = { ...route.query }
-      // 删除特定的参数
-      delete query.question
-      const newRoute =
-        Object.entries(query)?.length > 0
-          ? route.path +
-            '?' +
-            Object.entries(query)
-              .map(([key, value]) => `${key}=${value}`)
-              .join('&')
-          : route.path
-
-      history.pushState(null, '', '/ui' + newRoute)
-    }, 100)
-  }
-  setTimeout(() => {
-    if (quickInputRef.value && mode === 'embed') {
-      quickInputRef.value.textarea.style.height = '0'
-    }
-  }, 1800)
-})
-</script>
-<style lang="scss" scope>
-@import '../../index.scss';
-
-.file {
-  position: relative;
-  overflow: inherit;
-
-  .delete-icon {
-    position: absolute;
-    right: -5px;
-    top: -5px;
-    z-index: 1;
-  }
-}
-
-.upload-tooltip-width {
-  width: 300px;
-}
-</style>
diff --git a/ui/src/components/ai-chat/component/chat-input-operate/index.vue b/ui/src/components/ai-chat/component/chat-input-operate/index.vue
index 08cfc8b93d1..5550fcabdfc 100644
--- a/ui/src/components/ai-chat/component/chat-input-operate/index.vue
+++ b/ui/src/components/ai-chat/component/chat-input-operate/index.vue
@@ -114,7 +114,13 @@
         </div>
       </el-scrollbar>
       <div class="flex">
-        <TouchChat v-if="isMicrophone" />
+        <TouchChat
+          v-if="isMicrophone"
+          @TouchStart="startRecording"
+          @TouchEnd="TouchEnd"
+          :time="recorderTime"
+          :start="!mediaRecorderStatus"
+        />
         <el-input
           v-else
           ref="quickInputRef"
@@ -405,6 +411,8 @@ const uploadFile = async (file: any, fileList: any) => {
       }
     })
 }
+
+const intervalId = ref<number | null>(null)
 const recorderTime = ref(0)
 const startRecorderTime = ref(false)
 const recorderLoading = ref(false)
@@ -424,13 +432,21 @@ const isDisabledChat = computed(
 // 移动端语音
 const isMicrophone = ref(false)
 
+const TouchEnd = (bool: Boolean) => {
+  if (bool) {
+    stopRecording()
+  } else {
+    stopTimer()
+    mediaRecorder.value.close()
+    mediaRecorder.value = null
+  }
+}
+
 // 开始录音
 const startRecording = async () => {
   try {
     // 取消录音控制台日志
     Recorder.CLog = function () {}
-    mediaRecorderStatus.value = false
-    handleTimeChange()
     mediaRecorder.value = new Recorder({
       type: 'mp3',
       bitRate: 128,
@@ -440,8 +456,12 @@ const startRecording = async () => {
     mediaRecorder.value.open(
       () => {
         mediaRecorder.value.start()
+        mediaRecorderStatus.value = false
+        handleTimeChange()
       },
       (err: any) => {
+        stopTimer()
+        mediaRecorder.value.close()
         MsgAlert(
           t('common.tip'),
           `${t('chat.tip.recorderTip')}
@@ -465,6 +485,8 @@ const startRecording = async () => {
         customClass: 'record-tip-confirm'
       }
     )
+    mediaRecorder.value.close()
+    stopTimer()
   }
 }
 
@@ -507,6 +529,8 @@ const uploadRecording = async (audioBlob: Blob) => {
           nextTick(() => {
             autoSendMessage()
           })
+        } else {
+          isMicrophone.value = false
         }
       })
       .catch((error) => {
@@ -518,22 +542,36 @@ const uploadRecording = async (audioBlob: Blob) => {
     console.error(`${t('chat.uploadFile.errorMessage')}:`, error)
   }
 }
+
 const handleTimeChange = () => {
   startRecorderTime.value = true
+  recorderTime.value = 0
+  intervalId.value = setInterval(() => {
+    if (!startRecorderTime.value) {
+      clearInterval(intervalId.value!)
+      intervalId.value = null
+      return
+    }
+
+    recorderTime.value++
 
-  setTimeout(() => {
     if (recorderTime.value === 60) {
-      recorderTime.value = 0
       stopRecording()
+      clearInterval(intervalId.value!)
+      intervalId.value = null
       startRecorderTime.value = false
     }
-    if (!startRecorderTime.value) {
-      return
-    }
-    recorderTime.value++
-    handleTimeChange()
   }, 1000)
 }
+// 停止计时的函数
+const stopTimer = () => {
+  if (intervalId.value !== null) {
+    clearInterval(intervalId.value)
+    intervalId.value = null
+    startRecorderTime.value = false
+    mediaRecorderStatus.value = true
+  }
+}
 
 function autoSendMessage() {
   props.sendMessage(inputValue.value, {
@@ -711,6 +749,7 @@ onMounted(() => {
 
 @media only screen and (max-width: 768px) {
   .ai-chat {
+    height: calc(100% - 100px);
     &__operate {
       position: fixed;
       bottom: 0;
@@ -721,4 +760,6 @@ onMounted(() => {
     }
   }
 }
+.chat-pc {
+}
 </style>
diff --git a/ui/src/components/ai-chat/index.scss b/ui/src/components/ai-chat/index.scss
index 9183919e308..52ea5e34999 100644
--- a/ui/src/components/ai-chat/index.scss
+++ b/ui/src/components/ai-chat/index.scss
@@ -1,6 +1,6 @@
 .ai-chat {
   --padding-left: 36px;
-  height: calc(100% - 100px);
+  height: 100%;
   display: flex;
   flex-direction: column;
   box-sizing: border-box;
@@ -24,10 +24,6 @@
       }
     }
   }
-  &.log,
-  &.debug-ai-chat {
-    height: 100%;
-  }
 }
 
 .chat-width {
@@ -40,5 +36,14 @@
     margin: 0 auto;
   }
 }
+
+@media only screen and (max-width: 768px) {
+  .ai-chat {
+    height: calc(100% - 100px);
+  }
+}
 .chat-mobile {
+  .el-button.is-text:not(.is-disabled):hover {
+    background: none;
+  }
 }
diff --git a/ui/src/components/ai-chat/index.vue b/ui/src/components/ai-chat/index.vue
index 4e0e110ec7c..7be1a7e8518 100644
--- a/ui/src/components/ai-chat/index.vue
+++ b/ui/src/components/ai-chat/index.vue
@@ -526,7 +526,7 @@ defineExpose({
   position: absolute;
   z-index: 999;
   right: 50px;
-  bottom: 80px;
+  bottom: 0;
   width: calc(100% - 50px);
   max-width: 400px;
 }
diff --git a/ui/src/layout/hooks/useResize.ts b/ui/src/layout/hooks/useResize.ts
index d1c0a3466fd..3b0e465776d 100644
--- a/ui/src/layout/hooks/useResize.ts
+++ b/ui/src/layout/hooks/useResize.ts
@@ -2,8 +2,8 @@ import { nextTick, onBeforeMount, onMounted, onBeforeUnmount } from 'vue'
 import { useRoute } from 'vue-router'
 import useStore from '@/stores'
 import { DeviceType } from '@/enums/common'
-/** 参考 Bootstrap 的响应式设计 WIDTH = 600 */
-const WIDTH = 600
+/** 参考 Bootstrap 的响应式设计 WIDTH = 768 */
+const WIDTH = 768
 
 /** 根据大小变化重新布局 */
 export default () => {

From 5e88bdd1c9614d02d9e6dca7a3051a0d508c474c Mon Sep 17 00:00:00 2001
From: wangdan-fit2cloud <dan.wang@fit2cloud.com>
Date: Fri, 21 Mar 2025 16:49:41 +0800
Subject: [PATCH 4/4] feat: Optimize the mobile voice interaction experience

---
 .../components/ai-chat/component/chat-input-operate/index.vue   | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/ui/src/components/ai-chat/component/chat-input-operate/index.vue b/ui/src/components/ai-chat/component/chat-input-operate/index.vue
index 5550fcabdfc..a26d7a2a493 100644
--- a/ui/src/components/ai-chat/component/chat-input-operate/index.vue
+++ b/ui/src/components/ai-chat/component/chat-input-operate/index.vue
@@ -527,7 +527,7 @@ const uploadRecording = async (audioBlob: Blob) => {
         // 自动发送
         if (props.applicationDetails.stt_autosend) {
           nextTick(() => {
-            autoSendMessage()
+            autoSendMessage() 
           })
         } else {
           isMicrophone.value = false