@midscene/visualizer 1.7.7 → 1.7.10-beta-20260507030203.0

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

@@ -37,10 +37,14 @@ __webpack_require__.d(__webpack_exports__, {
 });
 const jsx_runtime_namespaceObject = require("react/jsx-runtime");
 const icons_namespaceObject = require("@ant-design/icons");
-require("./index.css");
 const external_antd_namespaceObject = require("antd");
 const external_react_namespaceObject = require("react");
 var external_react_default = /*#__PURE__*/ __webpack_require__.n(external_react_namespaceObject);
+const useMinimalTypeGate_js_namespaceObject = require("../../hooks/useMinimalTypeGate.js");
+const action_chevron_js_namespaceObject = require("../../icons/action-chevron.js");
+var action_chevron_js_default = /*#__PURE__*/ __webpack_require__.n(action_chevron_js_namespaceObject);
+const prompt_history_js_namespaceObject = require("../../icons/prompt-history.js");
+var prompt_history_js_default = /*#__PURE__*/ __webpack_require__.n(prompt_history_js_namespaceObject);
 const history_js_namespaceObject = require("../../store/history.js");
 const external_types_js_namespaceObject = require("../../types.js");
 const action_label_js_namespaceObject = require("../../utils/action-label.js");
@@ -48,12 +52,11 @@ const constants_js_namespaceObject = require("../../utils/constants.js");
 const device_capabilities_js_namespaceObject = require("../../utils/device-capabilities.js");
 const playground_utils_js_namespaceObject = require("../../utils/playground-utils.js");
 const prompt_input_utils_js_namespaceObject = require("../../utils/prompt-input-utils.js");
+const prompt_placeholder_js_namespaceObject = require("../../utils/prompt-placeholder.js");
 const index_js_namespaceObject = require("../config-selector/index.js");
 const external_form_field_index_js_namespaceObject = require("../form-field/index.js");
 const external_history_selector_index_js_namespaceObject = require("../history-selector/index.js");
-const useMinimalTypeGate_js_namespaceObject = require("../../hooks/useMinimalTypeGate.js");
-const external_icons_history_js_namespaceObject = require("../../icons/history.js");
-var external_icons_history_js_default = /*#__PURE__*/ __webpack_require__.n(external_icons_history_js_namespaceObject);
+require("./index.css");
 function _define_property(obj, key, value) {
     if (key in obj) Object.defineProperty(obj, key, {
         value: value,
@@ -84,10 +87,10 @@ const STUDIO_MINIMAL_PROMPT_ICONS = {
     settings: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAOdEVYdFNvZnR3YXJlAEZpZ21hnrGWYwAAAaFJREFUeAHtlt9tgzAQxi8EJa/pBMkIHYENygalG7RvSQQKlfjz2I5ANkg3oBukG6QbtI9IIPq5ihHQOBXmFImqPwnZBvtsf9ydTfQPA77vz4IguCENDGJgOp3ux+PxLgxDnzrCsgAw/zZmGPOO48iUFci4wE42xITKXlEUO9d1X34s4NjZISZU9qCSjeKqastKWZYpMaKyNxqNto02MRDHcXmsJqvV6q7LWBYnxK4+SBOTeHDw2HAwn4aGlg9EUfQE2e+xYwchtaUeaPmAmFyUyH4W9aThA9jZ7alOiN39crl8O/FpoRpzjrq96hcgj2/wwVcNQlxb6/X6VdRrYaeNtGfUVvXbgE9iRNprOCHktPF/Z+3OeZ4fPM9LZbumgHjX2Qnr9rSioE/ma6MVBZDvWWQ/cbLR0GE5jEQoQhFLpGIkpvcuY1nOAkyeiBKJSRSXPw37UCkgbrWmaSZwsBkxoLInHBgJ6EG2KwUgn801+Tl78hyRVApkWfaIexxp4rRfqOzBUdN6+29cyYAMvQN1hCUMIbc1mUyu4VzDz4wX5wvRfah9kIOcwwAAAABJRU5ErkJggg=='
 };
 const PromptInput = ({ runButtonEnabled, form, serviceMode, selectedType, dryMode, stoppable, loading, onRun, onStop, clearPromptAfterRun = true, actionSpace, hideDomAndScreenshotOptions = false, deviceType, chrome })=>{
-    var _chrome_icons, _chrome_icons1, _chrome_icons2;
+    var _chrome_icons, _chrome_icons1, _chrome_icons2, _chrome_icons3;
     const [hoveringSettings, setHoveringSettings] = (0, external_react_namespaceObject.useState)(false);
     const [promptValue, setPromptValue] = (0, external_react_namespaceObject.useState)('');
-    const placeholder = (0, playground_utils_js_namespaceObject.getPlaceholderForType)(selectedType);
+    const placeholder = (0, prompt_placeholder_js_namespaceObject.getPlaceholderForType)(selectedType);
     const isMinimalChrome = (null == chrome ? void 0 : chrome.variant) === 'minimal';
     const resolvedPlaceholder = (null == chrome ? void 0 : chrome.placeholder) || placeholder;
     const actionButtonLabel = (0, action_label_js_namespaceObject.getPromptInputActionLabel)(selectedType, null == chrome ? void 0 : chrome.primaryActionLabel);
@@ -276,7 +279,7 @@ const PromptInput = ({ runButtonEnabled, form, serviceMode, selectedType, dryMod
         buildApiMenuItem
     ]);
     const actionDropdownMenu = (0, external_react_namespaceObject.useMemo)(()=>{
-        const primaryActions = constants_js_namespaceObject.defaultMainButtons.filter((api)=>'aiAct' === api || availableDropdownMethods.includes(api));
+        const primaryActions = constants_js_namespaceObject.defaultMainButtons.filter((api)=>availableDropdownMethods.includes(api));
         const items = [];
         if (primaryActions.length > 0) items.push({
             key: 'primary-group',
@@ -714,6 +717,36 @@ const PromptInput = ({ runButtonEnabled, form, serviceMode, selectedType, dryMod
         selectedType,
         stoppable
     ]);
+    const renderMinimalActionButton = (0, external_react_namespaceObject.useCallback)(()=>{
+        const runButton = (ariaLabel)=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_antd_namespaceObject.Button, {
+                "aria-label": ariaLabel,
+                className: "minimal-run-trigger",
+                type: "primary",
+                icon: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(icons_namespaceObject.ArrowUpOutlined, {}),
+                onClick: handleRunWithHistory,
+                disabled: !isRunButtonEnabled,
+                loading: loading
+            });
+        if (dryMode) return 'aiAct' === selectedType ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_antd_namespaceObject.Tooltip, {
+            title: "Start executing until some interaction actions need to be performed. You can see the process of planning and locating.",
+            children: runButton('Dry run')
+        }) : runButton('Run');
+        if (stoppable) return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_antd_namespaceObject.Button, {
+            "aria-label": "Stop running",
+            className: "minimal-run-trigger minimal-run-trigger-stop",
+            icon: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(icons_namespaceObject.BorderOutlined, {}),
+            onClick: onStop
+        });
+        return runButton('Run');
+    }, [
+        dryMode,
+        loading,
+        handleRunWithHistory,
+        isRunButtonEnabled,
+        onStop,
+        selectedType,
+        stoppable
+    ]);
     const inputContent = needsAnyInput ? needsStructuredParams ? minimalInlineFieldConfig ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_antd_namespaceObject.Form.Item, {
         name: [
             'params',
@@ -757,121 +790,122 @@ const PromptInput = ({ runButtonEnabled, form, serviceMode, selectedType, dryMod
     });
     var _chrome_icons_action;
     const minimalActionIconSrc = null != (_chrome_icons_action = null == chrome ? void 0 : null == (_chrome_icons = chrome.icons) ? void 0 : _chrome_icons.action) ? _chrome_icons_action : STUDIO_MINIMAL_PROMPT_ICONS.action;
-    var _chrome_icons_actionChevron;
-    const minimalActionChevronSrc = null != (_chrome_icons_actionChevron = null == chrome ? void 0 : null == (_chrome_icons1 = chrome.icons) ? void 0 : _chrome_icons1.actionChevron) ? _chrome_icons_actionChevron : STUDIO_MINIMAL_PROMPT_ICONS.actionChevron;
+    const minimalActionChevronSrc = null == chrome ? void 0 : null == (_chrome_icons1 = chrome.icons) ? void 0 : _chrome_icons1.actionChevron;
     var _chrome_icons_settings;
     const minimalSettingsIconSrc = null != (_chrome_icons_settings = null == chrome ? void 0 : null == (_chrome_icons2 = chrome.icons) ? void 0 : _chrome_icons2.settings) ? _chrome_icons_settings : STUDIO_MINIMAL_PROMPT_ICONS.settings;
-    if (isMinimalChrome) {
-        var _chrome_icons3;
-        return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
-            className: "prompt-input-wrapper prompt-input-wrapper-minimal",
-            children: [
-                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_antd_namespaceObject.Form.Item, {
-                    hidden: true,
-                    name: "type",
-                    style: {
-                        margin: 0
-                    },
-                    children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_antd_namespaceObject.Input, {})
-                }),
-                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
-                    className: `main-side-console-input minimal-main-side-console-input ${!runButtonEnabled ? 'disabled' : ''} ${loading ? 'loading' : ''}`,
-                    children: [
-                        inputContent,
-                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
-                            className: "minimal-toolbar-row",
-                            children: [
-                                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
-                                    className: "minimal-toolbar-left",
-                                    children: [
-                                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_antd_namespaceObject.Dropdown, {
-                                            menu: actionDropdownMenu,
-                                            placement: "topLeft",
-                                            trigger: [
-                                                'click'
-                                            ],
+    const minimalHistoryIconSrc = null == chrome ? void 0 : null == (_chrome_icons3 = chrome.icons) ? void 0 : _chrome_icons3.history;
+    if (isMinimalChrome) return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+        className: "prompt-input-wrapper prompt-input-wrapper-minimal",
+        children: [
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_antd_namespaceObject.Form.Item, {
+                hidden: true,
+                name: "type",
+                style: {
+                    margin: 0
+                },
+                children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_antd_namespaceObject.Input, {})
+            }),
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+                className: `main-side-console-input minimal-main-side-console-input ${!runButtonEnabled ? 'disabled' : ''} ${loading ? 'loading' : ''}`,
+                children: [
+                    inputContent,
+                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+                        className: "minimal-toolbar-row",
+                        children: [
+                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+                                className: "minimal-toolbar-left",
+                                children: [
+                                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_antd_namespaceObject.Dropdown, {
+                                        menu: actionDropdownMenu,
+                                        placement: "topLeft",
+                                        trigger: [
+                                            'click'
+                                        ],
+                                        disabled: !runButtonEnabled,
+                                        overlayClassName: "more-apis-dropdown",
+                                        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("button", {
+                                            "aria-label": `Select action type (current: ${actionButtonLabel})`,
+                                            className: "minimal-action-trigger",
                                             disabled: !runButtonEnabled,
-                                            overlayClassName: "more-apis-dropdown",
-                                            children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("button", {
-                                                "aria-label": `Select action type (current: ${actionButtonLabel})`,
-                                                className: "minimal-action-trigger",
-                                                disabled: !runButtonEnabled,
-                                                type: "button",
-                                                children: [
-                                                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("img", {
-                                                        alt: "",
-                                                        className: "minimal-action-icon",
-                                                        src: minimalActionIconSrc
-                                                    }),
-                                                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
-                                                        className: "minimal-action-label",
-                                                        children: actionButtonLabel
-                                                    }),
-                                                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("img", {
-                                                        alt: "",
-                                                        className: "minimal-action-chevron",
-                                                        src: minimalActionChevronSrc
-                                                    })
-                                                ]
-                                            })
-                                        }),
-                                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_history_selector_index_js_namespaceObject.HistorySelector, {
-                                            onSelect: handleSelectHistory,
-                                            history: historyForSelectedType,
-                                            currentType: selectedType,
-                                            popupPlacement: "top",
+                                            type: "button",
+                                            children: [
+                                                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("img", {
+                                                    alt: "",
+                                                    className: "minimal-action-icon",
+                                                    src: minimalActionIconSrc
+                                                }),
+                                                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
+                                                    className: "minimal-action-label",
+                                                    children: actionButtonLabel
+                                                }),
+                                                minimalActionChevronSrc ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("img", {
+                                                    alt: "",
+                                                    className: "minimal-action-chevron",
+                                                    src: minimalActionChevronSrc
+                                                }) : /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(action_chevron_js_default(), {
+                                                    "aria-hidden": "true",
+                                                    className: "minimal-action-chevron",
+                                                    focusable: "false"
+                                                })
+                                            ]
+                                        })
+                                    }),
+                                    hasConfigOptions ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+                                        className: hoveringSettings ? 'settings-wrapper settings-wrapper-hover' : 'settings-wrapper',
+                                        onMouseEnter: handleMouseEnter,
+                                        onMouseLeave: handleMouseLeave,
+                                        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(index_js_namespaceObject.ConfigSelector, {
+                                            enableTracking: 'In-Browser-Extension' === serviceMode,
+                                            showDeepLocateOption: showDeepLocateOption,
+                                            showDeepThinkOption: showDeepThinkOption,
+                                            showDataExtractionOptions: showDataExtractionOptions,
+                                            hideDomAndScreenshotOptions: hideDomAndScreenshotOptions,
+                                            deviceType: deviceType,
+                                            popupPlacement: "topRight",
                                             trigger: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("button", {
-                                                "aria-label": "Open prompt history",
+                                                "aria-label": "Open run configuration",
                                                 className: "minimal-icon-trigger",
                                                 type: "button",
-                                                children: (null == chrome ? void 0 : null == (_chrome_icons3 = chrome.icons) ? void 0 : _chrome_icons3.history) ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("img", {
+                                                children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("img", {
                                                     alt: "",
                                                     className: "minimal-toolbar-icon",
-                                                    src: chrome.icons.history
-                                                }) : /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_icons_history_js_default(), {
-                                                    className: "minimal-toolbar-icon minimal-toolbar-icon-history minimal-toolbar-icon-fallback",
-                                                    width: 18,
-                                                    height: 18
+                                                    src: minimalSettingsIconSrc
                                                 })
                                             })
-                                        }),
-                                        hasConfigOptions ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
-                                            className: hoveringSettings ? 'settings-wrapper settings-wrapper-hover' : 'settings-wrapper',
-                                            onMouseEnter: handleMouseEnter,
-                                            onMouseLeave: handleMouseLeave,
-                                            children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(index_js_namespaceObject.ConfigSelector, {
-                                                enableTracking: 'In-Browser-Extension' === serviceMode,
-                                                showDeepLocateOption: showDeepLocateOption,
-                                                showDeepThinkOption: showDeepThinkOption,
-                                                showDataExtractionOptions: showDataExtractionOptions,
-                                                hideDomAndScreenshotOptions: hideDomAndScreenshotOptions,
-                                                deviceType: deviceType,
-                                                popupPlacement: "topRight",
-                                                trigger: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("button", {
-                                                    "aria-label": "Open run configuration",
-                                                    className: "minimal-icon-trigger",
-                                                    type: "button",
-                                                    children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("img", {
-                                                        alt: "",
-                                                        className: "minimal-toolbar-icon",
-                                                        src: minimalSettingsIconSrc
-                                                    })
-                                                })
+                                        })
+                                    }) : null,
+                                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_history_selector_index_js_namespaceObject.HistorySelector, {
+                                        onSelect: handleSelectHistory,
+                                        history: historyForSelectedType,
+                                        currentType: selectedType,
+                                        popupPlacement: "top",
+                                        trigger: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("button", {
+                                            "aria-label": "Open prompt history",
+                                            className: "minimal-icon-trigger",
+                                            type: "button",
+                                            children: minimalHistoryIconSrc ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("img", {
+                                                alt: "",
+                                                className: "minimal-toolbar-icon minimal-toolbar-icon-history",
+                                                src: minimalHistoryIconSrc
+                                            }) : /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(prompt_history_js_default(), {
+                                                "aria-hidden": "true",
+                                                className: "minimal-toolbar-icon minimal-toolbar-icon-history",
+                                                focusable: "false"
                                             })
-                                        }) : null
-                                    ]
-                                }),
-                                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
-                                    className: "form-controller-wrapper",
-                                    children: renderActionButton()
-                                })
-                            ]
-                        })
-                    ]
-                })
-            ]
-        });
-    }
+                                        })
+                                    })
+                                ]
+                            }),
+                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+                                className: "form-controller-wrapper",
+                                children: renderMinimalActionButton()
+                            })
+                        ]
+                    })
+                ]
+            })
+        ]
+    });
     return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
         className: "prompt-input-wrapper",
         children: [

package/dist/lib/component/screenshot-viewer/index.css

@@ -10,15 +10,21 @@
 
 .screenshot-viewer.screen-only > .screenshot-content {
   flex: 1;
+  justify-content: center;
+  align-items: center;
   min-height: 0;
+  display: flex;
 }
 
 .screenshot-viewer.screen-only > .screenshot-content .screenshot-image {
+  object-fit: contain;
+  object-position: center center;
   border-radius: 0;
   width: 100%;
   max-width: none;
   height: 100%;
   max-height: none;
+  display: block;
 }
 
 .screenshot-viewer.offline, .screenshot-viewer.loading, .screenshot-viewer.error {

package/dist/lib/component/universal-playground/empty-state.js

@@ -0,0 +1,39 @@
+"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__, {
+    shouldRenderCustomEmptyState: ()=>shouldRenderCustomEmptyState
+});
+function shouldRenderCustomEmptyState(infoList, emptyState) {
+    var _infoList_;
+    return void 0 !== emptyState && 1 === infoList.length && (null == (_infoList_ = infoList[0]) ? void 0 : _infoList_.id) === 'welcome';
+}
+exports.shouldRenderCustomEmptyState = __webpack_exports__.shouldRenderCustomEmptyState;
+for(var __rspack_i in __webpack_exports__)if (-1 === [
+    "shouldRenderCustomEmptyState"
+].indexOf(__rspack_i)) exports[__rspack_i] = __webpack_exports__[__rspack_i];
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});

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

@@ -89,6 +89,14 @@
   padding: 0;
 }
 
+.playground-container .middle-dialog-area .info-list-container .playground-empty-state-wrapper {
+  min-height: 100%;
+}
+
+.playground-container .middle-dialog-area .info-list-container .playground-empty-state-wrapper-offset-for-prompt {
+  padding-bottom: 128px;
+}
+
 .playground-container .middle-dialog-area .scroll-to-bottom-button {
   z-index: 10;
   background: var(--midscene-surface-elevated, #fff);

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

@@ -51,10 +51,13 @@ require("./index.css");
 const avatar_js_namespaceObject = require("../../icons/avatar.js");
 var avatar_js_default = /*#__PURE__*/ __webpack_require__.n(avatar_js_namespaceObject);
 const constants_js_namespaceObject = require("../../utils/constants.js");
+const empty_state_scroll_js_namespaceObject = require("../../utils/empty-state-scroll.js");
 const progress_action_icon_js_namespaceObject = require("../../utils/progress-action-icon.js");
+const prompt_input_utils_js_namespaceObject = require("../../utils/prompt-input-utils.js");
 const external_prompt_input_index_js_namespaceObject = require("../prompt-input/index.js");
 const external_shiny_text_index_js_namespaceObject = require("../shiny-text/index.js");
 var external_shiny_text_index_js_default = /*#__PURE__*/ __webpack_require__.n(external_shiny_text_index_js_namespaceObject);
+const external_empty_state_js_namespaceObject = require("./empty-state.js");
 const storage_provider_js_namespaceObject = require("./providers/storage-provider.js");
 function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) {
     try {
@@ -236,6 +239,52 @@ function UniversalPlayground({ playgroundSDK, storage, contextProvider, config:
     }, [
         infoList
     ]);
+    const renderCustomEmptyState = (0, external_empty_state_js_namespaceObject.shouldRenderCustomEmptyState)(visibleInfoList, componentConfig.emptyState);
+    const shouldOffsetEmptyStateForPrompt = (0, external_react_namespaceObject.useMemo)(()=>renderCustomEmptyState && (0, prompt_input_utils_js_namespaceObject.shouldOffsetEmptyStateForPromptInput)(actionSpace, selectedType), [
+        actionSpace,
+        renderCustomEmptyState,
+        selectedType
+    ]);
+    (0, external_react_namespaceObject.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 = (0, empty_state_scroll_js_namespaceObject.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__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
         className: `playground-container ${layout}-mode ${className}`.trim(),
         children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_antd_namespaceObject.Form, {
@@ -267,7 +316,10 @@ function UniversalPlayground({ playgroundSDK, storage, contextProvider, config:
                         /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
                             ref: infoListRef,
                             className: "info-list-container",
-                            children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_antd_namespaceObject.List, {
+                            children: renderCustomEmptyState ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+                                className: emptyStateWrapperClassName,
+                                children: componentConfig.emptyState
+                            }) : /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_antd_namespaceObject.List, {
                                 itemLayout: "vertical",
                                 dataSource: visibleInfoList,
                                 renderItem: (item)=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_antd_namespaceObject.List.Item, {

package/dist/lib/icons/action-chevron.js

@@ -0,0 +1,95 @@
+"use strict";
+var __webpack_require__ = {};
+(()=>{
+    __webpack_require__.d = (exports1, definition)=>{
+        for(var key in definition)if (__webpack_require__.o(definition, key) && !__webpack_require__.o(exports1, key)) Object.defineProperty(exports1, key, {
+            enumerable: true,
+            get: definition[key]
+        });
+    };
+})();
+(()=>{
+    __webpack_require__.o = (obj, prop)=>Object.prototype.hasOwnProperty.call(obj, prop);
+})();
+(()=>{
+    __webpack_require__.r = (exports1)=>{
+        if ('undefined' != typeof Symbol && Symbol.toStringTag) Object.defineProperty(exports1, Symbol.toStringTag, {
+            value: 'Module'
+        });
+        Object.defineProperty(exports1, '__esModule', {
+            value: true
+        });
+    };
+})();
+var __webpack_exports__ = {};
+__webpack_require__.r(__webpack_exports__);
+__webpack_require__.d(__webpack_exports__, {
+    default: ()=>action_chevron
+});
+const jsx_runtime_namespaceObject = require("react/jsx-runtime");
+require("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__*/ (0, jsx_runtime_namespaceObject.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__*/ (0, jsx_runtime_namespaceObject.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;
+exports["default"] = __webpack_exports__["default"];
+for(var __rspack_i in __webpack_exports__)if (-1 === [
+    "default"
+].indexOf(__rspack_i)) exports[__rspack_i] = __webpack_exports__[__rspack_i];
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});