// frontend/src/shell/Transcript.tsx
import ReactMarkdown from "react-markdown";
import remarkGfm from "remark-gfm";
import { useSessionStore } from "../store/sessionStore";

/**
 * Renders the streamed assistant conversation. The store accumulates assistant
 * text deltas in `transcript`; this is the surface that shows them.
 */
export function Transcript() {
  const transcript = useSessionStore((s) => s.transcript);
  if (transcript.length === 0) return null;

  return (
    <div className="flex flex-col gap-6">
      {transcript.map((entry, i) => (
        <article key={i} className="flex flex-col gap-1.5">
          <span className="font-heading text-xs font-semibold uppercase tracking-[0.12em] text-primary/80">
            ThothII
          </span>
          <div className="thot-prose">
            <ReactMarkdown remarkPlugins={[remarkGfm]}>{entry.text}</ReactMarkdown>
          </div>
        </article>
      ))}
    </div>
  );
}