Message

"use client"

import { Message, MessageBody, MessageFooter, MessageHeader } from "@/components/message"
import { AgentAvatar } from "@/components/agent-avatar"
import type { Message as MessageData } from "@/lib/chat"
import { Button } from "@/components/ui/button"

const agent = { id: "a1", name: "Support agent", role: "assistant" }

const reply: MessageData = {
  id: "a",
  author: { role: "agent", agent },
  status: "complete",
  attribution: { model: "claude-sonnet-5-5", cost: "$0.004" },
  blocks: [
    { kind: "tools", calls: [{ id: "t", tool: "orders.lookup", title: "Looked up order #4821", status: "succeeded", duration: "0.4s" }] },
    { kind: "paragraph", nodes: [{ kind: "text", text: "It shipped this morning and should arrive on " }, { kind: "strong", text: "Thursday" }, { kind: "text", text: "." }] },
  ],
}

export default function Example() {
  return (
    <div className="flex max-w-2xl flex-col gap-5">
      <Message message={{ id: "u", author: { role: "user" }, status: "complete", blocks: [{ kind: "paragraph", nodes: [{ kind: "text", text: "Where is my order #4821?" }] }] }} />
      <Message onRate={() => {}} message={reply} />

      {/* Your own actions: the model and cost stay, on their own line. */}
      <Message
        message={{ ...reply, id: "b" }}
        actions={
          <div className="flex gap-2">
            <Button size="xs" variant="outline">
              Track the parcel
            </Button>
          </div>
        }
      />

      {/* Rebuilt from the parts, with a badge in the header. */}
      <article aria-label="Support agent, pinned reply" className="flex gap-3 rounded-lg border p-3">
        <AgentAvatar agent={agent} className="mt-px" />
        <div className="min-w-0 flex-1">
          <MessageHeader name={agent.name} detail="Orders">
            <span className="rounded-xs bg-accent-weak px-1 text-2xs text-accent-text">Pinned</span>
          </MessageHeader>
          <MessageBody message={reply} className="mt-1" />
          <MessageFooter message={reply} actions={false} className="mt-3" />
        </div>
      </article>
    </div>
  )
}