@midscene/visualizer 0.28.2-beta-20250910024129.0 → 0.28.2-beta-20250910035416.0

package/dist/lib/component/universal-playground/providers/context-provider.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__, {
+    AgentContextProvider: ()=>AgentContextProvider,
+    BaseContextProvider: ()=>BaseContextProvider,
+    NoOpContextProvider: ()=>NoOpContextProvider,
+    StaticContextProvider: ()=>StaticContextProvider
+});
+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;
+}
+class BaseContextProvider {
+    async refreshContext() {
+        this.cachedContext = void 0;
+        return await this.getUIContext();
+    }
+    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;
+    }
+    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;
+    }
+    async refreshContext() {
+        return this.context;
+    }
+    constructor(context){
+        super(), _define_property(this, "context", void 0), this.context = context;
+    }
+}
+class NoOpContextProvider {
+    async getUIContext() {
+        throw new Error('Context preview is disabled');
+    }
+    async refreshContext() {
+        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 === [
+    "AgentContextProvider",
+    "BaseContextProvider",
+    "NoOpContextProvider",
+    "StaticContextProvider"
+].indexOf(__webpack_i__)) exports[__webpack_i__] = __webpack_exports__[__webpack_i__];
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});

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

@@ -0,0 +1,147 @@
+"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__, {
+    LocalStorageProvider: ()=>LocalStorageProvider,
+    MemoryStorageProvider: ()=>MemoryStorageProvider,
+    NoOpStorageProvider: ()=>NoOpStorageProvider
+});
+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;
+}
+class LocalStorageProvider {
+    async saveMessages(messages) {
+        try {
+            const lightMessages = messages.map((msg)=>({
+                    ...msg,
+                    result: void 0
+                }));
+            localStorage.setItem(this.messagesKey, JSON.stringify(lightMessages));
+        } catch (error) {
+            console.error('Failed to save messages to localStorage:', error);
+        }
+    }
+    async loadMessages() {
+        try {
+            const stored = localStorage.getItem(this.messagesKey);
+            if (!stored) return [];
+            const messages = JSON.parse(stored);
+            const restoredMessages = await Promise.all(messages.map(async (msg)=>{
+                if ('result' === msg.type && msg.id) {
+                    const resultKey = `${this.resultsKey}-${msg.id}`;
+                    const storedResult = localStorage.getItem(resultKey);
+                    if (storedResult) try {
+                        const resultItem = JSON.parse(storedResult);
+                        return {
+                            ...msg,
+                            ...resultItem
+                        };
+                    } catch (e) {
+                        console.warn('Failed to parse stored result:', e);
+                    }
+                }
+                return msg;
+            }));
+            return restoredMessages;
+        } catch (error) {
+            console.error('Failed to load messages from localStorage:', error);
+            return [];
+        }
+    }
+    async clearMessages() {
+        try {
+            localStorage.removeItem(this.messagesKey);
+            const keys = Object.keys(localStorage);
+            keys.forEach((key)=>{
+                if (key.startsWith(this.resultsKey)) localStorage.removeItem(key);
+            });
+        } catch (error) {
+            console.error('Failed to clear messages from localStorage:', error);
+        }
+    }
+    async saveResult(id, result) {
+        try {
+            const resultKey = `${this.resultsKey}-${id}`;
+            localStorage.setItem(resultKey, JSON.stringify(result));
+        } catch (error) {
+            console.error('Failed to save result to localStorage:', error);
+        }
+    }
+    constructor(namespace = 'playground'){
+        _define_property(this, "messagesKey", void 0);
+        _define_property(this, "resultsKey", void 0);
+        this.messagesKey = `${namespace}-messages`;
+        this.resultsKey = `${namespace}-results`;
+    }
+}
+class MemoryStorageProvider {
+    async saveMessages(messages) {
+        this.messages = [
+            ...messages
+        ];
+    }
+    async loadMessages() {
+        return [
+            ...this.messages
+        ];
+    }
+    async clearMessages() {
+        this.messages = [];
+        this.results.clear();
+    }
+    async saveResult(id, result) {
+        this.results.set(id, result);
+    }
+    constructor(){
+        _define_property(this, "messages", []);
+        _define_property(this, "results", new Map());
+    }
+}
+class NoOpStorageProvider {
+    async saveMessages(_messages) {}
+    async loadMessages() {
+        return [];
+    }
+    async clearMessages() {}
+    async saveResult(_id, _result) {}
+}
+exports.LocalStorageProvider = __webpack_exports__.LocalStorageProvider;
+exports.MemoryStorageProvider = __webpack_exports__.MemoryStorageProvider;
+exports.NoOpStorageProvider = __webpack_exports__.NoOpStorageProvider;
+for(var __webpack_i__ in __webpack_exports__)if (-1 === [
+    "LocalStorageProvider",
+    "MemoryStorageProvider",
+    "NoOpStorageProvider"
+].indexOf(__webpack_i__)) exports[__webpack_i__] = __webpack_exports__[__webpack_i__];
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});

package/dist/lib/hooks/usePlaygroundExecution.js

@@ -0,0 +1,202 @@
+"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__, {
+    usePlaygroundExecution: ()=>usePlaygroundExecution
+});
+const external_react_namespaceObject = require("react");
+const constants_js_namespaceObject = require("../utils/constants.js");
+const replay_scripts_js_namespaceObject = require("../utils/replay-scripts.js");
+const noReplayAPIs = [
+    'aiQuery',
+    'aiAssert'
+];
+function usePlaygroundExecution(playgroundSDK, storage, actionSpace, loading, setLoading, infoList, setInfoList, replayCounter, setReplayCounter, verticalMode, currentRunningIdRef, interruptedFlagRef) {
+    const handleRun = (0, external_react_namespaceObject.useCallback)(async (value)=>{
+        const thisRunningId = Date.now();
+        const actionType = value.type;
+        const displayContent = `${value.type}: ${value.prompt || JSON.stringify(value.params)}`;
+        const userItem = {
+            id: `user-${Date.now()}`,
+            type: 'user',
+            content: displayContent,
+            timestamp: new Date()
+        };
+        setInfoList((prev)=>[
+                ...prev,
+                userItem
+            ]);
+        setLoading(true);
+        const result = {
+            ...constants_js_namespaceObject.BLANK_RESULT
+        };
+        const systemItem = {
+            id: `system-${thisRunningId}`,
+            type: 'system',
+            content: '',
+            timestamp: new Date(),
+            loading: true,
+            loadingProgressText: ''
+        };
+        setInfoList((prev)=>[
+                ...prev,
+                systemItem
+            ]);
+        try {
+            currentRunningIdRef.current = thisRunningId;
+            interruptedFlagRef.current[thisRunningId] = false;
+            if (playgroundSDK.onProgressUpdate) playgroundSDK.onProgressUpdate((tip)=>{
+                if (interruptedFlagRef.current[thisRunningId]) return;
+                const progressItem = {
+                    id: `progress-${thisRunningId}-${Date.now()}`,
+                    type: 'progress',
+                    content: tip,
+                    timestamp: new Date()
+                };
+                setInfoList((prev)=>[
+                        ...prev,
+                        progressItem
+                    ]);
+            });
+            result.result = await playgroundSDK.executeAction(actionType, value, {
+                requestId: thisRunningId.toString()
+            });
+            if ('object' == typeof result.result && null !== result.result) {
+                const resultObj = result.result;
+                if (resultObj.dump) result.dump = resultObj.dump;
+                if (resultObj.reportHTML) result.reportHTML = resultObj.reportHTML;
+                if (resultObj.error) result.error = resultObj.error;
+                if (void 0 !== resultObj.result) result.result = resultObj.result;
+            }
+        } catch (e) {
+            result.error = (null == e ? void 0 : e.message) || String(e);
+            console.error('Playground execution error:', e);
+        }
+        if (interruptedFlagRef.current[thisRunningId]) return;
+        setLoading(false);
+        currentRunningIdRef.current = null;
+        let replayInfo = null;
+        let counter = replayCounter;
+        if ((null == result ? void 0 : result.dump) && !noReplayAPIs.includes(actionType)) {
+            const info = (0, replay_scripts_js_namespaceObject.allScriptsFromDump)(result.dump);
+            setReplayCounter((c)=>c + 1);
+            replayInfo = info;
+            counter = replayCounter + 1;
+        }
+        setInfoList((prev)=>prev.map((item)=>item.id === `system-${thisRunningId}` ? {
+                    ...item,
+                    content: '',
+                    loading: false,
+                    loadingProgressText: ''
+                } : item));
+        const resultItem = {
+            id: `result-${thisRunningId}`,
+            type: 'result',
+            content: 'Execution result',
+            timestamp: new Date(),
+            result: result,
+            loading: false,
+            replayScriptsInfo: replayInfo,
+            replayCounter: counter,
+            loadingProgressText: '',
+            verticalMode: verticalMode
+        };
+        setInfoList((prev)=>[
+                ...prev,
+                resultItem
+            ]);
+        if (null == storage ? void 0 : storage.saveResult) try {
+            await storage.saveResult(resultItem.id, resultItem);
+        } catch (error) {
+            console.error('Failed to save result:', error);
+        }
+        const separatorItem = {
+            id: `separator-${thisRunningId}`,
+            type: 'separator',
+            content: 'New Session',
+            timestamp: new Date()
+        };
+        setInfoList((prev)=>[
+                ...prev,
+                separatorItem
+            ]);
+    }, [
+        playgroundSDK,
+        storage,
+        actionSpace,
+        setLoading,
+        setInfoList,
+        replayCounter,
+        setReplayCounter,
+        verticalMode,
+        currentRunningIdRef,
+        interruptedFlagRef
+    ]);
+    const handleStop = (0, external_react_namespaceObject.useCallback)(async ()=>{
+        const thisRunningId = currentRunningIdRef.current;
+        if (thisRunningId && playgroundSDK.cancelExecution) try {
+            await playgroundSDK.cancelExecution(thisRunningId.toString());
+            interruptedFlagRef.current[thisRunningId] = true;
+            setLoading(false);
+            setInfoList((prev)=>prev.map((item)=>item.id === `system-${thisRunningId}` && item.loading ? {
+                        ...item,
+                        content: 'Operation stopped',
+                        loading: false,
+                        loadingProgressText: ''
+                    } : item));
+            const separatorItem = {
+                id: `separator-${thisRunningId}`,
+                type: 'separator',
+                content: 'New Session',
+                timestamp: new Date()
+            };
+            setInfoList((prev)=>[
+                    ...prev,
+                    separatorItem
+                ]);
+        } catch (error) {
+            console.error('Failed to stop execution:', error);
+        }
+    }, [
+        playgroundSDK,
+        currentRunningIdRef,
+        interruptedFlagRef,
+        setLoading,
+        setInfoList
+    ]);
+    const canStop = loading && !!currentRunningIdRef.current && !!playgroundSDK.cancelExecution;
+    return {
+        handleRun,
+        handleStop,
+        canStop
+    };
+}
+exports.usePlaygroundExecution = __webpack_exports__.usePlaygroundExecution;
+for(var __webpack_i__ in __webpack_exports__)if (-1 === [
+    "usePlaygroundExecution"
+].indexOf(__webpack_i__)) exports[__webpack_i__] = __webpack_exports__[__webpack_i__];
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});

package/dist/lib/hooks/usePlaygroundState.js

@@ -0,0 +1,210 @@
+"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__, {
+    usePlaygroundState: ()=>usePlaygroundState
+});
+const external_react_namespaceObject = require("react");
+const constants_js_namespaceObject = require("../utils/constants.js");
+function usePlaygroundState(playgroundSDK, storage, contextProvider) {
+    const [loading, setLoading] = (0, external_react_namespaceObject.useState)(false);
+    const [infoList, setInfoList] = (0, external_react_namespaceObject.useState)([]);
+    const [actionSpace, setActionSpace] = (0, external_react_namespaceObject.useState)([]);
+    const [actionSpaceLoading, setActionSpaceLoading] = (0, external_react_namespaceObject.useState)(true);
+    const [uiContextPreview, setUiContextPreview] = (0, external_react_namespaceObject.useState)();
+    const [showScrollToBottomButton, setShowScrollToBottomButton] = (0, external_react_namespaceObject.useState)(false);
+    const [verticalMode, setVerticalMode] = (0, external_react_namespaceObject.useState)(false);
+    const [replayCounter, setReplayCounter] = (0, external_react_namespaceObject.useState)(0);
+    const infoListRef = (0, external_react_namespaceObject.useRef)(null);
+    const currentRunningIdRef = (0, external_react_namespaceObject.useRef)(null);
+    const interruptedFlagRef = (0, external_react_namespaceObject.useRef)({});
+    (0, external_react_namespaceObject.useEffect)(()=>{
+        const initializeMessages = async ()=>{
+            const welcomeMessage = {
+                ...constants_js_namespaceObject.WELCOME_MESSAGE_TEMPLATE,
+                id: 'welcome',
+                timestamp: new Date()
+            };
+            if (null == storage ? void 0 : storage.loadMessages) try {
+                const storedMessages = await storage.loadMessages();
+                const hasWelcomeMessage = storedMessages.some((msg)=>'welcome' === msg.id);
+                hasWelcomeMessage ? setInfoList(storedMessages) : setInfoList([
+                    welcomeMessage,
+                    ...storedMessages
+                ]);
+            } catch (error) {
+                console.error('Failed to load messages:', error);
+                setInfoList([
+                    welcomeMessage
+                ]);
+            }
+            else setInfoList([
+                welcomeMessage
+            ]);
+        };
+        if (0 === infoList.length) initializeMessages();
+    }, []);
+    (0, external_react_namespaceObject.useEffect)(()=>{
+        if ((null == storage ? void 0 : storage.saveMessages) && infoList.length > 1) storage.saveMessages(infoList).catch((error)=>{
+            console.error('Failed to save messages:', error);
+        });
+    }, [
+        infoList,
+        storage
+    ]);
+    (0, external_react_namespaceObject.useEffect)(()=>{
+        if (!(null == contextProvider ? void 0 : contextProvider.getUIContext) || uiContextPreview) return;
+        contextProvider.getUIContext().then((context)=>setUiContextPreview(context)).catch((error)=>{
+            console.error('Failed to get UI context:', error);
+        });
+    }, [
+        contextProvider,
+        uiContextPreview
+    ]);
+    (0, external_react_namespaceObject.useEffect)(()=>{
+        const loadActionSpace = async ()=>{
+            setActionSpaceLoading(true);
+            try {
+                var _contextProvider_getUIContext;
+                const context = uiContextPreview || await (null == contextProvider ? void 0 : null == (_contextProvider_getUIContext = contextProvider.getUIContext) ? void 0 : _contextProvider_getUIContext.call(contextProvider));
+                const space = await playgroundSDK.getActionSpace(context);
+                setActionSpace(space || []);
+            } catch (error) {
+                console.error('Failed to load action space:', error);
+                setActionSpace([]);
+            } finally{
+                setActionSpaceLoading(false);
+            }
+        };
+        loadActionSpace();
+    }, [
+        playgroundSDK,
+        uiContextPreview,
+        contextProvider
+    ]);
+    (0, external_react_namespaceObject.useEffect)(()=>{
+        const sizeThreshold = 750;
+        setVerticalMode(window.innerWidth < sizeThreshold);
+        const handleResize = ()=>{
+            setVerticalMode(window.innerWidth < sizeThreshold);
+        };
+        window.addEventListener('resize', handleResize);
+        return ()=>window.removeEventListener('resize', handleResize);
+    }, []);
+    const scrollToBottom = (0, external_react_namespaceObject.useCallback)(()=>{
+        setTimeout(()=>{
+            if (infoListRef.current) infoListRef.current.scrollTop = infoListRef.current.scrollHeight;
+        }, 100);
+    }, []);
+    const checkIfScrolledToBottom = (0, external_react_namespaceObject.useCallback)(()=>{
+        if (infoListRef.current) {
+            const { scrollTop, scrollHeight, clientHeight } = infoListRef.current;
+            const isAtBottom = scrollTop + clientHeight >= scrollHeight - 10;
+            setShowScrollToBottomButton(!isAtBottom);
+        }
+    }, []);
+    const handleScrollToBottom = (0, external_react_namespaceObject.useCallback)(()=>{
+        if (infoListRef.current) {
+            infoListRef.current.scrollTo({
+                top: infoListRef.current.scrollHeight,
+                behavior: 'smooth'
+            });
+            setShowScrollToBottomButton(false);
+        }
+    }, []);
+    (0, external_react_namespaceObject.useEffect)(()=>{
+        if (infoList.length > 0) scrollToBottom();
+    }, [
+        infoList,
+        scrollToBottom
+    ]);
+    (0, external_react_namespaceObject.useEffect)(()=>{
+        const container = infoListRef.current;
+        if (container) {
+            container.addEventListener('scroll', checkIfScrolledToBottom);
+            checkIfScrolledToBottom();
+            return ()=>{
+                container.removeEventListener('scroll', checkIfScrolledToBottom);
+            };
+        }
+    }, [
+        checkIfScrolledToBottom
+    ]);
+    const clearInfoList = (0, external_react_namespaceObject.useCallback)(async ()=>{
+        const welcomeMessage = {
+            ...constants_js_namespaceObject.WELCOME_MESSAGE_TEMPLATE,
+            id: 'welcome',
+            timestamp: new Date()
+        };
+        setInfoList([
+            welcomeMessage
+        ]);
+        if (null == storage ? void 0 : storage.clearMessages) try {
+            await storage.clearMessages();
+        } catch (error) {
+            console.error('Failed to clear stored messages:', error);
+        }
+    }, [
+        storage
+    ]);
+    const refreshContext = (0, external_react_namespaceObject.useCallback)(async ()=>{
+        if (null == contextProvider ? void 0 : contextProvider.refreshContext) try {
+            const newContext = await contextProvider.refreshContext();
+            setUiContextPreview(newContext);
+        } catch (error) {
+            console.error('Failed to refresh context:', error);
+        }
+    }, [
+        contextProvider
+    ]);
+    return {
+        loading,
+        setLoading,
+        infoList,
+        setInfoList,
+        actionSpace,
+        actionSpaceLoading,
+        uiContextPreview,
+        setUiContextPreview,
+        showScrollToBottomButton,
+        verticalMode,
+        replayCounter,
+        setReplayCounter,
+        infoListRef,
+        currentRunningIdRef,
+        interruptedFlagRef,
+        clearInfoList,
+        refreshContext,
+        handleScrollToBottom,
+        scrollToBottom
+    };
+}
+exports.usePlaygroundState = __webpack_exports__.usePlaygroundState;
+for(var __webpack_i__ in __webpack_exports__)if (-1 === [
+    "usePlaygroundState"
+].indexOf(__webpack_i__)) exports[__webpack_i__] = __webpack_exports__[__webpack_i__];
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});