@midscene/visualizer 0.28.2-beta-20250909133629.0 → 0.28.2-beta-20250910021445.0

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

@@ -1,273 +0,0 @@
-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 { useCallback, useEffect } from "react";
-import { usePlaygroundExecution } from "../../hooks/usePlaygroundExecution.mjs";
-import { usePlaygroundState } from "../../hooks/usePlaygroundState.mjs";
-import { useEnvConfig } from "../../store/store.mjs";
-import { ContextPreview } from "../context-preview/index.mjs";
-import { PlaygroundResultView } from "../playground-result/index.mjs";
-import "./index.css";
-import avatar from "../../icons/avatar.mjs";
-import { PromptInput } from "../prompt-input/index.mjs";
-const { Text } = Typography;
-function ErrorMessage(param) {
-    let { error } = param;
-    if (!error) return null;
-    return /*#__PURE__*/ jsxs(Tooltip, {
-        title: /*#__PURE__*/ jsx("span", {
-            style: {
-                whiteSpace: 'pre-wrap',
-                wordBreak: 'break-all'
-            },
-            children: error
-        }),
-        overlayStyle: {
-            maxWidth: '100vw'
-        },
-        children: [
-            "Error: ",
-            error.split('\n')[0]
-        ]
-    });
-}
-function UniversalPlayground(param) {
-    let { playgroundSDK, storage, contextProvider, config: componentConfig = {}, branding = {}, className = '', dryMode = false, showContextPreview = true } = param;
-    const [form] = Form.useForm();
-    const { deepThink, screenshotIncluded, domIncluded, config } = useEnvConfig();
-    const { loading, setLoading, infoList, setInfoList, actionSpace, actionSpaceLoading, uiContextPreview, setUiContextPreview, showScrollToBottomButton, verticalMode, replayCounter, setReplayCounter, infoListRef, currentRunningIdRef, interruptedFlagRef, clearInfoList, refreshContext, handleScrollToBottom } = usePlaygroundState(playgroundSDK, storage, contextProvider);
-    const { handleRun: executeAction, handleStop, canStop } = usePlaygroundExecution(playgroundSDK, storage, actionSpace, loading, setLoading, infoList, setInfoList, replayCounter, setReplayCounter, verticalMode, currentRunningIdRef, interruptedFlagRef);
-    useEffect(()=>{
-        const completeConfig = {
-            ...config,
-            deepThink,
-            screenshotIncluded,
-            domIncluded
-        };
-        if (playgroundSDK.overrideConfig) playgroundSDK.overrideConfig(completeConfig).catch((error)=>{
-            console.error('Failed to override SDK config:', error);
-        });
-    }, [
-        playgroundSDK,
-        config,
-        deepThink,
-        screenshotIncluded,
-        domIncluded
-    ]);
-    const handleFormRun = useCallback(async ()=>{
-        try {
-            const value = form.getFieldsValue();
-            await executeAction(value);
-        } catch (error) {
-            message.error((null == error ? void 0 : error.message) || 'Execution failed');
-        }
-    }, [
-        form,
-        executeAction
-    ]);
-    const runButtonEnabled = !dryMode && !actionSpaceLoading;
-    const selectedType = Form.useWatch('type', form);
-    const finalShowContextPreview = showContextPreview && false !== componentConfig.showContextPreview;
-    const enablePersistence = false !== componentConfig.enablePersistence;
-    const layout = componentConfig.layout || 'vertical';
-    const showVersionInfo = false !== componentConfig.showVersionInfo;
-    return /*#__PURE__*/ jsx("div", {
-        className: `playground-container ${layout}-mode ${className}`.trim(),
-        children: /*#__PURE__*/ jsxs(Form, {
-            form: form,
-            onFinish: handleFormRun,
-            className: "command-form",
-            children: [
-                finalShowContextPreview && /*#__PURE__*/ jsx("div", {
-                    className: "context-preview-section",
-                    children: /*#__PURE__*/ jsx(ContextPreview, {
-                        uiContextPreview: uiContextPreview,
-                        setUiContextPreview: setUiContextPreview,
-                        showContextPreview: finalShowContextPreview
-                    })
-                }),
-                /*#__PURE__*/ jsxs("div", {
-                    className: "middle-dialog-area",
-                    children: [
-                        infoList.length > 1 && enablePersistence && /*#__PURE__*/ jsx("div", {
-                            className: "clear-button-container",
-                            children: /*#__PURE__*/ jsx(Button, {
-                                size: "small",
-                                icon: /*#__PURE__*/ jsx(ClearOutlined, {}),
-                                onClick: clearInfoList,
-                                type: "text",
-                                className: "clear-button"
-                            })
-                        }),
-                        /*#__PURE__*/ jsx("div", {
-                            ref: infoListRef,
-                            className: "info-list-container",
-                            children: /*#__PURE__*/ jsx(List, {
-                                itemLayout: "vertical",
-                                dataSource: infoList,
-                                renderItem: (item)=>{
-                                    var _item_result;
-                                    return /*#__PURE__*/ jsx(List.Item, {
-                                        className: "list-item",
-                                        children: 'user' === item.type ? /*#__PURE__*/ jsx("div", {
-                                            className: "user-message-container",
-                                            children: /*#__PURE__*/ jsx("div", {
-                                                className: "user-message-bubble",
-                                                children: item.content
-                                            })
-                                        }) : 'progress' === item.type ? /*#__PURE__*/ jsx("div", {
-                                            children: (()=>{
-                                                var _parts_, _item_result, _item_result1, _item_result2;
-                                                const parts = item.content.split(' - ');
-                                                const action = null == (_parts_ = parts[0]) ? void 0 : _parts_.trim();
-                                                const description = parts.slice(1).join(' - ').trim();
-                                                const currentIndex = infoList.findIndex((listItem)=>listItem.id === item.id);
-                                                const laterProgressExists = infoList.slice(currentIndex + 1).some((listItem)=>'progress' === listItem.type);
-                                                const isLatestProgress = !laterProgressExists;
-                                                const shouldShowLoading = loading && isLatestProgress;
-                                                return /*#__PURE__*/ jsxs(Fragment, {
-                                                    children: [
-                                                        action && /*#__PURE__*/ jsxs("span", {
-                                                            className: "progress-action-item",
-                                                            children: [
-                                                                action,
-                                                                /*#__PURE__*/ jsx("span", {
-                                                                    className: `progress-status-icon ${shouldShowLoading ? 'loading' : (null == (_item_result = item.result) ? void 0 : _item_result.error) ? 'error' : 'completed'}`,
-                                                                    children: shouldShowLoading ? /*#__PURE__*/ jsx(LoadingOutlined, {
-                                                                        spin: true
-                                                                    }) : (null == (_item_result1 = item.result) ? void 0 : _item_result1.error) ? "\u2717" : "\u2713"
-                                                                })
-                                                            ]
-                                                        }),
-                                                        description && /*#__PURE__*/ jsx("div", {
-                                                            children: /*#__PURE__*/ jsx("span", {
-                                                                className: "progress-description",
-                                                                children: description
-                                                            })
-                                                        }),
-                                                        (null == (_item_result2 = item.result) ? void 0 : _item_result2.error) && /*#__PURE__*/ jsx(ErrorMessage, {
-                                                            error: item.result.error
-                                                        })
-                                                    ]
-                                                });
-                                            })()
-                                        }) : 'separator' === item.type ? /*#__PURE__*/ jsxs("div", {
-                                            className: "new-conversation-separator",
-                                            children: [
-                                                /*#__PURE__*/ jsx("div", {
-                                                    className: "separator-line"
-                                                }),
-                                                /*#__PURE__*/ jsx("div", {
-                                                    className: "separator-text-container",
-                                                    children: /*#__PURE__*/ jsx(Text, {
-                                                        type: "secondary",
-                                                        className: "separator-text",
-                                                        children: item.content
-                                                    })
-                                                })
-                                            ]
-                                        }) : /*#__PURE__*/ jsxs("div", {
-                                            className: "system-message-container",
-                                            children: [
-                                                /*#__PURE__*/ jsxs("div", {
-                                                    className: "system-message-header",
-                                                    children: [
-                                                        /*#__PURE__*/ jsx(icons, {
-                                                            component: branding.icon || avatar,
-                                                            style: {
-                                                                fontSize: 20
-                                                            }
-                                                        }),
-                                                        /*#__PURE__*/ jsx("span", {
-                                                            className: "system-message-title",
-                                                            children: branding.title || 'Playground'
-                                                        })
-                                                    ]
-                                                }),
-                                                (item.content || item.result) && /*#__PURE__*/ jsxs("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
-                                                                    })
-                                                                })
-                                                            ]
-                                                        })
-                                                    ]
-                                                })
-                                            ]
-                                        })
-                                    }, item.id);
-                                }
-                            })
-                        }),
-                        showScrollToBottomButton && false !== componentConfig.enableScrollToBottom && /*#__PURE__*/ jsx(Button, {
-                            className: "scroll-to-bottom-button",
-                            type: "primary",
-                            shape: "circle",
-                            icon: /*#__PURE__*/ jsx(ArrowDownOutlined, {}),
-                            onClick: handleScrollToBottom,
-                            size: "large"
-                        })
-                    ]
-                }),
-                /*#__PURE__*/ jsx("div", {
-                    className: "bottom-input-section",
-                    children: /*#__PURE__*/ jsx(PromptInput, {
-                        runButtonEnabled: runButtonEnabled,
-                        form: form,
-                        serviceMode: 'Server',
-                        selectedType: selectedType,
-                        dryMode: dryMode,
-                        stoppable: canStop,
-                        loading: loading,
-                        onRun: handleFormRun,
-                        onStop: handleStop,
-                        actionSpace: actionSpace
-                    })
-                }),
-                showVersionInfo && branding.version && /*#__PURE__*/ jsx("div", {
-                    className: "version-info-section",
-                    children: /*#__PURE__*/ jsxs("span", {
-                        className: "version-text",
-                        children: [
-                            "Midscene.js version: ",
-                            branding.version
-                        ]
-                    })
-                })
-            ]
-        })
-    });
-}
-const universal_playground = UniversalPlayground;
-export { UniversalPlayground, universal_playground as default };

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

@@ -1,52 +0,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;
-}
-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');
-    }
-}
-export { AgentContextProvider, BaseContextProvider, NoOpContextProvider, StaticContextProvider };

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

@@ -1,107 +0,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;
-}
-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) {}
-}
-export { LocalStorageProvider, MemoryStorageProvider, NoOpStorageProvider };

package/dist/es/hooks/usePlaygroundExecution.mjs

@@ -1,170 +0,0 @@
-import { useCallback } from "react";
-import { BLANK_RESULT } from "../types.mjs";
-import { allScriptsFromDump } from "../utils/replay-scripts.mjs";
-const noReplayAPIs = [
-    'aiQuery',
-    'aiAssert'
-];
-function usePlaygroundExecution(playgroundSDK, storage, actionSpace, loading, setLoading, infoList, setInfoList, replayCounter, setReplayCounter, verticalMode, currentRunningIdRef, interruptedFlagRef) {
-    const handleRun = useCallback(async (value)=>{
-        Date.now();
-        null == actionSpace || actionSpace.find((a)=>a.interfaceAlias === value.type || a.name === value.type);
-        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 = {
-            ...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 = 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 = 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
-    };
-}
-export { usePlaygroundExecution };