gitfor/platform

import { Markdown } from "~/ui/Markdown";
import type { Notebook, NotebookOutput } from "~/lib/code-intel";
import { cn } from "~/utils/cn";

function Output({ output }: { output: NotebookOutput }) {
  if (output.kind === "image") {
    return <img src={`data:${output.mime};base64,${output.data}`} alt="Cell output" className="max-w-full bg-white" />;
  }
  return (
    <pre
      className={cn(
        "overflow-x-auto font-mono text-xs leading-5 whitespace-pre-wrap",
        output.kind === "error" ? "text-kumo-danger" : output.stderr ? "text-kumo-warning" : "text-kumo-default",
      )}
    >
      {output.text}
    </pre>
  );
}

function Prompt({ label }: { label: string }) {
  return <div className="w-16 shrink-0 pt-2 text-right font-mono text-xs text-kumo-inactive">{label}</div>;
}

export function NotebookView({ notebook }: { notebook: Notebook }) {
  return (
    <div className="space-y-3 p-4">
      {notebook.cells.map((cell) => {
        if (cell.kind === "markdown") {
          return (
            <div key={cell.id} className="flex gap-3">
              <Prompt label="" />
              <Markdown html={cell.html} className="min-w-0 flex-1" />
            </div>
          );
        }
        if (cell.kind === "raw") {
          return (
            <div key={cell.id} className="flex gap-3">
              <Prompt label="" />