@sqaitech/visualizer 0.30.10

package/dist/es/component/form-field/index.mjs

@@ -0,0 +1,163 @@
+import { jsx } from "react/jsx-runtime";
+import { Form, Input, InputNumber, Select } from "antd";
+const { TextArea } = Input;
+const renderLabel = (label, isOptional)=>`${label}${isOptional ? ' (Optional)' : ''}`;
+const TextField = (param)=>{
+    let { name, label, isRequired, marginBottom, placeholder: customPlaceholder } = param;
+    const placeholder = customPlaceholder || `Enter ${name}`;
+    return /*#__PURE__*/ jsx(Form.Item, {
+        name: [
+            'params',
+            name
+        ],
+        label: renderLabel(label, !isRequired),
+        rules: isRequired ? [
+            {
+                required: true,
+                message: `Please input ${name}`
+            }
+        ] : [],
+        style: {
+            marginBottom
+        },
+        colon: false,
+        children: /*#__PURE__*/ jsx(Input, {
+            placeholder: placeholder
+        })
+    }, name);
+};
+const LocateField = (param)=>{
+    let { name, label, isRequired, marginBottom, placeholder: customPlaceholder } = param;
+    const placeholder = customPlaceholder || `Describe the ${name}, use natural language`;
+    return /*#__PURE__*/ jsx(Form.Item, {
+        name: [
+            'params',
+            name
+        ],
+        label: renderLabel(label, !isRequired),
+        rules: isRequired ? [
+            {
+                required: true,
+                message: `The ${name} is required`
+            }
+        ] : [],
+        style: {
+            marginBottom
+        },
+        colon: false,
+        children: /*#__PURE__*/ jsx(TextArea, {
+            rows: 2,
+            placeholder: placeholder
+        })
+    }, name);
+};
+const EnumField = (param)=>{
+    let { name, label, fieldSchema, isRequired, marginBottom, placeholder: customPlaceholder } = param;
+    var _fieldSchema__def;
+    const enumValues = (null == (_fieldSchema__def = fieldSchema._def) ? void 0 : _fieldSchema__def.values) || [];
+    const selectOptions = enumValues.map((value)=>({
+            value,
+            label: value.charAt(0).toUpperCase() + value.slice(1)
+        }));
+    return /*#__PURE__*/ jsx(Form.Item, {
+        name: [
+            'params',
+            name
+        ],
+        label: label,
+        rules: isRequired ? [
+            {
+                required: true,
+                message: `Please select ${name}`
+            }
+        ] : [],
+        style: {
+            marginBottom
+        },
+        colon: false,
+        children: /*#__PURE__*/ jsx(Select, {
+            placeholder: customPlaceholder || `Select ${name}`,
+            options: selectOptions
+        })
+    }, name);
+};
+const NumberField = (param)=>{
+    let { name, label, isRequired, marginBottom, placeholder: customPlaceholder } = param;
+    const defaultPlaceholder = 'distance' === name ? 500 : 0;
+    const placeholderValue = customPlaceholder ? Number(customPlaceholder) || defaultPlaceholder : defaultPlaceholder;
+    const min = 0;
+    const max = 'distance' === name ? 10000 : void 0;
+    return /*#__PURE__*/ jsx(Form.Item, {
+        name: [
+            'params',
+            name
+        ],
+        label: `${label}${'distance' === name ? ' (px)' : ''}`,
+        rules: isRequired ? [
+            {
+                required: true,
+                message: `Please input ${name}`
+            },
+            {
+                type: 'number',
+                min,
+                message: `${label} must be at least ${min}`
+            }
+        ] : [
+            {
+                type: 'number',
+                min,
+                message: `${label} must be at least ${min}`
+            }
+        ],
+        style: {
+            flex: 'distance' === name ? 1 : void 0,
+            marginBottom
+        },
+        colon: false,
+        children: /*#__PURE__*/ jsx(InputNumber, {
+            placeholder: placeholderValue.toString(),
+            min: min,
+            max: max,
+            step: 'distance' === name ? 10 : 1,
+            style: {
+                width: '100%'
+            }
+        })
+    }, name);
+};
+const BooleanField = (param)=>{
+    let { name, label, isRequired, marginBottom, placeholder: customPlaceholder } = param;
+    const selectOptions = [
+        {
+            value: true,
+            label: 'True'
+        },
+        {
+            value: false,
+            label: 'False'
+        }
+    ];
+    return /*#__PURE__*/ jsx(Form.Item, {
+        name: [
+            'params',
+            name
+        ],
+        label: renderLabel(label, !isRequired),
+        rules: isRequired ? [
+            {
+                required: true,
+                message: `Please select ${name}`
+            }
+        ] : [],
+        style: {
+            marginBottom
+        },
+        colon: false,
+        children: /*#__PURE__*/ jsx(Select, {
+            placeholder: customPlaceholder || `Select ${name}`,
+            options: selectOptions
+        })
+    }, name);
+};
+export { BooleanField, EnumField, LocateField, NumberField, TextField };

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

@@ -0,0 +1,135 @@
+.history-selector-wrapper {
+  position: relative;
+}
+
+.history-modal-overlay {
+  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 {
+  border-radius: 12px;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  overflow: hidden;
+}
+
+.history-modal-container .history-modal-header {
+  justify-content: space-between;
+  align-items: center;
+  height: 48px;
+  padding: 0 25px;
+  line-height: 48px;
+  display: flex;
+}
+
+.history-modal-container .history-modal-header .close-button {
+  justify-content: center;
+  align-items: center;
+  margin-right: -4px;
+  padding: 4px;
+  display: flex;
+}
+
+.history-modal-container .history-modal-header .close-button .anticon {
+  color: #999;
+  font-size: 18px;
+}
+
+.history-modal-container .history-modal-header .close-button:hover .anticon {
+  color: #666;
+}
+
+.history-modal-container .history-search-section {
+  background: #fff;
+  padding: 16px 20px;
+}
+
+.history-modal-container .history-search-section .search-input-wrapper {
+  color: rgba(0, 0, 0, .25);
+  align-items: center;
+  gap: 12px;
+  display: flex;
+}
+
+.history-modal-container .history-search-section .search-input-wrapper .search-input {
+  background: #f1f2f3;
+  border: none;
+  border-radius: 16px;
+  flex: 1;
+  height: 36px;
+}
+
+.history-modal-container .history-search-section .search-input-wrapper .search-input .ant-input {
+  box-shadow: none;
+  background: none;
+  border: none;
+}
+
+.history-modal-container .history-search-section .search-input-wrapper .search-input:hover, .history-modal-container .history-search-section .search-input-wrapper .search-input:focus-within {
+  background: #fff;
+  border-color: #d9d9d9;
+}
+
+.history-modal-container .history-search-section .search-input-wrapper .clear-button {
+  color: #1890ff;
+  height: auto;
+  padding: 0;
+}
+
+.history-modal-container .history-search-section .search-input-wrapper .clear-button:hover {
+  color: #40a9ff;
+}
+
+.history-modal-container .history-content {
+  flex: 1;
+  padding: 0 25px 25px;
+  overflow-y: auto;
+}
+
+.history-modal-container .history-content .history-group {
+  margin-bottom: 10px;
+}
+
+.history-modal-container .history-content .history-group .history-group-title {
+  color: rgba(0, 0, 0, .45);
+  height: 40px;
+  font-size: 12px;
+  font-weight: 400;
+  line-height: 40px;
+}
+
+.history-modal-container .history-content .history-group .history-item {
+  cursor: pointer;
+  color: rgba(0, 0, 0, .85);
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  height: 40px;
+  font-size: 14px;
+  line-height: 40px;
+  overflow: hidden;
+}
+
+.history-modal-container .history-content .history-group .history-item:hover {
+  background: #f2f4f7;
+  margin: 0 -8px;
+  padding: 0 8px;
+}
+
+.history-modal-container .history-content .no-results {
+  text-align: center;
+  color: #999;
+  padding: 40px 20px;
+}
+

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

@@ -0,0 +1,170 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Button, Input, Typography } from "antd";
+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";
+import { useHistoryStore } from "../../store/history.mjs";
+import "./index.css";
+const { Text } = Typography;
+const HistorySelector = (param)=>{
+    let { onSelect, history, currentType } = 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;
+        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);
+    };
+    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", {
+            className: "history-group",
+            children: [
+                /*#__PURE__*/ jsx("div", {
+                    className: "history-group-title",
+                    children: title
+                }),
+                items.map((item, index)=>/*#__PURE__*/ jsx("div", {
+                        className: "history-item",
+                        onClick: ()=>handleHistoryClick(item),
+                        children: item.prompt
+                    }, `${item.timestamp}-${index}`))
+            ]
+        }, title);
+    };
+    return /*#__PURE__*/ jsxs("div", {
+        className: "history-selector-wrapper",
+        children: [
+            /*#__PURE__*/ jsx("div", {
+                className: "selector-trigger",
+                onClick: ()=>setIsModalOpen(true),
+                children: /*#__PURE__*/ jsx(icons_history, {
+                    width: 24,
+                    height: 24
+                })
+            }),
+            isModalOpen && /*#__PURE__*/ jsx("div", {
+                className: "history-modal-overlay",
+                ref: modalRef,
+                children: /*#__PURE__*/ jsxs("div", {
+                    className: "history-modal-container",
+                    children: [
+                        /*#__PURE__*/ jsxs("div", {
+                            className: "history-modal-header",
+                            children: [
+                                /*#__PURE__*/ jsxs(Text, {
+                                    strong: true,
+                                    style: {
+                                        fontSize: '16px'
+                                    },
+                                    children: [
+                                        "History (",
+                                        history.length,
+                                        ")"
+                                    ]
+                                }),
+                                /*#__PURE__*/ jsx(Button, {
+                                    size: "small",
+                                    type: "text",
+                                    icon: /*#__PURE__*/ jsx(icons_close, {
+                                        width: 16,
+                                        height: 16
+                                    }),
+                                    onClick: ()=>setIsModalOpen(false),
+                                    className: "close-button"
+                                })
+                            ]
+                        }),
+                        /*#__PURE__*/ jsx("div", {
+                            className: "history-search-section",
+                            children: /*#__PURE__*/ jsxs("div", {
+                                className: "search-input-wrapper",
+                                children: [
+                                    /*#__PURE__*/ jsx(Input, {
+                                        placeholder: "Search",
+                                        value: searchText,
+                                        onChange: (e)=>setSearchText(e.target.value),
+                                        prefix: /*#__PURE__*/ jsx(magnifying_glass, {
+                                            width: 18,
+                                            height: 18
+                                        }),
+                                        className: "search-input",
+                                        allowClear: true
+                                    }),
+                                    /*#__PURE__*/ jsx(Button, {
+                                        type: "link",
+                                        onClick: handleClearHistory,
+                                        className: "clear-button",
+                                        disabled: 0 === history.length,
+                                        children: "Clear"
+                                    })
+                                ]
+                            })
+                        }),
+                        /*#__PURE__*/ jsx("div", {
+                            className: "history-content",
+                            children: 0 === history.length ? /*#__PURE__*/ jsx("div", {
+                                className: "no-results",
+                                children: /*#__PURE__*/ jsx(Text, {
+                                    type: "secondary",
+                                    children: "No history record"
+                                })
+                            }) : /*#__PURE__*/ jsxs(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__*/ jsx("div", {
+                                        className: "no-results",
+                                        children: /*#__PURE__*/ jsx(Text, {
+                                            type: "secondary",
+                                            children: "No matching history record"
+                                        })
+                                    })
+                                ]
+                            })
+                        })
+                    ]
+                })
+            })
+        ]
+    });
+};
+export { HistorySelector };

package/dist/es/component/index.mjs

@@ -0,0 +1 @@
+export * from "../types.mjs";

package/dist/es/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/es/component/logo/index.mjs

@@ -0,0 +1,20 @@
+import { jsx } from "react/jsx-runtime";
+import "./index.css";
+const LogoUrl = 'https://lf3-static.bytednsdoc.com/obj/eden-cn/vhaeh7vhabf/Midscene.png';
+const Logo = (param)=>{
+    let { hideLogo = false } = param;
+    if (hideLogo) return null;
+    return /*#__PURE__*/ jsx("div", {
+        className: "logo",
+        children: /*#__PURE__*/ jsx("a", {
+            href: "https://midscenejs.com/",
+            target: "_blank",
+            rel: "noreferrer",
+            children: /*#__PURE__*/ jsx("img", {
+                alt: "Midscene_logo",
+                src: "https://lf3-static.bytednsdoc.com/obj/eden-cn/vhaeh7vhabf/Midscene.png"
+            })
+        })
+    });
+};
+export { Logo, LogoUrl };

package/dist/es/component/misc/index.mjs

@@ -0,0 +1,94 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ArrowRightOutlined, CheckOutlined, ClockCircleOutlined, CloseOutlined, LogoutOutlined, MinusOutlined, WarningOutlined } from "@ant-design/icons";
+import { Alert } from "antd";
+import shiny_text from "../shiny-text/index.mjs";
+function timeCostStrElement(timeCost) {
+    let str;
+    str = 'number' != typeof timeCost ? '-' : `${(timeCost / 1000).toFixed(2)}s`;
+    return /*#__PURE__*/ 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__*/ jsx("span", {
+                style: {
+                    color: '#00AD4B'
+                },
+                children: /*#__PURE__*/ jsx(CheckOutlined, {})
+            });
+        case 'finishedWithWarning':
+            return /*#__PURE__*/ jsx("span", {
+                style: {
+                    color: '#f7bb05'
+                },
+                children: /*#__PURE__*/ jsx(WarningOutlined, {})
+            });
+        case 'failed':
+        case 'closed':
+        case 'timedOut':
+        case 'interrupted':
+            return /*#__PURE__*/ jsx("span", {
+                style: {
+                    color: '#FF0A0A'
+                },
+                children: /*#__PURE__*/ jsx(CloseOutlined, {})
+            });
+        case 'pending':
+            return /*#__PURE__*/ jsx(ClockCircleOutlined, {});
+        case 'cancelled':
+        case 'skipped':
+            return /*#__PURE__*/ jsx(LogoutOutlined, {});
+        case 'running':
+            return /*#__PURE__*/ jsx(ArrowRightOutlined, {});
+        default:
+            return /*#__PURE__*/ jsx(MinusOutlined, {});
+    }
+};
+const errorMessageServerNotReady = /*#__PURE__*/ jsxs("span", {
+    children: [
+        "Don't worry, just one more step to launch the playground server.",
+        /*#__PURE__*/ jsx("br", {}),
+        "Please run one of the commands under the midscene project directory:",
+        /*#__PURE__*/ jsx("br", {}),
+        "a. ",
+        /*#__PURE__*/ jsx("strong", {
+            children: "npx midscene-playground"
+        }),
+        /*#__PURE__*/ jsx("br", {}),
+        "b. ",
+        /*#__PURE__*/ jsx("strong", {
+            children: "npx --yes @sqaitech/web"
+        })
+    ]
+});
+const serverLaunchTip = function() {
+    let notReadyMessage = arguments.length > 0 && void 0 !== arguments[0] ? arguments[0] : errorMessageServerNotReady;
+    return /*#__PURE__*/ jsx("div", {
+        className: "server-tip",
+        children: /*#__PURE__*/ jsx(Alert, {
+            message: "Playground Server Not Ready",
+            description: notReadyMessage,
+            type: "warning"
+        })
+    });
+};
+const emptyResultTip = /*#__PURE__*/ jsx("div", {
+    className: "result-empty-tip",
+    style: {
+        textAlign: 'center'
+    },
+    children: /*#__PURE__*/ jsx(shiny_text, {
+        disabled: true,
+        text: "The result will be shown here"
+    })
+});
+export { emptyResultTip, errorMessageServerNotReady, iconForStatus, serverLaunchTip, timeCostStrElement };

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;
+}
+