vibn-frontend/components/assistant-ui/thread.tsx

"use client";

import {
  ActionBarPrimitive,
  BranchPickerPrimitive,
  ComposerPrimitive,
  MessagePrimitive,
  ThreadPrimitive,
} from "@assistant-ui/react";
import {
  ArrowUpIcon,
  CheckIcon,
  ChevronLeftIcon,
  ChevronRightIcon,
  CopyIcon,
  RefreshCwIcon,
  SquareIcon,
} from "lucide-react";
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.
// ---------------------------------------------------------------------------

export const Thread: FC = () => (
  <ThreadPrimitive.Root className="flex flex-col h-full 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-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>
        <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>

    <Composer />
  </ThreadPrimitive.Root>
);

// ---------------------------------------------------------------------------
// 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-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-foreground placeholder:text-muted-foreground text-sm leading-relaxed outline-none min-h-[24px] max-h-[120px]"
      />
      <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>
        </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>
        </ComposerPrimitive.Cancel>
      </ThreadPrimitive.If>
    </div>
  </ComposerPrimitive.Root>
);

// ---------------------------------------------------------------------------
// 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
// ---------------------------------------------------------------------------

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">
      A
    </div>
    <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 />
      <BranchPicker />
    </div>
  </MessagePrimitive.Root>
);

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"
  >
    <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">
        <MessagePrimitive.If copied>
          <CheckIcon className="h-2.5 w-2.5" />
          Copied
        </MessagePrimitive.If>
        <MessagePrimitive.If copied={false}>
          <CopyIcon className="h-2.5 w-2.5" />
          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>
    </ActionBarPrimitive.Reload>
  </ActionBarPrimitive.Root>
);

// ---------------------------------------------------------------------------
// Branch picker
// ---------------------------------------------------------------------------

const BranchPicker: FC = () => (
  <BranchPickerPrimitive.Root
    hideWhenSingleBranch
    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">
        <ChevronLeftIcon className="h-3 w-3" />
      </button>
    </BranchPickerPrimitive.Previous>
    <span className="text-[10px] text-muted-foreground">
      <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>
    </BranchPickerPrimitive.Next>
  </BranchPickerPrimitive.Root>
);