feat(agent): stream admin debug preview

ai_knowledge_base_v2/apps/admin-web/src/components/AgentManagementView.vue

@@ -1,11 +1,12 @@
 <script setup lang="ts">
 import { ElMessage, ElMessageBox } from "element-plus";
-import { computed, onMounted, reactive, ref, watch } from "vue";
+import { computed, nextTick, onMounted, reactive, ref, watch } from "vue";
 
-import { api } from "../services/api";
-import type { AgentDebugResult, AgentRuntimeConfig, KnowledgeItem, ModelItem, PromptDetail, PromptHistoryItem } from "../types/api";
+import { api, streamDebugAgent } from "../services/api";
+import type { AgentRuntimeConfig, KnowledgeItem, ModelItem, PromptDetail, PromptHistoryItem } from "../types/api";
 import AgentGenerationParameters from "./AgentGenerationParameters.vue";
 import AdminPagination from "./AdminPagination.vue";
+import StreamingMarkdownMessage from "./StreamingMarkdownMessage.vue";
 
 const props = defineProps<{ previewKnowledgeId?: number | null }>();
 const emit = defineEmits<{ consumedPreview: [] }>();
@@ -15,6 +16,8 @@ const promptSaving = ref(false);
 const runtimeSaving = ref(false);
 const historyLoading = ref(false);
 const agentDebugging = ref(false);
+const agentDebugAbortController = ref<AbortController | null>(null);
+const agentPreviewChat = ref<HTMLElement | null>(null);
 const activeConfigTab = ref("prompt");
 const prompt = ref<PromptDetail | null>(null);
 const promptContent = ref("");
@@ -27,7 +30,7 @@ const historyDetailOpen = ref(false);
 const selectedHistory = ref<PromptDetail | null>(null);
 const historyDetailLoading = ref(false);
 const agentDebugTrace = ref<Record<string, any>[]>([]);
-const agentPreviewMessages = ref<{ role: "user" | "assistant" | "system"; content: string }[]>([
+const agentPreviewMessages = ref<{ role: "user" | "assistant" | "system"; content: string; streaming?: boolean }[]>([
   { role: "assistant", content: "选择模型和知识库后，可以在这里调试 Agent 的真实问答效果。" },
 ]);
 
@@ -254,56 +257,77 @@ async function restoreSelectedHistory() {
 }
 
 async function debugAgent() {
+  if (agentDebugging.value) return;
   if (!agentForm.modelId) return ElMessage.error("请选择调试模型");
   if (!agentForm.question.trim()) return ElMessage.error("请输入调试问题");
   if (!promptContent.value.trim()) return ElMessage.error("主提示词不能为空");
   const question = agentForm.question.trim();
   agentPreviewMessages.value.push({ role: "user", content: question });
+  agentPreviewMessages.value.push({ role: "assistant", content: "", streaming: true });
+  const assistantIndex = agentPreviewMessages.value.length - 1;
+  const currentAssistant = () => agentPreviewMessages.value[assistantIndex];
   agentForm.question = "";
   agentDebugging.value = true;
+  agentDebugTrace.value = [];
+  agentDebugAbortController.value = new AbortController();
+  scrollAgentPreview();
   try {
-    const result: AgentDebugResult = await api.debugAgent({
-      promptContent: promptContent.value,
-      modelId: agentForm.modelId,
-      knowledgeIds: agentForm.knowledgeIds,
-      question,
-      temperature: agentForm.temperature,
-      topP: agentForm.topP,
-      topK: agentForm.topK,
-      presencePenalty: agentForm.presencePenalty,
-      frequencyPenalty: agentForm.frequencyPenalty,
-      maxToken: agentForm.maxToken,
-    });
-    if (!result.ok) {
-      agentPreviewMessages.value.push({ role: "assistant", content: result.message });
-      return ElMessage.error(result.message);
-    }
-    agentPreviewMessages.value.push({ role: "assistant", content: result.answer });
-    agentDebugTrace.value = result.retrievalTrace || [];
-    ElMessage.success(result.message);
+    await streamDebugAgent(
+      {
+        promptContent: promptContent.value,
+        modelId: agentForm.modelId,
+        knowledgeIds: agentForm.knowledgeIds,
+        question,
+        temperature: agentForm.temperature,
+        topP: agentForm.topP,
+        topK: agentForm.topK,
+        presencePenalty: agentForm.presencePenalty,
+        frequencyPenalty: agentForm.frequencyPenalty,
+        maxToken: agentForm.maxToken,
+      },
+      (chunk) => {
+        currentAssistant().content += chunk;
+        scrollAgentPreview();
+      },
+      (result) => {
+        agentDebugTrace.value = result.retrievalTrace || [];
+        ElMessage.success(result.message || "Agent 调试完成");
+      },
+      agentDebugAbortController.value.signal,
+    );
+    if (!currentAssistant().content.trim()) currentAssistant().content = "模型未返回正式回答。";
   } catch (error) {
-    const message = errorMessage(error, "Agent 调试失败");
-    agentPreviewMessages.value.push({ role: "assistant", content: message });
-    ElMessage.error(message);
+    if (error instanceof DOMException && error.name === "AbortError") {
+      currentAssistant().content ||= "已停止生成";
+    } else {
+      const message = errorMessage(error, "Agent 调试失败");
+      currentAssistant().content ||= message;
+      ElMessage.error(message);
+    }
   } finally {
+    currentAssistant().streaming = false;
     agentDebugging.value = false;
+    agentDebugAbortController.value = null;
+    scrollAgentPreview();
   }
 }
 
+function stopDebugAgent() {
+  agentDebugAbortController.value?.abort();
+}
+
+function scrollAgentPreview() {
+  void nextTick(() => {
+    const element = agentPreviewChat.value;
+    if (element) element.scrollTop = element.scrollHeight;
+  });
+}
+
 function clearAgentPreview() {
   agentPreviewMessages.value = [{ role: "assistant", content: "预览已清空，可以继续发起新的 Agent 调试。" }];
   agentDebugTrace.value = [];
 }
 
-function agentMessageParts(content: string) {
-  const matched = content.match(/<think>([\s\S]*?)<\/think>/i);
-  if (!matched) return { reasoning: "", answer: content };
-  return {
-    reasoning: matched[1].trim(),
-    answer: content.replace(matched[0], "").trim() || "模型未返回正式回答。",
-  };
-}
-
 function changeTypeLabel(value?: string) {
   return ({ save: "手动保存", reset: "恢复默认", restore: "历史恢复", default: "系统默认" } as Record<string, string>)[value || ""] || "保存";
 }
@@ -443,25 +467,23 @@ function errorMessage(error: unknown, fallback: string) {
     <aside class="agent-preview-panel">
       <div class="agent-preview-head">
         <div><h3>调试预览</h3><small>{{ selectedKnowledgeSummary }}</small></div>
-        <div class="agent-preview-head-actions"><span>{{ selectedModelName }}</span><el-button link @click="clearAgentPreview">清空</el-button></div>
+        <div class="agent-preview-head-actions"><span>{{ selectedModelName }}</span><el-button link :disabled="agentDebugging" @click="clearAgentPreview">清空</el-button></div>
       </div>
-      <div class="agent-preview-chat">
+      <div ref="agentPreviewChat" class="agent-preview-chat">
         <article v-for="(message, index) in agentPreviewMessages" :key="`${message.role}-${index}`" class="agent-preview-message-row" :class="message.role">
           <div class="agent-preview-avatar">{{ message.role === "user" ? "你" : "AI" }}</div>
           <div class="agent-preview-bubble">
             <strong>{{ message.role === "user" ? "你" : "Agent" }}</strong>
             <template v-if="message.role === 'assistant'">
-              <details v-if="agentMessageParts(message.content).reasoning" class="agent-preview-thinking"><summary>思考过程</summary><pre>{{ agentMessageParts(message.content).reasoning }}</pre></details>
-              <pre>{{ agentMessageParts(message.content).answer }}</pre>
+              <StreamingMarkdownMessage :content="message.content" :streaming="message.streaming" />
             </template>
             <pre v-else>{{ message.content }}</pre>
           </div>
         </article>
-        <article v-if="agentDebugging" class="agent-preview-message-row assistant thinking"><div class="agent-preview-avatar">AI</div><div class="agent-preview-bubble"><strong>Agent</strong><pre>正在思考中...</pre></div></article>
       </div>
       <div class="agent-preview-composer">
-        <el-input v-model="agentForm.question" type="textarea" :rows="2" resize="none" placeholder="向 Agent 发送测试问题；Enter 发送，Shift+Enter 换行" @keydown.enter.exact.prevent="debugAgent" />
-        <el-button type="primary" :loading="agentDebugging" @click="debugAgent">发送</el-button>
+        <el-input v-model="agentForm.question" type="textarea" :rows="2" resize="none" :disabled="agentDebugging" placeholder="向 Agent 发送测试问题；Enter 发送，Shift+Enter 换行" @keydown.enter.exact.prevent="debugAgent" />
+        <el-button :type="agentDebugging ? 'danger' : 'primary'" @click="agentDebugging ? stopDebugAgent() : debugAgent()">{{ agentDebugging ? '停止' : '发送' }}</el-button>
       </div>
     </aside>
 

ai_knowledge_base_v2/apps/admin-web/src/components/StreamingMarkdownMessage.vue

@@ -0,0 +1,53 @@
+<script setup lang="ts">
+import MarkdownIt from "markdown-it";
+import { computed } from "vue";
+
+const props = defineProps<{
+  content: string;
+  streaming?: boolean;
+}>();
+
+const markdown = new MarkdownIt({ breaks: true, html: false, linkify: true });
+const answer = computed(() => stripStreamingReasoning(props.content).replace(/^\s+/, ""));
+const renderedContent = computed(() => answer.value.trim() ? markdown.render(answer.value) : "");
+
+function stripStreamingReasoning(content: string) {
+  const lower = content.toLowerCase();
+  let visible = "";
+  let cursor = 0;
+  let reasoningDepth = 0;
+  while (cursor < content.length) {
+    const tagStart = content.indexOf("<", cursor);
+    if (tagStart === -1) {
+      if (reasoningDepth === 0) visible += content.slice(cursor);
+      break;
+    }
+    if (reasoningDepth === 0) visible += content.slice(cursor, tagStart);
+    const tail = lower.slice(tagStart);
+    const openTag = tail.match(/^<think(?:\s[^>]*)?>/);
+    if (openTag) {
+      reasoningDepth += 1;
+      cursor = tagStart + openTag[0].length;
+      continue;
+    }
+    const closeTag = tail.match(/^<\/think\s*>/);
+    if (closeTag) {
+      reasoningDepth = Math.max(0, reasoningDepth - 1);
+      cursor = tagStart + closeTag[0].length;
+      continue;
+    }
+    if ("<think".startsWith(tail) || "</think>".startsWith(tail)) break;
+    if (reasoningDepth === 0) visible += "<";
+    cursor = tagStart + 1;
+  }
+  return visible;
+}
+</script>
+
+<template>
+  <div v-if="renderedContent" class="agent-preview-markdown" v-html="renderedContent"></div>
+  <div v-else-if="streaming" class="agent-preview-generation-state">
+    <span></span><span></span><span></span>
+    思考中
+  </div>
+</template>