Mark Henderson
a2bde95222
Clean pill composer with inverted send button, plain assistant messages (no bubble), centered welcome+composer when thread is empty, and Grok color palette (#fdfdfd/#141414 backgrounds, ring borders). Made-with: Cursor
231 lines
9.3 KiB
TypeScript
231 lines
9.3 KiB
TypeScript
"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";
|
|
|
|
// ---------------------------------------------------------------------------
|
|
// Thread root — Grok-style layout
|
|
// When empty: logo + composer centered. When not empty: viewport + composer bottom.
|
|
// ---------------------------------------------------------------------------
|
|
|
|
export const Thread: FC = () => (
|
|
<ThreadPrimitive.Root className="flex flex-col h-full bg-[#fdfdfd] dark:bg-[#141414] px-4">
|
|
|
|
{/* Empty state: centered welcome + composer */}
|
|
<ThreadPrimitive.Empty>
|
|
<div className="flex h-full flex-col items-center justify-center gap-6">
|
|
<div className="flex flex-col items-center gap-2 text-center">
|
|
<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-base shadow-sm">
|
|
A
|
|
</div>
|
|
<p className="text-sm font-medium text-[#0d0d0d] dark:text-white">Atlas</p>
|
|
<p className="text-xs text-[#9a9a9a] dark:text-[#6b6b6b] max-w-xs">
|
|
Your product strategist. Let's define what you're building.
|
|
</p>
|
|
</div>
|
|
<div className="w-full max-w-2xl">
|
|
<Composer />
|
|
</div>
|
|
</div>
|
|
</ThreadPrimitive.Empty>
|
|
|
|
{/* Messages viewport */}
|
|
<ThreadPrimitive.Viewport className="flex-1 overflow-y-auto py-6 space-y-6">
|
|
<ThreadPrimitive.Messages
|
|
components={{ UserMessage, AssistantMessage }}
|
|
/>
|
|
<ThreadPrimitive.Suggestions
|
|
components={{ Suggestion: FollowupSuggestion }}
|
|
/>
|
|
</ThreadPrimitive.Viewport>
|
|
|
|
{/* Scroll to bottom */}
|
|
<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 bg-[#0d0d0d] dark:bg-white text-white dark:text-[#0d0d0d] shadow hover:opacity-80 transition-opacity">
|
|
<ArrowDownIcon className="h-3.5 w-3.5" />
|
|
</button>
|
|
</ThreadPrimitive.ScrollToBottom>
|
|
);
|
|
|
|
// ---------------------------------------------------------------------------
|
|
// Composer — Grok pill style with inverted send button
|
|
// ---------------------------------------------------------------------------
|
|
|
|
const Composer: FC = () => (
|
|
<ComposerPrimitive.Root className="group/composer mx-auto w-full max-w-2xl mb-3">
|
|
<div className="flex items-end gap-2 rounded-[26px] bg-[#f8f8f8] dark:bg-[#212121] ring-1 ring-[#e5e5e5] dark:ring-[#2a2a2a] px-4 py-3 transition-shadow focus-within:ring-[#c5c5c5] dark:focus-within:ring-[#3a3a3a]">
|
|
<ComposerPrimitive.Input
|
|
placeholder="What do you want to build?"
|
|
rows={1}
|
|
autoFocus
|
|
className="flex-1 resize-none bg-transparent text-[#0d0d0d] dark:text-white placeholder:text-[#9a9a9a] dark:placeholder:text-[#6b6b6b] text-sm leading-relaxed outline-none min-h-[24px] max-h-[120px]"
|
|
/>
|
|
{/* Send button (hidden while running) */}
|
|
<ThreadPrimitive.If running={false}>
|
|
<ComposerPrimitive.Send asChild>
|
|
<button className="h-8 w-8 rounded-full bg-[#0d0d0d] dark:bg-white text-white dark:text-[#0d0d0d] flex items-center justify-center shrink-0 hover:opacity-80 transition-opacity disabled:opacity-30 disabled:cursor-not-allowed">
|
|
<ArrowUpIcon className="h-3.5 w-3.5" />
|
|
</button>
|
|
</ComposerPrimitive.Send>
|
|
</ThreadPrimitive.If>
|
|
{/* Cancel button (shown while running) */}
|
|
<ThreadPrimitive.If running>
|
|
<ComposerPrimitive.Cancel asChild>
|
|
<button className="h-8 w-8 rounded-full bg-[#0d0d0d] dark:bg-white text-white dark:text-[#0d0d0d] flex items-center justify-center shrink-0 hover:opacity-80 transition-opacity">
|
|
<SquareIcon className="h-3 w-3 fill-current" />
|
|
</button>
|
|
</ComposerPrimitive.Cancel>
|
|
</ThreadPrimitive.If>
|
|
</div>
|
|
</ComposerPrimitive.Root>
|
|
);
|
|
|
|
// ---------------------------------------------------------------------------
|
|
// Followup suggestions
|
|
// ---------------------------------------------------------------------------
|
|
|
|
const FollowupSuggestion: FC<{ suggestion: { prompt: string } }> = ({ suggestion }) => (
|
|
<ThreadPrimitive.Suggestion prompt={suggestion.prompt} send asChild>
|
|
<button className="text-xs px-3 py-1.5 rounded-full ring-1 ring-[#e5e5e5] dark:ring-[#2a2a2a] text-[#9a9a9a] dark:text-[#6b6b6b] hover:ring-[#c5c5c5] dark:hover:ring-[#3a3a3a] hover:text-[#0d0d0d] dark:hover:text-white transition-all">
|
|
{suggestion.prompt}
|
|
</button>
|
|
</ThreadPrimitive.Suggestion>
|
|
);
|
|
|
|
// ---------------------------------------------------------------------------
|
|
// User message — subtle right-aligned bubble
|
|
// ---------------------------------------------------------------------------
|
|
|
|
const UserMessage: FC = () => (
|
|
<MessagePrimitive.Root className="flex justify-end group">
|
|
<div className="max-w-[72%]">
|
|
<MessagePrimitive.Content components={{ Text: UserText }} />
|
|
<UserActionBar />
|
|
</div>
|
|
</MessagePrimitive.Root>
|
|
);
|
|
|
|
const UserText: FC<{ text: string }> = ({ text }) => (
|
|
<div className="bg-[#0d0d0d] dark:bg-white text-white dark:text-[#0d0d0d] rounded-[20px] rounded-tr-[6px] 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-[#9a9a9a] dark:text-[#6b6b6b] hover:text-[#0d0d0d] dark:hover:text-white px-1.5 py-0.5 rounded transition-colors">
|
|
Edit
|
|
</button>
|
|
</ActionBarPrimitive.Edit>
|
|
</ActionBarPrimitive.Root>
|
|
);
|
|
|
|
// ---------------------------------------------------------------------------
|
|
// Assistant message — plain text, no bubble, small avatar
|
|
// ---------------------------------------------------------------------------
|
|
|
|
const AssistantMessage: FC = () => (
|
|
<MessagePrimitive.Root className="flex justify-start gap-3 group">
|
|
<div className="w-6 h-6 rounded-full bg-gradient-to-br from-violet-500 to-indigo-600 flex items-center justify-center text-white text-[10px] font-bold shrink-0 mt-1 shadow-sm">
|
|
A
|
|
</div>
|
|
<div className="flex-1 min-w-0 max-w-[80%]">
|
|
<div className="text-sm text-[#0d0d0d] dark:text-white leading-relaxed">
|
|
<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-2 mt-1.5 opacity-0 group-hover:opacity-100 transition-opacity"
|
|
>
|
|
<ActionBarPrimitive.Copy asChild>
|
|
<button className="flex items-center gap-1 text-[10px] text-[#9a9a9a] dark:text-[#6b6b6b] hover:text-[#0d0d0d] dark:hover:text-white px-1.5 py-0.5 rounded 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-[#9a9a9a] dark:text-[#6b6b6b] hover:text-[#0d0d0d] dark:hover:text-white px-1.5 py-0.5 rounded transition-colors">
|
|
<RefreshCwIcon className="h-2.5 w-2.5" />
|
|
Retry
|
|
</button>
|
|
</ActionBarPrimitive.Reload>
|
|
</ActionBarPrimitive.Root>
|
|
);
|
|
|
|
// ---------------------------------------------------------------------------
|
|
// Branch picker
|
|
// ---------------------------------------------------------------------------
|
|
|
|
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-[#9a9a9a] dark:text-[#6b6b6b] hover:text-[#0d0d0d] dark:hover:text-white transition-colors">
|
|
<ChevronLeftIcon className="h-3 w-3" />
|
|
</button>
|
|
</BranchPickerPrimitive.Previous>
|
|
<span className="text-[10px] text-[#9a9a9a] dark:text-[#6b6b6b]">
|
|
<BranchPickerPrimitive.Number /> / <BranchPickerPrimitive.Count />
|
|
</span>
|
|
<BranchPickerPrimitive.Next asChild>
|
|
<button className="text-[#9a9a9a] dark:text-[#6b6b6b] hover:text-[#0d0d0d] dark:hover:text-white transition-colors">
|
|
<ChevronRightIcon className="h-3 w-3" />
|
|
</button>
|
|
</BranchPickerPrimitive.Next>
|
|
</BranchPickerPrimitive.Root>
|
|
);
|