Chat Dock

"use client"

import * as React from "react"

import { ChatComposer } from "@/components/chat/chat-composer"
import {
  ChatConversation,
  ChatConversationContent,
  ChatConversationTurn,
} from "@/components/chat/chat-conversation"
import {
  ChatDock,
  ChatDockBody,
  ChatDockFooter,
  ChatDockHeader,
  ChatDockTitle,
} from "@/components/chat/chat-dock"
import { ChatMessage } from "@/components/chat/chat-message"
import { ChatResponse } from "@/components/chat/chat-response"

// Every word on the page. Change copy here, not in the markup.
const COPY = {
  title: "Ask Orbcore",
  question: "Can I change the copy and the layout?",
  answer:
    "Every block keeps its words in a constant at the top of the file and its layout in named parts.",
  placeholder: "Ask anything…",
} as const

// The dock, open, anchored to this frame instead of the viewport.
export default function ChatDockDemo() {
  const frameRef = React.useRef<HTMLDivElement>(null)
  const [open, setOpen] = React.useState(true)
  const [sent, setSent] = React.useState<string[]>([])

  return (
    <div ref={frameRef} className="relative h-144 w-full overflow-hidden">
      <ChatDock
        open={open}
        onOpenChange={setOpen}
        anchor="container"
        container={frameRef}
      >
        <ChatDockHeader>
          <ChatDockTitle>{COPY.title}</ChatDockTitle>
        </ChatDockHeader>
        <ChatDockBody className="flex flex-col">
          <ChatConversation className="px-4 py-4">
            <ChatConversationContent className="gap-6">
              <ChatConversationTurn messageId="usr-opening" scrollAnchor>
                <ChatMessage variant="mine">{COPY.question}</ChatMessage>
              </ChatConversationTurn>
              <ChatConversationTurn messageId="asst-opening">
                <ChatResponse
                  className="text-sm/7 text-foreground"
                  text={COPY.answer}
                />
              </ChatConversationTurn>
              {sent.map((line, i) => (
                <ChatConversationTurn
                  key={i}
                  messageId={`sent-${i}`}
                  scrollAnchor
                >
                  <ChatMessage variant="mine">{line}</ChatMessage>
                </ChatConversationTurn>
              ))}
            </ChatConversationContent>
          </ChatConversation>
        </ChatDockBody>
        <ChatDockFooter>
          <ChatComposer
            onSend={(value) => setSent((prev) => [...prev, value])}
            onStop={() => {}}
            streaming={false}
            placeholder={COPY.placeholder}
          />
        </ChatDockFooter>
      </ChatDock>
    </div>
  )
}

ChatDock
├─ ChatDockHeader
│  └─ ChatDockTitle
├─ ChatDockBody
└─ ChatDockFooter