@promptbook/components 0.112.0-101 → 0.112.0-102

package/esm/src/book-components/Chat/MarkdownContent/MarkdownContent.d.ts

@@ -7,6 +7,7 @@ type MarkdownContentProps = {
     content: string_markdown;
     className?: string;
     onCreateAgent?: (bookContent: string) => void;
+    theme?: 'LIGHT' | 'DARK';
 };
 /**
  * Renders markdown content with support for code highlighting, math, and tables.

package/esm/src/version.d.ts

@@ -15,7 +15,7 @@ export declare const BOOK_LANGUAGE_VERSION: string_semantic_version;
 export declare const PROMPTBOOK_ENGINE_VERSION: string_promptbook_version;
 /**
  * Represents the version string of the Promptbook engine.
- * It follows semantic versioning (e.g., `0.112.0-100`).
+ * It follows semantic versioning (e.g., `0.112.0-101`).
  *
  * @generated
  */

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@promptbook/components",
-    "version": "0.112.0-101",
+    "version": "0.112.0-102",
     "description": "Promptbook: Create persistent AI agents that turn your company's scattered knowledge into action",
     "private": false,
     "sideEffects": false,

package/umd/index.umd.js

@@ -31,7 +31,7 @@
      * @generated
      * @see https://github.com/webgptorg/promptbook
      */
-    const PROMPTBOOK_ENGINE_VERSION = '0.112.0-101';
+    const PROMPTBOOK_ENGINE_VERSION = '0.112.0-102';
     /**
      * TODO: string_promptbook_version should be constrained to the all versions of Promptbook engine
      * Note: [💞] Ignore a discrepancy between file name and entity name
@@ -22176,6 +22176,23 @@
      * @private utility of `MarkdownContent` component
      */
     const DETAILS_SUMMARY_SELECTOR = 'summary';
+    /**
+     * Resolves the active document theme when a host application does not pass an explicit theme.
+     *
+     * @private utility of `MarkdownContent` component
+     */
+    function resolveMarkdownContentTheme(explicitTheme) {
+        if (explicitTheme) {
+            return explicitTheme;
+        }
+        if (typeof document !== 'undefined') {
+            const resolvedTheme = document.documentElement.dataset.themeResolved;
+            if (resolvedTheme === 'dark' || document.documentElement.classList.contains('dark')) {
+                return 'DARK';
+            }
+        }
+        return 'LIGHT';
+    }
     /**
      * Returns a stable key for a `<details>` element based on its `<summary>` text.
      * Used to identify and restore open state across re-renders.
@@ -22231,16 +22248,34 @@
      * @public exported from `@promptbook/components`
      */
     const MarkdownContent = react.memo(function MarkdownContent(props) {
-        const { content, className, onCreateAgent } = props;
+        const { content, className, onCreateAgent, theme } = props;
         const htmlContent = react.useMemo(() => renderMarkdown(content, {
             citationReferenceClassName: styles$b.citationRef,
         }), [content]);
+        const [resolvedTheme, setResolvedTheme] = react.useState(() => resolveMarkdownContentTheme(theme));
         const containerRef = react.useRef(null);
         const rootsRef = react.useRef([]);
         /** Tracks which `<details>` elements (by summary key) are currently open */
         const openDetailsKeysRef = react.useRef(new Set());
         const onCreateAgentRef = react.useRef(onCreateAgent);
         onCreateAgentRef.current = onCreateAgent;
+        react.useEffect(() => {
+            if (theme) {
+                setResolvedTheme(theme);
+                return;
+            }
+            const updateTheme = () => setResolvedTheme(resolveMarkdownContentTheme());
+            updateTheme();
+            if (typeof document === 'undefined' || typeof MutationObserver === 'undefined') {
+                return;
+            }
+            const observer = new MutationObserver(updateTheme);
+            observer.observe(document.documentElement, {
+                attributes: true,
+                attributeFilter: ['class', 'data-theme-resolved'],
+            });
+            return () => observer.disconnect();
+        }, [theme]);
         react.useEffect(() => {
             // Cleanup previous roots
             rootsRef.current.forEach((root) => root.unmount());
@@ -22313,7 +22348,7 @@
                 pre.appendChild(mountPoint);
                 // Render CodeBlock
                 const root = client.createRoot(mountPoint);
-                root.render(jsxRuntime.jsx(CodeBlock, { code: code, language: language, onCreateAgent: onCreateAgentRef.current }));
+                root.render(jsxRuntime.jsx(CodeBlock, { code: code, language: language, onCreateAgent: onCreateAgentRef.current, theme: resolvedTheme }));
                 rootsRef.current.push(root);
             });
             return () => {
@@ -22324,7 +22359,7 @@
                 rootsRef.current.forEach((root) => root.unmount());
                 rootsRef.current = [];
             };
-        }, [htmlContent]);
+        }, [htmlContent, resolvedTheme]);
         return (jsxRuntime.jsx("div", { ref: containerRef, className: classNames(styles$b.MarkdownContent, className), dangerouslySetInnerHTML: {
                 __html: htmlContent,
             } }));