Browse Source

流式输出,不显示占位消息

zhangwl 19 hours ago
parent
commit
cd4b992445
1 changed files with 5 additions and 5 deletions
  1. 5 5
      chat-ai-ui-main/src/views/ChatView.vue

+ 5 - 5
chat-ai-ui-main/src/views/ChatView.vue

@@ -90,9 +90,9 @@ watch(
           </div>
 
           <!-- 聊天信息 -->
+          <template v-for="(msg, index) in chatStore.messages" :key="index">
           <div
-            v-for="(msg, index) in chatStore.messages"
-            :key="index"
+            v-if="!msg.isStreaming || msg.displayContent"
             class="flex items-start"
             :class="msg.role === 'user' ? 'justify-end' : 'justify-start'"
           >
@@ -113,7 +113,6 @@ watch(
               "
             >
               <div v-html="formatMessage(msg.displayContent || msg.content, msg.role)"></div>
-              <!-- 打字光标 -->
               <span v-if="msg.isStreaming" class="typing-cursor"></span>
             </div>
             <!-- 用户 -->
@@ -123,9 +122,10 @@ watch(
               </div>
             </div>
           </div>
+          </template>
 
-          <!-- 等待回复过程 -->
-          <div v-if="chatStore.isLoading" class="flex justify-start">
+          <!-- 等待回复过程:仅在 loading 且还没有流式内容时显示 -->
+          <div v-if="chatStore.isLoading && !chatStore.messages.some(m => m.isStreaming && m.displayContent)" class="flex justify-start">
             <div class="flex-shrink-0 mr-3">
               <div class="w-8 h-8 bg-blue-600 rounded-full flex items-center justify-center text-sm font-semibold">
                 AI