feat(kol): add SSE streaming for prompt assist
- Extract assist runtime (prompt building, response parsing, finalize) from the worker into kol_assist_runtime so the sync streaming path and the async task path share the same logic. - Add POST /kol/manage/assist/stream as a Server-Sent Events endpoint emitting start/delta/completed/error events, and wire it to a streamAssist helper on kolManageApi that reports ApiClientError with the server's error envelope. - Stream generated content live in KolPromptEditor and KolGenerateView, switching KolPromptEditArea to a boolean aiBusy flag and refining the generator page layout. - Add KolAssistStreamEvent to shared types. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -4,7 +4,7 @@ import { useRoute, useRouter } from "vue-router";
|
||||
import { useI18n } from "vue-i18n";
|
||||
import { useMutation, useQuery } from "@tanstack/vue-query";
|
||||
import { message } from "ant-design-vue";
|
||||
import { ArrowLeftOutlined, ThunderboltOutlined } from "@ant-design/icons-vue";
|
||||
import { LeftOutlined } from "@ant-design/icons-vue";
|
||||
import { kolGenerateApi } from "@/lib/api";
|
||||
import KolDynamicForm from "@/components/kol/KolDynamicForm.vue";
|
||||
import KnowledgeGroupSelect from "@/components/KnowledgeGroupSelect.vue";
|
||||
@@ -78,11 +78,11 @@ function handleBack() {
|
||||
}
|
||||
|
||||
function handleSubmit() {
|
||||
const schema = schemaQuery.data.value;
|
||||
if (!schema?.schema_json?.variables) return;
|
||||
const schemaValue = schemaQuery.data.value;
|
||||
if (!schemaValue?.schema_json?.variables) return;
|
||||
|
||||
const missingLabels: string[] = [];
|
||||
schema.schema_json.variables.forEach((v) => {
|
||||
schemaValue.schema_json.variables.forEach((v) => {
|
||||
const normalizedVariable = normalizeKolVariableDefinition(v);
|
||||
if (normalizedVariable.required && isKolVariableValueEmpty(normalizedVariable, values.value[fieldKey(v.key, v.id)])) {
|
||||
missingLabels.push(v.label);
|
||||
@@ -99,36 +99,39 @@ function handleSubmit() {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="kol-generate-view">
|
||||
<div class="view-header">
|
||||
<a-button type="link" @click="handleBack" class="back-btn">
|
||||
<template #icon><ArrowLeftOutlined /></template>
|
||||
{{ t("common.back") }}
|
||||
</a-button>
|
||||
</div>
|
||||
|
||||
<div class="wizard-page">
|
||||
<div v-if="schemaQuery.isPending.value" class="loading-state">
|
||||
<a-spin size="large" />
|
||||
</div>
|
||||
|
||||
<div v-else-if="schema" class="view-content">
|
||||
<a-row :gutter="24" justify="center">
|
||||
<a-col :xs="24" :lg="16" :xl="12">
|
||||
<a-card class="generate-card">
|
||||
<template #title>
|
||||
<div class="card-header">
|
||||
<span class="package-name">{{ schema.package_name }}</span>
|
||||
<span class="divider">/</span>
|
||||
<span class="prompt-name">{{ schema.prompt_name }}</span>
|
||||
<a-tag v-if="schema.platform_hint" color="cyan" class="platform-badge">
|
||||
{{ schema.platform_hint }}
|
||||
</a-tag>
|
||||
</div>
|
||||
</template>
|
||||
<template v-else-if="schema">
|
||||
<header class="wizard-page__header">
|
||||
<div class="header-left">
|
||||
<a-button type="text" shape="circle" @click="handleBack">
|
||||
<template #icon><LeftOutlined /></template>
|
||||
</a-button>
|
||||
<div class="header-title-box">
|
||||
<h2 class="header-title">
|
||||
{{ schema.package_name }}
|
||||
<span class="divider">/</span>
|
||||
{{ schema.prompt_name }}
|
||||
<a-tag v-if="schema.platform_hint" color="cyan" class="platform-badge">
|
||||
{{ schema.platform_hint }}
|
||||
</a-tag>
|
||||
</h2>
|
||||
<p class="header-eyebrow">{{ t("kol.generate.fillVariables") }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="hint-text">
|
||||
<ThunderboltOutlined class="hint-icon" />
|
||||
{{ t("kol.generate.fillVariables") }}
|
||||
<main class="wizard-page__main">
|
||||
<section class="wizard-section">
|
||||
<div class="wizard-card">
|
||||
<div class="wizard-card__header" style="margin-bottom: 24px;">
|
||||
<div>
|
||||
<h3>{{ t("kol.generate.fillVariables") }}</h3>
|
||||
<p>根据设定提供相关信息</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="allowWebSearch || allowUserKnowledge" class="capability-card">
|
||||
@@ -150,7 +153,6 @@ function handleSubmit() {
|
||||
:disabled="generateMutation.isPending.value"
|
||||
placeholder="可选，选择你自己的知识库分组辅助生成"
|
||||
/>
|
||||
<div class="capability-hint">只会使用你当前租户下可访问的知识库分组。</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -159,37 +161,32 @@ function handleSubmit() {
|
||||
:variables="schema.schema_json.variables"
|
||||
class="form-body"
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<div class="form-actions">
|
||||
<a-button
|
||||
type="primary"
|
||||
size="large"
|
||||
block
|
||||
:loading="generateMutation.isPending.value"
|
||||
@click="handleSubmit"
|
||||
>
|
||||
{{ t("kol.generate.submit") }}
|
||||
</a-button>
|
||||
</div>
|
||||
</a-card>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</div>
|
||||
<footer class="wizard-page__footer">
|
||||
<div></div>
|
||||
<div class="footer-actions">
|
||||
<a-button
|
||||
type="primary"
|
||||
:loading="generateMutation.isPending.value"
|
||||
@click="handleSubmit"
|
||||
>
|
||||
{{ t("kol.generate.submit") }}
|
||||
</a-button>
|
||||
</div>
|
||||
</footer>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.kol-generate-view {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.view-header {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.back-btn {
|
||||
padding: 0;
|
||||
color: #595959;
|
||||
.wizard-page {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: calc(100vh - 120px);
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.loading-state {
|
||||
@@ -198,60 +195,107 @@ function handleSubmit() {
|
||||
padding: 100px;
|
||||
}
|
||||
|
||||
.generate-card {
|
||||
border-radius: 12px;
|
||||
border: 1px solid #e6edf5;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
|
||||
}
|
||||
|
||||
.card-header {
|
||||
.wizard-page__header {
|
||||
z-index: 10;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
padding: 16px 32px;
|
||||
border-bottom: 1px solid #edf2f7;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.package-name {
|
||||
color: #8c8c8c;
|
||||
font-weight: 400;
|
||||
.header-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.header-title-box {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.header-title {
|
||||
margin: 0;
|
||||
color: #111827;
|
||||
font-size: 20px;
|
||||
font-weight: 800;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.divider {
|
||||
margin: 0 8px;
|
||||
color: #d9d9d9;
|
||||
}
|
||||
|
||||
.prompt-name {
|
||||
color: #1a1a1a;
|
||||
font-weight: 600;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.platform-badge {
|
||||
margin-left: 4px;
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
.hint-text {
|
||||
margin-bottom: 24px;
|
||||
padding: 12px 16px;
|
||||
background: #f0f7ff;
|
||||
border-radius: 8px;
|
||||
color: #003a8c;
|
||||
font-size: 14px;
|
||||
.header-eyebrow {
|
||||
margin: 0;
|
||||
color: #6d7c94;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.wizard-page__main {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin: 0 auto;
|
||||
width: 100%;
|
||||
max-width: 860px;
|
||||
padding: 24px 32px 64px;
|
||||
}
|
||||
|
||||
.wizard-section {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.wizard-card {
|
||||
padding: 32px 0;
|
||||
}
|
||||
|
||||
.wizard-card__header {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.wizard-card__header h3 {
|
||||
margin: 0;
|
||||
color: #111827;
|
||||
font-size: 16px;
|
||||
font-weight: 800;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.hint-icon {
|
||||
color: #1890ff;
|
||||
.wizard-card__header h3::before {
|
||||
content: "";
|
||||
display: inline-block;
|
||||
width: 4px;
|
||||
height: 16px;
|
||||
border-radius: 2px;
|
||||
background: #111827;
|
||||
margin-right: 12px;
|
||||
}
|
||||
|
||||
.form-body {
|
||||
margin-bottom: 24px;
|
||||
.wizard-card__header p {
|
||||
margin: 6px 0 0 16px;
|
||||
color: #667085;
|
||||
font-size: 13px;
|
||||
line-height: 1.7;
|
||||
}
|
||||
|
||||
.capability-card {
|
||||
margin-bottom: 24px;
|
||||
padding: 16px;
|
||||
margin-bottom: 32px;
|
||||
padding: 20px;
|
||||
border: 1px solid #e6edf5;
|
||||
border-radius: 12px;
|
||||
background: #fafcff;
|
||||
@@ -265,7 +309,7 @@ function handleSubmit() {
|
||||
}
|
||||
|
||||
.capability-knowledge {
|
||||
margin-top: 16px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.capability-copy {
|
||||
@@ -286,7 +330,43 @@ function handleSubmit() {
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.form-actions {
|
||||
margin-top: 32px;
|
||||
.wizard-page__footer {
|
||||
position: sticky;
|
||||
bottom: 0;
|
||||
z-index: 100;
|
||||
margin-top: auto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 16px 24px;
|
||||
border-top: 1px solid rgba(20, 44, 88, 0.08);
|
||||
backdrop-filter: blur(14px);
|
||||
background: rgba(255, 255, 255, 0.88);
|
||||
}
|
||||
|
||||
.footer-actions {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.wizard-page__main {
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.wizard-card {
|
||||
padding: 18px 0;
|
||||
}
|
||||
|
||||
.wizard-page__footer {
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.footer-actions {
|
||||
width: 100%;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -2545,7 +2545,7 @@ function onStructureDragEnd(): void {
|
||||
.wizard-page {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: calc(100vh - 64px);
|
||||
min-height: calc(100vh - 120px);
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
|
||||
@@ -36,6 +36,7 @@ import { articlesApi, templatesApi, workspaceApi } from "@/lib/api";
|
||||
import { buildArticleClipboardContent, resolveArticleActionState } from "@/lib/article-list-actions";
|
||||
import { formatError } from "@/lib/errors";
|
||||
import {
|
||||
formatDateTime,
|
||||
getGenerateStatusMeta,
|
||||
getPublishStatusMeta,
|
||||
getTemplateMeta,
|
||||
@@ -689,6 +690,9 @@ function refreshRecords(): void {
|
||||
<h4 class="templates-view__kol-title" :title="card.prompt_name">{{ card.prompt_name }}</h4>
|
||||
<div class="templates-view__kol-meta-row">
|
||||
<span class="templates-view__kol-prompt" :title="card.package_name">{{ card.package_name }}</span>
|
||||
<span class="templates-view__kol-updated-at">
|
||||
{{ t("common.updatedAt") }}: {{ formatDateTime(card.updated_at) }}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="templates-view__kol-footer">
|
||||
@@ -1171,9 +1175,9 @@ function refreshRecords(): void {
|
||||
|
||||
.templates-view__kol-meta-row {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
gap: 6px;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
@@ -1188,6 +1192,12 @@ function refreshRecords(): void {
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.templates-view__kol-updated-at {
|
||||
font-size: 12px;
|
||||
color: #9ca3af;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.templates-view__kol-footer {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
@@ -27,8 +27,8 @@ import ArticleSourceMeta from "@/components/ArticleSourceMeta.vue";
|
||||
import ArticleDetailDrawer from "@/components/ArticleDetailDrawer.vue";
|
||||
import PublishArticleModal from "@/components/PublishArticleModal.vue";
|
||||
import { articlesApi, workspaceApi } from "@/lib/api";
|
||||
import { getTemplateMeta } from "@/lib/display";
|
||||
import { buildArticleClipboardContent, resolveArticleActionState } from "@/lib/article-list-actions";
|
||||
import { formatDateTime, getTemplateMeta } from "@/lib/display";
|
||||
import { formatError } from "@/lib/errors";
|
||||
|
||||
const queryClient = useQueryClient();
|
||||
@@ -303,6 +303,9 @@ function refreshDashboard(): void {
|
||||
<h4 class="kol-card-title" :title="card.prompt_name">{{ card.prompt_name }}</h4>
|
||||
<div class="kol-card-meta-row">
|
||||
<span class="kol-card-prompt" :title="card.package_name">{{ card.package_name }}</span>
|
||||
<span class="kol-card-updated-at">
|
||||
{{ t("common.updatedAt") }}: {{ formatDateTime(card.updated_at) }}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="kol-card-footer">
|
||||
@@ -747,9 +750,9 @@ function refreshDashboard(): void {
|
||||
|
||||
.kol-card-meta-row {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
gap: 6px;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
@@ -764,6 +767,12 @@ function refreshDashboard(): void {
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.kol-card-updated-at {
|
||||
font-size: 12px;
|
||||
color: #9ca3af;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.kol-card-footer {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
Reference in New Issue
Block a user