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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xenide-io/the-old-ui-theme",
-  "version": "0.4.6",
+  "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.test.ts

@@ -0,0 +1,20 @@
+import { describe, expect, it } from 'vitest';
+
+import { resolveSuiteAiLauncherPosition } from './ai-panel';
+
+describe('resolveSuiteAiLauncherPosition', () => {
+  it('docks to either edge and keeps the launcher inside the viewport', () => {
+    expect(
+      resolveSuiteAiLauncherPosition('left', -20, 1000, 800, 120, 40),
+    ).toEqual({
+      x: 12,
+      y: 12,
+    });
+    expect(
+      resolveSuiteAiLauncherPosition('right', 900, 1000, 800, 120, 40),
+    ).toEqual({
+      x: 868,
+      y: 748,
+    });
+  });
+});

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

@@ -1,15 +1,23 @@
 'use client';
 
 import {
+  lazy,
+  Suspense,
   useCallback,
   useEffect,
   useRef,
   useState,
   type ComponentType,
+  type KeyboardEvent as ReactKeyboardEvent,
+  type PointerEvent as ReactPointerEvent,
   type ReactNode,
 } 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 = {
@@ -37,6 +45,34 @@ export interface SuiteAiChatMessage {
   created_at?: string;
 }
 
+type LauncherSide = 'left' | 'right';
+type LauncherPosition = { x: number; y: number };
+
+const LAUNCHER_EDGE_GAP = 12;
+const LAUNCHER_STORAGE_KEY = 'suite-ask-ai-launcher-position';
+
+export function resolveSuiteAiLauncherPosition(
+  side: LauncherSide,
+  desiredY: number,
+  viewportWidth: number,
+  viewportHeight: number,
+  launcherWidth: number,
+  launcherHeight: number,
+): LauncherPosition {
+  const maxX = Math.max(
+    LAUNCHER_EDGE_GAP,
+    viewportWidth - launcherWidth - LAUNCHER_EDGE_GAP,
+  );
+  const maxY = Math.max(
+    LAUNCHER_EDGE_GAP,
+    viewportHeight - launcherHeight - LAUNCHER_EDGE_GAP,
+  );
+  return {
+    x: side === 'left' ? LAUNCHER_EDGE_GAP : maxX,
+    y: Math.min(Math.max(desiredY, LAUNCHER_EDGE_GAP), maxY),
+  };
+}
+
 /**
  * Suite-wide Ask AI slide-over — Notion-style continuous chat.
  *
@@ -77,9 +113,67 @@ export function SuiteAiPanel({
   const [hydrating, setHydrating] = useState(false);
   const [error, setError] = useState('');
   const [copiedId, setCopiedId] = useState<number | null>(null);
+  const [launcherSide, setLauncherSide] = useState<LauncherSide>('right');
+  const [launcherPosition, setLauncherPosition] =
+    useState<LauncherPosition | null>(null);
+  const [draggingLauncher, setDraggingLauncher] = useState(false);
   const scrollerRef = useRef<HTMLDivElement>(null);
+  const launcherRef = useRef<HTMLButtonElement>(null);
+  const launcherSideRef = useRef<LauncherSide>('right');
+  const launcherPositionRef = useRef<LauncherPosition | null>(null);
+  const launcherDragRef = useRef<{
+    pointerId: number;
+    offsetX: number;
+    offsetY: number;
+    startX: number;
+    startY: number;
+  } | null>(null);
+  const suppressLauncherClickRef = useRef(false);
   const pendingPromptRef = useRef<string | null>(null);
 
+  useEffect(() => {
+    const launcher = launcherRef.current;
+    if (!launcher) return;
+
+    let side: LauncherSide = 'right';
+    let desiredY = window.innerHeight - launcher.offsetHeight - 20;
+    try {
+      const stored = JSON.parse(
+        localStorage.getItem(LAUNCHER_STORAGE_KEY) || 'null',
+      ) as {
+        side?: LauncherSide;
+        y?: number;
+      } | null;
+      if (stored?.side === 'left' || stored?.side === 'right')
+        side = stored.side;
+      if (typeof stored?.y === 'number') desiredY = stored.y;
+    } catch {
+      // Ignore invalid saved launcher positions.
+    }
+
+    launcherSideRef.current = side;
+    setLauncherSide(side);
+
+    const placeLauncher = () => {
+      const element = launcherRef.current;
+      if (!element) return;
+      const next = resolveSuiteAiLauncherPosition(
+        launcherSideRef.current,
+        launcherPositionRef.current?.y ?? desiredY,
+        window.innerWidth,
+        window.innerHeight,
+        element.offsetWidth,
+        element.offsetHeight,
+      );
+      launcherPositionRef.current = next;
+      setLauncherPosition(next);
+    };
+
+    placeLauncher();
+    window.addEventListener('resize', placeLauncher);
+    return () => window.removeEventListener('resize', placeLauncher);
+  }, []);
+
   const scrollToBottom = useCallback(() => {
     const el = scrollerRef.current;
     if (!el) return;
@@ -185,21 +279,158 @@ export function SuiteAiPanel({
     }
   }
 
+  function saveLauncherPosition(
+    side: LauncherSide,
+    position: LauncherPosition,
+  ) {
+    try {
+      localStorage.setItem(
+        LAUNCHER_STORAGE_KEY,
+        JSON.stringify({ side, y: position.y }),
+      );
+    } catch {
+      // Storage may be unavailable; dragging still works for this session.
+    }
+  }
+
+  function dockLauncher(side: LauncherSide, desiredY: number) {
+    const launcher = launcherRef.current;
+    if (!launcher) return;
+    const next = resolveSuiteAiLauncherPosition(
+      side,
+      desiredY,
+      window.innerWidth,
+      window.innerHeight,
+      launcher.offsetWidth,
+      launcher.offsetHeight,
+    );
+    launcherSideRef.current = side;
+    launcherPositionRef.current = next;
+    setLauncherSide(side);
+    setLauncherPosition(next);
+    saveLauncherPosition(side, next);
+  }
+
+  function startLauncherDrag(event: ReactPointerEvent<HTMLButtonElement>) {
+    if (event.pointerType === 'mouse' && event.button !== 0) return;
+    const rect = event.currentTarget.getBoundingClientRect();
+    launcherDragRef.current = {
+      pointerId: event.pointerId,
+      offsetX: event.clientX - rect.left,
+      offsetY: event.clientY - rect.top,
+      startX: event.clientX,
+      startY: event.clientY,
+    };
+    suppressLauncherClickRef.current = false;
+    event.currentTarget.setPointerCapture(event.pointerId);
+    setDraggingLauncher(true);
+  }
+
+  function moveLauncher(event: ReactPointerEvent<HTMLButtonElement>) {
+    const drag = launcherDragRef.current;
+    if (!drag || drag.pointerId !== event.pointerId) return;
+    const launcher = event.currentTarget;
+    const maxX = Math.max(
+      LAUNCHER_EDGE_GAP,
+      window.innerWidth - launcher.offsetWidth - LAUNCHER_EDGE_GAP,
+    );
+    const maxY = Math.max(
+      LAUNCHER_EDGE_GAP,
+      window.innerHeight - launcher.offsetHeight - LAUNCHER_EDGE_GAP,
+    );
+    const next = {
+      x: Math.min(
+        Math.max(event.clientX - drag.offsetX, LAUNCHER_EDGE_GAP),
+        maxX,
+      ),
+      y: Math.min(
+        Math.max(event.clientY - drag.offsetY, LAUNCHER_EDGE_GAP),
+        maxY,
+      ),
+    };
+    if (
+      Math.hypot(event.clientX - drag.startX, event.clientY - drag.startY) > 4
+    ) {
+      suppressLauncherClickRef.current = true;
+    }
+    launcherPositionRef.current = next;
+    setLauncherPosition(next);
+  }
+
+  function finishLauncherDrag(event: ReactPointerEvent<HTMLButtonElement>) {
+    const drag = launcherDragRef.current;
+    if (!drag || drag.pointerId !== event.pointerId) return;
+    if (event.currentTarget.hasPointerCapture(event.pointerId)) {
+      event.currentTarget.releasePointerCapture(event.pointerId);
+    }
+    launcherDragRef.current = null;
+    setDraggingLauncher(false);
+    const rect = event.currentTarget.getBoundingClientRect();
+    const currentX = launcherPositionRef.current?.x ?? rect.left;
+    const side: LauncherSide =
+      currentX + rect.width / 2 < window.innerWidth / 2 ? 'left' : 'right';
+    dockLauncher(side, launcherPositionRef.current?.y ?? rect.top);
+  }
+
+  function moveLauncherWithKeyboard(
+    event: ReactKeyboardEvent<HTMLButtonElement>,
+  ) {
+    if (
+      !['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown'].includes(event.key)
+    )
+      return;
+    event.preventDefault();
+    const currentY =
+      launcherPositionRef.current?.y ??
+      event.currentTarget.getBoundingClientRect().top;
+    if (event.key === 'ArrowLeft') dockLauncher('left', currentY);
+    else if (event.key === 'ArrowRight') dockLauncher('right', currentY);
+    else
+      dockLauncher(
+        launcherSideRef.current,
+        currentY + (event.key === 'ArrowUp' ? -24 : 24),
+      );
+  }
+
   const Icon = BrandIcon ?? Sparks;
 
   return (
     <>
       {!hideLauncher ? (
-        <button
-          type="button"
-          data-test="ai-panel-launcher"
-          onClick={() => setOpen(true)}
-          className="fixed bottom-5 right-5 z-30 flex items-center gap-2 rounded-full border border-ph-border bg-ph-surface px-4 py-2.5 text-sm font-medium text-ph-ink shadow-ph hover:bg-ph-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ph-brand"
-          aria-label="Open Ask AI"
-        >
-          <Icon className="h-4 w-4 text-ph-brand" />
-          Ask AI
-        </button>
+        <>
+          <button
+            ref={launcherRef}
+            type="button"
+            data-test="ai-panel-launcher"
+            onClick={() => {
+              if (suppressLauncherClickRef.current) {
+                suppressLauncherClickRef.current = false;
+                return;
+              }
+              setOpen(true);
+            }}
+            onPointerDown={startLauncherDrag}
+            onPointerMove={moveLauncher}
+            onPointerUp={finishLauncherDrag}
+            onPointerCancel={finishLauncherDrag}
+            onKeyDown={moveLauncherWithKeyboard}
+            className={`fixed z-30 flex touch-none select-none items-center gap-2 rounded-full border border-ph-border bg-ph-surface px-4 py-2.5 text-sm font-medium text-ph-ink shadow-ph hover:bg-ph-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ph-brand ${draggingLauncher ? 'cursor-grabbing' : 'cursor-grab'}`}
+            style={
+              launcherPosition
+                ? { left: launcherPosition.x, top: launcherPosition.y }
+                : { bottom: 20, right: 20 }
+            }
+            aria-label="Open Ask AI"
+            aria-describedby="suite-ask-ai-launcher-help"
+          >
+            <Icon className="h-4 w-4 text-ph-brand" />
+            Ask AI
+          </button>
+          <span id="suite-ask-ai-launcher-help" className="sr-only">
+            Drag to reposition, or use arrow keys. The launcher docks to the
+            nearest screen edge.
+          </span>
+        </>
       ) : null}
 
       {open ? (
@@ -211,7 +442,7 @@ export function SuiteAiPanel({
             aria-label="Close Ask AI"
           />
           <aside
-            className="absolute inset-y-0 right-0 flex w-full max-w-md flex-col border-l border-ph-border bg-ph-surface shadow-2xl"
+            className={`absolute inset-y-0 flex w-full max-w-md flex-col bg-ph-surface shadow-2xl ${launcherSide === 'left' ? 'left-0 border-r border-ph-border' : 'right-0 border-l border-ph-border'}`}
             data-test="suite-ask-ai-panel"
           >
             <div className="flex items-center justify-between border-b border-ph-border px-4 py-3">
@@ -305,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"