Chat Conversation

"use client"

import * as React from "react"
import { cn } from "cn"

import { Marker, MarkerContent } from "@/components/ui/marker"
import {
  MessageScroller,
  MessageScrollerButton,
  MessageScrollerContent,
  MessageScrollerItem,
  MessageScrollerProvider,
  MessageScrollerViewport,
} from "@/components/ui/message-scroller"

/**
 * The scrolling transcript of a chat. It follows new messages as they stream
 * in, stops following when the reader scrolls up, and shows a button to jump
 * back to the latest message while they are away from it. Screen readers hear
 * it as a polite live log.
 *
 * `className` lands on the scrolling viewport, so padding scrolls with the
 * messages.
 */
function ChatConversation({
  className,
  children,
  ...props
}: React.ComponentProps<typeof MessageScrollerViewport>) {
  return (
    <MessageScrollerProvider autoScroll>
      <MessageScroller data-slot="chat-conversation" className="min-h-0 flex-1">
        <MessageScrollerViewport
          role="log"
          aria-live="polite"
          aria-atomic="false"
          aria-label="Conversation"
          data-slot="chat-conversation-viewport"
          className={className}
          {...props}
        >
          {children}
        </MessageScrollerViewport>
        <MessageScrollerButton />
      </MessageScroller>
    </MessageScrollerProvider>
  )
}

/** The column that holds the turns, inside `ChatConversation`. */
function ChatConversationContent({
  className,
  ...props
}: React.ComponentProps<typeof MessageScrollerContent>) {
  return (
    <MessageScrollerContent
      data-slot="chat-conversation-content"
      className={cn("gap-0", className)}
      {...props}
    />
  )
}

/**
 * One turn of the conversation: a message from the person or a reply from the
 * assistant.
 */
function ChatConversationTurn({
  pending,
  className,
  ...props
}: React.ComponentProps<typeof MessageScrollerItem> & {
  /**
   * While true, hides the turn from assistive tech, so a streaming reply
   * enters the live region once, whole, instead of one token at a time.
   */
  pending?: boolean
}) {
  return (
    <MessageScrollerItem
      data-slot="chat-conversation-turn"
      inert={pending}
      className={className}
      {...props}
    />
  )
}

/**
 * The sender's name, and optionally the time, above a turn, set on a thin
 * rule.
 *
 * It is hidden from assistive tech and can't be selected, so the name and
 * time never get copied along with a message.
 */
function ChatConversationAttribution({
  who,
  at,
  className,
  ...props
}: Omit<React.ComponentProps<typeof Marker>, "variant"> & {
  /**
   * The stock `Marker` variant, `separator` by default here: one rule
   * between the name and the time. `border` draws a line under the row
   * instead, and `default` draws no line.
   */
  variant?: React.ComponentProps<typeof Marker>["variant"]
  /** Who sent the turn, such as "You" or the assistant's name. */
  who: string
  /** When it was sent, shown after the rule. */
  at?: string
}) {
  return (
    <Marker
      variant="separator"
      aria-hidden="true"
      data-slot="chat-conversation-attribution"
      className={cn("gap-3 pt-6 pb-2 select-none before:hidden", className)}
      {...props}
    >
      <MarkerContent className="font-mono text-xs/5 tracking-[0.18em] uppercase">
        {who}
      </MarkerContent>
      {/* order-last puts the time after the ::after rule */}
      {at && (
        <MarkerContent className="order-last font-mono text-xs/5 tabular-nums">
          {at}
        </MarkerContent>
      )}
    </Marker>
  )
}

/**
 * A blinking block at the end of a reply that is still streaming. Hidden from
 * assistive tech; it stops blinking when reduced motion is on.
 */
function ChatConversationCursor({
  className,
  ...props
}: React.ComponentProps<"span">) {
  return (
    <span
      aria-hidden="true"
      data-slot="chat-conversation-cursor"
      className={cn(
        "ml-0.5 inline-block h-4 w-[0.5em] translate-y-[0.15em] bg-foreground align-baseline select-none motion-safe:animate-pulse",
        className
      )}
      {...props}
    />
  )
}

/**
 * A short status line under a turn, such as "Thinking". Screen readers
 * announce it politely; its shimmer stops when reduced motion is on.
 */
function ChatConversationStatus({
  className,
  ...props
}: React.ComponentProps<"p">) {
  return (
    <p
      role="status"
      data-slot="chat-conversation-status"
      className={cn(
        "w-fit font-mono text-xs/5 tracking-widest text-muted-foreground uppercase select-none motion-safe:shimmer",
        className
      )}
      {...props}
    />
  )
}

export {
  ChatConversation,
  ChatConversationAttribution,
  ChatConversationContent,
  ChatConversationCursor,
  ChatConversationStatus,
  ChatConversationTurn,
}

pnpm dlx shadcn add @01orbital/chat-conversation

npx shadcn add @01orbital/chat-conversation

yarn shadcn add @01orbital/chat-conversation

bunx --bun shadcn add @01orbital/chat-conversation

pnpm dlx shadcn add @01orbital/chat-message @01orbital/chat-response

npx shadcn add @01orbital/chat-message @01orbital/chat-response

yarn shadcn add @01orbital/chat-message @01orbital/chat-response

bunx --bun shadcn add @01orbital/chat-message @01orbital/chat-response