Mark Henderson
26a11412b5
- components/AtlasChat.tsx — conversational PRD discovery UI (violet theme) - app/api/projects/[projectId]/atlas-chat/route.ts — proxy + DB persistence - overview/page.tsx — show Atlas for new projects, Orchestrator once PRD done Made-with: Cursor
316 lines
11 KiB
TypeScript
316 lines
11 KiB
TypeScript
"use client";
|
|
|
|
import { useState, useRef, useEffect, useCallback } from "react";
|
|
import { Textarea } from "@/components/ui/textarea";
|
|
import { Button } from "@/components/ui/button";
|
|
import { ScrollArea } from "@/components/ui/scroll-area";
|
|
import {
|
|
Send,
|
|
Loader2,
|
|
User,
|
|
RotateCcw,
|
|
FileText,
|
|
CheckCircle2,
|
|
ChevronDown,
|
|
ChevronUp,
|
|
} from "lucide-react";
|
|
|
|
// ---------------------------------------------------------------------------
|
|
// Types
|
|
// ---------------------------------------------------------------------------
|
|
|
|
interface Message {
|
|
role: "user" | "assistant";
|
|
content: string;
|
|
}
|
|
|
|
interface AtlasChatProps {
|
|
projectId: string;
|
|
projectName?: string;
|
|
initialMessage?: string;
|
|
}
|
|
|
|
// ---------------------------------------------------------------------------
|
|
// Atlas avatar — distinct from orchestrator
|
|
// ---------------------------------------------------------------------------
|
|
|
|
function AtlasAvatar() {
|
|
return (
|
|
<div className="w-7 h-7 rounded-full bg-gradient-to-br from-violet-500 to-indigo-600 flex items-center justify-center text-white text-xs font-bold shrink-0 shadow-sm">
|
|
A
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// ---------------------------------------------------------------------------
|
|
// PRD preview panel
|
|
// ---------------------------------------------------------------------------
|
|
|
|
function PrdPanel({ content }: { content: string }) {
|
|
const [expanded, setExpanded] = useState(false);
|
|
const preview = content.split("\n").slice(0, 6).join("\n");
|
|
|
|
return (
|
|
<div className="mt-4 border border-violet-200 dark:border-violet-800 rounded-xl overflow-hidden bg-violet-50/50 dark:bg-violet-950/20">
|
|
<div className="flex items-center gap-2 px-4 py-3 bg-violet-100/60 dark:bg-violet-900/30">
|
|
<CheckCircle2 className="w-4 h-4 text-violet-600 dark:text-violet-400" />
|
|
<span className="text-sm font-semibold text-violet-700 dark:text-violet-300">
|
|
PRD Generated
|
|
</span>
|
|
<span className="text-xs text-muted-foreground ml-auto">
|
|
Ready for architecture phase
|
|
</span>
|
|
<Button
|
|
variant="ghost"
|
|
size="sm"
|
|
className="h-6 px-2 text-xs text-violet-600"
|
|
onClick={() => setExpanded(!expanded)}
|
|
>
|
|
{expanded ? (
|
|
<ChevronUp className="w-3 h-3" />
|
|
) : (
|
|
<ChevronDown className="w-3 h-3" />
|
|
)}
|
|
</Button>
|
|
</div>
|
|
<div className="px-4 py-3">
|
|
<pre className={`text-xs text-muted-foreground whitespace-pre-wrap font-mono leading-relaxed ${expanded ? "" : "line-clamp-4"}`}>
|
|
{expanded ? content : preview}
|
|
</pre>
|
|
{!expanded && (
|
|
<button
|
|
onClick={() => setExpanded(true)}
|
|
className="text-xs text-violet-600 hover:underline mt-1"
|
|
>
|
|
View full PRD
|
|
</button>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// ---------------------------------------------------------------------------
|
|
// Main component
|
|
// ---------------------------------------------------------------------------
|
|
|
|
export function AtlasChat({ projectId, projectName, initialMessage }: AtlasChatProps) {
|
|
const [messages, setMessages] = useState<Message[]>([]);
|
|
const [input, setInput] = useState("");
|
|
const [loading, setLoading] = useState(false);
|
|
const [prdContent, setPrdContent] = useState<string | null>(null);
|
|
const [error, setError] = useState<string | null>(null);
|
|
const [started, setStarted] = useState(false);
|
|
const bottomRef = useRef<HTMLDivElement>(null);
|
|
const textareaRef = useRef<HTMLTextAreaElement>(null);
|
|
|
|
// Auto-scroll to latest message
|
|
useEffect(() => {
|
|
bottomRef.current?.scrollIntoView({ behavior: "smooth" });
|
|
}, [messages, loading]);
|
|
|
|
// Kick off Atlas with its opening message on first load
|
|
useEffect(() => {
|
|
if (started) return;
|
|
setStarted(true);
|
|
sendMessage(
|
|
initialMessage ||
|
|
`Hey — I'm starting a new project called "${projectName || "my project"}". I'd love your help defining what we're building.`
|
|
);
|
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
}, []);
|
|
|
|
const sendMessage = useCallback(
|
|
async (text: string) => {
|
|
if (!text.trim() || loading) return;
|
|
setError(null);
|
|
|
|
const userMsg: Message = { role: "user", content: text };
|
|
setMessages((prev) => [...prev, userMsg]);
|
|
setInput("");
|
|
setLoading(true);
|
|
|
|
try {
|
|
const res = await fetch(
|
|
`/api/projects/${projectId}/atlas-chat`,
|
|
{
|
|
method: "POST",
|
|
headers: { "Content-Type": "application/json" },
|
|
body: JSON.stringify({ message: text }),
|
|
}
|
|
);
|
|
|
|
const data = await res.json();
|
|
|
|
if (!res.ok) {
|
|
setError(data.error || "Something went wrong. Please try again.");
|
|
setMessages((prev) => prev.slice(0, -1));
|
|
return;
|
|
}
|
|
|
|
const assistantMsg: Message = {
|
|
role: "assistant",
|
|
content: data.reply || "...",
|
|
};
|
|
setMessages((prev) => [...prev, assistantMsg]);
|
|
|
|
if (data.prdContent) {
|
|
setPrdContent(data.prdContent);
|
|
}
|
|
} catch {
|
|
setError("Couldn't reach Atlas. Check your connection and try again.");
|
|
setMessages((prev) => prev.slice(0, -1));
|
|
} finally {
|
|
setLoading(false);
|
|
setTimeout(() => textareaRef.current?.focus(), 50);
|
|
}
|
|
},
|
|
[loading, projectId]
|
|
);
|
|
|
|
const handleKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
|
|
if (e.key === "Enter" && !e.shiftKey) {
|
|
e.preventDefault();
|
|
sendMessage(input);
|
|
}
|
|
};
|
|
|
|
const handleReset = async () => {
|
|
if (!confirm("Start the discovery conversation over from scratch?")) return;
|
|
await fetch(`/api/projects/${projectId}/atlas-chat`, { method: "DELETE" });
|
|
setMessages([]);
|
|
setPrdContent(null);
|
|
setStarted(false);
|
|
setError(null);
|
|
};
|
|
|
|
return (
|
|
<div className="flex flex-col rounded-2xl border border-border/60 bg-card shadow-sm overflow-hidden">
|
|
{/* Header */}
|
|
<div className="flex items-center justify-between px-5 py-3.5 border-b border-border/60 bg-gradient-to-r from-violet-50/80 to-indigo-50/50 dark:from-violet-950/30 dark:to-indigo-950/20">
|
|
<div className="flex items-center gap-3">
|
|
<AtlasAvatar />
|
|
<div>
|
|
<p className="text-sm font-semibold text-foreground">Atlas</p>
|
|
<p className="text-xs text-muted-foreground">Product Requirements</p>
|
|
</div>
|
|
</div>
|
|
<div className="flex items-center gap-2">
|
|
{prdContent && (
|
|
<div className="flex items-center gap-1.5 text-xs text-violet-600 dark:text-violet-400 bg-violet-100 dark:bg-violet-900/40 px-2.5 py-1 rounded-full">
|
|
<FileText className="w-3 h-3" />
|
|
PRD ready
|
|
</div>
|
|
)}
|
|
<Button
|
|
variant="ghost"
|
|
size="sm"
|
|
onClick={handleReset}
|
|
className="h-7 w-7 p-0 text-muted-foreground hover:text-foreground"
|
|
title="Start over"
|
|
>
|
|
<RotateCcw className="w-3.5 h-3.5" />
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Messages */}
|
|
<ScrollArea className="flex-1 max-h-[500px]">
|
|
<div className="px-5 py-4 space-y-5">
|
|
{messages.map((msg, i) => (
|
|
<div
|
|
key={i}
|
|
className={`flex gap-3 ${msg.role === "user" ? "justify-end" : "justify-start"}`}
|
|
>
|
|
{msg.role === "assistant" && <AtlasAvatar />}
|
|
|
|
<div
|
|
className={`max-w-[82%] ${
|
|
msg.role === "user"
|
|
? "bg-violet-600 text-white rounded-2xl rounded-tr-sm px-4 py-2.5"
|
|
: "bg-muted/60 rounded-2xl rounded-tl-sm px-4 py-3"
|
|
}`}
|
|
>
|
|
<p className="text-sm leading-relaxed whitespace-pre-wrap">
|
|
{msg.content}
|
|
</p>
|
|
</div>
|
|
|
|
{msg.role === "user" && (
|
|
<div className="w-7 h-7 rounded-full bg-muted flex items-center justify-center shrink-0">
|
|
<User className="w-3.5 h-3.5 text-muted-foreground" />
|
|
</div>
|
|
)}
|
|
</div>
|
|
))}
|
|
|
|
{/* Typing indicator */}
|
|
{loading && (
|
|
<div className="flex gap-3 justify-start">
|
|
<AtlasAvatar />
|
|
<div className="bg-muted/60 rounded-2xl rounded-tl-sm px-4 py-3">
|
|
<div className="flex gap-1.5 items-center h-4">
|
|
<span className="w-1.5 h-1.5 bg-violet-400 rounded-full animate-bounce [animation-delay:0ms]" />
|
|
<span className="w-1.5 h-1.5 bg-violet-400 rounded-full animate-bounce [animation-delay:150ms]" />
|
|
<span className="w-1.5 h-1.5 bg-violet-400 rounded-full animate-bounce [animation-delay:300ms]" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Error */}
|
|
{error && (
|
|
<div className="text-xs text-destructive bg-destructive/10 rounded-lg px-3 py-2">
|
|
{error}
|
|
</div>
|
|
)}
|
|
|
|
{/* PRD panel */}
|
|
{prdContent && <PrdPanel content={prdContent} />}
|
|
|
|
<div ref={bottomRef} />
|
|
</div>
|
|
</ScrollArea>
|
|
|
|
{/* Input */}
|
|
<div className="px-4 py-3 border-t border-border/60 bg-muted/20">
|
|
{prdContent ? (
|
|
<p className="text-xs text-center text-muted-foreground py-1">
|
|
PRD complete — the platform is now architecting your solution.
|
|
</p>
|
|
) : (
|
|
<div className="flex gap-2 items-end">
|
|
<Textarea
|
|
ref={textareaRef}
|
|
value={input}
|
|
onChange={(e) => setInput(e.target.value)}
|
|
onKeyDown={handleKeyDown}
|
|
placeholder="Reply to Atlas…"
|
|
rows={1}
|
|
className="resize-none min-h-[40px] max-h-[120px] text-sm rounded-xl border-border/60 focus-visible:ring-violet-500/30 bg-background"
|
|
style={{ overflow: "hidden" }}
|
|
onInput={(e) => {
|
|
const t = e.currentTarget;
|
|
t.style.height = "auto";
|
|
t.style.height = Math.min(t.scrollHeight, 120) + "px";
|
|
}}
|
|
/>
|
|
<Button
|
|
onClick={() => sendMessage(input)}
|
|
disabled={!input.trim() || loading}
|
|
size="sm"
|
|
className="h-10 w-10 p-0 rounded-xl bg-violet-600 hover:bg-violet-700 text-white shrink-0"
|
|
>
|
|
{loading ? (
|
|
<Loader2 className="w-4 h-4 animate-spin" />
|
|
) : (
|
|
<Send className="w-4 h-4" />
|
|
)}
|
|
</Button>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|