AttachmentsNew

$pnpm dlx shadcn@latest add @nextui/attachments

1{
2  "registries": {
3    "@nextui": {
4      "url": "https://nextui.dev/r/{name}.json",
5      "headers": { "Authorization": "Bearer ${NEXTUI_TOKEN}" }
6    }
7  }
8}

1"use client";
2
3import { useState } from "react";
4import { useChat } from "@ai-sdk/react";
5import { Attachments } from "@/components/nextui/attachments";
6
7export function Composer() {
8  const { sendMessage } = useChat();
9  const [text, setText] = useState("");
10  const [files, setFiles] = useState<File[]>([]);
11  // Remount the chips after sending to clear them.
12  const [round, setRound] = useState(0);
13
14  return (
15    <form
16      onSubmit={(e) => {
17        e.preventDefault();
18        // AI SDK 7 turns File objects into file parts (data URLs) for you.
19        const dt = new DataTransfer();
20        files.forEach((f) => dt.items.add(f));
21        sendMessage({ text, files: dt.files });
22        setText("");
23        setFiles([]);
24        setRound((r) => r + 1);
25      }}
26    >
27      <Attachments
28        key={round}
29        accept="image/*,.pdf,.csv,.txt"
30        maxSize={10 * 1024 * 1024}
31        onAdd={(added) => setFiles((prev) => [...prev, ...added])}
32        onRemove={(_, file) => setFiles((prev) => prev.filter((f) => f !== file))}
33      >
34        <textarea value={text} onChange={(e) => setText(e.target.value)} />
35      </Attachments>
36    </form>
37  );
38}
39
40// Uploading to your own storage? Pass attachments yourself, with status "uploading" and progress 0–1.