@promptbook/components 0.103.0-67 → 0.103.0-68

package/umd/index.umd.js

@@ -31,7 +31,7 @@
      * @generated
      * @see https://github.com/webgptorg/promptbook
      */
-    const PROMPTBOOK_ENGINE_VERSION = '0.103.0-67';
+    const PROMPTBOOK_ENGINE_VERSION = '0.103.0-68';
     /**
      * TODO: string_promptbook_version should be constrained to the all versions of Promptbook engine
      * Note: [💞] Ignore a discrepancy between file name and entity name
@@ -7780,6 +7780,24 @@
         return (jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: size || 24, height: size || 24, viewBox: "0 0 24 24", fill: "currentColor", ...rest, children: jsxRuntime.jsx("path", { d: "M11 7h2v2h-2zm0 4h2v6h-2zm1-9C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z" }) }));
     }
 
+    /**
+     * @@@
+     *
+     * @public exported from `@promptbook/components`
+     */
+    function AttachmentIcon({ size = 24, color = 'currentColor' }) {
+        return (jsxRuntime.jsx("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: jsxRuntime.jsx("path", { d: "M21.44 11.05l-9.19 9.19a6 6 0 01-8.49-8.49l9.19-9.19a4 4 0 015.66 5.66L9.64 16.2a2 2 0 01-2.83-2.83l8.49-8.49", stroke: color, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }));
+    }
+
+    /**
+     * @@@
+     *
+     * @public exported from `@promptbook/components`
+     */
+    function CameraIcon({ size = 24, color = 'currentColor' }) {
+        return (jsxRuntime.jsxs("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [jsxRuntime.jsx("path", { d: "M23 19C23 19.5304 22.7893 20.0391 22.4142 20.4142C22.0391 20.7893 21.5304 21 21 21H3C2.46957 21 1.96086 20.7893 1.58579 20.4142C1.21071 20.0391 1 19.5304 1 19V8C1 7.46957 1.21071 6.96086 1.58579 6.58579C1.96086 6.21071 2.46957 6 3 6H7L9 3H15L17 6H21C21.5304 6 22.0391 6.21071 22.4142 6.58579C22.7893 6.96086 23 7.46957 23 8V19Z", stroke: color, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }), jsxRuntime.jsx("path", { d: "M12 17C14.2091 17 16 15.2091 16 13C16 10.7909 14.2091 9 12 9C9.79086 9 8 10.7909 8 13C8 15.2091 9.79086 17 12 17Z", stroke: color, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" })] }));
+    }
+
     /**
      * @@@
      *
@@ -7905,13 +7923,27 @@
      * @private Internal component used by `BookEditor`
      */
     function BookEditorActionbar(props) {
-        const { value, isDownloadButtonShown, isAboutButtonShown, isFullscreenButtonShown, onFullscreenClick, isFullscreen, } = 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);
             /* 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, {}),
@@ -7953,7 +7985,7 @@
      * @private Internal component used by `BookEditor`
      */
     function BookEditorMonaco(props) {
-        const { value, onChange, isReadonly, translations, onFileUpload, isDownloadButtonShown, isAboutButtonShown = true, isFullscreenButtonShown = true, onFullscreenClick, isFullscreen, zoom = 1,
+        const { value, onChange, isReadonly, translations, onFileUpload, isUploadButtonShown, isCameraButtonShown, isDownloadButtonShown, isAboutButtonShown = true, isFullscreenButtonShown = true, onFullscreenClick, isFullscreen, zoom = 1,
         // [🚱]> sync,
          } = props;
         const zoomLevel = zoom;
@@ -7973,6 +8005,8 @@
         const instanceClass = `book-editor-instance-${instanceIdRef.current}`;
         // [1] Track touch start position to differentiate tap from drag
         const touchStartRef = react.useRef(null);
+        const fileUploadInputRef = react.useRef(null);
+        const cameraInputRef = react.useRef(null);
         /*
         Note+TODO: [🚱] Yjs logic is commented out because it causes errors in the build of Next.js projects:
                  > ▲ Next.js 15.4.5
@@ -8196,12 +8230,9 @@
                 changeListener.dispose();
             };
         }, [editor, monaco]);
-        const handleDrop = react.useCallback(async (event) => {
-            event.preventDefault();
-            setIsDragOver(false);
+        const handleFiles = react.useCallback(async (files) => {
             if (!onFileUpload)
                 return;
-            const files = Array.from(event.dataTransfer.files);
             if (files.length === 0)
                 return;
             // [1] Inject placeholders
@@ -8241,6 +8272,28 @@
                 console.error('File upload failed:', error);
             }
         }, [onFileUpload, value, onChange, editor]);
+        const handleDrop = react.useCallback(async (event) => {
+            event.preventDefault();
+            setIsDragOver(false);
+            const files = Array.from(event.dataTransfer.files);
+            await handleFiles(files);
+        }, [handleFiles]);
+        const handleUploadDocument = react.useCallback(() => {
+            if (fileUploadInputRef.current) {
+                fileUploadInputRef.current.click();
+            }
+        }, []);
+        const handleTakePhoto = react.useCallback(() => {
+            if (cameraInputRef.current) {
+                cameraInputRef.current.click();
+            }
+        }, []);
+        const handleFileInputChange = react.useCallback((event) => {
+            const files = Array.from(event.target.files || []);
+            handleFiles(files);
+            // Reset the input value so the same file can be selected again
+            event.target.value = '';
+        }, [handleFiles]);
         const handleDragOver = react.useCallback((event) => {
             event.preventDefault();
             setIsDragOver(true);
@@ -8253,12 +8306,20 @@
             event.preventDefault();
             setIsDragOver(false);
         }, []);
-        return (jsxRuntime.jsxs("div", { className: classNames(styles$6.bookEditorContainer, instanceClass), onDrop: handleDrop, onDragOver: handleDragOver, onDragEnter: handleDragEnter, onDragLeave: handleDragLeave, children: [(isDownloadButtonShown || isAboutButtonShown || isFullscreenButtonShown) && (jsxRuntime.jsx(BookEditorActionbar, { value,
+        return (jsxRuntime.jsxs("div", { className: classNames(styles$6.bookEditorContainer, instanceClass), onDrop: handleDrop, onDragOver: handleDragOver, onDragEnter: handleDragEnter, onDragLeave: handleDragLeave, children: [(isUploadButtonShown ||
+                    isCameraButtonShown ||
+                    isDownloadButtonShown ||
+                    isAboutButtonShown ||
+                    isFullscreenButtonShown) && (jsxRuntime.jsx(BookEditorActionbar, { value,
+                    isUploadButtonShown,
+                    isCameraButtonShown: isCameraButtonShown !== null && isCameraButtonShown !== void 0 ? isCameraButtonShown : isTouchDevice,
                     isDownloadButtonShown,
                     isAboutButtonShown,
                     isFullscreenButtonShown,
                     onFullscreenClick,
-                    isFullscreen })), isDragOver && jsxRuntime.jsx("div", { className: styles$6.dropOverlay, children: "Drop files to upload" }), jsxRuntime.jsxs("div", { style: {
+                    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: {
                         position: 'relative',
                         flex: 1,
                         height: '100%',
@@ -8340,7 +8401,7 @@
      * @public exported from `@promptbook/components`
      */
     function BookEditor(props) {
-        const { agentSource, className, style, zoom = 1, value, onChange, onFileUpload, isVerbose = DEFAULT_IS_VERBOSE, isBorderRadiusDisabled = false, isReadonly = false, translations, isDownloadButtonShown = true, isAboutButtonShown = true, isFullscreenButtonShown = true, sync, } = props;
+        const { agentSource, className, style, zoom = 1, value, onChange, onFileUpload, isVerbose = DEFAULT_IS_VERBOSE, isBorderRadiusDisabled = false, isReadonly = false, translations, isUploadButtonShown = true, isCameraButtonShown, isDownloadButtonShown = true, isAboutButtonShown = true, isFullscreenButtonShown = true, sync, } = props;
         const [isFullscreen, setIsFullscreen] = react.useState(false);
         const handleFullscreenToggle = () => {
             setIsFullscreen(!isFullscreen);
@@ -8356,7 +8417,7 @@
                                 ? `${props.height}px`
                                 : props.height || `${DEFAULT_BOOK_EDITOR_HEIGHT}px`,
                         }),
-                }, children: jsxRuntime.jsx(BookEditorMonaco, { value: agentSource || value, onChange: onChange, onFileUpload: onFileUpload, isVerbose: isVerbose, isBorderRadiusDisabled: isBorderRadiusDisabled, isReadonly: isReadonly, translations: translations, isDownloadButtonShown: isDownloadButtonShown, isAboutButtonShown: isAboutButtonShown, isFullscreenButtonShown: isFullscreenButtonShown, onFullscreenClick: handleFullscreenToggle, isFullscreen: isFullscreen, sync: sync, zoom: zoom }) }));
+                }, children: jsxRuntime.jsx(BookEditorMonaco, { value: agentSource || value, onChange: onChange, onFileUpload: onFileUpload, isVerbose: isVerbose, isBorderRadiusDisabled: isBorderRadiusDisabled, isReadonly: isReadonly, translations: translations, isUploadButtonShown: isUploadButtonShown, isCameraButtonShown: isCameraButtonShown, isDownloadButtonShown: isDownloadButtonShown, isAboutButtonShown: isAboutButtonShown, isFullscreenButtonShown: isFullscreenButtonShown, onFullscreenClick: handleFullscreenToggle, isFullscreen: isFullscreen, sync: sync, zoom: zoom }) }));
         return isFullscreen && typeof document !== 'undefined' ? reactDom.createPortal(editorContent, document.body) : editorContent;
     }
 
@@ -8649,15 +8710,6 @@
      */
     const ArrowIcon = ({ direction, size }) => (jsxRuntime.jsx("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "currentColor", children: jsxRuntime.jsx("path", { d: direction === 'DOWN' ? 'M7 10l5 5 5-5z' : 'M7 14l5-5 5 5z' }) }));
 
-    /**
-     * @@@
-     *
-     * @public exported from `@promptbook/components`
-     */
-    function AttachmentIcon({ size = 24, color = 'currentColor' }) {
-        return (jsxRuntime.jsx("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: jsxRuntime.jsx("path", { d: "M21.44 11.05l-9.19 9.19a6 6 0 01-8.49-8.49l9.19-9.19a4 4 0 015.66 5.66L9.64 16.2a2 2 0 01-2.83-2.83l8.49-8.49", stroke: color, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }));
-    }
-
     /**
      * Renders an icon that represents the close action
      *
@@ -15265,12 +15317,18 @@
                 },
             },
             /**/
-            /*/
-              {
-                  modelTitle: 'dall-e-3',
-                  modelName: 'dall-e-3',
-              },
-              /**/
+            /**/
+            {
+                modelVariant: 'IMAGE_GENERATION',
+                modelTitle: 'dall-e-3',
+                modelName: 'dall-e-3',
+                modelDescription: 'DALL·E 3 is the latest version of the DALL·E art generation model. It understands significantly more nuance and detail than our previous systems, allowing you to easily translate your ideas into exceptionally accurate images.',
+                pricing: {
+                    prompt: 0,
+                    output: 0.04,
+                },
+            },
+            /**/
             /*/
               {
                   modelTitle: 'whisper-1',
@@ -15289,12 +15347,18 @@
                 },
             },
             /**/
-            /*/
-          {
-              modelTitle: 'dall-e-2',
-              modelName: 'dall-e-2',
-          },
-          /**/
+            /**/
+            {
+                modelVariant: 'IMAGE_GENERATION',
+                modelTitle: 'dall-e-2',
+                modelName: 'dall-e-2',
+                modelDescription: 'DALL·E 2 is an AI system that can create realistic images and art from a description in natural language.',
+                pricing: {
+                    prompt: 0,
+                    output: 0.02,
+                },
+            },
+            /**/
             /**/
             {
                 modelVariant: 'CHAT',
@@ -16328,6 +16392,151 @@
                 return this.callEmbeddingModelWithRetry(prompt, modifiedModelRequirements, attemptStack, retriedUnsupportedParameters);
             }
         }
+        /**
+         * Calls OpenAI compatible API to use a image generation model
+         */
+        async callImageGenerationModel(prompt) {
+            // Deep clone prompt and modelRequirements to avoid mutation across calls
+            const clonedPrompt = JSON.parse(JSON.stringify(prompt));
+            const retriedUnsupportedParameters = new Set();
+            return this.callImageGenerationModelWithRetry(clonedPrompt, clonedPrompt.modelRequirements, [], retriedUnsupportedParameters);
+        }
+        /**
+         * Internal method that handles parameter retry for image generation model calls
+         */
+        async callImageGenerationModelWithRetry(prompt, currentModelRequirements, attemptStack = [], retriedUnsupportedParameters = new Set()) {
+            var _a, _b;
+            if (this.options.isVerbose) {
+                console.info(`🎨 ${this.title} callImageGenerationModel call`, { prompt, currentModelRequirements });
+            }
+            const { content, parameters } = prompt;
+            const client = await this.getClient();
+            // TODO: [☂] Use here more modelRequirements
+            if (currentModelRequirements.modelVariant !== 'IMAGE_GENERATION') {
+                throw new PipelineExecutionError('Use callImageGenerationModel only for IMAGE_GENERATION variant');
+            }
+            const modelName = currentModelRequirements.modelName || this.getDefaultImageGenerationModel().modelName;
+            const modelSettings = {
+                model: modelName,
+                // size: currentModelRequirements.size,
+                // quality: currentModelRequirements.quality,
+                // style: currentModelRequirements.style,
+            };
+            const rawPromptContent = templateParameters(content, { ...parameters, modelName });
+            const rawRequest = {
+                ...modelSettings,
+                prompt: rawPromptContent,
+                user: (_a = this.options.userId) === null || _a === void 0 ? void 0 : _a.toString(),
+                response_format: 'url', // TODO: [🧠] Maybe allow b64_json
+            };
+            const start = $getCurrentDate();
+            if (this.options.isVerbose) {
+                console.info(colors__default["default"].bgWhite('rawRequest'), JSON.stringify(rawRequest, null, 4));
+            }
+            try {
+                const rawResponse = await this.limiter
+                    .schedule(() => this.makeRequestWithNetworkRetry(() => client.images.generate(rawRequest)))
+                    .catch((error) => {
+                    assertsError(error);
+                    if (this.options.isVerbose) {
+                        console.info(colors__default["default"].bgRed('error'), error);
+                    }
+                    throw error;
+                });
+                if (this.options.isVerbose) {
+                    console.info(colors__default["default"].bgWhite('rawResponse'), JSON.stringify(rawResponse, null, 4));
+                }
+                const complete = $getCurrentDate();
+                if (!rawResponse.data[0]) {
+                    throw new PipelineExecutionError(`No choises from ${this.title}`);
+                }
+                if (rawResponse.data.length > 1) {
+                    throw new PipelineExecutionError(`More than one choise from ${this.title}`);
+                }
+                const resultContent = rawResponse.data[0].url;
+                const modelInfo = this.HARDCODED_MODELS.find((model) => model.modelName === modelName);
+                const price = ((_b = modelInfo === null || modelInfo === void 0 ? void 0 : modelInfo.pricing) === null || _b === void 0 ? void 0 : _b.output) ? uncertainNumber(modelInfo.pricing.output) : uncertainNumber();
+                return exportJson({
+                    name: 'promptResult',
+                    message: `Result of \`OpenAiCompatibleExecutionTools.callImageGenerationModel\``,
+                    order: [],
+                    value: {
+                        content: resultContent,
+                        modelName: modelName,
+                        timing: {
+                            start,
+                            complete,
+                        },
+                        usage: {
+                            price,
+                            input: {
+                                tokensCount: uncertainNumber(0),
+                                ...computeUsageCounts(rawPromptContent),
+                            },
+                            output: {
+                                tokensCount: uncertainNumber(0),
+                                ...computeUsageCounts(''),
+                            },
+                        },
+                        rawPromptContent,
+                        rawRequest,
+                        rawResponse,
+                    },
+                });
+            }
+            catch (error) {
+                assertsError(error);
+                if (!isUnsupportedParameterError(error)) {
+                    if (attemptStack.length > 0) {
+                        throw new PipelineExecutionError(`All attempts failed. Attempt history:\n` +
+                            attemptStack
+                                .map((a, i) => `  ${i + 1}. Model: ${a.modelName}` +
+                                (a.unsupportedParameter ? `, Stripped: ${a.unsupportedParameter}` : '') +
+                                `, Error: ${a.errorMessage}` +
+                                (a.stripped ? ' (stripped and retried)' : ''))
+                                .join('\n') +
+                            `\nFinal error: ${error.message}`);
+                    }
+                    throw error;
+                }
+                const unsupportedParameter = parseUnsupportedParameterError(error.message);
+                if (!unsupportedParameter) {
+                    if (this.options.isVerbose) {
+                        console.warn(colors__default["default"].bgYellow('Warning'), 'Could not parse unsupported parameter from error:', error.message);
+                    }
+                    throw error;
+                }
+                const retryKey = `${modelName}-${unsupportedParameter}`;
+                if (retriedUnsupportedParameters.has(retryKey)) {
+                    attemptStack.push({
+                        modelName,
+                        unsupportedParameter,
+                        errorMessage: error.message,
+                        stripped: true,
+                    });
+                    throw new PipelineExecutionError(`All attempts failed. Attempt history:\n` +
+                        attemptStack
+                            .map((a, i) => `  ${i + 1}. Model: ${a.modelName}` +
+                            (a.unsupportedParameter ? `, Stripped: ${a.unsupportedParameter}` : '') +
+                            `, Error: ${a.errorMessage}` +
+                            (a.stripped ? ' (stripped and retried)' : ''))
+                            .join('\n') +
+                        `\nFinal error: ${error.message}`);
+                }
+                retriedUnsupportedParameters.add(retryKey);
+                if (this.options.isVerbose) {
+                    console.warn(colors__default["default"].bgYellow('Warning'), `Removing unsupported parameter '${unsupportedParameter}' for model '${modelName}' and retrying request`);
+                }
+                attemptStack.push({
+                    modelName,
+                    unsupportedParameter,
+                    errorMessage: error.message,
+                    stripped: true,
+                });
+                const modifiedModelRequirements = removeUnsupportedModelRequirement(currentModelRequirements, unsupportedParameter);
+                return this.callImageGenerationModelWithRetry(prompt, modifiedModelRequirements, attemptStack, retriedUnsupportedParameters);
+            }
+        }
         // <- Note: [🤖] callXxxModel
         /**
          * Get the model that should be used as default
@@ -16497,6 +16706,12 @@
         getDefaultEmbeddingModel() {
             return this.getDefaultModel('text-embedding-3-large');
         }
+        /**
+         * Default model for image generation variant.
+         */
+        getDefaultImageGenerationModel() {
+            return this.getDefaultModel('dall-e-3');
+        }
     }
 
     /**
@@ -17915,6 +18130,7 @@
     exports.BookEditor = BookEditor;
     exports.BrandedQrCode = BrandedQrCode;
     exports.CHAT_SAVE_FORMATS = CHAT_SAVE_FORMATS;
+    exports.CameraIcon = CameraIcon;
     exports.Chat = Chat;
     exports.DEFAULT_BOOK_EDITOR_HEIGHT = DEFAULT_BOOK_EDITOR_HEIGHT;
     exports.FAST_FLOW = FAST_FLOW;