@sqaitech/visualizer 0.30.10

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

@@ -0,0 +1,146 @@
+"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__, {
+    EnvConfig: ()=>EnvConfig
+});
+const jsx_runtime_namespaceObject = require("react/jsx-runtime");
+const icons_namespaceObject = require("@ant-design/icons");
+const external_antd_namespaceObject = require("antd");
+const external_react_namespaceObject = require("react");
+const store_js_namespaceObject = require("../../store/store.js");
+function EnvConfig(param) {
+    let { showTooltipWhenEmpty = true, showModelName = true, tooltipPlacement = 'bottom', mode = 'icon' } = param;
+    const { config, configString, loadConfig, syncFromStorage } = (0, store_js_namespaceObject.useEnvConfig)();
+    const [isModalOpen, setIsModalOpen] = (0, external_react_namespaceObject.useState)(false);
+    const [tempConfigString, setTempConfigString] = (0, external_react_namespaceObject.useState)(configString);
+    const midsceneModelName = config.MIDSCENE_MODEL_NAME;
+    const componentRef = (0, external_react_namespaceObject.useRef)(null);
+    const showModal = (e)=>{
+        syncFromStorage();
+        setIsModalOpen(true);
+        e.preventDefault();
+        e.stopPropagation();
+    };
+    const handleOk = ()=>{
+        setIsModalOpen(false);
+        loadConfig(tempConfigString);
+    };
+    const handleCancel = ()=>{
+        setIsModalOpen(false);
+    };
+    (0, external_react_namespaceObject.useEffect)(()=>{
+        if (isModalOpen) setTempConfigString(configString);
+    }, [
+        isModalOpen,
+        configString
+    ]);
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+        style: {
+            display: 'flex',
+            justifyContent: 'flex-end',
+            gap: '10px',
+            alignItems: 'center',
+            height: '100%',
+            minHeight: '32px'
+        },
+        ref: componentRef,
+        children: [
+            showModelName ? midsceneModelName : null,
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_antd_namespaceObject.Tooltip, {
+                title: "Please set up your environment variables before using.",
+                placement: tooltipPlacement,
+                align: {
+                    offset: [
+                        -10,
+                        5
+                    ]
+                },
+                getPopupContainer: ()=>componentRef.current,
+                open: isModalOpen ? false : showTooltipWhenEmpty ? 0 === Object.keys(config).length : void 0,
+                children: 'icon' === mode ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(icons_namespaceObject.SettingOutlined, {
+                    onClick: showModal
+                }) : /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
+                    onClick: showModal,
+                    style: {
+                        color: '#006AFF',
+                        cursor: 'pointer'
+                    },
+                    children: "set up"
+                })
+            }),
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_antd_namespaceObject.Modal, {
+                title: "Model Env Config",
+                open: isModalOpen,
+                onOk: handleOk,
+                onCancel: handleCancel,
+                okText: "Save",
+                style: {
+                    width: '800px',
+                    height: '100%',
+                    marginTop: '10%'
+                },
+                destroyOnClose: true,
+                maskClosable: true,
+                centered: true,
+                children: [
+                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_antd_namespaceObject.Input.TextArea, {
+                        rows: 7,
+                        placeholder: 'OPENAI_API_KEY=sk-...\nMIDSCENE_MODEL_NAME=gpt-4o-2024-08-06\n...',
+                        value: tempConfigString,
+                        onChange: (e)=>setTempConfigString(e.target.value),
+                        style: {
+                            whiteSpace: 'nowrap',
+                            wordWrap: 'break-word'
+                        }
+                    }),
+                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+                        children: [
+                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("p", {
+                                children: "The format is KEY=VALUE and separated by new lines."
+                            }),
+                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("p", {
+                                children: [
+                                    "These data will be saved ",
+                                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("strong", {
+                                        children: "locally in your browser"
+                                    }),
+                                    "."
+                                ]
+                            })
+                        ]
+                    })
+                ]
+            })
+        ]
+    });
+}
+exports.EnvConfig = __webpack_exports__.EnvConfig;
+for(var __webpack_i__ in __webpack_exports__)if (-1 === [
+    "EnvConfig"
+].indexOf(__webpack_i__)) exports[__webpack_i__] = __webpack_exports__[__webpack_i__];
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});

package/dist/lib/component/env-config-reminder/index.css

@@ -0,0 +1,22 @@
+.env-config-reminder {
+  background: #fff2e8;
+  border-radius: 12px;
+  align-items: center;
+  gap: 12px;
+  margin-bottom: 12px;
+  padding: 12px 16px;
+  display: flex;
+}
+
+.env-config-reminder .reminder-icon {
+  color: #fa541c;
+  width: 16px;
+  height: 16px;
+}
+
+.env-config-reminder .reminder-text {
+  color: #000;
+  flex: 1;
+  font-size: 14px;
+}
+

package/dist/lib/component/env-config-reminder/index.js

@@ -0,0 +1,62 @@
+"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__, {
+    EnvConfigReminder: ()=>EnvConfigReminder
+});
+const jsx_runtime_namespaceObject = require("react/jsx-runtime");
+const icons_namespaceObject = require("@ant-design/icons");
+const store_js_namespaceObject = require("../../store/store.js");
+const index_js_namespaceObject = require("../env-config/index.js");
+require("./index.css");
+const EnvConfigReminder = (param)=>{
+    let { className = '' } = param;
+    const { config } = (0, store_js_namespaceObject.useEnvConfig)();
+    const configAlreadySet = Object.keys(config || {}).length >= 1;
+    if (configAlreadySet) return null;
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+        className: `env-config-reminder ${className}`,
+        children: [
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(icons_namespaceObject.ExclamationCircleFilled, {
+                className: "reminder-icon"
+            }),
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
+                className: "reminder-text",
+                children: "Please set up your environment variables before using."
+            }),
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(index_js_namespaceObject.EnvConfig, {
+                mode: "text",
+                showTooltipWhenEmpty: false
+            })
+        ]
+    });
+};
+exports.EnvConfigReminder = __webpack_exports__.EnvConfigReminder;
+for(var __webpack_i__ in __webpack_exports__)if (-1 === [
+    "EnvConfigReminder"
+].indexOf(__webpack_i__)) exports[__webpack_i__] = __webpack_exports__[__webpack_i__];
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});

package/dist/lib/component/form-field/index.js

@@ -0,0 +1,209 @@
+"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__, {
+    BooleanField: ()=>BooleanField,
+    NumberField: ()=>NumberField,
+    TextField: ()=>TextField,
+    LocateField: ()=>LocateField,
+    EnumField: ()=>EnumField
+});
+const jsx_runtime_namespaceObject = require("react/jsx-runtime");
+const external_antd_namespaceObject = require("antd");
+const { TextArea } = external_antd_namespaceObject.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__*/ (0, jsx_runtime_namespaceObject.jsx)(external_antd_namespaceObject.Form.Item, {
+        name: [
+            'params',
+            name
+        ],
+        label: renderLabel(label, !isRequired),
+        rules: isRequired ? [
+            {
+                required: true,
+                message: `Please input ${name}`
+            }
+        ] : [],
+        style: {
+            marginBottom
+        },
+        colon: false,
+        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_antd_namespaceObject.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__*/ (0, jsx_runtime_namespaceObject.jsx)(external_antd_namespaceObject.Form.Item, {
+        name: [
+            'params',
+            name
+        ],
+        label: renderLabel(label, !isRequired),
+        rules: isRequired ? [
+            {
+                required: true,
+                message: `The ${name} is required`
+            }
+        ] : [],
+        style: {
+            marginBottom
+        },
+        colon: false,
+        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.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__*/ (0, jsx_runtime_namespaceObject.jsx)(external_antd_namespaceObject.Form.Item, {
+        name: [
+            'params',
+            name
+        ],
+        label: label,
+        rules: isRequired ? [
+            {
+                required: true,
+                message: `Please select ${name}`
+            }
+        ] : [],
+        style: {
+            marginBottom
+        },
+        colon: false,
+        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_antd_namespaceObject.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__*/ (0, jsx_runtime_namespaceObject.jsx)(external_antd_namespaceObject.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__*/ (0, jsx_runtime_namespaceObject.jsx)(external_antd_namespaceObject.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__*/ (0, jsx_runtime_namespaceObject.jsx)(external_antd_namespaceObject.Form.Item, {
+        name: [
+            'params',
+            name
+        ],
+        label: renderLabel(label, !isRequired),
+        rules: isRequired ? [
+            {
+                required: true,
+                message: `Please select ${name}`
+            }
+        ] : [],
+        style: {
+            marginBottom
+        },
+        colon: false,
+        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_antd_namespaceObject.Select, {
+            placeholder: customPlaceholder || `Select ${name}`,
+            options: selectOptions
+        })
+    }, name);
+};
+exports.BooleanField = __webpack_exports__.BooleanField;
+exports.EnumField = __webpack_exports__.EnumField;
+exports.LocateField = __webpack_exports__.LocateField;
+exports.NumberField = __webpack_exports__.NumberField;
+exports.TextField = __webpack_exports__.TextField;
+for(var __webpack_i__ in __webpack_exports__)if (-1 === [
+    "BooleanField",
+    "EnumField",
+    "LocateField",
+    "NumberField",
+    "TextField"
+].indexOf(__webpack_i__)) exports[__webpack_i__] = __webpack_exports__[__webpack_i__];
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});

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