feat(agent): stream admin debug preview
This commit is contained in:
@@ -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>
|
||||
|
||||
|
||||
@@ -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>
|
||||
@@ -2,6 +2,7 @@ import type {
|
||||
AdminProfile,
|
||||
AdminUser,
|
||||
AgentDebugResult,
|
||||
AgentDebugStreamComplete,
|
||||
AgentGenerationConfig,
|
||||
AgentRuntimeConfig,
|
||||
AiLogRecord,
|
||||
@@ -217,3 +218,48 @@ export const api = {
|
||||
clearFeishuCache: () =>
|
||||
request<{ cleared: number; message: string }>("/admin/feishu/cache/clear", { method: "POST", body: "{}" }),
|
||||
};
|
||||
|
||||
export async function streamDebugAgent(
|
||||
payload: Record<string, unknown>,
|
||||
onChunk: (chunk: string) => void,
|
||||
onComplete: (result: AgentDebugStreamComplete) => void,
|
||||
signal?: AbortSignal,
|
||||
) {
|
||||
const token = getToken();
|
||||
const response = await fetch(`${API_BASE}/admin/agent/debug/stream`, {
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
...(token ? { Authorization: `Bearer ${token}` } : {}),
|
||||
},
|
||||
body: JSON.stringify(payload),
|
||||
signal,
|
||||
});
|
||||
if (!response.ok || !response.body) {
|
||||
const body = await readApiResponse<unknown>(response);
|
||||
throw new Error(body.detail || body.message || "Agent 调试连接失败");
|
||||
}
|
||||
const reader = response.body.getReader();
|
||||
const decoder = new TextDecoder("utf-8");
|
||||
let buffer = "";
|
||||
while (true) {
|
||||
const { done, value } = await reader.read();
|
||||
if (done) break;
|
||||
buffer += decoder.decode(value, { stream: true });
|
||||
const events = buffer.split(/\r?\n\r?\n/);
|
||||
buffer = events.pop() ?? "";
|
||||
for (const event of events) {
|
||||
const dataLines = event.split(/\r?\n/).filter((line) => line.startsWith("data:"));
|
||||
if (!dataLines.length) continue;
|
||||
const data = dataLines.map((line) => line.slice(5).trimStart()).join("\n").trim();
|
||||
if (data === "[DONE]") return;
|
||||
const parsed = JSON.parse(data) as AgentDebugStreamComplete & {
|
||||
type?: string;
|
||||
content?: string;
|
||||
};
|
||||
if (parsed.type === "error") throw new Error(parsed.message || "Agent 调试失败");
|
||||
if (parsed.type === "content" && parsed.content) onChunk(parsed.content);
|
||||
if (parsed.type === "complete") onComplete(parsed);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1380,6 +1380,115 @@ textarea {
|
||||
line-height: 1.75;
|
||||
}
|
||||
|
||||
.agent-preview-markdown {
|
||||
overflow-wrap: anywhere;
|
||||
color: #263832;
|
||||
font-size: 14px;
|
||||
line-height: 1.75;
|
||||
}
|
||||
|
||||
.agent-preview-markdown > :first-child { margin-top: 0; }
|
||||
.agent-preview-markdown > :last-child { margin-bottom: 0; }
|
||||
.agent-preview-markdown p { margin: 0 0 10px; }
|
||||
|
||||
.agent-preview-markdown h1,
|
||||
.agent-preview-markdown h2,
|
||||
.agent-preview-markdown h3,
|
||||
.agent-preview-markdown h4 {
|
||||
margin: 16px 0 8px;
|
||||
color: #1f352e;
|
||||
line-height: 1.45;
|
||||
}
|
||||
|
||||
.agent-preview-markdown h1 { font-size: 19px; }
|
||||
.agent-preview-markdown h2 { font-size: 17px; }
|
||||
.agent-preview-markdown h3,
|
||||
.agent-preview-markdown h4 { font-size: 15px; }
|
||||
|
||||
.agent-preview-markdown ul,
|
||||
.agent-preview-markdown ol {
|
||||
margin: 8px 0 10px;
|
||||
padding-left: 22px;
|
||||
}
|
||||
|
||||
.agent-preview-markdown li + li { margin-top: 5px; }
|
||||
.agent-preview-markdown strong { color: #1f352e; font-weight: 700; }
|
||||
|
||||
.agent-preview-markdown blockquote {
|
||||
margin: 10px 0;
|
||||
padding: 7px 10px;
|
||||
border-left: 3px solid #8cc7b6;
|
||||
background: #eef7f4;
|
||||
color: #526b63;
|
||||
}
|
||||
|
||||
.agent-preview-markdown code {
|
||||
padding: 2px 5px;
|
||||
border-radius: 5px;
|
||||
background: #edf5f2;
|
||||
color: #0f735d;
|
||||
font-family: "SFMono-Regular", Consolas, monospace;
|
||||
font-size: 0.92em;
|
||||
}
|
||||
|
||||
.agent-preview-markdown pre {
|
||||
max-width: 100%;
|
||||
overflow-x: auto;
|
||||
margin: 10px 0;
|
||||
padding: 10px;
|
||||
border-radius: 8px;
|
||||
background: #13231e;
|
||||
color: #f4fffb;
|
||||
}
|
||||
|
||||
.agent-preview-markdown pre code {
|
||||
padding: 0;
|
||||
background: transparent;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.agent-preview-markdown table {
|
||||
display: block;
|
||||
max-width: 100%;
|
||||
overflow-x: auto;
|
||||
border-collapse: collapse;
|
||||
margin: 10px 0;
|
||||
}
|
||||
|
||||
.agent-preview-markdown th,
|
||||
.agent-preview-markdown td {
|
||||
padding: 6px 8px;
|
||||
border: 1px solid #dbe7e3;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.agent-preview-markdown a { color: #0f735d; font-weight: 700; }
|
||||
|
||||
.agent-preview-generation-state {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
min-height: 28px;
|
||||
color: #667a73;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.agent-preview-generation-state span {
|
||||
width: 5px;
|
||||
height: 5px;
|
||||
border-radius: 50%;
|
||||
background: #0f735d;
|
||||
animation: agent-generation-pulse 1.2s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.agent-preview-generation-state span:nth-child(2) { animation-delay: 0.14s; }
|
||||
.agent-preview-generation-state span:nth-child(3) { margin-right: 4px; animation-delay: 0.28s; }
|
||||
|
||||
@keyframes agent-generation-pulse {
|
||||
0%, 70%, 100% { opacity: 0.25; transform: translateY(0); }
|
||||
35% { opacity: 1; transform: translateY(-2px); }
|
||||
}
|
||||
|
||||
.agent-preview-thinking {
|
||||
margin-bottom: 10px;
|
||||
padding: 9px 10px;
|
||||
|
||||
@@ -157,6 +157,15 @@ export interface AgentDebugResult {
|
||||
retrievalLogId?: number;
|
||||
}
|
||||
|
||||
export interface AgentDebugStreamComplete {
|
||||
message: string;
|
||||
modelName?: string;
|
||||
retrieveCount?: number;
|
||||
knowledgeIds?: string;
|
||||
retrievalTrace?: Record<string, unknown>[];
|
||||
retrievalLogId?: number;
|
||||
}
|
||||
|
||||
export interface KnowledgeVersion {
|
||||
id: number;
|
||||
knowledgeId: number;
|
||||
|
||||
Reference in New Issue
Block a user