@rpascene/visualizer 0.30.16 → 0.30.17

package/dist/es/component/prompt-input/index.mjs

@@ -185,15 +185,7 @@ const PromptInput = (param)=>{
     useEffect(()=>{
         const lastHistory = historyForSelectedType[0];
         if (lastHistory && lastHistoryRef.current && lastHistory.timestamp === lastHistoryRef.current.timestamp) return;
-        if (lastHistory) {
-            form.setFieldsValue({
-                type: lastHistory.type,
-                prompt: lastHistory.prompt || '',
-                params: lastHistory.params
-            });
-            setPromptValue(lastHistory.prompt || '');
-            lastHistoryRef.current = lastHistory;
-        } else {
+        {
             const defaultParams = getDefaultParams();
             form.setFieldsValue({
                 prompt: '',

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

@@ -12,6 +12,7 @@ import { PromptInput } from "../prompt-input/index.mjs";
 import { createStorageProvider, detectBestStorageType } from "./providers/storage-provider.mjs";
 import { overrideAIConfig } from "@rpascene/shared/env";
 import { commandMap } from "@rpascene/shared/constants";
+import { useHistoryStore } from "../../store/history.mjs";
 import "./index.css";
 const { Text } = Typography;
 function getSDKId(sdk) {
@@ -42,11 +43,12 @@ function ErrorMessage(param) {
     });
 }
 function UniversalPlayground(param) {
-    let { playgroundSDK, storage, contextProvider, config: componentConfig = {}, branding = {}, className = '', dryMode = false, showContextPreview = true, showPromptInput = true, onHumanUse = ()=>{}, showHumanUse = false } = param;
+    let { playgroundSDK, storage, contextProvider, config: componentConfig = {}, branding = {}, className = '', dryMode = false, showContextPreview = true, showPromptInput = true, onHumanUse = ()=>{}, showHumanUse = false, defaultSelectedType } = param;
     const [form] = Form.useForm();
     const { config } = useEnvConfig();
     const [sdkReady, setSdkReady] = useState(false);
     const ref = useRef(null);
+    const setLastSelectedType = useHistoryStore((state)=>state.setLastSelectedType);
     useEffect(()=>{
         const initializeSDK = async ()=>{
             if (playgroundSDK && 'function' == typeof playgroundSDK.checkStatus) try {
@@ -85,11 +87,6 @@ function UniversalPlayground(param) {
         playgroundSDK,
         config
     ]);
-    useEffect(()=>{
-        form.setFieldValue('type', 'aiTap');
-    }, [
-        form
-    ]);
     const handleFormRun = useCallback(async ()=>{
         try {
             const value = form.getFieldsValue();
@@ -144,6 +141,15 @@ function UniversalPlayground(param) {
         canStop,
         handleStop
     ]);
+    useEffect(()=>{
+        if (defaultSelectedType) {
+            setLastSelectedType(defaultSelectedType);
+            form.setFieldValue('type', defaultSelectedType);
+        }
+    }, [
+        defaultSelectedType,
+        setLastSelectedType
+    ]);
     return /*#__PURE__*/ jsx("div", {
         id: "playground-container",
         className: `playground-container ${layout}-mode ${className}`.trim(),
@@ -152,9 +158,6 @@ function UniversalPlayground(param) {
             form: form,
             onFinish: handleFormRun,
             className: "command-form",
-            initialValues: {
-                type: 'aiTap'
-            },
             children: [
                 finalShowContextPreview && /*#__PURE__*/ jsx("div", {
                     className: "context-preview-section",

package/dist/es/hooks/usePlaygroundExecution - /345/211/257/346/234/254.mjs"

@@ -0,0 +1,327 @@
+import { useCallback, useRef } from "react";
+import { useEnvConfig } from "../store/store.mjs";
+import { noReplayAPIs } from "@rpascene/playground";
+import { BLANK_RESULT } from "../utils/constants.mjs";
+import { allScriptsFromDump } from "../utils/replay-scripts.mjs";
+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 TaskNode {
+    constructor(taskId, prompt, next = null){
+        _define_property(this, "taskId", void 0);
+        _define_property(this, "prompt", void 0);
+        _define_property(this, "next", void 0);
+        _define_property(this, "result", void 0);
+        _define_property(this, "status", void 0);
+        this.taskId = taskId;
+        this.prompt = prompt;
+        this.next = next;
+        this.result = null;
+        this.status = 'pending';
+    }
+}
+function usePlaygroundExecution(playgroundSDK, storage, actionSpace, loading, setLoading, infoList, setInfoList, replayCounter, setReplayCounter, verticalMode, currentRunningIdRef, interruptedFlagRef, showHumanUse) {
+    const toBeUsedRef = useRef([]);
+    const isCancelledRef = useRef(false);
+    const currentNodeRef = useRef();
+    const { deepThink, screenshotIncluded, domIncluded } = useEnvConfig();
+    const setUsedInfoList = ()=>{
+        if (toBeUsedRef.current.length > 0) {
+            const thisRunningId = Date.now();
+            const systemItem = {
+                id: `system-${thisRunningId}`,
+                type: 'system',
+                content: '',
+                timestamp: new Date(),
+                loading: false,
+                loadingProgressText: '',
+                actionTasks: toBeUsedRef.current
+            };
+            setInfoList((prev)=>[
+                    ...prev,
+                    systemItem
+                ]);
+            toBeUsedRef.current = [];
+        }
+    };
+    const handleRun = useCallback(async (value)=>{
+        console.log(value, "\u5728\u8FD9\u91CC\u5206\u5272value\uFF0C\u4E32\u884C\u6267\u884C\uFF0Cvalue-----------------------");
+        if (!playgroundSDK) return void console.warn('PlaygroundSDK is not available');
+        const executeTask = async (value)=>{
+            var _result_dump_executions_, _result_dump_executions;
+            const thisRunningId = Date.now();
+            const actionType = value.type;
+            const sub = value.prompt || value.params ? value.prompt || JSON.stringify(value.params) : '';
+            const displayContent = sub ? `${value.type}: ${sub}` : value.type;
+            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(()=>{});
+                if (playgroundSDK.onProgressUpdate) playgroundSDK.onProgressUpdate((tip)=>{
+                    if (interruptedFlagRef.current[thisRunningId]) return;
+                    setInfoList((prev)=>{
+                        const lastItem = prev[prev.length - 1];
+                        if (lastItem && 'progress' === lastItem.type && lastItem.content === tip) return prev;
+                        const progressItem = {
+                            id: `progress-${thisRunningId}-${Date.now()}`,
+                            type: 'progress',
+                            content: tip,
+                            timestamp: new Date()
+                        };
+                        return [
+                            ...prev,
+                            progressItem
+                        ];
+                    });
+                });
+                result.result = await playgroundSDK.executeAction(actionType, value, {
+                    requestId: thisRunningId.toString(),
+                    deepThink,
+                    screenshotIncluded,
+                    domIncluded
+                });
+                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:', result);
+            }
+            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);
+            }
+            if (showHumanUse && result && result.dump && (null == (_result_dump_executions = result.dump.executions) ? void 0 : null == (_result_dump_executions_ = _result_dump_executions[0]) ? void 0 : _result_dump_executions_.tasks)) {
+                var _result_dump_executions_1, _result_dump_executions1, _result_dump;
+                const tasks = (null == result ? void 0 : null == (_result_dump = result.dump) ? void 0 : null == (_result_dump_executions1 = _result_dump.executions) ? void 0 : null == (_result_dump_executions_1 = _result_dump_executions1[0]) ? void 0 : _result_dump_executions_1.tasks) || [];
+                const actionTasks = tasks.map((item, index)=>{
+                    if ('Action' === item.type) {
+                        var _tasks__param, _tasks_;
+                        if ('DragAndDrop' === item.subType) {
+                            var _tasks__param1, _tasks_1, _tasks__param2, _tasks_2;
+                            const from = (null == (_tasks_1 = tasks[index - 2]) ? void 0 : null == (_tasks__param1 = _tasks_1.param) ? void 0 : _tasks__param1.prompt) || '';
+                            const to = (null == (_tasks_2 = tasks[index - 1]) ? void 0 : null == (_tasks__param2 = _tasks_2.param) ? void 0 : _tasks__param2.prompt) || '';
+                            return {
+                                ...item,
+                                param: {
+                                    ...item.param,
+                                    from: {
+                                        ...item.param.from,
+                                        locateDescription: from
+                                    },
+                                    to: {
+                                        ...item.param.to,
+                                        locateDescription: to
+                                    }
+                                },
+                                output: {
+                                    ...item.output,
+                                    param: {
+                                        ...item.output.param,
+                                        from: {
+                                            ...item.output.param.from,
+                                            locateDescription: from
+                                        },
+                                        to: {
+                                            ...item.output.param.to,
+                                            locateDescription: to
+                                        }
+                                    }
+                                }
+                            };
+                        }
+                        return {
+                            ...item,
+                            locateDescription: (null == (_tasks_ = tasks[index - 1]) ? void 0 : null == (_tasks__param = _tasks_.param) ? void 0 : _tasks__param.prompt) || ''
+                        };
+                    }
+                    return item;
+                });
+                toBeUsedRef.current = toBeUsedRef.current.concat(actionTasks.filter((item)=>'Action' === item.type));
+            }
+            const separatorItem = {
+                id: `separator-${thisRunningId}`,
+                type: 'separator',
+                content: 'New Session',
+                timestamp: new Date()
+            };
+            setInfoList((prev)=>[
+                    ...prev,
+                    separatorItem
+                ]);
+            return {
+                ...result,
+                reportHTML: null
+            };
+        };
+        if ('aiAction' !== value.type) return await executeTask(value);
+        {
+            var _value_prompt;
+            toBeUsedRef.current = [];
+            isCancelledRef.current = false;
+            currentNodeRef.current = null;
+            const prompts = (null == (_value_prompt = value.prompt) ? void 0 : _value_prompt.split("\n").map((item)=>item.trim()).filter(Boolean)) || [];
+            const createTaskList = function() {
+                let prompts = arguments.length > 0 && void 0 !== arguments[0] ? arguments[0] : [];
+                let head = null;
+                let current = null;
+                for (let prompt of prompts){
+                    const taskNode = new TaskNode(Date.now(), prompt, null);
+                    if (!head) head = taskNode;
+                    if (current) current.next = taskNode;
+                    current = taskNode;
+                }
+                return head;
+            };
+            const executeTaskList = async (task)=>{
+                let current = task;
+                while(current && !isCancelledRef.current)try {
+                    current.status = 'running';
+                    const value = {
+                        type: 'aiAction',
+                        prompt: current.prompt
+                    };
+                    const result = await executeTask(value);
+                    current.result = result;
+                    current.status = 'completed';
+                    currentNodeRef.current = current = current.next;
+                } catch (error) {
+                    if (current) current.status = 'error';
+                    break;
+                }
+            };
+            const task = createTaskList(prompts);
+            await executeTaskList(task);
+            setUsedInfoList();
+        }
+    }, [
+        playgroundSDK,
+        storage,
+        actionSpace,
+        setLoading,
+        setInfoList,
+        replayCounter,
+        setReplayCounter,
+        verticalMode,
+        currentRunningIdRef,
+        interruptedFlagRef,
+        deepThink,
+        screenshotIncluded,
+        domIncluded,
+        showHumanUse
+    ]);
+    const handleStop = useCallback(async ()=>{
+        const thisRunningId = currentRunningIdRef.current;
+        if (thisRunningId && playgroundSDK && playgroundSDK.cancelExecution) try {
+            isCancelledRef.current = true;
+            await playgroundSDK.cancelExecution(thisRunningId.toString());
+            interruptedFlagRef.current[thisRunningId] = true;
+            if (currentNodeRef.current) currentNodeRef.current.status = 'cancelled';
+            setLoading(false);
+            if (playgroundSDK.onProgressUpdate) playgroundSDK.onProgressUpdate(()=>{});
+            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
+                ]);
+            setUsedInfoList();
+        } catch (error) {
+            console.error('Failed to stop execution:', error);
+        }
+    }, [
+        playgroundSDK,
+        currentRunningIdRef,
+        interruptedFlagRef,
+        setLoading,
+        setInfoList
+    ]);
+    const canStop = loading && !!currentRunningIdRef.current && !!playgroundSDK && !!playgroundSDK.cancelExecution;
+    return {
+        handleRun,
+        handleStop,
+        canStop
+    };
+}
+export { usePlaygroundExecution };

package/dist/lib/component/prompt-input/index.js

@@ -223,15 +223,7 @@ const PromptInput = (param)=>{
     (0, external_react_namespaceObject.useEffect)(()=>{
         const lastHistory = historyForSelectedType[0];
         if (lastHistory && lastHistoryRef.current && lastHistory.timestamp === lastHistoryRef.current.timestamp) return;
-        if (lastHistory) {
-            form.setFieldsValue({
-                type: lastHistory.type,
-                prompt: lastHistory.prompt || '',
-                params: lastHistory.params
-            });
-            setPromptValue(lastHistory.prompt || '');
-            lastHistoryRef.current = lastHistory;
-        } else {
+        {
             const defaultParams = getDefaultParams();
             form.setFieldsValue({
                 prompt: '',

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

@@ -52,6 +52,7 @@ const external_prompt_input_index_js_namespaceObject = require("../prompt-input/
 const storage_provider_js_namespaceObject = require("./providers/storage-provider.js");
 const env_namespaceObject = require("@rpascene/shared/env");
 const constants_namespaceObject = require("@rpascene/shared/constants");
+const history_js_namespaceObject = require("../../store/history.js");
 require("./index.css");
 const { Text } = external_antd_namespaceObject.Typography;
 function getSDKId(sdk) {
@@ -82,11 +83,12 @@ function ErrorMessage(param) {
     });
 }
 function UniversalPlayground(param) {
-    let { playgroundSDK, storage, contextProvider, config: componentConfig = {}, branding = {}, className = '', dryMode = false, showContextPreview = true, showPromptInput = true, onHumanUse = ()=>{}, showHumanUse = false } = param;
+    let { playgroundSDK, storage, contextProvider, config: componentConfig = {}, branding = {}, className = '', dryMode = false, showContextPreview = true, showPromptInput = true, onHumanUse = ()=>{}, showHumanUse = false, defaultSelectedType } = param;
     const [form] = external_antd_namespaceObject.Form.useForm();
     const { config } = (0, store_js_namespaceObject.useEnvConfig)();
     const [sdkReady, setSdkReady] = (0, external_react_namespaceObject.useState)(false);
     const ref = (0, external_react_namespaceObject.useRef)(null);
+    const setLastSelectedType = (0, history_js_namespaceObject.useHistoryStore)((state)=>state.setLastSelectedType);
     (0, external_react_namespaceObject.useEffect)(()=>{
         const initializeSDK = async ()=>{
             if (playgroundSDK && 'function' == typeof playgroundSDK.checkStatus) try {
@@ -125,11 +127,6 @@ function UniversalPlayground(param) {
         playgroundSDK,
         config
     ]);
-    (0, external_react_namespaceObject.useEffect)(()=>{
-        form.setFieldValue('type', 'aiTap');
-    }, [
-        form
-    ]);
     const handleFormRun = (0, external_react_namespaceObject.useCallback)(async ()=>{
         try {
             const value = form.getFieldsValue();
@@ -184,6 +181,15 @@ function UniversalPlayground(param) {
         canStop,
         handleStop
     ]);
+    (0, external_react_namespaceObject.useEffect)(()=>{
+        if (defaultSelectedType) {
+            setLastSelectedType(defaultSelectedType);
+            form.setFieldValue('type', defaultSelectedType);
+        }
+    }, [
+        defaultSelectedType,
+        setLastSelectedType
+    ]);
     return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
         id: "playground-container",
         className: `playground-container ${layout}-mode ${className}`.trim(),
@@ -192,9 +198,6 @@ function UniversalPlayground(param) {
             form: form,
             onFinish: handleFormRun,
             className: "command-form",
-            initialValues: {
-                type: 'aiTap'
-            },
             children: [
                 finalShowContextPreview && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
                     className: "context-preview-section",

package/dist/lib/hooks/usePlaygroundExecution - /345/211/257/346/234/254.js"

@@ -0,0 +1,361 @@
+"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 store_js_namespaceObject = require("../store/store.js");
+const playground_namespaceObject = require("@rpascene/playground");
+const constants_js_namespaceObject = require("../utils/constants.js");
+const replay_scripts_js_namespaceObject = require("../utils/replay-scripts.js");
+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 TaskNode {
+    constructor(taskId, prompt, next = null){
+        _define_property(this, "taskId", void 0);
+        _define_property(this, "prompt", void 0);
+        _define_property(this, "next", void 0);
+        _define_property(this, "result", void 0);
+        _define_property(this, "status", void 0);
+        this.taskId = taskId;
+        this.prompt = prompt;
+        this.next = next;
+        this.result = null;
+        this.status = 'pending';
+    }
+}
+function usePlaygroundExecution(playgroundSDK, storage, actionSpace, loading, setLoading, infoList, setInfoList, replayCounter, setReplayCounter, verticalMode, currentRunningIdRef, interruptedFlagRef, showHumanUse) {
+    const toBeUsedRef = (0, external_react_namespaceObject.useRef)([]);
+    const isCancelledRef = (0, external_react_namespaceObject.useRef)(false);
+    const currentNodeRef = (0, external_react_namespaceObject.useRef)();
+    const { deepThink, screenshotIncluded, domIncluded } = (0, store_js_namespaceObject.useEnvConfig)();
+    const setUsedInfoList = ()=>{
+        if (toBeUsedRef.current.length > 0) {
+            const thisRunningId = Date.now();
+            const systemItem = {
+                id: `system-${thisRunningId}`,
+                type: 'system',
+                content: '',
+                timestamp: new Date(),
+                loading: false,
+                loadingProgressText: '',
+                actionTasks: toBeUsedRef.current
+            };
+            setInfoList((prev)=>[
+                    ...prev,
+                    systemItem
+                ]);
+            toBeUsedRef.current = [];
+        }
+    };
+    const handleRun = (0, external_react_namespaceObject.useCallback)(async (value)=>{
+        console.log(value, "\u5728\u8FD9\u91CC\u5206\u5272value\uFF0C\u4E32\u884C\u6267\u884C\uFF0Cvalue-----------------------");
+        if (!playgroundSDK) return void console.warn('PlaygroundSDK is not available');
+        const executeTask = async (value)=>{
+            var _result_dump_executions_, _result_dump_executions;
+            const thisRunningId = Date.now();
+            const actionType = value.type;
+            const sub = value.prompt || value.params ? value.prompt || JSON.stringify(value.params) : '';
+            const displayContent = sub ? `${value.type}: ${sub}` : value.type;
+            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(()=>{});
+                if (playgroundSDK.onProgressUpdate) playgroundSDK.onProgressUpdate((tip)=>{
+                    if (interruptedFlagRef.current[thisRunningId]) return;
+                    setInfoList((prev)=>{
+                        const lastItem = prev[prev.length - 1];
+                        if (lastItem && 'progress' === lastItem.type && lastItem.content === tip) return prev;
+                        const progressItem = {
+                            id: `progress-${thisRunningId}-${Date.now()}`,
+                            type: 'progress',
+                            content: tip,
+                            timestamp: new Date()
+                        };
+                        return [
+                            ...prev,
+                            progressItem
+                        ];
+                    });
+                });
+                result.result = await playgroundSDK.executeAction(actionType, value, {
+                    requestId: thisRunningId.toString(),
+                    deepThink,
+                    screenshotIncluded,
+                    domIncluded
+                });
+                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:', result);
+            }
+            if (interruptedFlagRef.current[thisRunningId]) return;
+            setLoading(false);
+            currentRunningIdRef.current = null;
+            let replayInfo = null;
+            let counter = replayCounter;
+            if ((null == result ? void 0 : result.dump) && !playground_namespaceObject.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);
+            }
+            if (showHumanUse && result && result.dump && (null == (_result_dump_executions = result.dump.executions) ? void 0 : null == (_result_dump_executions_ = _result_dump_executions[0]) ? void 0 : _result_dump_executions_.tasks)) {
+                var _result_dump_executions_1, _result_dump_executions1, _result_dump;
+                const tasks = (null == result ? void 0 : null == (_result_dump = result.dump) ? void 0 : null == (_result_dump_executions1 = _result_dump.executions) ? void 0 : null == (_result_dump_executions_1 = _result_dump_executions1[0]) ? void 0 : _result_dump_executions_1.tasks) || [];
+                const actionTasks = tasks.map((item, index)=>{
+                    if ('Action' === item.type) {
+                        var _tasks__param, _tasks_;
+                        if ('DragAndDrop' === item.subType) {
+                            var _tasks__param1, _tasks_1, _tasks__param2, _tasks_2;
+                            const from = (null == (_tasks_1 = tasks[index - 2]) ? void 0 : null == (_tasks__param1 = _tasks_1.param) ? void 0 : _tasks__param1.prompt) || '';
+                            const to = (null == (_tasks_2 = tasks[index - 1]) ? void 0 : null == (_tasks__param2 = _tasks_2.param) ? void 0 : _tasks__param2.prompt) || '';
+                            return {
+                                ...item,
+                                param: {
+                                    ...item.param,
+                                    from: {
+                                        ...item.param.from,
+                                        locateDescription: from
+                                    },
+                                    to: {
+                                        ...item.param.to,
+                                        locateDescription: to
+                                    }
+                                },
+                                output: {
+                                    ...item.output,
+                                    param: {
+                                        ...item.output.param,
+                                        from: {
+                                            ...item.output.param.from,
+                                            locateDescription: from
+                                        },
+                                        to: {
+                                            ...item.output.param.to,
+                                            locateDescription: to
+                                        }
+                                    }
+                                }
+                            };
+                        }
+                        return {
+                            ...item,
+                            locateDescription: (null == (_tasks_ = tasks[index - 1]) ? void 0 : null == (_tasks__param = _tasks_.param) ? void 0 : _tasks__param.prompt) || ''
+                        };
+                    }
+                    return item;
+                });
+                toBeUsedRef.current = toBeUsedRef.current.concat(actionTasks.filter((item)=>'Action' === item.type));
+            }
+            const separatorItem = {
+                id: `separator-${thisRunningId}`,
+                type: 'separator',
+                content: 'New Session',
+                timestamp: new Date()
+            };
+            setInfoList((prev)=>[
+                    ...prev,
+                    separatorItem
+                ]);
+            return {
+                ...result,
+                reportHTML: null
+            };
+        };
+        if ('aiAction' !== value.type) return await executeTask(value);
+        {
+            var _value_prompt;
+            toBeUsedRef.current = [];
+            isCancelledRef.current = false;
+            currentNodeRef.current = null;
+            const prompts = (null == (_value_prompt = value.prompt) ? void 0 : _value_prompt.split("\n").map((item)=>item.trim()).filter(Boolean)) || [];
+            const createTaskList = function() {
+                let prompts = arguments.length > 0 && void 0 !== arguments[0] ? arguments[0] : [];
+                let head = null;
+                let current = null;
+                for (let prompt of prompts){
+                    const taskNode = new TaskNode(Date.now(), prompt, null);
+                    if (!head) head = taskNode;
+                    if (current) current.next = taskNode;
+                    current = taskNode;
+                }
+                return head;
+            };
+            const executeTaskList = async (task)=>{
+                let current = task;
+                while(current && !isCancelledRef.current)try {
+                    current.status = 'running';
+                    const value = {
+                        type: 'aiAction',
+                        prompt: current.prompt
+                    };
+                    const result = await executeTask(value);
+                    current.result = result;
+                    current.status = 'completed';
+                    currentNodeRef.current = current = current.next;
+                } catch (error) {
+                    if (current) current.status = 'error';
+                    break;
+                }
+            };
+            const task = createTaskList(prompts);
+            await executeTaskList(task);
+            setUsedInfoList();
+        }
+    }, [
+        playgroundSDK,
+        storage,
+        actionSpace,
+        setLoading,
+        setInfoList,
+        replayCounter,
+        setReplayCounter,
+        verticalMode,
+        currentRunningIdRef,
+        interruptedFlagRef,
+        deepThink,
+        screenshotIncluded,
+        domIncluded,
+        showHumanUse
+    ]);
+    const handleStop = (0, external_react_namespaceObject.useCallback)(async ()=>{
+        const thisRunningId = currentRunningIdRef.current;
+        if (thisRunningId && playgroundSDK && playgroundSDK.cancelExecution) try {
+            isCancelledRef.current = true;
+            await playgroundSDK.cancelExecution(thisRunningId.toString());
+            interruptedFlagRef.current[thisRunningId] = true;
+            if (currentNodeRef.current) currentNodeRef.current.status = 'cancelled';
+            setLoading(false);
+            if (playgroundSDK.onProgressUpdate) playgroundSDK.onProgressUpdate(()=>{});
+            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
+                ]);
+            setUsedInfoList();
+        } catch (error) {
+            console.error('Failed to stop execution:', error);
+        }
+    }, [
+        playgroundSDK,
+        currentRunningIdRef,
+        interruptedFlagRef,
+        setLoading,
+        setInfoList
+    ]);
+    const canStop = loading && !!currentRunningIdRef.current && !!playgroundSDK && !!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/types/component/universal-playground/index.d.ts

@@ -1,4 +1,4 @@
 import type { UniversalPlaygroundProps } from '../../types';
 import './index.less';
-export declare function UniversalPlayground({ playgroundSDK, storage, contextProvider, config: componentConfig, branding, className, dryMode, showContextPreview, showPromptInput, onHumanUse, showHumanUse }: UniversalPlaygroundProps): import("react").JSX.Element;
+export declare function UniversalPlayground({ playgroundSDK, storage, contextProvider, config: componentConfig, branding, className, dryMode, showContextPreview, showPromptInput, onHumanUse, showHumanUse, defaultSelectedType }: UniversalPlaygroundProps): import("react").JSX.Element;
 export default UniversalPlayground;

package/dist/types/hooks/usePlaygroundExecution - /345/211/257/346/234/254.d.ts"

@@ -0,0 +1,15 @@
+import type { DeviceAction } from '@rpascene/core';
+import type { FormValue, InfoListItem, PlaygroundSDKLike, StorageProvider } from '../types';
+/**
+ * Hook for handling playground execution logic
+ */
+export declare function usePlaygroundExecution(playgroundSDK: PlaygroundSDKLike | null, storage: StorageProvider | undefined | null, actionSpace: DeviceAction<unknown>[], loading: boolean, setLoading: (loading: boolean) => void, infoList: InfoListItem[], setInfoList: React.Dispatch<React.SetStateAction<InfoListItem[]>>, replayCounter: number, setReplayCounter: React.Dispatch<React.SetStateAction<number>>, verticalMode: boolean, currentRunningIdRef: React.MutableRefObject<number | null>, interruptedFlagRef: React.MutableRefObject<Record<number, boolean>>, showHumanUse: boolean): {
+    handleRun: (value: FormValue) => Promise<{
+        reportHTML: null;
+        result: any;
+        dump?: import("@rpascene/core").GroupedActionDump | null;
+        error: string | null;
+    } | undefined>;
+    handleStop: () => Promise<void>;
+    canStop: boolean;
+};

package/dist/types/types.d.ts

@@ -162,4 +162,5 @@ export interface UniversalPlaygroundProps {
     showPromptInput?: boolean;
     onHumanUse?: (commands?: any) => void;
     showHumanUse?: boolean;
+    defaultSelectedType?: string;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rpascene/visualizer",
-  "version": "0.30.16",
+  "version": "0.30.17",
   "description": "RPA visualizer",
   "repository": "",
   "homepage": "",
@@ -72,10 +72,10 @@
     "antd": "^5.21.6",
     "buffer": "6.0.3",
     "dayjs": "^1.11.11",
-    "@rpascene/playground": "0.30.16",
-    "@rpascene/web": "0.30.16",
-    "@rpascene/shared": "0.30.16",
-    "@rpascene/core": "0.30.16"
+    "@rpascene/core": "0.30.17",
+    "@rpascene/web": "0.30.17",
+    "@rpascene/playground": "0.30.17",
+    "@rpascene/shared": "0.30.17"
   },
   "license": "MIT",
   "scripts": {