@godscene/visualizer 1.7.11

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

@@ -0,0 +1,271 @@
+"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 ("u" > 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 asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) {
+    try {
+        var info = gen[key](arg);
+        var value = info.value;
+    } catch (error) {
+        reject(error);
+        return;
+    }
+    if (info.done) resolve(value);
+    else Promise.resolve(value).then(_next, _throw);
+}
+function _async_to_generator(fn) {
+    return function() {
+        var self = this, args = arguments;
+        return new Promise(function(resolve, reject) {
+            var gen = fn.apply(self, args);
+            function _next(value) {
+                asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value);
+            }
+            function _throw(err) {
+                asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err);
+            }
+            _next(void 0);
+        });
+    };
+}
+function EnvConfig({ showTooltipWhenEmpty = true, showModelName = true, tooltipPlacement = 'bottom', mode = 'icon', playgroundSDK }) {
+    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 [connectivityResult, setConnectivityResult] = (0, external_react_namespaceObject.useState)(null);
+    const [connectivityLoading, setConnectivityLoading] = (0, external_react_namespaceObject.useState)(false);
+    const midsceneModelName = config.MIDSCENE_MODEL_NAME;
+    const canRunConnectivityTest = !!(null == playgroundSDK ? void 0 : playgroundSDK.runConnectivityTest) && !!(null == playgroundSDK ? void 0 : playgroundSDK.overrideConfig);
+    const componentRef = (0, external_react_namespaceObject.useRef)(null);
+    const closeTimerRef = (0, external_react_namespaceObject.useRef)(null);
+    const clearCloseTimer = ()=>{
+        if (null !== closeTimerRef.current) {
+            window.clearTimeout(closeTimerRef.current);
+            closeTimerRef.current = null;
+        }
+    };
+    const showModal = (e)=>{
+        syncFromStorage();
+        clearCloseTimer();
+        setIsModalOpen(true);
+        e.preventDefault();
+        e.stopPropagation();
+    };
+    const handleOk = ()=>{
+        clearCloseTimer();
+        setIsModalOpen(false);
+        loadConfig(tempConfigString);
+    };
+    const handleSaveAndRun = ()=>_async_to_generator(function*() {
+            const sdk = playgroundSDK;
+            if (!(null == sdk ? void 0 : sdk.overrideConfig) || !(null == sdk ? void 0 : sdk.runConnectivityTest)) return;
+            try {
+                setConnectivityLoading(true);
+                setConnectivityResult(null);
+                loadConfig(tempConfigString);
+                const nextConfig = store_js_namespaceObject.useEnvConfig.getState().config;
+                yield sdk.overrideConfig(nextConfig);
+                const result = yield sdk.runConnectivityTest();
+                setConnectivityResult(result);
+                if (result.passed) {
+                    external_antd_namespaceObject.message.success('Model verification passed');
+                    clearCloseTimer();
+                    closeTimerRef.current = window.setTimeout(()=>{
+                        setIsModalOpen(false);
+                        closeTimerRef.current = null;
+                    }, 2000);
+                } else external_antd_namespaceObject.message.warning('Model verification found issues');
+            } catch (error) {
+                const errorMessage = error instanceof Error ? error.message : String(error);
+                external_antd_namespaceObject.message.error(`Model verification failed: ${errorMessage}`);
+                setConnectivityResult({
+                    passed: false,
+                    checks: [
+                        {
+                            name: 'text',
+                            intent: 'default',
+                            modelName: store_js_namespaceObject.useEnvConfig.getState().config.MIDSCENE_MODEL_NAME || '',
+                            modelFamily: void 0,
+                            passed: false,
+                            durationMs: 0,
+                            message: errorMessage
+                        }
+                    ]
+                });
+            } finally{
+                setConnectivityLoading(false);
+            }
+        })();
+    const handleCancel = ()=>{
+        clearCloseTimer();
+        setIsModalOpen(false);
+    };
+    (0, external_react_namespaceObject.useEffect)(()=>{
+        if (isModalOpen) {
+            setTempConfigString(configString);
+            setConnectivityResult(null);
+        }
+    }, [
+        isModalOpen,
+        configString
+    ]);
+    (0, external_react_namespaceObject.useEffect)(()=>()=>{
+            clearCloseTimer();
+        }, []);
+    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,
+                footer: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+                    style: {
+                        display: 'flex',
+                        justifyContent: 'flex-end',
+                        alignItems: 'center',
+                        gap: 8
+                    },
+                    children: [
+                        canRunConnectivityTest ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_antd_namespaceObject.Button, {
+                            type: "primary",
+                            ghost: true,
+                            loading: connectivityLoading,
+                            onClick: handleSaveAndRun,
+                            children: "Save and Verify Model"
+                        }, "save-and-run") : null,
+                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_antd_namespaceObject.Button, {
+                            type: "primary",
+                            onClick: handleOk,
+                            children: "Save"
+                        }, "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: 'MIDSCENE_MODEL_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"
+                                    }),
+                                    "."
+                                ]
+                            })
+                        ]
+                    }),
+                    connectivityResult ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_antd_namespaceObject.Alert, {
+                        type: connectivityResult.passed ? 'success' : 'warning',
+                        showIcon: true,
+                        message: connectivityResult.passed ? 'Model verification passed' : 'Model verification failed',
+                        description: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+                            children: connectivityResult.checks.map((item)=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+                                    children: [
+                                        item.modelName,
+                                        " (",
+                                        item.intent,
+                                        "):",
+                                        ' ',
+                                        item.passed ? 'OK.' : `Failed.${item.message ? ` ${item.message}` : ''}`
+                                    ]
+                                }, item.name))
+                        }),
+                        style: {
+                            marginTop: 16
+                        }
+                    }) : null
+                ]
+            })
+        ]
+    });
+}
+exports.EnvConfig = __webpack_exports__.EnvConfig;
+for(var __rspack_i in __webpack_exports__)if (-1 === [
+    "EnvConfig"
+].indexOf(__rspack_i)) exports[__rspack_i] = __webpack_exports__[__rspack_i];
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});

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

@@ -0,0 +1,30 @@
+.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;
+}
+
+[data-theme="dark"] .env-config-reminder {
+  background: rgba(82, 38, 7, .3);
+}
+
+[data-theme="dark"] .env-config-reminder .reminder-text {
+  color: #f8fafd;
+}
+

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

@@ -0,0 +1,61 @@
+"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 ("u" > 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 = ({ className = '' })=>{
+    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 __rspack_i in __webpack_exports__)if (-1 === [
+    "EnvConfigReminder"
+].indexOf(__rspack_i)) exports[__rspack_i] = __webpack_exports__[__rspack_i];
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});

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

@@ -0,0 +1,204 @@
+"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 ("u" > 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__, {
+    EnumField: ()=>EnumField,
+    NumberField: ()=>NumberField,
+    LocateField: ()=>LocateField,
+    TextField: ()=>TextField,
+    BooleanField: ()=>BooleanField
+});
+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 = ({ name, label, isRequired, marginBottom, placeholder: customPlaceholder })=>{
+    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 = ({ name, label, isRequired, marginBottom, placeholder: customPlaceholder })=>{
+    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 = ({ name, label, fieldSchema, isRequired, marginBottom, placeholder: customPlaceholder })=>{
+    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 = ({ name, label, isRequired, marginBottom, placeholder: customPlaceholder })=>{
+    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 = ({ name, label, isRequired, marginBottom, placeholder: customPlaceholder })=>{
+    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 __rspack_i in __webpack_exports__)if (-1 === [
+    "BooleanField",
+    "EnumField",
+    "LocateField",
+    "NumberField",
+    "TextField"
+].indexOf(__rspack_i)) exports[__rspack_i] = __webpack_exports__[__rspack_i];
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});