@midscene/visualizer 0.28.10-beta-20250917081519.0 → 0.28.10-beta-20250917142241.0

package/dist/es/component/history-selector/index.css

@@ -1,26 +1,28 @@
+.history-selector-wrapper {
+  position: relative;
+}
+
 .history-modal-overlay {
-  z-index: 1000;
-  background: rgba(0, 0, 0, .45);
-  justify-content: stretch;
-  align-items: flex-end;
-  display: flex;
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
+  z-index: 9999;
+  background: #fff;
+  border: 1px solid rgba(0, 0, 0, .08);
+  border-radius: 12px;
+  width: 320px;
+  height: 400px;
+  position: fixed;
+  top: auto;
+  bottom: 20px;
+  right: 20px;
+  box-shadow: 0 8px 24px rgba(0, 0, 0, .12);
 }
 
 .history-modal-container {
-  z-index: 1001;
-  background: #fff;
-  border-radius: 12px 12px 0 0;
+  border-radius: 12px;
   flex-direction: column;
   width: 100%;
-  height: 400px;
+  height: 100%;
   display: flex;
   overflow: hidden;
-  box-shadow: 0 8px 24px rgba(0, 0, 0, .12);
 }
 
 .history-modal-container .history-modal-header {

package/dist/es/component/history-selector/index.mjs

@@ -1,6 +1,6 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { Button, Input, Typography } from "antd";
-import { useMemo, useState } from "react";
+import { useEffect, useMemo, useRef, useState } from "react";
 import icons_close from "../../icons/close.mjs";
 import icons_history from "../../icons/history.mjs";
 import magnifying_glass from "../../icons/magnifying-glass.mjs";
@@ -12,6 +12,7 @@ const HistorySelector = (param)=>{
     const [isModalOpen, setIsModalOpen] = useState(false);
     const [searchText, setSearchText] = useState('');
     const clearHistory = useHistoryStore((state)=>state.clearHistory);
+    const modalRef = useRef(null);
     const groupedHistory = useMemo(()=>{
         const now = Date.now();
         const sevenDaysAgo = now - 604800000;
@@ -36,6 +37,21 @@ const HistorySelector = (param)=>{
         setSearchText('');
         setIsModalOpen(false);
     };
+    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__*/ jsxs("div", {
@@ -53,7 +69,8 @@ const HistorySelector = (param)=>{
             ]
         }, title);
     };
-    return /*#__PURE__*/ jsxs(Fragment, {
+    return /*#__PURE__*/ jsxs("div", {
+        className: "history-selector-wrapper",
         children: [
             /*#__PURE__*/ jsx("div", {
                 className: "selector-trigger",
@@ -65,10 +82,9 @@ const HistorySelector = (param)=>{
             }),
             isModalOpen && /*#__PURE__*/ jsx("div", {
                 className: "history-modal-overlay",
-                onClick: ()=>setIsModalOpen(false),
+                ref: modalRef,
                 children: /*#__PURE__*/ jsxs("div", {
                     className: "history-modal-container",
-                    onClick: (e)=>e.stopPropagation(),
                     children: [
                         /*#__PURE__*/ jsxs("div", {
                             className: "history-modal-header",

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

@@ -0,0 +1,32 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { GithubOutlined, QuestionCircleOutlined } from "@ant-design/icons";
+import { Typography } from "antd";
+import { EnvConfig } from "../env-config/index.mjs";
+import "./style.css";
+function NavActions(param) {
+    let { showEnvConfig = true, showTooltipWhenEmpty = false, showModelName = false, githubUrl = 'https://github.com/web-infra-dev/midscene', helpUrl = 'https://midscenejs.com/quick-experience.html', className = '' } = param;
+    return /*#__PURE__*/ jsxs("div", {
+        className: `nav-actions ${className}`,
+        children: [
+            /*#__PURE__*/ jsx(Typography.Link, {
+                href: githubUrl,
+                target: "_blank",
+                children: /*#__PURE__*/ jsx(GithubOutlined, {
+                    className: "nav-icon"
+                })
+            }),
+            /*#__PURE__*/ jsx(Typography.Link, {
+                href: helpUrl,
+                target: "_blank",
+                children: /*#__PURE__*/ jsx(QuestionCircleOutlined, {
+                    className: "nav-icon"
+                })
+            }),
+            showEnvConfig && /*#__PURE__*/ jsx(EnvConfig, {
+                showTooltipWhenEmpty: showTooltipWhenEmpty,
+                showModelName: showModelName
+            })
+        ]
+    });
+}
+export { NavActions };

package/dist/es/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;
+}
+

package/dist/es/component/player/index.css

@@ -30,8 +30,8 @@
   min-height: 200px;
   aspect-ratio: var(--canvas-aspect-ratio, 16 / 9);
   background-color: #fff;
-  border-top-left-radius: 16px;
-  border-top-right-radius: 16px;
+  border-top-left-radius: 4px;
+  border-top-right-radius: 4px;
   flex: none;
   justify-content: center;
   align-items: center;

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

@@ -44,21 +44,34 @@
 }
 
 .prompt-input-wrapper .mode-radio-group-wrapper .mode-radio-group {
-  scrollbar-width: none;
-  -ms-overflow-style: none;
+  scrollbar-width: thin;
   flex: 1;
   align-items: center;
   gap: 8px;
   min-width: 0;
   height: 100%;
-  margin-right: 80px;
+  margin-right: 60px;
   display: flex;
   overflow-x: auto;
   overflow-y: hidden;
 }
 
 .prompt-input-wrapper .mode-radio-group-wrapper .mode-radio-group::-webkit-scrollbar {
-  display: none;
+  height: 6px;
+}
+
+.prompt-input-wrapper .mode-radio-group-wrapper .mode-radio-group::-webkit-scrollbar-track {
+  background: #f1f1f1;
+  border-radius: 3px;
+}
+
+.prompt-input-wrapper .mode-radio-group-wrapper .mode-radio-group::-webkit-scrollbar-thumb {
+  background: #c1c1c1;
+  border-radius: 3px;
+}
+
+.prompt-input-wrapper .mode-radio-group-wrapper .mode-radio-group::-webkit-scrollbar-thumb:hover {
+  background: #a8a8a8;
 }
 
 .prompt-input-wrapper .mode-radio-group-wrapper .mode-radio-group .ant-form-item {
@@ -146,10 +159,13 @@
 
 .prompt-input-wrapper .mode-radio-group-wrapper .action-icons {
   z-index: 10;
-  background: #fff;
+  background: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(255, 255, 255, .5) 20%, rgba(255, 255, 255, .8) 40%, rgba(255, 255, 255, .95) 60%, #fff 70%);
   flex-shrink: 0;
+  justify-content: flex-end;
   align-items: center;
-  padding-left: 8px;
+  gap: 8px;
+  width: 80px;
+  padding-left: 20px;
   display: flex;
   position: absolute;
   top: 50%;

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

@@ -10,21 +10,34 @@
 }
 
 .prompt-input-wrapper .mode-radio-group-wrapper .mode-radio-group {
-  scrollbar-width: none;
-  -ms-overflow-style: none;
+  scrollbar-width: thin;
   flex: 1;
   align-items: center;
   gap: 8px;
   min-width: 0;
   height: 100%;
-  margin-right: 80px;
+  margin-right: 60px;
   display: flex;
   overflow-x: auto;
   overflow-y: hidden;
 }
 
 .prompt-input-wrapper .mode-radio-group-wrapper .mode-radio-group::-webkit-scrollbar {
-  display: none;
+  height: 6px;
+}
+
+.prompt-input-wrapper .mode-radio-group-wrapper .mode-radio-group::-webkit-scrollbar-track {
+  background: #f1f1f1;
+  border-radius: 3px;
+}
+
+.prompt-input-wrapper .mode-radio-group-wrapper .mode-radio-group::-webkit-scrollbar-thumb {
+  background: #c1c1c1;
+  border-radius: 3px;
+}
+
+.prompt-input-wrapper .mode-radio-group-wrapper .mode-radio-group::-webkit-scrollbar-thumb:hover {
+  background: #a8a8a8;
 }
 
 .prompt-input-wrapper .mode-radio-group-wrapper .mode-radio-group .ant-form-item {
@@ -112,10 +125,13 @@
 
 .prompt-input-wrapper .mode-radio-group-wrapper .action-icons {
   z-index: 10;
-  background: #fff;
+  background: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(255, 255, 255, .5) 20%, rgba(255, 255, 255, .8) 40%, rgba(255, 255, 255, .95) 60%, #fff 70%);
   flex-shrink: 0;
+  justify-content: flex-end;
   align-items: center;
-  padding-left: 8px;
+  gap: 8px;
+  width: 80px;
+  padding-left: 20px;
   display: flex;
   position: absolute;
   top: 50%;

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

@@ -1,7 +1,7 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { BorderOutlined, DownOutlined, SendOutlined } from "@ant-design/icons";
 import "./index.css";
-import { Button, Dropdown, Form, Input, Radio, Space, Tooltip } from "antd";
+import { Button, Dropdown, Form, Input, Radio, Tooltip } from "antd";
 import react, { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { useHistoryStore } from "../../store/history.mjs";
 import { extractDefaultValue, isLocateField, isZodObjectSchema, unwrapZodType } from "../../types.mjs";
@@ -17,6 +17,7 @@ const PromptInput = (param)=>{
     const [promptValue, setPromptValue] = useState('');
     const placeholder = getPlaceholderForType(selectedType);
     const textAreaRef = useRef(null);
+    const modeRadioGroupRef = useRef(null);
     const params = Form.useWatch('params', form);
     const lastHistoryRef = useRef(null);
     const history = useHistoryStore((state)=>state.history);
@@ -160,6 +161,27 @@ const PromptInput = (param)=>{
         lastSelectedType,
         setLastSelectedType
     ]);
+    const scrollToSelectedItem = useCallback(()=>{
+        const container = modeRadioGroupRef.current;
+        if (!container) return;
+        let targetElement = null;
+        const selectedRadioButton = container.querySelector('.ant-radio-button-wrapper-checked');
+        const dropdownButton = container.querySelector('.more-apis-button.selected-from-dropdown');
+        if (selectedRadioButton) targetElement = selectedRadioButton;
+        else if (dropdownButton) targetElement = dropdownButton;
+        if (targetElement) {
+            const containerRect = container.getBoundingClientRect();
+            const targetRect = targetElement.getBoundingClientRect();
+            const targetLeft = targetRect.left - containerRect.left + container.scrollLeft;
+            const targetWidth = targetRect.width;
+            const containerWidth = containerRect.width;
+            const optimalScrollLeft = targetLeft - (containerWidth - targetWidth) / 2;
+            container.scrollTo({
+                left: Math.max(0, optimalScrollLeft),
+                behavior: 'smooth'
+            });
+        }
+    }, []);
     useEffect(()=>{
         const lastHistory = historyForSelectedType[0];
         if (lastHistory && lastHistoryRef.current && lastHistory.timestamp === lastHistoryRef.current.timestamp) return;
@@ -186,6 +208,15 @@ const PromptInput = (param)=>{
         form,
         getDefaultParams
     ]);
+    useEffect(()=>{
+        const timeoutId = setTimeout(()=>{
+            scrollToSelectedItem();
+        }, 100);
+        return ()=>clearTimeout(timeoutId);
+    }, [
+        selectedType,
+        scrollToSelectedItem
+    ]);
     const formPromptValue = Form.useWatch('prompt', form);
     useEffect(()=>{
         if (formPromptValue !== promptValue) setPromptValue(formPromptValue || '');
@@ -501,11 +532,12 @@ const PromptInput = (param)=>{
     return /*#__PURE__*/ jsxs("div", {
         className: "prompt-input-wrapper",
         children: [
-            /*#__PURE__*/ jsxs(Space, {
+            /*#__PURE__*/ jsxs("div", {
                 className: "mode-radio-group-wrapper",
                 children: [
                     /*#__PURE__*/ jsxs("div", {
                         className: "mode-radio-group",
+                        ref: modeRadioGroupRef,
                         children: [
                             /*#__PURE__*/ jsx(Form.Item, {
                                 name: "type",
@@ -632,11 +664,6 @@ const PromptInput = (param)=>{
                     /*#__PURE__*/ jsxs("div", {
                         className: "action-icons",
                         children: [
-                            /*#__PURE__*/ jsx(HistorySelector, {
-                                onSelect: handleSelectHistory,
-                                history: historyForSelectedType,
-                                currentType: selectedType
-                            }),
                             hasConfigOptions && /*#__PURE__*/ jsx("div", {
                                 className: hoveringSettings ? 'settings-wrapper settings-wrapper-hover' : 'settings-wrapper',
                                 onMouseEnter: handleMouseEnter,
@@ -647,6 +674,11 @@ const PromptInput = (param)=>{
                                     showDataExtractionOptions: showDataExtractionOptions,
                                     hideDomAndScreenshotOptions: hideDomAndScreenshotOptions
                                 })
+                            }),
+                            /*#__PURE__*/ jsx(HistorySelector, {
+                                onSelect: handleSelectHistory,
+                                history: historyForSelectedType,
+                                currentType: selectedType
                             })
                         ]
                     })

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

@@ -32,8 +32,8 @@
 .playground-container .middle-dialog-area .clear-button-container {
   z-index: 10;
   position: absolute;
-  top: 8px;
-  right: 12px;
+  top: 16px;
+  right: 0;
 }
 
 .playground-container .middle-dialog-area .clear-button-container .clear-button {

package/dist/es/component/universal-playground/providers/storage-provider.mjs

@@ -9,15 +9,48 @@ function _define_property(obj, key, value) {
     return obj;
 }
 class LocalStorageProvider {
+    checkStorageSpace() {
+        try {
+            const testKey = 'storage-test';
+            const testData = 'x'.repeat(102400);
+            localStorage.setItem(testKey, testData);
+            localStorage.removeItem(testKey);
+            return true;
+        } catch (e) {
+            return false;
+        }
+    }
     async saveMessages(messages) {
         try {
-            const lightMessages = messages.map((msg)=>({
+            if (!this.checkStorageSpace()) {
+                console.warn('Low storage space detected, clearing old data...');
+                await this.handleQuotaExceeded();
+            }
+            const messagesToSave = messages.slice(-this.maxStorageItems);
+            const lightMessages = messagesToSave.map((msg)=>({
                     ...msg,
                     result: void 0
                 }));
-            localStorage.setItem(this.messagesKey, JSON.stringify(lightMessages));
+            const messageData = JSON.stringify(lightMessages);
+            localStorage.setItem(this.messagesKey, messageData);
         } catch (error) {
-            console.error('Failed to save messages to localStorage:', error);
+            if (error instanceof DOMException && 'QuotaExceededError' === error.name) {
+                console.warn('LocalStorage quota exceeded, attempting to clear old data and retry...');
+                await this.handleQuotaExceeded();
+                try {
+                    const recentMessages = messages.slice(-10);
+                    const lightRecentMessages = recentMessages.map((msg)=>({
+                            ...msg,
+                            result: void 0
+                        }));
+                    const messageData = JSON.stringify(lightRecentMessages);
+                    localStorage.setItem(this.messagesKey, messageData);
+                    console.info('Successfully saved recent messages after clearing storage');
+                } catch (retryError) {
+                    console.error('Failed to save even after clearing storage:', retryError);
+                    await this.clearMessages();
+                }
+            } else console.error('Failed to save messages to localStorage:', error);
         }
     }
     async loadMessages() {
@@ -63,12 +96,43 @@ class LocalStorageProvider {
             const resultKey = `${this.resultsKey}-${id}`;
             localStorage.setItem(resultKey, JSON.stringify(result));
         } catch (error) {
-            console.error('Failed to save result to localStorage:', error);
+            if (error instanceof DOMException && 'QuotaExceededError' === error.name) {
+                console.warn('LocalStorage quota exceeded when saving result, clearing old results...');
+                await this.handleQuotaExceeded();
+                try {
+                    const resultKey = `${this.resultsKey}-${id}`;
+                    localStorage.setItem(resultKey, JSON.stringify(result));
+                } catch (retryError) {
+                    console.error('Failed to save result even after clearing storage:', retryError);
+                }
+            } else console.error('Failed to save result to localStorage:', error);
+        }
+    }
+    async handleQuotaExceeded() {
+        try {
+            const keys = Object.keys(localStorage);
+            const resultKeys = keys.filter((key)=>key.startsWith(this.resultsKey));
+            const keysToRemove = resultKeys.slice(0, Math.max(1, Math.floor(resultKeys.length / 2)));
+            keysToRemove.forEach((key)=>{
+                localStorage.removeItem(key);
+            });
+            console.info(`Cleared ${keysToRemove.length} old result entries to free up storage space`);
+            const playgroundKeys = keys.filter((key)=>key.includes('playground') || key.includes('agent') || key.startsWith('midscene'));
+            if (playgroundKeys.length > 10) {
+                const additionalKeysToRemove = playgroundKeys.slice(0, Math.floor(playgroundKeys.length / 3));
+                additionalKeysToRemove.forEach((key)=>{
+                    if (key !== this.messagesKey) localStorage.removeItem(key);
+                });
+                console.info(`Cleared ${additionalKeysToRemove.length} additional playground-related entries`);
+            }
+        } catch (error) {
+            console.error('Failed to handle quota exceeded:', error);
         }
     }
     constructor(namespace = 'playground'){
         _define_property(this, "messagesKey", void 0);
         _define_property(this, "resultsKey", void 0);
+        _define_property(this, "maxStorageItems", 50);
         this.messagesKey = `${namespace}-messages`;
         this.resultsKey = `${namespace}-results`;
     }

package/dist/es/hooks/usePlaygroundState.mjs

@@ -40,7 +40,8 @@ function usePlaygroundState(playgroundSDK, storage, contextProvider) {
     }, []);
     useEffect(()=>{
         if ((null == storage ? void 0 : storage.saveMessages) && infoList.length > 1) storage.saveMessages(infoList).catch((error)=>{
-            console.error('Failed to save messages:', error);
+            if (error instanceof DOMException && 'QuotaExceededError' === error.name) console.warn('Storage quota exceeded - some messages may not be saved persistently');
+            else console.error('Failed to save messages:', error);
         });
     }, [
         infoList,

package/dist/es/index.mjs

@@ -5,6 +5,7 @@ import { useEnvConfig } from "./store/store.mjs";
 import { colorForName, globalThemeConfig, highlightColorForType } from "./utils/color.mjs";
 import { EnvConfig } from "./component/env-config/index.mjs";
 import { EnvConfigReminder } from "./component/env-config-reminder/index.mjs";
+import { NavActions } from "./component/nav-actions/index.mjs";
 import { Logo } from "./component/logo/index.mjs";
 import { iconForStatus, timeCostStrElement } from "./component/misc/index.mjs";
 import { useServerValid } from "./hooks/useServerValid.mjs";
@@ -15,11 +16,10 @@ import { ContextPreview } from "./component/context-preview/index.mjs";
 import { PromptInput } from "./component/prompt-input/index.mjs";
 import { Player } from "./component/player/index.mjs";
 import { Blackboard } from "./component/blackboard/index.mjs";
-import { GithubStar } from "./component/github-star/index.mjs";
 import { actionNameForType, getPlaceholderForType, staticAgentFromContext } from "./utils/playground-utils.mjs";
 import { filterBase64Value, timeStr } from "./utils/index.mjs";
 import shiny_text from "./component/shiny-text/index.mjs";
 import universal_playground, { UniversalPlayground } from "./component/universal-playground/index.mjs";
 import { LocalStorageProvider, MemoryStorageProvider, NoOpStorageProvider } from "./component/universal-playground/providers/storage-provider.mjs";
 import { AgentContextProvider, BaseContextProvider, NoOpContextProvider, StaticContextProvider } from "./component/universal-playground/providers/context-provider.mjs";
-export { AgentContextProvider, BaseContextProvider, Blackboard, ContextPreview, EnvConfig, EnvConfigReminder, GithubStar, LocalStorageProvider, Logo, MemoryStorageProvider, NoOpContextProvider, NoOpStorageProvider, Player, PlaygroundResultView, PromptInput, ServiceModeControl, shiny_text as ShinyText, StaticContextProvider, UniversalPlayground, universal_playground as UniversalPlaygroundDefault, actionNameForType, allScriptsFromDump, colorForName, filterBase64Value, generateAnimationScripts, getPlaceholderForType, globalThemeConfig, highlightColorForType, iconForStatus, safeOverrideAIConfig, staticAgentFromContext, timeCostStrElement, timeStr, useEnvConfig, useSafeOverrideAIConfig, useServerValid };
+export { AgentContextProvider, BaseContextProvider, Blackboard, ContextPreview, EnvConfig, EnvConfigReminder, LocalStorageProvider, Logo, MemoryStorageProvider, NavActions, NoOpContextProvider, NoOpStorageProvider, Player, PlaygroundResultView, PromptInput, ServiceModeControl, shiny_text as ShinyText, StaticContextProvider, UniversalPlayground, universal_playground as UniversalPlaygroundDefault, actionNameForType, allScriptsFromDump, colorForName, filterBase64Value, generateAnimationScripts, getPlaceholderForType, globalThemeConfig, highlightColorForType, iconForStatus, safeOverrideAIConfig, staticAgentFromContext, timeCostStrElement, timeStr, useEnvConfig, useSafeOverrideAIConfig, useServerValid };

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

@@ -1,26 +1,28 @@
+.history-selector-wrapper {
+  position: relative;
+}
+
 .history-modal-overlay {
-  z-index: 1000;
-  background: rgba(0, 0, 0, .45);
-  justify-content: stretch;
-  align-items: flex-end;
-  display: flex;
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
+  z-index: 9999;
+  background: #fff;
+  border: 1px solid rgba(0, 0, 0, .08);
+  border-radius: 12px;
+  width: 320px;
+  height: 400px;
+  position: fixed;
+  top: auto;
+  bottom: 20px;
+  right: 20px;
+  box-shadow: 0 8px 24px rgba(0, 0, 0, .12);
 }
 
 .history-modal-container {
-  z-index: 1001;
-  background: #fff;
-  border-radius: 12px 12px 0 0;
+  border-radius: 12px;
   flex-direction: column;
   width: 100%;
-  height: 400px;
+  height: 100%;
   display: flex;
   overflow: hidden;
-  box-shadow: 0 8px 24px rgba(0, 0, 0, .12);
 }
 
 .history-modal-container .history-modal-header {

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

@@ -52,6 +52,7 @@ const HistorySelector = (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;
@@ -76,6 +77,21 @@ const HistorySelector = (param)=>{
         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", {
@@ -93,7 +109,8 @@ const HistorySelector = (param)=>{
             ]
         }, title);
     };
-    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(jsx_runtime_namespaceObject.Fragment, {
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+        className: "history-selector-wrapper",
         children: [
             /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
                 className: "selector-trigger",
@@ -105,10 +122,9 @@ const HistorySelector = (param)=>{
             }),
             isModalOpen && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
                 className: "history-modal-overlay",
-                onClick: ()=>setIsModalOpen(false),
+                ref: modalRef,
                 children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
                     className: "history-modal-container",
-                    onClick: (e)=>e.stopPropagation(),
                     children: [
                         /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
                             className: "history-modal-header",