@teaflask/assistant 0.0.0 → 0.3.0

package/src/components/elicitation-receipt-row.tsx

@@ -0,0 +1,28 @@
+"use client";
+
+import type { SettledQuestionsReceipt } from "../core/question-receipt.js";
+import { ToolRow } from "./tool-row.js";
+
+// The temporary receipt in a shelf-less host uses the same registered
+// tool view as the durable transcript row once its result arrives.
+export function QuestionSetReceiptRow({
+  receipt,
+}: {
+  receipt: SettledQuestionsReceipt;
+}) {
+  return (
+    <ToolRow
+      view={{
+        toolName: "ask_user",
+        state: "output-available",
+        input: JSON.stringify({ questions: receipt.questions }),
+        output: JSON.stringify({ answers: receipt.answers }),
+        display: {
+          completeText: "Asked for your input",
+          icon: "question",
+          view: { key: "teaflask.questions", version: 1 },
+        },
+      }}
+    />
+  );
+}

package/src/components/human-file-size.ts

@@ -0,0 +1,13 @@
+// One spelling of a byte count everywhere a member reads one. Kept
+// React-free in its own module so the ./transcript entry can re-export
+// it without dragging the attachment chips' React closure along.
+
+export function humanFileSize(byteSize: number): string {
+  if (byteSize >= 1024 * 1024) {
+    return `${(byteSize / (1024 * 1024)).toFixed(1)} MB`;
+  }
+  if (byteSize >= 1024) {
+    return `${(byteSize / 1024).toFixed(1)} KB`;
+  }
+  return `${String(byteSize)} B`;
+}

package/src/components/icons.tsx

@@ -0,0 +1,281 @@
+// The package's own icon strokes (it ships no icon library): 16-grid,
+// 1.5 stroke, round caps — the same voice as the chassis' lucide set.
+
+export function ComposeIcon() {
+  return (
+    <svg
+      viewBox="0 0 16 16"
+      aria-hidden="true"
+      className="tf:size-4 tf:shrink-0"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    >
+      <path d="M8 2.5H4A1.5 1.5 0 0 0 2.5 4v8A1.5 1.5 0 0 0 4 13.5h8a1.5 1.5 0 0 0 1.5-1.5V8" />
+      <path d="M12.3 2.3a1.2 1.2 0 0 1 1.7 1.7L8.5 9.5l-2.3.6.6-2.3z" />
+    </svg>
+  );
+}
+
+export function ArrowUpIcon() {
+  return (
+    <svg
+      viewBox="0 0 16 16"
+      aria-hidden="true"
+      className="tf:size-4 tf:shrink-0"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1.75"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    >
+      <path d="M8 12.5v-9M4 7l4-3.5L12 7" />
+    </svg>
+  );
+}
+
+// The stop square: the send arrow's busy-state counterpart — a
+// filled rounded square, the universal "stop generating" glyph.
+export function StopIcon() {
+  return (
+    <svg
+      viewBox="0 0 16 16"
+      aria-hidden="true"
+      className="tf:size-4 tf:shrink-0"
+      fill="currentColor"
+      stroke="none"
+    >
+      <rect x="4.25" y="4.25" width="7.5" height="7.5" rx="1.5" />
+    </svg>
+  );
+}
+
+// The drawer header's disclosure arrow — it points at the history menu
+// it drops open. The drawn twin of the transcript's lucide chevron,
+// package-local because the minimized companion's static graph must stay
+// transcript-free (importing anything from lucide-react drags its barrel
+// into the closure the bundle test guards).
+export function ChevronDownIcon() {
+  return (
+    <svg
+      viewBox="0 0 16 16"
+      aria-hidden="true"
+      className="tf:size-4 tf:shrink-0"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    >
+      <path d="M3.5 6l4.5 4.5L12.5 6" />
+    </svg>
+  );
+}
+
+// The drawer's minimize affordance: a plain dash, never an X — dismissing
+// the drawer collapses it back into the perch, and both the conversation
+// and the companion survive. An X would promise a destruction that never
+// happens.
+export function MinimizeIcon() {
+  return (
+    <svg
+      viewBox="0 0 16 16"
+      aria-hidden="true"
+      className="tf:size-4 tf:shrink-0"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    >
+      <path d="M3.5 8h9" />
+    </svg>
+  );
+}
+
+// The mode switcher's trigger: the drawer's silhouette with the docked
+// column it can become. Package-local like every stroke here — the
+// minimized companion's static graph must stay icon-library-free.
+export function SidebarIcon() {
+  return (
+    <svg
+      viewBox="0 0 16 16"
+      aria-hidden="true"
+      className="tf:size-4 tf:shrink-0"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    >
+      <rect x="2.5" y="2.5" width="11" height="11" rx="1.5" />
+      <path d="M9.5 2.5v11" />
+    </svg>
+  );
+}
+
+// The active row's mark in the mode menu.
+export function CheckIcon() {
+  return (
+    <svg
+      viewBox="0 0 16 16"
+      aria-hidden="true"
+      className="tf:size-4 tf:shrink-0"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    >
+      <path d="M3 8.5l3.2 3L13 4.5" />
+    </svg>
+  );
+}
+
+export function CloseIcon() {
+  return (
+    <svg
+      viewBox="0 0 16 16"
+      aria-hidden="true"
+      className="tf:size-4 tf:shrink-0"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    >
+      <path d="M4 4l8 8M12 4l-8 8" />
+    </svg>
+  );
+}
+
+// The prompt rows' trailing affordance: present but transparent until the
+// row is hovered, so the column's right edge doesn't twitch on approach.
+export function ArrowRightIcon() {
+  return (
+    <svg
+      viewBox="0 0 16 16"
+      aria-hidden="true"
+      className="tf:size-4 tf:shrink-0"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    >
+      <path d="M3.5 8h9M9 4.5L12.5 8 9 11.5" />
+    </svg>
+  );
+}
+
+// The opening prompts' capability glyphs. Four classes, because four is
+// what the concierge actually does: look something up, judge the state of
+// the docs, write one, explain the product. The host picks the class; the
+// stroke belongs to the package.
+
+export function SearchIcon() {
+  return (
+    <svg
+      viewBox="0 0 16 16"
+      aria-hidden="true"
+      className="tf:size-4 tf:shrink-0"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    >
+      <circle cx="7.2" cy="7.2" r="4.2" />
+      <path d="M10.4 10.4L13.5 13.5" />
+    </svg>
+  );
+}
+
+export function FlagIcon() {
+  return (
+    <svg
+      viewBox="0 0 16 16"
+      aria-hidden="true"
+      className="tf:size-4 tf:shrink-0"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    >
+      <path d="M3.5 14V2.5h6l-.7 2.3 3.7 0v5H6.3l.5-2.3H3.5" />
+    </svg>
+  );
+}
+
+export function BookIcon() {
+  return (
+    <svg
+      viewBox="0 0 16 16"
+      aria-hidden="true"
+      className="tf:size-4 tf:shrink-0"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    >
+      <path d="M2.5 3.2A1.2 1.2 0 0 1 3.7 2H8v11.5H3.7a1.2 1.2 0 0 0-1.2 1.2z" />
+      <path d="M13.5 3.2A1.2 1.2 0 0 0 12.3 2H8v11.5h4.3a1.2 1.2 0 0 1 1.2 1.2z" />
+    </svg>
+  );
+}
+
+export function FileIcon() {
+  return (
+    <svg
+      viewBox="0 0 16 16"
+      aria-hidden="true"
+      className="tf:size-4 tf:shrink-0"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    >
+      <path d="M9 1.8H4.5A1.5 1.5 0 0 0 3 3.3v9.4a1.5 1.5 0 0 0 1.5 1.5h7a1.5 1.5 0 0 0 1.5-1.5V5.8z" />
+      <path d="M9 1.8v4h4" />
+    </svg>
+  );
+}
+
+export function PlusIcon() {
+  return (
+    <svg
+      viewBox="0 0 16 16"
+      aria-hidden="true"
+      className="tf:size-4 tf:shrink-0"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    >
+      <path d="M8 3.2v9.6M3.2 8h9.6" />
+    </svg>
+  );
+}
+
+// The OpenAI blossom, monochrome (the provider chip's mark): a filled
+// brand glyph, not one of the package's 16-grid strokes — it identifies
+// the visitor's own service, in ink like everything else (Graphite's
+// No-Accent law covers marks too).
+export function OpenAiMarkIcon() {
+  return (
+    <svg
+      viewBox="0 0 24 24"
+      aria-hidden="true"
+      className="tf:size-3.5 tf:shrink-0"
+      fill="currentColor"
+    >
+      <path d="M22.2819 9.8211a5.9847 5.9847 0 0 0-.5157-4.9108 6.0462 6.0462 0 0 0-6.5098-2.9A6.0651 6.0651 0 0 0 4.9807 4.1818a5.9847 5.9847 0 0 0-3.9977 2.9 6.0462 6.0462 0 0 0 .7427 7.0966 5.98 5.98 0 0 0 .511 4.9107 6.051 6.051 0 0 0 6.5146 2.9001A5.9847 5.9847 0 0 0 13.2599 24a6.0557 6.0557 0 0 0 5.7718-4.2058 5.9894 5.9894 0 0 0 3.9977-2.9001 6.0557 6.0557 0 0 0-.7475-7.0729zm-9.022 12.6081a4.4755 4.4755 0 0 1-2.8764-1.0408l.1419-.0804 4.7783-2.7582a.7948.7948 0 0 0 .3927-.6813v-6.7369l2.02 1.1686a.071.071 0 0 1 .038.052v5.5826a4.504 4.504 0 0 1-4.4945 4.4944zm-9.6607-4.1254a4.4708 4.4708 0 0 1-.5346-3.0137l.142.0852 4.783 2.7582a.7712.7712 0 0 0 .7806 0l5.8428-3.3685v2.3324a.0804.0804 0 0 1-.0332.0615L9.74 19.9502a4.4992 4.4992 0 0 1-6.1408-1.6464zM2.3408 7.8956a4.485 4.485 0 0 1 2.3655-1.9728V11.6a.7664.7664 0 0 0 .3879.6765l5.8144 3.3543-2.0201 1.1685a.0757.0757 0 0 1-.071 0l-4.8303-2.7865A4.504 4.504 0 0 1 2.3408 7.872zm16.5963 3.8558L13.1038 8.364 15.1192 7.2a.0757.0757 0 0 1 .071 0l4.8303 2.7913a4.4944 4.4944 0 0 1-.6765 8.1042v-5.6772a.79.79 0 0 0-.407-.667zm2.0107-3.0231l-.142-.0852-4.7735-2.7818a.7759.7759 0 0 0-.7854 0L9.409 9.2297V6.8974a.0662.0662 0 0 1 .0284-.0615l4.8303-2.7866a4.4992 4.4992 0 0 1 6.6802 4.66zM8.3065 12.863l-2.02-1.1638a.0804.0804 0 0 1-.038-.0567V6.0742a4.4992 4.4992 0 0 1 7.3757-3.4537l-.142.0805L8.704 5.459a.7948.7948 0 0 0-.3927.6813zm1.0976-2.3654l2.602-1.4998 2.6069 1.4998v2.9994l-2.5974 1.4997-2.6067-1.4997Z" />
+    </svg>
+  );
+}

package/src/components/lazy-body.tsx

@@ -0,0 +1,88 @@
+"use client";
+
+import { Component, Suspense, type ErrorInfo, type ReactNode } from "react";
+
+import { TfButton } from "./primitives/button.js";
+import { useAssistantSession } from "./teaflask-assistant-provider.js";
+
+// The wrapper every on-demand surface body mounts behind: the Suspense
+// placeholder while its chunk arrives, and — the part that matters — an
+// error boundary for when the chunk never does.
+//
+// A dynamic import can fail for the ordinary reasons (a visitor's
+// network drops mid-fetch), and for one the script-tag distribution
+// creates: that origin serves a single build, so a deploy deletes the
+// previous build's chunks, and a returning visitor whose cached entry
+// is a few minutes old asks for a chunk hash that no longer exists.
+// Immutable chunk caching narrows this to a body the visitor had never
+// opened before, but doesn't close it. React.lazy has no recovery of
+// its own — an import rejection throws during render, and without a
+// boundary above it the whole assistant unmounts, taking a working
+// conversation down over one missing file.
+//
+// Retrying the import cannot help: the file is genuinely gone from the
+// server, and a fresh entry is what knows the new hashes. So the
+// fallback asks for a reload and lets the visitor choose. We never
+// reload the page ourselves — this widget lives inside someone else's
+// app, and a form half-filled elsewhere on the page is not ours to
+// discard.
+
+export function LazyBody({ children }: { children: ReactNode }) {
+  const { reportError } = useAssistantSession();
+  return (
+    <LazyBodyBoundary onFailure={reportError}>
+      <Suspense fallback={<BodyNotice>Loading…</BodyNotice>}>
+        {children}
+      </Suspense>
+    </LazyBodyBoundary>
+  );
+}
+
+function BodyNotice({ children }: { children: ReactNode }) {
+  return (
+    <div className="tf:flex tf:flex-1 tf:flex-col tf:items-center tf:justify-center tf:gap-3 tf:p-6 tf:text-center tf:text-tf-label tf:text-tf-muted-foreground">
+      {children}
+    </div>
+  );
+}
+
+class LazyBodyBoundary extends Component<
+  { children: ReactNode; onFailure: (error: Error) => void },
+  { failed: boolean }
+> {
+  state = { failed: false };
+
+  static getDerivedStateFromError() {
+    return { failed: true };
+  }
+
+  componentDidCatch(error: Error, info: ErrorInfo) {
+    // The host's observer hears it, and the console carries the stack
+    // for whoever is actually debugging the page.
+    this.props.onFailure(error);
+    console.error(
+      "[teaflask-assistant] A surface failed to load.",
+      error,
+      info.componentStack,
+    );
+  }
+
+  render() {
+    if (!this.state.failed) {
+      return this.props.children;
+    }
+    return (
+      <BodyNotice>
+        <span>This part of the assistant didn&rsquo;t load.</span>
+        <TfButton
+          variant="ghost"
+          onClick={() => {
+            window.location.reload();
+          }}
+        >
+          Reload the page
+        </TfButton>
+      </BodyNotice>
+    );
+  }
+}

package/src/components/markdown/assistant-markdown.tsx

@@ -0,0 +1,28 @@
+"use client";
+
+// The adopted register — bake-off 2026-07-30 (assistant-ui `markdown-text`): the tighter
+// conversational register — my-3 rhythm, muted list markers, table
+// headers on a muted wash with rounded outer corners, code blocks
+// wearing a language header. Typography lives in styles.css under
+// [data-tf-markdown]; this map carries only structure (the code
+// block and the link policy).
+
+import type { Components } from "react-markdown";
+
+import { CodeBlock } from "./code-block.js";
+import { preBlockFor, TranscriptLink } from "./markdown-structure.js";
+import { MarkdownBlocks } from "./memoized-blocks.js";
+
+const COMPONENTS: Partial<Components> = {
+  pre: preBlockFor(CodeBlock),
+  a: TranscriptLink,
+};
+
+/** The assistant message body, assistant-ui register. */
+export function AssistantMarkdown({ children }: { children: string }) {
+  return (
+    <div data-tf-markdown="" className="tf:min-w-0 tf:text-tf-body">
+      <MarkdownBlocks components={COMPONENTS}>{children}</MarkdownBlocks>
+    </div>
+  );
+}

package/src/components/markdown/code-block.tsx

@@ -0,0 +1,45 @@
+"use client";
+
+// The adopted register — bake-off 2026-07-30 (assistant-ui `markdown-text`'s code block): a
+// header bar naming the language with an always-visible copy affordance,
+// the code pane attached beneath — the block reads as a small tool.
+// Adapted to the --tf-* contract and the package's primitives; visual
+// decisions are assistant-ui's. The plain <pre> paints immediately;
+// shiki's lazy chunk upgrades it in place (Graphite ink levels via the
+// --shiki-* variables in styles.css).
+
+import { CopyTextButton } from "../copy-text-button.js";
+import { useHighlightedHtml } from "./use-highlighted-html.js";
+
+export function CodeBlock({
+  code,
+  language,
+}: {
+  code: string;
+  language: string | null;
+}) {
+  const highlighted = useHighlightedHtml(code, language);
+  return (
+    <div className="tf:my-3 tf:flex tf:w-full tf:flex-col tf:first:mt-0 tf:last:mb-0">
+      <div className="tf:flex tf:items-center tf:justify-between tf:rounded-t-xl tf:border tf:border-b-0 tf:bg-tf-muted tf:px-3.5 tf:py-1">
+        <span className="tf:text-xs tf:font-medium tf:text-tf-muted-foreground tf:lowercase">
+          {language ?? "text"}
+        </span>
+        <CopyTextButton text={code} label="Copy code" />
+      </div>
+      {highlighted === null ? (
+        <pre className="tf:overflow-x-auto tf:rounded-b-xl tf:border tf:p-3.5 tf:text-tf-label tf:leading-relaxed">
+          <code className="tf:font-mono">{code}</code>
+        </pre>
+      ) : (
+        <div
+          data-tf-code-html=""
+          className="tf:overflow-x-auto tf:rounded-b-xl tf:border tf:p-3.5 tf:font-mono tf:text-tf-label tf:leading-relaxed"
+          // shiki's output: our own trusted pipeline — the code text is
+          // tokenized into spans, never injected as markup.
+          dangerouslySetInnerHTML={{ __html: highlighted }}
+        />
+      )}
+    </div>
+  );
+}

package/src/components/markdown/highlight.ts

@@ -0,0 +1,34 @@
+// The shiki LAZY BOUNDARY: the only door to the highlighter. Code blocks
+// render as plain <pre><code> immediately and upgrade to highlighted
+// HTML when (and only when) this dynamic import lands — the grammars and
+// engine never ride the first expand (tests/bundle-weight.test.ts pins
+// that). Module-level cache: one in-flight import serves every block.
+
+let highlighterModule: Promise<
+  typeof import("./shiki-highlighter.js") | null
+> | null = null;
+
+function loadHighlighter() {
+  highlighterModule ??= import("./shiki-highlighter.js").catch(() => {
+    // A chunk that fails to load (offline embed, blocked CDN path) is a
+    // styling downgrade, never an error surface: the plain <pre> stands.
+    highlighterModule = null;
+    return null;
+  });
+  return highlighterModule;
+}
+
+/** Highlighted HTML for a fenced block, or null when highlighting is
+ *  unavailable (unknown language, chunk failed) — the caller keeps its
+ *  plain rendering. The HTML carries `--shiki-*` CSS variables, themed
+ *  by styles.css in Graphite ink levels for both modes. */
+export async function highlightToHtml(
+  code: string,
+  language: string,
+): Promise<string | null> {
+  const module = await loadHighlighter();
+  if (module === null) {
+    return null;
+  }
+  return module.highlightWithShiki(code, language);
+}

package/src/components/markdown/markdown-structure.tsx

@@ -0,0 +1,79 @@
+"use client";
+
+import { isValidElement, type ComponentType, type ReactNode } from "react";
+import type { Components } from "react-markdown";
+
+// The structural half of the markdown component map, shared by both
+// bake-off variants: react-markdown hands typography to styles.css (the
+// [data-tf-markdown-*] blocks); the map carries only what needs
+// structure or attributes — the code block (each variant brings its own)
+// and the link policy. Raw HTML deliberately stays inert: react-markdown
+// never parses it without a rehype pass, so hostile markup in retrieved
+// content renders as the text it is.
+
+export interface CodeBlockProps {
+  code: string;
+  language: string | null;
+}
+
+/** The `pre` override for a variant's code block: react-markdown renders
+ *  fenced code as <pre><code class="language-x">; this reads the code
+ *  element's text and language and hands them to the variant instead of
+ *  rendering the tree. */
+export function preBlockFor(
+  CodeBlock: ComponentType<CodeBlockProps>,
+): Components["pre"] {
+  return function PreBlock({ children }: { children?: ReactNode }) {
+    const code = _codeElementOf(children);
+    if (code === null) {
+      return <pre>{children}</pre>;
+    }
+    return (
+      <CodeBlock code={_textOf(code.children)} language={_languageOf(code)} />
+    );
+  };
+}
+
+// Links open beside the conversation, never over it: an embedded widget
+// navigating its host tab loses the thread. noreferrer covers opener
+// isolation for hosts that predate implicit rel=noopener.
+export function TranscriptLink({
+  href,
+  children,
+}: {
+  href?: string;
+  children?: ReactNode;
+}) {
+  return (
+    <a href={href} target="_blank" rel="noreferrer">
+      {children}
+    </a>
+  );
+}
+
+interface CodeElementProps {
+  className?: string;
+  children?: ReactNode;
+}
+
+function _codeElementOf(children: ReactNode): CodeElementProps | null {
+  if (isValidElement<CodeElementProps>(children) && children.type === "code") {
+    return children.props;
+  }
+  return null;
+}
+
+function _textOf(children: ReactNode): string {
+  if (typeof children === "string") {
+    return children.replace(/\n$/, "");
+  }
+  if (Array.isArray(children)) {
+    return children.map(_textOf).join("").replace(/\n$/, "");
+  }
+  return "";
+}
+
+function _languageOf(code: CodeElementProps): string | null {
+  const match = /language-([\w-]+)/.exec(code.className ?? "");
+  return match === null ? null : match[1];
+}

package/src/components/markdown/memoized-blocks.tsx

@@ -0,0 +1,62 @@
+"use client";
+
+import { marked } from "marked";
+import { memo, useId, useMemo } from "react";
+import ReactMarkdown, { type Components } from "react-markdown";
+import remarkBreaks from "remark-breaks";
+import remarkGfm from "remark-gfm";
+
+// The streaming-markdown memoization spine, shared by both renderer
+// variants (typography lives in styles.css; each variant passes only its
+// structural component map). The lexer splits the document into
+// top-level blocks so a streaming delta re-renders only the block still
+// growing at the tail — every settled block is memoized on its raw text.
+// The pattern is prompt-kit's `markdown` component.
+
+function parseMarkdownIntoBlocks(markdown: string): string[] {
+  return marked.lexer(markdown).map((token) => token.raw);
+}
+
+const MemoizedBlock = memo(
+  function MarkdownBlock({
+    content,
+    components,
+  }: {
+    content: string;
+    components: Partial<Components>;
+  }) {
+    return (
+      <ReactMarkdown
+        remarkPlugins={[remarkGfm, remarkBreaks]}
+        components={components}
+      >
+        {content}
+      </ReactMarkdown>
+    );
+  },
+  (prev, next) =>
+    prev.content === next.content && prev.components === next.components,
+);
+
+export interface MarkdownBlocksProps {
+  children: string;
+  components: Partial<Components>;
+}
+
+// Callers pass a MODULE-LEVEL components map — a fresh map per render
+// would defeat every block's memo.
+export function MarkdownBlocks({ children, components }: MarkdownBlocksProps) {
+  const blockId = useId();
+  const blocks = useMemo(() => parseMarkdownIntoBlocks(children), [children]);
+  return (
+    <>
+      {blocks.map((block, index) => (
+        <MemoizedBlock
+          key={`${blockId}-${String(index)}`}
+          content={block}
+          components={components}
+        />
+      ))}
+    </>
+  );
+}