@midscene/visualizer 1.7.3 → 1.7.5-beta-20260418223706.0

package/dist/lib/component/universal-playground/index.js

@@ -178,7 +178,8 @@ function UniversalPlayground({ playgroundSDK, storage, contextProvider, config:
     ]);
     const configAlreadySet = Object.keys(config || {}).length >= 1;
     const runButtonEnabled = componentConfig.serverMode || !dryMode && !actionSpaceLoading && configAlreadySet;
-    const selectedType = external_antd_namespaceObject.Form.useWatch('type', form);
+    const watchedType = external_antd_namespaceObject.Form.useWatch('type', form);
+    const selectedType = watchedType || form.getFieldValue('type');
     const serviceMode = (0, external_react_namespaceObject.useMemo)(()=>{
         if (!playgroundSDK || 'function' != typeof playgroundSDK.getServiceMode) return 'Server';
         return playgroundSDK.getServiceMode();
@@ -189,6 +190,49 @@ function UniversalPlayground({ playgroundSDK, storage, contextProvider, config:
     const layout = componentConfig.layout || 'vertical';
     const showVersionInfo = false !== componentConfig.showVersionInfo;
     const deviceType = componentConfig.deviceType;
+    const collapsibleProgressGroup = true === componentConfig.collapsibleProgressGroup;
+    var _componentConfig_progressGroupLabel;
+    const progressGroupLabel = null != (_componentConfig_progressGroupLabel = componentConfig.progressGroupLabel) ? _componentConfig_progressGroupLabel : 'Execution Flow';
+    const [collapsedProgressGroups, setCollapsedProgressGroups] = (0, external_react_namespaceObject.useState)(()=>new Set());
+    const toggleProgressGroup = (0, external_react_namespaceObject.useCallback)((groupId)=>{
+        setCollapsedProgressGroups((prev)=>{
+            const next = new Set(prev);
+            if (next.has(groupId)) next.delete(groupId);
+            else next.add(groupId);
+            return next;
+        });
+    }, []);
+    const { firstInProgressGroup, visibleInfoList } = (0, external_react_namespaceObject.useMemo)(()=>{
+        const firstIds = new Set();
+        const visible = [];
+        let currentGroupFirstId = null;
+        for (const item of infoList)if ('progress' === item.type) {
+            if (null === currentGroupFirstId) {
+                currentGroupFirstId = item.id;
+                firstIds.add(item.id);
+                visible.push(item);
+                continue;
+            }
+            if (!collapsibleProgressGroup || !collapsedProgressGroups.has(currentGroupFirstId)) visible.push(item);
+        } else {
+            currentGroupFirstId = null;
+            visible.push(item);
+        }
+        return {
+            firstInProgressGroup: firstIds,
+            visibleInfoList: visible
+        };
+    }, [
+        collapsedProgressGroups,
+        collapsibleProgressGroup,
+        infoList
+    ]);
+    const latestProgressId = (0, external_react_namespaceObject.useMemo)(()=>{
+        for(let i = infoList.length - 1; i >= 0; i--)if ('progress' === infoList[i].type) return infoList[i].id;
+        return null;
+    }, [
+        infoList
+    ]);
     return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
         className: `playground-container ${layout}-mode ${className}`.trim(),
         children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_antd_namespaceObject.Form, {
@@ -207,7 +251,7 @@ function UniversalPlayground({ playgroundSDK, storage, contextProvider, config:
                 /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
                     className: "middle-dialog-area",
                     children: [
-                        infoList.length > 1 && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+                        false !== componentConfig.showClearButton && infoList.length > 1 && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
                             className: "clear-button-container",
                             children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_antd_namespaceObject.Button, {
                                 size: "small",
@@ -222,115 +266,130 @@ function UniversalPlayground({ playgroundSDK, storage, contextProvider, config:
                             className: "info-list-container",
                             children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_antd_namespaceObject.List, {
                                 itemLayout: "vertical",
-                                dataSource: infoList,
-                                renderItem: (item)=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_antd_namespaceObject.List.Item, {
+                                dataSource: visibleInfoList,
+                                renderItem: (item)=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_antd_namespaceObject.List.Item, {
                                         className: "list-item",
-                                        children: 'user' === item.type ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
-                                            className: "user-message-container",
-                                            children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
-                                                className: "user-message-bubble",
-                                                children: item.content
-                                            })
-                                        }) : 'progress' === item.type ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
-                                            children: (()=>{
-                                                var _parts_, _item_result, _item_result1, _item_result2;
-                                                const parts = item.content.split(' - ');
-                                                const action = null == (_parts_ = parts[0]) ? void 0 : _parts_.trim();
-                                                const description = parts.slice(1).join(' - ').trim();
-                                                const currentIndex = infoList.findIndex((listItem)=>listItem.id === item.id);
-                                                const laterProgressExists = infoList.slice(currentIndex + 1).some((listItem)=>'progress' === listItem.type);
-                                                const isLatestProgress = !laterProgressExists;
-                                                const shouldShowLoading = loading && isLatestProgress;
-                                                return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(jsx_runtime_namespaceObject.Fragment, {
-                                                    children: [
-                                                        action && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("span", {
-                                                            className: "progress-action-item",
-                                                            children: [
-                                                                action,
-                                                                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
-                                                                    className: `progress-status-icon ${shouldShowLoading ? 'loading' : (null == (_item_result = item.result) ? void 0 : _item_result.error) ? 'error' : 'completed'}`,
-                                                                    children: shouldShowLoading ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(icons_namespaceObject.LoadingOutlined, {
-                                                                        spin: true
-                                                                    }) : (null == (_item_result1 = item.result) ? void 0 : _item_result1.error) ? '✗' : '✓'
+                                        children: [
+                                            collapsibleProgressGroup && firstInProgressGroup.has(item.id) ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("button", {
+                                                type: "button",
+                                                className: `progress-group-toggle ${collapsedProgressGroups.has(item.id) ? 'is-collapsed' : 'is-expanded'}`,
+                                                "aria-expanded": !collapsedProgressGroups.has(item.id),
+                                                onClick: ()=>toggleProgressGroup(item.id),
+                                                children: [
+                                                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
+                                                        className: "progress-group-toggle-label",
+                                                        children: progressGroupLabel
+                                                    }),
+                                                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(icons_namespaceObject.UpOutlined, {
+                                                        className: "progress-group-toggle-chevron"
+                                                    })
+                                                ]
+                                            }) : null,
+                                            'user' === item.type ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+                                                className: "user-message-container",
+                                                children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+                                                    className: "user-message-bubble",
+                                                    children: item.content
+                                                })
+                                            }) : 'progress' === item.type ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+                                                children: (()=>{
+                                                    var _parts_, _item_result, _item_result1, _item_result2;
+                                                    const parts = item.content.split(' - ');
+                                                    const action = null == (_parts_ = parts[0]) ? void 0 : _parts_.trim();
+                                                    const description = parts.slice(1).join(' - ').trim();
+                                                    const isLatestProgress = item.id === latestProgressId;
+                                                    const shouldShowLoading = loading && isLatestProgress;
+                                                    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(jsx_runtime_namespaceObject.Fragment, {
+                                                        children: [
+                                                            action && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("span", {
+                                                                className: "progress-action-item",
+                                                                children: [
+                                                                    action,
+                                                                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
+                                                                        className: `progress-status-icon ${shouldShowLoading ? 'loading' : (null == (_item_result = item.result) ? void 0 : _item_result.error) ? 'error' : 'completed'}`,
+                                                                        children: shouldShowLoading ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(icons_namespaceObject.LoadingOutlined, {
+                                                                            spin: true
+                                                                        }) : (null == (_item_result1 = item.result) ? void 0 : _item_result1.error) ? '✗' : '✓'
+                                                                    })
+                                                                ]
+                                                            }),
+                                                            description && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+                                                                children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_shiny_text_index_js_default(), {
+                                                                    text: description,
+                                                                    className: "progress-description",
+                                                                    disabled: !shouldShowLoading
                                                                 })
-                                                            ]
-                                                        }),
-                                                        description && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
-                                                            children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_shiny_text_index_js_default(), {
-                                                                text: description,
-                                                                className: "progress-description",
-                                                                disabled: !shouldShowLoading
+                                                            }),
+                                                            (null == (_item_result2 = item.result) ? void 0 : _item_result2.error) && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(ErrorMessage, {
+                                                                error: item.result.error
                                                             })
-                                                        }),
-                                                        (null == (_item_result2 = item.result) ? void 0 : _item_result2.error) && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(ErrorMessage, {
-                                                            error: item.result.error
+                                                        ]
+                                                    });
+                                                })()
+                                            }) : 'separator' === item.type ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+                                                className: "new-conversation-separator",
+                                                children: [
+                                                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+                                                        className: "separator-line"
+                                                    }),
+                                                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+                                                        className: "separator-text-container",
+                                                        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(Text, {
+                                                            type: "secondary",
+                                                            className: "separator-text",
+                                                            children: item.content
                                                         })
-                                                    ]
-                                                });
-                                            })()
-                                        }) : 'separator' === item.type ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
-                                            className: "new-conversation-separator",
-                                            children: [
-                                                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
-                                                    className: "separator-line"
-                                                }),
-                                                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
-                                                    className: "separator-text-container",
-                                                    children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(Text, {
-                                                        type: "secondary",
-                                                        className: "separator-text",
-                                                        children: item.content
                                                     })
-                                                })
-                                            ]
-                                        }) : /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
-                                            className: "system-message-container",
-                                            children: [
-                                                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
-                                                    className: "system-message-header",
-                                                    children: [
-                                                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(icons_default(), {
-                                                            component: branding.icon || avatar_js_default(),
-                                                            style: {
-                                                                fontSize: 20
-                                                            }
-                                                        }),
-                                                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
-                                                            className: "system-message-title",
-                                                            children: branding.title || 'Playground'
-                                                        })
-                                                    ]
-                                                }),
-                                                (item.content || item.result) && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
-                                                    className: "system-message-content",
-                                                    children: 'result' === item.type ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_playground_result_index_js_namespaceObject.PlaygroundResultView, {
-                                                        result: item.result || null,
-                                                        loading: item.loading || false,
-                                                        serverValid: true,
-                                                        serviceMode: serviceMode,
-                                                        replayScriptsInfo: item.replayScriptsInfo || null,
-                                                        replayCounter: item.replayCounter || 0,
-                                                        loadingProgressText: item.loadingProgressText || '',
-                                                        verticalMode: item.verticalMode || false,
-                                                        fitMode: "width",
-                                                        actionType: item.actionType
-                                                    }) : /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(jsx_runtime_namespaceObject.Fragment, {
+                                                ]
+                                            }) : /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+                                                className: "system-message-container",
+                                                children: [
+                                                    false !== componentConfig.showSystemMessageHeader && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+                                                        className: "system-message-header",
                                                         children: [
-                                                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
-                                                                className: "system-message-text",
-                                                                children: item.content
+                                                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(icons_default(), {
+                                                                component: branding.icon || avatar_js_default(),
+                                                                style: {
+                                                                    fontSize: 20
+                                                                }
                                                             }),
-                                                            item.loading && item.loadingProgressText && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
-                                                                className: "loading-progress-text",
-                                                                children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
-                                                                    children: item.loadingProgressText
-                                                                })
+                                                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
+                                                                className: "system-message-title",
+                                                                children: branding.title || 'Playground'
                                                             })
                                                         ]
+                                                    }),
+                                                    (item.content || item.result) && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+                                                        className: "system-message-content",
+                                                        children: 'result' === item.type ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_playground_result_index_js_namespaceObject.PlaygroundResultView, {
+                                                            result: item.result || null,
+                                                            loading: item.loading || false,
+                                                            serverValid: true,
+                                                            serviceMode: serviceMode,
+                                                            replayScriptsInfo: item.replayScriptsInfo || null,
+                                                            replayCounter: item.replayCounter || 0,
+                                                            loadingProgressText: item.loadingProgressText || '',
+                                                            verticalMode: item.verticalMode || false,
+                                                            fitMode: "width",
+                                                            actionType: item.actionType
+                                                        }) : /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(jsx_runtime_namespaceObject.Fragment, {
+                                                            children: [
+                                                                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+                                                                    className: "system-message-text",
+                                                                    children: item.content
+                                                                }),
+                                                                item.loading && item.loadingProgressText && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+                                                                    className: "loading-progress-text",
+                                                                    children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
+                                                                        children: item.loadingProgressText
+                                                                    })
+                                                                })
+                                                            ]
+                                                        })
                                                     })
-                                                })
-                                            ]
-                                        })
+                                                ]
+                                            })
+                                        ]
                                     }, item.id)
                             })
                         }),
@@ -359,6 +418,7 @@ function UniversalPlayground({ playgroundSDK, storage, contextProvider, config:
                             onRun: handleFormRun,
                             onStop: handleStop,
                             actionSpace: actionSpace,
+                            chrome: componentConfig.promptInputChrome,
                             deviceType: deviceType
                         })
                     ]

package/dist/lib/utils/action-label.js

@@ -0,0 +1,51 @@
+"use strict";
+var __webpack_require__ = {};
+(()=>{
+    __webpack_require__.d = (exports1, definition)=>{
+        for(var key in definition)if (__webpack_require__.o(definition, key) && !__webpack_require__.o(exports1, key)) Object.defineProperty(exports1, key, {
+            enumerable: true,
+            get: definition[key]
+        });
+    };
+})();
+(()=>{
+    __webpack_require__.o = (obj, prop)=>Object.prototype.hasOwnProperty.call(obj, prop);
+})();
+(()=>{
+    __webpack_require__.r = (exports1)=>{
+        if ('undefined' != typeof Symbol && Symbol.toStringTag) Object.defineProperty(exports1, Symbol.toStringTag, {
+            value: 'Module'
+        });
+        Object.defineProperty(exports1, '__esModule', {
+            value: true
+        });
+    };
+})();
+var __webpack_exports__ = {};
+__webpack_require__.r(__webpack_exports__);
+__webpack_require__.d(__webpack_exports__, {
+    actionNameForType: ()=>actionNameForType,
+    getPromptInputActionLabel: ()=>getPromptInputActionLabel
+});
+const actionNameForType = (type)=>{
+    if (!type) return '';
+    const typeWithoutAi = type.startsWith('ai') ? type.slice(2) : type;
+    if (typeWithoutAi.startsWith('IOS')) return typeWithoutAi.substring(3).replace(/([A-Z])/g, ' $1').replace(/^/, 'IOS').trim();
+    const fullName = typeWithoutAi.replace(/([A-Z])/g, ' $1').trim();
+    const words = fullName.split(' ');
+    const result = words.length > 3 ? words.slice(-3).join(' ') : fullName;
+    return result.replace(/\b\w/g, (c)=>c.toUpperCase());
+};
+const getPromptInputActionLabel = (type, overrideLabel)=>{
+    if (overrideLabel) return overrideLabel;
+    return actionNameForType(type) || 'Action';
+};
+exports.actionNameForType = __webpack_exports__.actionNameForType;
+exports.getPromptInputActionLabel = __webpack_exports__.getPromptInputActionLabel;
+for(var __rspack_i in __webpack_exports__)if (-1 === [
+    "actionNameForType",
+    "getPromptInputActionLabel"
+].indexOf(__rspack_i)) exports[__rspack_i] = __webpack_exports__[__rspack_i];
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});

package/dist/lib/utils/playground-utils.js

@@ -25,21 +25,13 @@ var __webpack_exports__ = {};
 __webpack_require__.r(__webpack_exports__);
 __webpack_require__.d(__webpack_exports__, {
     staticAgentFromContext: ()=>staticAgentFromContext,
-    actionNameForType: ()=>actionNameForType,
+    actionNameForType: ()=>external_action_label_js_namespaceObject.actionNameForType,
     getPlaceholderForType: ()=>getPlaceholderForType,
     isRunButtonEnabled: ()=>isRunButtonEnabled
 });
 const static_namespaceObject = require("@midscene/web/static");
 const external_types_js_namespaceObject = require("../types.js");
-const actionNameForType = (type)=>{
-    if (!type) return '';
-    const typeWithoutAi = type.startsWith('ai') ? type.slice(2) : type;
-    if (typeWithoutAi.startsWith('IOS')) return typeWithoutAi.substring(3).replace(/([A-Z])/g, ' $1').replace(/^/, 'IOS').trim();
-    const fullName = typeWithoutAi.replace(/([A-Z])/g, ' $1').trim();
-    const words = fullName.split(' ');
-    const result = words.length > 3 ? words.slice(-3).join(' ') : fullName;
-    return result.replace(/\b\w/g, (c)=>c.toUpperCase());
-};
+const external_action_label_js_namespaceObject = require("./action-label.js");
 const staticAgentFromContext = (context)=>{
     const page = new static_namespaceObject.StaticPage(context);
     return new static_namespaceObject.StaticPageAgent(page);

package/dist/lib/utils/prompt-input-utils.js

@@ -0,0 +1,82 @@
+"use strict";
+var __webpack_require__ = {};
+(()=>{
+    __webpack_require__.d = (exports1, definition)=>{
+        for(var key in definition)if (__webpack_require__.o(definition, key) && !__webpack_require__.o(exports1, key)) Object.defineProperty(exports1, key, {
+            enumerable: true,
+            get: definition[key]
+        });
+    };
+})();
+(()=>{
+    __webpack_require__.o = (obj, prop)=>Object.prototype.hasOwnProperty.call(obj, prop);
+})();
+(()=>{
+    __webpack_require__.r = (exports1)=>{
+        if ('undefined' != typeof Symbol && Symbol.toStringTag) Object.defineProperty(exports1, Symbol.toStringTag, {
+            value: 'Module'
+        });
+        Object.defineProperty(exports1, '__esModule', {
+            value: true
+        });
+    };
+})();
+var __webpack_exports__ = {};
+__webpack_require__.r(__webpack_exports__);
+__webpack_require__.d(__webpack_exports__, {
+    getAvailablePromptActionTypes: ()=>getAvailablePromptActionTypes,
+    getInlineStructuredFieldConfig: ()=>getInlineStructuredFieldConfig
+});
+const external_types_js_namespaceObject = require("../types.js");
+const external_constants_js_namespaceObject = require("./constants.js");
+const getAvailablePromptActionTypes = (actionSpace)=>{
+    const metadataMethods = Object.keys(external_constants_js_namespaceObject.apiMetadata);
+    if (!(null == actionSpace ? void 0 : actionSpace.length)) return metadataMethods;
+    const availableMethods = actionSpace.map((action)=>action.interfaceAlias || action.name);
+    const supportsAiAct = availableMethods.includes('aiAct');
+    const finalMethods = new Set();
+    metadataMethods.forEach((method)=>{
+        const methodInfo = external_constants_js_namespaceObject.apiMetadata[method];
+        if ('aiAct' === method) {
+            if (supportsAiAct) finalMethods.add(method);
+            return;
+        }
+        if ((null == methodInfo ? void 0 : methodInfo.group) === 'extraction' || (null == methodInfo ? void 0 : methodInfo.group) === 'validation') return void finalMethods.add(method);
+        if (availableMethods.includes(method)) finalMethods.add(method);
+    });
+    availableMethods.forEach((method)=>{
+        finalMethods.add(method);
+    });
+    return Array.from(finalMethods);
+};
+const getInlineStructuredFieldConfig = (actionSpace, selectedType)=>{
+    var _actualField__def, _actualField__def1;
+    if (!(null == actionSpace ? void 0 : actionSpace.length) || !selectedType) return null;
+    const action = actionSpace.find((item)=>item.interfaceAlias === selectedType || item.name === selectedType);
+    if (!(null == action ? void 0 : action.paramSchema) || !(0, external_types_js_namespaceObject.isZodObjectSchema)(action.paramSchema)) return null;
+    const schema = action.paramSchema;
+    const shape = schema.shape || {};
+    const keys = Object.keys(shape);
+    if (1 !== keys.length) return null;
+    const [name] = keys;
+    const field = shape[name];
+    const { actualField } = (0, external_types_js_namespaceObject.unwrapZodType)(field);
+    const isLocate = (0, external_types_js_namespaceObject.isLocateField)(actualField);
+    const fieldType = null == (_actualField__def = actualField._def) ? void 0 : _actualField__def.typeName;
+    const isInlineField = 'ZodString' === fieldType || isLocate;
+    if (!isInlineField) return null;
+    const placeholder = (null == (_actualField__def1 = actualField._def) ? void 0 : _actualField__def1.description) || actualField.description || (isLocate ? 'Describe the element you want to interact with' : `Enter ${name}`);
+    return {
+        name,
+        placeholder
+    };
+};
+exports.getAvailablePromptActionTypes = __webpack_exports__.getAvailablePromptActionTypes;
+exports.getInlineStructuredFieldConfig = __webpack_exports__.getInlineStructuredFieldConfig;
+for(var __rspack_i in __webpack_exports__)if (-1 === [
+    "getAvailablePromptActionTypes",
+    "getInlineStructuredFieldConfig"
+].indexOf(__rspack_i)) exports[__rspack_i] = __webpack_exports__[__rspack_i];
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});

package/dist/lib/utils/replay-scripts.js

@@ -101,6 +101,19 @@ const cameraStateForRect = (rect, imageWidth, imageHeight)=>{
         width: Math.round(cameraWidth)
     };
 };
+const createFullPageCameraState = (imageWidth, imageHeight)=>cameraStateForRect({
+        left: 0,
+        top: 0,
+        width: imageWidth,
+        height: imageHeight
+    }, imageWidth, imageHeight);
+const resolveTaskShotSize = (task, fallbackWidth, fallbackHeight)=>{
+    var _task_uiContext_shotSize, _task_uiContext, _task_uiContext_shotSize1, _task_uiContext1;
+    return {
+        width: (null == task ? void 0 : null == (_task_uiContext = task.uiContext) ? void 0 : null == (_task_uiContext_shotSize = _task_uiContext.shotSize) ? void 0 : _task_uiContext_shotSize.width) || fallbackWidth,
+        height: (null == task ? void 0 : null == (_task_uiContext1 = task.uiContext) ? void 0 : null == (_task_uiContext_shotSize1 = _task_uiContext1.shotSize) ? void 0 : _task_uiContext_shotSize1.height) || fallbackHeight
+    };
+};
 const mergeTwoCameraState = (cameraState1, cameraState2)=>{
     const newLeft = Math.min(cameraState1.left, cameraState2.left);
     const newTop = Math.min(cameraState1.top, cameraState2.top);
@@ -227,12 +240,6 @@ const generateAnimationScripts = (execution, task, imageWidth, imageHeight, exec
         }
     }
     if (0 === tasksIncluded.length) return null;
-    const fullPageCameraState = cameraStateForRect({
-        left: 0,
-        top: 0,
-        width: imageWidth,
-        height: imageHeight
-    }, imageWidth, imageHeight);
     const getTaskId = (taskIndex)=>{
         var _tasksIncluded_taskIndex;
         return null == (_tasksIncluded_taskIndex = tasksIncluded[taskIndex]) ? void 0 : _tasksIncluded_taskIndex.taskId;
@@ -355,7 +362,7 @@ const generateAnimationScripts = (execution, task, imageWidth, imageHeight, exec
                 }, asScreenshot(screenshot)));
             }
         } else if ('Action Space' === task.type) {
-            var _task_recorder_, _task_recorder, _task_uiContext_shotSize2, _task_uiContext2, _task_uiContext_shotSize3, _task_uiContext3;
+            var _task_recorder_, _task_recorder;
             const title = (0, agent_namespaceObject.typeStr)(task);
             const subTitle = (0, agent_namespaceObject.paramStr)(task);
             scripts.push({
@@ -377,14 +384,15 @@ const generateAnimationScripts = (execution, task, imageWidth, imageHeight, exec
             }
             scripts.push(setPointerScript(external_index_js_namespaceObject.mousePointer, title, subTitle, currentTaskId));
             const screenshot = null == (_task_recorder = task.recorder) ? void 0 : null == (_task_recorder_ = _task_recorder[0]) ? void 0 : _task_recorder_.screenshot;
+            const { width, height } = resolveTaskShotSize(task, imageWidth, imageHeight);
             scripts.push(createScript({
                 type: 'img',
                 duration: actionDuration,
-                camera: 'Sleep' === task.subType ? fullPageCameraState : void 0,
+                camera: 'Sleep' === task.subType ? createFullPageCameraState(width, height) : void 0,
                 title,
                 subTitle,
-                imageWidth: (null == (_task_uiContext2 = task.uiContext) ? void 0 : null == (_task_uiContext_shotSize2 = _task_uiContext2.shotSize) ? void 0 : _task_uiContext_shotSize2.width) || imageWidth,
-                imageHeight: (null == (_task_uiContext3 = task.uiContext) ? void 0 : null == (_task_uiContext_shotSize3 = _task_uiContext3.shotSize) ? void 0 : _task_uiContext_shotSize3.height) || imageHeight,
+                imageWidth: width,
+                imageHeight: height,
                 taskId: currentTaskId
             }, asScreenshot(screenshot)));
         } else {
@@ -393,33 +401,34 @@ const generateAnimationScripts = (execution, task, imageWidth, imageHeight, exec
             const subTitle = (0, agent_namespaceObject.paramStr)(task);
             const screenshot = null == (_task_recorder1 = task.recorder) ? void 0 : null == (_task_recorder_1 = _task_recorder1[task.recorder.length - 1]) ? void 0 : _task_recorder_1.screenshot;
             if (screenshot) {
-                var _task_uiContext_shotSize4, _task_uiContext4, _task_uiContext_shotSize5, _task_uiContext5;
+                const { width, height } = resolveTaskShotSize(task, imageWidth, imageHeight);
                 scripts.push(createScript({
                     type: 'img',
                     duration: stillDuration,
-                    camera: fullPageCameraState,
+                    camera: createFullPageCameraState(width, height),
                     title,
                     subTitle,
-                    imageWidth: (null == (_task_uiContext4 = task.uiContext) ? void 0 : null == (_task_uiContext_shotSize4 = _task_uiContext4.shotSize) ? void 0 : _task_uiContext_shotSize4.width) || imageWidth,
-                    imageHeight: (null == (_task_uiContext5 = task.uiContext) ? void 0 : null == (_task_uiContext_shotSize5 = _task_uiContext5.shotSize) ? void 0 : _task_uiContext_shotSize5.height) || imageHeight,
+                    imageWidth: width,
+                    imageHeight: height,
                     taskId: currentTaskId
                 }, asScreenshot(screenshot)));
             }
         }
         if ('finished' !== task.status) {
-            var _task_recorder_2, _task_recorder2, _task_uiContext_shotSize6, _task_uiContext6, _task_uiContext_shotSize7, _task_uiContext7;
+            var _task_recorder_2, _task_recorder2;
             const errorTitle = (0, agent_namespaceObject.typeStr)(task);
             const errorMsg = task.errorMessage || 'unknown error';
             const errorSubTitle = errorMsg.indexOf('NOT_IMPLEMENTED_AS_DESIGNED') > 0 ? 'Further actions cannot be performed in the current environment' : errorMsg;
             const screenshot = null == (_task_recorder2 = task.recorder) ? void 0 : null == (_task_recorder_2 = _task_recorder2[task.recorder.length - 1]) ? void 0 : _task_recorder_2.screenshot;
+            const { width, height } = resolveTaskShotSize(task, imageWidth, imageHeight);
             scripts.push(createScript({
                 type: 'img',
-                camera: fullPageCameraState,
+                camera: createFullPageCameraState(width, height),
                 duration: stillDuration,
                 title: errorTitle,
                 subTitle: errorSubTitle,
-                imageWidth: (null == (_task_uiContext6 = task.uiContext) ? void 0 : null == (_task_uiContext_shotSize6 = _task_uiContext6.shotSize) ? void 0 : _task_uiContext_shotSize6.width) || imageWidth,
-                imageHeight: (null == (_task_uiContext7 = task.uiContext) ? void 0 : null == (_task_uiContext_shotSize7 = _task_uiContext7.shotSize) ? void 0 : _task_uiContext_shotSize7.height) || imageHeight,
+                imageWidth: width,
+                imageHeight: height,
                 taskId: currentTaskId
             }, asScreenshot(screenshot)));
         }
@@ -434,12 +443,16 @@ const generateAnimationScripts = (execution, task, imageWidth, imageHeight, exec
         });
         insightOnTop = false;
     }
+    const lastTaskShotSize = tasksIncluded.length > 0 ? resolveTaskShotSize(tasksIncluded[tasksIncluded.length - 1], imageWidth, imageHeight) : {
+        width: imageWidth,
+        height: imageHeight
+    };
     scripts.push({
         title: 'End',
         subTitle: initSubTitle,
         type: 'img',
         duration: lastFrameDuration,
-        camera: fullPageCameraState,
+        camera: createFullPageCameraState(lastTaskShotSize.width, lastTaskShotSize.height),
         taskId: void 0
     });
     return scripts;

package/dist/types/component/config-selector/index.d.ts

@@ -1,4 +1,5 @@
 import type React from 'react';
+import type { ReactNode } from 'react';
 import type { DeviceType } from '../../types';
 interface ConfigSelectorProps {
     showDeepLocateOption: boolean;
@@ -7,6 +8,7 @@ interface ConfigSelectorProps {
     showDataExtractionOptions: boolean;
     hideDomAndScreenshotOptions?: boolean;
     deviceType?: DeviceType;
+    trigger?: ReactNode;
 }
 export declare const ConfigSelector: React.FC<ConfigSelectorProps>;
 export {};

package/dist/types/component/history-selector/index.d.ts

@@ -1,10 +1,12 @@
 import type React from 'react';
+import type { ReactNode } from 'react';
 import type { HistoryItem } from '../../store/history';
 import './index.less';
 interface HistorySelectorProps {
     onSelect: (history: HistoryItem) => void;
     history: HistoryItem[];
     currentType: string;
+    trigger?: ReactNode;
 }
 export declare const HistorySelector: React.FC<HistorySelectorProps>;
 export {};