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

feat: apply Grok-style minimalist UI to Atlas chat

Browse Source 
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:
Mark Henderson
2026-03-01 20:14:15 -08:00
parent 86504c4c55
commit a2bde95222
2 changed files with 87 additions and 94 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
components/AtlasChat.tsx
View File

@@ -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 */}