Composer

"use client"

import * as React from "react"
import { Composer } from "@/components/composer"
import type { Attachment, EntityRef } from "@/lib/chat"

export default function Example() {
  const [value, setValue] = React.useState("")
  const [refs, setRefs] = React.useState<EntityRef[]>([])
  // Attach with the button, by pasting a screenshot, or by dropping files on the box. A real app uploads here and
  // sets progress, then a previewUrl it serves; this one only lists them.
  const [files, setFiles] = React.useState<Attachment[]>([{ id: "f0", name: "refund-policy.pdf", size: 182_000, mediaType: "application/pdf" }])
  const attach = (picked: File[]) =>
    setFiles((f) => [...f, ...picked.map((p, i) => ({ id: `f${f.length + i + 1}`, name: p.name, size: p.size, mediaType: p.type }))])
  return (
    <Composer
      className="max-w-2xl"
      value={value}
      onChange={setValue}
      onSubmit={() => setValue("")}
      references={refs}
      onReferencesChange={setRefs}
      attachments={files}
      onAttach={attach}
      onRemoveAttachment={(id) => setFiles((f) => f.filter((x) => x.id !== id))}
      scope={{ environment: "Shop", detail: "staging", production: false }}
      mentions={[
        { id: "m1", group: "Tables", label: "orders", entity: { kind: "table", name: "orders" }, description: "Every order" },
        { id: "m2", group: "People", label: "Dana Ortiz", description: "Support lead" },
      ]}
      commands={[{ id: "c1", name: "refund", description: "Draft a refund for an order", args: "<order>" }]}
    />
  )
}