image | Dosu

import { ImageSample } from "@/components/docs/samples/image";

Getting Started#

Add `image`#

Use in your application#

Pass Image to MessagePrimitive.Parts:

import { Image } from "@/components/assistant-ui/image";

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

Variants#

Use the variant prop to change the visual style.

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

Sizes#

Use the size prop to control the maximum width.

<Image.Root size="sm" /> // max-w-64 (256px)
<Image.Root size="default" /> // max-w-96 (384px)
<Image.Root size="lg" /> // max-w-[512px]
<Image.Root size="full" /> // w-full

API Reference#

Composable API#

The component exports composable sub-components:

import {
  Image,
  ImageRoot,
  ImagePreview,
  ImageFilename,
  ImageZoom,
} from "@/components/assistant-ui/image";

<ImageRoot variant="muted" size="lg">
  <ImageZoom src="https://example.com/photo.jpg" alt="Photo">
    <ImagePreview src="https://example.com/photo.jpg" alt="Photo" />
  </ImageZoom>
  <ImageFilename>photo.jpg</ImageFilename>
</ImageRoot>

Component	Description
`Image`	Default export, renders complete image part
`Image.Root`	Container with variant and size styling
`Image.Preview`	Image container with loading/error states
`Image.Filename`	Optional filename display below image
`Image.Zoom`	Medium-style zoom overlay (click to expand, ESC to close)

Attachment - File attachments in composer and messages
File - Non-image file message parts