Attachment preview

"use client"

import { AttachmentChip, AttachmentList } from "@/components/attachment-preview"
import { Message } from "@/components/message"

// A tiny inline image stands in for a thumbnail your app would serve.
const thumb =
  "data:image/svg+xml;utf8," +
  encodeURIComponent('<svg xmlns="http://www.w3.org/2000/svg" width="160" height="96"><rect width="160" height="96" fill="#dbe4ff"/><rect x="16" y="20" width="80" height="10" rx="3" fill="#6b7cff"/><rect x="16" y="40" width="120" height="8" rx="3" fill="#a5b0ff"/><rect x="16" y="56" width="100" height="8" rx="3" fill="#a5b0ff"/></svg>')

export default function Example() {
  return (
    <div className="flex max-w-2xl flex-col gap-5">
      <Message
        onOpenAttachment={() => {}}
        message={{
          id: "u1",
          author: { role: "user" },
          status: "complete",
          blocks: [
            { kind: "attachments", files: [{ id: "a", name: "checkout-error.png", mediaType: "image/png", size: 48_200, previewUrl: thumb }, { id: "b", name: "orders-export.csv", mediaType: "text/csv", size: 2_400_000 }] },
            { kind: "plain", text: "Checkout fails for these orders. Screenshot attached." },
          ],
        }}
      />
      <AttachmentList attachments={[{ id: "c", name: "runbook.md", size: 6_100 }, { id: "d", name: "config.json", mediaType: "application/json", size: 812 }]} />
      <div className="flex flex-wrap gap-1.5">
        <AttachmentChip attachment={{ id: "e", name: "trace.zip", size: 9_800_000, progress: 0.4 }} onRemove={() => {}} />
        <AttachmentChip attachment={{ id: "f", name: "huge-video.mov", error: "Too large (max 25 MB)" }} onRemove={() => {}} />
      </div>
    </div>
  )
}