@promptbook/components 0.104.0-1 → 0.104.0-11

package/umd/index.umd.js

@@ -1,15 +1,14 @@
 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react/jsx-runtime'), require('react'), require('spacetrim'), require('crypto-js'), require('crypto-js/enc-hex'), require('path'), require('crypto'), require('react-dom'), require('@monaco-editor/react'), require('destroyable'), require('highlight.js'), require('katex'), require('showdown'), require('rxjs'), require('waitasecond'), require('crypto-js/sha256'), require('mime-types'), require('papaparse'), require('colors'), require('bottleneck'), require('openai'), require('qrcode')) :
-    typeof define === 'function' && define.amd ? define(['exports', 'react/jsx-runtime', 'react', 'spacetrim', 'crypto-js', 'crypto-js/enc-hex', 'path', 'crypto', 'react-dom', '@monaco-editor/react', 'destroyable', 'highlight.js', 'katex', 'showdown', 'rxjs', 'waitasecond', 'crypto-js/sha256', 'mime-types', 'papaparse', 'colors', 'bottleneck', 'openai', 'qrcode'], factory) :
-    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global["promptbook-components"] = {}, global.jsxRuntime, global.react, global.spaceTrim$1, global.cryptoJs, global.hexEncoder, global.path, global.crypto, global.reactDom, global.Editor, global.destroyable, global.hljs, global.katex, global.showdown, global.rxjs, global.waitasecond, global.sha256, global.mimeTypes, global.papaparse, global.colors, global.Bottleneck, global.OpenAI, global.QRCode));
-})(this, (function (exports, jsxRuntime, react, spaceTrim$1, cryptoJs, hexEncoder, path, crypto, reactDom, Editor, destroyable, hljs, katex, showdown, rxjs, waitasecond, sha256, mimeTypes, papaparse, colors, Bottleneck, OpenAI, QRCode) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react/jsx-runtime'), require('react'), require('spacetrim'), require('crypto-js'), require('crypto-js/enc-hex'), require('path'), require('crypto'), require('react-dom'), require('@monaco-editor/react'), require('destroyable'), require('katex'), require('react-dom/client'), require('showdown'), require('rxjs'), require('waitasecond'), require('crypto-js/sha256'), require('mime-types'), require('papaparse'), require('colors'), require('bottleneck'), require('openai'), require('qrcode')) :
+    typeof define === 'function' && define.amd ? define(['exports', 'react/jsx-runtime', 'react', 'spacetrim', 'crypto-js', 'crypto-js/enc-hex', 'path', 'crypto', 'react-dom', '@monaco-editor/react', 'destroyable', 'katex', 'react-dom/client', 'showdown', 'rxjs', 'waitasecond', 'crypto-js/sha256', 'mime-types', 'papaparse', 'colors', 'bottleneck', 'openai', 'qrcode'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global["promptbook-components"] = {}, global.jsxRuntime, global.react, global.spaceTrim$1, global.cryptoJs, global.hexEncoder, global.path, global.crypto, global.reactDom, global.Editor, global.destroyable, global.katex, global.client, global.showdown, global.rxjs, global.waitasecond, global.sha256, global.mimeTypes, global.papaparse, global.colors, global.Bottleneck, global.OpenAI, global.QRCode));
+})(this, (function (exports, jsxRuntime, react, spaceTrim$1, cryptoJs, hexEncoder, path, crypto, reactDom, Editor, destroyable, katex, client, showdown, rxjs, waitasecond, sha256, mimeTypes, papaparse, colors, Bottleneck, OpenAI, QRCode) { 'use strict';
 
     function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
     var spaceTrim__default = /*#__PURE__*/_interopDefaultLegacy(spaceTrim$1);
     var hexEncoder__default = /*#__PURE__*/_interopDefaultLegacy(hexEncoder);
     var Editor__default = /*#__PURE__*/_interopDefaultLegacy(Editor);
-    var hljs__default = /*#__PURE__*/_interopDefaultLegacy(hljs);
     var katex__default = /*#__PURE__*/_interopDefaultLegacy(katex);
     var sha256__default = /*#__PURE__*/_interopDefaultLegacy(sha256);
     var colors__default = /*#__PURE__*/_interopDefaultLegacy(colors);
@@ -31,7 +30,7 @@
      * @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
@@ -80,9 +79,9 @@
       }
     }
 
-    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
@@ -92,7 +91,7 @@
     function AvatarChip(props) {
         const { avatarBasicInformation, className, onSelect, isSelected, isTemplate } = props;
         const { agentName, meta } = avatarBasicInformation;
-        return (jsxRuntime.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: [jsxRuntime.jsx("img", { src: meta.image, alt: agentName || '', className: styles$8.Avatar }), meta.fullname || agentName, isTemplate && jsxRuntime.jsx("span", { className: styles$8.TemplateLabel, children: "Template" })] }));
+        return (jsxRuntime.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: [jsxRuntime.jsx("img", { src: meta.image, alt: agentName || '', className: styles$9.Avatar }), meta.fullname || agentName, isTemplate && jsxRuntime.jsx("span", { className: styles$9.TemplateLabel, children: "Template" })] }));
     }
 
     /**
@@ -149,48 +148,12 @@
      * 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',
@@ -3043,13 +3006,14 @@
      *
      * @public exported from `@promptbook/utils`
      */
-    const $isRunningInBrowser = new Function(`
-    try {
-        return this === window;
-    } catch (e) {
-        return false;
+    function $isRunningInBrowser() {
+        try {
+            return typeof window !== 'undefined' && typeof window.document !== 'undefined';
+        }
+        catch (e) {
+            return false;
+        }
     }
-`);
     /**
      * TODO: [🎺]
      */
@@ -3061,13 +3025,15 @@
      *
      * @public exported from `@promptbook/utils`
      */
-    const $isRunningInJest = new Function(`
-    try {
-        return process.env.JEST_WORKER_ID !== undefined;
-    } catch (e) {
-        return false;
+    function $isRunningInJest() {
+        var _a;
+        try {
+            return typeof process !== 'undefined' && ((_a = process.env) === null || _a === void 0 ? void 0 : _a.JEST_WORKER_ID) !== undefined;
+        }
+        catch (e) {
+            return false;
+        }
     }
-`);
     /**
      * TODO: [🎺]
      */
@@ -3079,13 +3045,14 @@
      *
      * @public exported from `@promptbook/utils`
      */
-    const $isRunningInNode = new Function(`
-    try {
-        return this === global;
-    } catch (e) {
-        return false;
+    function $isRunningInNode() {
+        try {
+            return typeof process !== 'undefined' && process.versions != null && process.versions.node != null;
+        }
+        catch (e) {
+            return false;
+        }
     }
-`);
     /**
      * TODO: [🎺]
      */
@@ -3097,17 +3064,17 @@
      *
      * @public exported from `@promptbook/utils`
      */
-    const $isRunningInWebWorker = new Function(`
-    try {
-        if (typeof WorkerGlobalScope !== 'undefined' && self instanceof WorkerGlobalScope) {
-            return true;
-        } else {
+    function $isRunningInWebWorker() {
+        try {
+            // 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;
         }
-    } catch (e) {
-        return false;
     }
-`);
     /**
      * TODO: [🎺]
      */
@@ -4123,6 +4090,114 @@
      * 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.spaceTrim(`
+            # 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
      *
@@ -6943,6 +7018,7 @@
         new DeleteCommitmentDefinition('CANCEL'),
         new DeleteCommitmentDefinition('DISCARD'),
         new DeleteCommitmentDefinition('REMOVE'),
+        new DictionaryCommitmentDefinition(),
         new OpenCommitmentDefinition(),
         new ClosedCommitmentDefinition(),
         new UseBrowserCommitmentDefinition(),
@@ -7002,17 +7078,64 @@
             };
         }
         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;
@@ -7189,7 +7312,57 @@
         }
         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__default["default"](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__default["default"](commitment.content);
                 links.push(linkValue);
@@ -7219,10 +7392,6 @@
             const metaType = normalizeTo_camelCase(metaTypeRaw);
             meta[metaType] = spaceTrim__default["default"](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);
@@ -7234,11 +7403,13 @@
         return {
             agentName: normalizeAgentName(parseResult.agentName || createDefaultAgentName(agentSource)),
             agentHash,
+            permanentId: meta.id,
             personaDescription,
             initialMessage,
             meta,
             links,
             parameters,
+            capabilities,
         };
     }
     /**
@@ -7273,9 +7444,9 @@
         return jsxRuntime.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);
 
     /**
      *
@@ -7293,7 +7464,7 @@
                 window.removeEventListener('keydown', handleKeyDown);
             };
         }, [onClose]);
-        return reactDom.createPortal(jsxRuntime.jsx("div", { className: styles$7.scrim, onClick: onClose, children: jsxRuntime.jsxs("div", { className: classNames(styles$7.Modal, className), onClick: (e) => e.stopPropagation(), children: [jsxRuntime.jsx("button", { className: styles$7.closeButton, onClick: onClose, children: "\u00D7" }), children] }) }), document.body);
+        return reactDom.createPortal(jsxRuntime.jsx("div", { className: styles$8.scrim, onClick: onClose, children: jsxRuntime.jsxs("div", { className: classNames(styles$8.Modal, className), onClick: (e) => e.stopPropagation(), children: [jsxRuntime.jsx("button", { className: styles$8.closeButton, onClick: onClose, children: "\u00D7" }), children] }) }), document.body);
     }
 
     /**
@@ -7378,9 +7549,9 @@
     //                  <- [🐱‍🚀] 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
@@ -7500,12 +7671,107 @@
      * 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 = react.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] = react.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 ? (jsxRuntime.jsxs("div", { className: styles$6.CodeBlockHeader, children: [jsxRuntime.jsx("span", { children: language }), jsxRuntime.jsxs("div", { className: styles$6.CodeBlockButtons, children: [jsxRuntime.jsx("button", { onClick: handleCopy, className: styles$6.CopyButton, title: "Copy to clipboard", children: copied ? 'Copied!' : 'Copy' }), jsxRuntime.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 && (jsxRuntime.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 (jsxRuntime.jsxs("div", { className: classNames(styles$6.CodeBlock, className), children: [header, jsxRuntime.jsx(BookEditor, { value: code, isReadonly: true, height: lines * 25 /* <- [🧠] A bit more than 19px to accommodate BookEditor lines */ })] }));
+        }
+        return (jsxRuntime.jsxs("div", { className: classNames(styles$6.CodeBlock, className), children: [header, jsxRuntime.jsx(Editor__default["default"], { 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
      */
@@ -7553,13 +7819,13 @@
         });
     }
     /**
-     * @@@
+     * 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
      */
@@ -7602,32 +7868,8 @@
         }
         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__default["default"].highlight(decoded, { language: lang }).value
-                        : hljs__default["default"].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)) {
@@ -7638,38 +7880,6 @@
                         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__default["default"].highlight(decoded, { language: lang }).value
-                            : hljs__default["default"].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, '')
@@ -7699,9 +7909,50 @@
      * @public exported from `@promptbook/components`
      */
     function MarkdownContent(props) {
-        const { content, className } = props;
+        const { content, className, onCreateAgent } = props;
         const htmlContent = react.useMemo(() => renderMarkdown(content), [content]);
-        return (jsxRuntime.jsx("div", { className: classNames(styles$5.MarkdownContent, className), dangerouslySetInnerHTML: {
+        const containerRef = react.useRef(null);
+        const rootsRef = react.useRef([]);
+        react.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 = client.createRoot(mountPoint);
+                root.render(jsxRuntime.jsx(CodeBlock, { code: code, language: language, onCreateAgent: onCreateAgent }));
+                rootsRef.current.push(root);
+            });
+            return () => {
+                rootsRef.current.forEach((root) => root.unmount());
+                rootsRef.current = [];
+            };
+        }, [htmlContent, onCreateAgent]);
+        return (jsxRuntime.jsx("div", { ref: containerRef, className: classNames(styles$5.MarkdownContent, className), dangerouslySetInnerHTML: {
                 __html: htmlContent,
             } }));
     }
@@ -7771,7 +8022,7 @@
     }
 
     /**
-     * @@@
+     * Renders an about icon
      *
      * @private internal subcomponent used by various components
      */
@@ -7781,7 +8032,7 @@
     }
 
     /**
-     * @@@
+     * Renders an attachment icon
      *
      * @public exported from `@promptbook/components`
      */
@@ -7790,7 +8041,7 @@
     }
 
     /**
-     * @@@
+     * Renders a camera icon
      *
      * @public exported from `@promptbook/components`
      */
@@ -7799,7 +8050,7 @@
     }
 
     /**
-     * @@@
+     * Renders a download icon
      *
      * @private internal subcomponent used by various components
      */
@@ -7893,7 +8144,7 @@
     styleInject(css_248z$5);
 
     /**
-     * @@@
+     * An animated hamburger menu button component.
      *
      * @private Internal component
      */
@@ -7906,7 +8157,7 @@
     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
      */
@@ -7918,6 +8169,16 @@
                         }, children: [icon, jsxRuntime.jsx("span", { children: name })] }, name))) }))] }));
     }
 
+    const MenuHoistingContext = react.createContext(null);
+    /**
+     * Hook to use the menu hoisting system
+     *
+     * @private mechanism inside Promptbook
+     */
+    function useMenuHoisting() {
+        return react.useContext(MenuHoistingContext);
+    }
+
     /**
      *
      * @private Internal component used by `BookEditor`
@@ -7925,50 +8186,83 @@
     function BookEditorActionbar(props) {
         const { value, isDownloadButtonShown, isUploadButtonShown, isCameraButtonShown, isAboutButtonShown, isFullscreenButtonShown, onFullscreenClick, onUploadDocument, onTakePhoto, isFullscreen, } = props;
         const [isAboutModalOpen, setIsAboutModalOpen] = react.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 = react.useRef(value);
+        react.useEffect(() => {
+            valueRef.current = value;
+        }, [value]);
+        const handleDownload = react.useCallback(() => {
+            const book = validateBook(valueRef.current || DEFAULT_BOOK);
             /* not await */ $induceBookDownload(book);
-        };
-        const actions = [];
-        if (isUploadButtonShown && onUploadDocument) {
-            actions.push({
-                icon: jsxRuntime.jsx(AttachmentIcon, {}),
-                name: 'Upload document',
-                onClick: onUploadDocument,
-            });
-        }
-        if (isCameraButtonShown && onTakePhoto) {
-            actions.push({
-                icon: jsxRuntime.jsx(CameraIcon, {}),
-                name: 'Take photo',
-                onClick: onTakePhoto,
-            });
-        }
-        if (isDownloadButtonShown) {
-            actions.push({
-                icon: jsxRuntime.jsx(DownloadIcon, {}),
-                name: 'Download',
-                onClick: handleDownload,
-            });
-        }
-        if (isAboutButtonShown) {
-            actions.push({
-                icon: jsxRuntime.jsx(AboutIcon, {}),
-                name: 'About',
-                onClick: () => setIsAboutModalOpen(true),
-            });
-        }
-        if (isFullscreenButtonShown && onFullscreenClick) {
-            actions.push({
-                icon: jsxRuntime.jsx(FullscreenIcon, {}),
-                name: 'Fullscreen',
-                onClick: onFullscreenClick,
-            });
-        }
+        }, []);
+        const actions = react.useMemo(() => {
+            const _actions = [];
+            if (isUploadButtonShown && onUploadDocument) {
+                _actions.push({
+                    icon: jsxRuntime.jsx(AttachmentIcon, {}),
+                    name: 'Upload document',
+                    onClick: onUploadDocument,
+                });
+            }
+            if (isCameraButtonShown && onTakePhoto) {
+                _actions.push({
+                    icon: jsxRuntime.jsx(CameraIcon, {}),
+                    name: 'Take photo',
+                    onClick: onTakePhoto,
+                });
+            }
+            if (isDownloadButtonShown) {
+                _actions.push({
+                    icon: jsxRuntime.jsx(DownloadIcon, {}),
+                    name: 'Download',
+                    onClick: handleDownload,
+                });
+            }
+            if (isAboutButtonShown) {
+                _actions.push({
+                    icon: jsxRuntime.jsx(AboutIcon, {}),
+                    name: 'About',
+                    onClick: () => setIsAboutModalOpen(true),
+                });
+            }
+            if (isFullscreenButtonShown && onFullscreenClick) {
+                _actions.push({
+                    icon: jsxRuntime.jsx(FullscreenIcon, {}),
+                    name: 'Fullscreen',
+                    onClick: onFullscreenClick,
+                });
+            }
+            return _actions;
+        }, [
+            isUploadButtonShown,
+            onUploadDocument,
+            isCameraButtonShown,
+            onTakePhoto,
+            isDownloadButtonShown,
+            handleDownload,
+            isAboutButtonShown,
+            isFullscreenButtonShown,
+            onFullscreenClick,
+        ]);
+        react.useEffect(() => {
+            if (!menuHoisting || isFullscreen) {
+                return;
+            }
+            menuHoisting.setMenu(actions);
+            return () => {
+                menuHoisting.setMenu([]);
+            };
+        }, [menuHoisting, actions, isFullscreen]);
         if (isFullscreen) {
-            return (jsxRuntime.jsx("div", { className: styles$6.bookEditorActionbar, children: jsxRuntime.jsx("button", { className: styles$6.button, onClick: onFullscreenClick, children: jsxRuntime.jsx(ExitFullscreenIcon, {}) }) }));
+            return (jsxRuntime.jsx("div", { className: styles$7.bookEditorActionbar, children: jsxRuntime.jsx("button", { className: styles$7.button, onClick: onFullscreenClick, children: jsxRuntime.jsx(ExitFullscreenIcon, {}) }) }));
         }
-        return (jsxRuntime.jsxs("div", { className: styles$6.bookEditorActionbar, children: [actions.length >= 2 ? (jsxRuntime.jsx(Dropdown, { actions: actions })) : (actions.map(({ icon, name, onClick }) => (jsxRuntime.jsx("button", { className: styles$6.button, onClick: onClick, children: icon }, name)))), isAboutModalOpen && (jsxRuntime.jsx(Modal, { onClose: () => {
+        if (menuHoisting && !isFullscreen) {
+            return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: isAboutModalOpen && (jsxRuntime.jsx(Modal, { onClose: () => {
+                        setIsAboutModalOpen(false);
+                    }, children: jsxRuntime.jsx(AboutPromptbookInformation, {}) })) }));
+        }
+        return (jsxRuntime.jsxs("div", { className: styles$7.bookEditorActionbar, children: [actions.length >= 2 ? (jsxRuntime.jsx(Dropdown, { actions: actions })) : (actions.map(({ icon, name, onClick }) => (jsxRuntime.jsx("button", { className: styles$7.button, onClick: onClick, children: icon }, name)))), isAboutModalOpen && (jsxRuntime.jsx(Modal, { onClose: () => {
                         setIsAboutModalOpen(false);
                     }, children: jsxRuntime.jsx(AboutPromptbookInformation, {}) }))] }));
     }
@@ -8080,6 +8374,7 @@
             const parameterRegex = /@([a-zA-Z0-9_á-žÁ-Žč-řČ-Řš-žŠ-Žа-яА-ЯёЁ]+)/;
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
             const bookRules = [
+                [/^---[-]*$/, ''],
                 [parameterRegex, 'parameter'],
                 [/\{[^}]+\}/, 'parameter'],
                 [commitmentRegex, 'commitment'],
@@ -8088,7 +8383,12 @@
             const tokenProvider = monaco.languages.setMonarchTokensProvider(BOOK_LANGUAGE_ID, {
                 ignoreCase: true,
                 tokenizer: {
-                    root: [[/^.*$/, 'title', '@body']],
+                    root: [
+                        [/^\s*$/, 'empty'],
+                        [/^-*$/, 'line'],
+                        [/^.*$/, 'title', '@body'],
+                        [commitmentRegex, 'commitment'],
+                    ],
                     body: bookRules,
                 },
             });
@@ -8306,7 +8606,7 @@
             event.preventDefault();
             setIsDragOver(false);
         }, []);
-        return (jsxRuntime.jsxs("div", { className: classNames(styles$6.bookEditorContainer, instanceClass), onDrop: handleDrop, onDragOver: handleDragOver, onDragEnter: handleDragEnter, onDragLeave: handleDragLeave, children: [(isUploadButtonShown ||
+        return (jsxRuntime.jsxs("div", { className: classNames(styles$7.bookEditorContainer, instanceClass), onDrop: handleDrop, onDragOver: handleDragOver, onDragEnter: handleDragEnter, onDragLeave: handleDragLeave, children: [(isUploadButtonShown ||
                     isCameraButtonShown ||
                     isDownloadButtonShown ||
                     isAboutButtonShown ||
@@ -8319,7 +8619,7 @@
                     onFullscreenClick,
                     onUploadDocument: handleUploadDocument,
                     onTakePhoto: handleTakePhoto,
-                    isFullscreen })), jsxRuntime.jsx("input", { type: "file", ref: fileUploadInputRef, style: { display: 'none' }, onChange: handleFileInputChange, multiple: true }), jsxRuntime.jsx("input", { type: "file", ref: cameraInputRef, style: { display: 'none' }, accept: "image/*", capture: "environment", onChange: handleFileInputChange }), isDragOver && jsxRuntime.jsx("div", { className: styles$6.dropOverlay, children: "Drop files to upload" }), jsxRuntime.jsxs("div", { style: {
+                    isFullscreen })), jsxRuntime.jsx("input", { type: "file", ref: fileUploadInputRef, style: { display: 'none' }, onChange: handleFileInputChange, multiple: true }), jsxRuntime.jsx("input", { type: "file", ref: cameraInputRef, style: { display: 'none' }, accept: "image/*", capture: "environment", onChange: handleFileInputChange }), isDragOver && jsxRuntime.jsx("div", { className: styles$7.dropOverlay, children: "Drop files to upload" }), jsxRuntime.jsxs("div", { style: {
                         position: 'relative',
                         flex: 1,
                         height: '100%',
@@ -8384,7 +8684,7 @@
                                     arrowSize: 0,
                                     useShadows: false,
                                 },
-                            }, loading: jsxRuntime.jsx("div", { className: styles$6.loading, children: "\uD83D\uDCD6" }) })] })] }));
+                            }, loading: jsxRuntime.jsx("div", { className: styles$7.loading, children: "\uD83D\uDCD6" }) })] })] }));
     }
 
     /**
@@ -8406,7 +8706,7 @@
         const handleFullscreenToggle = () => {
             setIsFullscreen(!isFullscreen);
         };
-        const editorContent = (jsxRuntime.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 = (jsxRuntime.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 || {}),
@@ -8532,6 +8832,52 @@
      */
     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
      *
@@ -8734,7 +9080,7 @@
     const ResetIcon = () => (jsxRuntime.jsx("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "currentColor", children: jsxRuntime.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`
      */
@@ -9014,15 +9360,15 @@
             ASSISTANT: '#ffb300',
             SYSTEM: '#888',
         };
-        const bgColor = participantColors[String(message.from)] || '#2b7cff';
+        const bgColor = participantColors[String(message.sender)] || '#2b7cff';
         const textColor = getTextColor(bgColor);
         return spaceTrim__default["default"](`
                             <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>
@@ -9068,7 +9414,7 @@
         getContent: ({ messages }) => spaceTrim$1.spaceTrim(`
             ${messages
         .map((message) => spaceTrim$1.spaceTrim(`
-                        **${message.from}:**
+                        **${message.sender}:**
 
                         > ${message.content.replace(/\n/g, '\n> ')}
                     `))
@@ -9258,8 +9604,8 @@
      *
      * @private internal subcomponent of `<Chat>` component
      */
-    const ChatMessageItem = react.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 = react.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] = react.useState(false);
         const [avatarTooltipPosition, setAvatarTooltipPosition] = react.useState(null);
         const hoverTimeoutRef = react.useRef(null);
@@ -9350,9 +9696,14 @@
                 console.info('participant avatarSrc', avatarSrc);
                 console.info('participant color', { color, colorOfText });
                 console.groupEnd();
-            }, children: [avatarSrc && (jsxRuntime.jsxs("div", { ref: avatarRef, className: chatStyles.avatar, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, onClick: showTooltip, children: [jsxRuntime.jsx("img", { width: AVATAR_SIZE, src: avatarSrc, alt: `Avatar of ${message.from.toString().toLocaleLowerCase()}`, style: {
+            }, children: [avatarSrc && (jsxRuntime.jsxs("div", { ref: avatarRef, className: chatStyles.avatar, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, onClick: showTooltip, children: [jsxRuntime.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 && (jsxRuntime.jsx(AvatarProfileTooltip, { ref: tooltipRef, agentSource: participant.agentSource, position: avatarTooltipPosition }))] })), jsxRuntime.jsxs("div", { className: chatStyles.messageText, style: {
                         '--message-bg-color': color.toHex(),
                         '--message-text-color': colorOfText.toHex(),
@@ -9401,7 +9752,7 @@
                                                 ? ' ' + chatStyles.copiedTooltipLeft
                                                 : tooltipAlign === 'right'
                                                     ? ' ' + chatStyles.copiedTooltipRight
-                                                    : ''), children: "Copied!" }))] }) })), message.isVoiceCall && (jsxRuntime.jsx("div", { className: chatStyles.voiceCallIndicator, children: jsxRuntime.jsx("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "currentColor", children: jsxRuntime.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 ? (jsxRuntime.jsx(jsxRuntime.Fragment, {})) : (jsxRuntime.jsx("div", { ref: contentWithoutButtonsRef, children: jsxRuntime.jsx(MarkdownContent, { content: contentWithoutButtons }) })), !message.isComplete && jsxRuntime.jsx("span", { className: chatStyles.NonCompleteMessageFiller, children: '_'.repeat(70) }), shouldShowButtons && (jsxRuntime.jsx("div", { className: chatStyles.messageButtons, children: buttons.map((button, buttonIndex) => (jsxRuntime.jsx("button", { className: chatStyles.messageButton, onClick: (event) => {
+                                                    : ''), children: "Copied!" }))] }) })), message.isVoiceCall && (jsxRuntime.jsx("div", { className: chatStyles.voiceCallIndicator, children: jsxRuntime.jsx("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "currentColor", children: jsxRuntime.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 ? (jsxRuntime.jsx(jsxRuntime.Fragment, {})) : (jsxRuntime.jsx("div", { ref: contentWithoutButtonsRef, children: jsxRuntime.jsx(MarkdownContent, { content: contentWithoutButtons, onCreateAgent: onCreateAgent }) })), !message.isComplete && jsxRuntime.jsx("span", { className: chatStyles.NonCompleteMessageFiller, children: '_'.repeat(70) }), shouldShowButtons && (jsxRuntime.jsx("div", { className: chatStyles.messageButtons, children: buttons.map((button, buttonIndex) => (jsxRuntime.jsx("button", { className: chatStyles.messageButton, onClick: (event) => {
                                     event.stopPropagation();
                                     if (onMessage) {
                                         onMessage(button.message);
@@ -9484,7 +9835,7 @@
         // 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 = react.useMemo(() => Color.from(buttonColorRaw || '#0066cc'), [buttonColorRaw]);
         // Use the auto-scroll hook
         const { isAutoScrolling, chatMessagesRef, handleScroll, handleMessagesChange, scrollToBottom, isMobile: isMobileFromHook, } = useChatAutoScroll();
@@ -9699,7 +10050,7 @@
             }
         }, [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;
@@ -9776,11 +10127,11 @@
                                     }
                                     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 (jsxRuntime.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 (jsxRuntime.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));
                                     }), jsxRuntime.jsx("div", { 
                                         // Note: Extra space at bottom for input area
                                         style: { height: 100 } })] }), onMessage && (jsxRuntime.jsxs("div", { className: classNames(chatStyles.chatInput, useChatCssClassName('chatInput'), isDragOver && chatStyles.dragOver), ...(onFileUpload
@@ -9868,13 +10219,13 @@
                                     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;
                                         }
                                     }
@@ -9901,7 +10252,9 @@
             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));
@@ -9924,7 +10277,7 @@
                 // Convert date strings back to Date objects
                 return serializableMessages.map((message) => ({
                     ...message,
-                    date: new Date(message.date),
+                    createdAt: new Date(message.createdAt),
                 }));
             }
             catch (error) {
@@ -9977,7 +10330,7 @@
         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 = react.useCallback(() => (initialMessages ? [...initialMessages] : []), [initialMessages]);
+        const buildInitialMessages = react.useCallback(() => initialMessages ? ([...initialMessages]) : ([]), [initialMessages]);
         const [messages, setMessages] = react.useState(() => buildInitialMessages());
         const [tasksProgress, setTasksProgress] = react.useState([]);
         const [isVoiceCalling, setIsVoiceCalling] = react.useState(false);
@@ -10070,17 +10423,19 @@
                 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,
@@ -10177,9 +10532,10 @@
             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,
             };
@@ -10191,9 +10547,10 @@
             }
             // 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,
             };
@@ -10224,9 +10581,10 @@
                 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,
                         };
@@ -10247,9 +10605,10 @@
                 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,
                 };
@@ -10268,9 +10627,10 @@
                 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,
                 };
@@ -10337,7 +10697,8 @@
         return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.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__default["default"](`
                                 
@@ -10615,7 +10976,7 @@
                         if (delays.longPauseChance &&
                             Math.random() < delays.longPauseChance &&
                             i > 0 &&
-                            originalMessages[i].from !== originalMessages[i - 1].from) {
+                            originalMessages[i].sender !== originalMessages[i - 1].sender) {
                             await waitasecond.forTime(getDelay(delays.longPauseDuration, 2000));
                             didLongPause = true;
                             if (isCancelled)
@@ -10636,9 +10997,10 @@
                     }
                     // 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,
@@ -10656,9 +11018,10 @@
                         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,
@@ -10676,9 +11039,10 @@
                     }
                     // 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,
@@ -10930,6 +11294,12 @@
         callEmbeddingModel(prompt) {
             return this.callCommonModel(prompt);
         }
+        /**
+         * Calls the best available embedding model
+         */
+        callImageGenerationModel(prompt) {
+            return this.callCommonModel(prompt);
+        }
         // <- Note: [🤖]
         /**
          * Calls the best available model
@@ -10956,6 +11326,11 @@
                                 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}`);
@@ -12130,6 +12505,15 @@
                 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;
     }
@@ -12138,7 +12522,7 @@
      * 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
      */
 
     /**
@@ -13673,8 +14057,9 @@
                                         $ongoingTaskResult.$resultString = $ongoingTaskResult.$completionResult.content;
                                         break variant;
                                     case 'EMBEDDING':
+                                    case 'IMAGE_GENERATION':
                                         throw new PipelineExecutionError(spaceTrim$1.spaceTrim((block) => `
-                                                Embedding model can not be used in pipeline
+                                                ${modelRequirements.modelVariant} model can not be used in pipeline
 
                                                 This should be catched during parsing
 
@@ -14990,7 +15375,12 @@
             };
         }
         // 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 {
@@ -16005,7 +16395,7 @@
             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,
                 }));
             }
@@ -16418,13 +16808,14 @@
             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
@@ -17443,6 +17834,11 @@
              * 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
              */
@@ -17452,11 +17848,12 @@
             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 };
             });
         }
@@ -17530,9 +17927,52 @@
                 ${block(result.content)}
 
             `);
+            // Extract knowledge
+            let knowledgeBlock = '';
+            try {
+                const extractionPrompt = {
+                    title: 'Knowledge Extraction',
+                    modelRequirements: {
+                        modelVariant: 'CHAT',
+                    },
+                    content: spaceTrim__default["default"]((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__default["default"](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__default["default"](currentSource) + '\n\n' + learningExample));
+            const newSource = padBook(validateBook(spaceTrim__default["default"](currentSource) + '\n\n' + learningExample + knowledgeBlock));
             // Update the source (which will trigger the subscription and update the underlying tools)
             this.agentSource.next(newSource);
             return result;
@@ -17806,7 +18246,8 @@
         // 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) {