@midscene/playground-app 1.7.3 → 1.7.4

package/dist/lib/controller/usePlaygroundController.js

@@ -0,0 +1,390 @@
+"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__, {
+    usePlaygroundController: ()=>usePlaygroundController
+});
+const playground_namespaceObject = require("@midscene/playground");
+const visualizer_namespaceObject = require("@midscene/visualizer");
+const external_antd_namespaceObject = require("antd");
+const external_react_namespaceObject = require("react");
+const external_session_setup_js_namespaceObject = require("../session-setup.js");
+const external_session_state_js_namespaceObject = require("../session-state.js");
+const external_useServerStatus_js_namespaceObject = require("../useServerStatus.js");
+const external_ai_config_js_namespaceObject = require("./ai-config.js");
+const external_auto_create_js_namespaceObject = require("./auto-create.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);
+        });
+    };
+}
+function _define_property(obj, key, value) {
+    if (key in obj) Object.defineProperty(obj, key, {
+        value: value,
+        enumerable: true,
+        configurable: true,
+        writable: true
+    });
+    else obj[key] = value;
+    return obj;
+}
+function _object_spread(target) {
+    for(var i = 1; i < arguments.length; i++){
+        var source = null != arguments[i] ? arguments[i] : {};
+        var ownKeys = Object.keys(source);
+        if ("function" == typeof Object.getOwnPropertySymbols) ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
+            return Object.getOwnPropertyDescriptor(source, sym).enumerable;
+        }));
+        ownKeys.forEach(function(key) {
+            _define_property(target, key, source[key]);
+        });
+    }
+    return target;
+}
+function usePlaygroundController_ownKeys(object, enumerableOnly) {
+    var keys = Object.keys(object);
+    if (Object.getOwnPropertySymbols) {
+        var symbols = Object.getOwnPropertySymbols(object);
+        if (enumerableOnly) symbols = symbols.filter(function(sym) {
+            return Object.getOwnPropertyDescriptor(object, sym).enumerable;
+        });
+        keys.push.apply(keys, symbols);
+    }
+    return keys;
+}
+function _object_spread_props(target, source) {
+    source = null != source ? source : {};
+    if (Object.getOwnPropertyDescriptors) Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
+    else usePlaygroundController_ownKeys(Object(source)).forEach(function(key) {
+        Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+    });
+    return target;
+}
+function getPlatformSelectorFieldKey(setup) {
+    var _setup_platformSelector;
+    return null == setup ? void 0 : null == (_setup_platformSelector = setup.platformSelector) ? void 0 : _setup_platformSelector.fieldKey;
+}
+function usePlaygroundController({ serverUrl, defaultDeviceType = 'web', pollIntervalMs = 5000, countdownSeconds = 3 }) {
+    const [form] = external_antd_namespaceObject.Form.useForm();
+    var _Form_useWatch;
+    const formValues = null != (_Form_useWatch = external_antd_namespaceObject.Form.useWatch([], form)) ? _Form_useWatch : {};
+    const [countdown, setCountdown] = (0, external_react_namespaceObject.useState)(null);
+    const [sessionSetup, setSessionSetup] = (0, external_react_namespaceObject.useState)(null);
+    const [sessionSetupError, setSessionSetupError] = (0, external_react_namespaceObject.useState)(null);
+    const [sessionLoading, setSessionLoading] = (0, external_react_namespaceObject.useState)(false);
+    const [sessionMutating, setSessionMutating] = (0, external_react_namespaceObject.useState)(false);
+    const aiConfig = (0, visualizer_namespaceObject.useEnvConfig)((state)=>state.config);
+    const platformSelectorFieldKey = getPlatformSelectorFieldKey(sessionSetup);
+    const selectedPlatformId = 'string' == typeof platformSelectorFieldKey ? formValues[platformSelectorFieldKey] : void 0;
+    const playgroundSDK = (0, external_react_namespaceObject.useMemo)(()=>new playground_namespaceObject.PlaygroundSDK({
+            type: 'remote-execution',
+            serverUrl
+        }), [
+        serverUrl
+    ]);
+    const { serverOnline, isUserOperating, deviceType, runtimeInfo, executionUxHints, refreshServerState } = (0, external_useServerStatus_js_namespaceObject.useServerStatus)(playgroundSDK, defaultDeviceType, pollIntervalMs);
+    const sessionViewState = (0, external_react_namespaceObject.useMemo)(()=>(0, external_session_state_js_namespaceObject.resolveSessionViewState)(runtimeInfo), [
+        runtimeInfo
+    ]);
+    const applyAiConfig = (0, external_react_namespaceObject.useCallback)(()=>_async_to_generator(function*() {
+            if (!(0, external_ai_config_js_namespaceObject.hasPlaygroundAiConfig)(aiConfig)) return true;
+            try {
+                yield (0, external_ai_config_js_namespaceObject.applyPlaygroundAiConfig)(playgroundSDK, aiConfig);
+                return true;
+            } catch (error) {
+                const errorMessage = error instanceof Error ? error.message : 'Failed to apply AI configuration';
+                external_antd_namespaceObject.message.error(errorMessage);
+                return false;
+            }
+        })(), [
+        aiConfig,
+        playgroundSDK
+    ]);
+    const countdownTimerRef = (0, external_react_namespaceObject.useRef)(null);
+    const countdownResolveRef = (0, external_react_namespaceObject.useRef)(null);
+    const mountedRef = (0, external_react_namespaceObject.useRef)(true);
+    const lastSetupPlatformIdRef = (0, external_react_namespaceObject.useRef)(void 0);
+    const autoCreateSignatureRef = (0, external_react_namespaceObject.useRef)(null);
+    const autoCreateBlockedSignatureRef = (0, external_react_namespaceObject.useRef)(null);
+    const finishCountdown = (0, external_react_namespaceObject.useCallback)(()=>{
+        if (null !== countdownTimerRef.current) {
+            window.clearInterval(countdownTimerRef.current);
+            countdownTimerRef.current = null;
+        }
+        const resolve = countdownResolveRef.current;
+        countdownResolveRef.current = null;
+        if (mountedRef.current) setCountdown(null);
+        null == resolve || resolve();
+    }, []);
+    const showCountdownModal = (0, external_react_namespaceObject.useCallback)(()=>_async_to_generator(function*() {
+            if (countdownSeconds <= 0) return;
+            finishCountdown();
+            return new Promise((resolve)=>{
+                countdownResolveRef.current = resolve;
+                let count = countdownSeconds;
+                if (mountedRef.current) setCountdown(count);
+                countdownTimerRef.current = window.setInterval(()=>{
+                    count -= 1;
+                    if (count > 0) {
+                        if (mountedRef.current) setCountdown(count);
+                        return;
+                    }
+                    if (0 === count) {
+                        if (mountedRef.current) setCountdown('GO!');
+                        return;
+                    }
+                    finishCountdown();
+                }, 1000);
+            });
+        })(), [
+        countdownSeconds,
+        finishCountdown
+    ]);
+    (0, external_react_namespaceObject.useEffect)(()=>{
+        mountedRef.current = true;
+        return ()=>{
+            mountedRef.current = false;
+            finishCountdown();
+        };
+    }, [
+        finishCountdown
+    ]);
+    (0, external_react_namespaceObject.useEffect)(()=>{
+        if (!executionUxHints.includes('countdown-before-run')) return void playgroundSDK.setBeforeActionHook(void 0);
+        playgroundSDK.setBeforeActionHook(()=>_async_to_generator(function*() {
+                yield showCountdownModal();
+            })());
+        return ()=>{
+            playgroundSDK.setBeforeActionHook(void 0);
+        };
+    }, [
+        executionUxHints,
+        playgroundSDK,
+        showCountdownModal
+    ]);
+    const refreshSessionSetup = (0, external_react_namespaceObject.useCallback)((input)=>_async_to_generator(function*() {
+            const currentValues = _object_spread({}, form.getFieldsValue(true), input || {});
+            setSessionLoading(true);
+            try {
+                const setup = yield playgroundSDK.getSessionSetup(input);
+                setSessionSetup(setup);
+                setSessionSetupError(null);
+                const currentPlatformSelectorFieldKey = getPlatformSelectorFieldKey(setup);
+                lastSetupPlatformIdRef.current = currentPlatformSelectorFieldKey && 'string' == typeof currentValues[currentPlatformSelectorFieldKey] ? currentValues[currentPlatformSelectorFieldKey] : void 0;
+                form.setFieldsValue((0, external_session_state_js_namespaceObject.buildSessionInitialValues)(setup, currentValues));
+            } catch (error) {
+                console.error('Failed to load session setup:', error);
+                setSessionSetupError(error instanceof Error ? error.message : 'Failed to load session setup');
+            } finally{
+                setSessionLoading(false);
+            }
+        })(), [
+        form,
+        playgroundSDK
+    ]);
+    const createSession = (0, external_react_namespaceObject.useCallback)((input, options)=>_async_to_generator(function*() {
+            try {
+                if (!(yield applyAiConfig())) return false;
+                const values = null != input ? input : yield form.validateFields();
+                setSessionMutating(true);
+                yield playgroundSDK.createSession(values);
+                if ((0, external_auto_create_js_namespaceObject.shouldResetAutoCreateBlock)(options)) autoCreateBlockedSignatureRef.current = null;
+                if (!(null == options ? void 0 : options.silent)) external_antd_namespaceObject.message.success('Agent created');
+                yield refreshServerState();
+                return true;
+            } catch (error) {
+                if (error.errorFields) return false;
+                const errorMessage = error instanceof Error ? error.message : 'Failed to create Agent';
+                external_antd_namespaceObject.message.error(errorMessage);
+                return false;
+            } finally{
+                setSessionMutating(false);
+            }
+        })(), [
+        applyAiConfig,
+        form,
+        playgroundSDK,
+        refreshServerState
+    ]);
+    const destroySession = (0, external_react_namespaceObject.useCallback)(()=>_async_to_generator(function*() {
+            try {
+                autoCreateBlockedSignatureRef.current = (0, external_auto_create_js_namespaceObject.serializeAutoCreateInput)((0, external_session_setup_js_namespaceObject.resolveAutoCreateSessionInput)(sessionSetup, form.getFieldsValue(true)));
+                setSessionMutating(true);
+                yield playgroundSDK.destroySession();
+                external_antd_namespaceObject.message.success('Session disconnected');
+                yield refreshServerState();
+                yield refreshSessionSetup();
+            } catch (error) {
+                const errorMessage = error instanceof Error ? error.message : 'Failed to disconnect session';
+                external_antd_namespaceObject.message.error(errorMessage);
+            } finally{
+                setSessionMutating(false);
+            }
+        })(), [
+        form,
+        playgroundSDK,
+        refreshServerState,
+        refreshSessionSetup,
+        sessionSetup
+    ]);
+    (0, external_react_namespaceObject.useEffect)(()=>{
+        if (!serverOnline) return;
+        applyAiConfig();
+    }, [
+        applyAiConfig,
+        serverOnline
+    ]);
+    (0, external_react_namespaceObject.useEffect)(()=>{
+        if (!serverOnline || sessionViewState.connected) return;
+        let disposed = false;
+        let refreshing = false;
+        const refreshTargets = ()=>_async_to_generator(function*() {
+                if (disposed || refreshing) return;
+                refreshing = true;
+                try {
+                    yield refreshSessionSetup(form.getFieldsValue(true));
+                } finally{
+                    refreshing = false;
+                }
+            })();
+        refreshTargets();
+        const intervalId = window.setInterval(()=>{
+            refreshTargets();
+        }, pollIntervalMs);
+        return ()=>{
+            disposed = true;
+            window.clearInterval(intervalId);
+        };
+    }, [
+        form,
+        pollIntervalMs,
+        refreshSessionSetup,
+        serverOnline,
+        sessionViewState.connected
+    ]);
+    (0, external_react_namespaceObject.useEffect)(()=>{
+        if (!serverOnline || sessionViewState.connected || !selectedPlatformId) return;
+        const currentPlatformSelectorFieldKey = getPlatformSelectorFieldKey(sessionSetup);
+        if (!currentPlatformSelectorFieldKey) return;
+        if (lastSetupPlatformIdRef.current === selectedPlatformId) return;
+        refreshSessionSetup(_object_spread_props(_object_spread({}, form.getFieldsValue(true)), {
+            [currentPlatformSelectorFieldKey]: selectedPlatformId
+        }));
+    }, [
+        form,
+        refreshSessionSetup,
+        selectedPlatformId,
+        serverOnline,
+        sessionSetup,
+        sessionViewState.connected
+    ]);
+    (0, external_react_namespaceObject.useEffect)(()=>{
+        if (sessionViewState.connected) {
+            autoCreateSignatureRef.current = null;
+            return;
+        }
+        if (!serverOnline || sessionLoading || sessionMutating || sessionSetupError) return;
+        const autoCreateInput = (0, external_session_setup_js_namespaceObject.resolveAutoCreateSessionInput)(sessionSetup, form.getFieldsValue(true));
+        const { signature, shouldCreate } = (0, external_auto_create_js_namespaceObject.resolveAutoCreateDecision)({
+            autoCreateInput,
+            lastAttemptedSignature: autoCreateSignatureRef.current,
+            blockedSignature: autoCreateBlockedSignatureRef.current
+        });
+        if (!shouldCreate || !signature) {
+            if (!signature) autoCreateSignatureRef.current = null;
+            return;
+        }
+        autoCreateSignatureRef.current = signature;
+        (()=>_async_to_generator(function*() {
+                const created = yield createSession(null != autoCreateInput ? autoCreateInput : void 0, {
+                    silent: true
+                });
+                if (!created) autoCreateSignatureRef.current = null;
+            })())();
+    }, [
+        createSession,
+        form,
+        serverOnline,
+        sessionLoading,
+        sessionMutating,
+        sessionSetup,
+        sessionSetupError,
+        sessionViewState.connected
+    ]);
+    return {
+        state: {
+            playgroundSDK,
+            form,
+            formValues,
+            serverOnline,
+            isUserOperating,
+            deviceType,
+            runtimeInfo,
+            executionUxHints,
+            sessionViewState,
+            sessionSetup,
+            sessionSetupError,
+            sessionLoading,
+            sessionMutating,
+            countdown,
+            countdownSeconds
+        },
+        actions: {
+            refreshServerState,
+            refreshSessionSetup,
+            createSession,
+            destroySession,
+            finishCountdown
+        }
+    };
+}
+exports.usePlaygroundController = __webpack_exports__.usePlaygroundController;
+for(var __rspack_i in __webpack_exports__)if (-1 === [
+    "usePlaygroundController"
+].indexOf(__rspack_i)) exports[__rspack_i] = __webpack_exports__[__rspack_i];
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});

package/dist/lib/icons/dropdown-chevron.js

@@ -0,0 +1,95 @@
+"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__, {
+    default: ()=>dropdown_chevron
+});
+const jsx_runtime_namespaceObject = require("react/jsx-runtime");
+require("react");
+function _define_property(obj, key, value) {
+    if (key in obj) Object.defineProperty(obj, key, {
+        value: value,
+        enumerable: true,
+        configurable: true,
+        writable: true
+    });
+    else obj[key] = value;
+    return obj;
+}
+function _object_spread(target) {
+    for(var i = 1; i < arguments.length; i++){
+        var source = null != arguments[i] ? arguments[i] : {};
+        var ownKeys = Object.keys(source);
+        if ("function" == typeof Object.getOwnPropertySymbols) ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
+            return Object.getOwnPropertyDescriptor(source, sym).enumerable;
+        }));
+        ownKeys.forEach(function(key) {
+            _define_property(target, key, source[key]);
+        });
+    }
+    return target;
+}
+function dropdown_chevron_ownKeys(object, enumerableOnly) {
+    var keys = Object.keys(object);
+    if (Object.getOwnPropertySymbols) {
+        var symbols = Object.getOwnPropertySymbols(object);
+        if (enumerableOnly) symbols = symbols.filter(function(sym) {
+            return Object.getOwnPropertyDescriptor(object, sym).enumerable;
+        });
+        keys.push.apply(keys, symbols);
+    }
+    return keys;
+}
+function _object_spread_props(target, source) {
+    source = null != source ? source : {};
+    if (Object.getOwnPropertyDescriptors) Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
+    else dropdown_chevron_ownKeys(Object(source)).forEach(function(key) {
+        Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+    });
+    return target;
+}
+const SvgDropdownChevron = (props)=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("svg", _object_spread_props(_object_spread({
+        xmlns: "http://www.w3.org/2000/svg",
+        width: 16,
+        height: 16,
+        fill: "none",
+        viewBox: "0 0 16 16"
+    }, props), {
+        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("path", {
+            stroke: "#333",
+            strokeLinecap: "round",
+            strokeLinejoin: "round",
+            strokeWidth: 1.333,
+            d: "m12 6-4 4-4-4"
+        })
+    }));
+const dropdown_chevron = SvgDropdownChevron;
+exports["default"] = __webpack_exports__["default"];
+for(var __rspack_i in __webpack_exports__)if (-1 === [
+    "default"
+].indexOf(__rspack_i)) exports[__rspack_i] = __webpack_exports__[__rspack_i];
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});