Agents

ChatInputAttachment

Composer attachment rail with file previews, upload progress, and removal.

PDF
Document_de_Synthese_J0025.pdf
PDF
XLSX
Q3_budget_forecast.xlsx
Spreadsheet
WAV
[FREE] So La Lune Type Beat.wav
File

Ask anything

Composition

The preferred shape for composing the installed agent from its exported parts.

Parts

Exported compound parts from the installed source.

ChatInputAttachments

├── ChatInputAttachment

├── ChatInputAttachmentPreview

├── ChatInputAttachmentContent

├── ChatInputAttachmentTitle

├── ChatInputAttachmentDescription

├── ChatInputAttachmentRemove

└── ChatInputAttachmentProgress

This agent installs from the chat registry. Install the bundle with the command above, or inspect the source below.

Registry command

npx shadcn@latest add http://127.0.0.1:3000/r/refined/chat.json

See registry manifest

Usage

import { ChatInputAttachment, ChatInputAttachments } from "@/components/refined-ui/chat-input-attachment";

type ComposerAttachment = {

id: string;

name: string;

type?: string;

status?: "idle" | "uploading" | "uploaded" | "error";

progress?: number;

};

export function Example({ attachments, removeAttachment }: { attachments: ComposerAttachment[]; removeAttachment: (id: string) => void }) {

return (

<ChatInputAttachments>

{attachments.map((attachment) => (

<ChatInputAttachment

key={attachment.id}

name={attachment.name}

type={attachment.type}

status={attachment.status}

progress={attachment.progress}

onRemove={() => removeAttachment(attachment.id)}

/>

))}

</ChatInputAttachments>

);

}

Raw code

Primary installed agent source

Component

src/registry/sources/refined/chat-input-attachment.tsx

Primitives

This agent composes these library primitives, installed under components/refined-ui/ui/*.

Buttoncomponents/refined-ui/ui/button.tsxLibrary slot Scroll areacomponents/refined-ui/ui/scroll-area.tsxLibrary slot