@promptbook/components 0.101.0-11 → 0.101.0-13

package/esm/typings/src/_packages/types.index.d.ts

@@ -93,6 +93,7 @@ import type { LlmToolsOptions } from '../llm-providers/_common/register/LlmTools
 import type { CacheItem } from '../llm-providers/_common/utils/cache/CacheItem';
 import type { CacheLlmToolsOptions } from '../llm-providers/_common/utils/cache/CacheLlmToolsOptions';
 import type { LlmExecutionToolsWithTotalUsage } from '../llm-providers/_common/utils/count-total-usage/LlmExecutionToolsWithTotalUsage';
+import type { CreateAgentLlmExecutionToolsOptions } from '../llm-providers/agent/createAgentLlmExecutionTools';
 import type { AnthropicClaudeExecutionToolsOptions } from '../llm-providers/anthropic-claude/AnthropicClaudeExecutionToolsOptions';
 import type { AnthropicClaudeExecutionToolsNonProxiedOptions } from '../llm-providers/anthropic-claude/AnthropicClaudeExecutionToolsOptions';
 import type { AnthropicClaudeExecutionToolsProxiedOptions } from '../llm-providers/anthropic-claude/AnthropicClaudeExecutionToolsOptions';
@@ -418,6 +419,7 @@ export type { LlmToolsOptions };
 export type { CacheItem };
 export type { CacheLlmToolsOptions };
 export type { LlmExecutionToolsWithTotalUsage };
+export type { CreateAgentLlmExecutionToolsOptions };
 export type { AnthropicClaudeExecutionToolsOptions };
 export type { AnthropicClaudeExecutionToolsNonProxiedOptions };
 export type { AnthropicClaudeExecutionToolsProxiedOptions };

package/esm/typings/src/llm-providers/agent/AgentLlmExecutionTools.d.ts

@@ -0,0 +1,55 @@
+import type { Promisable } from 'type-fest';
+import type { string_book } from '../../book-2.0/agent-source/string_book';
+import type { ChatParticipant } from '../../book-components/Chat/types/ChatParticipant';
+import type { AvailableModel } from '../../execution/AvailableModel';
+import type { LlmExecutionTools } from '../../execution/LlmExecutionTools';
+import type { ChatPromptResult } from '../../execution/PromptResult';
+import type { Prompt } from '../../types/Prompt';
+import type { string_markdown, string_markdown_text, string_title } from '../../types/typeAliases';
+/**
+ * Execution Tools for calling LLM models with a predefined agent "soul"
+ * This wraps underlying LLM execution tools and applies agent-specific system prompts and requirements
+ *
+ * @public exported from `@promptbook/core`
+ */
+export declare class AgentLlmExecutionTools implements LlmExecutionTools {
+    private readonly llmTools;
+    private readonly agentSource;
+    /**
+     * Cached model requirements to avoid re-parsing the agent source
+     */
+    private _cachedModelRequirements;
+    /**
+     * Cached parsed agent information
+     */
+    private _cachedAgentInfo;
+    /**
+     * Creates new AgentLlmExecutionTools
+     *
+     * @param llmTools The underlying LLM execution tools to wrap
+     * @param agentSource The agent source string that defines the agent's behavior
+     */
+    constructor(llmTools: LlmExecutionTools, agentSource: string_book);
+    /**
+     * Get cached or parse agent information
+     */
+    private getAgentInfo;
+    /**
+     * Get cached or create agent model requirements
+     */
+    private getAgentModelRequirements;
+    get title(): string_title & string_markdown_text;
+    get description(): string_markdown;
+    get profile(): ChatParticipant | undefined;
+    checkConfiguration(): Promisable<void>;
+    listModels(): Promisable<ReadonlyArray<AvailableModel>>;
+    /**
+     * Calls the chat model with agent-specific system prompt and requirements
+     */
+    callChatModel(prompt: Prompt): Promise<ChatPromptResult>;
+}
+/**
+ * TODO: [🍚] Implement Destroyable pattern to free resources
+ * TODO: !!!! Pick the best model from available models
+ * TODO: !!!! adding parameter substitution support
+ */

package/esm/typings/src/llm-providers/agent/createAgentLlmExecutionTools.d.ts

@@ -0,0 +1,29 @@
+import type { string_book } from '../../book-2.0/agent-source/string_book';
+import type { LlmExecutionTools } from '../../execution/LlmExecutionTools';
+import { AgentLlmExecutionTools } from './AgentLlmExecutionTools';
+/**
+ * Options for creating AgentLlmExecutionTools
+ */
+export type CreateAgentLlmExecutionToolsOptions = {
+    /**
+     * The underlying LLM execution tools to wrap
+     */
+    llmTools: LlmExecutionTools;
+    /**
+     * The agent source string that defines the agent's behavior
+     */
+    agentSource: string_book;
+};
+/**
+ * Creates new AgentLlmExecutionTools that wrap underlying LLM tools with agent-specific behavior
+ *
+ * @public exported from `@promptbook/core`
+ */
+export declare const createAgentLlmExecutionTools: ((options: CreateAgentLlmExecutionToolsOptions) => AgentLlmExecutionTools) & {
+    packageName: string;
+    className: string;
+};
+/**
+ * TODO: [🧠] Consider adding validation for agent source format
+ * TODO: [🧠] Consider adding options for caching behavior
+ */

package/esm/typings/src/llm-providers/agent/playground/playground.d.ts

@@ -0,0 +1,8 @@
+#!/usr/bin/env ts-node
+export {};
+/**
+ * TODO: [🧠] Add more complex agent scenarios
+ * TODO: [🧠] Add parameter substitution demo
+ * TODO: [🧠] Add multi-turn conversation demo
+ * Note: [⚫] Code in this file should never be published in any package
+ */

package/esm/typings/src/llm-providers/agent/register-configuration.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Metadata for Agent LLM execution tools
+ *
+ * @public exported from `@promptbook/core`
+ */
+export declare const _AgentMetadata: import("../../utils/$Register").Registration;
+/**
+ * TODO: [🧠] Consider adding a special trust level for AgentLlmExecutionTools
+ * TODO: [🎶] Naming "constructor" vs "creator" vs "factory"
+ * Note: [💞] Ignore a discrepancy between file name and entity name
+ */

package/esm/typings/src/llm-providers/agent/register-constructor.d.ts

@@ -0,0 +1,13 @@
+import type { Registration } from '../../utils/$Register';
+/**
+ * Registration of Agent LLM provider
+ *
+ * Warning: This is not useful for the end user, it is just a side effect of the mechanism that handles all available LLM tools
+ *
+ * @public exported from `@promptbook/core`
+ */
+export declare const _AgentRegistration: Registration;
+/**
+ * TODO: [🎶] Naming "constructor" vs "creator" vs "factory"
+ * Note: [💞] Ignore a discrepancy between file name and entity name
+ */

package/esm/typings/src/version.d.ts

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

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@promptbook/components",
-    "version": "0.101.0-11",
+    "version": "0.101.0-13",
     "description": "Promptbook: Run AI apps in plain human language across multiple models and platforms",
     "private": false,
     "sideEffects": false,

package/umd/index.umd.js

@@ -22,7 +22,7 @@
      * @generated
      * @see https://github.com/webgptorg/promptbook
      */
-    const PROMPTBOOK_ENGINE_VERSION = '0.101.0-11';
+    const PROMPTBOOK_ENGINE_VERSION = '0.101.0-13';
     /**
      * TODO: string_promptbook_version should be constrained to the all versions of Promptbook engine
      * Note: [💞] Ignore a discrepancy between file name and entity name
@@ -4128,49 +4128,8 @@
      * Note: [💞] Ignore a discrepancy between file name and entity name
      */
 
-    // Critical inline styles to prevent layout shift during CSS module loading
-    const CRITICAL_STYLES = {
-        chat: {
-            width: '100%',
-            height: '100%',
-            display: 'flex',
-            flexDirection: 'column',
-        },
-        chatMainFlow: {
-            width: '100%',
-            height: '100%',
-            maxWidth: '100vw',
-            display: 'grid',
-            gridTemplate: `
-            'header' min-content
-            'messages' 1fr
-            'input' min-content
-            / 1fr`,
-        },
-        chatMessages: {
-            gridArea: 'messages',
-            width: '100%',
-            height: '100%',
-            padding: '24px 20px 16px',
-            overflowY: 'auto',
-            overflowX: 'hidden',
-        },
-        chatInput: {
-            gridArea: 'input',
-            width: '100%',
-            padding: '20px',
-            display: 'flex',
-            alignItems: 'center',
-            gap: '12px',
-        },
-        chatBar: {
-            gridArea: 'header',
-            width: '100%',
-            padding: '16px 20px',
-            textAlign: 'center',
-        },
-    };
-    // <- TODO: [💩] !!!! "[✨🦬] Fix `<Chat/>` loading"
+    // [🚉] Avatar dimensions constant to prevent layout jumps and maintain DRY principle
+    const AVATAR_SIZE = 40;
     /**
      * Renders a chat with messages and input for new messages
      *
@@ -4351,10 +4310,7 @@
                 return { ...message, content: humanizeAiText(message.content) };
             });
         }, [messages, isAiTextHumanized]);
-        return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [ratingConfirmation && jsxRuntime.jsx("div", { className: styles$1.ratingConfirmation, children: ratingConfirmation }), jsxRuntime.jsx("div", { className: classNames(className, styles$1.Chat, useChatCssClassName('Chat')), style: {
-                        ...CRITICAL_STYLES.chat,
-                        ...style,
-                    }, children: jsxRuntime.jsxs("div", { className: classNames(className, styles$1.chatMainFlow, useChatCssClassName('chatMainFlow')), style: CRITICAL_STYLES.chatMainFlow, children: [children && (jsxRuntime.jsx("div", { className: classNames(styles$1.chatBar, chatBarCssClassName), style: CRITICAL_STYLES.chatBar, children: children })), !isAutoScrolling && (jsxRuntime.jsx("div", { className: styles$1.scrollToBottomContainer, children: jsxRuntime.jsx("button", { "data-button-type": "custom", className: classNames(styles$1.scrollToBottom, scrollToBottomCssClassName), onClick: () => {
+        return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [ratingConfirmation && jsxRuntime.jsx("div", { className: styles$1.ratingConfirmation, children: ratingConfirmation }), jsxRuntime.jsx("div", { className: classNames(className, styles$1.Chat, useChatCssClassName('Chat')), style, children: jsxRuntime.jsxs("div", { className: classNames(className, styles$1.chatMainFlow, useChatCssClassName('chatMainFlow')), children: [children && jsxRuntime.jsx("div", { className: classNames(styles$1.chatBar, chatBarCssClassName), children: children }), !isAutoScrolling && (jsxRuntime.jsx("div", { className: styles$1.scrollToBottomContainer, children: jsxRuntime.jsx("button", { "data-button-type": "custom", className: classNames(styles$1.scrollToBottom, scrollToBottomCssClassName), onClick: () => {
                                         const chatMessagesElement = chatMessagesRef.current;
                                         if (chatMessagesElement === null) {
                                             return;
@@ -4376,7 +4332,7 @@
                                                 return;
                                             }
                                             onReset();
-                                        }, children: [jsxRuntime.jsx(ResetIcon, {}), jsxRuntime.jsx("span", { className: styles$1.resetButtonText, children: "New chat" })] })), onUseTemplate && (jsxRuntime.jsxs("button", { className: classNames(styles$1.useTemplateButton), onClick: onUseTemplate, children: [jsxRuntime.jsx("span", { className: styles$1.resetButtonText, children: "Use this template" }), jsxRuntime.jsx(TemplateIcon, { size: 16 })] }))] }), jsxRuntime.jsx("div", { className: classNames(styles$1.chatMessages, useChatCssClassName('chatMessages')), style: CRITICAL_STYLES.chatMessages, ref: (chatMessagesElement) => {
+                                        }, children: [jsxRuntime.jsx(ResetIcon, {}), jsxRuntime.jsx("span", { className: styles$1.resetButtonText, children: "New chat" })] })), onUseTemplate && (jsxRuntime.jsxs("button", { className: classNames(styles$1.useTemplateButton), onClick: onUseTemplate, children: [jsxRuntime.jsx("span", { className: styles$1.resetButtonText, children: "Use this template" }), jsxRuntime.jsx(TemplateIcon, { size: 16 })] }))] }), jsxRuntime.jsx("div", { className: classNames(styles$1.chatMessages, useChatCssClassName('chatMessages')), ref: (chatMessagesElement) => {
                                     chatMessagesRef.current = chatMessagesElement;
                                     if (chatMessagesElement === null) {
                                         return;
@@ -4419,8 +4375,14 @@
                                             console.info('participant avatarSrc', avatarSrc);
                                             console.info('participant color', { color, colorOfText });
                                             console.groupEnd();
-                                        }, children: [avatarSrc && (jsxRuntime.jsx("div", { className: styles$1.avatar, children: jsxRuntime.jsx("img", { width: 256, height: 256, src: avatarSrc, alt: `Avatar of ${message.from.toLocaleLowerCase()}`, style: {
+                                        }, children: [avatarSrc && (jsxRuntime.jsx("div", { className: styles$1.avatar, children: jsxRuntime.jsx("img", { width: AVATAR_SIZE, height: AVATAR_SIZE, src: avatarSrc, alt: `Avatar of ${message.from.toLocaleLowerCase()}`, style: {
                                                         backgroundColor: color.toHex(),
+                                                        width: AVATAR_SIZE,
+                                                        height: AVATAR_SIZE,
+                                                        borderRadius: '50%',
+                                                        objectFit: 'cover',
+                                                        border: '2px solid rgba(125, 125, 125, 0.1)',
+                                                        flexShrink: 0,
                                                     } }) })), jsxRuntime.jsxs("div", { className: styles$1.messageText, style: {
                                                     backgroundColor: color.toHex(),
                                                     color: colorOfText.toHex(),
@@ -4449,7 +4411,7 @@
                                                                         : '#666',
                                                                 transition: 'color 0.2s',
                                                             }, children: "\u2B50" })) }))] })] }, i));
-                                }) }), onMessage && (jsxRuntime.jsxs("div", { className: classNames(styles$1.chatInput, useChatCssClassName('chatInput')), style: CRITICAL_STYLES.chatInput, children: [jsxRuntime.jsx("textarea", { ref: (element) => {
+                                }) }), onMessage && (jsxRuntime.jsxs("div", { className: classNames(styles$1.chatInput, useChatCssClassName('chatInput')), children: [jsxRuntime.jsx("textarea", { ref: (element) => {
                                             textareaRef.current = element;
                                         }, style: {
                                             height: Math.max(countLines(((_b = textareaRef.current) === null || _b === void 0 ? void 0 : _b.value) || defaultMessage || ''), (((_c = textareaRef.current) === null || _c === void 0 ? void 0 : _c.value) || defaultMessage || '').split('\n').length, 3) *