feat: replace AtlasChat with assistant-ui Thread component
- Install @assistant-ui/react and @assistant-ui/react-markdown - components/assistant-ui/thread.tsx — full Thread UI with primitives - components/assistant-ui/markdown-text.tsx — GFM markdown renderer - AtlasChat.tsx — useLocalRuntime adapter calling existing atlas-chat API Gives proper markdown rendering, branch switching, copy/retry actions, cancel button during streaming, and a polished thread experience. Made-with: Cursor
This commit is contained in:
@@ -1,207 +1,109 @@
|
||||
"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 { useEffect, useRef } from "react";
|
||||
import {
|
||||
Send,
|
||||
Loader2,
|
||||
User,
|
||||
RotateCcw,
|
||||
FileText,
|
||||
CheckCircle2,
|
||||
ChevronDown,
|
||||
ChevronUp,
|
||||
} from "lucide-react";
|
||||
AssistantRuntimeProvider,
|
||||
useLocalRuntime,
|
||||
type ChatModelAdapter,
|
||||
} from "@assistant-ui/react";
|
||||
import { Thread } from "@/components/assistant-ui/thread";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { FileText, RotateCcw } from "lucide-react";
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Types
|
||||
// Props
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
interface Message {
|
||||
role: "user" | "assistant";
|
||||
content: string;
|
||||
}
|
||||
|
||||
interface AtlasChatProps {
|
||||
projectId: string;
|
||||
projectName?: string;
|
||||
initialMessage?: string;
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Atlas avatar — distinct from orchestrator
|
||||
// Runtime adapter — calls our existing /api/projects/[id]/atlas-chat endpoint
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
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>
|
||||
);
|
||||
function makeAtlasAdapter(projectId: string): ChatModelAdapter {
|
||||
return {
|
||||
async run({ messages, abortSignal }) {
|
||||
const lastUser = [...messages].reverse().find((m) => m.role === "user");
|
||||
const text =
|
||||
lastUser?.content
|
||||
.filter((p) => p.type === "text")
|
||||
.map((p) => (p as { type: "text"; text: string }).text)
|
||||
.join("") ?? "";
|
||||
|
||||
const res = await fetch(`/api/projects/${projectId}/atlas-chat`, {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({ message: text }),
|
||||
signal: abortSignal,
|
||||
});
|
||||
|
||||
if (!res.ok) {
|
||||
const err = await res.json().catch(() => ({}));
|
||||
throw new Error(err.error || "Atlas is unavailable. Please try again.");
|
||||
}
|
||||
|
||||
const data = await res.json();
|
||||
|
||||
return {
|
||||
content: [{ type: "text", text: data.reply || "…" }],
|
||||
};
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// PRD preview panel
|
||||
// Inner component — has access to runtime context
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
function PrdPanel({ content }: { content: string }) {
|
||||
const [expanded, setExpanded] = useState(false);
|
||||
const preview = content.split("\n").slice(0, 6).join("\n");
|
||||
function AtlasChatInner({
|
||||
projectId,
|
||||
projectName,
|
||||
runtime,
|
||||
}: AtlasChatProps & { runtime: ReturnType<typeof useLocalRuntime> }) {
|
||||
const greeted = useRef(false);
|
||||
|
||||
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
|
||||
// Send Atlas's opening message automatically on first load
|
||||
useEffect(() => {
|
||||
bottomRef.current?.scrollIntoView({ behavior: "smooth" });
|
||||
}, [messages, loading]);
|
||||
if (greeted.current) return;
|
||||
greeted.current = true;
|
||||
|
||||
// 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.`
|
||||
);
|
||||
const opener =
|
||||
`Hey — I'm starting a new project called "${projectName || "my project"}". I'd love your help defining what we're building.`;
|
||||
|
||||
// Small delay so the thread is mounted before we submit
|
||||
const t = setTimeout(() => {
|
||||
runtime.thread.composer.setText(opener);
|
||||
runtime.thread.composer.send();
|
||||
}, 300);
|
||||
|
||||
return () => clearTimeout(t);
|
||||
// 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);
|
||||
// Reload to get a fresh runtime state
|
||||
window.location.reload();
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="flex flex-col rounded-2xl border border-border/60 bg-card shadow-sm overflow-hidden">
|
||||
<div className="flex flex-col rounded-2xl border border-border/60 bg-card shadow-sm overflow-hidden" style={{ height: "520px" }}>
|
||||
{/* 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 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 shrink-0">
|
||||
<div className="flex items-center gap-3">
|
||||
<AtlasAvatar />
|
||||
<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 shadow-sm">
|
||||
A
|
||||
</div>
|
||||
<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"
|
||||
@@ -214,102 +116,29 @@ export function AtlasChat({ projectId, projectName, initialMessage }: AtlasChatP
|
||||
</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>
|
||||
)}
|
||||
{/* Thread */}
|
||||
<div className="flex-1 overflow-hidden">
|
||||
<Thread />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Main export — wraps with runtime provider
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
export function AtlasChat({ projectId, projectName }: AtlasChatProps) {
|
||||
const adapter = makeAtlasAdapter(projectId);
|
||||
const runtime = useLocalRuntime(adapter);
|
||||
|
||||
return (
|
||||
<AssistantRuntimeProvider runtime={runtime}>
|
||||
<AtlasChatInner
|
||||
projectId={projectId}
|
||||
projectName={projectName}
|
||||
runtime={runtime}
|
||||
/>
|
||||
</AssistantRuntimeProvider>
|
||||
);
|
||||
}
|
||||
|
||||
50
components/assistant-ui/markdown-text.tsx
Normal file
50
components/assistant-ui/markdown-text.tsx
Normal file
@@ -0,0 +1,50 @@
|
||||
"use client";
|
||||
|
||||
import { MarkdownTextPrimitive } from "@assistant-ui/react-markdown";
|
||||
import remarkGfm from "remark-gfm";
|
||||
import type { FC } from "react";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
export const MarkdownText: FC = () => {
|
||||
return (
|
||||
<MarkdownTextPrimitive
|
||||
remarkPlugins={[remarkGfm]}
|
||||
className="prose prose-sm dark:prose-invert max-w-none leading-relaxed"
|
||||
components={{
|
||||
h1: ({ className, ...props }) => (
|
||||
<h1 className={cn("text-base font-bold mt-3 mb-1", className)} {...props} />
|
||||
),
|
||||
h2: ({ className, ...props }) => (
|
||||
<h2 className={cn("text-sm font-bold mt-3 mb-1", className)} {...props} />
|
||||
),
|
||||
h3: ({ className, ...props }) => (
|
||||
<h3 className={cn("text-sm font-semibold mt-2 mb-1", className)} {...props} />
|
||||
),
|
||||
p: ({ className, ...props }) => (
|
||||
<p className={cn("mb-2 last:mb-0", className)} {...props} />
|
||||
),
|
||||
ul: ({ className, ...props }) => (
|
||||
<ul className={cn("list-disc list-outside ml-4 mb-2 space-y-0.5", className)} {...props} />
|
||||
),
|
||||
ol: ({ className, ...props }) => (
|
||||
<ol className={cn("list-decimal list-outside ml-4 mb-2 space-y-0.5", className)} {...props} />
|
||||
),
|
||||
li: ({ className, ...props }) => (
|
||||
<li className={cn("leading-relaxed", className)} {...props} />
|
||||
),
|
||||
strong: ({ className, ...props }) => (
|
||||
<strong className={cn("font-semibold", className)} {...props} />
|
||||
),
|
||||
code: ({ className, ...props }) => (
|
||||
<code className={cn("bg-muted px-1 py-0.5 rounded text-xs font-mono", className)} {...props} />
|
||||
),
|
||||
pre: ({ className, ...props }) => (
|
||||
<pre className={cn("bg-muted rounded-lg p-3 overflow-x-auto text-xs my-2", className)} {...props} />
|
||||
),
|
||||
blockquote: ({ className, ...props }) => (
|
||||
<blockquote className={cn("border-l-2 border-muted-foreground/30 pl-3 italic text-muted-foreground my-2", className)} {...props} />
|
||||
),
|
||||
}}
|
||||
/>
|
||||
);
|
||||
};
|
||||
226
components/assistant-ui/thread.tsx
Normal file
226
components/assistant-ui/thread.tsx
Normal file
@@ -0,0 +1,226 @@
|
||||
"use client";
|
||||
|
||||
import {
|
||||
ActionBarPrimitive,
|
||||
BranchPickerPrimitive,
|
||||
ComposerPrimitive,
|
||||
MessagePrimitive,
|
||||
ThreadPrimitive,
|
||||
} from "@assistant-ui/react";
|
||||
import {
|
||||
ArrowDownIcon,
|
||||
ArrowUpIcon,
|
||||
CheckIcon,
|
||||
ChevronLeftIcon,
|
||||
ChevronRightIcon,
|
||||
CopyIcon,
|
||||
RefreshCwIcon,
|
||||
SquareIcon,
|
||||
} from "lucide-react";
|
||||
import type { FC } from "react";
|
||||
import { MarkdownText } from "./markdown-text";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Thread root
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
export const Thread: FC = () => (
|
||||
<ThreadPrimitive.Root className="flex flex-col h-full">
|
||||
<ThreadPrimitive.Viewport className="flex-1 overflow-y-auto px-4 py-4 space-y-4">
|
||||
<ThreadPrimitive.Empty>
|
||||
<ThreadWelcome />
|
||||
</ThreadPrimitive.Empty>
|
||||
|
||||
<ThreadPrimitive.Messages
|
||||
components={{ UserMessage, AssistantMessage }}
|
||||
/>
|
||||
|
||||
<ThreadPrimitive.FollowupSuggestions
|
||||
components={{ Suggestion: FollowupSuggestion }}
|
||||
/>
|
||||
</ThreadPrimitive.Viewport>
|
||||
|
||||
<div className="relative">
|
||||
<ThreadScrollToBottom />
|
||||
<Composer />
|
||||
</div>
|
||||
</ThreadPrimitive.Root>
|
||||
);
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Scroll to bottom
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
const ThreadScrollToBottom: FC = () => (
|
||||
<ThreadPrimitive.ScrollToBottom asChild>
|
||||
<button className="absolute -top-10 right-4 flex h-8 w-8 items-center justify-center rounded-full border border-border bg-background shadow-sm hover:bg-accent transition-colors">
|
||||
<ArrowDownIcon className="h-3.5 w-3.5" />
|
||||
</button>
|
||||
</ThreadPrimitive.ScrollToBottom>
|
||||
);
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Welcome screen (shown when thread is empty)
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
const ThreadWelcome: FC = () => (
|
||||
<div className="flex flex-col items-center justify-center py-8 text-center gap-2">
|
||||
<div className="w-10 h-10 rounded-full bg-gradient-to-br from-violet-500 to-indigo-600 flex items-center justify-center text-white font-bold text-lg shadow-sm">
|
||||
A
|
||||
</div>
|
||||
<p className="text-sm font-medium text-foreground">Atlas</p>
|
||||
<p className="text-xs text-muted-foreground max-w-xs">
|
||||
Your product requirements guide. Let's define what you're building.
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Followup suggestions
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
const FollowupSuggestion: FC<{ suggestion: { prompt: string } }> = ({ suggestion }) => (
|
||||
<ThreadPrimitive.Suggestion prompt={suggestion.prompt} asChild autoSend>
|
||||
<button className="text-xs px-3 py-1.5 rounded-full border border-violet-200 dark:border-violet-800 text-violet-700 dark:text-violet-300 hover:bg-violet-50 dark:hover:bg-violet-950/40 transition-colors">
|
||||
{suggestion.prompt}
|
||||
</button>
|
||||
</ThreadPrimitive.Suggestion>
|
||||
);
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Composer (input area)
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
const Composer: FC = () => (
|
||||
<ComposerPrimitive.Root className="flex items-end gap-2 px-4 py-3 border-t border-border/60 bg-muted/20">
|
||||
<ComposerPrimitive.Input
|
||||
placeholder="Reply to Atlas…"
|
||||
rows={1}
|
||||
autoFocus
|
||||
className="flex-1 resize-none bg-background border border-border/60 rounded-xl px-3.5 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-violet-500/30 min-h-[40px] max-h-[120px] leading-relaxed"
|
||||
/>
|
||||
<ThreadPrimitive.If running={false}>
|
||||
<ComposerPrimitive.Send asChild>
|
||||
<button className="h-10 w-10 rounded-xl bg-violet-600 hover:bg-violet-700 text-white flex items-center justify-center shrink-0 transition-colors disabled:opacity-40 disabled:cursor-not-allowed">
|
||||
<ArrowUpIcon className="h-4 w-4" />
|
||||
</button>
|
||||
</ComposerPrimitive.Send>
|
||||
</ThreadPrimitive.If>
|
||||
<ThreadPrimitive.If running>
|
||||
<ComposerPrimitive.Cancel asChild>
|
||||
<button className="h-10 w-10 rounded-xl bg-violet-600 hover:bg-violet-700 text-white flex items-center justify-center shrink-0 transition-colors">
|
||||
<SquareIcon className="h-3.5 w-3.5 fill-white" />
|
||||
</button>
|
||||
</ComposerPrimitive.Cancel>
|
||||
</ThreadPrimitive.If>
|
||||
</ComposerPrimitive.Root>
|
||||
);
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// User message
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
const UserMessage: FC = () => (
|
||||
<MessagePrimitive.Root className="flex justify-end gap-2 group">
|
||||
<div className="max-w-[82%]">
|
||||
<MessagePrimitive.Content
|
||||
components={{ Text: UserText }}
|
||||
/>
|
||||
<UserActionBar />
|
||||
</div>
|
||||
</MessagePrimitive.Root>
|
||||
);
|
||||
|
||||
const UserText: FC<{ text: string }> = ({ text }) => (
|
||||
<div className="bg-violet-600 text-white rounded-2xl rounded-tr-sm px-4 py-2.5 text-sm leading-relaxed whitespace-pre-wrap">
|
||||
{text}
|
||||
</div>
|
||||
);
|
||||
|
||||
const UserActionBar: FC = () => (
|
||||
<ActionBarPrimitive.Root
|
||||
hideWhenRunning
|
||||
autohide="not-last"
|
||||
className="flex items-center gap-1 mt-1 justify-end opacity-0 group-hover:opacity-100 transition-opacity"
|
||||
>
|
||||
<ActionBarPrimitive.Edit asChild>
|
||||
<button className="text-[10px] text-muted-foreground hover:text-foreground px-1.5 py-0.5 rounded hover:bg-muted transition-colors">
|
||||
Edit
|
||||
</button>
|
||||
</ActionBarPrimitive.Edit>
|
||||
</ActionBarPrimitive.Root>
|
||||
);
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Assistant message
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
const AssistantMessage: FC = () => (
|
||||
<MessagePrimitive.Root className="flex justify-start gap-2.5 group">
|
||||
<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 mt-0.5 shadow-sm">
|
||||
A
|
||||
</div>
|
||||
<div className="max-w-[82%]">
|
||||
<div className="bg-muted/60 rounded-2xl rounded-tl-sm px-4 py-3 text-sm">
|
||||
<MessagePrimitive.Content components={{ Text: AssistantText }} />
|
||||
</div>
|
||||
<AssistantActionBar />
|
||||
<BranchPicker />
|
||||
</div>
|
||||
</MessagePrimitive.Root>
|
||||
);
|
||||
|
||||
const AssistantText: FC = () => <MarkdownText />;
|
||||
|
||||
const AssistantActionBar: FC = () => (
|
||||
<ActionBarPrimitive.Root
|
||||
hideWhenRunning
|
||||
autohide="not-last"
|
||||
className="flex items-center gap-1 mt-1 opacity-0 group-hover:opacity-100 transition-opacity"
|
||||
>
|
||||
<ActionBarPrimitive.Copy asChild>
|
||||
<button className="flex items-center gap-1 text-[10px] text-muted-foreground hover:text-foreground px-1.5 py-0.5 rounded hover:bg-muted transition-colors">
|
||||
<MessagePrimitive.If copied>
|
||||
<CheckIcon className="h-2.5 w-2.5" />
|
||||
Copied
|
||||
</MessagePrimitive.If>
|
||||
<MessagePrimitive.If copied={false}>
|
||||
<CopyIcon className="h-2.5 w-2.5" />
|
||||
Copy
|
||||
</MessagePrimitive.If>
|
||||
</button>
|
||||
</ActionBarPrimitive.Copy>
|
||||
<ActionBarPrimitive.Reload asChild>
|
||||
<button className="flex items-center gap-1 text-[10px] text-muted-foreground hover:text-foreground px-1.5 py-0.5 rounded hover:bg-muted transition-colors">
|
||||
<RefreshCwIcon className="h-2.5 w-2.5" />
|
||||
Retry
|
||||
</button>
|
||||
</ActionBarPrimitive.Reload>
|
||||
</ActionBarPrimitive.Root>
|
||||
);
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Branch picker (for regenerated responses)
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
const BranchPicker: FC = () => (
|
||||
<BranchPickerPrimitive.Root
|
||||
hideWhenSingleBranch
|
||||
className="flex items-center gap-1 mt-1 opacity-0 group-hover:opacity-100 transition-opacity"
|
||||
>
|
||||
<BranchPickerPrimitive.Previous asChild>
|
||||
<button className="text-muted-foreground hover:text-foreground transition-colors">
|
||||
<ChevronLeftIcon className="h-3 w-3" />
|
||||
</button>
|
||||
</BranchPickerPrimitive.Previous>
|
||||
<span className="text-[10px] text-muted-foreground">
|
||||
<BranchPickerPrimitive.Number /> / <BranchPickerPrimitive.Count />
|
||||
</span>
|
||||
<BranchPickerPrimitive.Next asChild>
|
||||
<button className="text-muted-foreground hover:text-foreground transition-colors">
|
||||
<ChevronRightIcon className="h-3 w-3" />
|
||||
</button>
|
||||
</BranchPickerPrimitive.Next>
|
||||
</BranchPickerPrimitive.Root>
|
||||
);
|
||||
2888
package-lock.json
generated
2888
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
11
package.json
11
package.json
@@ -19,13 +19,15 @@
|
||||
"prisma:generate": "prisma generate"
|
||||
},
|
||||
"dependencies": {
|
||||
"@assistant-ui/react": "^0.12.14",
|
||||
"@assistant-ui/react-markdown": "^0.12.5",
|
||||
"@auth/core": "^0.34.3",
|
||||
"@next-auth/prisma-adapter": "^1.0.7",
|
||||
"@prisma/client": "^5.22.0",
|
||||
"@google-cloud/vertexai": "^1.10.0",
|
||||
"@google/genai": "^1.30.0",
|
||||
"@google/generative-ai": "^0.24.1",
|
||||
"@modelcontextprotocol/sdk": "^1.22.0",
|
||||
"@next-auth/prisma-adapter": "^1.0.7",
|
||||
"@prisma/client": "^5.22.0",
|
||||
"@radix-ui/react-alert-dialog": "^1.1.15",
|
||||
"@radix-ui/react-dialog": "^1.1.15",
|
||||
"@radix-ui/react-dropdown-menu": "^2.1.16",
|
||||
@@ -48,14 +50,17 @@
|
||||
"next-auth": "^4.24.13",
|
||||
"next-themes": "^0.4.6",
|
||||
"pg": "^8.16.3",
|
||||
"radix-ui": "^1.4.3",
|
||||
"react": "^19.2.4",
|
||||
"react-dom": "^19.2.4",
|
||||
"remark-gfm": "^4.0.1",
|
||||
"sonner": "^2.0.7",
|
||||
"tailwind-merge": "^3.4.0",
|
||||
"tsx": "^4.20.6",
|
||||
"uuid": "^13.0.0",
|
||||
"v0-sdk": "^0.14.0",
|
||||
"zod": "^3.23.8"
|
||||
"zod": "^3.23.8",
|
||||
"zustand": "^5.0.11"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@tailwindcss/postcss": "^4",
|
||||
|
||||
Reference in New Issue
Block a user