user-message

1import { memo, useState } from "react";
2import type { UIMessage } from "ai";
3import { cn } from "./utils/cn";
4import { FileAttachment } from "./input/file-attachment";
5import { ImageLightbox } from "./image-lightbox";
6 
7export type UserMessageProps = {
8  message: UIMessage;
9  className?: string;
10  /**
11   * When true (default) clicking an attached image opens a fullscreen
12   * lightbox preview. Set to false to render images as plain thumbnails.
13   */
14  enableImagePreview?: boolean;
15};
16 
17type MessagePart = UIMessage["parts"][number];
18 
19function isRecord(value: unknown): value is Record<string, unknown> {
20  return typeof value === "object" && value !== null;
21}
22 
23function isTextPart(part: MessagePart): part is { type: "text"; text: string } {
24  return (
25    part.type === "text" &&
26    typeof (part as { text?: unknown }).text === "string"
27  );
28}
29 
30function getImageUrlFromPart(part: unknown): string | null {
31  if (!isRecord(part)) return null;
32  const type = part.type;
33  if (typeof type !== "string") return null;
34 
35  if (type === "image") {
36    const imagePart = part as { url?: string; image?: string };
37    return imagePart.url ?? imagePart.image ?? null;
38  }
39 
40  if (type === "data-image") {
41    const dataPart = part as { data?: { url?: string } };
42    return dataPart.data?.url ?? null;
43  }
44 
45  if (type === "file") {
46    const filePart = part as { mimeType?: string; url?: string; data?: string };
47    if (filePart.mimeType?.startsWith("image/")) {
48      if (filePart.url) return filePart.url;
49      if (filePart.data) {
50        return `data:${filePart.mimeType};base64,${filePart.data}`;
51      }
52    }
53  }
54 
55  return null;
56}
57 
58type FilePart = {
59  type: "file";
60  filename?: string;
61  name?: string;
62  fileName?: string;
63  size?: number;
64  mimeType?: string;
65  url?: string;
66};
67 
68function getFileFromPart(part: unknown) {
69  if (!isRecord(part)) return null;
70  if (part.type !== "file") return null;
71  const filePart = part as FilePart;
72  const filename =
73    filePart.filename || filePart.name || filePart.fileName || "Attachment";
74  const isImage = filePart.mimeType?.startsWith("image/") ?? false;
75  if (isImage) return null;
76  return {
77    filename,
78    size: filePart.size,
79  };
80}
81 
82export const UserMessage = memo(function UserMessage({
83  message,
84  className,
85  enableImagePreview = true,
86}: UserMessageProps) {
87  const [lightboxIndex, setLightboxIndex] = useState<number | null>(null);
88  const textParts = message.parts?.filter(isTextPart) ?? [];
89// … truncated