@midscene/visualizer 0.30.10 → 0.30.11-beta-20251218071621.0

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

@@ -1,6 +1,6 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import icons, { ArrowDownOutlined, ClearOutlined, LoadingOutlined } from "@ant-design/icons";
-import { Button, Form, List, Tooltip, Typography, message } from "antd";
+import { Alert, Button, Form, List, Typography, message } from "antd";
 import { useCallback, useEffect, useMemo, useState } from "react";
 import { usePlaygroundExecution } from "../../hooks/usePlaygroundExecution.mjs";
 import { usePlaygroundState } from "../../hooks/usePlaygroundState.mjs";
@@ -10,49 +10,78 @@ import { EnvConfigReminder } from "../env-config-reminder/index.mjs";
 import { PlaygroundResultView } from "../playground-result/index.mjs";
 import "./index.css";
 import avatar from "../../icons/avatar.mjs";
+import { defaultMainButtons } from "../../utils/constants.mjs";
 import { PromptInput } from "../prompt-input/index.mjs";
+import shiny_text from "../shiny-text/index.mjs";
 import { createStorageProvider, detectBestStorageType } from "./providers/storage-provider.mjs";
+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 } = 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__*/ jsxs(Tooltip, {
-        title: /*#__PURE__*/ jsx("span", {
+    const cleanError = error.replace(/^(Error:\s*)+/, 'Error: ');
+    return /*#__PURE__*/ jsx(Alert, {
+        message: /*#__PURE__*/ 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] = Form.useForm();
     const { config } = useEnvConfig();
     const [sdkReady, setSdkReady] = useState(false);
     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: defaultMainButtons["0"]
+        });
+    }, [
+        form
+    ]);
+    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
@@ -71,7 +100,7 @@ function UniversalPlayground(param) {
         playgroundSDK
     ]);
     const { loading, setLoading, infoList, setInfoList, actionSpace, actionSpaceLoading, uiContextPreview, setUiContextPreview, showScrollToBottomButton, verticalMode, replayCounter, setReplayCounter, infoListRef, currentRunningIdRef, interruptedFlagRef, clearInfoList, handleScrollToBottom } = usePlaygroundState(playgroundSDK, effectiveStorage, contextProvider);
-    const { handleRun: executeAction, handleStop, canStop } = usePlaygroundExecution(playgroundSDK, effectiveStorage, actionSpace, loading, setLoading, infoList, setInfoList, replayCounter, setReplayCounter, verticalMode, currentRunningIdRef, interruptedFlagRef);
+    const { handleRun: executeAction, handleStop, canStop } = usePlaygroundExecution(playgroundSDK, effectiveStorage, actionSpace, loading, setLoading, setInfoList, replayCounter, setReplayCounter, verticalMode, currentRunningIdRef, interruptedFlagRef);
     useEffect(()=>{
         if ((null == playgroundSDK ? void 0 : playgroundSDK.overrideConfig) && config) playgroundSDK.overrideConfig(config).catch((error)=>{
             console.error('Failed to override SDK config:', error);
@@ -80,23 +109,30 @@ function UniversalPlayground(param) {
         playgroundSDK,
         config
     ]);
-    const handleFormRun = useCallback(async ()=>{
-        try {
-            const value = form.getFieldsValue();
-            await executeAction(value);
-        } catch (error) {
-            message.error((null == error ? void 0 : error.message) || 'Execution failed');
-        }
-    }, [
+    const handleFormRun = useCallback(()=>_async_to_generator(function*() {
+            try {
+                const value = form.getFieldsValue();
+                yield executeAction(value);
+            } catch (error) {
+                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 = Form.useWatch('type', form);
+    const serviceMode = 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__*/ jsx("div", {
         className: `playground-container ${layout}-mode ${className}`.trim(),
         children: /*#__PURE__*/ jsxs(Form, {
@@ -131,9 +167,7 @@ function UniversalPlayground(param) {
                             children: /*#__PURE__*/ jsx(List, {
                                 itemLayout: "vertical",
                                 dataSource: infoList,
-                                renderItem: (item)=>{
-                                    var _item_result;
-                                    return /*#__PURE__*/ jsx(List.Item, {
+                                renderItem: (item)=>/*#__PURE__*/ jsx(List.Item, {
                                         className: "list-item",
                                         children: 'user' === item.type ? /*#__PURE__*/ jsx("div", {
                                             className: "user-message-container",
@@ -161,14 +195,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__*/ jsx(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__*/ jsx("div", {
-                                                            children: /*#__PURE__*/ jsx("span", {
+                                                            children: /*#__PURE__*/ jsx(shiny_text, {
+                                                                text: description,
                                                                 className: "progress-description",
-                                                                children: description
+                                                                disabled: !shouldShowLoading
                                                             })
                                                         }),
                                                         (null == (_item_result2 = item.result) ? void 0 : _item_result2.error) && /*#__PURE__*/ jsx(ErrorMessage, {
@@ -210,50 +245,37 @@ function UniversalPlayground(param) {
                                                         })
                                                     ]
                                                 }),
-                                                (item.content || item.result) && /*#__PURE__*/ jsxs("div", {
+                                                (item.content || item.result) && /*#__PURE__*/ jsx("div", {
                                                     className: "system-message-content",
-                                                    children: [
-                                                        'result' === item.type && (null == (_item_result = item.result) ? void 0 : _item_result.error) && /*#__PURE__*/ jsxs("div", {
-                                                            className: "error-message",
-                                                            children: [
-                                                                /*#__PURE__*/ jsx("div", {
-                                                                    className: "divider"
-                                                                }),
-                                                                /*#__PURE__*/ jsx(ErrorMessage, {
-                                                                    error: item.result.error
-                                                                })
-                                                            ]
-                                                        }),
-                                                        'result' === item.type ? /*#__PURE__*/ jsx(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__*/ 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
-                                                                    })
+                                                    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);
-                                }
+                                    }, item.id)
                             })
                         }),
                         showScrollToBottomButton && false !== componentConfig.enableScrollToBottom && /*#__PURE__*/ jsx(Button, {
@@ -273,14 +295,15 @@ function UniversalPlayground(param) {
                         /*#__PURE__*/ jsx(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
                         })
                     ]
                 }),

package/dist/es/component/universal-playground/providers/context-provider.mjs

@@ -1,3 +1,29 @@
+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,
@@ -9,44 +35,56 @@ 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');
+        })();
     }
 }
 export { AgentContextProvider, BaseContextProvider, NoOpContextProvider, StaticContextProvider };