feat: apply Grok-style minimalist UI to Atlas chat
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
This commit is contained in:
@@ -8,7 +8,7 @@ import {
|
||||
} from "@assistant-ui/react";
|
||||
import { Thread } from "@/components/assistant-ui/thread";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { FileText, RotateCcw } from "lucide-react";
|
||||
import { RotateCcw } from "lucide-react";
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Props
|
||||
@@ -91,29 +91,18 @@ function AtlasChatInner({
|
||||
};
|
||||
|
||||
return (
|
||||
<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 shrink-0">
|
||||
<div className="flex items-center gap-3">
|
||||
<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">
|
||||
<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 className="flex flex-col rounded-2xl overflow-hidden bg-[#fdfdfd] dark:bg-[#141414] ring-1 ring-[#e5e5e5] dark:ring-[#2a2a2a]" style={{ height: "600px" }}>
|
||||
{/* Minimal header bar */}
|
||||
<div className="flex items-center justify-end px-4 py-2.5 shrink-0 border-b border-[#e5e5e5] dark:border-[#2a2a2a]">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={handleReset}
|
||||
className="h-7 w-7 p-0 text-[#9a9a9a] dark:text-[#6b6b6b] hover:text-[#0d0d0d] dark:hover:text-white"
|
||||
title="Start over"
|
||||
>
|
||||
<RotateCcw className="w-3.5 h-3.5" />
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* Thread */}
|
||||
|
||||
@@ -19,28 +19,44 @@ import {
|
||||
} from "lucide-react";
|
||||
import type { FC } from "react";
|
||||
import { MarkdownText } from "./markdown-text";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Thread root
|
||||
// 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">
|
||||
<ThreadPrimitive.Viewport className="flex-1 overflow-y-auto px-4 py-4 space-y-4">
|
||||
<ThreadPrimitive.Empty>
|
||||
<ThreadWelcome />
|
||||
</ThreadPrimitive.Empty>
|
||||
<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 />
|
||||
@@ -54,26 +70,43 @@ export const Thread: FC = () => (
|
||||
|
||||
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">
|
||||
<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>
|
||||
);
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Welcome screen (shown when thread is empty)
|
||||
// Composer — Grok pill style with inverted send button
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
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
|
||||
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>
|
||||
<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>
|
||||
</ComposerPrimitive.Root>
|
||||
);
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
@@ -82,58 +115,27 @@ const ThreadWelcome: FC = () => (
|
||||
|
||||
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 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">
|
||||
<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>
|
||||
);
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// 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
|
||||
// User message — subtle right-aligned bubble
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
const UserMessage: FC = () => (
|
||||
<MessagePrimitive.Root className="flex justify-end gap-2 group">
|
||||
<div className="max-w-[82%]">
|
||||
<MessagePrimitive.Content
|
||||
components={{ Text: UserText }}
|
||||
/>
|
||||
<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-violet-600 text-white rounded-2xl rounded-tr-sm px-4 py-2.5 text-sm leading-relaxed whitespace-pre-wrap">
|
||||
<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>
|
||||
);
|
||||
@@ -145,7 +147,7 @@ const UserActionBar: FC = () => (
|
||||
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">
|
||||
<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>
|
||||
@@ -153,16 +155,16 @@ const UserActionBar: FC = () => (
|
||||
);
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Assistant message
|
||||
// Assistant message — plain text, no bubble, small avatar
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
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">
|
||||
<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="max-w-[82%]">
|
||||
<div className="bg-muted/60 rounded-2xl rounded-tl-sm px-4 py-3 text-sm">
|
||||
<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 />
|
||||
@@ -171,16 +173,18 @@ const AssistantMessage: FC = () => (
|
||||
</MessagePrimitive.Root>
|
||||
);
|
||||
|
||||
const AssistantText: FC = () => <MarkdownText />;
|
||||
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"
|
||||
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-muted-foreground hover:text-foreground px-1.5 py-0.5 rounded hover:bg-muted transition-colors">
|
||||
<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
|
||||
@@ -192,7 +196,7 @@ const AssistantActionBar: FC = () => (
|
||||
</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">
|
||||
<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>
|
||||
@@ -201,7 +205,7 @@ const AssistantActionBar: FC = () => (
|
||||
);
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Branch picker (for regenerated responses)
|
||||
// Branch picker
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
const BranchPicker: FC = () => (
|
||||
@@ -210,15 +214,15 @@ const BranchPicker: FC = () => (
|
||||
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">
|
||||
<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-muted-foreground">
|
||||
<span className="text-[10px] text-[#9a9a9a] dark:text-[#6b6b6b]">
|
||||
<BranchPickerPrimitive.Number /> / <BranchPickerPrimitive.Count />
|
||||
</span>
|
||||
<BranchPickerPrimitive.Next asChild>
|
||||
<button className="text-muted-foreground hover:text-foreground transition-colors">
|
||||
<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>
|
||||
|
||||
Reference in New Issue
Block a user