basicmachines-co-basic-memory/ui/tool-ui-react/src/note-preview.tsx

import React, { useEffect, useState } from "react";
import { createRoot } from "react-dom/client";

import { Badge } from "./components/ui/badge";

type ToolOutput = {
  content?: Array<{ type?: string; text?: string }>;
  structuredContent?: unknown;
  structured_content?: unknown;
  structured?: unknown;
};

type RenderData = {
  toolInput?: { identifier?: string };
  toolOutput?: ToolOutput | string;
};

function stripFrontmatter(text: string): string {
  if (!text.startsWith("---")) return text;
  const end = text.indexOf("---", 3);
  if (end === -1) return text;
  return text.slice(end + 3).trim();
}

function parseTitle(text: string): string | null {
  const lines = text.split("\n");
  for (const line of lines) {
    if (line.startsWith("# ")) {
      return line.replace("# ", "").trim();
    }
  }
  return null;
}

function extractText(toolOutput: ToolOutput | string | undefined): string {
  if (!toolOutput) return "";
  if (typeof toolOutput === "string") return toolOutput;

  const content = toolOutput.content;
  if (Array.isArray(content)) {
    const textBlock = content.find(
      (block) => block?.type === "text" && typeof block.text === "string",
    );
    if (textBlock?.text) return textBlock.text;
  }

  if (typeof toolOutput.structuredContent === "string") {
    return toolOutput.structuredContent;
  }

  return "";
}

function NotePreviewApp() {
  const [identifier, setIdentifier] = useState<string>("");
  const [title, setTitle] = useState<string>("Note Preview");
  const [content, setContent] = useState<string>("");
  const [hasData, setHasData] = useState(false);

  useEffect(() => {
    function handleMessage(event: MessageEvent) {
      const message = event.data as { type?: string; payload?: { renderData?: RenderData } };
      if (message?.type === "ui-lifecycle-iframe-render-data") {
        setHasData(true);
        const renderData = message.payload?.renderData;
        const nextIdentifier = renderData?.toolInput?.identifier || "";
        const rawText = extractText(renderData?.toolOutput);
        const cleaned = stripFrontmatter(rawText).trim();
        const parsedTitle = parseTitle(cleaned);

        setIdentifier(nextIdentifier);
        setTitle(parsedTitle || nextIdentifier || "Note Preview");
        setContent(cleaned);
      }
    }

    window.addEventListener("message", handleMessage);
    window.parent?.postMessage({ type: "ui-lifecycle-iframe-ready" }, "*");

    const timeout = setTimeout(() => {
      if (!hasData) {
        window.parent?.postMessage({ type: "ui-request-render-data" }, "*");
      }
    }, 200);

    return () => {
      window.removeEventListener("message", handleMessage);
      clearTimeout(timeout);
    };
  }, [hasData]);

  return (
    <div className="min-h-screen bg-background text-foreground" data-theme="light">
      <div className="mx-auto flex max-w-4xl flex-col gap-4 px-6 py-6">
        <div className="flex items-center justify-between gap-4">
          <div>
            <h1 className="text-lg font-semibold">{title}</h1>
            <p className="text-muted-foreground text-xs">
              {identifier ? `Identifier: ${identifier}` : "Note content"}
            </p>
          </div>
          <Badge variant="secondary">tool-ui (React)</Badge>
        </div>

        <div className="border-border bg-card rounded-2xl border p-4 shadow-sm">
          {content ? (
            <pre className="text-xs leading-relaxed whitespace-pre-wrap font-mono text-foreground/80">
              {content}
            </pre>
          ) : (
            <div className="text-muted-foreground text-sm">No content available.</div>
          )}
        </div>
      </div>
    </div>
  );
}

const root = document.getElementById("root");
if (root) {
  createRoot(root).render(<NotePreviewApp />);
}