@midscene/visualizer 1.6.3 → 1.6.4

package/dist/es/component/env-config/index.mjs

@@ -1,33 +1,118 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { SettingOutlined } from "@ant-design/icons";
-import { Input, Modal, Tooltip } from "antd";
+import { Alert, Button, Input, Modal, Tooltip, message } from "antd";
 import { useEffect, useRef, useState } from "react";
 import { useEnvConfig } from "../../store/store.mjs";
-function EnvConfig({ showTooltipWhenEmpty = true, showModelName = true, tooltipPlacement = 'bottom', mode = 'icon' }) {
+function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) {
+    try {
+        var info = gen[key](arg);
+        var value = info.value;
+    } catch (error) {
+        reject(error);
+        return;
+    }
+    if (info.done) resolve(value);
+    else Promise.resolve(value).then(_next, _throw);
+}
+function _async_to_generator(fn) {
+    return function() {
+        var self = this, args = arguments;
+        return new Promise(function(resolve, reject) {
+            var gen = fn.apply(self, args);
+            function _next(value) {
+                asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value);
+            }
+            function _throw(err) {
+                asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err);
+            }
+            _next(void 0);
+        });
+    };
+}
+function EnvConfig({ showTooltipWhenEmpty = true, showModelName = true, tooltipPlacement = 'bottom', mode = 'icon', playgroundSDK }) {
     const { config, configString, loadConfig, syncFromStorage } = useEnvConfig();
     const [isModalOpen, setIsModalOpen] = useState(false);
     const [tempConfigString, setTempConfigString] = useState(configString);
+    const [connectivityResult, setConnectivityResult] = useState(null);
+    const [connectivityLoading, setConnectivityLoading] = useState(false);
     const midsceneModelName = config.MIDSCENE_MODEL_NAME;
+    const canRunConnectivityTest = !!(null == playgroundSDK ? void 0 : playgroundSDK.runConnectivityTest) && !!(null == playgroundSDK ? void 0 : playgroundSDK.overrideConfig);
     const componentRef = useRef(null);
+    const closeTimerRef = useRef(null);
+    const clearCloseTimer = ()=>{
+        if (null !== closeTimerRef.current) {
+            window.clearTimeout(closeTimerRef.current);
+            closeTimerRef.current = null;
+        }
+    };
     const showModal = (e)=>{
         syncFromStorage();
+        clearCloseTimer();
         setIsModalOpen(true);
         e.preventDefault();
         e.stopPropagation();
     };
     const handleOk = ()=>{
+        clearCloseTimer();
         setIsModalOpen(false);
         loadConfig(tempConfigString);
     };
+    const handleSaveAndRun = ()=>_async_to_generator(function*() {
+            const sdk = playgroundSDK;
+            if (!(null == sdk ? void 0 : sdk.overrideConfig) || !(null == sdk ? void 0 : sdk.runConnectivityTest)) return;
+            try {
+                setConnectivityLoading(true);
+                setConnectivityResult(null);
+                loadConfig(tempConfigString);
+                const nextConfig = useEnvConfig.getState().config;
+                yield sdk.overrideConfig(nextConfig);
+                const result = yield sdk.runConnectivityTest();
+                setConnectivityResult(result);
+                if (result.passed) {
+                    message.success('Model verification passed');
+                    clearCloseTimer();
+                    closeTimerRef.current = window.setTimeout(()=>{
+                        setIsModalOpen(false);
+                        closeTimerRef.current = null;
+                    }, 2000);
+                } else message.warning('Model verification found issues');
+            } catch (error) {
+                const errorMessage = error instanceof Error ? error.message : String(error);
+                message.error(`Model verification failed: ${errorMessage}`);
+                setConnectivityResult({
+                    passed: false,
+                    checks: [
+                        {
+                            name: 'text',
+                            intent: 'default',
+                            modelName: useEnvConfig.getState().config.MIDSCENE_MODEL_NAME || '',
+                            modelFamily: void 0,
+                            passed: false,
+                            durationMs: 0,
+                            message: errorMessage
+                        }
+                    ]
+                });
+            } finally{
+                setConnectivityLoading(false);
+            }
+        })();
     const handleCancel = ()=>{
+        clearCloseTimer();
         setIsModalOpen(false);
     };
     useEffect(()=>{
-        if (isModalOpen) setTempConfigString(configString);
+        if (isModalOpen) {
+            setTempConfigString(configString);
+            setConnectivityResult(null);
+        }
     }, [
         isModalOpen,
         configString
     ]);
+    useEffect(()=>()=>{
+            clearCloseTimer();
+        }, []);
     return /*#__PURE__*/ jsxs("div", {
         style: {
             display: 'flex',
@@ -67,7 +152,28 @@ function EnvConfig({ showTooltipWhenEmpty = true, showModelName = true, tooltipP
                 open: isModalOpen,
                 onOk: handleOk,
                 onCancel: handleCancel,
-                okText: "Save",
+                footer: /*#__PURE__*/ jsxs("div", {
+                    style: {
+                        display: 'flex',
+                        justifyContent: 'flex-end',
+                        alignItems: 'center',
+                        gap: 8
+                    },
+                    children: [
+                        canRunConnectivityTest ? /*#__PURE__*/ jsx(Button, {
+                            type: "primary",
+                            ghost: true,
+                            loading: connectivityLoading,
+                            onClick: handleSaveAndRun,
+                            children: "Save and Verify Model"
+                        }, "save-and-run") : null,
+                        /*#__PURE__*/ jsx(Button, {
+                            type: "primary",
+                            onClick: handleOk,
+                            children: "Save"
+                        }, "save")
+                    ]
+                }),
                 style: {
                     width: '800px',
                     height: '100%',
@@ -102,7 +208,27 @@ function EnvConfig({ showTooltipWhenEmpty = true, showModelName = true, tooltipP
                                 ]
                             })
                         ]
-                    })
+                    }),
+                    connectivityResult ? /*#__PURE__*/ jsx(Alert, {
+                        type: connectivityResult.passed ? 'success' : 'warning',
+                        showIcon: true,
+                        message: connectivityResult.passed ? 'Model verification passed' : 'Model verification failed',
+                        description: /*#__PURE__*/ jsx("div", {
+                            children: connectivityResult.checks.map((item)=>/*#__PURE__*/ jsxs("div", {
+                                    children: [
+                                        item.modelName,
+                                        " (",
+                                        item.intent,
+                                        "):",
+                                        ' ',
+                                        item.passed ? 'OK.' : `Failed.${item.message ? ` ${item.message}` : ''}`
+                                    ]
+                                }, item.name))
+                        }),
+                        style: {
+                            marginTop: 16
+                        }
+                    }) : null
                 ]
             })
         ]

package/dist/es/component/nav-actions/index.mjs

@@ -3,7 +3,7 @@ import { GithubOutlined, QuestionCircleOutlined } from "@ant-design/icons";
 import { Typography } from "antd";
 import { EnvConfig } from "../env-config/index.mjs";
 import "./style.css";
-function NavActions({ showEnvConfig = true, showTooltipWhenEmpty = false, showModelName = false, githubUrl = 'https://github.com/web-infra-dev/midscene', helpUrl = 'https://midscenejs.com/quick-experience.html', className = '' }) {
+function NavActions({ showEnvConfig = true, showTooltipWhenEmpty = false, showModelName = false, githubUrl = 'https://github.com/web-infra-dev/midscene', helpUrl = 'https://midscenejs.com/quick-experience.html', className = '', playgroundSDK }) {
     return /*#__PURE__*/ jsxs("div", {
         className: `nav-actions ${className}`,
         children: [
@@ -23,7 +23,8 @@ function NavActions({ showEnvConfig = true, showTooltipWhenEmpty = false, showMo
             }),
             showEnvConfig && /*#__PURE__*/ jsx(EnvConfig, {
                 showTooltipWhenEmpty: showTooltipWhenEmpty,
-                showModelName: showModelName
+                showModelName: showModelName,
+                playgroundSDK: playgroundSDK
             })
         ]
     });

package/dist/es/component/shiny-text/index.css

@@ -2,7 +2,7 @@
   color: rgba(0, 0, 0, 0);
   letter-spacing: .5px;
   text-shadow: 0 1px 2px rgba(0, 0, 0, .05);
-  background-image: linear-gradient(45deg, #2b83ff, #6a11cb, #2575fc, #4481eb);
+  background-image: linear-gradient(45deg, #2b83ff, #1d9bf0, #2575fc, #4481eb);
   background-size: 300%;
   -webkit-background-clip: text;
   background-clip: text;
@@ -14,7 +14,7 @@
 }
 
 .shiny-text.theme-blue {
-  background-image: linear-gradient(45deg, #2b83ff, #6a11cb, #2575fc, #4481eb);
+  background-image: linear-gradient(45deg, #2b83ff, #1d9bf0, #2575fc, #4481eb);
 }
 
 .shiny-text.theme-purple {
@@ -60,7 +60,7 @@
   color: rgba(0, 0, 0, 0);
   -webkit-text-fill-color: transparent;
   text-shadow: none;
-  background-image: linear-gradient(45deg, #a78bfa, #c084fc, #e879f9, #c084fc);
+  background-image: linear-gradient(45deg, #7dd3fc, #60a5fa, #38bdf8, #60a5fa);
   background-size: 300%;
   -webkit-background-clip: text;
   background-clip: text;

package/dist/lib/component/env-config/index.js

@@ -31,31 +31,116 @@ const icons_namespaceObject = require("@ant-design/icons");
 const external_antd_namespaceObject = require("antd");
 const external_react_namespaceObject = require("react");
 const store_js_namespaceObject = require("../../store/store.js");
-function EnvConfig({ showTooltipWhenEmpty = true, showModelName = true, tooltipPlacement = 'bottom', mode = 'icon' }) {
+function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) {
+    try {
+        var info = gen[key](arg);
+        var value = info.value;
+    } catch (error) {
+        reject(error);
+        return;
+    }
+    if (info.done) resolve(value);
+    else Promise.resolve(value).then(_next, _throw);
+}
+function _async_to_generator(fn) {
+    return function() {
+        var self = this, args = arguments;
+        return new Promise(function(resolve, reject) {
+            var gen = fn.apply(self, args);
+            function _next(value) {
+                asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value);
+            }
+            function _throw(err) {
+                asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err);
+            }
+            _next(void 0);
+        });
+    };
+}
+function EnvConfig({ showTooltipWhenEmpty = true, showModelName = true, tooltipPlacement = 'bottom', mode = 'icon', playgroundSDK }) {
     const { config, configString, loadConfig, syncFromStorage } = (0, store_js_namespaceObject.useEnvConfig)();
     const [isModalOpen, setIsModalOpen] = (0, external_react_namespaceObject.useState)(false);
     const [tempConfigString, setTempConfigString] = (0, external_react_namespaceObject.useState)(configString);
+    const [connectivityResult, setConnectivityResult] = (0, external_react_namespaceObject.useState)(null);
+    const [connectivityLoading, setConnectivityLoading] = (0, external_react_namespaceObject.useState)(false);
     const midsceneModelName = config.MIDSCENE_MODEL_NAME;
+    const canRunConnectivityTest = !!(null == playgroundSDK ? void 0 : playgroundSDK.runConnectivityTest) && !!(null == playgroundSDK ? void 0 : playgroundSDK.overrideConfig);
     const componentRef = (0, external_react_namespaceObject.useRef)(null);
+    const closeTimerRef = (0, external_react_namespaceObject.useRef)(null);
+    const clearCloseTimer = ()=>{
+        if (null !== closeTimerRef.current) {
+            window.clearTimeout(closeTimerRef.current);
+            closeTimerRef.current = null;
+        }
+    };
     const showModal = (e)=>{
         syncFromStorage();
+        clearCloseTimer();
         setIsModalOpen(true);
         e.preventDefault();
         e.stopPropagation();
     };
     const handleOk = ()=>{
+        clearCloseTimer();
         setIsModalOpen(false);
         loadConfig(tempConfigString);
     };
+    const handleSaveAndRun = ()=>_async_to_generator(function*() {
+            const sdk = playgroundSDK;
+            if (!(null == sdk ? void 0 : sdk.overrideConfig) || !(null == sdk ? void 0 : sdk.runConnectivityTest)) return;
+            try {
+                setConnectivityLoading(true);
+                setConnectivityResult(null);
+                loadConfig(tempConfigString);
+                const nextConfig = store_js_namespaceObject.useEnvConfig.getState().config;
+                yield sdk.overrideConfig(nextConfig);
+                const result = yield sdk.runConnectivityTest();
+                setConnectivityResult(result);
+                if (result.passed) {
+                    external_antd_namespaceObject.message.success('Model verification passed');
+                    clearCloseTimer();
+                    closeTimerRef.current = window.setTimeout(()=>{
+                        setIsModalOpen(false);
+                        closeTimerRef.current = null;
+                    }, 2000);
+                } else external_antd_namespaceObject.message.warning('Model verification found issues');
+            } catch (error) {
+                const errorMessage = error instanceof Error ? error.message : String(error);
+                external_antd_namespaceObject.message.error(`Model verification failed: ${errorMessage}`);
+                setConnectivityResult({
+                    passed: false,
+                    checks: [
+                        {
+                            name: 'text',
+                            intent: 'default',
+                            modelName: store_js_namespaceObject.useEnvConfig.getState().config.MIDSCENE_MODEL_NAME || '',
+                            modelFamily: void 0,
+                            passed: false,
+                            durationMs: 0,
+                            message: errorMessage
+                        }
+                    ]
+                });
+            } finally{
+                setConnectivityLoading(false);
+            }
+        })();
     const handleCancel = ()=>{
+        clearCloseTimer();
         setIsModalOpen(false);
     };
     (0, external_react_namespaceObject.useEffect)(()=>{
-        if (isModalOpen) setTempConfigString(configString);
+        if (isModalOpen) {
+            setTempConfigString(configString);
+            setConnectivityResult(null);
+        }
     }, [
         isModalOpen,
         configString
     ]);
+    (0, external_react_namespaceObject.useEffect)(()=>()=>{
+            clearCloseTimer();
+        }, []);
     return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
         style: {
             display: 'flex',
@@ -95,7 +180,28 @@ function EnvConfig({ showTooltipWhenEmpty = true, showModelName = true, tooltipP
                 open: isModalOpen,
                 onOk: handleOk,
                 onCancel: handleCancel,
-                okText: "Save",
+                footer: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+                    style: {
+                        display: 'flex',
+                        justifyContent: 'flex-end',
+                        alignItems: 'center',
+                        gap: 8
+                    },
+                    children: [
+                        canRunConnectivityTest ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_antd_namespaceObject.Button, {
+                            type: "primary",
+                            ghost: true,
+                            loading: connectivityLoading,
+                            onClick: handleSaveAndRun,
+                            children: "Save and Verify Model"
+                        }, "save-and-run") : null,
+                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_antd_namespaceObject.Button, {
+                            type: "primary",
+                            onClick: handleOk,
+                            children: "Save"
+                        }, "save")
+                    ]
+                }),
                 style: {
                     width: '800px',
                     height: '100%',
@@ -130,7 +236,27 @@ function EnvConfig({ showTooltipWhenEmpty = true, showModelName = true, tooltipP
                                 ]
                             })
                         ]
-                    })
+                    }),
+                    connectivityResult ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_antd_namespaceObject.Alert, {
+                        type: connectivityResult.passed ? 'success' : 'warning',
+                        showIcon: true,
+                        message: connectivityResult.passed ? 'Model verification passed' : 'Model verification failed',
+                        description: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+                            children: connectivityResult.checks.map((item)=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+                                    children: [
+                                        item.modelName,
+                                        " (",
+                                        item.intent,
+                                        "):",
+                                        ' ',
+                                        item.passed ? 'OK.' : `Failed.${item.message ? ` ${item.message}` : ''}`
+                                    ]
+                                }, item.name))
+                        }),
+                        style: {
+                            marginTop: 16
+                        }
+                    }) : null
                 ]
             })
         ]

package/dist/lib/component/nav-actions/index.js

@@ -31,7 +31,7 @@ const icons_namespaceObject = require("@ant-design/icons");
 const external_antd_namespaceObject = require("antd");
 const index_js_namespaceObject = require("../env-config/index.js");
 require("./style.css");
-function NavActions({ showEnvConfig = true, showTooltipWhenEmpty = false, showModelName = false, githubUrl = 'https://github.com/web-infra-dev/midscene', helpUrl = 'https://midscenejs.com/quick-experience.html', className = '' }) {
+function NavActions({ showEnvConfig = true, showTooltipWhenEmpty = false, showModelName = false, githubUrl = 'https://github.com/web-infra-dev/midscene', helpUrl = 'https://midscenejs.com/quick-experience.html', className = '', playgroundSDK }) {
     return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
         className: `nav-actions ${className}`,
         children: [
@@ -51,7 +51,8 @@ function NavActions({ showEnvConfig = true, showTooltipWhenEmpty = false, showMo
             }),
             showEnvConfig && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(index_js_namespaceObject.EnvConfig, {
                 showTooltipWhenEmpty: showTooltipWhenEmpty,
-                showModelName: showModelName
+                showModelName: showModelName,
+                playgroundSDK: playgroundSDK
             })
         ]
     });

package/dist/lib/component/shiny-text/index.css

@@ -2,7 +2,7 @@
   color: rgba(0, 0, 0, 0);
   letter-spacing: .5px;
   text-shadow: 0 1px 2px rgba(0, 0, 0, .05);
-  background-image: linear-gradient(45deg, #2b83ff, #6a11cb, #2575fc, #4481eb);
+  background-image: linear-gradient(45deg, #2b83ff, #1d9bf0, #2575fc, #4481eb);
   background-size: 300%;
   -webkit-background-clip: text;
   background-clip: text;
@@ -14,7 +14,7 @@
 }
 
 .shiny-text.theme-blue {
-  background-image: linear-gradient(45deg, #2b83ff, #6a11cb, #2575fc, #4481eb);
+  background-image: linear-gradient(45deg, #2b83ff, #1d9bf0, #2575fc, #4481eb);
 }
 
 .shiny-text.theme-purple {
@@ -60,7 +60,7 @@
   color: rgba(0, 0, 0, 0);
   -webkit-text-fill-color: transparent;
   text-shadow: none;
-  background-image: linear-gradient(45deg, #a78bfa, #c084fc, #e879f9, #c084fc);
+  background-image: linear-gradient(45deg, #7dd3fc, #60a5fa, #38bdf8, #60a5fa);
   background-size: 300%;
   -webkit-background-clip: text;
   background-clip: text;

package/dist/types/component/env-config/index.d.ts

@@ -1,6 +1,8 @@
-export declare function EnvConfig({ showTooltipWhenEmpty, showModelName, tooltipPlacement, mode, }: {
+import type { PlaygroundSDKLike } from '../../types';
+export declare function EnvConfig({ showTooltipWhenEmpty, showModelName, tooltipPlacement, mode, playgroundSDK, }: {
     showTooltipWhenEmpty?: boolean;
     showModelName?: boolean;
     tooltipPlacement?: 'bottom' | 'top';
     mode?: 'icon' | 'text';
+    playgroundSDK?: PlaygroundSDKLike | null;
 }): import("react").JSX.Element;

package/dist/types/component/nav-actions/index.d.ts

@@ -1,3 +1,4 @@
+import type { PlaygroundSDKLike } from '../../types';
 import './style.less';
 export interface NavActionsProps {
     showEnvConfig?: boolean;
@@ -6,5 +7,6 @@ export interface NavActionsProps {
     githubUrl?: string;
     helpUrl?: string;
     className?: string;
+    playgroundSDK?: PlaygroundSDKLike | null;
 }
-export declare function NavActions({ showEnvConfig, showTooltipWhenEmpty, showModelName, githubUrl, helpUrl, className, }: NavActionsProps): import("react").JSX.Element;
+export declare function NavActions({ showEnvConfig, showTooltipWhenEmpty, showModelName, githubUrl, helpUrl, className, playgroundSDK, }: NavActionsProps): import("react").JSX.Element;

package/dist/types/types.d.ts

@@ -1,4 +1,4 @@
-import type { DeviceAction, ModelBrief, UIContext } from '@midscene/core';
+import type { ConnectivityTestResult, DeviceAction, ModelBrief, UIContext } from '@midscene/core';
 import type { ComponentType } from 'react';
 export interface ZodType {
     _def?: {
@@ -121,6 +121,7 @@ export interface PlaygroundSDKLike {
         reportHTML: string | null;
     }>;
     overrideConfig?(config: any): Promise<void>;
+    runConnectivityTest?(): Promise<ConnectivityTestResult>;
     checkStatus?(): Promise<boolean>;
     getServiceMode?(): 'In-Browser-Extension' | 'Server';
     getRuntimeInfo?(): Promise<PlaygroundRuntimeInfo | null>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@midscene/visualizer",
-  "version": "1.6.3",
+  "version": "1.6.4",
   "repository": "https://github.com/web-infra-dev/midscene",
   "homepage": "https://midscenejs.com/",
   "types": "./dist/types/index.d.ts",
@@ -58,10 +58,10 @@
     "antd": "^5.21.6",
     "buffer": "6.0.3",
     "dayjs": "^1.11.11",
-    "@midscene/core": "1.6.3",
-    "@midscene/playground": "1.6.3",
-    "@midscene/shared": "1.6.3",
-    "@midscene/web": "1.6.3"
+    "@midscene/core": "1.6.4",
+    "@midscene/playground": "1.6.4",
+    "@midscene/shared": "1.6.4",
+    "@midscene/web": "1.6.4"
   },
   "license": "MIT",
   "scripts": {