@xenide-io/the-old-ui-theme 0.4.8 → 0.4.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xenide-io/the-old-ui-theme",
-  "version": "0.4.8",
+  "version": "0.4.9",
   "description": "Props-driven React components and theme tokens inspired by classic interface design — optimized for Next.js apps and internal tools.",
   "author": "Xenide",
   "license": "MIT",
@@ -131,6 +131,8 @@
     "access": "public"
   },
   "dependencies": {
+    "@blocknote/core": "0.52.1",
+    "@blocknote/react": "0.52.1",
     "@radix-ui/react-dialog": "^1.1.23",
     "@radix-ui/react-dropdown-menu": "^2.1.24",
     "clsx": "^2.1.1",

package/src/styles/suite-skin.css

@@ -475,6 +475,28 @@ button:hover > .ph-card {
   -webkit-overflow-scrolling: touch;
 }
 
+/* ── Ask AI answer content ───────────────────────────────────────────── */
+.suite-ai-blocknote .bn-editor {
+  min-height: 0;
+  padding: 0;
+  background: transparent;
+  color: var(--ph-text-primary);
+  font-family: inherit;
+  font-size: 0.875rem;
+}
+.suite-ai-blocknote .bn-block-content {
+  padding-block: 2px;
+}
+.suite-ai-blocknote [data-content-type="heading"] {
+  padding-top: 8px;
+}
+.suite-ai-blocknote [data-content-type="codeBlock"] {
+  overflow-x: auto;
+  border: 1px solid var(--ph-border);
+  border-radius: 6px;
+  background: var(--ph-surface);
+}
+
 /* ── Auth / OAuth / launch handoff ──────────────────────────────────────
    One calm opacity fade — no stacked entrance reveals on bridge pages. */
 .suite-auth-handoff {

package/src/suite/components/ai-message-blocknote.test.tsx

@@ -0,0 +1,40 @@
+import { cleanup, render, screen, waitFor } from "@testing-library/react";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+
+import SuiteAiBlockNoteMessage from "./ai-message-blocknote";
+import { SuiteThemeProvider } from "./theme-provider";
+
+const themeConfig = {
+  storageKey: "suite-ai-test-theme",
+  lightThemeId: "test-light",
+  darkThemeId: "test-dark",
+  fallbackTheme: "light" as const,
+};
+
+describe("SuiteAiBlockNoteMessage", () => {
+  beforeEach(() => {
+    vi.stubGlobal("localStorage", {
+      getItem: () => "light",
+      setItem: vi.fn(),
+    });
+  });
+  afterEach(() => {
+    cleanup();
+    vi.unstubAllGlobals();
+  });
+
+  it("renders Markdown as restricted read-only BlockNote content", async () => {
+    const { container } = render(
+      <SuiteThemeProvider config={themeConfig}>
+        <SuiteAiBlockNoteMessage markdown={"## Summary\n\n- First item"} />
+      </SuiteThemeProvider>,
+    );
+
+    await waitFor(() =>
+      expect(screen.getByText("Summary")).toBeInTheDocument(),
+    );
+    expect(screen.getByText("First item")).toBeInTheDocument();
+    expect(container.querySelector('[contenteditable="false"]')).toBeTruthy();
+    expect(container.querySelector("img")).toBeNull();
+  });
+});

package/src/suite/components/ai-message-blocknote.tsx

@@ -0,0 +1,61 @@
+"use client";
+
+import { useEffect } from "react";
+import { BlockNoteSchema, defaultBlockSpecs } from "@blocknote/core";
+import { BlockNoteViewRaw, useCreateBlockNote } from "@blocknote/react";
+import "@blocknote/react/style.css";
+
+import { useSuiteTheme } from "./theme-provider";
+
+const assistantSchema = BlockNoteSchema.create({
+  blockSpecs: {
+    paragraph: defaultBlockSpecs.paragraph,
+    heading: defaultBlockSpecs.heading,
+    bulletListItem: defaultBlockSpecs.bulletListItem,
+    numberedListItem: defaultBlockSpecs.numberedListItem,
+    checkListItem: defaultBlockSpecs.checkListItem,
+    codeBlock: defaultBlockSpecs.codeBlock,
+    quote: defaultBlockSpecs.quote,
+    table: defaultBlockSpecs.table,
+    divider: defaultBlockSpecs.divider,
+  },
+});
+
+export default function SuiteAiBlockNoteMessage({
+  markdown,
+}: {
+  markdown: string;
+}) {
+  const { resolvedTheme } = useSuiteTheme();
+  const editor = useCreateBlockNote({ schema: assistantSchema });
+
+  useEffect(() => {
+    try {
+      const blocks = editor.tryParseMarkdownToBlocks(markdown);
+      editor.replaceBlocks(
+        editor.document,
+        blocks.length > 0 ? blocks : [{ type: "paragraph", content: markdown }],
+      );
+    } catch {
+      editor.replaceBlocks(editor.document, [
+        { type: "paragraph", content: markdown },
+      ]);
+    }
+  }, [editor, markdown]);
+
+  return (
+    <BlockNoteViewRaw
+      editor={editor}
+      editable={false}
+      theme={resolvedTheme}
+      className="suite-ai-blocknote"
+      formattingToolbar={false}
+      sideMenu={false}
+      slashMenu={false}
+      linkToolbar={false}
+      filePanel={false}
+      tableHandles={false}
+      comments={false}
+    />
+  );
+}

package/src/suite/components/ai-panel.tsx

@@ -1,6 +1,8 @@
 'use client';
 
 import {
+  lazy,
+  Suspense,
   useCallback,
   useEffect,
   useRef,
@@ -12,6 +14,10 @@ import {
 } from 'react';
 import { Check, Copy, Sparks, Xmark as X } from 'iconoir-react';
 
+const SuiteAiBlockNoteMessage = lazy(
+  () => import('./ai-message-blocknote'),
+);
+
 export const SUITE_OPEN_ASK_AI_EVENT = 'shellstack:open-ask-ai';
 
 export type SuiteAskAiOpenDetail = {
@@ -530,7 +536,19 @@ export function SuiteAiPanel({
                     }
                     data-test={isUser ? 'ask-ai-user' : 'ask-ai-assistant'}
                   >
-                    <p className="whitespace-pre-wrap">{message.content}</p>
+                    {isUser ? (
+                      <p className="whitespace-pre-wrap">{message.content}</p>
+                    ) : (
+                      <Suspense
+                        fallback={
+                          <p className="whitespace-pre-wrap">
+                            {message.content}
+                          </p>
+                        }
+                      >
+                        <SuiteAiBlockNoteMessage markdown={message.content} />
+                      </Suspense>
+                    )}
                     {!isUser ? (
                       <button
                         type="button"