537 lines
22 KiB
TypeScript
537 lines
22 KiB
TypeScript
"use client";
|
||
|
||
import { useCallback, useEffect, useRef, useState, type DragEvent } from "react";
|
||
import { motion, AnimatePresence } from "framer-motion";
|
||
import { ChatMessages } from "@/components/chat/chat-messages";
|
||
import { ChatInput, type ChatInputHandle } from "@/components/chat/chat-input";
|
||
import { SessionQuickPicks } from "@/components/chat/session-quick-picks";
|
||
import { AdvancedControls } from "@/components/workbench/advanced-controls";
|
||
import { CandidatePanel } from "@/components/workbench/candidate-panel";
|
||
import { Sidebar } from "@/components/sidebar/sidebar";
|
||
import { TopNav } from "@/components/layout/top-nav";
|
||
import { ImageDetailPanel } from "@/components/detail/image-detail-panel";
|
||
import { AmbientParticles } from "@/components/ui/ambient-particles";
|
||
import { useApp } from "@/lib/app-context";
|
||
import { sendChat, getImageUrl, uploadRefImage } from "@/lib/api";
|
||
import { generateId } from "@/lib/store";
|
||
import { scrollBtnEnter, scrollBtnClick, staggerContainer, staggerItem } from "@/components/ui/motion-presets";
|
||
import type { ChatMessage, ImageAsset, ApiMessage, AnnotationData } from "@/lib/types";
|
||
|
||
export default function Home() {
|
||
const {
|
||
activeSession,
|
||
activeSessionId,
|
||
appendMessage,
|
||
addAsset,
|
||
updateSessionThumbnail,
|
||
detailImage,
|
||
sidebarCollapsed,
|
||
setSidebarCollapsed,
|
||
} = useApp();
|
||
|
||
const messages = activeSession?.messages ?? [];
|
||
|
||
const [isLoading, setIsLoading] = useState(false);
|
||
const [streamingText, setStreamingText] = useState("");
|
||
const [streamingImages, setStreamingImages] = useState<ImageAsset[]>([]);
|
||
const [statusText, setStatusText] = useState("");
|
||
const [isGeneratingImage, setIsGeneratingImage] = useState(false);
|
||
const [pendingAnnotation, setPendingAnnotation] = useState<AnnotationData | null>(null);
|
||
const [lastRefImageUrls, setLastRefImageUrls] = useState<string[]>([]);
|
||
const lastRefPerSession = useRef<Map<string, string[]>>(new Map());
|
||
const [mainDragging, setMainDragging] = useState(false);
|
||
const dragCounter = useRef(0);
|
||
const chatInputRef = useRef<ChatInputHandle>(null);
|
||
const scrollRef = useRef<HTMLDivElement>(null);
|
||
const scrollPositions = useRef<Map<string, number>>(new Map());
|
||
const prevSessionId = useRef<string | null>(null);
|
||
const isSwitching = useRef(false);
|
||
const [showScrollBtn, setShowScrollBtn] = useState(false);
|
||
const [showCandidates, setShowCandidates] = useState(false);
|
||
|
||
const scrollToBottom = useCallback((instant?: boolean) => {
|
||
if (isSwitching.current && !instant) return;
|
||
const el = scrollRef.current;
|
||
if (!el) return;
|
||
if (instant) {
|
||
el.scrollTop = el.scrollHeight;
|
||
} else {
|
||
setTimeout(() => {
|
||
scrollRef.current?.scrollTo({
|
||
top: scrollRef.current.scrollHeight,
|
||
behavior: "smooth",
|
||
});
|
||
}, 50);
|
||
}
|
||
}, []);
|
||
|
||
useEffect(() => {
|
||
const el = scrollRef.current;
|
||
if (!el || !activeSessionId) return;
|
||
const handler = () => {
|
||
if (!isSwitching.current) {
|
||
scrollPositions.current.set(activeSessionId, el.scrollTop);
|
||
}
|
||
const distFromBottom = el.scrollHeight - el.scrollTop - el.clientHeight;
|
||
setShowScrollBtn(distFromBottom > 200);
|
||
};
|
||
el.addEventListener("scroll", handler, { passive: true });
|
||
return () => el.removeEventListener("scroll", handler);
|
||
}, [activeSessionId]);
|
||
|
||
useEffect(() => {
|
||
if (!activeSessionId) return;
|
||
if (prevSessionId.current && prevSessionId.current !== activeSessionId) {
|
||
isSwitching.current = true;
|
||
}
|
||
prevSessionId.current = activeSessionId;
|
||
setLastRefImageUrls(lastRefPerSession.current.get(activeSessionId) ?? []);
|
||
}, [activeSessionId]);
|
||
|
||
useEffect(() => {
|
||
if (!activeSessionId || !isSwitching.current) return;
|
||
requestAnimationFrame(() => {
|
||
const el = scrollRef.current;
|
||
if (!el) return;
|
||
const saved = scrollPositions.current.get(activeSessionId);
|
||
if (saved !== undefined) {
|
||
el.scrollTop = saved;
|
||
} else {
|
||
el.scrollTop = el.scrollHeight;
|
||
}
|
||
const distFromBottom = el.scrollHeight - el.scrollTop - el.clientHeight;
|
||
setShowScrollBtn(distFromBottom > 200);
|
||
isSwitching.current = false;
|
||
});
|
||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||
}, [activeSessionId, messages.length]);
|
||
|
||
const handleSend = useCallback(
|
||
async (text: string, refImageServerUrls: string[], imageModel: string | null = null) => {
|
||
if (!activeSessionId || !activeSession) return;
|
||
|
||
let finalText = text;
|
||
let finalRefServerUrls = [...refImageServerUrls];
|
||
|
||
if (pendingAnnotation) {
|
||
const annotationDescs = pendingAnnotation.annotations
|
||
.filter((a) => a.text)
|
||
.map((a) => {
|
||
if (a.type === "rect") {
|
||
return `[区域 (${Math.round(a.x * 100)}%, ${Math.round(a.y * 100)}%) 大小 ${Math.round((a.w ?? 0) * 100)}%×${Math.round((a.h ?? 0) * 100)}%]: ${a.text}`;
|
||
}
|
||
return `[标注]: ${a.text}`;
|
||
})
|
||
.join("\n");
|
||
|
||
if (annotationDescs) {
|
||
finalText = `${text}\n\n--- 图片标注 ---\n${annotationDescs}`;
|
||
}
|
||
|
||
if (pendingAnnotation.snapshot && finalRefServerUrls.length === 0) {
|
||
try {
|
||
const res = await fetch(pendingAnnotation.snapshot);
|
||
const blob = await res.blob();
|
||
const file = new File([blob], "annotation.png", { type: "image/png" });
|
||
const uploadResult = await uploadRefImage(file);
|
||
finalRefServerUrls = [uploadResult.url];
|
||
} catch {
|
||
// 忽略转换/上传失败
|
||
}
|
||
}
|
||
|
||
setPendingAnnotation(null);
|
||
}
|
||
|
||
if (finalRefServerUrls.length > 0) {
|
||
lastRefPerSession.current.set(activeSessionId, finalRefServerUrls);
|
||
setLastRefImageUrls(finalRefServerUrls);
|
||
}
|
||
|
||
const previewUrls = finalRefServerUrls.map((u) => getImageUrl(u));
|
||
|
||
const userMessage: ChatMessage = {
|
||
id: generateId("msg-"),
|
||
role: "user",
|
||
content: finalText,
|
||
refImageUrls: previewUrls.length > 0 ? previewUrls : undefined,
|
||
};
|
||
appendMessage(activeSessionId, userMessage);
|
||
setIsLoading(true);
|
||
setIsGeneratingImage(false);
|
||
setStreamingText("");
|
||
setStreamingImages([]);
|
||
setStatusText("");
|
||
scrollToBottom();
|
||
|
||
const apiMessages: ApiMessage[] = [
|
||
...activeSession.messages.map((m) => ({ role: m.role, content: m.content })),
|
||
{ role: userMessage.role, content: userMessage.content },
|
||
];
|
||
|
||
let assistantText = "";
|
||
let collectedImages: ImageAsset[] = [];
|
||
let usedModelName = "";
|
||
|
||
const llmModel = activeSession?.llmModel ?? null;
|
||
|
||
try {
|
||
for await (const event of sendChat(apiMessages, finalRefServerUrls.length > 0 ? finalRefServerUrls : null, imageModel, activeSessionId, llmModel)) {
|
||
switch (event.type) {
|
||
case "text_delta":
|
||
assistantText += event.data.text as string;
|
||
setStreamingText(assistantText);
|
||
scrollToBottom();
|
||
break;
|
||
|
||
case "tool_start":
|
||
setStatusText(event.data.message as string);
|
||
setIsGeneratingImage(true);
|
||
scrollToBottom();
|
||
break;
|
||
|
||
case "image_result": {
|
||
const rawUrls = (event.data.images as string[]) || [];
|
||
const newUrls = rawUrls.filter((u) => u && !u.startsWith("["));
|
||
const prompt = (event.data.prompt_used as string) || "";
|
||
const modelName = (event.data.model_name as string) || "";
|
||
|
||
if (newUrls.length === 0) break;
|
||
|
||
const newAssets: ImageAsset[] = newUrls.map((url) => ({
|
||
id: generateId("img-"),
|
||
url,
|
||
prompt,
|
||
sessionId: activeSessionId,
|
||
tags: activeSession.tags ? [...activeSession.tags] : [],
|
||
favorited: false,
|
||
createdAt: Date.now(),
|
||
}));
|
||
newAssets.forEach((a) => addAsset(a));
|
||
|
||
if (newAssets.length > 0) {
|
||
updateSessionThumbnail(activeSessionId, newAssets[0].url);
|
||
}
|
||
|
||
collectedImages = [...collectedImages, ...newAssets];
|
||
setStreamingImages([...collectedImages]);
|
||
setIsGeneratingImage(false);
|
||
if (modelName) {
|
||
usedModelName = modelName;
|
||
setStatusText(`由 ${modelName} 生成`);
|
||
} else {
|
||
setStatusText("");
|
||
}
|
||
scrollToBottom();
|
||
break;
|
||
}
|
||
|
||
case "tool_error": {
|
||
const errors = (event.data.errors as string[]) || [];
|
||
const modelName = (event.data.model_name as string) || "";
|
||
const errorDetail = errors.join("\n");
|
||
const modelHint = modelName ? ` (${modelName})` : "";
|
||
assistantText += `\n\n⚠️ 图片生成失败${modelHint}:\n${errorDetail}`;
|
||
setStreamingText(assistantText);
|
||
setStatusText("");
|
||
setIsGeneratingImage(false);
|
||
scrollToBottom();
|
||
break;
|
||
}
|
||
|
||
case "memory_warning":
|
||
console.warn("[记忆系统]", event.data.message);
|
||
setStatusText(`⚠ ${event.data.message}`);
|
||
break;
|
||
|
||
case "error":
|
||
assistantText += `\n\n[错误: ${event.data.message}]`;
|
||
setStreamingText(assistantText);
|
||
break;
|
||
|
||
case "done":
|
||
break;
|
||
}
|
||
}
|
||
} catch (e) {
|
||
assistantText += `\n\n[请求失败: ${e instanceof Error ? e.message : "未知错误"}]`;
|
||
}
|
||
|
||
const assistantMessage: ChatMessage = {
|
||
id: generateId("msg-"),
|
||
role: "assistant",
|
||
content: assistantText || "（生成完成）",
|
||
images: collectedImages.length > 0 ? collectedImages : undefined,
|
||
modelName: usedModelName || undefined,
|
||
};
|
||
appendMessage(activeSessionId, assistantMessage);
|
||
setIsLoading(false);
|
||
setIsGeneratingImage(false);
|
||
setStreamingText("");
|
||
setStreamingImages([]);
|
||
setStatusText("");
|
||
scrollToBottom();
|
||
},
|
||
[activeSession, activeSessionId, appendMessage, addAsset, updateSessionThumbnail, pendingAnnotation, scrollToBottom]
|
||
);
|
||
|
||
const handleAnnotationComplete = useCallback((data: AnnotationData) => {
|
||
setPendingAnnotation(data);
|
||
}, []);
|
||
|
||
const isEmptyState = messages.length === 0 && !isLoading;
|
||
|
||
return (
|
||
<div className="h-screen flex flex-col relative z-[1]">
|
||
{/* 环境粒子（萤火 + 云雾） */}
|
||
<AmbientParticles count={isEmptyState ? 28 : 18} />
|
||
|
||
<TopNav />
|
||
|
||
<div className="flex-1 flex overflow-hidden">
|
||
<Sidebar />
|
||
|
||
<main
|
||
className="flex-1 flex flex-col min-w-0 relative"
|
||
onDragEnter={(e: DragEvent) => {
|
||
e.preventDefault();
|
||
dragCounter.current++;
|
||
if (e.dataTransfer.types.includes("Files")) setMainDragging(true);
|
||
}}
|
||
onDragOver={(e: DragEvent) => e.preventDefault()}
|
||
onDragLeave={(e: DragEvent) => {
|
||
e.preventDefault();
|
||
dragCounter.current--;
|
||
if (dragCounter.current <= 0) { dragCounter.current = 0; setMainDragging(false); }
|
||
}}
|
||
onDrop={(e: DragEvent) => {
|
||
e.preventDefault();
|
||
dragCounter.current = 0;
|
||
setMainDragging(false);
|
||
const files = Array.from(e.dataTransfer.files).filter((f) => f.type.startsWith("image/"));
|
||
files.forEach((f) => chatInputRef.current?.uploadFile(f));
|
||
}}
|
||
>
|
||
{/* 拖拽覆盖层 */}
|
||
{mainDragging && (
|
||
<div className="absolute inset-0 z-50 flex items-center justify-center
|
||
bg-[var(--bg-primary)]/80 backdrop-blur-sm
|
||
border-2 border-dashed border-[var(--accent)]/50 rounded-xl m-2
|
||
pointer-events-none">
|
||
<div className="text-center space-y-2">
|
||
<svg width="40" height="40" viewBox="0 0 24 24" fill="none"
|
||
stroke="var(--accent)" strokeWidth="1.5" className="mx-auto opacity-70">
|
||
<rect x="3" y="3" width="18" height="18" rx="2" ry="2" />
|
||
<circle cx="8.5" cy="8.5" r="1.5" />
|
||
<polyline points="21 15 16 10 5 21" />
|
||
</svg>
|
||
<p className="text-sm text-[var(--accent)] font-medium">松开以添加参考图（可多张）</p>
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{/* 桌面端侧边栏展开按钮 */}
|
||
{sidebarCollapsed && (
|
||
<button
|
||
onClick={() => setSidebarCollapsed(false)}
|
||
className="absolute left-2 top-2 z-10 p-1.5 rounded-lg
|
||
bg-[var(--bg-secondary)]/80 backdrop-blur-sm
|
||
border border-[var(--border)]
|
||
text-[var(--text-secondary)] hover:text-[var(--accent)]
|
||
hover:border-[var(--accent)]/40
|
||
transition-all cursor-pointer btn-hover-lift
|
||
hidden md:flex"
|
||
title="展开侧边栏"
|
||
>
|
||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
|
||
<path d="M13 17l5-5-5-5M6 17l5-5-5-5" />
|
||
</svg>
|
||
</button>
|
||
)}
|
||
|
||
{/* 标注提示条 */}
|
||
{pendingAnnotation && (
|
||
<div className="flex-shrink-0 px-5 py-2.5 bg-[var(--accent)]/5 border-b border-[var(--accent)]/20
|
||
flex items-center gap-3 backdrop-blur-sm">
|
||
<img
|
||
src={pendingAnnotation.snapshot}
|
||
alt="标注预览"
|
||
className="w-10 h-10 rounded-lg object-cover border border-[var(--accent)]/40
|
||
shadow-[0_0_8px_rgba(46,139,122,0.12)]"
|
||
/>
|
||
<span className="text-xs text-[var(--accent)]">
|
||
标注已就绪（{pendingAnnotation.annotations.length} 处）— 输入修改意见后发送
|
||
</span>
|
||
<button
|
||
onClick={() => setPendingAnnotation(null)}
|
||
className="ml-auto text-xs text-[var(--text-secondary)] hover:text-[var(--text-primary)]
|
||
cursor-pointer transition-colors"
|
||
>
|
||
取消
|
||
</button>
|
||
</div>
|
||
)}
|
||
|
||
<div ref={scrollRef} className="flex-1 overflow-y-auto fog-scroll relative">
|
||
<div className="min-h-full">
|
||
{isEmptyState ? (
|
||
<div className="h-full flex items-center justify-center" style={{ minHeight: "calc(100vh - 200px)" }}>
|
||
<motion.div
|
||
className="text-center space-y-5"
|
||
variants={staggerContainer}
|
||
initial="hidden"
|
||
animate="visible"
|
||
>
|
||
{/* Logo 发光效果 */}
|
||
<motion.div variants={staggerItem} className="inline-flex items-center justify-center w-16 h-16 rounded-2xl
|
||
bg-[var(--accent)]/10 border border-[var(--accent)]/20
|
||
shadow-[0_0_30px_rgba(46,139,122,0.12)]">
|
||
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||
<path d="M8 22L12.5 10h2.2L19 22h-2.3l-1.1-3h-4.2l-1.1 3H8Zm3.7-5h3.1l-1.5-4.6h-.1L11.7 17Z" fill="var(--accent)" />
|
||
<circle cx="23" cy="12" r="3.5" stroke="var(--accent)" strokeWidth="1.8" fill="none" />
|
||
<path d="M23 15.5v5" stroke="var(--accent)" strokeWidth="1.8" strokeLinecap="round" />
|
||
<circle cx="23" cy="22.5" r="1" fill="var(--accent)" />
|
||
</svg>
|
||
</motion.div>
|
||
<motion.div variants={staggerItem}>
|
||
<h2 className="typo-display mb-2">
|
||
欢迎使用 EPEEKit
|
||
</h2>
|
||
<p className="text-sm text-[var(--text-secondary)] max-w-md leading-relaxed mx-auto">
|
||
描述你想要的美术资源，我来帮你生成。
|
||
<br />
|
||
你可以上传参考图来引导风格方向。
|
||
</p>
|
||
</motion.div>
|
||
<motion.div variants={staggerItem} className="flex flex-wrap justify-center gap-2 pt-2">
|
||
{[
|
||
"画一个赛博朋克风格的退出按钮",
|
||
"设计一个卡通风格的金币图标",
|
||
"画一个奇幻风格的游戏角色立绘",
|
||
].map((hint) => (
|
||
<button
|
||
key={hint}
|
||
onClick={() => handleSend(hint, [], null)}
|
||
className="text-xs px-4 py-2 rounded-xl
|
||
border border-[var(--border)] text-[var(--text-secondary)]
|
||
hover:border-[var(--accent)]/50 hover:text-[var(--accent)]
|
||
hover:bg-[var(--accent)]/5
|
||
transition-all cursor-pointer btn-hover-lift"
|
||
>
|
||
{hint}
|
||
</button>
|
||
))}
|
||
</motion.div>
|
||
</motion.div>
|
||
</div>
|
||
) : (
|
||
<ChatMessages
|
||
messages={messages}
|
||
isLoading={isLoading}
|
||
streamingText={streamingText}
|
||
streamingImages={streamingImages}
|
||
statusText={statusText}
|
||
/>
|
||
)}
|
||
</div>
|
||
</div>
|
||
|
||
{/* 回到底部 — 落叶归根（水滴形） */}
|
||
<AnimatePresence>
|
||
{showScrollBtn && (
|
||
<motion.button
|
||
key="scroll-btn"
|
||
variants={scrollBtnEnter}
|
||
initial="hidden"
|
||
animate="visible"
|
||
exit="exit"
|
||
onClick={() => {
|
||
scrollToBottom();
|
||
}}
|
||
className="absolute bottom-16 right-4 z-10
|
||
w-9 h-11 flex items-center justify-center
|
||
surface-2 text-[var(--text-secondary)]
|
||
hover:text-[var(--accent)] hover:border-[var(--accent)]/40
|
||
shadow-lg shadow-black/30
|
||
cursor-pointer"
|
||
style={{ borderRadius: "50% 50% 50% 50% / 35% 35% 65% 65%" }}
|
||
title="回到底部"
|
||
>
|
||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" className="mt-1">
|
||
<polyline points="6 9 12 15 18 9" />
|
||
</svg>
|
||
</motion.button>
|
||
)}
|
||
</AnimatePresence>
|
||
|
||
<div className="flex-shrink-0 border-t border-[var(--border)] bg-[var(--bg-secondary)]/60 backdrop-blur-md
|
||
flex items-center">
|
||
<div className="flex-1 min-w-0">
|
||
<SessionQuickPicks />
|
||
</div>
|
||
<div className="px-3 md:px-5 py-2 flex items-center gap-1.5">
|
||
<AdvancedControls />
|
||
<button
|
||
onClick={() => setShowCandidates(true)}
|
||
className="h-7 px-2 rounded-lg text-xs flex items-center gap-1.5
|
||
border border-[var(--border)] bg-[var(--bg-tertiary)]
|
||
text-[var(--text-secondary)] hover:text-[var(--text-primary)]
|
||
hover:border-[var(--accent)]/40 cursor-pointer transition-all"
|
||
title="候选评估（占位）"
|
||
>
|
||
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
|
||
<rect x="3" y="3" width="7" height="7" />
|
||
<rect x="14" y="3" width="7" height="7" />
|
||
<rect x="3" y="14" width="7" height="7" />
|
||
<rect x="14" y="14" width="7" height="7" />
|
||
</svg>
|
||
候选
|
||
<span className="phase-chip">P1</span>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<ChatInput
|
||
ref={chatInputRef}
|
||
onSend={handleSend}
|
||
disabled={isLoading}
|
||
isGeneratingImage={isGeneratingImage}
|
||
lastRefServerUrls={lastRefImageUrls}
|
||
lastRefPreviewUrls={lastRefImageUrls.map((u) => getImageUrl(u))}
|
||
onClearLastRefImage={() => {
|
||
if (activeSessionId) lastRefPerSession.current.delete(activeSessionId);
|
||
setLastRefImageUrls([]);
|
||
}}
|
||
onFileDrop={() => {
|
||
dragCounter.current = 0;
|
||
setMainDragging(false);
|
||
}}
|
||
/>
|
||
</main>
|
||
|
||
{detailImage && (
|
||
<ImageDetailPanel onAnnotationComplete={handleAnnotationComplete} />
|
||
)}
|
||
</div>
|
||
|
||
{showCandidates && (
|
||
<CandidatePanel
|
||
candidates={
|
||
messages
|
||
.slice()
|
||
.reverse()
|
||
.find((m) => m.role === "assistant" && m.images && m.images.length > 0)?.images ??
|
||
streamingImages ??
|
||
[]
|
||
}
|
||
onPick={(id) => {
|
||
alert(`（占位）已选 ${id} 作为定稿`);
|
||
setShowCandidates(false);
|
||
}}
|
||
onClose={() => setShowCandidates(false)}
|
||
/>
|
||
)}
|
||
</div>
|
||
);
|
||
}
|