"use client"; import { ActionBarPrimitive, BranchPickerPrimitive, ComposerPrimitive, MessagePrimitive, ThreadPrimitive, } from "@assistant-ui/react"; import { CheckIcon, ChevronLeftIcon, ChevronRightIcon, CopyIcon, RefreshCwIcon, SquareIcon, } from "lucide-react"; import type { FC } from "react"; import { MarkdownText } from "./markdown-text"; // --------------------------------------------------------------------------- // Thread root — Stackless style: flat on beige, no card // --------------------------------------------------------------------------- export const Thread: FC<{ userInitial?: string }> = ({ userInitial = "Y" }) => ( {/* Empty state */}
A

Atlas

Your product strategist. Let's define what you're building.

{/* Messages */} , AssistantMessage, }} /> {/* Input bar */}
); // --------------------------------------------------------------------------- // Composer — Stackless white pill input bar // --------------------------------------------------------------------------- const Composer: FC<{ userInitial?: string }> = () => (
); // --------------------------------------------------------------------------- // Assistant message — black avatar, "Atlas" label, plain text // --------------------------------------------------------------------------- const AssistantMessage: FC = () => ( {/* Avatar */}
A
{/* Sender label */}
Atlas
{/* Message content */}
); const AssistantText: FC = () => ; const AssistantActionBar: FC = () => ( ); // --------------------------------------------------------------------------- // User message — warm avatar, "You" label, same layout as Atlas // --------------------------------------------------------------------------- const UserMessage: FC<{ userInitial?: string }> = ({ userInitial = "Y" }) => ( {/* Avatar */}
{userInitial}
{/* Sender label */}
You
{/* Message content */}
); const UserText: FC<{ text: string }> = ({ text }) => {text}; const UserActionBar: FC = () => ( ); // --------------------------------------------------------------------------- // Branch picker // --------------------------------------------------------------------------- const BranchPicker: FC = () => ( / );