@sqaitech/visualizer 0.5.0

package/dist/lib/component/history-selector/index.js

@@ -0,0 +1,216 @@
+"use strict";
+var __webpack_require__ = {};
+(()=>{
+    __webpack_require__.n = (module)=>{
+        var getter = module && module.__esModule ? ()=>module['default'] : ()=>module;
+        __webpack_require__.d(getter, {
+            a: getter
+        });
+        return getter;
+    };
+})();
+(()=>{
+    __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__, {
+    HistorySelector: ()=>HistorySelector
+});
+const jsx_runtime_namespaceObject = require("react/jsx-runtime");
+const external_antd_namespaceObject = require("antd");
+const external_react_namespaceObject = require("react");
+const close_js_namespaceObject = require("../../icons/close.js");
+var close_js_default = /*#__PURE__*/ __webpack_require__.n(close_js_namespaceObject);
+const history_js_namespaceObject = require("../../icons/history.js");
+var history_js_default = /*#__PURE__*/ __webpack_require__.n(history_js_namespaceObject);
+const magnifying_glass_js_namespaceObject = require("../../icons/magnifying-glass.js");
+var magnifying_glass_js_default = /*#__PURE__*/ __webpack_require__.n(magnifying_glass_js_namespaceObject);
+const external_store_history_js_namespaceObject = require("../../store/history.js");
+require("./index.css");
+const { Text } = external_antd_namespaceObject.Typography;
+const HistorySelector = (param)=>{
+    let { onSelect, history, currentType } = param;
+    const [isModalOpen, setIsModalOpen] = (0, external_react_namespaceObject.useState)(false);
+    const [searchText, setSearchText] = (0, external_react_namespaceObject.useState)('');
+    const clearHistory = (0, external_store_history_js_namespaceObject.useHistoryStore)((state)=>state.clearHistory);
+    const modalRef = (0, external_react_namespaceObject.useRef)(null);
+    const groupedHistory = (0, external_react_namespaceObject.useMemo)(()=>{
+        const now = Date.now();
+        const sevenDaysAgo = now - 604800000;
+        const oneYearAgo = now - 31536000000;
+        const filteredHistory = history.filter((item)=>item.prompt.toLowerCase().includes(searchText.toLowerCase()));
+        const groups = {
+            recent7Days: filteredHistory.filter((item)=>item.timestamp >= sevenDaysAgo),
+            recent1Year: filteredHistory.filter((item)=>item.timestamp < sevenDaysAgo && item.timestamp >= oneYearAgo),
+            older: filteredHistory.filter((item)=>item.timestamp < oneYearAgo)
+        };
+        return groups;
+    }, [
+        history,
+        searchText
+    ]);
+    const handleHistoryClick = (item)=>{
+        onSelect(item);
+        setIsModalOpen(false);
+    };
+    const handleClearHistory = ()=>{
+        clearHistory(currentType);
+        setSearchText('');
+        setIsModalOpen(false);
+    };
+    (0, external_react_namespaceObject.useEffect)(()=>{
+        if (!isModalOpen) return;
+        const handleClickOutside = (event)=>{
+            if (modalRef.current && !modalRef.current.contains(event.target)) setIsModalOpen(false);
+        };
+        const timer = setTimeout(()=>{
+            document.addEventListener('click', handleClickOutside);
+        }, 100);
+        return ()=>{
+            clearTimeout(timer);
+            document.removeEventListener('click', handleClickOutside);
+        };
+    }, [
+        isModalOpen
+    ]);
+    const renderHistoryGroup = (title, items)=>{
+        if (0 === items.length) return null;
+        return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+            className: "history-group",
+            children: [
+                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+                    className: "history-group-title",
+                    children: title
+                }),
+                items.map((item, index)=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+                        className: "history-item",
+                        onClick: ()=>handleHistoryClick(item),
+                        children: item.prompt
+                    }, `${item.timestamp}-${index}`))
+            ]
+        }, title);
+    };
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+        className: "history-selector-wrapper",
+        children: [
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+                className: "selector-trigger",
+                onClick: ()=>setIsModalOpen(true),
+                children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(history_js_default(), {
+                    width: 24,
+                    height: 24
+                })
+            }),
+            isModalOpen && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+                className: "history-modal-overlay",
+                ref: modalRef,
+                children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+                    className: "history-modal-container",
+                    children: [
+                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+                            className: "history-modal-header",
+                            children: [
+                                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(Text, {
+                                    strong: true,
+                                    style: {
+                                        fontSize: '16px'
+                                    },
+                                    children: [
+                                        "History (",
+                                        history.length,
+                                        ")"
+                                    ]
+                                }),
+                                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_antd_namespaceObject.Button, {
+                                    size: "small",
+                                    type: "text",
+                                    icon: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(close_js_default(), {
+                                        width: 16,
+                                        height: 16
+                                    }),
+                                    onClick: ()=>setIsModalOpen(false),
+                                    className: "close-button"
+                                })
+                            ]
+                        }),
+                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+                            className: "history-search-section",
+                            children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+                                className: "search-input-wrapper",
+                                children: [
+                                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_antd_namespaceObject.Input, {
+                                        placeholder: "Search",
+                                        value: searchText,
+                                        onChange: (e)=>setSearchText(e.target.value),
+                                        prefix: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(magnifying_glass_js_default(), {
+                                            width: 18,
+                                            height: 18
+                                        }),
+                                        className: "search-input",
+                                        allowClear: true
+                                    }),
+                                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_antd_namespaceObject.Button, {
+                                        type: "link",
+                                        onClick: handleClearHistory,
+                                        className: "clear-button",
+                                        disabled: 0 === history.length,
+                                        children: "Clear"
+                                    })
+                                ]
+                            })
+                        }),
+                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+                            className: "history-content",
+                            children: 0 === history.length ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+                                className: "no-results",
+                                children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(Text, {
+                                    type: "secondary",
+                                    children: "No history record"
+                                })
+                            }) : /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(jsx_runtime_namespaceObject.Fragment, {
+                                children: [
+                                    renderHistoryGroup('Last 7 days', groupedHistory.recent7Days),
+                                    renderHistoryGroup('Last 1 year', groupedHistory.recent1Year),
+                                    renderHistoryGroup('Earlier', groupedHistory.older),
+                                    searchText && 0 === groupedHistory.recent7Days.length && 0 === groupedHistory.recent1Year.length && 0 === groupedHistory.older.length && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+                                        className: "no-results",
+                                        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(Text, {
+                                            type: "secondary",
+                                            children: "No matching history record"
+                                        })
+                                    })
+                                ]
+                            })
+                        })
+                    ]
+                })
+            })
+        ]
+    });
+};
+exports.HistorySelector = __webpack_exports__.HistorySelector;
+for(var __webpack_i__ in __webpack_exports__)if (-1 === [
+    "HistorySelector"
+].indexOf(__webpack_i__)) exports[__webpack_i__] = __webpack_exports__[__webpack_i__];
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});

package/dist/lib/component/index.js

@@ -0,0 +1,60 @@
+"use strict";
+var __webpack_modules__ = {
+    "../types": function(module) {
+        module.exports = require("../types.js");
+    }
+};
+var __webpack_module_cache__ = {};
+function __webpack_require__(moduleId) {
+    var cachedModule = __webpack_module_cache__[moduleId];
+    if (void 0 !== cachedModule) return cachedModule.exports;
+    var module = __webpack_module_cache__[moduleId] = {
+        exports: {}
+    };
+    __webpack_modules__[moduleId](module, module.exports, __webpack_require__);
+    return module.exports;
+}
+(()=>{
+    __webpack_require__.n = (module)=>{
+        var getter = module && module.__esModule ? ()=>module['default'] : ()=>module;
+        __webpack_require__.d(getter, {
+            a: getter
+        });
+        return getter;
+    };
+})();
+(()=>{
+    __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__);
+    var _types__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__("../types");
+    var __WEBPACK_REEXPORT_OBJECT__ = {};
+    for(var __WEBPACK_IMPORT_KEY__ in _types__WEBPACK_IMPORTED_MODULE_0__)if ("default" !== __WEBPACK_IMPORT_KEY__) __WEBPACK_REEXPORT_OBJECT__[__WEBPACK_IMPORT_KEY__] = (function(key) {
+        return _types__WEBPACK_IMPORTED_MODULE_0__[key];
+    }).bind(0, __WEBPACK_IMPORT_KEY__);
+    __webpack_require__.d(__webpack_exports__, __WEBPACK_REEXPORT_OBJECT__);
+})();
+for(var __webpack_i__ in __webpack_exports__)exports[__webpack_i__] = __webpack_exports__[__webpack_i__];
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});

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

@@ -0,0 +1,13 @@
+.logo img {
+  vertical-align: baseline;
+  height: 30px;
+  vertical-align: -webkit-baseline-middle;
+  line-height: 30px;
+}
+
+.logo-with-star-wrapper {
+  flex-direction: row;
+  justify-content: space-between;
+  display: flex;
+}
+

package/dist/lib/component/logo/index.js

@@ -0,0 +1,68 @@
+"use strict";
+var __webpack_require__ = {};
+(()=>{
+    __webpack_require__.n = (module)=>{
+        var getter = module && module.__esModule ? ()=>module['default'] : ()=>module;
+        __webpack_require__.d(getter, {
+            a: getter
+        });
+        return getter;
+    };
+})();
+(()=>{
+    __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__, {
+    Logo: ()=>Logo,
+    LogoUrl: ()=>LogoUrl
+});
+const jsx_runtime_namespaceObject = require("react/jsx-runtime");
+require("./index.css");
+const sqai_logo_js_namespaceObject = require("../../assets/sqai-logo.js");
+var sqai_logo_js_default = /*#__PURE__*/ __webpack_require__.n(sqai_logo_js_namespaceObject);
+const LogoUrl = sqai_logo_js_default();
+const Logo = (param)=>{
+    let { hideLogo = false } = param;
+    if (hideLogo) return null;
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+        className: "logo",
+        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("a", {
+            href: "https://sqai.tech",
+            target: "_blank",
+            rel: "noreferrer",
+            children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("img", {
+                alt: "SQAI Logo",
+                src: sqai_logo_js_default()
+            })
+        })
+    });
+};
+exports.Logo = __webpack_exports__.Logo;
+exports.LogoUrl = __webpack_exports__.LogoUrl;
+for(var __webpack_i__ in __webpack_exports__)if (-1 === [
+    "Logo",
+    "LogoUrl"
+].indexOf(__webpack_i__)) exports[__webpack_i__] = __webpack_exports__[__webpack_i__];
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});

package/dist/lib/component/misc/index.js

@@ -0,0 +1,150 @@
+"use strict";
+var __webpack_require__ = {};
+(()=>{
+    __webpack_require__.n = (module)=>{
+        var getter = module && module.__esModule ? ()=>module['default'] : ()=>module;
+        __webpack_require__.d(getter, {
+            a: getter
+        });
+        return getter;
+    };
+})();
+(()=>{
+    __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__, {
+    serverLaunchTip: ()=>serverLaunchTip,
+    errorMessageServerNotReady: ()=>errorMessageServerNotReady,
+    timeCostStrElement: ()=>timeCostStrElement,
+    iconForStatus: ()=>iconForStatus,
+    emptyResultTip: ()=>emptyResultTip
+});
+const jsx_runtime_namespaceObject = require("react/jsx-runtime");
+const icons_namespaceObject = require("@ant-design/icons");
+const external_antd_namespaceObject = require("antd");
+const index_js_namespaceObject = require("../shiny-text/index.js");
+var index_js_default = /*#__PURE__*/ __webpack_require__.n(index_js_namespaceObject);
+function timeCostStrElement(timeCost) {
+    let str;
+    str = 'number' != typeof timeCost ? '-' : `${(timeCost / 1000).toFixed(2)}s`;
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
+        style: {
+            fontVariantNumeric: 'tabular-nums',
+            fontFeatureSettings: 'tnum'
+        },
+        children: str
+    });
+}
+const iconForStatus = (status)=>{
+    switch(status){
+        case 'finished':
+        case 'passed':
+        case 'success':
+        case 'connected':
+            return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
+                style: {
+                    color: '#00AD4B'
+                },
+                children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(icons_namespaceObject.CheckOutlined, {})
+            });
+        case 'finishedWithWarning':
+            return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
+                style: {
+                    color: '#f7bb05'
+                },
+                children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(icons_namespaceObject.WarningOutlined, {})
+            });
+        case 'failed':
+        case 'closed':
+        case 'timedOut':
+        case 'interrupted':
+            return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
+                style: {
+                    color: '#FF0A0A'
+                },
+                children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(icons_namespaceObject.CloseOutlined, {})
+            });
+        case 'pending':
+            return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(icons_namespaceObject.ClockCircleOutlined, {});
+        case 'cancelled':
+        case 'skipped':
+            return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(icons_namespaceObject.LogoutOutlined, {});
+        case 'running':
+            return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(icons_namespaceObject.ArrowRightOutlined, {});
+        default:
+            return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(icons_namespaceObject.MinusOutlined, {});
+    }
+};
+const errorMessageServerNotReady = /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("span", {
+    children: [
+        "Don't worry, just one more step to launch the playground server.",
+        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("br", {}),
+        "Please run one of the commands under the midscene project directory:",
+        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("br", {}),
+        "a. ",
+        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("strong", {
+            children: "npx midscene-playground"
+        }),
+        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("br", {}),
+        "b. ",
+        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("strong", {
+            children: "npx --yes @sqaitech/web"
+        })
+    ]
+});
+const serverLaunchTip = function() {
+    let notReadyMessage = arguments.length > 0 && void 0 !== arguments[0] ? arguments[0] : errorMessageServerNotReady;
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+        className: "server-tip",
+        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_antd_namespaceObject.Alert, {
+            message: "Playground Server Not Ready",
+            description: notReadyMessage,
+            type: "warning"
+        })
+    });
+};
+const emptyResultTip = /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+    className: "result-empty-tip",
+    style: {
+        textAlign: 'center'
+    },
+    children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(index_js_default(), {
+        disabled: true,
+        text: "The result will be shown here"
+    })
+});
+exports.emptyResultTip = __webpack_exports__.emptyResultTip;
+exports.errorMessageServerNotReady = __webpack_exports__.errorMessageServerNotReady;
+exports.iconForStatus = __webpack_exports__.iconForStatus;
+exports.serverLaunchTip = __webpack_exports__.serverLaunchTip;
+exports.timeCostStrElement = __webpack_exports__.timeCostStrElement;
+for(var __webpack_i__ in __webpack_exports__)if (-1 === [
+    "emptyResultTip",
+    "errorMessageServerNotReady",
+    "iconForStatus",
+    "serverLaunchTip",
+    "timeCostStrElement"
+].indexOf(__webpack_i__)) exports[__webpack_i__] = __webpack_exports__[__webpack_i__];
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});

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

@@ -0,0 +1,66 @@
+"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__, {
+    NavActions: ()=>NavActions
+});
+const jsx_runtime_namespaceObject = require("react/jsx-runtime");
+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(param) {
+    let { showEnvConfig = true, showTooltipWhenEmpty = false, showModelName = false, githubUrl = 'https://github.com/web-infra-dev/midscene', helpUrl = 'https://sqai.tech/quick-experience.html', className = '' } = param;
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+        className: `nav-actions ${className}`,
+        children: [
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_antd_namespaceObject.Typography.Link, {
+                href: githubUrl,
+                target: "_blank",
+                children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(icons_namespaceObject.GithubOutlined, {
+                    className: "nav-icon"
+                })
+            }),
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_antd_namespaceObject.Typography.Link, {
+                href: helpUrl,
+                target: "_blank",
+                children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(icons_namespaceObject.QuestionCircleOutlined, {
+                    className: "nav-icon"
+                })
+            }),
+            showEnvConfig && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(index_js_namespaceObject.EnvConfig, {
+                showTooltipWhenEmpty: showTooltipWhenEmpty,
+                showModelName: showModelName
+            })
+        ]
+    });
+}
+exports.NavActions = __webpack_exports__.NavActions;
+for(var __webpack_i__ in __webpack_exports__)if (-1 === [
+    "NavActions"
+].indexOf(__webpack_i__)) exports[__webpack_i__] = __webpack_exports__[__webpack_i__];
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});

package/dist/lib/component/nav-actions/style.css

@@ -0,0 +1,35 @@
+.nav-actions {
+  align-items: center;
+  gap: 8px;
+  display: flex;
+}
+
+.nav-actions .nav-icon {
+  color: rgba(0, 0, 0, .65);
+  cursor: pointer;
+  font-size: 16px;
+  transition: color .3s;
+}
+
+.nav-actions .nav-icon:hover {
+  color: #2b83ff;
+}
+
+.nav-actions a {
+  align-items: center;
+  text-decoration: none;
+  display: flex;
+}
+
+.nav-actions a:hover .nav-icon {
+  color: #2b83ff;
+}
+
+[data-theme="dark"] .nav-actions .nav-icon {
+  color: rgba(255, 255, 255, .65);
+}
+
+[data-theme="dark"] .nav-actions .nav-icon:hover {
+  color: #2b83ff;
+}
+