Message Scroller

import { useState } from "react";
import { Message, MessageScroller, type ChatMessage } from "@rdloom/react";

const make = (from: number, to: number): ChatMessage[] =>
  Array.from({ length: to - from }, (_, i) => {
    const n = from + i;
    return { id: `m${n}`, role: n % 2 ? "assistant" : "user", parts: [{ type: "text", text: `Message ${n} in this conversation.` }] } as ChatMessage;
  });

export default function MessageScrollerLoadOlderExample() {
  const [messages, setMessages] = useState(() => make(21, 31));
  const [loading, setLoading] = useState(false);
  const oldest = Number(messages[0].id.slice(1));

  const loadOlder = () => {
    if (oldest <= 1) return;
    setLoading(true);
    setTimeout(() => {
      setMessages((prev) => [...make(Math.max(1, oldest - 10), oldest), ...prev]);
      setLoading(false);
    }, 700);
  };

  return (
    <div className="flex w-full justify-center py-4">
      <div className="h-72 w-[36rem] max-w-full rounded-[var(--rd-radius-overlay)] border border-[var(--rd-color-border-default)]">
        <MessageScroller label="History" onReachTop={loadOlder} isLoadingOlder={loading}>
          {messages.map((m) => (
            <Message key={m.id} message={m} />
          ))}
        </MessageScroller>
      </div>
    </div>
  );
}

import { useEffect, useRef, useState } from "react";
import { Message, MessageScroller, type ChatMessage } from "@rdloom/react";

const seed: ChatMessage[] = Array.from({ length: 12 }, (_, i) => ({
  id: `m${i + 1}`,
  role: i % 2 ? "assistant" : "user",
  parts: [{ type: "text", text: `Earlier message ${i + 1}.` }],
}));

export default function MessageScrollerUnreadCountExample() {
  const [messages, setMessages] = useState(seed);
  const [unread, setUnread] = useState(0);
  const atBottom = useRef(true);

  // A new message arrives every few seconds; scroll up in the box to see the count grow.
  useEffect(() => {
    const timer = setInterval(() => {
      setMessages((prev) => [...prev, { id: `m${prev.length + 1}`, role: "assistant", parts: [{ type: "text", text: `New message ${prev.length + 1}.` }] }]);
      if (!atBottom.current) setUnread((n) => n + 1);
    }, 3000);
    return () => clearInterval(timer);
  }, []);

  return (
    <div className="flex w-full justify-center py-4">
      <div className="h-72 w-[36rem] max-w-full rounded-[var(--rd-radius-overlay)] border border-[var(--rd-color-border-default)]">
        <MessageScroller label="Team thread" unreadCount={unread}
          onAtBottomChange={(v) => {
            atBottom.current = v;
            if (v) setUnread(0);
          }}
        >
          {messages.map((m) => (
            <Message key={m.id} message={m} />
          ))}
        </MessageScroller>
      </div>
    </div>
  );
}