/**
 * StreamView — scrollable message log
 */

import { Component, For, createEffect, onMount } from "solid-js";
import { visibleMessages, useJournalStream } from "../stores/journalStream";
import { StreamMessageCard } from "./StreamMessage";

export const StreamView: Component = () => {
  const stream = useJournalStream();
  let containerRef: HTMLDivElement | undefined;

  // Auto-scroll to bottom on new messages
  const messages = () => visibleMessages();

  createEffect(() => {
    void messages().length; // track
    if (!containerRef) return;
    containerRef.scrollTop = containerRef.scrollHeight;
  });

  return (
    <div
      ref={containerRef}
      class="h-full overflow-y-auto px-3 py-2 space-y-2 bg-gray-50"
    >
      <For each={messages()}>
        {(msg) => <StreamMessageCard message={msg} />}
      </For>
      <Show when={messages().length === 0}>
        <p class="text-center text-gray-400 text-xs py-8">
          {stream.connected
            ? "No messages yet. Start by posting something."
            : "Connect to a session to see messages."}
        </p>
      </Show>
    </div>
  );
};

import { Show } from "solid-js";