Attachment

npx shadcn@latest add "https://r.assistant-ui.com/attachment"

import {
  ComposerAttachments,
  ComposerAddAttachment,
} from "@/components/assistant-ui/attachment";
 
const Composer: FC = () => {
  return (
    <ComposerPrimitive.Root className="...">
      <ComposerAttachments />
      <ComposerAddAttachment />
 
      <ComposerPrimitive.Input
        autoFocus
        placeholder="Write a message..."
        rows={1}
        className="..."
      />
      <ComposerAction />
    </ComposerPrimitive.Root>
  );
};

import { UserMessageAttachments } from "@/components/assistant-ui/attachment";
 
const UserMessage: FC = () => {
  return (
    <MessagePrimitive.Root className="...">
      <UserActionBar />
 
      <UserMessageAttachments />
 
      <div className="...">
        <MessagePrimitive.Content />
      </div>
 
      <BranchPicker className="..." />
    </MessagePrimitive.Root>
  );
};