Apply Stackless chat design to Atlas thread
- Remove card container (no more rounded-2xl, ring, 600px height) - Chat fills the full layout space naturally - Avatars: 28x28 rounded-7 squares (black for Atlas, warm gray for user) - Both sides use same avatar+label layout (no right-aligned bubbles) - Sender labels: tiny uppercase ATLAS / YOU above each message - Input bar: white pill with border, Send button, Stop for streaming - User initial pulled from session (name or email first letter) Made-with: Cursor
This commit is contained in:
@@ -1,28 +1,19 @@
|
||||
"use client";
|
||||
|
||||
import { useEffect, useRef } from "react";
|
||||
import { useSession } from "next-auth/react";
|
||||
import {
|
||||
AssistantRuntimeProvider,
|
||||
useLocalRuntime,
|
||||
type ChatModelAdapter,
|
||||
} from "@assistant-ui/react";
|
||||
import { Thread } from "@/components/assistant-ui/thread";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { RotateCcw } from "lucide-react";
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Props
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
interface AtlasChatProps {
|
||||
projectId: string;
|
||||
projectName?: string;
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Runtime adapter — calls our existing /api/projects/[id]/atlas-chat endpoint
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
function makeAtlasAdapter(projectId: string): ChatModelAdapter {
|
||||
return {
|
||||
async run({ messages, abortSignal }) {
|
||||
@@ -46,78 +37,49 @@ function makeAtlasAdapter(projectId: string): ChatModelAdapter {
|
||||
}
|
||||
|
||||
const data = await res.json();
|
||||
|
||||
return {
|
||||
content: [{ type: "text", text: data.reply || "…" }],
|
||||
};
|
||||
return { content: [{ type: "text", text: data.reply || "…" }] };
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Inner component — has access to runtime context
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
function AtlasChatInner({
|
||||
projectId,
|
||||
projectName,
|
||||
userInitial,
|
||||
runtime,
|
||||
}: AtlasChatProps & { runtime: ReturnType<typeof useLocalRuntime> }) {
|
||||
}: AtlasChatProps & {
|
||||
userInitial: string;
|
||||
runtime: ReturnType<typeof useLocalRuntime>;
|
||||
}) {
|
||||
const greeted = useRef(false);
|
||||
|
||||
// Send Atlas's opening message automatically on first load
|
||||
useEffect(() => {
|
||||
if (greeted.current) return;
|
||||
greeted.current = true;
|
||||
|
||||
const opener =
|
||||
`Hey — I'm starting a new project called "${projectName || "my project"}". I'd love your help defining what we're building.`;
|
||||
|
||||
// Small delay so the thread is mounted before we submit
|
||||
const opener = `Hey — I'm starting a new project called "${projectName || "my project"}". I'd love your help defining what we're building.`;
|
||||
const t = setTimeout(() => {
|
||||
runtime.thread.composer.setText(opener);
|
||||
runtime.thread.composer.send();
|
||||
}, 300);
|
||||
|
||||
return () => clearTimeout(t);
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, []);
|
||||
|
||||
const handleReset = async () => {
|
||||
if (!confirm("Start the discovery conversation over from scratch?")) return;
|
||||
await fetch(`/api/projects/${projectId}/atlas-chat`, { method: "DELETE" });
|
||||
// Reload to get a fresh runtime state
|
||||
window.location.reload();
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="flex flex-col rounded-2xl overflow-hidden bg-card ring-1 ring-border" style={{ height: "600px" }}>
|
||||
{/* Minimal header bar */}
|
||||
<div className="flex items-center justify-end px-4 py-2.5 shrink-0 border-b border-border">
|
||||
<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>
|
||||
|
||||
{/* Thread */}
|
||||
<div className="flex-1 overflow-hidden">
|
||||
<Thread />
|
||||
</div>
|
||||
// No card — fills the layout space directly
|
||||
<div style={{ height: "100%", display: "flex", flexDirection: "column" }}>
|
||||
<Thread userInitial={userInitial} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Main export — wraps with runtime provider
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
export function AtlasChat({ projectId, projectName }: AtlasChatProps) {
|
||||
const { data: session } = useSession();
|
||||
const userInitial =
|
||||
session?.user?.name?.[0]?.toUpperCase() ??
|
||||
session?.user?.email?.[0]?.toUpperCase() ??
|
||||
"Y";
|
||||
|
||||
const adapter = makeAtlasAdapter(projectId);
|
||||
const runtime = useLocalRuntime(adapter);
|
||||
|
||||
@@ -126,6 +88,7 @@ export function AtlasChat({ projectId, projectName }: AtlasChatProps) {
|
||||
<AtlasChatInner
|
||||
projectId={projectId}
|
||||
projectName={projectName}
|
||||
userInitial={userInitial}
|
||||
runtime={runtime}
|
||||
/>
|
||||
</AssistantRuntimeProvider>
|
||||
|
||||
@@ -8,7 +8,6 @@ import {
|
||||
ThreadPrimitive,
|
||||
} from "@assistant-ui/react";
|
||||
import {
|
||||
ArrowUpIcon,
|
||||
CheckIcon,
|
||||
ChevronLeftIcon,
|
||||
ChevronRightIcon,
|
||||
@@ -20,69 +19,140 @@ 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.
|
||||
// Thread root — Stackless style: flat on beige, no card
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
export const Thread: FC = () => (
|
||||
<ThreadPrimitive.Root className="flex flex-col h-full px-4">
|
||||
|
||||
{/* Empty state: centered welcome + composer */}
|
||||
export const Thread: FC<{ userInitial?: string }> = ({ userInitial = "Y" }) => (
|
||||
<ThreadPrimitive.Root
|
||||
style={{
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
height: "100%",
|
||||
background: "#f6f4f0",
|
||||
fontFamily: "Outfit, sans-serif",
|
||||
}}
|
||||
>
|
||||
{/* Empty state */}
|
||||
<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">
|
||||
<div style={{
|
||||
display: "flex", height: "100%",
|
||||
flexDirection: "column", alignItems: "center", justifyContent: "center",
|
||||
gap: 12, padding: "40px 32px",
|
||||
}}>
|
||||
<div style={{
|
||||
width: 44, height: 44, borderRadius: 11, background: "#1a1a1a",
|
||||
display: "flex", alignItems: "center", justifyContent: "center",
|
||||
fontFamily: "Newsreader, serif", fontSize: "1.2rem", fontWeight: 500,
|
||||
color: "#fff",
|
||||
}}>
|
||||
A
|
||||
</div>
|
||||
<p className="text-sm font-medium text-foreground">Atlas</p>
|
||||
<p className="text-xs text-muted-foreground max-w-xs">
|
||||
<div style={{ textAlign: "center" }}>
|
||||
<p style={{ fontSize: "0.88rem", fontWeight: 600, color: "#1a1a1a", marginBottom: 4 }}>Atlas</p>
|
||||
<p style={{ fontSize: "0.78rem", color: "#a09a90", maxWidth: 260, lineHeight: 1.5 }}>
|
||||
Your product strategist. Let's define what you're building.
|
||||
</p>
|
||||
</div>
|
||||
<div className="w-full max-w-2xl">
|
||||
<Composer />
|
||||
<div style={{ width: "100%", maxWidth: 600 }}>
|
||||
<Composer userInitial={userInitial} />
|
||||
</div>
|
||||
</div>
|
||||
</ThreadPrimitive.Empty>
|
||||
|
||||
{/* Messages viewport */}
|
||||
<ThreadPrimitive.Viewport className="flex-1 overflow-y-auto py-6 space-y-6">
|
||||
{/* Messages */}
|
||||
<ThreadPrimitive.Viewport style={{ flex: 1, overflowY: "auto", padding: "28px 32px" }}>
|
||||
<ThreadPrimitive.Messages
|
||||
components={{ UserMessage, AssistantMessage }}
|
||||
/>
|
||||
<ThreadPrimitive.Suggestions
|
||||
components={{ Suggestion: FollowupSuggestion }}
|
||||
components={{
|
||||
UserMessage: (props) => <UserMessage {...props} userInitial={userInitial} />,
|
||||
AssistantMessage,
|
||||
}}
|
||||
/>
|
||||
</ThreadPrimitive.Viewport>
|
||||
|
||||
<Composer />
|
||||
{/* Input bar */}
|
||||
<div style={{ padding: "14px 32px 22px", flexShrink: 0 }}>
|
||||
<Composer userInitial={userInitial} />
|
||||
</div>
|
||||
</ThreadPrimitive.Root>
|
||||
);
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Composer — Grok pill style with inverted send button
|
||||
// Composer — Stackless white pill input bar
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
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-muted ring-1 ring-border px-4 py-3 transition-shadow focus-within:ring-ring/50">
|
||||
const Composer: FC<{ userInitial?: string }> = () => (
|
||||
<ComposerPrimitive.Root style={{ width: "100%" }}>
|
||||
<div style={{
|
||||
display: "flex", gap: 8,
|
||||
padding: "5px 5px 5px 16px",
|
||||
background: "#fff",
|
||||
border: "1px solid #e0dcd4",
|
||||
borderRadius: 10,
|
||||
alignItems: "center",
|
||||
boxShadow: "0 1px 4px #1a1a1a06",
|
||||
}}>
|
||||
<ComposerPrimitive.Input
|
||||
placeholder="What do you want to build?"
|
||||
placeholder="Describe your thinking..."
|
||||
rows={1}
|
||||
autoFocus
|
||||
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]"
|
||||
style={{
|
||||
flex: 1,
|
||||
border: "none",
|
||||
background: "none",
|
||||
fontSize: "0.86rem",
|
||||
fontFamily: "Outfit, sans-serif",
|
||||
color: "#1a1a1a",
|
||||
padding: "8px 0",
|
||||
resize: "none",
|
||||
outline: "none",
|
||||
minHeight: 24,
|
||||
maxHeight: 120,
|
||||
}}
|
||||
/>
|
||||
<ThreadPrimitive.If running={false}>
|
||||
<ComposerPrimitive.Send asChild>
|
||||
<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
|
||||
style={{
|
||||
padding: "9px 16px",
|
||||
borderRadius: 7,
|
||||
border: "none",
|
||||
background: "#1a1a1a",
|
||||
color: "#fff",
|
||||
fontSize: "0.78rem",
|
||||
fontWeight: 600,
|
||||
fontFamily: "Outfit, sans-serif",
|
||||
cursor: "pointer",
|
||||
transition: "opacity 0.15s",
|
||||
flexShrink: 0,
|
||||
}}
|
||||
onMouseEnter={(e) => (e.currentTarget.style.opacity = "0.8")}
|
||||
onMouseLeave={(e) => (e.currentTarget.style.opacity = "1")}
|
||||
>
|
||||
Send
|
||||
</button>
|
||||
</ComposerPrimitive.Send>
|
||||
</ThreadPrimitive.If>
|
||||
<ThreadPrimitive.If running>
|
||||
<ComposerPrimitive.Cancel asChild>
|
||||
<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
|
||||
style={{
|
||||
padding: "9px 16px",
|
||||
borderRadius: 7,
|
||||
border: "none",
|
||||
background: "#eae6de",
|
||||
color: "#8a8478",
|
||||
fontSize: "0.78rem",
|
||||
fontWeight: 600,
|
||||
fontFamily: "Outfit, sans-serif",
|
||||
cursor: "pointer",
|
||||
flexShrink: 0,
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
gap: 6,
|
||||
}}
|
||||
>
|
||||
<SquareIcon style={{ width: 10, height: 10 }} />
|
||||
Stop
|
||||
</button>
|
||||
</ComposerPrimitive.Cancel>
|
||||
</ThreadPrimitive.If>
|
||||
@@ -91,61 +161,31 @@ const Composer: FC = () => (
|
||||
);
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// 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-border text-muted-foreground hover:ring-ring/50 hover:text-foreground 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-foreground text-background 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-muted-foreground hover:text-foreground px-1.5 py-0.5 rounded transition-colors">
|
||||
Edit
|
||||
</button>
|
||||
</ActionBarPrimitive.Edit>
|
||||
</ActionBarPrimitive.Root>
|
||||
);
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Assistant message — plain text, no bubble, small avatar
|
||||
// Assistant message — black avatar, "Atlas" label, plain text
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
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">
|
||||
<MessagePrimitive.Root style={{ display: "flex", gap: 12, marginBottom: 22 }} className="group">
|
||||
{/* Avatar */}
|
||||
<div style={{
|
||||
width: 28, height: 28, borderRadius: 7, flexShrink: 0, marginTop: 2,
|
||||
background: "#1a1a1a",
|
||||
display: "flex", alignItems: "center", justifyContent: "center",
|
||||
fontSize: "0.68rem", fontWeight: 700, color: "#fff",
|
||||
fontFamily: "Newsreader, serif",
|
||||
}}>
|
||||
A
|
||||
</div>
|
||||
<div className="flex-1 min-w-0 max-w-[80%]">
|
||||
<div className="text-sm text-[#0d0d0d] dark:text-white leading-relaxed">
|
||||
<div style={{ flex: 1, minWidth: 0 }}>
|
||||
{/* Sender label */}
|
||||
<div style={{
|
||||
fontSize: "0.68rem", fontWeight: 600, color: "#a09a90",
|
||||
marginBottom: 5, textTransform: "uppercase", letterSpacing: "0.04em",
|
||||
}}>
|
||||
Atlas
|
||||
</div>
|
||||
{/* Message content */}
|
||||
<div style={{ fontSize: "0.88rem", color: "#2a2824", lineHeight: 1.72 }}>
|
||||
<MessagePrimitive.Content components={{ Text: AssistantText }} />
|
||||
</div>
|
||||
<AssistantActionBar />
|
||||
@@ -154,37 +194,97 @@ 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-2 mt-1.5 opacity-0 group-hover:opacity-100 transition-opacity"
|
||||
className="group-hover:opacity-100"
|
||||
style={{ display: "flex", alignItems: "center", gap: 8, marginTop: 6, opacity: 0, transition: "opacity 0.15s" }}
|
||||
>
|
||||
<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 transition-colors">
|
||||
<button style={{
|
||||
display: "flex", alignItems: "center", gap: 4,
|
||||
fontSize: "0.68rem", color: "#b5b0a6",
|
||||
background: "none", border: "none", cursor: "pointer",
|
||||
fontFamily: "Outfit, sans-serif", padding: "2px 6px", borderRadius: 4,
|
||||
}}>
|
||||
<MessagePrimitive.If copied>
|
||||
<CheckIcon className="h-2.5 w-2.5" />
|
||||
Copied
|
||||
<CheckIcon style={{ width: 10, height: 10 }} /> Copied
|
||||
</MessagePrimitive.If>
|
||||
<MessagePrimitive.If copied={false}>
|
||||
<CopyIcon className="h-2.5 w-2.5" />
|
||||
Copy
|
||||
<CopyIcon style={{ width: 10, height: 10 }} /> Copy
|
||||
</MessagePrimitive.If>
|
||||
</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 transition-colors">
|
||||
<RefreshCwIcon className="h-2.5 w-2.5" />
|
||||
Retry
|
||||
<button style={{
|
||||
display: "flex", alignItems: "center", gap: 4,
|
||||
fontSize: "0.68rem", color: "#b5b0a6",
|
||||
background: "none", border: "none", cursor: "pointer",
|
||||
fontFamily: "Outfit, sans-serif", padding: "2px 6px", borderRadius: 4,
|
||||
}}>
|
||||
<RefreshCwIcon style={{ width: 10, height: 10 }} /> Retry
|
||||
</button>
|
||||
</ActionBarPrimitive.Reload>
|
||||
</ActionBarPrimitive.Root>
|
||||
);
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// User message — warm avatar, "You" label, same layout as Atlas
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
const UserMessage: FC<{ userInitial?: string }> = ({ userInitial = "Y" }) => (
|
||||
<MessagePrimitive.Root style={{ display: "flex", gap: 12, marginBottom: 22 }} className="group">
|
||||
{/* Avatar */}
|
||||
<div style={{
|
||||
width: 28, height: 28, borderRadius: 7, flexShrink: 0, marginTop: 2,
|
||||
background: "#e8e4dc",
|
||||
display: "flex", alignItems: "center", justifyContent: "center",
|
||||
fontSize: "0.68rem", fontWeight: 700, color: "#8a8478",
|
||||
fontFamily: "Outfit, sans-serif",
|
||||
}}>
|
||||
{userInitial}
|
||||
</div>
|
||||
<div style={{ flex: 1, minWidth: 0 }}>
|
||||
{/* Sender label */}
|
||||
<div style={{
|
||||
fontSize: "0.68rem", fontWeight: 600, color: "#a09a90",
|
||||
marginBottom: 5, textTransform: "uppercase", letterSpacing: "0.04em",
|
||||
}}>
|
||||
You
|
||||
</div>
|
||||
{/* Message content */}
|
||||
<div style={{ fontSize: "0.88rem", color: "#2a2824", lineHeight: 1.72, whiteSpace: "pre-wrap" }}>
|
||||
<MessagePrimitive.Content components={{ Text: UserText }} />
|
||||
</div>
|
||||
<UserActionBar />
|
||||
</div>
|
||||
</MessagePrimitive.Root>
|
||||
);
|
||||
|
||||
const UserText: FC<{ text: string }> = ({ text }) => <span>{text}</span>;
|
||||
|
||||
const UserActionBar: FC = () => (
|
||||
<ActionBarPrimitive.Root
|
||||
hideWhenRunning
|
||||
autohide="not-last"
|
||||
className="group-hover:opacity-100"
|
||||
style={{ display: "flex", alignItems: "center", gap: 4, marginTop: 4, opacity: 0, transition: "opacity 0.15s" }}
|
||||
>
|
||||
<ActionBarPrimitive.Edit asChild>
|
||||
<button style={{
|
||||
fontSize: "0.68rem", color: "#b5b0a6",
|
||||
background: "none", border: "none", cursor: "pointer",
|
||||
fontFamily: "Outfit, sans-serif", padding: "2px 6px", borderRadius: 4,
|
||||
}}>
|
||||
Edit
|
||||
</button>
|
||||
</ActionBarPrimitive.Edit>
|
||||
</ActionBarPrimitive.Root>
|
||||
);
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Branch picker
|
||||
// ---------------------------------------------------------------------------
|
||||
@@ -192,19 +292,20 @@ const AssistantActionBar: FC = () => (
|
||||
const BranchPicker: FC = () => (
|
||||
<BranchPickerPrimitive.Root
|
||||
hideWhenSingleBranch
|
||||
className="flex items-center gap-1 mt-1 opacity-0 group-hover:opacity-100 transition-opacity"
|
||||
className="group-hover:opacity-100"
|
||||
style={{ display: "flex", alignItems: "center", gap: 4, marginTop: 4, opacity: 0, transition: "opacity 0.15s" }}
|
||||
>
|
||||
<BranchPickerPrimitive.Previous asChild>
|
||||
<button className="text-muted-foreground hover:text-foreground transition-colors">
|
||||
<ChevronLeftIcon className="h-3 w-3" />
|
||||
<button style={{ background: "none", border: "none", cursor: "pointer", color: "#b5b0a6" }}>
|
||||
<ChevronLeftIcon style={{ width: 12, height: 12 }} />
|
||||
</button>
|
||||
</BranchPickerPrimitive.Previous>
|
||||
<span className="text-[10px] text-muted-foreground">
|
||||
<span style={{ fontSize: "0.68rem", color: "#b5b0a6" }}>
|
||||
<BranchPickerPrimitive.Number /> / <BranchPickerPrimitive.Count />
|
||||
</span>
|
||||
<BranchPickerPrimitive.Next asChild>
|
||||
<button className="text-muted-foreground hover:text-foreground transition-colors">
|
||||
<ChevronRightIcon className="h-3 w-3" />
|
||||
<button style={{ background: "none", border: "none", cursor: "pointer", color: "#b5b0a6" }}>
|
||||
<ChevronRightIcon style={{ width: 12, height: 12 }} />
|
||||
</button>
|
||||
</BranchPickerPrimitive.Next>
|
||||
</BranchPickerPrimitive.Root>
|
||||
|
||||
Reference in New Issue
Block a user