Initial commit: GovAI 政务AI平台
This commit is contained in:
freedakgmail
@@ -0,0 +1,277 @@
|
||||
"use client";
|
||||
|
||||
import { useState, useMemo, useCallback, useRef } from "react";
|
||||
import { useRouter } from "next/navigation";
|
||||
import { useQueryClient } from "@tanstack/react-query";
|
||||
import type { App, Message, FormatTemplate } from "@/lib/types";
|
||||
import api, { streamCompletion } from "@/lib/api";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Textarea } from "@/components/ui/textarea";
|
||||
import { Card, CardContent } from "@/components/ui/card";
|
||||
import { Skeleton } from "@/components/ui/skeleton";
|
||||
import {
|
||||
Sparkles,
|
||||
RotateCcw,
|
||||
Copy,
|
||||
Check,
|
||||
Loader2,
|
||||
FileText,
|
||||
ListChecks,
|
||||
} from "lucide-react";
|
||||
import { getCategoryIcon, getCategoryColor } from "@/lib/category-config";
|
||||
import GovMarkdown from "@/components/ui/gov-markdown";
|
||||
import { toast } from "sonner";
|
||||
import ConversationSidebar from "./conversation-sidebar";
|
||||
|
||||
interface CompletionUIProps {
|
||||
app: App;
|
||||
}
|
||||
|
||||
export default function CompletionUI({ app }: CompletionUIProps) {
|
||||
const router = useRouter();
|
||||
const queryClient = useQueryClient();
|
||||
const [input, setInput] = useState("");
|
||||
const [output, setOutput] = useState("");
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
const [copied, setCopied] = useState(false);
|
||||
const [selectedFormat, setSelectedFormat] = useState<string>("");
|
||||
const [conversationId, setConversationId] = useState<string | undefined>();
|
||||
const abortRef = useRef<AbortController | null>(null);
|
||||
|
||||
const handleNewConversation = useCallback(() => {
|
||||
setInput("");
|
||||
setOutput("");
|
||||
setSelectedFormat("");
|
||||
setConversationId(undefined);
|
||||
}, []);
|
||||
|
||||
const handleSelectConversation = useCallback(
|
||||
async (convId: string) => {
|
||||
setConversationId(convId);
|
||||
try {
|
||||
const data = await api.get<{ data: Message[] }>(
|
||||
`/api/v1/apps/${app.id}/conversations/${convId}/messages`
|
||||
);
|
||||
const msgs = data.data || [];
|
||||
const userMsg = msgs.find((m) => m.role === "user");
|
||||
const aiMsg = msgs.find((m) => m.role === "assistant");
|
||||
setInput(userMsg?.content || "");
|
||||
setOutput(aiMsg?.content || "");
|
||||
} catch {
|
||||
setInput("");
|
||||
setOutput("");
|
||||
}
|
||||
},
|
||||
[app.id]
|
||||
);
|
||||
|
||||
const appConfig = useMemo(() => {
|
||||
try {
|
||||
if (typeof app.app_config === "string") return JSON.parse(app.app_config);
|
||||
return app.app_config || {};
|
||||
} catch { return {}; }
|
||||
}, [app.app_config]);
|
||||
|
||||
const inputLabel = appConfig.input_label || "输入内容";
|
||||
const inputPlaceholder = appConfig.input_placeholder || "在此输入...";
|
||||
const outputLabel = appConfig.output_label || "生成结果";
|
||||
const formatTemplates: Record<string, FormatTemplate> = appConfig.format_templates || {};
|
||||
const hasFormats = Object.keys(formatTemplates).length > 0;
|
||||
|
||||
const CategoryIcon = getCategoryIcon(app.category_slug);
|
||||
const categoryColor = getCategoryColor(app.category_slug);
|
||||
|
||||
const handleGenerate = useCallback(async () => {
|
||||
if (!input.trim() || isLoading) return;
|
||||
setIsLoading(true);
|
||||
setOutput("");
|
||||
|
||||
const controller = new AbortController();
|
||||
abortRef.current = controller;
|
||||
|
||||
let finalInput = input.trim();
|
||||
if (selectedFormat && formatTemplates[selectedFormat]) {
|
||||
const fmt = formatTemplates[selectedFormat];
|
||||
finalInput = `【输出格式要求】请按照「${fmt.name}」格式生成，包含以下章节：${fmt.sections.join("、")}。\n\n${finalInput}`;
|
||||
}
|
||||
|
||||
try {
|
||||
const res = await streamCompletion(app.id, finalInput, controller.signal);
|
||||
if (!res.ok) throw new Error("请求失败");
|
||||
const reader = res.body?.getReader();
|
||||
const decoder = new TextDecoder();
|
||||
if (!reader) throw new Error("无法获取响应流");
|
||||
|
||||
let buffer = "";
|
||||
let accumulated = "";
|
||||
while (true) {
|
||||
const { done, value } = await reader.read();
|
||||
if (done) break;
|
||||
buffer += decoder.decode(value, { stream: true });
|
||||
const lines = buffer.split("\n");
|
||||
buffer = lines.pop() || "";
|
||||
for (const line of lines) {
|
||||
if (!line.startsWith("data: ")) continue;
|
||||
const raw = line.slice(6);
|
||||
if (raw === "[DONE]") break;
|
||||
try {
|
||||
const event = JSON.parse(raw);
|
||||
if (event.conversation_id) setConversationId(event.conversation_id);
|
||||
if (event.answer) {
|
||||
accumulated += event.answer;
|
||||
setOutput(accumulated);
|
||||
}
|
||||
} catch { /* skip */ }
|
||||
}
|
||||
}
|
||||
queryClient.invalidateQueries({ queryKey: ["conversations", app.id] });
|
||||
// 延迟刷新以获取LLM生成的对话名称
|
||||
setTimeout(() => {
|
||||
queryClient.invalidateQueries({ queryKey: ["conversations", app.id] });
|
||||
}, 3000);
|
||||
} catch (err) {
|
||||
if ((err as Error).name === "AbortError") return;
|
||||
toast.error("生成失败，请重试");
|
||||
} finally {
|
||||
abortRef.current = null;
|
||||
setIsLoading(false);
|
||||
}
|
||||
}, [input, isLoading, app.id, selectedFormat, formatTemplates, queryClient]);
|
||||
|
||||
const handleCopy = useCallback(async () => {
|
||||
await navigator.clipboard.writeText(output);
|
||||
setCopied(true);
|
||||
toast.success("已复制到剪贴板");
|
||||
setTimeout(() => setCopied(false), 2000);
|
||||
}, [output]);
|
||||
|
||||
const handleReset = useCallback(() => {
|
||||
if (abortRef.current) abortRef.current.abort();
|
||||
setInput("");
|
||||
setOutput("");
|
||||
setSelectedFormat("");
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div className="flex h-[calc(100vh-3.5rem)] overflow-hidden">
|
||||
<ConversationSidebar
|
||||
appId={app.id}
|
||||
currentConvId={conversationId}
|
||||
onSelectConversation={handleSelectConversation}
|
||||
onNewConversation={handleNewConversation}
|
||||
/>
|
||||
|
||||
<div className="flex-1 flex flex-col min-w-0 overflow-hidden">
|
||||
<div className="border-b px-3 md:px-5 py-3 flex items-center gap-2 md:gap-3 shrink-0">
|
||||
<div className={`flex h-8 w-8 items-center justify-center rounded-lg ${categoryColor} shrink-0`}>
|
||||
<CategoryIcon className="h-4 w-4" />
|
||||
</div>
|
||||
<div className="min-w-0">
|
||||
<h1 className="font-semibold text-sm truncate">{app.name}</h1>
|
||||
<p className="text-xs text-muted-foreground truncate">{app.description}</p>
|
||||
</div>
|
||||
<div className="ml-auto flex items-center gap-1.5 text-xs text-blue-800 bg-blue-100 px-2 py-1 rounded-full font-medium">
|
||||
<FileText className="h-3 w-3" />
|
||||
<span className="hidden sm:inline">补全型</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex-1 overflow-auto">
|
||||
<div className="mx-auto w-full max-w-7xl px-3 md:px-6 lg:px-8 py-4 md:py-6 space-y-4 md:space-y-6">
|
||||
{/* 格式选择区域 */}
|
||||
{hasFormats && (
|
||||
<Card>
|
||||
<CardContent className="p-4">
|
||||
<div className="flex items-center gap-2 mb-3">
|
||||
<ListChecks className="h-4 w-4 text-muted-foreground" />
|
||||
<label className="text-sm font-medium">选择输出格式</label>
|
||||
</div>
|
||||
<div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-2">
|
||||
{Object.entries(formatTemplates).map(([key, fmt]) => (
|
||||
<button
|
||||
key={key}
|
||||
onClick={() => setSelectedFormat(selectedFormat === key ? "" : key)}
|
||||
className={`text-left p-3 rounded-lg border transition-all ${
|
||||
selectedFormat === key
|
||||
? "border-emerald-500 bg-emerald-50 ring-1 ring-emerald-500"
|
||||
: "border-border hover:border-emerald-300 hover:bg-emerald-50/50"
|
||||
}`}
|
||||
>
|
||||
<div className="text-sm font-medium truncate">{fmt.name}</div>
|
||||
<div className="text-xs text-muted-foreground mt-0.5 line-clamp-2">{fmt.description}</div>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
{selectedFormat && formatTemplates[selectedFormat] && (
|
||||
<div className="mt-3 p-2.5 rounded-md bg-emerald-50 border border-emerald-200/60">
|
||||
<p className="text-xs text-emerald-700">
|
||||
<span className="font-medium">包含章节：</span>
|
||||
{formatTemplates[selectedFormat].sections.join(" → ")}
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
)}
|
||||
|
||||
<Card>
|
||||
<CardContent className="p-5 space-y-3">
|
||||
<label className="text-sm font-medium">{inputLabel}</label>
|
||||
<Textarea
|
||||
value={input}
|
||||
onChange={(e) => setInput(e.target.value)}
|
||||
placeholder={inputPlaceholder}
|
||||
className="min-h-[160px] resize-none"
|
||||
disabled={isLoading}
|
||||
/>
|
||||
<div className="flex items-center gap-2">
|
||||
<Button onClick={handleGenerate} disabled={!input.trim() || isLoading} className="gap-2">
|
||||
{isLoading ? <Loader2 className="h-4 w-4 animate-spin" /> : <Sparkles className="h-4 w-4" />}
|
||||
{isLoading ? "生成中..." : "生成"}
|
||||
</Button>
|
||||
{selectedFormat && formatTemplates[selectedFormat] && (
|
||||
<span className="text-xs text-emerald-600 bg-emerald-50 px-2 py-1 rounded">
|
||||
格式：{formatTemplates[selectedFormat].name}
|
||||
</span>
|
||||
)}
|
||||
{(output || input) && (
|
||||
<Button variant="outline" onClick={handleReset} className="gap-2">
|
||||
<RotateCcw className="h-4 w-4" />
|
||||
重置
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{isLoading && !output && (
|
||||
<Card>
|
||||
<CardContent className="p-5 space-y-3">
|
||||
<Skeleton className="h-4 w-24" />
|
||||
<Skeleton className="h-4 w-full" />
|
||||
<Skeleton className="h-4 w-full" />
|
||||
<Skeleton className="h-4 w-3/4" />
|
||||
</CardContent>
|
||||
</Card>
|
||||
)}
|
||||
|
||||
{output && (
|
||||
<Card className="border-emerald-200/60 bg-emerald-50/30">
|
||||
<CardContent className="p-5">
|
||||
<div className="flex items-center justify-between mb-3">
|
||||
<label className="text-sm font-medium text-emerald-800">{outputLabel}</label>
|
||||
<Button variant="ghost" size="sm" onClick={handleCopy} className="gap-1.5 text-xs h-7">
|
||||
{copied ? <Check className="h-3 w-3" /> : <Copy className="h-3 w-3" />}
|
||||
{copied ? "已复制" : "复制"}
|
||||
</Button>
|
||||
</div>
|
||||
<GovMarkdown content={output} />
|
||||
</CardContent>
|
||||
</Card>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user