file | Dosu

import { FileSample } from "@/components/docs/samples/file";

Getting Started#

Add `file`#

Use in your application#

Pass File to MessagePrimitive.Parts:

import { File } from "@/components/assistant-ui/file";

const AssistantMessage: FC = () => {
  return (
    <MessagePrimitive.Root className="...">
      <MessagePrimitive.Parts>
        {({ part }) => {
          if (part.type === "file") return <File {...part} />;
          return null;
        }}
      </MessagePrimitive.Parts>
    </MessagePrimitive.Root>
  );
};

Variants#

Use the variant prop to change the visual style.

<File.Root variant="outline" /> // Border (default)
<File.Root variant="ghost" /> // No border
<File.Root variant="muted" /> // Background fill

Sizes#

Use the size prop to change padding and font size.

<File.Root size="sm" /> // Compact
<File.Root size="default" /> // Default
<File.Root size="lg" /> // Larger

MimeType Icons#

The component automatically selects an appropriate icon based on the file's MIME type:

MIME Type	Icon
`image/*`	ImageIcon
`application/pdf`	FileTextIcon
`application/json`	BracesIcon
`text/*`	FileTextIcon
`audio/*`	MusicIcon
`video/*`	VideoIcon
fallback	FileIcon

API Reference#

Composable API#

The component exports composable sub-components:

import {
  File,
  FileRoot,
  FileIconDisplay,
  FileName,
  FileSize,
  FileDownload,
} from "@/components/assistant-ui/file";

<FileRoot variant="muted" size="lg">
  <FileIconDisplay mimeType="application/pdf" />
  <div className="flex flex-col gap-0.5">
    <FileName>report.pdf</FileName>
    <FileSize bytes={2048} className="text-xs" />
  </div>
  <FileDownload
    data="SGVsbG8gV29ybGQh"
    mimeType="application/pdf"
    filename="report.pdf"
  />
</FileRoot>

Component	Description
`File`	Default export, renders complete file part
`File.Root`	Container with variant and size styling
`File.Icon`	MIME type-aware icon, or pass custom `children`
`File.Name`	Truncated filename
`File.Size`	Human-readable file size
`File.Download`	Download link button

Custom Icon#

Pass children to File.Icon to override the default MIME type icon:

<File.Icon>
  <MyCustomIcon className="size-5" />
</File.Icon>

Utilities#

The component also exports utility functions:

import {
  getMimeTypeIcon,
  getBase64Size,
  formatFileSize,
} from "@/components/assistant-ui/file";

// Get icon component for a MIME type
const Icon = getMimeTypeIcon("application/pdf"); // FileTextIcon

// Calculate size from base64 string
const bytes = getBase64Size("SGVsbG8gV29ybGQh"); // 12

// Format bytes to human-readable
const size = formatFileSize(2048); // "2.0 KB"

Image - Image message parts
Attachment - File attachments in composer and messages