@midscene/visualizer 1.7.3 → 1.7.5-beta-20260418223706.0

package/dist/es/component/universal-playground/index.mjs

@@ -1,5 +1,5 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import icons, { ArrowDownOutlined, ClearOutlined, LoadingOutlined } from "@ant-design/icons";
+import icons, { ArrowDownOutlined, ClearOutlined, LoadingOutlined, UpOutlined } from "@ant-design/icons";
 import { Alert, Button, Form, List, Typography, message } from "antd";
 import { useCallback, useEffect, useMemo, useState } from "react";
 import { usePlaygroundExecution } from "../../hooks/usePlaygroundExecution.mjs";
@@ -137,7 +137,8 @@ function UniversalPlayground({ playgroundSDK, storage, contextProvider, config:
     ]);
     const configAlreadySet = Object.keys(config || {}).length >= 1;
     const runButtonEnabled = componentConfig.serverMode || !dryMode && !actionSpaceLoading && configAlreadySet;
-    const selectedType = Form.useWatch('type', form);
+    const watchedType = Form.useWatch('type', form);
+    const selectedType = watchedType || form.getFieldValue('type');
     const serviceMode = useMemo(()=>{
         if (!playgroundSDK || 'function' != typeof playgroundSDK.getServiceMode) return 'Server';
         return playgroundSDK.getServiceMode();
@@ -148,6 +149,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] = useState(()=>new Set());
+    const toggleProgressGroup = 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 } = 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 = useMemo(()=>{
+        for(let i = infoList.length - 1; i >= 0; i--)if ('progress' === infoList[i].type) return infoList[i].id;
+        return null;
+    }, [
+        infoList
+    ]);
     return /*#__PURE__*/ jsx("div", {
         className: `playground-container ${layout}-mode ${className}`.trim(),
         children: /*#__PURE__*/ jsxs(Form, {
@@ -166,7 +210,7 @@ function UniversalPlayground({ playgroundSDK, storage, contextProvider, config:
                 /*#__PURE__*/ jsxs("div", {
                     className: "middle-dialog-area",
                     children: [
-                        infoList.length > 1 && /*#__PURE__*/ jsx("div", {
+                        false !== componentConfig.showClearButton && infoList.length > 1 && /*#__PURE__*/ jsx("div", {
                             className: "clear-button-container",
                             children: /*#__PURE__*/ jsx(Button, {
                                 size: "small",
@@ -181,115 +225,130 @@ function UniversalPlayground({ playgroundSDK, storage, contextProvider, config:
                             className: "info-list-container",
                             children: /*#__PURE__*/ jsx(List, {
                                 itemLayout: "vertical",
-                                dataSource: infoList,
-                                renderItem: (item)=>/*#__PURE__*/ jsx(List.Item, {
+                                dataSource: visibleInfoList,
+                                renderItem: (item)=>/*#__PURE__*/ jsxs(List.Item, {
                                         className: "list-item",
-                                        children: 'user' === item.type ? /*#__PURE__*/ jsx("div", {
-                                            className: "user-message-container",
-                                            children: /*#__PURE__*/ jsx("div", {
-                                                className: "user-message-bubble",
-                                                children: item.content
-                                            })
-                                        }) : 'progress' === item.type ? /*#__PURE__*/ 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__*/ jsxs(Fragment, {
-                                                    children: [
-                                                        action && /*#__PURE__*/ jsxs("span", {
-                                                            className: "progress-action-item",
-                                                            children: [
-                                                                action,
-                                                                /*#__PURE__*/ jsx("span", {
-                                                                    className: `progress-status-icon ${shouldShowLoading ? 'loading' : (null == (_item_result = item.result) ? void 0 : _item_result.error) ? 'error' : 'completed'}`,
-                                                                    children: shouldShowLoading ? /*#__PURE__*/ jsx(LoadingOutlined, {
-                                                                        spin: true
-                                                                    }) : (null == (_item_result1 = item.result) ? void 0 : _item_result1.error) ? '✗' : '✓'
+                                        children: [
+                                            collapsibleProgressGroup && firstInProgressGroup.has(item.id) ? /*#__PURE__*/ 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__*/ jsx("span", {
+                                                        className: "progress-group-toggle-label",
+                                                        children: progressGroupLabel
+                                                    }),
+                                                    /*#__PURE__*/ jsx(UpOutlined, {
+                                                        className: "progress-group-toggle-chevron"
+                                                    })
+                                                ]
+                                            }) : null,
+                                            'user' === item.type ? /*#__PURE__*/ jsx("div", {
+                                                className: "user-message-container",
+                                                children: /*#__PURE__*/ jsx("div", {
+                                                    className: "user-message-bubble",
+                                                    children: item.content
+                                                })
+                                            }) : 'progress' === item.type ? /*#__PURE__*/ 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__*/ jsxs(Fragment, {
+                                                        children: [
+                                                            action && /*#__PURE__*/ jsxs("span", {
+                                                                className: "progress-action-item",
+                                                                children: [
+                                                                    action,
+                                                                    /*#__PURE__*/ jsx("span", {
+                                                                        className: `progress-status-icon ${shouldShowLoading ? 'loading' : (null == (_item_result = item.result) ? void 0 : _item_result.error) ? 'error' : 'completed'}`,
+                                                                        children: shouldShowLoading ? /*#__PURE__*/ jsx(LoadingOutlined, {
+                                                                            spin: true
+                                                                        }) : (null == (_item_result1 = item.result) ? void 0 : _item_result1.error) ? '✗' : '✓'
+                                                                    })
+                                                                ]
+                                                            }),
+                                                            description && /*#__PURE__*/ jsx("div", {
+                                                                children: /*#__PURE__*/ jsx(shiny_text, {
+                                                                    text: description,
+                                                                    className: "progress-description",
+                                                                    disabled: !shouldShowLoading
                                                                 })
-                                                            ]
-                                                        }),
-                                                        description && /*#__PURE__*/ jsx("div", {
-                                                            children: /*#__PURE__*/ jsx(shiny_text, {
-                                                                text: description,
-                                                                className: "progress-description",
-                                                                disabled: !shouldShowLoading
+                                                            }),
+                                                            (null == (_item_result2 = item.result) ? void 0 : _item_result2.error) && /*#__PURE__*/ jsx(ErrorMessage, {
+                                                                error: item.result.error
                                                             })
-                                                        }),
-                                                        (null == (_item_result2 = item.result) ? void 0 : _item_result2.error) && /*#__PURE__*/ jsx(ErrorMessage, {
-                                                            error: item.result.error
+                                                        ]
+                                                    });
+                                                })()
+                                            }) : 'separator' === item.type ? /*#__PURE__*/ jsxs("div", {
+                                                className: "new-conversation-separator",
+                                                children: [
+                                                    /*#__PURE__*/ jsx("div", {
+                                                        className: "separator-line"
+                                                    }),
+                                                    /*#__PURE__*/ jsx("div", {
+                                                        className: "separator-text-container",
+                                                        children: /*#__PURE__*/ jsx(Text, {
+                                                            type: "secondary",
+                                                            className: "separator-text",
+                                                            children: item.content
                                                         })
-                                                    ]
-                                                });
-                                            })()
-                                        }) : 'separator' === item.type ? /*#__PURE__*/ jsxs("div", {
-                                            className: "new-conversation-separator",
-                                            children: [
-                                                /*#__PURE__*/ jsx("div", {
-                                                    className: "separator-line"
-                                                }),
-                                                /*#__PURE__*/ jsx("div", {
-                                                    className: "separator-text-container",
-                                                    children: /*#__PURE__*/ jsx(Text, {
-                                                        type: "secondary",
-                                                        className: "separator-text",
-                                                        children: item.content
                                                     })
-                                                })
-                                            ]
-                                        }) : /*#__PURE__*/ jsxs("div", {
-                                            className: "system-message-container",
-                                            children: [
-                                                /*#__PURE__*/ jsxs("div", {
-                                                    className: "system-message-header",
-                                                    children: [
-                                                        /*#__PURE__*/ jsx(icons, {
-                                                            component: branding.icon || avatar,
-                                                            style: {
-                                                                fontSize: 20
-                                                            }
-                                                        }),
-                                                        /*#__PURE__*/ jsx("span", {
-                                                            className: "system-message-title",
-                                                            children: branding.title || 'Playground'
-                                                        })
-                                                    ]
-                                                }),
-                                                (item.content || item.result) && /*#__PURE__*/ jsx("div", {
-                                                    className: "system-message-content",
-                                                    children: 'result' === item.type ? /*#__PURE__*/ jsx(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__*/ jsxs(Fragment, {
+                                                ]
+                                            }) : /*#__PURE__*/ jsxs("div", {
+                                                className: "system-message-container",
+                                                children: [
+                                                    false !== componentConfig.showSystemMessageHeader && /*#__PURE__*/ jsxs("div", {
+                                                        className: "system-message-header",
                                                         children: [
-                                                            /*#__PURE__*/ jsx("div", {
-                                                                className: "system-message-text",
-                                                                children: item.content
+                                                            /*#__PURE__*/ jsx(icons, {
+                                                                component: branding.icon || avatar,
+                                                                style: {
+                                                                    fontSize: 20
+                                                                }
                                                             }),
-                                                            item.loading && item.loadingProgressText && /*#__PURE__*/ jsx("div", {
-                                                                className: "loading-progress-text",
-                                                                children: /*#__PURE__*/ jsx("span", {
-                                                                    children: item.loadingProgressText
-                                                                })
+                                                            /*#__PURE__*/ jsx("span", {
+                                                                className: "system-message-title",
+                                                                children: branding.title || 'Playground'
                                                             })
                                                         ]
+                                                    }),
+                                                    (item.content || item.result) && /*#__PURE__*/ jsx("div", {
+                                                        className: "system-message-content",
+                                                        children: 'result' === item.type ? /*#__PURE__*/ jsx(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__*/ jsxs(Fragment, {
+                                                            children: [
+                                                                /*#__PURE__*/ jsx("div", {
+                                                                    className: "system-message-text",
+                                                                    children: item.content
+                                                                }),
+                                                                item.loading && item.loadingProgressText && /*#__PURE__*/ jsx("div", {
+                                                                    className: "loading-progress-text",
+                                                                    children: /*#__PURE__*/ jsx("span", {
+                                                                        children: item.loadingProgressText
+                                                                    })
+                                                                })
+                                                            ]
+                                                        })
                                                     })
-                                                })
-                                            ]
-                                        })
+                                                ]
+                                            })
+                                        ]
                                     }, item.id)
                             })
                         }),
@@ -318,6 +377,7 @@ function UniversalPlayground({ playgroundSDK, storage, contextProvider, config:
                             onRun: handleFormRun,
                             onStop: handleStop,
                             actionSpace: actionSpace,
+                            chrome: componentConfig.promptInputChrome,
                             deviceType: deviceType
                         })
                     ]

package/dist/es/utils/action-label.mjs

@@ -0,0 +1,14 @@
+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';
+};
+export { actionNameForType, getPromptInputActionLabel };

package/dist/es/utils/playground-utils.mjs

@@ -1,14 +1,6 @@
 import { StaticPage, StaticPageAgent } from "@midscene/web/static";
 import { isZodObjectSchema, unwrapZodType } from "../types.mjs";
-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());
-};
+import { actionNameForType } from "./action-label.mjs";
 const staticAgentFromContext = (context)=>{
     const page = new StaticPage(context);
     return new StaticPageAgent(page);

package/dist/es/utils/prompt-input-utils.mjs

@@ -0,0 +1,45 @@
+import { isLocateField, isZodObjectSchema, unwrapZodType } from "../types.mjs";
+import { apiMetadata } from "./constants.mjs";
+const getAvailablePromptActionTypes = (actionSpace)=>{
+    const metadataMethods = Object.keys(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 = 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) || !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 } = unwrapZodType(field);
+    const isLocate = 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
+    };
+};
+export { getAvailablePromptActionTypes, getInlineStructuredFieldConfig };

package/dist/es/utils/replay-scripts.mjs

@@ -69,6 +69,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);
@@ -195,12 +208,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;
@@ -323,7 +330,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 = typeStr(task);
             const subTitle = paramStr(task);
             scripts.push({
@@ -345,14 +352,15 @@ const generateAnimationScripts = (execution, task, imageWidth, imageHeight, exec
             }
             scripts.push(setPointerScript(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 {
@@ -361,33 +369,34 @@ const generateAnimationScripts = (execution, task, imageWidth, imageHeight, exec
             const subTitle = 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 = 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)));
         }
@@ -402,12 +411,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/lib/component/config-selector/index.js

@@ -42,7 +42,7 @@ var setting_js_default = /*#__PURE__*/ __webpack_require__.n(setting_js_namespac
 const store_js_namespaceObject = require("../../store/store.js");
 const constants_js_namespaceObject = require("../../utils/constants.js");
 const device_capabilities_js_namespaceObject = require("../../utils/device-capabilities.js");
-const ConfigSelector = ({ showDeepLocateOption = false, showDeepThinkOption = false, enableTracking = false, showDataExtractionOptions = false, hideDomAndScreenshotOptions = false, deviceType })=>{
+const ConfigSelector = ({ showDeepLocateOption = false, showDeepThinkOption = false, enableTracking = false, showDataExtractionOptions = false, hideDomAndScreenshotOptions = false, deviceType, trigger })=>{
     const forceSameTabNavigation = (0, store_js_namespaceObject.useEnvConfig)((state)=>state.forceSameTabNavigation);
     const setForceSameTabNavigation = (0, store_js_namespaceObject.useEnvConfig)((state)=>state.setForceSameTabNavigation);
     const deepLocate = (0, store_js_namespaceObject.useEnvConfig)((state)=>state.deepLocate);
@@ -74,7 +74,7 @@ const ConfigSelector = ({ showDeepLocateOption = false, showDeepThinkOption = fa
             trigger: [
                 'click'
             ],
-            children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(setting_js_default(), {
+            children: null != trigger ? trigger : /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(setting_js_default(), {
                 width: 24,
                 height: 24
             })