@midscene/visualizer 1.7.9 → 1.7.10-beta-20260507123827.0

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

@@ -11,9 +11,12 @@ import { PlaygroundResultView } from "../playground-result/index.mjs";
 import "./index.css";
 import avatar from "../../icons/avatar.mjs";
 import { defaultMainButtons } from "../../utils/constants.mjs";
+import { calculateEmptyStatePromptScrollTop } from "../../utils/empty-state-scroll.mjs";
 import { resolveProgressActionIcon } from "../../utils/progress-action-icon.mjs";
+import { shouldOffsetEmptyStateForPromptInput } from "../../utils/prompt-input-utils.mjs";
 import { PromptInput } from "../prompt-input/index.mjs";
 import shiny_text from "../shiny-text/index.mjs";
+import { shouldRenderCustomEmptyState } from "./empty-state.mjs";
 import { createStorageProvider, detectBestStorageType } from "./providers/storage-provider.mjs";
 function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) {
     try {
@@ -195,6 +198,52 @@ function UniversalPlayground({ playgroundSDK, storage, contextProvider, config:
     }, [
         infoList
     ]);
+    const renderCustomEmptyState = shouldRenderCustomEmptyState(visibleInfoList, componentConfig.emptyState);
+    const shouldOffsetEmptyStateForPrompt = useMemo(()=>renderCustomEmptyState && shouldOffsetEmptyStateForPromptInput(actionSpace, selectedType), [
+        actionSpace,
+        renderCustomEmptyState,
+        selectedType
+    ]);
+    useEffect(()=>{
+        if (!shouldOffsetEmptyStateForPrompt) return;
+        const adjustEmptyStateScroll = ()=>{
+            const container = infoListRef.current;
+            if (!container) return;
+            const wrapper = container.querySelector('.playground-empty-state-wrapper');
+            const contentStart = null == wrapper ? void 0 : wrapper.querySelector('[data-playground-empty-state-content-start]');
+            const contentEnd = null == wrapper ? void 0 : wrapper.querySelector('[data-playground-empty-state-content-end]');
+            if (!(contentStart instanceof HTMLElement) || !(contentEnd instanceof HTMLElement)) return;
+            const containerRect = container.getBoundingClientRect();
+            const startRect = contentStart.getBoundingClientRect();
+            const endRect = contentEnd.getBoundingClientRect();
+            const top = calculateEmptyStatePromptScrollTop({
+                currentScrollTop: container.scrollTop,
+                maxScrollTop: Math.max(0, container.scrollHeight - container.clientHeight),
+                containerTop: containerRect.top,
+                containerBottom: containerRect.bottom,
+                contentStartTop: startRect.top,
+                contentEndBottom: endRect.bottom
+            });
+            container.scrollTo({
+                top,
+                behavior: 'auto'
+            });
+        };
+        const animationFrameId = window.requestAnimationFrame(adjustEmptyStateScroll);
+        const timeoutId = window.setTimeout(adjustEmptyStateScroll, 160);
+        return ()=>{
+            window.cancelAnimationFrame(animationFrameId);
+            window.clearTimeout(timeoutId);
+        };
+    }, [
+        infoListRef,
+        selectedType,
+        shouldOffsetEmptyStateForPrompt
+    ]);
+    const emptyStateWrapperClassName = [
+        'playground-empty-state-wrapper',
+        shouldOffsetEmptyStateForPrompt ? 'playground-empty-state-wrapper-offset-for-prompt' : ''
+    ].filter(Boolean).join(' ');
     return /*#__PURE__*/ jsx("div", {
         className: `playground-container ${layout}-mode ${className}`.trim(),
         children: /*#__PURE__*/ jsxs(Form, {
@@ -226,7 +275,10 @@ function UniversalPlayground({ playgroundSDK, storage, contextProvider, config:
                         /*#__PURE__*/ jsx("div", {
                             ref: infoListRef,
                             className: "info-list-container",
-                            children: /*#__PURE__*/ jsx(List, {
+                            children: renderCustomEmptyState ? /*#__PURE__*/ jsx("div", {
+                                className: emptyStateWrapperClassName,
+                                children: componentConfig.emptyState
+                            }) : /*#__PURE__*/ jsx(List, {
                                 itemLayout: "vertical",
                                 dataSource: visibleInfoList,
                                 renderItem: (item)=>/*#__PURE__*/ jsxs(List.Item, {

package/dist/es/icons/action-chevron.mjs

@@ -0,0 +1,61 @@
+import { jsx } from "react/jsx-runtime";
+import "react";
+function _define_property(obj, key, value) {
+    if (key in obj) Object.defineProperty(obj, key, {
+        value: value,
+        enumerable: true,
+        configurable: true,
+        writable: true
+    });
+    else obj[key] = value;
+    return obj;
+}
+function _object_spread(target) {
+    for(var i = 1; i < arguments.length; i++){
+        var source = null != arguments[i] ? arguments[i] : {};
+        var ownKeys = Object.keys(source);
+        if ("function" == typeof Object.getOwnPropertySymbols) ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
+            return Object.getOwnPropertyDescriptor(source, sym).enumerable;
+        }));
+        ownKeys.forEach(function(key) {
+            _define_property(target, key, source[key]);
+        });
+    }
+    return target;
+}
+function action_chevron_ownKeys(object, enumerableOnly) {
+    var keys = Object.keys(object);
+    if (Object.getOwnPropertySymbols) {
+        var symbols = Object.getOwnPropertySymbols(object);
+        if (enumerableOnly) symbols = symbols.filter(function(sym) {
+            return Object.getOwnPropertyDescriptor(object, sym).enumerable;
+        });
+        keys.push.apply(keys, symbols);
+    }
+    return keys;
+}
+function _object_spread_props(target, source) {
+    source = null != source ? source : {};
+    if (Object.getOwnPropertyDescriptors) Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
+    else action_chevron_ownKeys(Object(source)).forEach(function(key) {
+        Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+    });
+    return target;
+}
+const SvgActionChevron = (props)=>/*#__PURE__*/ jsx("svg", _object_spread_props(_object_spread({
+        xmlns: "http://www.w3.org/2000/svg",
+        width: 6,
+        height: 10,
+        fill: "none",
+        viewBox: "0 0 6 10"
+    }, props), {
+        children: /*#__PURE__*/ jsx("path", {
+            fill: "#000",
+            fillOpacity: 0.25,
+            fillRule: "evenodd",
+            d: "M.195 9.138a.667.667 0 0 1 0-.943l3.529-3.528L.195 1.138a.667.667 0 0 1 .943-.943l4 4c.26.26.26.683 0 .943l-4 4a.667.667 0 0 1-.943 0",
+            clipRule: "evenodd"
+        })
+    }));
+const action_chevron = SvgActionChevron;
+export { action_chevron as default };

package/dist/es/icons/prompt-history.mjs

@@ -0,0 +1,70 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import "react";
+function _define_property(obj, key, value) {
+    if (key in obj) Object.defineProperty(obj, key, {
+        value: value,
+        enumerable: true,
+        configurable: true,
+        writable: true
+    });
+    else obj[key] = value;
+    return obj;
+}
+function _object_spread(target) {
+    for(var i = 1; i < arguments.length; i++){
+        var source = null != arguments[i] ? arguments[i] : {};
+        var ownKeys = Object.keys(source);
+        if ("function" == typeof Object.getOwnPropertySymbols) ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
+            return Object.getOwnPropertyDescriptor(source, sym).enumerable;
+        }));
+        ownKeys.forEach(function(key) {
+            _define_property(target, key, source[key]);
+        });
+    }
+    return target;
+}
+function prompt_history_ownKeys(object, enumerableOnly) {
+    var keys = Object.keys(object);
+    if (Object.getOwnPropertySymbols) {
+        var symbols = Object.getOwnPropertySymbols(object);
+        if (enumerableOnly) symbols = symbols.filter(function(sym) {
+            return Object.getOwnPropertyDescriptor(object, sym).enumerable;
+        });
+        keys.push.apply(keys, symbols);
+    }
+    return keys;
+}
+function _object_spread_props(target, source) {
+    source = null != source ? source : {};
+    if (Object.getOwnPropertyDescriptors) Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
+    else prompt_history_ownKeys(Object(source)).forEach(function(key) {
+        Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+    });
+    return target;
+}
+const SvgPromptHistory = (props)=>/*#__PURE__*/ jsxs("svg", _object_spread_props(_object_spread({
+        xmlns: "http://www.w3.org/2000/svg",
+        width: 16,
+        height: 16,
+        fill: "none",
+        viewBox: "0 0 16 16"
+    }, props), {
+        children: [
+            /*#__PURE__*/ jsx("path", {
+                stroke: "#878787",
+                strokeLinecap: "round",
+                strokeLinejoin: "round",
+                strokeWidth: 1.33,
+                d: "M1.505 4.164c-2.862 6.126 2.197 10.501 6.063 10.501a7 7 0 1 0-6.063-10.5"
+            }),
+            /*#__PURE__*/ jsx("path", {
+                stroke: "#878787",
+                strokeLinecap: "round",
+                strokeLinejoin: "round",
+                strokeWidth: 1.33,
+                d: "M7.57 3.465v4.203l2.967 2.968"
+            })
+        ]
+    }));
+const prompt_history = SvgPromptHistory;
+export { prompt_history as default };

package/dist/es/utils/empty-state-scroll.mjs

@@ -0,0 +1,8 @@
+const DEFAULT_SAFE_MARGIN = 24;
+function calculateEmptyStatePromptScrollTop({ currentScrollTop, maxScrollTop, containerTop, containerBottom, contentStartTop, contentEndBottom, topSafeMargin = DEFAULT_SAFE_MARGIN, bottomSafeMargin = DEFAULT_SAFE_MARGIN }) {
+    const scrollForContentEnd = currentScrollTop + contentEndBottom - (containerBottom - bottomSafeMargin);
+    const maxScrollWithContentStartVisible = currentScrollTop + contentStartTop - (containerTop + topSafeMargin);
+    const targetScrollTop = Math.min(scrollForContentEnd, maxScrollWithContentStartVisible, maxScrollTop);
+    return Math.max(0, Math.round(targetScrollTop));
+}
+export { calculateEmptyStatePromptScrollTop };

package/dist/es/utils/playground-utils.mjs

@@ -1,28 +1,11 @@
 import { StaticPage, StaticPageAgent } from "@midscene/web/static";
 import { isZodObjectSchema, unwrapZodType } from "../types.mjs";
 import { actionNameForType } from "./action-label.mjs";
+import { getPlaceholderForType } from "./prompt-placeholder.mjs";
 const staticAgentFromContext = (context)=>{
     const page = new StaticPage(context);
     return new StaticPageAgent(page);
 };
-const getPlaceholderForType = (type)=>{
-    if ('aiQuery' === type) return 'What do you want to query?';
-    if ('aiAssert' === type) return 'What do you want to assert?';
-    if ('aiTap' === type) return 'What element do you want to tap?';
-    if ('aiDoubleClick' === type) return 'What element do you want to double-click?';
-    if ('aiHover' === type) return 'What element do you want to hover over?';
-    if ('aiInput' === type) return 'Format: <value> | <element>\nExample: hello world | search box';
-    if ('aiRightClick' === type) return 'What element do you want to right-click?';
-    if ('aiKeyboardPress' === type) return 'Format: <key> | <element (optional)>\nExample: Enter | text field';
-    if ('aiScroll' === type) return 'Format: <direction> <amount> | <element (optional)>\nExample: down 500 | main content';
-    if ('aiLocate' === type) return 'What element do you want to locate?';
-    if ('aiBoolean' === type) return 'What do you want to check (returns true/false)?';
-    if ('aiNumber' === type) return 'What number do you want to extract?';
-    if ('aiString' === type) return 'What text do you want to extract?';
-    if ('aiAsk' === type) return 'What do you want to ask?';
-    if ('aiWaitFor' === type) return 'What condition do you want to wait for?';
-    return 'What do you want to do?';
-};
 const isRunButtonEnabled = (runButtonEnabled, needsStructuredParams, params, actionSpace, selectedType, promptValue)=>{
     if (!runButtonEnabled) return false;
     const needsAnyInput = (()=>{

package/dist/es/utils/prompt-input-utils.mjs

@@ -42,4 +42,12 @@ const getInlineStructuredFieldConfig = (actionSpace, selectedType)=>{
         placeholder
     };
 };
-export { getAvailablePromptActionTypes, getInlineStructuredFieldConfig };
+const shouldOffsetEmptyStateForPromptInput = (actionSpace, selectedType)=>{
+    if (!(null == actionSpace ? void 0 : actionSpace.length) || !selectedType) return false;
+    if (getInlineStructuredFieldConfig(actionSpace, selectedType)) return false;
+    const action = actionSpace.find((item)=>item.interfaceAlias === selectedType || item.name === selectedType);
+    if (!(null == action ? void 0 : action.paramSchema) || !isZodObjectSchema(action.paramSchema)) return false;
+    const schema = action.paramSchema;
+    return Object.keys(schema.shape || {}).length > 1;
+};
+export { getAvailablePromptActionTypes, getInlineStructuredFieldConfig, shouldOffsetEmptyStateForPromptInput };

package/dist/es/utils/prompt-placeholder.mjs

@@ -0,0 +1,19 @@
+const getPlaceholderForType = (type)=>{
+    if ('aiQuery' === type) return 'What do you want to query?';
+    if ('aiAssert' === type) return 'What do you want to assert?';
+    if ('aiTap' === type) return 'What element do you want to tap?';
+    if ('aiDoubleClick' === type) return 'What element do you want to double-click?';
+    if ('aiHover' === type) return 'What element do you want to hover over?';
+    if ('aiInput' === type) return 'Format: <value> | <element>\nExample: hello world | search box';
+    if ('aiRightClick' === type) return 'What element do you want to right-click?';
+    if ('aiKeyboardPress' === type) return 'Format: <key> | <element (optional)>\nExample: Enter | text field';
+    if ('aiScroll' === type) return 'Format: <direction> <amount> | <element (optional)>\nExample: down 500 | main content';
+    if ('aiLocate' === type) return 'What element do you want to locate?';
+    if ('aiBoolean' === type) return 'What do you want to check (returns true/false)?';
+    if ('aiNumber' === type) return 'What number do you want to extract?';
+    if ('aiString' === type) return 'What text do you want to extract?';
+    if ('aiAsk' === type) return 'What do you want to ask?';
+    if ('aiWaitFor' === type) return 'What condition do you want to wait for?';
+    return 'What do you want to do?';
+};
+export { getPlaceholderForType };

package/dist/lib/component/playground/index.css

@@ -586,7 +586,7 @@
 
 .prompt-input-wrapper-minimal .minimal-main-side-console-input .minimal-toolbar-left {
   align-items: center;
-  gap: 4px;
+  gap: 2px;
   min-width: 0;
   display: flex;
 }
@@ -606,11 +606,12 @@
   border-radius: 32px;
   gap: 4px;
   height: 32px;
-  padding: 4px 8px;
+  margin-right: 16px;
+  padding: 4px 0;
 }
 
 .prompt-input-wrapper-minimal .minimal-main-side-console-input .minimal-action-trigger:hover {
-  background: rgba(0, 0, 0, .03);
+  color: #5f6368;
 }
 
 .prompt-input-wrapper-minimal .minimal-main-side-console-input .minimal-action-trigger:disabled {
@@ -642,11 +643,11 @@
 
 .prompt-input-wrapper-minimal .minimal-main-side-console-input .minimal-action-chevron {
   object-fit: contain;
-  opacity: .25;
-  width: 5.3px;
-  height: 9.3px;
-  margin-left: -2px;
-  transform: rotate(-90deg);
+  opacity: 1;
+  width: 6px;
+  height: 10px;
+  margin-left: 0;
+  display: block;
 }
 
 .prompt-input-wrapper-minimal .minimal-main-side-console-input .minimal-action-chevron-fallback {
@@ -669,7 +670,7 @@
 }
 
 .prompt-input-wrapper-minimal .minimal-main-side-console-input .minimal-icon-trigger:hover {
-  background: rgba(0, 0, 0, .03);
+  background: rgba(0, 0, 0, .04);
 }
 
 .prompt-input-wrapper-minimal .minimal-main-side-console-input .minimal-toolbar-icon {
@@ -679,8 +680,8 @@
 }
 
 .prompt-input-wrapper-minimal .minimal-main-side-console-input .minimal-toolbar-icon-history {
-  width: 18px;
-  height: 18px;
+  width: 16px;
+  height: 16px;
 }
 
 .prompt-input-wrapper-minimal .minimal-main-side-console-input .minimal-toolbar-icon-fallback {
@@ -695,6 +696,55 @@
   position: static;
 }
 
+.prompt-input-wrapper-minimal .minimal-main-side-console-input .minimal-run-trigger {
+  width: 32px;
+  min-width: 32px;
+  height: 32px;
+  box-shadow: none;
+  color: #fff;
+  background: #1979ff;
+  border: none;
+  border-radius: 50%;
+  justify-content: center;
+  align-items: center;
+  padding: 0;
+  display: inline-flex;
+}
+
+.prompt-input-wrapper-minimal .minimal-main-side-console-input .minimal-run-trigger:hover {
+  color: #fff;
+  background: #0f6ff0;
+}
+
+.prompt-input-wrapper-minimal .minimal-main-side-console-input .minimal-run-trigger:focus-visible {
+  color: #fff;
+  background: #0f6ff0;
+}
+
+.prompt-input-wrapper-minimal .minimal-main-side-console-input .minimal-run-trigger:disabled {
+  color: #bfbfbf;
+  background: #f0f0f0;
+}
+
+.prompt-input-wrapper-minimal .minimal-main-side-console-input .minimal-run-trigger .anticon {
+  font-size: 16px;
+}
+
+.prompt-input-wrapper-minimal .minimal-main-side-console-input .minimal-run-trigger-stop {
+  color: #666;
+  background: #f0f0f0;
+}
+
+.prompt-input-wrapper-minimal .minimal-main-side-console-input .minimal-run-trigger-stop:hover {
+  color: #333;
+  background: #e6e6e6;
+}
+
+.prompt-input-wrapper-minimal .minimal-main-side-console-input .minimal-run-trigger-stop:focus-visible {
+  color: #333;
+  background: #e6e6e6;
+}
+
 .more-apis-dropdown .ant-dropdown-menu {
   scrollbar-width: thin;
   max-height: 400px;

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

@@ -494,7 +494,7 @@
 
 .prompt-input-wrapper-minimal .minimal-main-side-console-input .minimal-toolbar-left {
   align-items: center;
-  gap: 4px;
+  gap: 2px;
   min-width: 0;
   display: flex;
 }
@@ -514,11 +514,12 @@
   border-radius: 32px;
   gap: 4px;
   height: 32px;
-  padding: 4px 8px;
+  margin-right: 16px;
+  padding: 4px 0;
 }
 
 .prompt-input-wrapper-minimal .minimal-main-side-console-input .minimal-action-trigger:hover {
-  background: rgba(0, 0, 0, .03);
+  color: #5f6368;
 }
 
 .prompt-input-wrapper-minimal .minimal-main-side-console-input .minimal-action-trigger:disabled {
@@ -550,11 +551,11 @@
 
 .prompt-input-wrapper-minimal .minimal-main-side-console-input .minimal-action-chevron {
   object-fit: contain;
-  opacity: .25;
-  width: 5.3px;
-  height: 9.3px;
-  margin-left: -2px;
-  transform: rotate(-90deg);
+  opacity: 1;
+  width: 6px;
+  height: 10px;
+  margin-left: 0;
+  display: block;
 }
 
 .prompt-input-wrapper-minimal .minimal-main-side-console-input .minimal-action-chevron-fallback {
@@ -577,7 +578,7 @@
 }
 
 .prompt-input-wrapper-minimal .minimal-main-side-console-input .minimal-icon-trigger:hover {
-  background: rgba(0, 0, 0, .03);
+  background: rgba(0, 0, 0, .04);
 }
 
 .prompt-input-wrapper-minimal .minimal-main-side-console-input .minimal-toolbar-icon {
@@ -587,8 +588,8 @@
 }
 
 .prompt-input-wrapper-minimal .minimal-main-side-console-input .minimal-toolbar-icon-history {
-  width: 18px;
-  height: 18px;
+  width: 16px;
+  height: 16px;
 }
 
 .prompt-input-wrapper-minimal .minimal-main-side-console-input .minimal-toolbar-icon-fallback {
@@ -603,6 +604,55 @@
   position: static;
 }
 
+.prompt-input-wrapper-minimal .minimal-main-side-console-input .minimal-run-trigger {
+  width: 32px;
+  min-width: 32px;
+  height: 32px;
+  box-shadow: none;
+  color: #fff;
+  background: #1979ff;
+  border: none;
+  border-radius: 50%;
+  justify-content: center;
+  align-items: center;
+  padding: 0;
+  display: inline-flex;
+}
+
+.prompt-input-wrapper-minimal .minimal-main-side-console-input .minimal-run-trigger:hover {
+  color: #fff;
+  background: #0f6ff0;
+}
+
+.prompt-input-wrapper-minimal .minimal-main-side-console-input .minimal-run-trigger:focus-visible {
+  color: #fff;
+  background: #0f6ff0;
+}
+
+.prompt-input-wrapper-minimal .minimal-main-side-console-input .minimal-run-trigger:disabled {
+  color: #bfbfbf;
+  background: #f0f0f0;
+}
+
+.prompt-input-wrapper-minimal .minimal-main-side-console-input .minimal-run-trigger .anticon {
+  font-size: 16px;
+}
+
+.prompt-input-wrapper-minimal .minimal-main-side-console-input .minimal-run-trigger-stop {
+  color: #666;
+  background: #f0f0f0;
+}
+
+.prompt-input-wrapper-minimal .minimal-main-side-console-input .minimal-run-trigger-stop:hover {
+  color: #333;
+  background: #e6e6e6;
+}
+
+.prompt-input-wrapper-minimal .minimal-main-side-console-input .minimal-run-trigger-stop:focus-visible {
+  color: #333;
+  background: #e6e6e6;
+}
+
 .more-apis-dropdown .ant-dropdown-menu {
   scrollbar-width: thin;
   max-height: 400px;