Image

图片消息渲染组件，支持缩放预览、下载、复制和多种尺寸变体

Image 用于渲染 AI 回复中的图片消息。支持生成中状态、内容过滤错误、缩放预览、下载和复制等操作。

引入

import {
  Image,
  ImageRoot,
  ImagePreview,
  ImageFilename,
  ImageZoom,
  ImageActions,
  ImageGenerating,
  ImageContentFilterError,
} from "aui-components";

基本用法

Image 在 Thread 中通过 MessagePrimitive.GroupedParts 自动渲染：

// Thread 内部已预配置
case "image":
  return <Image {...part} />;

ImageRoot Props

该组件没有公开的 Props。

export type ImageRootProps = React.ComponentProps<"div"> & {
  /** 视觉变体 */
  variant?: "outline" | "ghost" | "muted";
  /** 尺寸 */
  size?: "sm" | "default" | "lg" | "full";
};

变体与尺寸

变体

变体	样式
`outline` (默认)	`border-border border`
`ghost`	无边框
`muted`	`bg-muted/50`

尺寸

尺寸	最大宽度
`sm`	`max-w-64`
`default` (默认)	`max-w-96`
`lg`	`max-w-[512px]`
`full`	`w-full`

<ImageRoot variant="outline" size="default">
  <ImageZoom src="data:image/png;base64,..." alt="Chart">
    <ImagePreview src="data:image/png;base64,..." />
  </ImageZoom>
  <ImageFilename>chart.png</ImageFilename>
</ImageRoot>

状态处理

生成中 (running)

当 status.type === "running" 时显示加载动画：

<ImageRoot>
  <ImageGenerating /> {/* Loader2Icon 旋转动画 */}
  <ImageFilename>chart.png</ImageFilename>
</ImageRoot>

内容过滤错误 (content-filter)

当图片被内容过滤器拦截时：

<ImageRoot>
  <ImageContentFilterError reason="The provider blocked this image." />
</ImageRoot>

子组件

ImagePreview

图片预览，支持加载状态追踪：

<ImagePreview
  src={imageUrl}
  alt="Chart preview"
  containerClassName="min-h-48" // 自定义容器高度
/>

加载中：显示 ImageIcon 脉冲动画
加载失败：显示 ImageOffIcon
加载完成：显示图片

ImageZoom

点击放大预览（Portal 实现，渲染到 document.body）：

<ImageZoom src={imageUrl} alt="Full size chart">
  <ImagePreview src={imageUrl} />
</ImageZoom>

点击触发全屏叠加层（bg-black/80）
最大显示 max-h-[90vh] max-w-[90vw]
按 Escape 或点击关闭

ImageFilename

显示文件名：

<ImageFilename>chart.png</ImageFilename>

ImageActions

操作按钮组：

<ImageActions
  part={imagePart}
  onRegenerate={handleRegenerate} // 可选，重新生成按钮
/>

Download — 下载图片（自动推断文件扩展名：png/jpg/webp/gif/svg）
Copy — 复制图片到剪贴板（使用 Clipboard API）
Regenerate — 重新生成按钮（仅当提供了 onRegenerate + part.prompt）

工具函数

Image 内部包含两个工具函数：

extensionForMimeType

const ext = extensionForMimeType("image/jpeg"); // "jpg"
const ext = extensionForMimeType("image/png"); // "png"

dataUriToBlob

将 Data URI 转换为 Blob 对象，用于剪贴板操作。

copyImagePart

await copyImagePart({ image: "data:image/png;base64,..." });
// 或远程 URL
await copyImagePart({ image: "https://example.com/image.png" });