'use client';

import {ChatMessageList} from '@astryxdesign/core/Chat';
import {MessageBubble} from './MessageBubble';
import type {ChatMessage} from '@/features/loyaly-ai/types/chat';

/**
 * The transcript.
 *
 * ── On vertical anchoring ────────────────────────────────────────────────
 * ChatMessageList renders a `flex: 1 1 0` spacer before its first message, so
 * a short conversation sits at the BOTTOM of the scroll area and grows upward
 * — Slack's behaviour rather than ChatGPT's. Measured: one short exchange sat
 * 561px down the panel with the whole upper half blank.
 *
 * TOP_ANCHORED collapses that spacer. It is safe here because Conversation
 * owns the scroll container: an earlier attempt with Astryx's ChatLayout
 * scrolled a short conversation clean out of view, because that layout's
 * auto-scroll assumed the spacer was filling the box.
 *
 * ChatMessageList is Astryx's own list primitive and it carries the
 * behaviour worth not reimplementing: it is an aria-live region, so a screen
 * reader announces an answer as it arrives, and `isStreaming` coordinates with
 * ChatLayout's auto-scroll so the view follows the text without fighting a
 * user who has scrolled up to re-read something.
 */
/** See the anchoring note above. */
const TOP_ANCHORED = '[&>div>div:first-child]:hidden';

export function MessageList({
  messages,
  isStreaming,
}: {
  messages: ChatMessage[];
  isStreaming: boolean;
}) {
  return (
    <ChatMessageList isStreaming={isStreaming} className={TOP_ANCHORED}>
      {messages.map((message) => (
        <MessageBubble key={message.id} message={message} />
      ))}
    </ChatMessageList>
  );
}
