@godscene/visualizer 1.7.11

package/dist/es/component/env-config/index.mjs

@@ -0,0 +1,237 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { SettingOutlined } from "@ant-design/icons";
+import { Alert, Button, Input, Modal, Tooltip, message } from "antd";
+import { useEffect, useRef, useState } from "react";
+import { useEnvConfig } from "../../store/store.mjs";
+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 } = useEnvConfig();
+    const [isModalOpen, setIsModalOpen] = useState(false);
+    const [tempConfigString, setTempConfigString] = useState(configString);
+    const [connectivityResult, setConnectivityResult] = useState(null);
+    const [connectivityLoading, setConnectivityLoading] = useState(false);
+    const midsceneModelName = config.MIDSCENE_MODEL_NAME;
+    const canRunConnectivityTest = !!(null == playgroundSDK ? void 0 : playgroundSDK.runConnectivityTest) && !!(null == playgroundSDK ? void 0 : playgroundSDK.overrideConfig);
+    const componentRef = useRef(null);
+    const closeTimerRef = 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 = useEnvConfig.getState().config;
+                yield sdk.overrideConfig(nextConfig);
+                const result = yield sdk.runConnectivityTest();
+                setConnectivityResult(result);
+                if (result.passed) {
+                    message.success('Model verification passed');
+                    clearCloseTimer();
+                    closeTimerRef.current = window.setTimeout(()=>{
+                        setIsModalOpen(false);
+                        closeTimerRef.current = null;
+                    }, 2000);
+                } else message.warning('Model verification found issues');
+            } catch (error) {
+                const errorMessage = error instanceof Error ? error.message : String(error);
+                message.error(`Model verification failed: ${errorMessage}`);
+                setConnectivityResult({
+                    passed: false,
+                    checks: [
+                        {
+                            name: 'text',
+                            intent: 'default',
+                            modelName: useEnvConfig.getState().config.MIDSCENE_MODEL_NAME || '',
+                            modelFamily: void 0,
+                            passed: false,
+                            durationMs: 0,
+                            message: errorMessage
+                        }
+                    ]
+                });
+            } finally{
+                setConnectivityLoading(false);
+            }
+        })();
+    const handleCancel = ()=>{
+        clearCloseTimer();
+        setIsModalOpen(false);
+    };
+    useEffect(()=>{
+        if (isModalOpen) {
+            setTempConfigString(configString);
+            setConnectivityResult(null);
+        }
+    }, [
+        isModalOpen,
+        configString
+    ]);
+    useEffect(()=>()=>{
+            clearCloseTimer();
+        }, []);
+    return /*#__PURE__*/ jsxs("div", {
+        style: {
+            display: 'flex',
+            justifyContent: 'flex-end',
+            gap: '10px',
+            alignItems: 'center',
+            height: '100%',
+            minHeight: '32px'
+        },
+        ref: componentRef,
+        children: [
+            showModelName ? midsceneModelName : null,
+            /*#__PURE__*/ jsx(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__*/ jsx(SettingOutlined, {
+                    onClick: showModal
+                }) : /*#__PURE__*/ jsx("span", {
+                    onClick: showModal,
+                    style: {
+                        color: '#006AFF',
+                        cursor: 'pointer'
+                    },
+                    children: "set up"
+                })
+            }),
+            /*#__PURE__*/ jsxs(Modal, {
+                title: "Model Env Config",
+                open: isModalOpen,
+                onOk: handleOk,
+                onCancel: handleCancel,
+                footer: /*#__PURE__*/ jsxs("div", {
+                    style: {
+                        display: 'flex',
+                        justifyContent: 'flex-end',
+                        alignItems: 'center',
+                        gap: 8
+                    },
+                    children: [
+                        canRunConnectivityTest ? /*#__PURE__*/ jsx(Button, {
+                            type: "primary",
+                            ghost: true,
+                            loading: connectivityLoading,
+                            onClick: handleSaveAndRun,
+                            children: "Save and Verify Model"
+                        }, "save-and-run") : null,
+                        /*#__PURE__*/ jsx(Button, {
+                            type: "primary",
+                            onClick: handleOk,
+                            children: "Save"
+                        }, "save")
+                    ]
+                }),
+                style: {
+                    width: '800px',
+                    height: '100%',
+                    marginTop: '10%'
+                },
+                destroyOnClose: true,
+                maskClosable: true,
+                centered: true,
+                children: [
+                    /*#__PURE__*/ jsx(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__*/ jsxs("div", {
+                        children: [
+                            /*#__PURE__*/ jsx("p", {
+                                children: "The format is KEY=VALUE and separated by new lines."
+                            }),
+                            /*#__PURE__*/ jsxs("p", {
+                                children: [
+                                    "These data will be saved ",
+                                    /*#__PURE__*/ jsx("strong", {
+                                        children: "locally in your browser"
+                                    }),
+                                    "."
+                                ]
+                            })
+                        ]
+                    }),
+                    connectivityResult ? /*#__PURE__*/ jsx(Alert, {
+                        type: connectivityResult.passed ? 'success' : 'warning',
+                        showIcon: true,
+                        message: connectivityResult.passed ? 'Model verification passed' : 'Model verification failed',
+                        description: /*#__PURE__*/ jsx("div", {
+                            children: connectivityResult.checks.map((item)=>/*#__PURE__*/ jsxs("div", {
+                                    children: [
+                                        item.modelName,
+                                        " (",
+                                        item.intent,
+                                        "):",
+                                        ' ',
+                                        item.passed ? 'OK.' : `Failed.${item.message ? ` ${item.message}` : ''}`
+                                    ]
+                                }, item.name))
+                        }),
+                        style: {
+                            marginTop: 16
+                        }
+                    }) : null
+                ]
+            })
+        ]
+    });
+}
+export { EnvConfig };

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

@@ -0,0 +1,27 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ExclamationCircleFilled } from "@ant-design/icons";
+import { useEnvConfig } from "../../store/store.mjs";
+import { EnvConfig } from "../env-config/index.mjs";
+import "./index.css";
+const EnvConfigReminder = ({ className = '' })=>{
+    const { config } = useEnvConfig();
+    const configAlreadySet = Object.keys(config || {}).length >= 1;
+    if (configAlreadySet) return null;
+    return /*#__PURE__*/ jsxs("div", {
+        className: `env-config-reminder ${className}`,
+        children: [
+            /*#__PURE__*/ jsx(ExclamationCircleFilled, {
+                className: "reminder-icon"
+            }),
+            /*#__PURE__*/ jsx("span", {
+                className: "reminder-text",
+                children: "Please set up your environment variables before using."
+            }),
+            /*#__PURE__*/ jsx(EnvConfig, {
+                mode: "text",
+                showTooltipWhenEmpty: false
+            })
+        ]
+    });
+};
+export { EnvConfigReminder };

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

@@ -0,0 +1,158 @@
+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 = ({ name, label, isRequired, marginBottom, placeholder: customPlaceholder })=>{
+    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 = ({ name, label, isRequired, marginBottom, placeholder: customPlaceholder })=>{
+    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 = ({ 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__*/ 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 = ({ 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__*/ 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 = ({ name, label, isRequired, marginBottom, placeholder: customPlaceholder })=>{
+    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,237 @@
+.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;
+  max-width: min(320px, 100vw - 32px);
+  height: 400px;
+  position: fixed;
+  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 {
+  background: #fff;
+  border-color: #d9d9d9;
+}
+
+.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;
+}
+
+[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-modal-container {
+  background: #16181d !important;
+}
+
+[data-theme="dark"] .history-modal-container .history-modal-header .ant-typography {
+  color: rgba(255, 255, 255, .92) !important;
+}
+
+[data-theme="dark"] .history-modal-container .history-modal-header .close-button .anticon {
+  color: rgba(255, 255, 255, .48);
+}
+
+[data-theme="dark"] .history-modal-container .history-modal-header .close-button:hover .anticon {
+  color: rgba(255, 255, 255, .78);
+}
+
+[data-theme="dark"] .history-modal-container .history-search-section {
+  background: #16181d !important;
+}
+
+[data-theme="dark"] .history-modal-container .history-search-section .search-input-wrapper {
+  color: rgba(255, 255, 255, .38);
+}
+
+[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;
+}
+