Message Scroller

1"use client";
2// beui.dev/components/agents/message-scroller
3 
4import { useReducedMotion } from "motion/react";
5import {
6  type ComponentPropsWithRef,
7  type Ref,
8  useCallback,
9  useEffect,
10  useLayoutEffect,
11  useRef,
12  useState,
13} from "react";
14import {
15  PreviewRail,
16  type PreviewRailItem,
17} from "@/components/motion/preview-rail";
18import { cn } from "@/lib/utils";
19 
20const PREVIEW_TITLE_LENGTH = 56;
21const PREVIEW_DESCRIPTION_LENGTH = 88;
22 
23function truncateMessageText(text: string, limit: number) {
24  if (text.length <= limit) return text;
25  const excerpt = text.slice(0, limit);
26  const boundary = excerpt.lastIndexOf(" ");
27  return `${excerpt.slice(0, boundary > limit * 0.65 ? boundary : limit).trim()}…`;
28}
29 
30function getMessageText(message: HTMLElement) {
31  const surface =
32    message.querySelector<HTMLElement>('[data-slot="message-bubble-content"]') ??
33    message.querySelector<HTMLElement>('[data-slot="message-content"]') ??
34    message;
35  return (surface.textContent ?? "").replace(/\s+/g, " ").trim();
36}
37 
38function getMessagePreview(
39  message: HTMLElement,
40  assistantResponse?: HTMLElement,
41) {
42  const text = getMessageText(message);
43  if (!text) {
44    return { label: "Message", description: undefined };
45  }
46 
47  if (text.length <= PREVIEW_TITLE_LENGTH) {
48    const responseText = assistantResponse
49      ? getMessageText(assistantResponse)
50      : "";
51    return {
52      label: text,
53      description: responseText
54        ? truncateMessageText(responseText, PREVIEW_DESCRIPTION_LENGTH)
55        : undefined,
56    };
57  }
58 
59  const titleExcerpt = text.slice(0, PREVIEW_TITLE_LENGTH);
60  const titleBoundary = titleExcerpt.lastIndexOf(" ");
61  const titleEnd =
62    titleBoundary > PREVIEW_TITLE_LENGTH * 0.65
63      ? titleBoundary
64      : PREVIEW_TITLE_LENGTH;
65  const label = `${text.slice(0, titleEnd).trim()}…`;
66  const responseText = assistantResponse
67    ? getMessageText(assistantResponse)
68    : text.slice(titleEnd).trim();
69  return {
70    label,
71    description: responseText
72      ? truncateMessageText(responseText, PREVIEW_DESCRIPTION_LENGTH)
73      : undefined,
74  };
75}
76 
77export interface MessageScrollerProps extends ComponentPropsWithRef<"div"> {
78  /** Keep streamed output pinned while the reader remains near the end. */
79  followOutput?: boolean;
80  /** Distance from the end that still counts as following the output. */
81  followThreshold?: number;
82  /** Smoothly follow growing content. */
83  smooth?: boolean;
84// … truncated