@midscene/visualizer 1.7.4 → 1.7.5-beta-20260420031652.0

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

@@ -1,5 +1,5 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import icons, { ArrowDownOutlined, ClearOutlined, LoadingOutlined } from "@ant-design/icons";
+import icons, { ArrowDownOutlined, ClearOutlined, LoadingOutlined, UpOutlined } from "@ant-design/icons";
 import { Alert, Button, Form, List, Typography, message } from "antd";
 import { useCallback, useEffect, useMemo, useState } from "react";
 import { usePlaygroundExecution } from "../../hooks/usePlaygroundExecution.mjs";
@@ -137,7 +137,8 @@ function UniversalPlayground({ playgroundSDK, storage, contextProvider, config:
     ]);
     const configAlreadySet = Object.keys(config || {}).length >= 1;
     const runButtonEnabled = componentConfig.serverMode || !dryMode && !actionSpaceLoading && configAlreadySet;
-    const selectedType = Form.useWatch('type', form);
+    const watchedType = Form.useWatch('type', form);
+    const selectedType = watchedType || form.getFieldValue('type');
     const serviceMode = useMemo(()=>{
         if (!playgroundSDK || 'function' != typeof playgroundSDK.getServiceMode) return 'Server';
         return playgroundSDK.getServiceMode();
@@ -148,6 +149,49 @@ function UniversalPlayground({ playgroundSDK, storage, contextProvider, config:
     const layout = componentConfig.layout || 'vertical';
     const showVersionInfo = false !== componentConfig.showVersionInfo;
     const deviceType = componentConfig.deviceType;
+    const collapsibleProgressGroup = true === componentConfig.collapsibleProgressGroup;
+    var _componentConfig_progressGroupLabel;
+    const progressGroupLabel = null != (_componentConfig_progressGroupLabel = componentConfig.progressGroupLabel) ? _componentConfig_progressGroupLabel : 'Execution Flow';
+    const [collapsedProgressGroups, setCollapsedProgressGroups] = useState(()=>new Set());
+    const toggleProgressGroup = useCallback((groupId)=>{
+        setCollapsedProgressGroups((prev)=>{
+            const next = new Set(prev);
+            if (next.has(groupId)) next.delete(groupId);
+            else next.add(groupId);
+            return next;
+        });
+    }, []);
+    const { firstInProgressGroup, visibleInfoList } = useMemo(()=>{
+        const firstIds = new Set();
+        const visible = [];
+        let currentGroupFirstId = null;
+        for (const item of infoList)if ('progress' === item.type) {
+            if (null === currentGroupFirstId) {
+                currentGroupFirstId = item.id;
+                firstIds.add(item.id);
+                visible.push(item);
+                continue;
+            }
+            if (!collapsibleProgressGroup || !collapsedProgressGroups.has(currentGroupFirstId)) visible.push(item);
+        } else {
+            currentGroupFirstId = null;
+            visible.push(item);
+        }
+        return {
+            firstInProgressGroup: firstIds,
+            visibleInfoList: visible
+        };
+    }, [
+        collapsedProgressGroups,
+        collapsibleProgressGroup,
+        infoList
+    ]);
+    const latestProgressId = useMemo(()=>{
+        for(let i = infoList.length - 1; i >= 0; i--)if ('progress' === infoList[i].type) return infoList[i].id;
+        return null;
+    }, [
+        infoList
+    ]);
     return /*#__PURE__*/ jsx("div", {
         className: `playground-container ${layout}-mode ${className}`.trim(),
         children: /*#__PURE__*/ jsxs(Form, {
@@ -166,7 +210,7 @@ function UniversalPlayground({ playgroundSDK, storage, contextProvider, config:
                 /*#__PURE__*/ jsxs("div", {
                     className: "middle-dialog-area",
                     children: [
-                        infoList.length > 1 && /*#__PURE__*/ jsx("div", {
+                        false !== componentConfig.showClearButton && infoList.length > 1 && /*#__PURE__*/ jsx("div", {
                             className: "clear-button-container",
                             children: /*#__PURE__*/ jsx(Button, {
                                 size: "small",
@@ -181,115 +225,130 @@ function UniversalPlayground({ playgroundSDK, storage, contextProvider, config:
                             className: "info-list-container",
                             children: /*#__PURE__*/ jsx(List, {
                                 itemLayout: "vertical",
-                                dataSource: infoList,
-                                renderItem: (item)=>/*#__PURE__*/ jsx(List.Item, {
+                                dataSource: visibleInfoList,
+                                renderItem: (item)=>/*#__PURE__*/ jsxs(List.Item, {
                                         className: "list-item",
-                                        children: 'user' === item.type ? /*#__PURE__*/ jsx("div", {
-                                            className: "user-message-container",
-                                            children: /*#__PURE__*/ jsx("div", {
-                                                className: "user-message-bubble",
-                                                children: item.content
-                                            })
-                                        }) : 'progress' === item.type ? /*#__PURE__*/ jsx("div", {
-                                            children: (()=>{
-                                                var _parts_, _item_result, _item_result1, _item_result2;
-                                                const parts = item.content.split(' - ');
-                                                const action = null == (_parts_ = parts[0]) ? void 0 : _parts_.trim();
-                                                const description = parts.slice(1).join(' - ').trim();
-                                                const currentIndex = infoList.findIndex((listItem)=>listItem.id === item.id);
-                                                const laterProgressExists = infoList.slice(currentIndex + 1).some((listItem)=>'progress' === listItem.type);
-                                                const isLatestProgress = !laterProgressExists;
-                                                const shouldShowLoading = loading && isLatestProgress;
-                                                return /*#__PURE__*/ jsxs(Fragment, {
-                                                    children: [
-                                                        action && /*#__PURE__*/ jsxs("span", {
-                                                            className: "progress-action-item",
-                                                            children: [
-                                                                action,
-                                                                /*#__PURE__*/ jsx("span", {
-                                                                    className: `progress-status-icon ${shouldShowLoading ? 'loading' : (null == (_item_result = item.result) ? void 0 : _item_result.error) ? 'error' : 'completed'}`,
-                                                                    children: shouldShowLoading ? /*#__PURE__*/ jsx(LoadingOutlined, {
-                                                                        spin: true
-                                                                    }) : (null == (_item_result1 = item.result) ? void 0 : _item_result1.error) ? '✗' : '✓'
+                                        children: [
+                                            collapsibleProgressGroup && firstInProgressGroup.has(item.id) ? /*#__PURE__*/ jsxs("button", {
+                                                type: "button",
+                                                className: `progress-group-toggle ${collapsedProgressGroups.has(item.id) ? 'is-collapsed' : 'is-expanded'}`,
+                                                "aria-expanded": !collapsedProgressGroups.has(item.id),
+                                                onClick: ()=>toggleProgressGroup(item.id),
+                                                children: [
+                                                    /*#__PURE__*/ jsx("span", {
+                                                        className: "progress-group-toggle-label",
+                                                        children: progressGroupLabel
+                                                    }),
+                                                    /*#__PURE__*/ jsx(UpOutlined, {
+                                                        className: "progress-group-toggle-chevron"
+                                                    })
+                                                ]
+                                            }) : null,
+                                            'user' === item.type ? /*#__PURE__*/ jsx("div", {
+                                                className: "user-message-container",
+                                                children: /*#__PURE__*/ jsx("div", {
+                                                    className: "user-message-bubble",
+                                                    children: item.content
+                                                })
+                                            }) : 'progress' === item.type ? /*#__PURE__*/ jsx("div", {
+                                                children: (()=>{
+                                                    var _parts_, _item_result, _item_result1, _item_result2;
+                                                    const parts = item.content.split(' - ');
+                                                    const action = null == (_parts_ = parts[0]) ? void 0 : _parts_.trim();
+                                                    const description = parts.slice(1).join(' - ').trim();
+                                                    const isLatestProgress = item.id === latestProgressId;
+                                                    const shouldShowLoading = loading && isLatestProgress;
+                                                    return /*#__PURE__*/ jsxs(Fragment, {
+                                                        children: [
+                                                            action && /*#__PURE__*/ jsxs("span", {
+                                                                className: "progress-action-item",
+                                                                children: [
+                                                                    action,
+                                                                    /*#__PURE__*/ jsx("span", {
+                                                                        className: `progress-status-icon ${shouldShowLoading ? 'loading' : (null == (_item_result = item.result) ? void 0 : _item_result.error) ? 'error' : 'completed'}`,
+                                                                        children: shouldShowLoading ? /*#__PURE__*/ jsx(LoadingOutlined, {
+                                                                            spin: true
+                                                                        }) : (null == (_item_result1 = item.result) ? void 0 : _item_result1.error) ? '✗' : '✓'
+                                                                    })
+                                                                ]
+                                                            }),
+                                                            description && /*#__PURE__*/ jsx("div", {
+                                                                children: /*#__PURE__*/ jsx(shiny_text, {
+                                                                    text: description,
+                                                                    className: "progress-description",
+                                                                    disabled: !shouldShowLoading
                                                                 })
-                                                            ]
-                                                        }),
-                                                        description && /*#__PURE__*/ jsx("div", {
-                                                            children: /*#__PURE__*/ jsx(shiny_text, {
-                                                                text: description,
-                                                                className: "progress-description",
-                                                                disabled: !shouldShowLoading
+                                                            }),
+                                                            (null == (_item_result2 = item.result) ? void 0 : _item_result2.error) && /*#__PURE__*/ jsx(ErrorMessage, {
+                                                                error: item.result.error
                                                             })
-                                                        }),
-                                                        (null == (_item_result2 = item.result) ? void 0 : _item_result2.error) && /*#__PURE__*/ jsx(ErrorMessage, {
-                                                            error: item.result.error
+                                                        ]
+                                                    });
+                                                })()
+                                            }) : 'separator' === item.type ? /*#__PURE__*/ jsxs("div", {
+                                                className: "new-conversation-separator",
+                                                children: [
+                                                    /*#__PURE__*/ jsx("div", {
+                                                        className: "separator-line"
+                                                    }),
+                                                    /*#__PURE__*/ jsx("div", {
+                                                        className: "separator-text-container",
+                                                        children: /*#__PURE__*/ jsx(Text, {
+                                                            type: "secondary",
+                                                            className: "separator-text",
+                                                            children: item.content
                                                         })
-                                                    ]
-                                                });
-                                            })()
-                                        }) : 'separator' === item.type ? /*#__PURE__*/ jsxs("div", {
-                                            className: "new-conversation-separator",
-                                            children: [
-                                                /*#__PURE__*/ jsx("div", {
-                                                    className: "separator-line"
-                                                }),
-                                                /*#__PURE__*/ jsx("div", {
-                                                    className: "separator-text-container",
-                                                    children: /*#__PURE__*/ jsx(Text, {
-                                                        type: "secondary",
-                                                        className: "separator-text",
-                                                        children: item.content
                                                     })
-                                                })
-                                            ]
-                                        }) : /*#__PURE__*/ jsxs("div", {
-                                            className: "system-message-container",
-                                            children: [
-                                                /*#__PURE__*/ jsxs("div", {
-                                                    className: "system-message-header",
-                                                    children: [
-                                                        /*#__PURE__*/ jsx(icons, {
-                                                            component: branding.icon || avatar,
-                                                            style: {
-                                                                fontSize: 20
-                                                            }
-                                                        }),
-                                                        /*#__PURE__*/ jsx("span", {
-                                                            className: "system-message-title",
-                                                            children: branding.title || 'Playground'
-                                                        })
-                                                    ]
-                                                }),
-                                                (item.content || item.result) && /*#__PURE__*/ jsx("div", {
-                                                    className: "system-message-content",
-                                                    children: 'result' === item.type ? /*#__PURE__*/ jsx(PlaygroundResultView, {
-                                                        result: item.result || null,
-                                                        loading: item.loading || false,
-                                                        serverValid: true,
-                                                        serviceMode: serviceMode,
-                                                        replayScriptsInfo: item.replayScriptsInfo || null,
-                                                        replayCounter: item.replayCounter || 0,
-                                                        loadingProgressText: item.loadingProgressText || '',
-                                                        verticalMode: item.verticalMode || false,
-                                                        fitMode: "width",
-                                                        actionType: item.actionType
-                                                    }) : /*#__PURE__*/ jsxs(Fragment, {
+                                                ]
+                                            }) : /*#__PURE__*/ jsxs("div", {
+                                                className: "system-message-container",
+                                                children: [
+                                                    false !== componentConfig.showSystemMessageHeader && /*#__PURE__*/ jsxs("div", {
+                                                        className: "system-message-header",
                                                         children: [
-                                                            /*#__PURE__*/ jsx("div", {
-                                                                className: "system-message-text",
-                                                                children: item.content
+                                                            /*#__PURE__*/ jsx(icons, {
+                                                                component: branding.icon || avatar,
+                                                                style: {
+                                                                    fontSize: 20
+                                                                }
                                                             }),
-                                                            item.loading && item.loadingProgressText && /*#__PURE__*/ jsx("div", {
-                                                                className: "loading-progress-text",
-                                                                children: /*#__PURE__*/ jsx("span", {
-                                                                    children: item.loadingProgressText
-                                                                })
+                                                            /*#__PURE__*/ jsx("span", {
+                                                                className: "system-message-title",
+                                                                children: branding.title || 'Playground'
                                                             })
                                                         ]
+                                                    }),
+                                                    (item.content || item.result) && /*#__PURE__*/ jsx("div", {
+                                                        className: "system-message-content",
+                                                        children: 'result' === item.type ? /*#__PURE__*/ jsx(PlaygroundResultView, {
+                                                            result: item.result || null,
+                                                            loading: item.loading || false,
+                                                            serverValid: true,
+                                                            serviceMode: serviceMode,
+                                                            replayScriptsInfo: item.replayScriptsInfo || null,
+                                                            replayCounter: item.replayCounter || 0,
+                                                            loadingProgressText: item.loadingProgressText || '',
+                                                            verticalMode: item.verticalMode || false,
+                                                            fitMode: "width",
+                                                            actionType: item.actionType
+                                                        }) : /*#__PURE__*/ jsxs(Fragment, {
+                                                            children: [
+                                                                /*#__PURE__*/ jsx("div", {
+                                                                    className: "system-message-text",
+                                                                    children: item.content
+                                                                }),
+                                                                item.loading && item.loadingProgressText && /*#__PURE__*/ jsx("div", {
+                                                                    className: "loading-progress-text",
+                                                                    children: /*#__PURE__*/ jsx("span", {
+                                                                        children: item.loadingProgressText
+                                                                    })
+                                                                })
+                                                            ]
+                                                        })
                                                     })
-                                                })
-                                            ]
-                                        })
+                                                ]
+                                            })
+                                        ]
                                     }, item.id)
                             })
                         }),
@@ -318,6 +377,7 @@ function UniversalPlayground({ playgroundSDK, storage, contextProvider, config:
                             onRun: handleFormRun,
                             onStop: handleStop,
                             actionSpace: actionSpace,
+                            chrome: componentConfig.promptInputChrome,
                             deviceType: deviceType
                         })
                     ]

package/dist/es/utils/action-label.mjs

@@ -0,0 +1,14 @@
+const actionNameForType = (type)=>{
+    if (!type) return '';
+    const typeWithoutAi = type.startsWith('ai') ? type.slice(2) : type;
+    if (typeWithoutAi.startsWith('IOS')) return typeWithoutAi.substring(3).replace(/([A-Z])/g, ' $1').replace(/^/, 'IOS').trim();
+    const fullName = typeWithoutAi.replace(/([A-Z])/g, ' $1').trim();
+    const words = fullName.split(' ');
+    const result = words.length > 3 ? words.slice(-3).join(' ') : fullName;
+    return result.replace(/\b\w/g, (c)=>c.toUpperCase());
+};
+const getPromptInputActionLabel = (type, overrideLabel)=>{
+    if (overrideLabel) return overrideLabel;
+    return actionNameForType(type) || 'Action';
+};
+export { actionNameForType, getPromptInputActionLabel };

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

@@ -1,14 +1,6 @@
 import { StaticPage, StaticPageAgent } from "@midscene/web/static";
 import { isZodObjectSchema, unwrapZodType } from "../types.mjs";
-const actionNameForType = (type)=>{
-    if (!type) return '';
-    const typeWithoutAi = type.startsWith('ai') ? type.slice(2) : type;
-    if (typeWithoutAi.startsWith('IOS')) return typeWithoutAi.substring(3).replace(/([A-Z])/g, ' $1').replace(/^/, 'IOS').trim();
-    const fullName = typeWithoutAi.replace(/([A-Z])/g, ' $1').trim();
-    const words = fullName.split(' ');
-    const result = words.length > 3 ? words.slice(-3).join(' ') : fullName;
-    return result.replace(/\b\w/g, (c)=>c.toUpperCase());
-};
+import { actionNameForType } from "./action-label.mjs";
 const staticAgentFromContext = (context)=>{
     const page = new StaticPage(context);
     return new StaticPageAgent(page);

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

@@ -0,0 +1,45 @@
+import { isLocateField, isZodObjectSchema, unwrapZodType } from "../types.mjs";
+import { apiMetadata } from "./constants.mjs";
+const getAvailablePromptActionTypes = (actionSpace)=>{
+    const metadataMethods = Object.keys(apiMetadata);
+    if (!(null == actionSpace ? void 0 : actionSpace.length)) return metadataMethods;
+    const availableMethods = actionSpace.map((action)=>action.interfaceAlias || action.name);
+    const supportsAiAct = availableMethods.includes('aiAct');
+    const finalMethods = new Set();
+    metadataMethods.forEach((method)=>{
+        const methodInfo = apiMetadata[method];
+        if ('aiAct' === method) {
+            if (supportsAiAct) finalMethods.add(method);
+            return;
+        }
+        if ((null == methodInfo ? void 0 : methodInfo.group) === 'extraction' || (null == methodInfo ? void 0 : methodInfo.group) === 'validation') return void finalMethods.add(method);
+        if (availableMethods.includes(method)) finalMethods.add(method);
+    });
+    availableMethods.forEach((method)=>{
+        finalMethods.add(method);
+    });
+    return Array.from(finalMethods);
+};
+const getInlineStructuredFieldConfig = (actionSpace, selectedType)=>{
+    var _actualField__def, _actualField__def1;
+    if (!(null == actionSpace ? void 0 : actionSpace.length) || !selectedType) return null;
+    const action = actionSpace.find((item)=>item.interfaceAlias === selectedType || item.name === selectedType);
+    if (!(null == action ? void 0 : action.paramSchema) || !isZodObjectSchema(action.paramSchema)) return null;
+    const schema = action.paramSchema;
+    const shape = schema.shape || {};
+    const keys = Object.keys(shape);
+    if (1 !== keys.length) return null;
+    const [name] = keys;
+    const field = shape[name];
+    const { actualField } = unwrapZodType(field);
+    const isLocate = isLocateField(actualField);
+    const fieldType = null == (_actualField__def = actualField._def) ? void 0 : _actualField__def.typeName;
+    const isInlineField = 'ZodString' === fieldType || isLocate;
+    if (!isInlineField) return null;
+    const placeholder = (null == (_actualField__def1 = actualField._def) ? void 0 : _actualField__def1.description) || actualField.description || (isLocate ? 'Describe the element you want to interact with' : `Enter ${name}`);
+    return {
+        name,
+        placeholder
+    };
+};
+export { getAvailablePromptActionTypes, getInlineStructuredFieldConfig };

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

@@ -42,7 +42,7 @@ var setting_js_default = /*#__PURE__*/ __webpack_require__.n(setting_js_namespac
 const store_js_namespaceObject = require("../../store/store.js");
 const constants_js_namespaceObject = require("../../utils/constants.js");
 const device_capabilities_js_namespaceObject = require("../../utils/device-capabilities.js");
-const ConfigSelector = ({ showDeepLocateOption = false, showDeepThinkOption = false, enableTracking = false, showDataExtractionOptions = false, hideDomAndScreenshotOptions = false, deviceType })=>{
+const ConfigSelector = ({ showDeepLocateOption = false, showDeepThinkOption = false, enableTracking = false, showDataExtractionOptions = false, hideDomAndScreenshotOptions = false, deviceType, trigger })=>{
     const forceSameTabNavigation = (0, store_js_namespaceObject.useEnvConfig)((state)=>state.forceSameTabNavigation);
     const setForceSameTabNavigation = (0, store_js_namespaceObject.useEnvConfig)((state)=>state.setForceSameTabNavigation);
     const deepLocate = (0, store_js_namespaceObject.useEnvConfig)((state)=>state.deepLocate);
@@ -74,7 +74,7 @@ const ConfigSelector = ({ showDeepLocateOption = false, showDeepThinkOption = fa
             trigger: [
                 'click'
             ],
-            children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(setting_js_default(), {
+            children: null != trigger ? trigger : /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(setting_js_default(), {
                 width: 24,
                 height: 24
             })

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

@@ -138,35 +138,102 @@
   padding: 40px 20px;
 }
 
-[data-theme="dark"] .history-selector .history-timestamp, [data-theme="dark"] .history-selector .history-path {
-  color: rgba(255, 255, 255, .45);
+[data-theme="dark"] .history-modal-overlay {
+  background: #16181d !important;
+  border-color: rgba(255, 255, 255, .12) !important;
+  box-shadow: 0 16px 40px rgba(0, 0, 0, .45) !important;
 }
 
-[data-theme="dark"] .history-selector .history-description {
-  color: #f8fafd;
+[data-theme="dark"] .history-modal-container {
+  background: #16181d !important;
 }
 
-[data-theme="dark"] .history-selector .history-no-items {
-  color: rgba(255, 255, 255, .45);
+[data-theme="dark"] .history-modal-container .history-modal-header .ant-typography {
+  color: rgba(255, 255, 255, .92) !important;
 }
 
-[data-theme="dark"] .history-selector .history-item:hover {
-  background: rgba(255, 255, 255, .08);
+[data-theme="dark"] .history-modal-container .history-modal-header .close-button .anticon {
+  color: rgba(255, 255, 255, .48);
 }
 
-[data-theme="dark"] .history-selector .history-item .history-clear-icon {
-  border-color: rgba(255, 255, 255, .12);
+[data-theme="dark"] .history-modal-container .history-modal-header .close-button:hover .anticon {
+  color: rgba(255, 255, 255, .78);
 }
 
-[data-theme="dark"] .history-selector .history-item .history-clear-icon:hover {
-  border-color: #40a9ff;
+[data-theme="dark"] .history-modal-container .history-search-section {
+  background: #16181d !important;
 }
 
-[data-theme="dark"] .history-selector .history-load-more {
-  color: #1890ff;
+[data-theme="dark"] .history-modal-container .history-search-section .search-input-wrapper {
+  color: rgba(255, 255, 255, .38);
 }
 
-[data-theme="dark"] .history-selector .history-load-more:hover {
-  color: #40a9ff;
+[data-theme="dark"] .history-modal-container .history-search-section .search-input-wrapper .search-input, [data-theme="dark"] .history-modal-container .history-search-section .search-input-wrapper .search-input.ant-input-affix-wrapper {
+  box-shadow: none !important;
+  background: rgba(255, 255, 255, .08) !important;
+  border-color: rgba(255, 255, 255, .12) !important;
+}
+
+[data-theme="dark"] .history-modal-container .history-search-section .search-input-wrapper .search-input .ant-input, [data-theme="dark"] .history-modal-container .history-search-section .search-input-wrapper .search-input.ant-input-affix-wrapper .ant-input, [data-theme="dark"] .history-modal-container .history-search-section .search-input-wrapper .search-input .ant-input-prefix, [data-theme="dark"] .history-modal-container .history-search-section .search-input-wrapper .search-input.ant-input-affix-wrapper .ant-input-prefix, [data-theme="dark"] .history-modal-container .history-search-section .search-input-wrapper .search-input .ant-input-clear-icon, [data-theme="dark"] .history-modal-container .history-search-section .search-input-wrapper .search-input.ant-input-affix-wrapper .ant-input-clear-icon {
+  color: rgba(255, 255, 255, .72) !important;
+}
+
+[data-theme="dark"] .history-modal-container .history-search-section .search-input-wrapper .search-input .ant-input, [data-theme="dark"] .history-modal-container .history-search-section .search-input-wrapper .search-input.ant-input-affix-wrapper .ant-input {
+  background: none !important;
+}
+
+[data-theme="dark"] .history-modal-container .history-search-section .search-input-wrapper .search-input .ant-input::-webkit-input-placeholder {
+  color: rgba(255, 255, 255, .38) !important;
+}
+
+[data-theme="dark"] .history-modal-container .history-search-section .search-input-wrapper .search-input .ant-input::placeholder {
+  color: rgba(255, 255, 255, .38) !important;
+}
+
+[data-theme="dark"] .history-modal-container .history-search-section .search-input-wrapper .search-input.ant-input-affix-wrapper .ant-input::-webkit-input-placeholder {
+  color: rgba(255, 255, 255, .38) !important;
+}
+
+[data-theme="dark"] .history-modal-container .history-search-section .search-input-wrapper .search-input.ant-input-affix-wrapper .ant-input::placeholder {
+  color: rgba(255, 255, 255, .38) !important;
+}
+
+[data-theme="dark"] .history-modal-container .history-search-section .search-input-wrapper .search-input:hover, [data-theme="dark"] .history-modal-container .history-search-section .search-input-wrapper .search-input.ant-input-affix-wrapper:hover {
+  background: rgba(255, 255, 255, .12) !important;
+  border-color: rgba(255, 255, 255, .16) !important;
+}
+
+[data-theme="dark"] .history-modal-container .history-search-section .search-input-wrapper .search-input:focus-within {
+  background: rgba(255, 255, 255, .12) !important;
+  border-color: rgba(255, 255, 255, .16) !important;
+}
+
+[data-theme="dark"] .history-modal-container .history-search-section .search-input-wrapper .search-input.ant-input-affix-wrapper:focus-within {
+  background: rgba(255, 255, 255, .12) !important;
+  border-color: rgba(255, 255, 255, .16) !important;
+}
+
+[data-theme="dark"] .history-modal-container .history-search-section .search-input-wrapper .clear-button {
+  color: #77b7ff !important;
+}
+
+[data-theme="dark"] .history-modal-container .history-search-section .search-input-wrapper .clear-button:hover {
+  color: #9cccff !important;
+}
+
+[data-theme="dark"] .history-modal-container .history-content .history-group .history-group-title {
+  color: rgba(255, 255, 255, .45) !important;
+}
+
+[data-theme="dark"] .history-modal-container .history-content .history-group .history-item {
+  color: rgba(255, 255, 255, .88) !important;
+}
+
+[data-theme="dark"] .history-modal-container .history-content .history-group .history-item:hover {
+  background: rgba(255, 255, 255, .08) !important;
+}
+
+[data-theme="dark"] .history-modal-container .history-content .no-results, [data-theme="dark"] .history-modal-container .history-content .ant-typography.ant-typography-secondary {
+  color: rgba(255, 255, 255, .45) !important;
 }
 

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

@@ -47,7 +47,7 @@ var magnifying_glass_js_default = /*#__PURE__*/ __webpack_require__.n(magnifying
 const external_store_history_js_namespaceObject = require("../../store/history.js");
 require("./index.css");
 const { Text } = external_antd_namespaceObject.Typography;
-const HistorySelector = ({ onSelect, history, currentType })=>{
+const HistorySelector = ({ onSelect, history, currentType, trigger })=>{
     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);
@@ -114,7 +114,7 @@ const HistorySelector = ({ onSelect, history, currentType })=>{
             /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
                 className: "selector-trigger",
                 onClick: ()=>setIsModalOpen(true),
-                children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(history_js_default(), {
+                children: null != trigger ? trigger : /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(history_js_default(), {
                     width: 24,
                     height: 24
                 })