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:
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>
|
||||
);
|
||||
Reference in New Issue
Block a user