@promptbook/components 0.104.0-1 → 0.104.0-11

package/esm/index.es.js

@@ -1,5 +1,5 @@
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-import { useMemo, useEffect, useState, useRef, useCallback, forwardRef, memo } from 'react';
+import { useMemo, useEffect, useState, useRef, createContext, useContext, useCallback, forwardRef, memo } from 'react';
 import spaceTrim$2, { spaceTrim as spaceTrim$1 } from 'spacetrim';
 import { SHA256 } from 'crypto-js';
 import hexEncoder from 'crypto-js/enc-hex';
@@ -8,8 +8,8 @@ import { randomBytes } from 'crypto';
 import { createPortal } from 'react-dom';
 import Editor, { useMonaco } from '@monaco-editor/react';
 import { Registration } from 'destroyable';
-import hljs from 'highlight.js';
 import katex from 'katex';
+import { createRoot } from 'react-dom/client';
 import { Converter } from 'showdown';
 import { BehaviorSubject, Subject } from 'rxjs';
 import { forTime } from 'waitasecond';
@@ -35,7 +35,7 @@ const BOOK_LANGUAGE_VERSION = '2.0.0';
  * @generated
  * @see https://github.com/webgptorg/promptbook
  */
-const PROMPTBOOK_ENGINE_VERSION = '0.104.0-1';
+const PROMPTBOOK_ENGINE_VERSION = '0.104.0-11';
 /**
  * TODO: string_promptbook_version should be constrained to the all versions of Promptbook engine
  * Note: [💞] Ignore a discrepancy between file name and entity name
@@ -84,9 +84,9 @@ function styleInject(css, ref) {
   }
 }
 
-var css_248z$9 = ".AvatarChip-module_AvatarChip__4sA0u{align-items:center;background:#e0e7ef;border:1px solid #b3c2d1;border-radius:16px;color:#2a3b4d;cursor:pointer;display:inline-flex;font-size:.95em;font-weight:500;margin:2px;padding:4px 12px}.AvatarChip-module_Avatar__mN2sc{border-radius:50%;height:24px;margin-right:8px;object-fit:cover;width:24px}.AvatarChip-module_TemplateLabel__-7vVI{background:#f0f4f8;border-radius:12px;color:#3a4752;font-size:.8em;margin-left:8px;margin-right:0;padding:2px 6px;text-transform:uppercase}\n/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkF2YXRhckNoaXAubW9kdWxlLmNzcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxxQ0FFSSxrQkFBbUIsQ0FHbkIsa0JBQW1CLENBS25CLHdCQUF5QixDQU56QixrQkFBbUIsQ0FFbkIsYUFBYyxDQU1kLGNBQWUsQ0FYZixtQkFBb0IsQ0FPcEIsZUFBaUIsQ0FEakIsZUFBZ0IsQ0FFaEIsVUFBVyxDQU5YLGdCQVVKLENBRUEsaUNBR0ksaUJBQWtCLENBRGxCLFdBQVksQ0FHWixnQkFBaUIsQ0FEakIsZ0JBQWlCLENBSGpCLFVBS0osQ0FFQSx3Q0FDSSxrQkFBbUIsQ0FJbkIsa0JBQW1CLENBSG5CLGFBQWMsQ0FDZCxjQUFnQixDQUdoQixlQUFnQixDQUNoQixjQUFlLENBSGYsZUFBZ0IsQ0FJaEIsd0JBQ0oiLCJmaWxlIjoiQXZhdGFyQ2hpcC5tb2R1bGUuY3NzIiwic291cmNlc0NvbnRlbnQiOlsiLkF2YXRhckNoaXAge1xuICAgIGRpc3BsYXk6IGlubGluZS1mbGV4O1xuICAgIGFsaWduLWl0ZW1zOiBjZW50ZXI7XG4gICAgcGFkZGluZzogNHB4IDEycHg7XG4gICAgYm9yZGVyLXJhZGl1czogMTZweDtcbiAgICBiYWNrZ3JvdW5kOiAjZTBlN2VmO1xuICAgIGNvbG9yOiAjMmEzYjRkO1xuICAgIGZvbnQtd2VpZ2h0OiA1MDA7XG4gICAgZm9udC1zaXplOiAwLjk1ZW07XG4gICAgbWFyZ2luOiAycHg7XG4gICAgYm9yZGVyOiAxcHggc29saWQgI2IzYzJkMTtcblxuICAgIGN1cnNvcjogcG9pbnRlcjtcbn1cblxuLkF2YXRhciB7XG4gICAgd2lkdGg6IDI0cHg7XG4gICAgaGVpZ2h0OiAyNHB4O1xuICAgIGJvcmRlci1yYWRpdXM6IDUwJTtcbiAgICBvYmplY3QtZml0OiBjb3ZlcjtcbiAgICBtYXJnaW4tcmlnaHQ6IDhweDtcbn1cblxuLlRlbXBsYXRlTGFiZWwge1xuICAgIGJhY2tncm91bmQ6ICNmMGY0Zjg7XG4gICAgY29sb3I6ICMzYTQ3NTI7XG4gICAgZm9udC1zaXplOiAwLjhlbTtcbiAgICBwYWRkaW5nOiAycHggNnB4O1xuICAgIGJvcmRlci1yYWRpdXM6IDEycHg7XG4gICAgbWFyZ2luLWxlZnQ6IDhweDtcbiAgICBtYXJnaW4tcmlnaHQ6IDA7XG4gICAgdGV4dC10cmFuc2Zvcm06IHVwcGVyY2FzZTtcbn1cbiJdfQ== */";
-var styles$8 = {"AvatarChip":"AvatarChip-module_AvatarChip__4sA0u","Avatar":"AvatarChip-module_Avatar__mN2sc","TemplateLabel":"AvatarChip-module_TemplateLabel__-7vVI"};
-styleInject(css_248z$9);
+var css_248z$a = ".AvatarChip-module_AvatarChip__4sA0u{align-items:center;background:#e0e7ef;border:1px solid #b3c2d1;border-radius:16px;color:#2a3b4d;cursor:pointer;display:inline-flex;font-size:.95em;font-weight:500;margin:2px;padding:4px 12px}.AvatarChip-module_Avatar__mN2sc{border-radius:50%;height:24px;margin-right:8px;object-fit:cover;width:24px}.AvatarChip-module_TemplateLabel__-7vVI{background:#f0f4f8;border-radius:12px;color:#3a4752;font-size:.8em;margin-left:8px;margin-right:0;padding:2px 6px;text-transform:uppercase}\n/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkF2YXRhckNoaXAubW9kdWxlLmNzcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxxQ0FFSSxrQkFBbUIsQ0FHbkIsa0JBQW1CLENBS25CLHdCQUF5QixDQU56QixrQkFBbUIsQ0FFbkIsYUFBYyxDQU1kLGNBQWUsQ0FYZixtQkFBb0IsQ0FPcEIsZUFBaUIsQ0FEakIsZUFBZ0IsQ0FFaEIsVUFBVyxDQU5YLGdCQVVKLENBRUEsaUNBR0ksaUJBQWtCLENBRGxCLFdBQVksQ0FHWixnQkFBaUIsQ0FEakIsZ0JBQWlCLENBSGpCLFVBS0osQ0FFQSx3Q0FDSSxrQkFBbUIsQ0FJbkIsa0JBQW1CLENBSG5CLGFBQWMsQ0FDZCxjQUFnQixDQUdoQixlQUFnQixDQUNoQixjQUFlLENBSGYsZUFBZ0IsQ0FJaEIsd0JBQ0oiLCJmaWxlIjoiQXZhdGFyQ2hpcC5tb2R1bGUuY3NzIiwic291cmNlc0NvbnRlbnQiOlsiLkF2YXRhckNoaXAge1xuICAgIGRpc3BsYXk6IGlubGluZS1mbGV4O1xuICAgIGFsaWduLWl0ZW1zOiBjZW50ZXI7XG4gICAgcGFkZGluZzogNHB4IDEycHg7XG4gICAgYm9yZGVyLXJhZGl1czogMTZweDtcbiAgICBiYWNrZ3JvdW5kOiAjZTBlN2VmO1xuICAgIGNvbG9yOiAjMmEzYjRkO1xuICAgIGZvbnQtd2VpZ2h0OiA1MDA7XG4gICAgZm9udC1zaXplOiAwLjk1ZW07XG4gICAgbWFyZ2luOiAycHg7XG4gICAgYm9yZGVyOiAxcHggc29saWQgI2IzYzJkMTtcblxuICAgIGN1cnNvcjogcG9pbnRlcjtcbn1cblxuLkF2YXRhciB7XG4gICAgd2lkdGg6IDI0cHg7XG4gICAgaGVpZ2h0OiAyNHB4O1xuICAgIGJvcmRlci1yYWRpdXM6IDUwJTtcbiAgICBvYmplY3QtZml0OiBjb3ZlcjtcbiAgICBtYXJnaW4tcmlnaHQ6IDhweDtcbn1cblxuLlRlbXBsYXRlTGFiZWwge1xuICAgIGJhY2tncm91bmQ6ICNmMGY0Zjg7XG4gICAgY29sb3I6ICMzYTQ3NTI7XG4gICAgZm9udC1zaXplOiAwLjhlbTtcbiAgICBwYWRkaW5nOiAycHggNnB4O1xuICAgIGJvcmRlci1yYWRpdXM6IDEycHg7XG4gICAgbWFyZ2luLWxlZnQ6IDhweDtcbiAgICBtYXJnaW4tcmlnaHQ6IDA7XG4gICAgdGV4dC10cmFuc2Zvcm06IHVwcGVyY2FzZTtcbn1cbiJdfQ== */";
+var styles$9 = {"AvatarChip":"AvatarChip-module_AvatarChip__4sA0u","Avatar":"AvatarChip-module_Avatar__mN2sc","TemplateLabel":"AvatarChip-module_TemplateLabel__-7vVI"};
+styleInject(css_248z$a);
 
 /**
  * Shows a chip with avatar's avatar and name
@@ -96,7 +96,7 @@ styleInject(css_248z$9);
 function AvatarChip(props) {
     const { avatarBasicInformation, className, onSelect, isSelected, isTemplate } = props;
     const { agentName, meta } = avatarBasicInformation;
-    return (jsxs("div", { className: classNames(styles$8.AvatarChip, className, isSelected ? styles$8.Selected : undefined), onClick: () => onSelect === null || onSelect === void 0 ? void 0 : onSelect(avatarBasicInformation), style: { cursor: onSelect ? 'pointer' : undefined }, children: [jsx("img", { src: meta.image, alt: agentName || '', className: styles$8.Avatar }), meta.fullname || agentName, isTemplate && jsx("span", { className: styles$8.TemplateLabel, children: "Template" })] }));
+    return (jsxs("div", { className: classNames(styles$9.AvatarChip, className, isSelected ? styles$9.Selected : undefined), onClick: () => onSelect === null || onSelect === void 0 ? void 0 : onSelect(avatarBasicInformation), style: { cursor: onSelect ? 'pointer' : undefined }, children: [jsx("img", { src: meta.image, alt: agentName || '', className: styles$9.Avatar }), meta.fullname || agentName, isTemplate && jsx("span", { className: styles$9.TemplateLabel, children: "Template" })] }));
 }
 
 /**
@@ -153,48 +153,12 @@ function normalizeTo_camelCase(text, _isFirstLetterCapital = false) {
  * TODO: [🌺] Use some intermediate util splitWords
  */
 
-/**
- * Generates a gravatar URL based on agent name for fallback avatar
- *
- * @param agentName The agent name to generate avatar for
- * @returns Gravatar URL
- *
- * @private - [🤹] The fact that profile image is Gravatar is just implementation detail which should be hidden for consumer
- */
-function generateGravatarUrl(agentName) {
-    // Use a default name if none provided
-    const safeName = agentName || 'Anonymous Agent';
-    // Create a simple hash from the name for consistent avatar
-    let hash = 0;
-    for (let i = 0; i < safeName.length; i++) {
-        const char = safeName.charCodeAt(i);
-        hash = (hash << 5) - hash + char;
-        hash = hash & hash; // Convert to 32bit integer
-    }
-    const avatarId = Math.abs(hash).toString();
-    return `https://www.gravatar.com/avatar/${avatarId}?default=robohash&size=200&rating=x`;
-}
-
-/**
- * Generates an image for the agent to use as profile image
- *
- * @param agentName The agent name to generate avatar for
- * @returns The placeholder profile image URL for the agent
- *
- * @public exported from `@promptbook/core`
- */
-function generatePlaceholderAgentProfileImageUrl(agentName) {
-    // Note: [🤹] The fact that profile image is Gravatar is just implementation detail which should be hidden for consumer
-    return generateGravatarUrl(agentName);
-}
-/**
- * TODO: [🤹] Figure out best placeholder image generator https://i.pravatar.cc/1000?u=568
- */
-
 /**
  * Core Promptbook server configuration.
  *
  * This server is also used for auto-federation in the Agents Server.
+ *
+ * @public exported from `@promptbook/core`
  */
 const CORE_SERVER = {
     title: 'Promptbook Core',
@@ -3047,13 +3011,14 @@ function prompt(strings, ...values) {
  *
  * @public exported from `@promptbook/utils`
  */
-const $isRunningInBrowser = new Function(`
+function $isRunningInBrowser() {
     try {
-        return this === window;
-    } catch (e) {
+        return typeof window !== 'undefined' && typeof window.document !== 'undefined';
+    }
+    catch (e) {
         return false;
     }
-`);
+}
 /**
  * TODO: [🎺]
  */
@@ -3065,13 +3030,15 @@ const $isRunningInBrowser = new Function(`
  *
  * @public exported from `@promptbook/utils`
  */
-const $isRunningInJest = new Function(`
+function $isRunningInJest() {
+    var _a;
     try {
-        return process.env.JEST_WORKER_ID !== undefined;
-    } catch (e) {
+        return typeof process !== 'undefined' && ((_a = process.env) === null || _a === void 0 ? void 0 : _a.JEST_WORKER_ID) !== undefined;
+    }
+    catch (e) {
         return false;
     }
-`);
+}
 /**
  * TODO: [🎺]
  */
@@ -3083,13 +3050,14 @@ const $isRunningInJest = new Function(`
  *
  * @public exported from `@promptbook/utils`
  */
-const $isRunningInNode = new Function(`
+function $isRunningInNode() {
     try {
-        return this === global;
-    } catch (e) {
+        return typeof process !== 'undefined' && process.versions != null && process.versions.node != null;
+    }
+    catch (e) {
         return false;
     }
-`);
+}
 /**
  * TODO: [🎺]
  */
@@ -3101,17 +3069,17 @@ const $isRunningInNode = new Function(`
  *
  * @public exported from `@promptbook/utils`
  */
-const $isRunningInWebWorker = new Function(`
+function $isRunningInWebWorker() {
     try {
-        if (typeof WorkerGlobalScope !== 'undefined' && self instanceof WorkerGlobalScope) {
-            return true;
-        } else {
-            return false;
-        }
-    } catch (e) {
+        // Note: Check for importScripts which is specific to workers
+        //       and not available in the main browser thread
+        return (typeof self !== 'undefined' &&
+            typeof self.importScripts === 'function');
+    }
+    catch (e) {
         return false;
     }
-`);
+}
 /**
  * TODO: [🎺]
  */
@@ -4127,6 +4095,114 @@ class DeleteCommitmentDefinition extends BaseCommitmentDefinition {
  * Note: [💞] Ignore a discrepancy between file name and entity name
  */
 
+/**
+ * DICTIONARY commitment definition
+ *
+ * The DICTIONARY commitment defines specific terms and their meanings that the agent should use correctly
+ * in its reasoning and responses. This ensures consistent terminology usage.
+ *
+ * Key features:
+ * - Multiple DICTIONARY commitments are automatically merged into one
+ * - Content is placed in a dedicated section of the system message
+ * - Terms and definitions are stored in metadata.DICTIONARY for debugging
+ * - Agent should use the defined terms correctly in responses
+ *
+ * Example usage in agent source:
+ *
+ * ```book
+ * Legal Assistant
+ *
+ * PERSONA You are a knowledgeable legal assistant
+ * DICTIONARY Misdemeanor is a minor wrongdoing or criminal offense
+ * DICTIONARY Felony is a serious crime usually punishable by imprisonment for more than one year
+ * DICTIONARY Tort is a civil wrong that causes harm or loss to another person, leading to legal liability
+ * ```
+ *
+ * @private [🪔] Maybe export the commitments through some package
+ */
+class DictionaryCommitmentDefinition extends BaseCommitmentDefinition {
+    constructor() {
+        super('DICTIONARY');
+    }
+    /**
+     * Short one-line description of DICTIONARY.
+     */
+    get description() {
+        return 'Define terms and their meanings for consistent terminology usage.';
+    }
+    /**
+     * Icon for this commitment.
+     */
+    get icon() {
+        return '📚';
+    }
+    /**
+     * Markdown documentation for DICTIONARY commitment.
+     */
+    get documentation() {
+        return spaceTrim$1(`
+            # DICTIONARY
+
+            Defines specific terms and their meanings that the agent should use correctly in reasoning and responses.
+
+            ## Key aspects
+
+            - Multiple \`DICTIONARY\` commitments are merged together.
+            - Terms are defined in the format: "Term is definition"
+            - The agent should use these terms consistently in responses.
+            - Definitions help ensure accurate and consistent terminology.
+
+            ## Examples
+
+            \`\`\`book
+            Legal Assistant
+
+            PERSONA You are a knowledgeable legal assistant specializing in criminal law
+            DICTIONARY Misdemeanor is a minor wrongdoing or criminal offense
+            DICTIONARY Felony is a serious crime usually punishable by imprisonment for more than one year
+            DICTIONARY Tort is a civil wrong that causes harm or loss to another person, leading to legal liability
+            \`\`\`
+
+            \`\`\`book
+            Medical Assistant
+
+            PERSONA You are a helpful medical assistant
+            DICTIONARY Hypertension is persistently high blood pressure
+            DICTIONARY Diabetes is a chronic condition that affects how the body processes blood sugar
+            DICTIONARY Vaccine is a biological preparation that provides active immunity to a particular disease
+            \`\`\`
+        `);
+    }
+    applyToAgentModelRequirements(requirements, content) {
+        var _a;
+        const trimmedContent = content.trim();
+        if (!trimmedContent) {
+            return requirements;
+        }
+        // Get existing dictionary entries from metadata
+        const existingDictionary = ((_a = requirements.metadata) === null || _a === void 0 ? void 0 : _a.DICTIONARY) || '';
+        // Merge the new dictionary entry with existing entries
+        const mergedDictionary = existingDictionary
+            ? `${existingDictionary}\n${trimmedContent}`
+            : trimmedContent;
+        // Store the merged dictionary in metadata for debugging and inspection
+        const updatedMetadata = {
+            ...requirements.metadata,
+            DICTIONARY: mergedDictionary,
+        };
+        // Create the dictionary section for the system message
+        // Format: "# DICTIONARY\nTerm: definition\nTerm: definition..."
+        const dictionarySection = `# DICTIONARY\n${mergedDictionary}`;
+        return {
+            ...this.appendToSystemMessage(requirements, dictionarySection),
+            metadata: updatedMetadata,
+        };
+    }
+}
+/**
+ * Note: [💞] Ignore a discrepancy between file name and entity name
+ */
+
 /**
  * FORMAT commitment definition
  *
@@ -6947,6 +7023,7 @@ const COMMITMENT_REGISTRY = [
     new DeleteCommitmentDefinition('CANCEL'),
     new DeleteCommitmentDefinition('DISCARD'),
     new DeleteCommitmentDefinition('REMOVE'),
+    new DictionaryCommitmentDefinition(),
     new OpenCommitmentDefinition(),
     new ClosedCommitmentDefinition(),
     new UseBrowserCommitmentDefinition(),
@@ -7006,17 +7083,64 @@ function parseAgentSourceWithCommitments(agentSource) {
         };
     }
     const lines = agentSource.split('\n');
-    const agentName = (((_a = lines[0]) === null || _a === void 0 ? void 0 : _a.trim()) || null);
+    let agentName = null;
+    let agentNameLineIndex = -1;
+    // Find the agent name: first non-empty line that is not a commitment and not a horizontal line
+    for (let i = 0; i < lines.length; i++) {
+        const line = lines[i];
+        if (line === undefined) {
+            continue;
+        }
+        const trimmed = line.trim();
+        if (!trimmed) {
+            continue;
+        }
+        const isHorizontal = HORIZONTAL_LINE_PATTERN.test(line);
+        if (isHorizontal) {
+            continue;
+        }
+        let isCommitment = false;
+        for (const definition of COMMITMENT_REGISTRY) {
+            const typeRegex = definition.createTypeRegex();
+            const match = typeRegex.exec(trimmed);
+            if (match && ((_a = match.groups) === null || _a === void 0 ? void 0 : _a.type)) {
+                isCommitment = true;
+                break;
+            }
+        }
+        if (!isCommitment) {
+            agentName = trimmed;
+            agentNameLineIndex = i;
+            break;
+        }
+    }
     const commitments = [];
     const nonCommitmentLines = [];
-    // Always add the first line (agent name) to non-commitment lines
-    if (lines[0] !== undefined) {
-        nonCommitmentLines.push(lines[0]);
+    // Add lines before agentName that are horizontal lines (they are non-commitment)
+    for (let i = 0; i < agentNameLineIndex; i++) {
+        const line = lines[i];
+        if (line === undefined) {
+            continue;
+        }
+        const trimmed = line.trim();
+        if (!trimmed) {
+            continue;
+        }
+        const isHorizontal = HORIZONTAL_LINE_PATTERN.test(line);
+        if (isHorizontal) {
+            nonCommitmentLines.push(line);
+        }
+        // Note: Commitments before agentName are not added to nonCommitmentLines
+    }
+    // Add the agent name line to non-commitment lines
+    if (agentNameLineIndex >= 0) {
+        nonCommitmentLines.push(lines[agentNameLineIndex]);
     }
     // Parse commitments with multiline support
     let currentCommitment = null;
-    // Process lines starting from the second line (skip agent name)
-    for (let i = 1; i < lines.length; i++) {
+    // Process lines starting from after the agent name line
+    const startIndex = agentNameLineIndex >= 0 ? agentNameLineIndex + 1 : 0;
+    for (let i = startIndex; i < lines.length; i++) {
         const line = lines[i];
         if (line === undefined) {
             continue;
@@ -7193,7 +7317,57 @@ function parseAgentSource(agentSource) {
     }
     const meta = {};
     const links = [];
+    const capabilities = [];
     for (const commitment of parseResult.commitments) {
+        if (commitment.type === 'USE BROWSER') {
+            capabilities.push({
+                type: 'browser',
+                label: 'Browser',
+                iconName: 'Globe',
+            });
+            continue;
+        }
+        if (commitment.type === 'USE SEARCH ENGINE') {
+            capabilities.push({
+                type: 'search-engine',
+                label: 'Search Internet',
+                iconName: 'Search',
+            });
+            continue;
+        }
+        if (commitment.type === 'KNOWLEDGE') {
+            const content = spaceTrim$2(commitment.content).split('\n')[0] || '';
+            let label = content;
+            let iconName = 'Book';
+            if (content.startsWith('http://') || content.startsWith('https://')) {
+                try {
+                    const url = new URL(content);
+                    if (url.pathname.endsWith('.pdf')) {
+                        label = url.pathname.split('/').pop() || 'Document.pdf';
+                        iconName = 'FileText';
+                    }
+                    else {
+                        label = url.hostname.replace(/^www\./, '');
+                    }
+                }
+                catch (e) {
+                    // Invalid URL, treat as text
+                }
+            }
+            else {
+                // Text content - take first few words
+                const words = content.split(/\s+/);
+                if (words.length > 4) {
+                    label = words.slice(0, 4).join(' ') + '...';
+                }
+            }
+            capabilities.push({
+                type: 'knowledge',
+                label,
+                iconName,
+            });
+            continue;
+        }
         if (commitment.type === 'META LINK') {
             const linkValue = spaceTrim$2(commitment.content);
             links.push(linkValue);
@@ -7223,10 +7397,6 @@ function parseAgentSource(agentSource) {
         const metaType = normalizeTo_camelCase(metaTypeRaw);
         meta[metaType] = spaceTrim$2(commitment.content.substring(metaTypeRaw.length));
     }
-    // Generate gravatar fallback if no meta image specified
-    if (!meta.image) {
-        meta.image = generatePlaceholderAgentProfileImageUrl(parseResult.agentName || '!!');
-    }
     // Generate fullname fallback if no meta fullname specified
     if (!meta.fullname) {
         meta.fullname = parseResult.agentName || createDefaultAgentName(agentSource);
@@ -7238,11 +7408,13 @@ function parseAgentSource(agentSource) {
     return {
         agentName: normalizeAgentName(parseResult.agentName || createDefaultAgentName(agentSource)),
         agentHash,
+        permanentId: meta.id,
         personaDescription,
         initialMessage,
         meta,
         links,
         parameters,
+        capabilities,
     };
 }
 /**
@@ -7277,9 +7449,9 @@ function AvatarChipFromSource(props) {
     return jsx(AvatarChip, { avatarBasicInformation: avatarBasicInformation, ...props });
 }
 
-var css_248z$8 = ".Modal-module_scrim__jKO-A{align-items:center;background-color:rgba(0,0,0,.5);display:flex;height:100%;justify-content:center;left:0;position:fixed;top:0;width:100%;z-index:9000000}.Modal-module_Modal__k49dY{background:#fff;border-radius:8px;max-height:90%;max-width:90%;min-height:30vh;min-width:50vw;overflow:auto;padding:20px;position:relative}.Modal-module_closeButton__dzf6l{background:transparent;border:none;cursor:pointer;font-size:24px;position:absolute;right:10px;top:10px}\n/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIk1vZGFsLm1vZHVsZS5jc3MiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsMkJBU0ksa0JBQW1CLENBSG5CLCtCQUFvQyxDQUNwQyxZQUFhLENBRmIsV0FBWSxDQUdaLHNCQUF1QixDQUx2QixNQUFPLENBRlAsY0FBZSxDQUNmLEtBQU0sQ0FFTixVQUFXLENBTVgsZUFDSixDQUVBLDJCQUNJLGVBQWlCLENBRWpCLGlCQUFrQixDQUdsQixjQUFlLENBRGYsYUFBYyxDQUdkLGVBQWdCLENBRGhCLGNBQWUsQ0FFZixhQUFjLENBUGQsWUFBYSxDQUViLGlCQU1KLENBRUEsaUNBSUksc0JBQXVCLENBQ3ZCLFdBQVksQ0FFWixjQUFlLENBRGYsY0FBZSxDQUxmLGlCQUFrQixDQUVsQixVQUFXLENBRFgsUUFNSiIsImZpbGUiOiJNb2RhbC5tb2R1bGUuY3NzIiwic291cmNlc0NvbnRlbnQiOlsiLnNjcmltIHtcbiAgICBwb3NpdGlvbjogZml4ZWQ7XG4gICAgdG9wOiAwO1xuICAgIGxlZnQ6IDA7XG4gICAgd2lkdGg6IDEwMCU7XG4gICAgaGVpZ2h0OiAxMDAlO1xuICAgIGJhY2tncm91bmQtY29sb3I6IHJnYmEoMCwgMCwgMCwgMC41KTtcbiAgICBkaXNwbGF5OiBmbGV4O1xuICAgIGp1c3RpZnktY29udGVudDogY2VudGVyO1xuICAgIGFsaWduLWl0ZW1zOiBjZW50ZXI7XG4gICAgei1pbmRleDogOTAwMDAwMDtcbn1cblxuLk1vZGFsIHtcbiAgICBiYWNrZ3JvdW5kOiB3aGl0ZTtcbiAgICBwYWRkaW5nOiAyMHB4O1xuICAgIGJvcmRlci1yYWRpdXM6IDhweDtcbiAgICBwb3NpdGlvbjogcmVsYXRpdmU7XG4gICAgbWF4LXdpZHRoOiA5MCU7XG4gICAgbWF4LWhlaWdodDogOTAlO1xuICAgIG1pbi13aWR0aDogNTB2dztcbiAgICBtaW4taGVpZ2h0OiAzMHZoO1xuICAgIG92ZXJmbG93OiBhdXRvO1xufVxuXG4uY2xvc2VCdXR0b24ge1xuICAgIHBvc2l0aW9uOiBhYnNvbHV0ZTtcbiAgICB0b3A6IDEwcHg7XG4gICAgcmlnaHQ6IDEwcHg7XG4gICAgYmFja2dyb3VuZDogdHJhbnNwYXJlbnQ7XG4gICAgYm9yZGVyOiBub25lO1xuICAgIGZvbnQtc2l6ZTogMjRweDtcbiAgICBjdXJzb3I6IHBvaW50ZXI7XG59XG4iXX0= */";
-var styles$7 = {"scrim":"Modal-module_scrim__jKO-A","Modal":"Modal-module_Modal__k49dY","closeButton":"Modal-module_closeButton__dzf6l"};
-styleInject(css_248z$8);
+var css_248z$9 = ".Modal-module_scrim__jKO-A{align-items:center;background-color:rgba(0,0,0,.5);display:flex;height:100%;justify-content:center;left:0;position:fixed;top:0;width:100%;z-index:9000000}.Modal-module_Modal__k49dY{background:#fff;border-radius:8px;max-height:90%;max-width:90%;min-height:30vh;min-width:50vw;overflow:auto;padding:20px;position:relative}.Modal-module_closeButton__dzf6l{background:transparent;border:none;cursor:pointer;font-size:24px;position:absolute;right:10px;top:10px}\n/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIk1vZGFsLm1vZHVsZS5jc3MiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsMkJBU0ksa0JBQW1CLENBSG5CLCtCQUFvQyxDQUNwQyxZQUFhLENBRmIsV0FBWSxDQUdaLHNCQUF1QixDQUx2QixNQUFPLENBRlAsY0FBZSxDQUNmLEtBQU0sQ0FFTixVQUFXLENBTVgsZUFDSixDQUVBLDJCQUNJLGVBQWlCLENBRWpCLGlCQUFrQixDQUdsQixjQUFlLENBRGYsYUFBYyxDQUdkLGVBQWdCLENBRGhCLGNBQWUsQ0FFZixhQUFjLENBUGQsWUFBYSxDQUViLGlCQU1KLENBRUEsaUNBSUksc0JBQXVCLENBQ3ZCLFdBQVksQ0FFWixjQUFlLENBRGYsY0FBZSxDQUxmLGlCQUFrQixDQUVsQixVQUFXLENBRFgsUUFNSiIsImZpbGUiOiJNb2RhbC5tb2R1bGUuY3NzIiwic291cmNlc0NvbnRlbnQiOlsiLnNjcmltIHtcbiAgICBwb3NpdGlvbjogZml4ZWQ7XG4gICAgdG9wOiAwO1xuICAgIGxlZnQ6IDA7XG4gICAgd2lkdGg6IDEwMCU7XG4gICAgaGVpZ2h0OiAxMDAlO1xuICAgIGJhY2tncm91bmQtY29sb3I6IHJnYmEoMCwgMCwgMCwgMC41KTtcbiAgICBkaXNwbGF5OiBmbGV4O1xuICAgIGp1c3RpZnktY29udGVudDogY2VudGVyO1xuICAgIGFsaWduLWl0ZW1zOiBjZW50ZXI7XG4gICAgei1pbmRleDogOTAwMDAwMDtcbn1cblxuLk1vZGFsIHtcbiAgICBiYWNrZ3JvdW5kOiB3aGl0ZTtcbiAgICBwYWRkaW5nOiAyMHB4O1xuICAgIGJvcmRlci1yYWRpdXM6IDhweDtcbiAgICBwb3NpdGlvbjogcmVsYXRpdmU7XG4gICAgbWF4LXdpZHRoOiA5MCU7XG4gICAgbWF4LWhlaWdodDogOTAlO1xuICAgIG1pbi13aWR0aDogNTB2dztcbiAgICBtaW4taGVpZ2h0OiAzMHZoO1xuICAgIG92ZXJmbG93OiBhdXRvO1xufVxuXG4uY2xvc2VCdXR0b24ge1xuICAgIHBvc2l0aW9uOiBhYnNvbHV0ZTtcbiAgICB0b3A6IDEwcHg7XG4gICAgcmlnaHQ6IDEwcHg7XG4gICAgYmFja2dyb3VuZDogdHJhbnNwYXJlbnQ7XG4gICAgYm9yZGVyOiBub25lO1xuICAgIGZvbnQtc2l6ZTogMjRweDtcbiAgICBjdXJzb3I6IHBvaW50ZXI7XG59XG4iXX0= */";
+var styles$8 = {"scrim":"Modal-module_scrim__jKO-A","Modal":"Modal-module_Modal__k49dY","closeButton":"Modal-module_closeButton__dzf6l"};
+styleInject(css_248z$9);
 
 /**
  *
@@ -7297,7 +7469,7 @@ function Modal({ children, onClose, className, }) {
             window.removeEventListener('keydown', handleKeyDown);
         };
     }, [onClose]);
-    return createPortal(jsx("div", { className: styles$7.scrim, onClick: onClose, children: jsxs("div", { className: classNames(styles$7.Modal, className), onClick: (e) => e.stopPropagation(), children: [jsx("button", { className: styles$7.closeButton, onClick: onClose, children: "\u00D7" }), children] }) }), document.body);
+    return createPortal(jsx("div", { className: styles$8.scrim, onClick: onClose, children: jsxs("div", { className: classNames(styles$8.Modal, className), onClick: (e) => e.stopPropagation(), children: [jsx("button", { className: styles$8.closeButton, onClick: onClose, children: "\u00D7" }), children] }) }), document.body);
 }
 
 /**
@@ -7382,9 +7554,9 @@ const DEFAULT_BOOK = padBook(validateBook(spaceTrim$2(`
 //                  <- [🐱‍🚀] Buttons into genesis book
 // <- TODO: [🐱‍🚀] generateBookBoilerplate and deprecate `DEFAULT_BOOK`
 
-var css_248z$7 = ".BookEditor-module_BookEditor__s-0PU{width:100%}.BookEditor-module_bookEditorContainer__wLMwM{box-sizing:border-box;height:100%;padding:10px 25px 0;position:relative;width:100%}.BookEditor-module_bookEditorContainer__wLMwM.BookEditor-module_isVerbose__VQ6iL{background-color:rgba(0,0,0,.05);outline:1px dotted rgba(0,0,0,.5)}.BookEditor-module_isVerbose__VQ6iL{outline:2px dotted #ff7526}.BookEditor-module_bookEditorWrapper__twppD{background-color:#fff;border:1px solid rgba(209,213,219,.8);border-radius:1rem;box-shadow:0 1px 2px 0 rgba(0,0,0,.05);overflow:hidden;padding-top:10px;transition:box-shadow .2s ease-in-out}.BookEditor-module_isVerbose__VQ6iL .BookEditor-module_bookEditorWrapper__twppD{overflow:visible}.BookEditor-module_bookEditorWrapper__twppD:hover{box-shadow:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -1px rgba(0,0,0,.06)}.BookEditor-module_bookEditorWrapper__twppD.BookEditor-module_isBorderRadiusDisabled__h1I3v{border-radius:0}.BookEditor-module_dropOverlay__xWWoX{align-items:center;background-color:rgba(0,0,0,.5);bottom:0;color:#fff;display:flex;font-size:1.5rem;justify-content:center;left:0;pointer-events:none;position:absolute;right:0;top:0;z-index:100}.BookEditor-module_bookEditorActionbar__KW6dc{position:absolute;right:55px;top:10px;z-index:100}.BookEditor-module_fullscreen__rktsl{border:none;border-radius:0;bottom:0;box-shadow:none;height:100%;left:0;padding-top:50px;position:fixed;right:0;top:0;width:100%;z-index:9999}.BookEditor-module_button__hS390{align-items:center;background-color:#fff;border:1px solid #d1d5db;border-radius:.375rem;box-shadow:0 1px 2px 0 rgba(0,0,0,.05);color:#374151;cursor:pointer;display:inline-flex;gap:.5rem;padding:.5rem 1rem;transition:all .2s ease-in-out}.BookEditor-module_button__hS390:hover{background-color:#f9fafb;border-color:#b7bcce;box-shadow:0 1px 3px 0 rgba(0,0,0,.1),0 1px 2px 0 rgba(0,0,0,.06)}\n/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkJvb2tFZGl0b3IubW9kdWxlLmNzcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxxQ0FFSSxVQUNKLENBRUEsOENBS0kscUJBQXNCLENBSHRCLFdBQVksQ0FFWixtQkFBb0IsQ0FEcEIsaUJBQWtCLENBRmxCLFVBS0osQ0FFQSxpRkFFSSxnQ0FBcUMsQ0FDckMsaUNBRUosQ0FFQSxvQ0FDSSwwQkFDSixDQUVBLDRDQUtJLHFCQUF1QixDQUR2QixxQ0FBMEMsQ0FGMUMsa0JBQW1CLENBSW5CLHNDQUEyQyxDQUwzQyxlQUFnQixDQUVoQixnQkFBaUIsQ0FJakIscUNBQ0osQ0FDQSxnRkFFSSxnQkFFSixDQUVBLGtEQUNJLHVFQUNKLENBVUEsNEZBQ0ksZUFDSixDQUVBLHNDQVNJLGtCQUFtQixDQUhuQiwrQkFBb0MsQ0FEcEMsUUFBUyxDQUVULFVBQVksQ0FDWixZQUFhLENBR2IsZ0JBQWlCLENBRGpCLHNCQUF1QixDQVB2QixNQUFPLENBVVAsbUJBQW9CLENBWnBCLGlCQUFrQixDQUdsQixPQUFRLENBRlIsS0FBTSxDQVVOLFdBRUosQ0FRQSw4Q0FDSSxpQkFBa0IsQ0FFbEIsVUFBVyxDQURYLFFBQVMsQ0FFVCxXQUNKLENBRUEscUNBV0ksV0FBWSxDQUZaLGVBQWdCLENBSmhCLFFBQVMsQ0FPVCxlQUFnQixDQUxoQixXQUFZLENBSlosTUFBTyxDQU9QLGdCQUFpQixDQVRqQixjQUFlLENBR2YsT0FBUSxDQUZSLEtBQU0sQ0FJTixVQUFXLENBRVgsWUFLSixDQUVBLGlDQU9JLGtCQUFtQixDQU5uQixxQkFBc0IsQ0FDdEIsd0JBQXlCLENBQ3pCLHFCQUF1QixDQU92QixzQ0FBMkMsQ0FEM0MsYUFBYyxDQUpkLGNBQWUsQ0FDZixtQkFBb0IsQ0FFcEIsU0FBVyxDQUpYLGtCQUFvQixDQU9wQiw4QkFDSixDQUVBLHVDQUNJLHdCQUF5QixDQUN6QixvQkFBcUIsQ0FDckIsaUVBQ0oiLCJmaWxlIjoiQm9va0VkaXRvci5tb2R1bGUuY3NzIiwic291cmNlc0NvbnRlbnQiOlsiLkJvb2tFZGl0b3Ige1xuICAgIC8qIGhlaWdodDogNDUwcHg7ICovXG4gICAgd2lkdGg6IDEwMCU7XG59XG5cbi5ib29rRWRpdG9yQ29udGFpbmVyIHtcbiAgICB3aWR0aDogMTAwJTtcbiAgICBoZWlnaHQ6IDEwMCU7XG4gICAgcG9zaXRpb246IHJlbGF0aXZlO1xuICAgIHBhZGRpbmc6IDEwcHggMjVweCAwO1xuICAgIGJveC1zaXppbmc6IGJvcmRlci1ib3g7XG59XG5cbi5ib29rRWRpdG9yQ29udGFpbmVyLmlzVmVyYm9zZSB7XG4gICAgLyoqL1xuICAgIGJhY2tncm91bmQtY29sb3I6IHJnYmEoMCwgMCwgMCwgMC4wNSk7XG4gICAgb3V0bGluZTogMXB4IGRvdHRlZCByZ2JhKDAsIDAsIDAsIDAuNSk7XG4gICAgLyoqL1xufVxuXG4uaXNWZXJib3NlIHtcbiAgICBvdXRsaW5lOiAycHggZG90dGVkIHJnYigyNTUgMTE3IDM4KTtcbn1cblxuLmJvb2tFZGl0b3JXcmFwcGVyIHtcbiAgICBvdmVyZmxvdzogaGlkZGVuO1xuICAgIGJvcmRlci1yYWRpdXM6IDFyZW07XG4gICAgcGFkZGluZy10b3A6IDEwcHg7XG4gICAgYm9yZGVyOiAxcHggc29saWQgcmdiYSgyMDksIDIxMywgMjE5LCAwLjgpO1xuICAgIGJhY2tncm91bmQtY29sb3I6IHdoaXRlO1xuICAgIGJveC1zaGFkb3c6IDAgMXB4IDJweCAwIHJnYmEoMCwgMCwgMCwgMC4wNSk7XG4gICAgdHJhbnNpdGlvbjogYm94LXNoYWRvdyAwLjJzIGVhc2UtaW4tb3V0O1xufVxuLmlzVmVyYm9zZSAuYm9va0VkaXRvcldyYXBwZXIge1xuICAgIC8qKi9cbiAgICBvdmVyZmxvdzogdmlzaWJsZTtcbiAgICAvKiovXG59XG5cbi5ib29rRWRpdG9yV3JhcHBlcjpob3ZlciB7XG4gICAgYm94LXNoYWRvdzogMCA0cHggNnB4IC0xcHggcmdiYSgwLCAwLCAwLCAwLjEpLCAwIDJweCA0cHggLTFweCByZ2JhKDAsIDAsIDAsIDAuMDYpO1xufVxuXG4uYm9va0VkaXRvcldyYXBwZXI6Zm9jdXMtd2l0aGluIHtcbiAgICAvKlxuICAgIG91dGxpbmU6IDJweCBzb2xpZCB0cmFuc3BhcmVudDtcbiAgICBvdXRsaW5lLW9mZnNldDogMnB4O1xuICAgIGJveC1zaGFkb3c6IDAgMCAwIDNweCByZ2JhKDk5LCAxMDIsIDI0MSwgMC40KTtcbiAgICAqL1xufVxuXG4uYm9va0VkaXRvcldyYXBwZXIuaXNCb3JkZXJSYWRpdXNEaXNhYmxlZCB7XG4gICAgYm9yZGVyLXJhZGl1czogMDtcbn1cblxuLmRyb3BPdmVybGF5IHtcbiAgICBwb3NpdGlvbjogYWJzb2x1dGU7XG4gICAgdG9wOiAwO1xuICAgIGxlZnQ6IDA7XG4gICAgcmlnaHQ6IDA7XG4gICAgYm90dG9tOiAwO1xuICAgIGJhY2tncm91bmQtY29sb3I6IHJnYmEoMCwgMCwgMCwgMC41KTtcbiAgICBjb2xvcjogd2hpdGU7XG4gICAgZGlzcGxheTogZmxleDtcbiAgICBhbGlnbi1pdGVtczogY2VudGVyO1xuICAgIGp1c3RpZnktY29udGVudDogY2VudGVyO1xuICAgIGZvbnQtc2l6ZTogMS41cmVtO1xuICAgIHotaW5kZXg6IDEwMDtcbiAgICBwb2ludGVyLWV2ZW50czogbm9uZTtcbn1cblxuLypcbi5ib29rRWRpdG9yQ29udGFpbmVyIDpnbG9iYWwoLnZpZXctbGluZSkge1xuICAgIGJvcmRlci1ib3R0b206IDFweCBzb2xpZCAjZWVlOyAvKiA8LSBOb3RlOiBgUFJPTVBUQk9PS19TWU5UQVhfQ09MT1JTLkxJTkVgICogL1xufVxuKi9cblxuLmJvb2tFZGl0b3JBY3Rpb25iYXIge1xuICAgIHBvc2l0aW9uOiBhYnNvbHV0ZTtcbiAgICB0b3A6IDEwcHg7XG4gICAgcmlnaHQ6IDU1cHg7XG4gICAgei1pbmRleDogMTAwO1xufVxuXG4uZnVsbHNjcmVlbiB7XG4gICAgcG9zaXRpb246IGZpeGVkO1xuICAgIHRvcDogMDtcbiAgICBsZWZ0OiAwO1xuICAgIHJpZ2h0OiAwO1xuICAgIGJvdHRvbTogMDtcbiAgICB3aWR0aDogMTAwJTtcbiAgICBoZWlnaHQ6IDEwMCU7XG4gICAgei1pbmRleDogOTk5OTtcbiAgICBib3JkZXItcmFkaXVzOiAwO1xuICAgIHBhZGRpbmctdG9wOiA1MHB4O1xuICAgIGJvcmRlcjogbm9uZTtcbiAgICBib3gtc2hhZG93OiBub25lO1xufVxuXG4uYnV0dG9uIHtcbiAgICBiYWNrZ3JvdW5kLWNvbG9yOiAjZmZmO1xuICAgIGJvcmRlcjogMXB4IHNvbGlkICNkMWQ1ZGI7XG4gICAgYm9yZGVyLXJhZGl1czogMC4zNzVyZW07XG4gICAgcGFkZGluZzogMC41cmVtIDFyZW07XG4gICAgY3Vyc29yOiBwb2ludGVyO1xuICAgIGRpc3BsYXk6IGlubGluZS1mbGV4O1xuICAgIGFsaWduLWl0ZW1zOiBjZW50ZXI7XG4gICAgZ2FwOiAwLjVyZW07XG4gICAgY29sb3I6ICMzNzQxNTE7XG4gICAgYm94LXNoYWRvdzogMCAxcHggMnB4IDAgcmdiYSgwLCAwLCAwLCAwLjA1KTtcbiAgICB0cmFuc2l0aW9uOiBhbGwgMC4ycyBlYXNlLWluLW91dDtcbn1cblxuLmJ1dHRvbjpob3ZlciB7XG4gICAgYmFja2dyb3VuZC1jb2xvcjogI2Y5ZmFmYjtcbiAgICBib3JkZXItY29sb3I6ICNiN2JjY2U7XG4gICAgYm94LXNoYWRvdzogMCAxcHggM3B4IDAgcmdiYSgwLCAwLCAwLCAwLjEpLCAwIDFweCAycHggMCByZ2JhKDAsIDAsIDAsIDAuMDYpO1xufVxuIl19 */";
-var styles$6 = {"BookEditor":"BookEditor-module_BookEditor__s-0PU","bookEditorContainer":"BookEditor-module_bookEditorContainer__wLMwM","isVerbose":"BookEditor-module_isVerbose__VQ6iL","bookEditorWrapper":"BookEditor-module_bookEditorWrapper__twppD","isBorderRadiusDisabled":"BookEditor-module_isBorderRadiusDisabled__h1I3v","dropOverlay":"BookEditor-module_dropOverlay__xWWoX","bookEditorActionbar":"BookEditor-module_bookEditorActionbar__KW6dc","fullscreen":"BookEditor-module_fullscreen__rktsl","button":"BookEditor-module_button__hS390"};
-styleInject(css_248z$7);
+var css_248z$8 = ".BookEditor-module_BookEditor__s-0PU{width:100%}.BookEditor-module_bookEditorContainer__wLMwM{box-sizing:border-box;height:100%;padding:10px 25px 0;position:relative;width:100%}.BookEditor-module_bookEditorContainer__wLMwM.BookEditor-module_isVerbose__VQ6iL{background-color:rgba(0,0,0,.05);outline:1px dotted rgba(0,0,0,.5)}.BookEditor-module_isVerbose__VQ6iL{outline:2px dotted #ff7526}.BookEditor-module_bookEditorWrapper__twppD{background-color:#fff;border:1px solid rgba(209,213,219,.8);border-radius:1rem;box-shadow:0 1px 2px 0 rgba(0,0,0,.05);overflow:hidden;padding-top:10px;transition:box-shadow .2s ease-in-out}.BookEditor-module_isVerbose__VQ6iL .BookEditor-module_bookEditorWrapper__twppD{overflow:visible}.BookEditor-module_bookEditorWrapper__twppD:hover{box-shadow:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -1px rgba(0,0,0,.06)}.BookEditor-module_bookEditorWrapper__twppD.BookEditor-module_isBorderRadiusDisabled__h1I3v{border-radius:0}.BookEditor-module_dropOverlay__xWWoX{align-items:center;background-color:rgba(0,0,0,.5);bottom:0;color:#fff;display:flex;font-size:1.5rem;justify-content:center;left:0;pointer-events:none;position:absolute;right:0;top:0;z-index:100}.BookEditor-module_bookEditorActionbar__KW6dc{position:absolute;right:55px;top:10px;z-index:100}.BookEditor-module_fullscreen__rktsl{border:none;border-radius:0;bottom:0;box-shadow:none;height:100%;left:0;padding-top:50px;position:fixed;right:0;top:0;width:100%;z-index:9999}.BookEditor-module_button__hS390{align-items:center;background-color:#fff;border:1px solid #d1d5db;border-radius:.375rem;box-shadow:0 1px 2px 0 rgba(0,0,0,.05);color:#374151;cursor:pointer;display:inline-flex;gap:.5rem;padding:.5rem 1rem;transition:all .2s ease-in-out}.BookEditor-module_button__hS390:hover{background-color:#f9fafb;border-color:#b7bcce;box-shadow:0 1px 3px 0 rgba(0,0,0,.1),0 1px 2px 0 rgba(0,0,0,.06)}\n/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkJvb2tFZGl0b3IubW9kdWxlLmNzcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxxQ0FFSSxVQUNKLENBRUEsOENBS0kscUJBQXNCLENBSHRCLFdBQVksQ0FFWixtQkFBb0IsQ0FEcEIsaUJBQWtCLENBRmxCLFVBS0osQ0FFQSxpRkFFSSxnQ0FBcUMsQ0FDckMsaUNBRUosQ0FFQSxvQ0FDSSwwQkFDSixDQUVBLDRDQUtJLHFCQUF1QixDQUR2QixxQ0FBMEMsQ0FGMUMsa0JBQW1CLENBSW5CLHNDQUEyQyxDQUwzQyxlQUFnQixDQUVoQixnQkFBaUIsQ0FJakIscUNBQ0osQ0FDQSxnRkFFSSxnQkFFSixDQUVBLGtEQUNJLHVFQUNKLENBVUEsNEZBQ0ksZUFDSixDQUVBLHNDQVNJLGtCQUFtQixDQUhuQiwrQkFBb0MsQ0FEcEMsUUFBUyxDQUVULFVBQVksQ0FDWixZQUFhLENBR2IsZ0JBQWlCLENBRGpCLHNCQUF1QixDQVB2QixNQUFPLENBVVAsbUJBQW9CLENBWnBCLGlCQUFrQixDQUdsQixPQUFRLENBRlIsS0FBTSxDQVVOLFdBRUosQ0FRQSw4Q0FDSSxpQkFBa0IsQ0FFbEIsVUFBVyxDQURYLFFBQVMsQ0FFVCxXQUNKLENBRUEscUNBV0ksV0FBWSxDQUZaLGVBQWdCLENBSmhCLFFBQVMsQ0FPVCxlQUFnQixDQUxoQixXQUFZLENBSlosTUFBTyxDQU9QLGdCQUFpQixDQVRqQixjQUFlLENBR2YsT0FBUSxDQUZSLEtBQU0sQ0FJTixVQUFXLENBRVgsWUFLSixDQUVBLGlDQU9JLGtCQUFtQixDQU5uQixxQkFBc0IsQ0FDdEIsd0JBQXlCLENBQ3pCLHFCQUF1QixDQU92QixzQ0FBMkMsQ0FEM0MsYUFBYyxDQUpkLGNBQWUsQ0FDZixtQkFBb0IsQ0FFcEIsU0FBVyxDQUpYLGtCQUFvQixDQU9wQiw4QkFDSixDQUVBLHVDQUNJLHdCQUF5QixDQUN6QixvQkFBcUIsQ0FDckIsaUVBQ0oiLCJmaWxlIjoiQm9va0VkaXRvci5tb2R1bGUuY3NzIiwic291cmNlc0NvbnRlbnQiOlsiLkJvb2tFZGl0b3Ige1xuICAgIC8qIGhlaWdodDogNDUwcHg7ICovXG4gICAgd2lkdGg6IDEwMCU7XG59XG5cbi5ib29rRWRpdG9yQ29udGFpbmVyIHtcbiAgICB3aWR0aDogMTAwJTtcbiAgICBoZWlnaHQ6IDEwMCU7XG4gICAgcG9zaXRpb246IHJlbGF0aXZlO1xuICAgIHBhZGRpbmc6IDEwcHggMjVweCAwO1xuICAgIGJveC1zaXppbmc6IGJvcmRlci1ib3g7XG59XG5cbi5ib29rRWRpdG9yQ29udGFpbmVyLmlzVmVyYm9zZSB7XG4gICAgLyoqL1xuICAgIGJhY2tncm91bmQtY29sb3I6IHJnYmEoMCwgMCwgMCwgMC4wNSk7XG4gICAgb3V0bGluZTogMXB4IGRvdHRlZCByZ2JhKDAsIDAsIDAsIDAuNSk7XG4gICAgLyoqL1xufVxuXG4uaXNWZXJib3NlIHtcbiAgICBvdXRsaW5lOiAycHggZG90dGVkIHJnYigyNTUgMTE3IDM4KTtcbn1cblxuLmJvb2tFZGl0b3JXcmFwcGVyIHtcbiAgICBvdmVyZmxvdzogaGlkZGVuO1xuICAgIGJvcmRlci1yYWRpdXM6IDFyZW07XG4gICAgcGFkZGluZy10b3A6IDEwcHg7XG4gICAgYm9yZGVyOiAxcHggc29saWQgcmdiYSgyMDksIDIxMywgMjE5LCAwLjgpO1xuICAgIGJhY2tncm91bmQtY29sb3I6IHdoaXRlO1xuICAgIGJveC1zaGFkb3c6IDAgMXB4IDJweCAwIHJnYmEoMCwgMCwgMCwgMC4wNSk7XG4gICAgdHJhbnNpdGlvbjogYm94LXNoYWRvdyAwLjJzIGVhc2UtaW4tb3V0O1xufVxuLmlzVmVyYm9zZSAuYm9va0VkaXRvcldyYXBwZXIge1xuICAgIC8qKi9cbiAgICBvdmVyZmxvdzogdmlzaWJsZTtcbiAgICAvKiovXG59XG5cbi5ib29rRWRpdG9yV3JhcHBlcjpob3ZlciB7XG4gICAgYm94LXNoYWRvdzogMCA0cHggNnB4IC0xcHggcmdiYSgwLCAwLCAwLCAwLjEpLCAwIDJweCA0cHggLTFweCByZ2JhKDAsIDAsIDAsIDAuMDYpO1xufVxuXG4uYm9va0VkaXRvcldyYXBwZXI6Zm9jdXMtd2l0aGluIHtcbiAgICAvKlxuICAgIG91dGxpbmU6IDJweCBzb2xpZCB0cmFuc3BhcmVudDtcbiAgICBvdXRsaW5lLW9mZnNldDogMnB4O1xuICAgIGJveC1zaGFkb3c6IDAgMCAwIDNweCByZ2JhKDk5LCAxMDIsIDI0MSwgMC40KTtcbiAgICAqL1xufVxuXG4uYm9va0VkaXRvcldyYXBwZXIuaXNCb3JkZXJSYWRpdXNEaXNhYmxlZCB7XG4gICAgYm9yZGVyLXJhZGl1czogMDtcbn1cblxuLmRyb3BPdmVybGF5IHtcbiAgICBwb3NpdGlvbjogYWJzb2x1dGU7XG4gICAgdG9wOiAwO1xuICAgIGxlZnQ6IDA7XG4gICAgcmlnaHQ6IDA7XG4gICAgYm90dG9tOiAwO1xuICAgIGJhY2tncm91bmQtY29sb3I6IHJnYmEoMCwgMCwgMCwgMC41KTtcbiAgICBjb2xvcjogd2hpdGU7XG4gICAgZGlzcGxheTogZmxleDtcbiAgICBhbGlnbi1pdGVtczogY2VudGVyO1xuICAgIGp1c3RpZnktY29udGVudDogY2VudGVyO1xuICAgIGZvbnQtc2l6ZTogMS41cmVtO1xuICAgIHotaW5kZXg6IDEwMDtcbiAgICBwb2ludGVyLWV2ZW50czogbm9uZTtcbn1cblxuLypcbi5ib29rRWRpdG9yQ29udGFpbmVyIDpnbG9iYWwoLnZpZXctbGluZSkge1xuICAgIGJvcmRlci1ib3R0b206IDFweCBzb2xpZCAjZWVlOyAvKiA8LSBOb3RlOiBgUFJPTVBUQk9PS19TWU5UQVhfQ09MT1JTLkxJTkVgICogL1xufVxuKi9cblxuLmJvb2tFZGl0b3JBY3Rpb25iYXIge1xuICAgIHBvc2l0aW9uOiBhYnNvbHV0ZTtcbiAgICB0b3A6IDEwcHg7XG4gICAgcmlnaHQ6IDU1cHg7XG4gICAgei1pbmRleDogMTAwO1xufVxuXG4uZnVsbHNjcmVlbiB7XG4gICAgcG9zaXRpb246IGZpeGVkO1xuICAgIHRvcDogMDtcbiAgICBsZWZ0OiAwO1xuICAgIHJpZ2h0OiAwO1xuICAgIGJvdHRvbTogMDtcbiAgICB3aWR0aDogMTAwJTtcbiAgICBoZWlnaHQ6IDEwMCU7XG4gICAgei1pbmRleDogOTk5OTtcbiAgICBib3JkZXItcmFkaXVzOiAwO1xuICAgIHBhZGRpbmctdG9wOiA1MHB4O1xuICAgIGJvcmRlcjogbm9uZTtcbiAgICBib3gtc2hhZG93OiBub25lO1xufVxuXG4uYnV0dG9uIHtcbiAgICBiYWNrZ3JvdW5kLWNvbG9yOiAjZmZmO1xuICAgIGJvcmRlcjogMXB4IHNvbGlkICNkMWQ1ZGI7XG4gICAgYm9yZGVyLXJhZGl1czogMC4zNzVyZW07XG4gICAgcGFkZGluZzogMC41cmVtIDFyZW07XG4gICAgY3Vyc29yOiBwb2ludGVyO1xuICAgIGRpc3BsYXk6IGlubGluZS1mbGV4O1xuICAgIGFsaWduLWl0ZW1zOiBjZW50ZXI7XG4gICAgZ2FwOiAwLjVyZW07XG4gICAgY29sb3I6ICMzNzQxNTE7XG4gICAgYm94LXNoYWRvdzogMCAxcHggMnB4IDAgcmdiYSgwLCAwLCAwLCAwLjA1KTtcbiAgICB0cmFuc2l0aW9uOiBhbGwgMC4ycyBlYXNlLWluLW91dDtcbn1cblxuLmJ1dHRvbjpob3ZlciB7XG4gICAgYmFja2dyb3VuZC1jb2xvcjogI2Y5ZmFmYjtcbiAgICBib3JkZXItY29sb3I6ICNiN2JjY2U7XG4gICAgYm94LXNoYWRvdzogMCAxcHggM3B4IDAgcmdiYSgwLCAwLCAwLCAwLjEpLCAwIDFweCAycHggMCByZ2JhKDAsIDAsIDAsIDAuMDYpO1xufVxuIl19 */";
+var styles$7 = {"BookEditor":"BookEditor-module_BookEditor__s-0PU","bookEditorContainer":"BookEditor-module_bookEditorContainer__wLMwM","isVerbose":"BookEditor-module_isVerbose__VQ6iL","bookEditorWrapper":"BookEditor-module_bookEditorWrapper__twppD","isBorderRadiusDisabled":"BookEditor-module_isBorderRadiusDisabled__h1I3v","dropOverlay":"BookEditor-module_dropOverlay__xWWoX","bookEditorActionbar":"BookEditor-module_bookEditorActionbar__KW6dc","fullscreen":"BookEditor-module_fullscreen__rktsl","button":"BookEditor-module_button__hS390"};
+styleInject(css_248z$8);
 
 /**
  * Converts Blob, File or MediaSource to url using URL.createObjectURL
@@ -7504,12 +7676,107 @@ async function $induceBookDownload(book) {
  * Note: [🔵] Code in this file should never be published outside of `@promptbook/browser`
  */
 
+/**
+ * Downloads a file with the given content and filename
+ *
+ * @private utility of `<Chat/>` component
+ */
+function downloadFile(content, filename, mimeType) {
+    const blob = new Blob([content], { type: mimeType });
+    const url = URL.createObjectURL(blob);
+    const link = document.createElement('a');
+    link.href = url;
+    link.download = filename;
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+    // Clean up the URL object
+    setTimeout(() => URL.revokeObjectURL(url), 100);
+}
+
+var css_248z$7 = ".CodeBlock-module_CodeBlock__6K33Z{border:1px solid #444;border-radius:5px;margin:10px 0;overflow:hidden}.CodeBlock-module_CodeBlockHeader__tfOwl{align-items:center;background-color:#2d2d2d;border-bottom:1px solid #444;color:#ccc;display:flex;font-size:.8em;justify-content:space-between;padding:5px 10px}.CodeBlock-module_CodeBlockButtons__rz1VO{display:flex;gap:8px}.CodeBlock-module_CopyButton__M07tp,.CodeBlock-module_CreateAgentButton__kUEnp,.CodeBlock-module_DownloadButton__ZTrzQ{align-items:center;background:transparent;border:none;color:#aaa;cursor:pointer;display:flex;font-size:inherit;gap:5px;padding:0;transition:color .2s}.CodeBlock-module_CopyButton__M07tp:hover,.CodeBlock-module_CreateAgentButton__kUEnp:hover,.CodeBlock-module_DownloadButton__ZTrzQ:hover{color:#fff}\n/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkNvZGVCbG9jay5tb2R1bGUuY3NzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLG1DQUlJLHFCQUFzQixDQUZ0QixpQkFBa0IsQ0FEbEIsYUFBYyxDQUVkLGVBRUosQ0FFQSx5Q0FRSSxrQkFBbUIsQ0FQbkIsd0JBQXlCLENBSXpCLDRCQUE2QixDQUg3QixVQUFXLENBSVgsWUFBYSxDQUZiLGNBQWdCLENBR2hCLDZCQUE4QixDQUo5QixnQkFNSixDQUVBLDBDQUNJLFlBQWEsQ0FDYixPQUNKLENBRUEsdUhBVUksa0JBQW1CLENBUG5CLHNCQUF1QixDQUN2QixXQUFZLENBQ1osVUFBVyxDQUNYLGNBQWUsQ0FHZixZQUFhLENBRmIsaUJBQWtCLENBSWxCLE9BQVEsQ0FIUixTQUFVLENBSVYsb0JBQ0osQ0FFQSx5SUFHSSxVQUNKIiwiZmlsZSI6IkNvZGVCbG9jay5tb2R1bGUuY3NzIiwic291cmNlc0NvbnRlbnQiOlsiLkNvZGVCbG9jayB7XG4gICAgbWFyZ2luOiAxMHB4IDA7XG4gICAgYm9yZGVyLXJhZGl1czogNXB4O1xuICAgIG92ZXJmbG93OiBoaWRkZW47XG4gICAgYm9yZGVyOiAxcHggc29saWQgIzQ0NDsgLyogRGFyayBtb2RlIGJvcmRlciAqL1xufVxuXG4uQ29kZUJsb2NrSGVhZGVyIHtcbiAgICBiYWNrZ3JvdW5kLWNvbG9yOiAjMmQyZDJkO1xuICAgIGNvbG9yOiAjY2NjO1xuICAgIHBhZGRpbmc6IDVweCAxMHB4O1xuICAgIGZvbnQtc2l6ZTogMC44ZW07XG4gICAgYm9yZGVyLWJvdHRvbTogMXB4IHNvbGlkICM0NDQ7XG4gICAgZGlzcGxheTogZmxleDtcbiAgICBqdXN0aWZ5LWNvbnRlbnQ6IHNwYWNlLWJldHdlZW47XG4gICAgYWxpZ24taXRlbXM6IGNlbnRlcjtcbn1cblxuLkNvZGVCbG9ja0J1dHRvbnMge1xuICAgIGRpc3BsYXk6IGZsZXg7XG4gICAgZ2FwOiA4cHg7XG59XG5cbi5Db3B5QnV0dG9uLFxuLkRvd25sb2FkQnV0dG9uLFxuLkNyZWF0ZUFnZW50QnV0dG9uIHtcbiAgICBiYWNrZ3JvdW5kOiB0cmFuc3BhcmVudDtcbiAgICBib3JkZXI6IG5vbmU7XG4gICAgY29sb3I6ICNhYWE7XG4gICAgY3Vyc29yOiBwb2ludGVyO1xuICAgIGZvbnQtc2l6ZTogaW5oZXJpdDtcbiAgICBwYWRkaW5nOiAwO1xuICAgIGRpc3BsYXk6IGZsZXg7XG4gICAgYWxpZ24taXRlbXM6IGNlbnRlcjtcbiAgICBnYXA6IDVweDtcbiAgICB0cmFuc2l0aW9uOiBjb2xvciAwLjJzO1xufVxuXG4uQ29weUJ1dHRvbjpob3Zlcixcbi5Eb3dubG9hZEJ1dHRvbjpob3Zlcixcbi5DcmVhdGVBZ2VudEJ1dHRvbjpob3ZlciB7XG4gICAgY29sb3I6ICNmZmY7XG59XG4iXX0= */";
+var styles$6 = {"CodeBlock":"CodeBlock-module_CodeBlock__6K33Z","CodeBlockHeader":"CodeBlock-module_CodeBlockHeader__tfOwl","CodeBlockButtons":"CodeBlock-module_CodeBlockButtons__rz1VO","CopyButton":"CodeBlock-module_CopyButton__M07tp","DownloadButton":"CodeBlock-module_DownloadButton__ZTrzQ","CreateAgentButton":"CodeBlock-module_CreateAgentButton__kUEnp"};
+styleInject(css_248z$7);
+
+const LANGUAGE_EXTENSIONS = {
+    python: 'py',
+    javascript: 'js',
+    typescript: 'ts',
+    json: 'json',
+    html: 'html',
+    css: 'css',
+    markdown: 'md',
+    text: 'txt',
+    xml: 'xml',
+    sql: 'sql',
+    sh: 'sh',
+    bash: 'sh',
+    zsh: 'sh',
+    yaml: 'yaml',
+    yml: 'yaml',
+    book: 'book',
+};
+/**
+ * Component to render a code block with syntax highlighting, copy, download, and create agent options.
+ *
+ * @private Internal utility of `<ChatMessage />` component
+ */
+function CodeBlock({ code, language, className, onCreateAgent }) {
+    const lines = useMemo(() => code.split('\n').length, [code]);
+    // Note: 19px is approx line height for fontSize 14. +20 for padding.
+    // We cap at 400px to avoid taking too much space, allowing scroll.
+    const height = Math.min(Math.max(lines * 19, 19), 400);
+    const [copied, setCopied] = useState(false);
+    const handleDownload = () => {
+        const lang = (language === null || language === void 0 ? void 0 : language.trim().toLowerCase()) || 'text';
+        const extension = LANGUAGE_EXTENSIONS[lang] || lang;
+        const filename = `file.${extension}`;
+        downloadFile(code, filename, 'text/plain');
+    };
+    const handleCopy = async () => {
+        try {
+            await navigator.clipboard.writeText(code);
+            setCopied(true);
+            setTimeout(() => setCopied(false), 2000);
+        }
+        catch (error) {
+            console.error('Failed to copy code to clipboard:', error);
+        }
+    };
+    const header = language ? (jsxs("div", { className: styles$6.CodeBlockHeader, children: [jsx("span", { children: language }), jsxs("div", { className: styles$6.CodeBlockButtons, children: [jsx("button", { onClick: handleCopy, className: styles$6.CopyButton, title: "Copy to clipboard", children: copied ? 'Copied!' : 'Copy' }), jsx("button", { onClick: handleDownload, className: styles$6.DownloadButton, title: "Download code", children: "Download" }), (language === null || language === void 0 ? void 0 : language.trim().toLowerCase()) === 'book' && onCreateAgent && (jsx("button", { onClick: () => onCreateAgent(code), className: styles$6.CreateAgentButton, title: "Create agent from this book", children: "Create Agent" }))] })] })) : null;
+    if ((language === null || language === void 0 ? void 0 : language.trim().toLowerCase()) === 'book') {
+        return (jsxs("div", { className: classNames(styles$6.CodeBlock, className), children: [header, jsx(BookEditor, { value: code, isReadonly: true, height: lines * 25 /* <- [🧠] A bit more than 19px to accommodate BookEditor lines */ })] }));
+    }
+    return (jsxs("div", { className: classNames(styles$6.CodeBlock, className), children: [header, jsx(Editor, { height: `${height}px`, language: language || 'plaintext', value: code, theme: "vs-dark", options: {
+                    readOnly: true,
+                    minimap: { enabled: false },
+                    scrollBeyondLastLine: false,
+                    lineNumbers: 'on',
+                    folding: false,
+                    glyphMargin: false,
+                    fontFamily: 'Consolas, "Courier New", monospace',
+                    fontSize: 14,
+                    lineHeight: 19,
+                    overviewRulerLanes: 0,
+                    hideCursorInOverviewRuler: true,
+                    renderLineHighlight: 'none',
+                    contextmenu: false,
+                    scrollbar: {
+                        vertical: 'auto',
+                        horizontal: 'auto',
+                        useShadows: false,
+                    },
+                    domReadOnly: true,
+                    wordWrap: 'off',
+                } })] }));
+}
+
 var css_248z$6 = ".MarkdownContent-module_MarkdownContent__2JuyX h1{font-size:2em}.MarkdownContent-module_MarkdownContent__2JuyX h2{font-size:1.75em}.MarkdownContent-module_MarkdownContent__2JuyX h3{font-size:1.5em}.MarkdownContent-module_MarkdownContent__2JuyX h4{font-size:1.25em}.MarkdownContent-module_MarkdownContent__2JuyX h5{font-size:1.1em}.MarkdownContent-module_MarkdownContent__2JuyX p{text-wrap:auto}.MarkdownContent-module_MarkdownContent__2JuyX ul{list-style:disc;margin-left:20px}.MarkdownContent-module_MarkdownContent__2JuyX ol{list-style:decimal;margin-left:20px}.MarkdownContent-module_MarkdownContent__2JuyX blockquote,.MarkdownContent-module_MarkdownContent__2JuyX img,.MarkdownContent-module_MarkdownContent__2JuyX pre,.MarkdownContent-module_MarkdownContent__2JuyX table{border-radius:8px;margin-bottom:10px;margin-top:10px}.MarkdownContent-module_MarkdownContent__2JuyX pre{background:#000;border:none;box-shadow:none;color:#fff;display:block;font-size:inherit;line-height:inherit;padding:1em}.MarkdownContent-module_MarkdownContent__2JuyX blockquote{background:#ffffffcc;border:none;box-shadow:none;color:#000;display:block;font-size:inherit;line-height:inherit;padding:1em}.MarkdownContent-module_MarkdownContent__2JuyX code{background:#cccccc55;border:none;box-shadow:none;color:inherit;display:inline-block;font-size:inherit;line-height:inherit;margin:0;padding:0}.MarkdownContent-module_MarkdownContent__2JuyX pre code{background-color:#000000cc;border-radius:8px}.MarkdownContent-module_MarkdownContent__2JuyX .MarkdownContent-module_chat-code-block__ZffFg{background:#181c23;border-color:#23272f;box-shadow:0 2px 8px rgba(0,0,0,.12);color:#f8fafc;font-family:Fira Mono,Menlo,Consolas,Liberation Mono,monospace;font-size:14px;line-height:1.6;overflow-x:auto}.MarkdownContent-module_MarkdownContent__2JuyX .MarkdownContent-module_chat-code-block__ZffFg code{background:none!important;border:none!important;box-shadow:none!important;color:inherit!important;display:block;font-family:inherit!important;font-size:inherit!important;overflow-x:auto;padding:0!important;white-space:pre;word-break:break-word}.MarkdownContent-module_MarkdownContent__2JuyX table{background:#f8fafc;border-collapse:separate;border-spacing:0;box-shadow:0 2px 8px rgba(0,0,0,.08);color:#17223b;font-size:14px;margin:16px 0;width:100%}.MarkdownContent-module_MarkdownContent__2JuyX td,.MarkdownContent-module_MarkdownContent__2JuyX th{background:none;border-bottom:1px solid #d1dbe8;color:#17223b;padding:10px 16px;text-align:left}.MarkdownContent-module_MarkdownContent__2JuyX th{background:linear-gradient(90deg,#eaf3fa 80%,#d1e3f8);border-bottom:2px solid #b5c7de;color:#17223b;font-weight:700}.MarkdownContent-module_MarkdownContent__2JuyX tr:last-child td{border-bottom:none}.MarkdownContent-module_MarkdownContent__2JuyX tr:nth-child(2n) td{background:#eaf3fa}.MarkdownContent-module_MarkdownContent__2JuyX tr:hover td{background:#cbe0f7;transition:background .2s}.MarkdownContent-module_MarkdownContent__2JuyX table{border-radius:12px;overflow:hidden}.MarkdownContent-module_MarkdownContent__2JuyX td:first-child,.MarkdownContent-module_MarkdownContent__2JuyX th:first-child{border-top-left-radius:12px}.MarkdownContent-module_MarkdownContent__2JuyX td:last-child,.MarkdownContent-module_MarkdownContent__2JuyX th:last-child{border-top-right-radius:12px}.MarkdownContent-module_citation__11SMw{background:#e7f1ff;border-radius:4px;color:#007bff;cursor:default;display:inline-block;font-size:.7em;font-weight:700;margin:0 2px;padding:0 4px;user-select:none;vertical-align:super}\n/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIk1hcmtkb3duQ29udGVudC5tb2R1bGUuY3NzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLGtEQUNJLGFBQ0osQ0FFQSxrREFDSSxnQkFDSixDQUVBLGtEQUNJLGVBQ0osQ0FFQSxrREFDSSxnQkFDSixDQUVBLGtEQUNJLGVBQ0osQ0FFQSxpREFDSSxjQUNKLENBRUEsa0RBQ0ksZUFBZ0IsQ0FDaEIsZ0JBQ0osQ0FFQSxrREFDSSxrQkFBbUIsQ0FDbkIsZ0JBQ0osQ0FFQSxxTkFNSSxpQkFBa0IsQ0FEbEIsa0JBQW1CLENBRG5CLGVBR0osQ0FFQSxtREFJSSxlQUFxQixDQUZyQixXQUFZLENBQ1osZUFBZ0IsQ0FJaEIsVUFBVyxDQU5YLGFBQWMsQ0FJZCxpQkFBa0IsQ0FDbEIsbUJBQW9CLENBRXBCLFdBQ0osQ0FFQSwwREFJSSxvQkFBcUIsQ0FGckIsV0FBWSxDQUNaLGVBQWdCLENBSWhCLFVBQVcsQ0FOWCxhQUFjLENBSWQsaUJBQWtCLENBQ2xCLG1CQUFvQixDQUVwQixXQUNKLENBRUEsb0RBTUksb0JBQXFCLENBRnJCLFdBQVksQ0FDWixlQUFnQixDQUloQixhQUFjLENBUmQsb0JBQXFCLENBTXJCLGlCQUFrQixDQUNsQixtQkFBb0IsQ0FOcEIsUUFBUyxDQUNULFNBT0osQ0FFQSx3REFDSSwwQkFBMkIsQ0FDM0IsaUJBQ0osQ0FFQSw4RkFDSSxrQkFBbUIsQ0FLbkIsb0JBQXFCLENBQ3JCLG9DQUF5QyxDQUx6QyxhQUFjLENBTWQsOERBQTJFLENBTDNFLGNBQWUsQ0FDZixlQUFnQixDQUNoQixlQUlKLENBQ0EsbUdBQ0kseUJBQTJCLENBSzNCLHFCQUF1QixDQUN2Qix5QkFBMkIsQ0FMM0IsdUJBQXlCLENBU3pCLGFBQWMsQ0FSZCw2QkFBK0IsQ0FDL0IsMkJBQTZCLENBTTdCLGVBQWdCLENBTGhCLG1CQUFxQixDQUdyQixlQUFnQixDQUNoQixxQkFHSixDQUNBLHFEQUtJLGtCQUFtQixDQUhuQix3QkFBeUIsQ0FDekIsZ0JBQWlCLENBS2pCLG9DQUF5QyxDQUV6QyxhQUFjLENBRGQsY0FBZSxDQUxmLGFBQWMsQ0FIZCxVQVVKLENBQ0Esb0dBTUksZUFBZ0IsQ0FIaEIsK0JBQWdDLENBRWhDLGFBQWMsQ0FIZCxpQkFBa0IsQ0FFbEIsZUFHSixDQUNBLGtEQUNJLHFEQUE2RCxDQUc3RCwrQkFBZ0MsQ0FEaEMsYUFBYyxDQURkLGVBR0osQ0FDQSxnRUFDSSxrQkFDSixDQUNBLG1FQUNJLGtCQUNKLENBQ0EsMkRBQ0ksa0JBQW1CLENBQ25CLHlCQUNKLENBQ0EscURBQ0ksa0JBQW1CLENBQ25CLGVBQ0osQ0FDQSw0SEFFSSwyQkFDSixDQUNBLDBIQUVJLDRCQUNKLENBRUEsd0NBTUksa0JBQW1CLENBRW5CLGlCQUFrQixDQUhsQixhQUFjLENBS2QsY0FBZSxDQVRmLG9CQUFxQixDQUVyQixjQUFnQixDQUNoQixlQUFpQixDQUtqQixZQUFhLENBRmIsYUFBYyxDQUlkLGdCQUFpQixDQVRqQixvQkFVSiIsImZpbGUiOiJNYXJrZG93bkNvbnRlbnQubW9kdWxlLmNzcyIsInNvdXJjZXNDb250ZW50IjpbIi5NYXJrZG93bkNvbnRlbnQgaDEge1xuICAgIGZvbnQtc2l6ZTogMmVtO1xufVxuXG4uTWFya2Rvd25Db250ZW50IGgyIHtcbiAgICBmb250LXNpemU6IDEuNzVlbTtcbn1cblxuLk1hcmtkb3duQ29udGVudCBoMyB7XG4gICAgZm9udC1zaXplOiAxLjVlbTtcbn1cblxuLk1hcmtkb3duQ29udGVudCBoNCB7XG4gICAgZm9udC1zaXplOiAxLjI1ZW07XG59XG5cbi5NYXJrZG93bkNvbnRlbnQgaDUge1xuICAgIGZvbnQtc2l6ZTogMS4xZW07XG59XG5cbi5NYXJrZG93bkNvbnRlbnQgcCB7XG4gICAgdGV4dC13cmFwOiBhdXRvO1xufVxuXG4uTWFya2Rvd25Db250ZW50IHVsIHtcbiAgICBsaXN0LXN0eWxlOiBkaXNjO1xuICAgIG1hcmdpbi1sZWZ0OiAyMHB4O1xufVxuXG4uTWFya2Rvd25Db250ZW50IG9sIHtcbiAgICBsaXN0LXN0eWxlOiBkZWNpbWFsO1xuICAgIG1hcmdpbi1sZWZ0OiAyMHB4O1xufVxuXG4uTWFya2Rvd25Db250ZW50IGltZyxcbi5NYXJrZG93bkNvbnRlbnQgcHJlLFxuLk1hcmtkb3duQ29udGVudCBibG9ja3F1b3RlLFxuLk1hcmtkb3duQ29udGVudCB0YWJsZSB7XG4gICAgbWFyZ2luLXRvcDogMTBweDtcbiAgICBtYXJnaW4tYm90dG9tOiAxMHB4O1xuICAgIGJvcmRlci1yYWRpdXM6IDhweDtcbn1cblxuLk1hcmtkb3duQ29udGVudCBwcmUge1xuICAgIGRpc3BsYXk6IGJsb2NrO1xuICAgIGJvcmRlcjogbm9uZTtcbiAgICBib3gtc2hhZG93OiBub25lO1xuICAgIGJhY2tncm91bmQ6ICMwMDAwMDBmZjtcbiAgICBmb250LXNpemU6IGluaGVyaXQ7XG4gICAgbGluZS1oZWlnaHQ6IGluaGVyaXQ7XG4gICAgY29sb3I6ICNmZmY7XG4gICAgcGFkZGluZzogMWVtO1xufVxuXG4uTWFya2Rvd25Db250ZW50IGJsb2NrcXVvdGUge1xuICAgIGRpc3BsYXk6IGJsb2NrO1xuICAgIGJvcmRlcjogbm9uZTtcbiAgICBib3gtc2hhZG93OiBub25lO1xuICAgIGJhY2tncm91bmQ6ICNmZmZmZmZjYztcbiAgICBmb250LXNpemU6IGluaGVyaXQ7XG4gICAgbGluZS1oZWlnaHQ6IGluaGVyaXQ7XG4gICAgY29sb3I6ICMwMDA7XG4gICAgcGFkZGluZzogMWVtO1xufVxuXG4uTWFya2Rvd25Db250ZW50IGNvZGUge1xuICAgIGRpc3BsYXk6IGlubGluZS1ibG9jaztcbiAgICBtYXJnaW46IDA7XG4gICAgcGFkZGluZzogMDtcbiAgICBib3JkZXI6IG5vbmU7XG4gICAgYm94LXNoYWRvdzogbm9uZTtcbiAgICBiYWNrZ3JvdW5kOiAjY2NjY2NjNTU7XG4gICAgZm9udC1zaXplOiBpbmhlcml0O1xuICAgIGxpbmUtaGVpZ2h0OiBpbmhlcml0O1xuICAgIGNvbG9yOiBpbmhlcml0O1xufVxuXG4uTWFya2Rvd25Db250ZW50IHByZSBjb2RlIHtcbiAgICBiYWNrZ3JvdW5kLWNvbG9yOiAjMDAwMDAwY2M7XG4gICAgYm9yZGVyLXJhZGl1czogOHB4O1xufVxuXG4uTWFya2Rvd25Db250ZW50IC5jaGF0LWNvZGUtYmxvY2sge1xuICAgIGJhY2tncm91bmQ6ICMxODFjMjM7XG4gICAgY29sb3I6ICNmOGZhZmM7XG4gICAgZm9udC1zaXplOiAxNHB4O1xuICAgIGxpbmUtaGVpZ2h0OiAxLjY7XG4gICAgb3ZlcmZsb3cteDogYXV0bztcbiAgICBib3JkZXItY29sb3I6ICMyMzI3MmY7XG4gICAgYm94LXNoYWRvdzogMCAycHggOHB4IHJnYmEoMCwgMCwgMCwgMC4xMik7XG4gICAgZm9udC1mYW1pbHk6ICdGaXJhIE1vbm8nLCAnTWVubG8nLCAnQ29uc29sYXMnLCAnTGliZXJhdGlvbiBNb25vJywgbW9ub3NwYWNlO1xufVxuLk1hcmtkb3duQ29udGVudCAuY2hhdC1jb2RlLWJsb2NrIGNvZGUge1xuICAgIGJhY2tncm91bmQ6IG5vbmUgIWltcG9ydGFudDtcbiAgICBjb2xvcjogaW5oZXJpdCAhaW1wb3J0YW50O1xuICAgIGZvbnQtZmFtaWx5OiBpbmhlcml0ICFpbXBvcnRhbnQ7XG4gICAgZm9udC1zaXplOiBpbmhlcml0ICFpbXBvcnRhbnQ7XG4gICAgcGFkZGluZzogMCAhaW1wb3J0YW50O1xuICAgIGJvcmRlcjogbm9uZSAhaW1wb3J0YW50O1xuICAgIGJveC1zaGFkb3c6IG5vbmUgIWltcG9ydGFudDtcbiAgICB3aGl0ZS1zcGFjZTogcHJlO1xuICAgIHdvcmQtYnJlYWs6IGJyZWFrLXdvcmQ7XG4gICAgb3ZlcmZsb3cteDogYXV0bztcbiAgICBkaXNwbGF5OiBibG9jaztcbn1cbi5NYXJrZG93bkNvbnRlbnQgdGFibGUge1xuICAgIHdpZHRoOiAxMDAlO1xuICAgIGJvcmRlci1jb2xsYXBzZTogc2VwYXJhdGU7XG4gICAgYm9yZGVyLXNwYWNpbmc6IDA7XG4gICAgbWFyZ2luOiAxNnB4IDA7XG4gICAgYmFja2dyb3VuZDogI2Y4ZmFmYzsgLyogU3Ryb25nZXIgbGlnaHQgYmFja2dyb3VuZCBmb3IgY29udHJhc3QgKi9cbiAgICBib3JkZXItcmFkaXVzOiAxMnB4O1xuICAgIG92ZXJmbG93OiBoaWRkZW47XG4gICAgYm94LXNoYWRvdzogMCAycHggOHB4IHJnYmEoMCwgMCwgMCwgMC4wOCk7XG4gICAgZm9udC1zaXplOiAxNHB4O1xuICAgIGNvbG9yOiAjMTcyMjNiOyAvKiBEYXJrIHRleHQgZm9yIGNvbnRyYXN0ICovXG59XG4uTWFya2Rvd25Db250ZW50IHRoLFxuLk1hcmtkb3duQ29udGVudCB0ZCB7XG4gICAgcGFkZGluZzogMTBweCAxNnB4O1xuICAgIGJvcmRlci1ib3R0b206IDFweCBzb2xpZCAjZDFkYmU4O1xuICAgIHRleHQtYWxpZ246IGxlZnQ7XG4gICAgY29sb3I6ICMxNzIyM2I7IC8qIEVuc3VyZSBzdHJvbmcgdGV4dCBjb2xvciBmb3IgYWxsIGNlbGxzICovXG4gICAgYmFja2dyb3VuZDogbm9uZTtcbn1cbi5NYXJrZG93bkNvbnRlbnQgdGgge1xuICAgIGJhY2tncm91bmQ6IGxpbmVhci1ncmFkaWVudCg5MGRlZywgI2VhZjNmYSA4MCUsICNkMWUzZjggMTAwJSk7XG4gICAgZm9udC13ZWlnaHQ6IDcwMDtcbiAgICBjb2xvcjogIzE3MjIzYjsgLyogU3Ryb25nIGhlYWRlciB0ZXh0ICovXG4gICAgYm9yZGVyLWJvdHRvbTogMnB4IHNvbGlkICNiNWM3ZGU7XG59XG4uTWFya2Rvd25Db250ZW50IHRyOmxhc3QtY2hpbGQgdGQge1xuICAgIGJvcmRlci1ib3R0b206IG5vbmU7XG59XG4uTWFya2Rvd25Db250ZW50IHRyOm50aC1jaGlsZChldmVuKSB0ZCB7XG4gICAgYmFja2dyb3VuZDogI2VhZjNmYTtcbn1cbi5NYXJrZG93bkNvbnRlbnQgdHI6aG92ZXIgdGQge1xuICAgIGJhY2tncm91bmQ6ICNjYmUwZjc7XG4gICAgdHJhbnNpdGlvbjogYmFja2dyb3VuZCAwLjJzO1xufVxuLk1hcmtkb3duQ29udGVudCB0YWJsZSB7XG4gICAgYm9yZGVyLXJhZGl1czogMTJweDtcbiAgICBvdmVyZmxvdzogaGlkZGVuO1xufVxuLk1hcmtkb3duQ29udGVudCB0aDpmaXJzdC1jaGlsZCxcbi5NYXJrZG93bkNvbnRlbnQgdGQ6Zmlyc3QtY2hpbGQge1xuICAgIGJvcmRlci10b3AtbGVmdC1yYWRpdXM6IDEycHg7XG59XG4uTWFya2Rvd25Db250ZW50IHRoOmxhc3QtY2hpbGQsXG4uTWFya2Rvd25Db250ZW50IHRkOmxhc3QtY2hpbGQge1xuICAgIGJvcmRlci10b3AtcmlnaHQtcmFkaXVzOiAxMnB4O1xufVxuXG4uY2l0YXRpb24ge1xuICAgIGRpc3BsYXk6IGlubGluZS1ibG9jaztcbiAgICB2ZXJ0aWNhbC1hbGlnbjogc3VwZXI7XG4gICAgZm9udC1zaXplOiAwLjdlbTtcbiAgICBmb250LXdlaWdodDogYm9sZDtcbiAgICBjb2xvcjogIzAwN2JmZjtcbiAgICBiYWNrZ3JvdW5kOiAjZTdmMWZmO1xuICAgIHBhZGRpbmc6IDAgNHB4O1xuICAgIGJvcmRlci1yYWRpdXM6IDRweDtcbiAgICBtYXJnaW46IDAgMnB4O1xuICAgIGN1cnNvcjogZGVmYXVsdDtcbiAgICB1c2VyLXNlbGVjdDogbm9uZTtcbn1cblxuLyoqXG4gKiBUT0RPOiBb8J+MiV0gRFJZIE1hcmtkb3duIHByaW1pdGl2ZXMgc3R5bGluZ1xuICovXG4iXX0= */";
 var styles$5 = {"MarkdownContent":"MarkdownContent-module_MarkdownContent__2JuyX","chat-code-block":"MarkdownContent-module_chat-code-block__ZffFg","citation":"MarkdownContent-module_citation__11SMw"};
 styleInject(css_248z$6);
 
 /**
- * @@@
+ * Creates a showdown converter configured for chat markdown rendering
  *
  * @private utility of `MarkdownContent` component
  */
@@ -7557,13 +7824,13 @@ function createChatMarkdownConverter() {
     });
 }
 /**
- * @@@
+ * Pre-configured showdown converter for chat markdown
  *
  * @private utility of `MarkdownContent` component
  */
 const chatMarkdownConverter = createChatMarkdownConverter();
 /**
- * @@@
+ * Renders math expressions in markdown using KaTeX
  *
  * @private utility of `MarkdownContent` component
  */
@@ -7606,32 +7873,8 @@ function renderMarkdown(markdown) {
     }
     try {
         const processedMarkdown = renderMathInMarkdown(markdown);
-        let html = chatMarkdownConverter.makeHtml(processedMarkdown);
-        if (typeof window === 'undefined') {
-            html = html.replace(/<pre><code( class="language-([^"]+)")?>([\s\S]*?)<\/code><\/pre>/g, (match, _langClass, lang, code) => {
-                const decoded = code
-                    .replace(/&/g, '&')
-                    .replace(/</g, '<')
-                    .replace(/>/g, '>')
-                    .replace(/"/g, '"')
-                    .replace(/&#39;/g, "'");
-                const highlighted = lang
-                    ? hljs.highlight(decoded, { language: lang }).value
-                    : hljs.highlightAuto(decoded).value;
-                return `<pre class="chat-code-block"><code class="hljs${lang ? ' language-' + lang : ''}">${highlighted}</code></pre>`;
-            });
-        }
-        else {
-            if (html.match(/<pre><code/)) {
-                const cssId = 'hljs-github-dark-css';
-                if (!window.document.getElementById(cssId)) {
-                    const link = window.document.createElement('link');
-                    link.id = cssId;
-                    link.rel = 'stylesheet';
-                    link.href = 'https://book-components.ptbk.io/cdn/highlightjs/github-dark.css';
-                    window.document.head.appendChild(link);
-                }
-            }
+        const html = chatMarkdownConverter.makeHtml(processedMarkdown);
+        if (typeof window !== 'undefined') {
             if (html.match(/class="katex/)) {
                 const katexCssId = 'katex-css';
                 if (!window.document.getElementById(katexCssId)) {
@@ -7642,38 +7885,6 @@ function renderMarkdown(markdown) {
                     window.document.head.appendChild(link);
                 }
             }
-            const parser = new window.DOMParser();
-            const doc = parser.parseFromString(html, 'text/html');
-            doc.querySelectorAll('pre > code').forEach((codeEl) => {
-                var _a;
-                const preEl = codeEl.parentElement;
-                if (!preEl)
-                    return;
-                const lang = (_a = Array.from(codeEl.classList)
-                    .find((cls) => cls.startsWith('language-'))) === null || _a === void 0 ? void 0 : _a.replace('language-', '');
-                const code = codeEl.innerHTML;
-                let highlighted = '';
-                try {
-                    const decoded = code
-                        .replace(/&/g, '&')
-                        .replace(/</g, '<')
-                        .replace(/>/g, '>')
-                        .replace(/"/g, '"')
-                        .replace(/&#39;/g, "'");
-                    highlighted = lang
-                        ? hljs.highlight(decoded, { language: lang }).value
-                        : hljs.highlightAuto(decoded).value;
-                }
-                catch (_b) {
-                    highlighted = code;
-                }
-                codeEl.innerHTML = highlighted;
-                codeEl.classList.add('hljs');
-                if (lang)
-                    codeEl.classList.add(`language-${lang}`);
-                preEl.classList.add('chat-code-block');
-            });
-            html = doc.body.innerHTML;
         }
         const sanitizedHtml = html
             .replace(/<\s*(script|style|iframe|object|embed)[^>]*>[\s\S]*?<\s*\/\s*\1\s*>/gi, '')
@@ -7703,9 +7914,50 @@ function renderMarkdown(markdown) {
  * @public exported from `@promptbook/components`
  */
 function MarkdownContent(props) {
-    const { content, className } = props;
+    const { content, className, onCreateAgent } = props;
     const htmlContent = useMemo(() => renderMarkdown(content), [content]);
-    return (jsx("div", { className: classNames(styles$5.MarkdownContent, className), dangerouslySetInnerHTML: {
+    const containerRef = useRef(null);
+    const rootsRef = useRef([]);
+    useEffect(() => {
+        // Cleanup previous roots
+        rootsRef.current.forEach((root) => root.unmount());
+        rootsRef.current = [];
+        if (!containerRef.current) {
+            return;
+        }
+        const preElements = containerRef.current.querySelectorAll('pre');
+        preElements.forEach((pre) => {
+            // Check if it is a code block (has code element)
+            const codeElement = pre.querySelector('code');
+            if (!codeElement) {
+                return;
+            }
+            // Get language and code
+            const className = codeElement.className; // e.g. language-python
+            const match = className.match(/language-([^\s]+)/);
+            const language = match ? match[1] : undefined;
+            const code = codeElement.textContent || '';
+            // Clear the pre element content
+            pre.innerHTML = '';
+            pre.className = ''; // remove existing classes if any
+            pre.style.background = 'none'; // reset styles
+            pre.style.padding = '0';
+            pre.style.margin = '0';
+            pre.style.overflow = 'visible';
+            // Create a container for the CodeBlock
+            const mountPoint = document.createElement('div');
+            pre.appendChild(mountPoint);
+            // Render CodeBlock
+            const root = createRoot(mountPoint);
+            root.render(jsx(CodeBlock, { code: code, language: language, onCreateAgent: onCreateAgent }));
+            rootsRef.current.push(root);
+        });
+        return () => {
+            rootsRef.current.forEach((root) => root.unmount());
+            rootsRef.current = [];
+        };
+    }, [htmlContent, onCreateAgent]);
+    return (jsx("div", { ref: containerRef, className: classNames(styles$5.MarkdownContent, className), dangerouslySetInnerHTML: {
             __html: htmlContent,
         } }));
 }
@@ -7775,7 +8027,7 @@ function AboutPromptbookInformation(props) {
 }
 
 /**
- * @@@
+ * Renders an about icon
  *
  * @private internal subcomponent used by various components
  */
@@ -7785,7 +8037,7 @@ function AboutIcon(props) {
 }
 
 /**
- * @@@
+ * Renders an attachment icon
  *
  * @public exported from `@promptbook/components`
  */
@@ -7794,7 +8046,7 @@ function AttachmentIcon({ size = 24, color = 'currentColor' }) {
 }
 
 /**
- * @@@
+ * Renders a camera icon
  *
  * @public exported from `@promptbook/components`
  */
@@ -7803,7 +8055,7 @@ function CameraIcon({ size = 24, color = 'currentColor' }) {
 }
 
 /**
- * @@@
+ * Renders a download icon
  *
  * @private internal subcomponent used by various components
  */
@@ -7897,7 +8149,7 @@ var styles$4 = {"MenuHamburger":"HamburgerMenu-module_MenuHamburger__Jd-wk","Men
 styleInject(css_248z$5);
 
 /**
- * @@@
+ * An animated hamburger menu button component.
  *
  * @private Internal component
  */
@@ -7910,7 +8162,7 @@ var styles$3 = {"dropdown":"Dropdown-module_dropdown__ZShv1","button":"Dropdown-
 styleInject(css_248z$4);
 
 /**
- * @@@
+ * A dropdown menu component that displays a list of actions triggered by a hamburger menu button.
  *
  * @private internal subcomponent used by various components
  */
@@ -7922,6 +8174,16 @@ function Dropdown({ actions }) {
                     }, children: [icon, jsx("span", { children: name })] }, name))) }))] }));
 }
 
+const MenuHoistingContext = createContext(null);
+/**
+ * Hook to use the menu hoisting system
+ *
+ * @private mechanism inside Promptbook
+ */
+function useMenuHoisting() {
+    return useContext(MenuHoistingContext);
+}
+
 /**
  *
  * @private Internal component used by `BookEditor`
@@ -7929,50 +8191,83 @@ function Dropdown({ actions }) {
 function BookEditorActionbar(props) {
     const { value, isDownloadButtonShown, isUploadButtonShown, isCameraButtonShown, isAboutButtonShown, isFullscreenButtonShown, onFullscreenClick, onUploadDocument, onTakePhoto, isFullscreen, } = props;
     const [isAboutModalOpen, setIsAboutModalOpen] = useState(false);
-    const handleDownload = () => {
-        const book = validateBook(value || DEFAULT_BOOK);
+    const menuHoisting = useMenuHoisting();
+    // Note: [1] We use ref to avoid re-creating the handleDownload function (and thus the actions array) on every value change
+    const valueRef = useRef(value);
+    useEffect(() => {
+        valueRef.current = value;
+    }, [value]);
+    const handleDownload = useCallback(() => {
+        const book = validateBook(valueRef.current || DEFAULT_BOOK);
         /* not await */ $induceBookDownload(book);
-    };
-    const actions = [];
-    if (isUploadButtonShown && onUploadDocument) {
-        actions.push({
-            icon: jsx(AttachmentIcon, {}),
-            name: 'Upload document',
-            onClick: onUploadDocument,
-        });
-    }
-    if (isCameraButtonShown && onTakePhoto) {
-        actions.push({
-            icon: jsx(CameraIcon, {}),
-            name: 'Take photo',
-            onClick: onTakePhoto,
-        });
-    }
-    if (isDownloadButtonShown) {
-        actions.push({
-            icon: jsx(DownloadIcon, {}),
-            name: 'Download',
-            onClick: handleDownload,
-        });
-    }
-    if (isAboutButtonShown) {
-        actions.push({
-            icon: jsx(AboutIcon, {}),
-            name: 'About',
-            onClick: () => setIsAboutModalOpen(true),
-        });
-    }
-    if (isFullscreenButtonShown && onFullscreenClick) {
-        actions.push({
-            icon: jsx(FullscreenIcon, {}),
-            name: 'Fullscreen',
-            onClick: onFullscreenClick,
-        });
-    }
+    }, []);
+    const actions = useMemo(() => {
+        const _actions = [];
+        if (isUploadButtonShown && onUploadDocument) {
+            _actions.push({
+                icon: jsx(AttachmentIcon, {}),
+                name: 'Upload document',
+                onClick: onUploadDocument,
+            });
+        }
+        if (isCameraButtonShown && onTakePhoto) {
+            _actions.push({
+                icon: jsx(CameraIcon, {}),
+                name: 'Take photo',
+                onClick: onTakePhoto,
+            });
+        }
+        if (isDownloadButtonShown) {
+            _actions.push({
+                icon: jsx(DownloadIcon, {}),
+                name: 'Download',
+                onClick: handleDownload,
+            });
+        }
+        if (isAboutButtonShown) {
+            _actions.push({
+                icon: jsx(AboutIcon, {}),
+                name: 'About',
+                onClick: () => setIsAboutModalOpen(true),
+            });
+        }
+        if (isFullscreenButtonShown && onFullscreenClick) {
+            _actions.push({
+                icon: jsx(FullscreenIcon, {}),
+                name: 'Fullscreen',
+                onClick: onFullscreenClick,
+            });
+        }
+        return _actions;
+    }, [
+        isUploadButtonShown,
+        onUploadDocument,
+        isCameraButtonShown,
+        onTakePhoto,
+        isDownloadButtonShown,
+        handleDownload,
+        isAboutButtonShown,
+        isFullscreenButtonShown,
+        onFullscreenClick,
+    ]);
+    useEffect(() => {
+        if (!menuHoisting || isFullscreen) {
+            return;
+        }
+        menuHoisting.setMenu(actions);
+        return () => {
+            menuHoisting.setMenu([]);
+        };
+    }, [menuHoisting, actions, isFullscreen]);
     if (isFullscreen) {
-        return (jsx("div", { className: styles$6.bookEditorActionbar, children: jsx("button", { className: styles$6.button, onClick: onFullscreenClick, children: jsx(ExitFullscreenIcon, {}) }) }));
+        return (jsx("div", { className: styles$7.bookEditorActionbar, children: jsx("button", { className: styles$7.button, onClick: onFullscreenClick, children: jsx(ExitFullscreenIcon, {}) }) }));
+    }
+    if (menuHoisting && !isFullscreen) {
+        return (jsx(Fragment, { children: isAboutModalOpen && (jsx(Modal, { onClose: () => {
+                    setIsAboutModalOpen(false);
+                }, children: jsx(AboutPromptbookInformation, {}) })) }));
     }
-    return (jsxs("div", { className: styles$6.bookEditorActionbar, children: [actions.length >= 2 ? (jsx(Dropdown, { actions: actions })) : (actions.map(({ icon, name, onClick }) => (jsx("button", { className: styles$6.button, onClick: onClick, children: icon }, name)))), isAboutModalOpen && (jsx(Modal, { onClose: () => {
+    return (jsxs("div", { className: styles$7.bookEditorActionbar, children: [actions.length >= 2 ? (jsx(Dropdown, { actions: actions })) : (actions.map(({ icon, name, onClick }) => (jsx("button", { className: styles$7.button, onClick: onClick, children: icon }, name)))), isAboutModalOpen && (jsx(Modal, { onClose: () => {
                     setIsAboutModalOpen(false);
                 }, children: jsx(AboutPromptbookInformation, {}) }))] }));
 }
@@ -8084,6 +8379,7 @@ function BookEditorMonaco(props) {
         const parameterRegex = /@([a-zA-Z0-9_á-žÁ-Žč-řČ-Řš-žŠ-Žа-яА-ЯёЁ]+)/;
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         const bookRules = [
+            [/^---[-]*$/, ''],
             [parameterRegex, 'parameter'],
             [/\{[^}]+\}/, 'parameter'],
             [commitmentRegex, 'commitment'],
@@ -8092,7 +8388,12 @@ function BookEditorMonaco(props) {
         const tokenProvider = monaco.languages.setMonarchTokensProvider(BOOK_LANGUAGE_ID, {
             ignoreCase: true,
             tokenizer: {
-                root: [[/^.*$/, 'title', '@body']],
+                root: [
+                    [/^\s*$/, 'empty'],
+                    [/^-*$/, 'line'],
+                    [/^.*$/, 'title', '@body'],
+                    [commitmentRegex, 'commitment'],
+                ],
                 body: bookRules,
             },
         });
@@ -8310,7 +8611,7 @@ function BookEditorMonaco(props) {
         event.preventDefault();
         setIsDragOver(false);
     }, []);
-    return (jsxs("div", { className: classNames(styles$6.bookEditorContainer, instanceClass), onDrop: handleDrop, onDragOver: handleDragOver, onDragEnter: handleDragEnter, onDragLeave: handleDragLeave, children: [(isUploadButtonShown ||
+    return (jsxs("div", { className: classNames(styles$7.bookEditorContainer, instanceClass), onDrop: handleDrop, onDragOver: handleDragOver, onDragEnter: handleDragEnter, onDragLeave: handleDragLeave, children: [(isUploadButtonShown ||
                 isCameraButtonShown ||
                 isDownloadButtonShown ||
                 isAboutButtonShown ||
@@ -8323,7 +8624,7 @@ function BookEditorMonaco(props) {
                 onFullscreenClick,
                 onUploadDocument: handleUploadDocument,
                 onTakePhoto: handleTakePhoto,
-                isFullscreen })), jsx("input", { type: "file", ref: fileUploadInputRef, style: { display: 'none' }, onChange: handleFileInputChange, multiple: true }), jsx("input", { type: "file", ref: cameraInputRef, style: { display: 'none' }, accept: "image/*", capture: "environment", onChange: handleFileInputChange }), isDragOver && jsx("div", { className: styles$6.dropOverlay, children: "Drop files to upload" }), jsxs("div", { style: {
+                isFullscreen })), jsx("input", { type: "file", ref: fileUploadInputRef, style: { display: 'none' }, onChange: handleFileInputChange, multiple: true }), jsx("input", { type: "file", ref: cameraInputRef, style: { display: 'none' }, accept: "image/*", capture: "environment", onChange: handleFileInputChange }), isDragOver && jsx("div", { className: styles$7.dropOverlay, children: "Drop files to upload" }), jsxs("div", { style: {
                     position: 'relative',
                     flex: 1,
                     height: '100%',
@@ -8388,7 +8689,7 @@ function BookEditorMonaco(props) {
                                 arrowSize: 0,
                                 useShadows: false,
                             },
-                        }, loading: jsx("div", { className: styles$6.loading, children: "\uD83D\uDCD6" }) })] })] }));
+                        }, loading: jsx("div", { className: styles$7.loading, children: "\uD83D\uDCD6" }) })] })] }));
 }
 
 /**
@@ -8410,7 +8711,7 @@ function BookEditor(props) {
     const handleFullscreenToggle = () => {
         setIsFullscreen(!isFullscreen);
     };
-    const editorContent = (jsx("div", { "data-book-component": "BookEditor", className: classNames(styles$6.BookEditor, isVerbose && styles$6.isVerbose, styles$6.bookEditorWrapper, isBorderRadiusDisabled && styles$6.isBorderRadiusDisabled, isFullscreen && styles$6.fullscreen, className), style: isFullscreen
+    const editorContent = (jsx("div", { "data-book-component": "BookEditor", className: classNames(styles$7.BookEditor, isVerbose && styles$7.isVerbose, styles$7.bookEditorWrapper, isBorderRadiusDisabled && styles$7.isBorderRadiusDisabled, isFullscreen && styles$7.fullscreen, className), style: isFullscreen
             ? style
             : {
                 ...(style || {}),
@@ -8536,6 +8837,52 @@ function furthest(...colors) {
  */
 const textColor = furthest(Color.get('white'), Color.from('black'));
 
+/**
+ * Makes data url from color
+ *
+ * @public exported from `@promptbook/color`
+ */
+function colorToDataUrl(color) {
+    if (typeof color === 'string') {
+        color = Color.fromHex(color);
+    }
+    return rgbDataURL(color.red, color.green, color.blue);
+}
+/**
+ * Pixel GIF code adapted from https://stackoverflow.com/a/33919020/266535
+ *
+ * @private util of `colorToDataUrl`
+ */
+const keyStr = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=';
+/**
+ * Generates a base64-encoded triplet string
+ *
+ * @param e1 - The first element in the triplet.
+ * @param e2 - The second element in the triplet.
+ * @param e3 - The third element in the triplet.
+ * @returns The base64-encoded triplet string.
+ *
+ * @private util of `colorToDataUrl`
+ */
+const triplet = (e1, e2, e3) => keyStr.charAt(e1 >> 2) +
+    keyStr.charAt(((e1 & 3) << 4) | (e2 >> 4)) +
+    keyStr.charAt(((e2 & 15) << 2) | (e3 >> 6)) +
+    keyStr.charAt(e3 & 63);
+/**
+ * Converts RGB values to a data URL string
+ *
+ * @param r - The red channel value.
+ * @param g - The green channel value.
+ * @param b - The blue channel value.
+ * @returns The RGB data URL string.
+ *
+ * @private util of `colorToDataUrl`
+ */
+const rgbDataURL = (r, g, b) => `data:image/gif;base64,R0lGODlhAQABAPAA${triplet(0, r, g) + triplet(b, 255, 255)}/yH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==`;
+/**
+ * TODO: Make as functions NOT const
+ */
+
 /**
  * Restricts an Updatable to a (2) BehaviorSubject variant
  *
@@ -8738,7 +9085,7 @@ const MicIcon = ({ size }) => (jsxs("svg", { width: size, height: size, viewBox:
 const ResetIcon = () => (jsx("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "currentColor", children: jsx("path", { d: "M17.65,6.35C16.2,4.9 14.21,4 12,4c-4.42,0 -7.99,3.58 -7.99,8s3.57,8 7.99,8c3.73,0 6.84,-2.55 7.73,-6h-2.08c-0.82,2.33 -3.04,4 -5.65,4 -3.31,0 -6,-2.69 -6,-6s2.69,-6 6,-6c1.66,0 3.14,0.69 4.22,1.78L13,11h7V4L17.65,6.35z" }) }));
 
 /**
- * @@@
+ * Renders a save icon
  *
  * @public exported from `@promptbook/components`
  */
@@ -9018,15 +9365,15 @@ const htmlSaveFormatDefinition = {
             ASSISTANT: '#ffb300',
             SYSTEM: '#888',
         };
-        const bgColor = participantColors[String(message.from)] || '#2b7cff';
+        const bgColor = participantColors[String(message.sender)] || '#2b7cff';
         const textColor = getTextColor(bgColor);
         return spaceTrim$2(`
                             <div class="chat-message">
                                 <div class="avatar" style="background:${bgColor};color:${getTextColor(bgColor)};">
-                                    ${String(message.from)[0] || '?'}
+                                    ${String(message.sender)[0] || '?'}
                                 </div>
                                 <div class="bubble" style="background:${bgColor};color:${textColor};">
-                                    <span class="from-label">${String(message.from)}:</span>
+                                    <span class="from-label">${String(message.sender)}:</span>
                                     ${message.content}
                                 </div>
                             </div>
@@ -9072,7 +9419,7 @@ const mdSaveFormatDefinition = {
     getContent: ({ messages }) => spaceTrim$1(`
             ${messages
         .map((message) => spaceTrim$1(`
-                        **${message.from}:**
+                        **${message.sender}:**
 
                         > ${message.content.replace(/\n/g, '\n> ')}
                     `))
@@ -9262,8 +9609,8 @@ const AVATAR_SIZE = 40;
  *
  * @private internal subcomponent of `<Chat>` component
  */
-const ChatMessageItem = memo(({ message, participant, participants, isLastMessage, onMessage, setExpandedMessageId, isExpanded, currentRating, handleRating, mode, isCopyButtonEnabled, isFeedbackEnabled, onCopy, }) => {
-    const avatarSrc = (participant === null || participant === void 0 ? void 0 : participant.avatarSrc) || '';
+const ChatMessageItem = memo(({ message, participant, participants, isLastMessage, onMessage, setExpandedMessageId, isExpanded, currentRating, handleRating, mode, isCopyButtonEnabled, isFeedbackEnabled, onCopy, onCreateAgent, }) => {
+    const avatarSrc = (participant === null || participant === void 0 ? void 0 : participant.avatarSrc) || null;
     const [isAvatarTooltipVisible, setIsAvatarTooltipVisible] = useState(false);
     const [avatarTooltipPosition, setAvatarTooltipPosition] = useState(null);
     const hoverTimeoutRef = useRef(null);
@@ -9354,9 +9701,14 @@ const ChatMessageItem = memo(({ message, participant, participants, isLastMessag
             console.info('participant avatarSrc', avatarSrc);
             console.info('participant color', { color, colorOfText });
             console.groupEnd();
-        }, children: [avatarSrc && (jsxs("div", { ref: avatarRef, className: chatStyles.avatar, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, onClick: showTooltip, children: [jsx("img", { width: AVATAR_SIZE, src: avatarSrc, alt: `Avatar of ${message.from.toString().toLocaleLowerCase()}`, style: {
+        }, children: [avatarSrc && (jsxs("div", { ref: avatarRef, className: chatStyles.avatar, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, onClick: showTooltip, children: [jsx("img", { width: AVATAR_SIZE, src: avatarSrc, alt: `Avatar of ${message.sender.toString().toLocaleLowerCase()}`, style: {
                             '--avatar-bg-color': color.toHex(),
+                            objectFit: 'cover',
+                            objectPosition: '50% 20%',
                             width: AVATAR_SIZE,
+                            height: AVATAR_SIZE,
+                            aspectRatio: '1 / 1',
+                            backgroundImage: `url(${colorToDataUrl(color)})`,
                         } }), isAvatarTooltipVisible && (participant === null || participant === void 0 ? void 0 : participant.agentSource) && avatarTooltipPosition && (jsx(AvatarProfileTooltip, { ref: tooltipRef, agentSource: participant.agentSource, position: avatarTooltipPosition }))] })), jsxs("div", { className: chatStyles.messageText, style: {
                     '--message-bg-color': color.toHex(),
                     '--message-text-color': colorOfText.toHex(),
@@ -9405,7 +9757,7 @@ const ChatMessageItem = memo(({ message, participant, participants, isLastMessag
                                             ? ' ' + chatStyles.copiedTooltipLeft
                                             : tooltipAlign === 'right'
                                                 ? ' ' + chatStyles.copiedTooltipRight
-                                                : ''), children: "Copied!" }))] }) })), message.isVoiceCall && (jsx("div", { className: chatStyles.voiceCallIndicator, children: jsx("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "currentColor", children: jsx("path", { d: "M6.62 10.79c1.44 2.83 3.76 5.14 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39 0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2z" }) }) })), message.content === LOADING_INTERACTIVE_IMAGE ? (jsx(Fragment, {})) : (jsx("div", { ref: contentWithoutButtonsRef, children: jsx(MarkdownContent, { content: contentWithoutButtons }) })), !message.isComplete && jsx("span", { className: chatStyles.NonCompleteMessageFiller, children: '_'.repeat(70) }), shouldShowButtons && (jsx("div", { className: chatStyles.messageButtons, children: buttons.map((button, buttonIndex) => (jsx("button", { className: chatStyles.messageButton, onClick: (event) => {
+                                                : ''), children: "Copied!" }))] }) })), message.isVoiceCall && (jsx("div", { className: chatStyles.voiceCallIndicator, children: jsx("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "currentColor", children: jsx("path", { d: "M6.62 10.79c1.44 2.83 3.76 5.14 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39 0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2z" }) }) })), message.content === LOADING_INTERACTIVE_IMAGE ? (jsx(Fragment, {})) : (jsx("div", { ref: contentWithoutButtonsRef, children: jsx(MarkdownContent, { content: contentWithoutButtons, onCreateAgent: onCreateAgent }) })), !message.isComplete && jsx("span", { className: chatStyles.NonCompleteMessageFiller, children: '_'.repeat(70) }), shouldShowButtons && (jsx("div", { className: chatStyles.messageButtons, children: buttons.map((button, buttonIndex) => (jsx("button", { className: chatStyles.messageButton, onClick: (event) => {
                                 event.stopPropagation();
                                 if (onMessage) {
                                     onMessage(button.message);
@@ -9488,7 +9840,7 @@ function Chat(props) {
     // isExperimental = false,
     // TODO: [😅]> isSaveButtonEnabled = false,
     // exportHeaderMarkdown,
-    participants = [], extraActions, actionsContainer, saveFormats, isSaveButtonEnabled = true, isCopyButtonEnabled = true, buttonColor: buttonColorRaw, onUseTemplate, } = props;
+    participants = [], extraActions, actionsContainer, saveFormats, isSaveButtonEnabled = true, isCopyButtonEnabled = true, buttonColor: buttonColorRaw, onUseTemplate, onCreateAgent, } = props;
     const buttonColor = useMemo(() => Color.from(buttonColorRaw || '#0066cc'), [buttonColorRaw]);
     // Use the auto-scroll hook
     const { isAutoScrolling, chatMessagesRef, handleScroll, handleMessagesChange, scrollToBottom, isMobile: isMobileFromHook, } = useChatAutoScroll();
@@ -9703,7 +10055,7 @@ function Chat(props) {
         }
     }, [ratingModalOpen, isMobile]);
     // Determine alignment for actions (Reset button) based on the first message
-    const firstMessageFromUser = ((_a = messages[0]) === null || _a === void 0 ? void 0 : _a.from) === 'USER';
+    const firstMessageFromUser = ((_a = messages[0]) === null || _a === void 0 ? void 0 : _a.sender) === 'USER';
     const actionsAlignmentClass = firstMessageFromUser
         ? chatStyles.actions + ' ' + chatStyles.left
         : chatStyles.actions + ' ' + chatStyles.right;
@@ -9780,11 +10132,11 @@ function Chat(props) {
                                 }
                                 return true;
                             })() && chatStyles.hasActionsAndFirstMessageIsLong), ref: chatMessagesRef, onScroll: handleScroll, children: [postprocessedMessages.map((message, i) => {
-                                    const participant = participants.find((participant) => participant.name === message.from);
+                                    const participant = participants.find((participant) => participant.name === message.sender);
                                     const isLastMessage = i === postprocessedMessages.length - 1;
                                     const isExpanded = expandedMessageId === message.id;
                                     const currentRating = messageRatings.get(message.id || message.content /* <-[💃] */) || 0;
-                                    return (jsx(ChatMessageItem, { message: message, participant: participant, participants: participants, isLastMessage: isLastMessage, onMessage: onMessage, setExpandedMessageId: setExpandedMessageId, isExpanded: isExpanded, currentRating: currentRating, handleRating: handleRating, mode: mode, isCopyButtonEnabled: isCopyButtonEnabled, isFeedbackEnabled: isFeedbackEnabled, onCopy: handleCopy }, message.id));
+                                    return (jsx(ChatMessageItem, { message: message, participant: participant, participants: participants, isLastMessage: isLastMessage, onMessage: onMessage, setExpandedMessageId: setExpandedMessageId, isExpanded: isExpanded, currentRating: currentRating, handleRating: handleRating, mode: mode, isCopyButtonEnabled: isCopyButtonEnabled, isFeedbackEnabled: isFeedbackEnabled, onCopy: handleCopy, onCreateAgent: onCreateAgent }, message.id));
                                 }), jsx("div", { 
                                     // Note: Extra space at bottom for input area
                                     style: { height: 100 } })] }), onMessage && (jsxs("div", { className: classNames(chatStyles.chatInput, useChatCssClassName('chatInput'), isDragOver && chatStyles.dragOver), ...(onFileUpload
@@ -9872,13 +10224,13 @@ function Chat(props) {
                                 const idx = postprocessedMessages.findIndex((m) => m.id === selectedMessage.id);
                                 if (idx > 0) {
                                     const prev = postprocessedMessages[idx - 1];
-                                    if (prev.from === 'USER') {
+                                    if (prev.sender === 'USER') {
                                         return prev.content;
                                     }
                                 }
                                 // fallback: find last USER message before selectedMessage
                                 for (let i = messages.findIndex((m) => m.id === selectedMessage.id) - 1; i >= 0; i--) {
-                                    if (messages[i].from === 'USER') {
+                                    if (messages[i].sender === 'USER') {
                                         return messages[i].content;
                                     }
                                 }
@@ -9905,7 +10257,9 @@ class ChatPersistence {
         try {
             const serializableMessages = messages.map((message) => ({
                 ...message,
-                date: (message.date || new Date()).toISOString(),
+                createdAt: (typeof message.createdAt === 'string'
+                    ? new Date(message.createdAt)
+                    : message.createdAt || new Date()).toISOString(),
             }));
             const storageKey = this.STORAGE_PREFIX + persistenceKey;
             localStorage.setItem(storageKey, JSON.stringify(serializableMessages));
@@ -9928,7 +10282,7 @@ class ChatPersistence {
             // Convert date strings back to Date objects
             return serializableMessages.map((message) => ({
                 ...message,
-                date: new Date(message.date),
+                createdAt: new Date(message.createdAt),
             }));
         }
         catch (error) {
@@ -9981,7 +10335,7 @@ function LlmChat(props) {
     const { llmTools, persistenceKey, onChange, onReset, initialMessages, sendMessage, userParticipantName = 'USER', llmParticipantName = 'ASSISTANT', autoExecuteMessage, buttonColor, ...restProps } = props;
     // Internal state management
     // DRY: Single factory for seeding initial messages (used on mount and after reset)
-    const buildInitialMessages = useCallback(() => (initialMessages ? [...initialMessages] : []), [initialMessages]);
+    const buildInitialMessages = useCallback(() => initialMessages ? ([...initialMessages]) : ([]), [initialMessages]);
     const [messages, setMessages] = useState(() => buildInitialMessages());
     const [tasksProgress, setTasksProgress] = useState([]);
     const [isVoiceCalling, setIsVoiceCalling] = useState(false);
@@ -10074,17 +10428,19 @@ function LlmChat(props) {
             setTasksProgress([{ id: taskId, name: 'Playing response...', progress: 100 }]);
             const now = Date.now();
             const userMessage = {
+                // channel: 'PROMPTBOOK_CHAT',
                 id: `user_${now}`,
-                date: new Date(),
-                from: userParticipantName,
+                createdAt: new Date(),
+                sender: userParticipantName,
                 content: (result.userMessage || '(Voice message)'),
                 isComplete: true,
                 isVoiceCall: true,
             };
             const agentMessage = {
+                // channel: 'PROMPTBOOK_CHAT',
                 id: `agent_${now}`,
-                date: new Date(),
-                from: llmParticipantName,
+                createdAt: new Date(),
+                sender: llmParticipantName,
                 content: (result.agentMessage || result.text),
                 isComplete: true,
                 isVoiceCall: true,
@@ -10181,9 +10537,10 @@ function LlmChat(props) {
         hasUserInteractedRef.current = true;
         // Add user message
         const userMessage = {
+            // channel: 'PROMPTBOOK_CHAT',
             id: `user_${Date.now()}`,
-            date: new Date(),
-            from: userParticipantName,
+            createdAt: new Date(),
+            sender: userParticipantName,
             content: messageContent,
             isComplete: true,
         };
@@ -10195,9 +10552,10 @@ function LlmChat(props) {
         }
         // Add loading message for assistant
         const loadingMessage = {
+            // channel: 'PROMPTBOOK_CHAT',
             id: `assistant_${Date.now()}`,
-            date: new Date(),
-            from: llmParticipantName,
+            createdAt: new Date(),
+            sender: llmParticipantName,
             content: 'Thinking...',
             isComplete: false,
         };
@@ -10228,9 +10586,10 @@ function LlmChat(props) {
             if (llmTools.callChatModelStream) {
                 result = await llmTools.callChatModelStream(prompt, (chunk) => {
                     const assistantMessage = {
+                        // channel: 'PROMPTBOOK_CHAT',
                         id: loadingMessage.id,
-                        date: new Date(),
-                        from: llmParticipantName,
+                        createdAt: new Date(),
+                        sender: llmParticipantName,
                         content: chunk.content,
                         isComplete: false,
                     };
@@ -10251,9 +10610,10 @@ function LlmChat(props) {
             setTasksProgress([{ id: taskId, name: 'Response generated', progress: 100 }]);
             // Replace loading message with actual response
             const assistantMessage = {
+                // channel: 'PROMPTBOOK_CHAT',
                 id: loadingMessage.id,
-                date: new Date(),
-                from: llmParticipantName,
+                createdAt: new Date(),
+                sender: llmParticipantName,
                 content: result.content,
                 isComplete: true,
             };
@@ -10272,9 +10632,10 @@ function LlmChat(props) {
             console.error('Error calling LLM:', error);
             // Replace loading message with error message
             const errorMessage = {
+                // channel: 'PROMPTBOOK_CHAT',
                 id: loadingMessage.id,
-                date: new Date(),
-                from: llmParticipantName,
+                createdAt: new Date(),
+                sender: llmParticipantName,
                 content: `Sorry, I encountered an error: ${error instanceof Error ? error.message : 'Unknown error'}`,
                 isComplete: true,
             };
@@ -10341,7 +10702,8 @@ function AgentChat(props) {
     return (jsx(Fragment, { children: jsx(LlmChat, { title: title || `Chat with ${agent.meta.fullname || agent.agentName || 'Agent'}`, persistenceKey: persistenceKey || `agent-chat-${agent.agentName}`, userParticipantName: "USER", llmParticipantName: "AGENT" // <- TODO: [🧠] Maybe dynamic agent id
             , initialMessages: [
                 {
-                    from: 'AGENT',
+                    // channel: 'PROMPTBOOK_CHAT',
+                    sender: 'AGENT',
                     content: agent.initialMessage ||
                         spaceTrim$2(`
                                 
@@ -10619,7 +10981,7 @@ function MockedChat(props) {
                     if (delays.longPauseChance &&
                         Math.random() < delays.longPauseChance &&
                         i > 0 &&
-                        originalMessages[i].from !== originalMessages[i - 1].from) {
+                        originalMessages[i].sender !== originalMessages[i - 1].sender) {
                         await forTime(getDelay(delays.longPauseDuration, 2000));
                         didLongPause = true;
                         if (isCancelled)
@@ -10640,9 +11002,10 @@ function MockedChat(props) {
                 }
                 // Show incomplete message first (for typing effect)
                 const incompleteMessage = {
+                    // channel: 'PROMPTBOOK_CHAT',
                     id: currentMessage.id,
-                    date: currentMessage.date,
-                    from: currentMessage.from,
+                    createdAt: currentMessage.createdAt,
+                    sender: currentMessage.sender,
                     content: '',
                     isComplete: false,
                     expectedAnswer: currentMessage.expectedAnswer,
@@ -10660,9 +11023,10 @@ function MockedChat(props) {
                     currentContent += (wordIndex > 0 ? ' ' : '') + word;
                     // Update the message with current content
                     const updatingMessage = {
+                        // channel: 'PROMPTBOOK_CHAT',
                         id: currentMessage.id,
-                        date: currentMessage.date,
-                        from: currentMessage.from,
+                        createdAt: currentMessage.createdAt,
+                        sender: currentMessage.sender,
                         content: currentContent,
                         isComplete: false,
                         expectedAnswer: currentMessage.expectedAnswer,
@@ -10680,9 +11044,10 @@ function MockedChat(props) {
                 }
                 // Mark message as complete
                 const completeMessage = {
+                    // channel: 'PROMPTBOOK_CHAT',
                     id: currentMessage.id,
-                    date: currentMessage.date,
-                    from: currentMessage.from,
+                    createdAt: currentMessage.createdAt,
+                    sender: currentMessage.sender,
                     content: currentMessage.content,
                     isComplete: true,
                     expectedAnswer: currentMessage.expectedAnswer,
@@ -10934,6 +11299,12 @@ class MultipleLlmExecutionTools {
     callEmbeddingModel(prompt) {
         return this.callCommonModel(prompt);
     }
+    /**
+     * Calls the best available embedding model
+     */
+    callImageGenerationModel(prompt) {
+        return this.callCommonModel(prompt);
+    }
     // <- Note: [🤖]
     /**
      * Calls the best available model
@@ -10960,6 +11331,11 @@ class MultipleLlmExecutionTools {
                             continue llm;
                         }
                         return await llmExecutionTools.callEmbeddingModel(prompt);
+                    case 'IMAGE_GENERATION':
+                        if (llmExecutionTools.callImageGenerationModel === undefined) {
+                            continue llm;
+                        }
+                        return await llmExecutionTools.callImageGenerationModel(prompt);
                     // <- case [🤖]:
                     default:
                         throw new UnexpectedError(`Unknown model variant "${prompt.modelRequirements.modelVariant}" in ${llmExecutionTools.title}`);
@@ -12134,6 +12510,15 @@ function countUsage(llmTools) {
             return promptResult;
         };
     }
+    if (llmTools.callImageGenerationModel !== undefined) {
+        proxyTools.callImageGenerationModel = async (prompt) => {
+            // console.info('[🚕] callImageGenerationModel through countTotalUsage');
+            const promptResult = await llmTools.callImageGenerationModel(prompt);
+            totalUsage = addUsage(totalUsage, promptResult.usage);
+            spending.next(promptResult.usage);
+            return promptResult;
+        };
+    }
     // <- Note: [🤖]
     return proxyTools;
 }
@@ -12142,7 +12527,7 @@ function countUsage(llmTools) {
  * TODO: [🧠] Is there some meaningfull way how to test this util
  * TODO: [🧠][🌯] Maybe a way how to hide ability to `get totalUsage`
  *     > const [llmToolsWithUsage,getUsage] = countTotalUsage(llmTools);
- * TODO: [👷‍♂️] @@@ Manual about construction of llmTools
+ * TODO: [👷‍♂️] Write a comprehensive manual explaining the construction and usage of LLM tools in the Promptbook ecosystem
  */
 
 /**
@@ -13677,8 +14062,9 @@ async function executeAttempts(options) {
                                     $ongoingTaskResult.$resultString = $ongoingTaskResult.$completionResult.content;
                                     break variant;
                                 case 'EMBEDDING':
+                                case 'IMAGE_GENERATION':
                                     throw new PipelineExecutionError(spaceTrim$1((block) => `
-                                                Embedding model can not be used in pipeline
+                                                ${modelRequirements.modelVariant} model can not be used in pipeline
 
                                                 This should be catched during parsing
 
@@ -14994,7 +15380,12 @@ async function createAgentModelRequirementsWithCommitments(agentSource, modelNam
         };
     }
     // Apply each commitment in order using reduce-like pattern
-    for (const commitment of filteredCommitments) {
+    for (let i = 0; i < filteredCommitments.length; i++) {
+        const commitment = filteredCommitments[i];
+        // CLOSED commitment should work only if its the last commitment in the book
+        if (commitment.type === 'CLOSED' && i !== filteredCommitments.length - 1) {
+            continue;
+        }
         const definition = getCommitmentDefinition(commitment.type);
         if (definition) {
             try {
@@ -16009,7 +16400,7 @@ class OpenAiCompatibleExecutionTools {
         let threadMessages = [];
         if ('thread' in prompt && Array.isArray(prompt.thread)) {
             threadMessages = prompt.thread.map((msg) => ({
-                role: msg.role === 'assistant' ? 'assistant' : 'user',
+                role: msg.sender === 'assistant' ? 'assistant' : 'user',
                 content: msg.content,
             }));
         }
@@ -16422,13 +16813,14 @@ class OpenAiCompatibleExecutionTools {
         const modelName = currentModelRequirements.modelName || this.getDefaultImageGenerationModel().modelName;
         const modelSettings = {
             model: modelName,
-            // size: currentModelRequirements.size,
-            // quality: currentModelRequirements.quality,
-            // style: currentModelRequirements.style,
+            size: currentModelRequirements.size,
+            quality: currentModelRequirements.quality,
+            style: currentModelRequirements.style,
         };
         const rawPromptContent = templateParameters(content, { ...parameters, modelName });
         const rawRequest = {
             ...modelSettings,
+            size: modelSettings.size || '1024x1024',
             prompt: rawPromptContent,
             user: (_a = this.options.userId) === null || _a === void 0 ? void 0 : _a.toString(),
             response_format: 'url', // TODO: [🧠] Maybe allow b64_json
@@ -17447,6 +17839,11 @@ class Agent extends AgentLlmExecutionTools {
          * Links found in the agent source
          */
         this.links = [];
+        /**
+         * Capabilities of the agent
+         * This is parsed from commitments like USE BROWSER, USE SEARCH ENGINE, KNOWLEDGE, etc.
+         */
+        this.capabilities = [];
         /**
          * Metadata like image or color
          */
@@ -17456,11 +17853,12 @@ class Agent extends AgentLlmExecutionTools {
         this.agentSource = agentSource;
         this.agentSource.subscribe((source) => {
             this.updateAgentSource(source);
-            const { agentName, personaDescription, initialMessage, links, meta } = parseAgentSource(source);
+            const { agentName, personaDescription, initialMessage, links, meta, capabilities } = parseAgentSource(source);
             this._agentName = agentName;
             this.personaDescription = personaDescription;
             this.initialMessage = initialMessage;
             this.links = links;
+            this.capabilities = capabilities;
             this.meta = { ...this.meta, ...meta };
         });
     }
@@ -17534,9 +17932,52 @@ class Agent extends AgentLlmExecutionTools {
                 ${block(result.content)}
 
             `);
+        // Extract knowledge
+        let knowledgeBlock = '';
+        try {
+            const extractionPrompt = {
+                title: 'Knowledge Extraction',
+                modelRequirements: {
+                    modelVariant: 'CHAT',
+                },
+                content: spaceTrim$2((block) => `
+                        You are an AI agent that is learning from a conversation.
+
+                        Here is the conversation so far:
+
+                        User: ${block(prompt.content)}
+                        Agent: ${block(result.content)}
+
+                        Extract any new knowledge, facts, or important information that should be remembered for future interactions.
+                        Format the output as a list of KNOWLEDGE blocks.
+                        If there is no new knowledge, return nothing.
+
+                        Example output:
+                        KNOWLEDGE The user's name is Alice.
+                        KNOWLEDGE The project deadline is next Friday.
+                    `),
+                pipelineUrl: 'https://github.com/webgptorg/promptbook/blob/main/prompts/knowledge-extraction.ptbk.md',
+                parameters: {},
+            };
+            if (this.options.llmTools.callChatModel) {
+                const extractionResult = await this.options.llmTools.callChatModel(extractionPrompt);
+                const extractedContent = extractionResult.content;
+                if (extractedContent.includes('KNOWLEDGE')) {
+                    knowledgeBlock = '\n\n' + spaceTrim$2(extractedContent);
+                }
+            }
+            else {
+                // TODO: [🧠] Fallback to callChatModelStream if callChatModel is not available
+            }
+        }
+        catch (error) {
+            if (this.options.isVerbose) {
+                console.warn('Failed to extract knowledge', error);
+            }
+        }
         // Append to the current source
         const currentSource = this.agentSource.value;
-        const newSource = padBook(validateBook(spaceTrim$2(currentSource) + '\n\n' + learningExample));
+        const newSource = padBook(validateBook(spaceTrim$2(currentSource) + '\n\n' + learningExample + knowledgeBlock));
         // Update the source (which will trigger the subscription and update the underlying tools)
         this.agentSource.next(newSource);
         return result;
@@ -17810,7 +18251,8 @@ function PromptbookAgentSeamlessIntegration(props) {
     // TODO: [🧠] Handle error state (show error message in the chat window)
     const image = ((_a = agent === null || agent === void 0 ? void 0 : agent.meta) === null || _a === void 0 ? void 0 : _a.image) ||
         (meta === null || meta === void 0 ? void 0 : meta.image) ||
-        'https://www.gravatar.com/avatar/00000000000000000000000000000000?d=mp&f=y';
+        // Note: [🤹] Using default avatar from the agent server
+        `${agentUrl}/images/default-avatar.png`;
     const color = ((_b = agent === null || agent === void 0 ? void 0 : agent.meta) === null || _b === void 0 ? void 0 : _b.color) || (meta === null || meta === void 0 ? void 0 : meta.color);
     let connectionStatus = 'pending';
     if (agent) {