feat: add Atlas discovery chat UI and API route
- 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
This commit is contained in:
315
components/AtlasChat.tsx
Normal file
315
components/AtlasChat.tsx
Normal file
@@ -0,0 +1,315 @@
|
||||
"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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user