@midscene/visualizer 0.30.9 → 0.30.11-beta-20251218071621.0

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

@@ -50,49 +50,79 @@ const external_playground_result_index_js_namespaceObject = require("../playgrou
 require("./index.css");
 const avatar_js_namespaceObject = require("../../icons/avatar.js");
 var avatar_js_default = /*#__PURE__*/ __webpack_require__.n(avatar_js_namespaceObject);
+const constants_js_namespaceObject = require("../../utils/constants.js");
 const external_prompt_input_index_js_namespaceObject = require("../prompt-input/index.js");
+const external_shiny_text_index_js_namespaceObject = require("../shiny-text/index.js");
+var external_shiny_text_index_js_default = /*#__PURE__*/ __webpack_require__.n(external_shiny_text_index_js_namespaceObject);
 const storage_provider_js_namespaceObject = require("./providers/storage-provider.js");
+function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) {
+    try {
+        var info = gen[key](arg);
+        var value = info.value;
+    } catch (error) {
+        reject(error);
+        return;
+    }
+    if (info.done) resolve(value);
+    else Promise.resolve(value).then(_next, _throw);
+}
+function _async_to_generator(fn) {
+    return function() {
+        var self = this, args = arguments;
+        return new Promise(function(resolve, reject) {
+            var gen = fn.apply(self, args);
+            function _next(value) {
+                asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value);
+            }
+            function _throw(err) {
+                asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err);
+            }
+            _next(void 0);
+        });
+    };
+}
 const { Text } = external_antd_namespaceObject.Typography;
 function getSDKId(sdk) {
+    if (!sdk) return 'playground-default';
     if (sdk.id && 'string' == typeof sdk.id) return `agent-${sdk.id}`;
     return 'playground-default';
 }
-function ErrorMessage(param) {
-    let { error } = param;
+function ErrorMessage({ error }) {
     if (!error) return null;
-    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_antd_namespaceObject.Tooltip, {
-        title: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
+    const cleanError = error.replace(/^(Error:\s*)+/, 'Error: ');
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_antd_namespaceObject.Alert, {
+        message: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
             style: {
-                whiteSpace: 'pre-wrap',
-                wordBreak: 'break-all'
+                color: '#ff4d4f'
             },
-            children: error
+            children: cleanError
         }),
-        overlayStyle: {
-            maxWidth: '100vw'
-        },
-        children: [
-            "Error: ",
-            error.split('\n')[0]
-        ]
+        type: "error",
+        showIcon: true
     });
 }
-function UniversalPlayground(param) {
-    let { playgroundSDK, storage, contextProvider, config: componentConfig = {}, branding = {}, className = '', dryMode = false, showContextPreview = true } = param;
+function UniversalPlayground({ playgroundSDK, storage, contextProvider, config: componentConfig = {}, branding = {}, className = '', dryMode = false, showContextPreview = true }) {
     const [form] = external_antd_namespaceObject.Form.useForm();
     const { config } = (0, store_js_namespaceObject.useEnvConfig)();
     const [sdkReady, setSdkReady] = (0, external_react_namespaceObject.useState)(false);
     (0, external_react_namespaceObject.useEffect)(()=>{
-        const initializeSDK = async ()=>{
-            if (playgroundSDK && 'function' == typeof playgroundSDK.checkStatus) try {
-                await playgroundSDK.checkStatus();
-                setSdkReady(true);
-            } catch (error) {
-                console.warn('Failed to initialize SDK, using default namespace:', error);
-                setSdkReady(true);
-            }
-            else setSdkReady(true);
-        };
+        form.setFieldsValue({
+            type: constants_js_namespaceObject.defaultMainButtons["0"]
+        });
+    }, [
+        form
+    ]);
+    (0, external_react_namespaceObject.useEffect)(()=>{
+        const initializeSDK = ()=>_async_to_generator(function*() {
+                if (playgroundSDK && 'function' == typeof playgroundSDK.checkStatus) try {
+                    yield playgroundSDK.checkStatus();
+                    setSdkReady(true);
+                } catch (error) {
+                    console.warn('Failed to initialize SDK, using default namespace:', error);
+                    setSdkReady(true);
+                }
+                else setSdkReady(true);
+            })();
         initializeSDK();
     }, [
         playgroundSDK
@@ -111,7 +141,7 @@ function UniversalPlayground(param) {
         playgroundSDK
     ]);
     const { loading, setLoading, infoList, setInfoList, actionSpace, actionSpaceLoading, uiContextPreview, setUiContextPreview, showScrollToBottomButton, verticalMode, replayCounter, setReplayCounter, infoListRef, currentRunningIdRef, interruptedFlagRef, clearInfoList, handleScrollToBottom } = (0, usePlaygroundState_js_namespaceObject.usePlaygroundState)(playgroundSDK, effectiveStorage, contextProvider);
-    const { handleRun: executeAction, handleStop, canStop } = (0, usePlaygroundExecution_js_namespaceObject.usePlaygroundExecution)(playgroundSDK, effectiveStorage, actionSpace, loading, setLoading, infoList, setInfoList, replayCounter, setReplayCounter, verticalMode, currentRunningIdRef, interruptedFlagRef);
+    const { handleRun: executeAction, handleStop, canStop } = (0, usePlaygroundExecution_js_namespaceObject.usePlaygroundExecution)(playgroundSDK, effectiveStorage, actionSpace, loading, setLoading, setInfoList, replayCounter, setReplayCounter, verticalMode, currentRunningIdRef, interruptedFlagRef);
     (0, external_react_namespaceObject.useEffect)(()=>{
         if ((null == playgroundSDK ? void 0 : playgroundSDK.overrideConfig) && config) playgroundSDK.overrideConfig(config).catch((error)=>{
             console.error('Failed to override SDK config:', error);
@@ -120,23 +150,30 @@ function UniversalPlayground(param) {
         playgroundSDK,
         config
     ]);
-    const handleFormRun = (0, external_react_namespaceObject.useCallback)(async ()=>{
-        try {
-            const value = form.getFieldsValue();
-            await executeAction(value);
-        } catch (error) {
-            external_antd_namespaceObject.message.error((null == error ? void 0 : error.message) || 'Execution failed');
-        }
-    }, [
+    const handleFormRun = (0, external_react_namespaceObject.useCallback)(()=>_async_to_generator(function*() {
+            try {
+                const value = form.getFieldsValue();
+                yield executeAction(value);
+            } catch (error) {
+                external_antd_namespaceObject.message.error((null == error ? void 0 : error.message) || 'Execution failed');
+            }
+        })(), [
         form,
         executeAction
     ]);
     const configAlreadySet = Object.keys(config || {}).length >= 1;
     const runButtonEnabled = componentConfig.serverMode || !dryMode && !actionSpaceLoading && configAlreadySet;
     const selectedType = external_antd_namespaceObject.Form.useWatch('type', form);
+    const serviceMode = (0, external_react_namespaceObject.useMemo)(()=>{
+        if (!playgroundSDK || 'function' != typeof playgroundSDK.getServiceMode) return 'Server';
+        return playgroundSDK.getServiceMode();
+    }, [
+        playgroundSDK
+    ]);
     const finalShowContextPreview = showContextPreview && false !== componentConfig.showContextPreview;
     const layout = componentConfig.layout || 'vertical';
     const showVersionInfo = false !== componentConfig.showVersionInfo;
+    const deviceType = componentConfig.deviceType;
     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, {
@@ -171,9 +208,7 @@ function UniversalPlayground(param) {
                             children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_antd_namespaceObject.List, {
                                 itemLayout: "vertical",
                                 dataSource: infoList,
-                                renderItem: (item)=>{
-                                    var _item_result;
-                                    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_antd_namespaceObject.List.Item, {
+                                renderItem: (item)=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_antd_namespaceObject.List.Item, {
                                         className: "list-item",
                                         children: 'user' === item.type ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
                                             className: "user-message-container",
@@ -201,14 +236,15 @@ function UniversalPlayground(param) {
                                                                     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) ? "\u2717" : "\u2713"
+                                                                    }) : (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)("span", {
+                                                            children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_shiny_text_index_js_default(), {
+                                                                text: description,
                                                                 className: "progress-description",
-                                                                children: description
+                                                                disabled: !shouldShowLoading
                                                             })
                                                         }),
                                                         (null == (_item_result2 = item.result) ? void 0 : _item_result2.error) && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(ErrorMessage, {
@@ -250,50 +286,37 @@ function UniversalPlayground(param) {
                                                         })
                                                     ]
                                                 }),
-                                                (item.content || item.result) && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+                                                (item.content || item.result) && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
                                                     className: "system-message-content",
-                                                    children: [
-                                                        'result' === item.type && (null == (_item_result = item.result) ? void 0 : _item_result.error) && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
-                                                            className: "error-message",
-                                                            children: [
-                                                                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
-                                                                    className: "divider"
-                                                                }),
-                                                                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(ErrorMessage, {
-                                                                    error: item.result.error
-                                                                })
-                                                            ]
-                                                        }),
-                                                        '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: 'Server',
-                                                            replayScriptsInfo: item.replayScriptsInfo || null,
-                                                            replayCounter: item.replayCounter || 0,
-                                                            loadingProgressText: item.loadingProgressText || '',
-                                                            verticalMode: item.verticalMode || false,
-                                                            fitMode: "width"
-                                                        }) : /*#__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
-                                                                    })
+                                                    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);
-                                }
+                                    }, item.id)
                             })
                         }),
                         showScrollToBottomButton && false !== componentConfig.enableScrollToBottom && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_antd_namespaceObject.Button, {
@@ -313,14 +336,15 @@ function UniversalPlayground(param) {
                         /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_prompt_input_index_js_namespaceObject.PromptInput, {
                             runButtonEnabled: runButtonEnabled,
                             form: form,
-                            serviceMode: 'Server',
+                            serviceMode: serviceMode,
                             selectedType: selectedType,
                             dryMode: dryMode,
                             stoppable: canStop,
                             loading: loading,
                             onRun: handleFormRun,
                             onStop: handleStop,
-                            actionSpace: actionSpace
+                            actionSpace: actionSpace,
+                            deviceType: deviceType
                         })
                     ]
                 }),
@@ -341,10 +365,10 @@ function UniversalPlayground(param) {
 const universal_playground = UniversalPlayground;
 exports.UniversalPlayground = __webpack_exports__.UniversalPlayground;
 exports["default"] = __webpack_exports__["default"];
-for(var __webpack_i__ in __webpack_exports__)if (-1 === [
+for(var __rspack_i in __webpack_exports__)if (-1 === [
     "UniversalPlayground",
     "default"
-].indexOf(__webpack_i__)) exports[__webpack_i__] = __webpack_exports__[__webpack_i__];
+].indexOf(__rspack_i)) exports[__rspack_i] = __webpack_exports__[__rspack_i];
 Object.defineProperty(exports, '__esModule', {
     value: true
 });

package/dist/lib/component/universal-playground/providers/context-provider.js

@@ -29,6 +29,32 @@ __webpack_require__.d(__webpack_exports__, {
     NoOpContextProvider: ()=>NoOpContextProvider,
     StaticContextProvider: ()=>StaticContextProvider
 });
+function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) {
+    try {
+        var info = gen[key](arg);
+        var value = info.value;
+    } catch (error) {
+        reject(error);
+        return;
+    }
+    if (info.done) resolve(value);
+    else Promise.resolve(value).then(_next, _throw);
+}
+function _async_to_generator(fn) {
+    return function() {
+        var self = this, args = arguments;
+        return new Promise(function(resolve, reject) {
+            var gen = fn.apply(self, args);
+            function _next(value) {
+                asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value);
+            }
+            function _throw(err) {
+                asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err);
+            }
+            _next(void 0);
+        });
+    };
+}
 function _define_property(obj, key, value) {
     if (key in obj) Object.defineProperty(obj, key, {
         value: value,
@@ -40,56 +66,68 @@ function _define_property(obj, key, value) {
     return obj;
 }
 class BaseContextProvider {
-    async refreshContext() {
-        this.cachedContext = void 0;
-        return await this.getUIContext();
+    refreshContext() {
+        return _async_to_generator(function*() {
+            this.cachedContext = void 0;
+            return yield this.getUIContext();
+        }).call(this);
     }
     constructor(){
         _define_property(this, "cachedContext", void 0);
     }
 }
 class AgentContextProvider extends BaseContextProvider {
-    async getUIContext() {
-        if (this.cachedContext) return this.cachedContext;
-        const agent = this.getAgent();
-        if (!(null == agent ? void 0 : agent.getUIContext)) throw new Error('Agent does not support getUIContext');
-        const context = await agent.getUIContext();
-        this.cachedContext = context;
-        return context;
+    getUIContext() {
+        return _async_to_generator(function*() {
+            if (this.cachedContext) return this.cachedContext;
+            const agent = this.getAgent();
+            if (!(null == agent ? void 0 : agent.getUIContext)) throw new Error('Agent does not support getUIContext');
+            const context = yield agent.getUIContext();
+            this.cachedContext = context;
+            return context;
+        }).call(this);
     }
     constructor(getAgent, options){
         super(), _define_property(this, "getAgent", void 0), _define_property(this, "options", void 0), this.getAgent = getAgent, this.options = options;
     }
 }
 class StaticContextProvider extends BaseContextProvider {
-    async getUIContext() {
-        return this.context;
+    getUIContext() {
+        return _async_to_generator(function*() {
+            return this.context;
+        }).call(this);
     }
-    async refreshContext() {
-        return this.context;
+    refreshContext() {
+        return _async_to_generator(function*() {
+            return this.context;
+        }).call(this);
     }
     constructor(context){
         super(), _define_property(this, "context", void 0), this.context = context;
     }
 }
 class NoOpContextProvider {
-    async getUIContext() {
-        throw new Error('Context preview is disabled');
+    getUIContext() {
+        return _async_to_generator(function*() {
+            throw new Error('Context preview is disabled');
+        })();
     }
-    async refreshContext() {
-        throw new Error('Context preview is disabled');
+    refreshContext() {
+        return _async_to_generator(function*() {
+            throw new Error('Context preview is disabled');
+        })();
     }
 }
 exports.AgentContextProvider = __webpack_exports__.AgentContextProvider;
 exports.BaseContextProvider = __webpack_exports__.BaseContextProvider;
 exports.NoOpContextProvider = __webpack_exports__.NoOpContextProvider;
 exports.StaticContextProvider = __webpack_exports__.StaticContextProvider;
-for(var __webpack_i__ in __webpack_exports__)if (-1 === [
+for(var __rspack_i in __webpack_exports__)if (-1 === [
     "AgentContextProvider",
     "BaseContextProvider",
     "NoOpContextProvider",
     "StaticContextProvider"
-].indexOf(__webpack_i__)) exports[__webpack_i__] = __webpack_exports__[__webpack_i__];
+].indexOf(__rspack_i)) exports[__rspack_i] = __webpack_exports__[__rspack_i];
 Object.defineProperty(exports, '__esModule', {
     value: true
 });