message-list

1import React, {
2  memo,
3  useRef,
4  useEffect,
5  useLayoutEffect,
6  useCallback,
7  useState,
8  useMemo,
9} from "react";
10import type { UIMessage, ChatStatus } from "ai";
11import { cn } from "./utils/cn";
12 
13import { UserMessage } from "./user-message";
14import { Markdown } from "./markdown";
15import { ErrorMessage } from "./error-message";
16import type { CustomToolRendererProps } from "./types";
17import { ToolRowBase } from "./tools/tool-row-base";
18import { IconCopy, IconCheck } from "@tabler/icons-react";
19import { ToolRenderer as DefaultToolRenderer } from "./tools/tool-renderer";
20import { normalizeAssistantToolParts } from "./utils/tool-part-normalizer";
21import { SpiralLoader } from "./spiral-loader";
22 
23export type MessageListProps = {
24  messages: UIMessage[];
25  status: ChatStatus;
26  className?: string;
27  showCopyToolbar?: boolean;
28  suppressQuestionTool?: boolean;
29  /**
30   * Where to position the scroll container on initial mount.
31   * - "bottom" (default): classic chat behavior, pinned to the latest message.
32   * - "top": start from the top of the conversation — useful for static demos
33   *   or read-only transcripts where the user should read top-to-bottom.
34   */
35  initialScrollBehavior?: "bottom" | "top";
36  /**
37   * When true (default) clicking an attached image in a user message opens
38   * the fullscreen lightbox preview. Set to false to disable previews.
39   */
40  enableImagePreview?: boolean;
41  slots?: {
42    UserMessage?: React.ComponentType<{
43      message: UIMessage;
44      className?: string;
45      enableImagePreview?: boolean;
46    }>;
47    ToolRenderer?: React.ComponentType<ToolRendererProps>;
48  };
49  classNames?: {
50    userMessage?: string;
51  };
52  toolRenderers?: Record<string, React.ComponentType<CustomToolRendererProps>>;
53};
54 
55const SCROLL_THRESHOLD = 80;
56const timeFormatter = new Intl.DateTimeFormat("en-US", {
57  hour: "numeric",
58  minute: "2-digit",
59  hour12: true,
60});
61const dateFormatter = new Intl.DateTimeFormat("en-US", {
62  month: "short",
63  day: "numeric",
64});
65type ToolPartBase = {
66  type: string;
67  toolCallId?: string;
68  state?: string;
69  input?: unknown;
70  output?: unknown;
71  result?: unknown;
72};
73 
74type ToolRendererProps = {
75  part: ToolPartBase;
76  nestedTools?: ToolPartBase[];
77  chatStatus?: string;
78  toolRenderers?: Record<string, React.ComponentType<CustomToolRendererProps>>;
79};
80 
81function normalizeMessages(messages: UIMessage[]): UIMessage[] {
82  let changed = false;
83  const normalized = messages.map((message) => {
84// … truncated