af-mobile-client-vue3 1.4.56 → 1.4.57

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "af-mobile-client-vue3",
   "type": "module",
-  "version": "1.4.56",
+  "version": "1.4.57",
   "packageManager": "pnpm@10.13.1",
   "description": "Vue + Vite component lib",
   "engines": {

package/src/App.vue

@@ -99,6 +99,7 @@ input[type='password']::-ms-clear {
 <style scoped>
 .app-wrapper {
   width: 100%;
+  height: 100vh;
   position: relative;
 }
 </style>

package/src/components/common/MateChat/components/MateChatContent.vue

@@ -6,7 +6,6 @@ import MateChatHeader from '@af-mobile-client-vue3/components/common/MateChat/co
 import { PromptList } from '@af-mobile-client-vue3/components/common/MateChat/components/PromptList'
 import { useMateChat } from '@af-mobile-client-vue3/components/common/MateChat/composables/useMateChat'
 import { useDebounceFn } from '@vueuse/core'
-import { Button as VanButton } from 'vant'
 import { computed, nextTick, ref, watch } from 'vue'
 import 'vant/es/image-preview/style'
 
@@ -110,6 +109,7 @@ function handleSelectSession(session: { chatId: string, title: string, lastTime:
       :app-id="props.config.appId"
       :app-key="props.config.appKey"
       @select-session="handleSelectSession"
+      @new-conversation="newConversation"
     />
     <McLayoutContent
       v-if="startPage"
@@ -161,20 +161,13 @@ function handleSelectSession(session: { chatId: string, title: string, lastTime:
         style="flex: 1"
         @item-click="onSubmit($event.label)"
       />
-      <VanButton
-        style="margin-left: auto"
-        icon="add"
-        title="新建对话"
-        size="small"
-        round
-        @click="newConversation"
-      />
     </div>
     <McLayoutSender>
       <McInput
         :value="inputValue"
         placeholder="请输入您的问题，我会为您解答"
         :max-length="2000"
+        :autosize="true"
         @change="(e) => (inputValue = e)"
         @submit="onSubmit"
       />
@@ -186,7 +179,7 @@ function handleSelectSession(session: { chatId: string, title: string, lastTime:
 .chat-card {
   width: 100%;
   max-width: 1200px;
-  height: calc(100% - 40px);
+  height: 100%;
   background: #ffffff;
   border-radius: 24px;
   box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
@@ -205,7 +198,6 @@ function handleSelectSession(session: { chatId: string, title: string, lastTime:
 /* 移动端适配 */
 @media (max-width: 768px) {
   .chat-card {
-    height: calc(100% - 16px);
     border-radius: 16px;
     padding: 8px;
   }

package/src/components/common/MateChat/components/MateChatHeader.vue

@@ -2,12 +2,13 @@
 import type { ChatHistoryItem } from '@af-mobile-client-vue3/components/common/MateChat/types'
 import { getHistories } from '@af-mobile-client-vue3/components/common/MateChat/apiService'
 import { useChatHistoryCache } from '@af-mobile-client-vue3/components/common/MateChat/composables/useChatHistoryCache'
-import { Empty, Icon, Loading, Popup } from 'vant'
+import { Empty, Icon, Loading, Popup, Popover as VanPopover } from 'vant'
 import { ref } from 'vue'
 import 'vant/es/popup/style'
 import 'vant/es/empty/style'
 import 'vant/es/loading/style'
 import 'vant/es/icon/style'
+import 'vant/es/popover/style'
 
 interface Props {
   /**
@@ -47,6 +48,10 @@ interface Emits {
    * 选择某条历史会话
    */
   (e: 'selectSession', session: SessionItem): void
+  /**
+   * 新建对话
+   */
+  (e: 'newConversation'): void
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -58,6 +63,12 @@ const emit = defineEmits<Emits>()
 const showHistory = ref(false)
 const isLoading = ref(false)
 const sessionList = ref<SessionItem[]>([])
+const showMenu = ref(false)
+
+const menuActions: { text: string, key: 'new' | 'history', icon: string }[] = [
+  { text: '新对话', key: 'new', icon: 'add-o' },
+  { text: '历史对话', key: 'history', icon: 'clock-o' },
+]
 
 // 使用历史会话缓存
 const { getCachedHistory, setCachedHistory } = useChatHistoryCache()
@@ -72,6 +83,20 @@ function handleSelectSession(session: SessionItem) {
   showHistory.value = false
 }
 
+/**
+ * 处理下拉菜单点击
+ */
+function handleMenuSelect(action: { text: string, key: 'new' | 'history', icon?: string }) {
+  showMenu.value = false
+  if (action.key === 'new') {
+    emit('newConversation')
+    return
+  }
+  if (action.key === 'history') {
+    handleOpenHistory()
+  }
+}
+
 /**
  * 格式化时间字符串为日期时间字符串
  */
@@ -139,11 +164,24 @@ async function fetchSessions() {
 
 <template>
   <div class="matechat-header-wrapper">
-    <McHeader :logo-img="showTitle ? props.logoImage : ''" :title="showTitle ? props.title : ''" :logo-clickable="false">
+    <McHeader
+      :logo-img="showTitle ? props.logoImage : ''"
+      :title="showTitle ? props.title : ''"
+      :logo-clickable="false"
+    >
       <template #operationArea>
-        <div class="matechat-header-history-btn" @click="handleOpenHistory">
-          <Icon name="clock-o" size="16" />
-        </div>
+        <VanPopover
+          v-model:show="showMenu"
+          placement="bottom-end"
+          :actions="menuActions"
+          @select="handleMenuSelect"
+        >
+          <template #reference>
+            <div class="matechat-header-history-btn">
+              <Icon name="ellipsis" size="16" />
+            </div>
+          </template>
+        </VanPopover>
       </template>
     </McHeader>
 
@@ -204,15 +242,17 @@ async function fetchSessions() {
   justify-content: center;
   width: 32px;
   height: 32px;
-  border-radius: 50%;
-  background-color: rgba(255, 255, 255, 0.8);
+  border-radius: 8px;
+  background-color: rgba(255, 255, 255, 0.9);
+  border: 1px solid rgba(0, 0, 0, 0.08);
+  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.12);
   cursor: pointer;
   transition: all 0.2s ease;
 
   &:hover {
-    background-color: rgba(255, 255, 255, 1);
-    transform: translateY(-1px);
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+    background-color: #ffffff;
+    transform: translateY(-0.5px);
+    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.16);
   }
 }
 
@@ -221,7 +261,6 @@ async function fetchSessions() {
     width: 320px;
     max-width: 80vw;
     background-color: #ffffff;
-    border-radius: 16px;
     box-shadow: 0 12px 32px rgba(0, 0, 0, 0.15);
     padding: 16px 16px 12px;
     box-sizing: border-box;
@@ -260,7 +299,7 @@ async function fetchSessions() {
 
     &__item {
       padding: 10px 8px;
-      border-radius: 8px;
+      border-radius: 0;
       cursor: pointer;
       transition: all 0.2s ease;
 

package/src/components/common/MateChat/composables/useMateChat.ts

@@ -138,97 +138,77 @@ export function useMateChat(config: MateChatConfig) {
       return
     }
 
-    // 流式：使用 FastGPT SSE，增量更新最后一条模型消息内容，并在前缀为 {"msgType":"transfer"} 时转人工
-    const transferPrefix = '{"msgType":"transfer"'
-    let checkedTransfer = false
-    let transferHandled = false
-    let prefixBuffer = ''
+    // 流式：使用 FastGPT SSE，增量更新最后一条模型消息内容
+    // 规则：
+    // 1）每次收到 chunk 都立即累加到 msg.content，保证实时流式效果
+    // 2）在累加后的内容上做一次“是否为转人工 JSON 消息”的前缀粗判：以 {"msgType 开头
+    // 3）如果判断为转人工，则保持 loading 状态，等待 onComplete 再统一处理整条消息
+    // 4）如果判断不是转人工，则当作普通文本流式展示，onComplete 时仅结束 loading
+    const transferPrefix = '{"msgType'
+    let checkedTransfer = false // 是否已经做过类型判定
+    let isTransferMessage = false // 是否判定为转人工消息
 
     const callbacks: ChatStreamCallbacks = {
       onMessage(chunk) {
-        if (transferHandled) {
+        const msg = messages.value[loadingMessageIndex]
+        if (!msg) {
           return
         }
+        // 1. 实时累加内容，保证流式体验
+        msg.content += chunk
 
-        // 尚未判断是否为转人工前缀
+        // 2. 如果还没有做过类型判定，基于当前累积内容做一次前缀粗判
         if (!checkedTransfer) {
-          const trimmed = chunk.trimStart()
-          if (!trimmed) {
-            // 纯空白，等待下一帧
+          const trimmed = msg.content.trimStart()
+          // 内容太短，无法判断，继续等待更多 chunk
+          if (!trimmed || trimmed.length < transferPrefix.length) {
             return
           }
 
-          // 第一个有效字符不是 { ，本次不会是转人工 JSON，后续直接按普通文本处理
-          if (!prefixBuffer && trimmed[0] !== '{') {
-            checkedTransfer = true
-            const msg = messages.value[loadingMessageIndex]
-            if (!msg) {
-              return
-            }
-            msg.content += chunk
-            msg.loading = true
-            return
-          }
-
-          // 有可能是 JSON，累积前缀做精准匹配
-          prefixBuffer += trimmed
-
-          // 如果当前前缀还是 transferPrefix 的前缀，继续等后续 chunk
-          if (transferPrefix.startsWith(prefixBuffer)) {
-            // 还没完整匹配上整个标识，继续等待
-            if (prefixBuffer.length < transferPrefix.length) {
-              return
-            }
+          if (trimmed.startsWith(transferPrefix)) {
+            // 以 {"msgType 开头，标记为“可能是转人工消息”
+            isTransferMessage = true
           }
-
-          if (prefixBuffer.startsWith(transferPrefix)) {
-            // 确认是转人工：移除 loading 模型气泡，插入客服气泡
-            messages.value.splice(loadingMessageIndex, 1)
-            messages.value.push({
-              from: 'service',
-              content: '您好，客服xxx工号xxx为你服务。功能开发中，敬请期待。',
-            })
-            transferHandled = true
-            checkedTransfer = true
-            // 更新缓存：追加用户消息和客服消息（在 onComplete 中统一处理）
-            return
+          else {
+            // 不以 {"msgType 开头，当作普通文本处理
+            isTransferMessage = false
+            msg.loading = false
           }
-
-          // 前缀与约定不匹配，当作普通内容处理，并不再尝试转人工识别
           checkedTransfer = true
-          const msg = messages.value[loadingMessageIndex]
-          if (!msg) {
-            return
-          }
-          msg.content += prefixBuffer
-          msg.loading = true
-          prefixBuffer = ''
-          return
         }
-
-        // 已经判断过不会转人工，正常流式追加内容
-        const msg = messages.value[loadingMessageIndex]
-        if (!msg) {
-          return
-        }
-        msg.content += chunk
-        msg.loading = true
       },
       onComplete() {
-        if (transferHandled) {
-          // 转人工情况：更新缓存
-          appendMessages(chatId.value, [
-            { from: 'user', content: evt },
-            { from: 'service', content: '您好，客服xxx工号xxx为你服务。功能开发中，敬请期待。' },
-          ])
-          return
-        }
         const msg = messages.value[loadingMessageIndex]
         if (!msg) {
           return
         }
+        // 根据前面判定结果决定如何处理整条消息
+        if (isTransferMessage) {
+          // 尝试按 JSON 解析，判断是否真的是转人工指令
+          try {
+            const parsed = JSON.parse(msg.content.trim())
+            if (parsed && parsed.msgType === 'transfer') {
+              // 确认为转人工：移除模型气泡，插入客服气泡
+              messages.value.splice(loadingMessageIndex, 1)
+              messages.value.push({
+                from: 'service',
+                content: '您好，客服xxx工号xxx为你服务。功能开发中，敬请期待。',
+              })
+              // 转人工情况：更新缓存
+              appendMessages(chatId.value, [
+                { from: 'user', content: evt },
+                { from: 'service', content: '您好，客服xxx工号xxx为你服务。功能开发中，敬请期待。' },
+              ])
+              return
+            }
+          }
+          catch {
+            // 解析失败则回退为普通文本处理
+          }
+        }
+
+        // 普通消息：结束 loading，按完整文本渲染并写入缓存
         msg.loading = false
-        // 流式完成后更新缓存：追加用户消息和完整的模型回复
         appendMessages(chatId.value, [
           { from: 'user', content: evt },
           { from: 'model', content: msg.content, loading: false },

package/src/components/common/MateChat/index.vue

@@ -366,6 +366,7 @@ onMounted(() => {
 #mate-chat-view {
   /* 外层渐变背景容器 */
   width: 100%;
+  height: 100%;
   min-height: 100%;
   /* 背景色通过 :style 绑定从配置中获取 */
   padding: 20px;