mark/vibn-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: clean up chat UI layout and align theme to neutral white

Browse Source 
- Replace beige background with clean neutral white (matches Grok aesthetic)
- Remove hardcoded hex colors in thread.tsx - use CSS variables throughout
- Remove scroll-to-bottom button that showed incorrectly after auto-send
- Chat container now integrates visually with the page instead of floating

Made-with: Cursor
This commit is contained in:
Mark Henderson
2026-03-01 20:21:39 -08:00
parent a2bde95222
commit c842a4b75b
3 changed files with 50 additions and 75 deletions
Download Patch File Download Diff File Expand all files Collapse all files

51
components/assistant-ui/thread.tsx
View File

@@ -8,7 +8,6 @@ import {
ThreadPrimitive,
} from "@assistant-ui/react";
import {
ArrowDownIcon,
ArrowUpIcon,
CheckIcon,
ChevronLeftIcon,
@@ -26,7 +25,7 @@ import { MarkdownText } from "./markdown-text";
// ---------------------------------------------------------------------------
export const Thread: FC = () => (
<ThreadPrimitive.Root className="flex flex-col h-full bg-[#fdfdfd] dark:bg-[#141414] px-4">
<ThreadPrimitive.Root className="flex flex-col h-full px-4">
{/* Empty state: centered welcome + composer */}
<ThreadPrimitive.Empty>
@@ -35,8 +34,8 @@ export const Thread: FC = () => (
<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">
<p className="text-sm font-medium text-foreground">Atlas</p>
<p className="text-xs text-muted-foreground max-w-xs">
Your product strategist. Let&apos;s define what you&apos;re building.
</p>
</div>
@@ -56,51 +55,33 @@ export const Thread: FC = () => (
/>
</ThreadPrimitive.Viewport>
{/* Scroll to bottom */}
<div className="relative">
<ThreadScrollToBottom />
<Composer />
</div>
<Composer />
</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]">
<div className="flex items-end gap-2 rounded-[26px] bg-muted ring-1 ring-border px-4 py-3 transition-shadow focus-within:ring-ring/50">
<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]"
className="flex-1 resize-none bg-transparent text-foreground placeholder:text-muted-foreground 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">
<button className="h-8 w-8 rounded-full bg-foreground text-background 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">
<button className="h-8 w-8 rounded-full bg-foreground text-background flex items-center justify-center shrink-0 hover:opacity-80 transition-opacity">
<SquareIcon className="h-3 w-3 fill-current" />
</button>
</ComposerPrimitive.Cancel>
@@ -115,7 +96,7 @@ const Composer: 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 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">
<button className="text-xs px-3 py-1.5 rounded-full ring-1 ring-border text-muted-foreground hover:ring-ring/50 hover:text-foreground transition-all">
{suggestion.prompt}
</button>
</ThreadPrimitive.Suggestion>
@@ -135,7 +116,7 @@ const UserMessage: FC = () => (
);
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">
<div className="bg-foreground text-background rounded-[20px] rounded-tr-[6px] px-4 py-2.5 text-sm leading-relaxed whitespace-pre-wrap">
{text}
</div>
);
@@ -147,7 +128,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-[#9a9a9a] dark:text-[#6b6b6b] hover:text-[#0d0d0d] dark:hover:text-white px-1.5 py-0.5 rounded transition-colors">
<button className="text-[10px] text-muted-foreground hover:text-foreground px-1.5 py-0.5 rounded transition-colors">
Edit
</button>
</ActionBarPrimitive.Edit>
@@ -184,7 +165,7 @@ const AssistantActionBar: FC = () => (
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">
<button className="flex items-center gap-1 text-[10px] text-muted-foreground hover:text-foreground px-1.5 py-0.5 rounded transition-colors">
<MessagePrimitive.If copied>
<CheckIcon className="h-2.5 w-2.5" />
Copied
@@ -196,7 +177,7 @@ const AssistantActionBar: FC = () => (
</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">
<button className="flex items-center gap-1 text-[10px] text-muted-foreground hover:text-foreground px-1.5 py-0.5 rounded transition-colors">
<RefreshCwIcon className="h-2.5 w-2.5" />
Retry
</button>
@@ -214,15 +195,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-[#9a9a9a] dark:text-[#6b6b6b] hover:text-[#0d0d0d] dark:hover:text-white transition-colors">
<button className="text-muted-foreground hover:text-foreground transition-colors">
<ChevronLeftIcon className="h-3 w-3" />
</button>
</BranchPickerPrimitive.Previous>
<span className="text-[10px] text-[#9a9a9a] dark:text-[#6b6b6b]">
<span className="text-[10px] text-muted-foreground">
<BranchPickerPrimitive.Number /> / <BranchPickerPrimitive.Count />
</span>
<BranchPickerPrimitive.Next asChild>
<button className="text-[#9a9a9a] dark:text-[#6b6b6b] hover:text-[#0d0d0d] dark:hover:text-white transition-colors">
<button className="text-muted-foreground hover:text-foreground transition-colors">
<ChevronRightIcon className="h-3 w-3" />
</button>
</BranchPickerPrimitive.Next>