@promptbook/components 0.112.0-101 → 0.112.0-103

package/esm/index.es.js

@@ -42,7 +42,7 @@ const BOOK_LANGUAGE_VERSION = '2.0.0';
  * @generated
  * @see https://github.com/webgptorg/promptbook
  */
-const PROMPTBOOK_ENGINE_VERSION = '0.112.0-101';
+const PROMPTBOOK_ENGINE_VERSION = '0.112.0-103';
 /**
  * TODO: string_promptbook_version should be constrained to the all versions of Promptbook engine
  * Note: [💞] Ignore a discrepancy between file name and entity name
@@ -22187,6 +22187,23 @@ styleInject(css_248z$b);
  * @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.
@@ -22242,16 +22259,34 @@ function resolveClickedDetailsElement(target, container) {
  * @public exported from `@promptbook/components`
  */
 const MarkdownContent = memo(function MarkdownContent(props) {
-    const { content, className, onCreateAgent } = props;
+    const { content, className, onCreateAgent, theme } = props;
     const htmlContent = useMemo(() => renderMarkdown(content, {
         citationReferenceClassName: styles$b.citationRef,
     }), [content]);
+    const [resolvedTheme, setResolvedTheme] = useState(() => resolveMarkdownContentTheme(theme));
     const containerRef = useRef(null);
     const rootsRef = useRef([]);
     /** Tracks which `<details>` elements (by summary key) are currently open */
     const openDetailsKeysRef = useRef(new Set());
     const onCreateAgentRef = useRef(onCreateAgent);
     onCreateAgentRef.current = onCreateAgent;
+    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]);
     useEffect(() => {
         // Cleanup previous roots
         rootsRef.current.forEach((root) => root.unmount());
@@ -22324,7 +22359,7 @@ const MarkdownContent = memo(function MarkdownContent(props) {
             pre.appendChild(mountPoint);
             // Render CodeBlock
             const root = createRoot(mountPoint);
-            root.render(jsx(CodeBlock, { code: code, language: language, onCreateAgent: onCreateAgentRef.current }));
+            root.render(jsx(CodeBlock, { code: code, language: language, onCreateAgent: onCreateAgentRef.current, theme: resolvedTheme }));
             rootsRef.current.push(root);
         });
         return () => {
@@ -22335,7 +22370,7 @@ const MarkdownContent = memo(function MarkdownContent(props) {
             rootsRef.current.forEach((root) => root.unmount());
             rootsRef.current = [];
         };
-    }, [htmlContent]);
+    }, [htmlContent, resolvedTheme]);
     return (jsx("div", { ref: containerRef, className: classNames(styles$b.MarkdownContent, className), dangerouslySetInnerHTML: {
             __html: htmlContent,
         } }));