@blocklet/pages-kit 0.2.317 → 0.2.319

package/lib/cjs/builtin/async/ai-runtime/runtime-components/V0/components/Loading.js

@@ -0,0 +1,152 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AIRunningLoading = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const Spinner_1 = __importDefault(require("@arcblock/ux/lib/Spinner"));
+const material_1 = require("@mui/material");
+function Loading(props) {
+    const { sx } = props, restProps = __rest(props, ["sx"]);
+    return ((0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ sx: Object.assign({ flex: 1, display: 'flex', justifyContent: 'center', alignItems: 'center', position: 'fixed', top: 0, left: 0, width: '100vw', height: '100vh', backgroundColor: 'rgba(255, 255, 255, 0.8)' }, sx) }, restProps, { children: (0, jsx_runtime_1.jsx)(Spinner_1.default, {}) })));
+}
+exports.default = Loading;
+function AIRunningLoading(props) {
+    const { sx } = props, restProps = __rest(props, ["sx"]);
+    const animationTimeList = [
+        {
+            time: 2,
+            width: 60,
+            height: 60,
+            extraProps: {
+                variant: 'circular',
+                sx: {
+                    backgroundColor: 'grey.200',
+                },
+            },
+        },
+        {
+            time: 3,
+            width: 100,
+            height: 20,
+            extraProps: {
+                sx: {
+                    backgroundColor: 'grey.100',
+                },
+            },
+        },
+        {
+            time: 2,
+            width: 250,
+            height: 10,
+            extraProps: {
+                sx: {
+                    backgroundColor: 'grey.200',
+                },
+            },
+        },
+        {
+            time: 4,
+            width: 150,
+            height: 10,
+            extraProps: {
+                sx: {
+                    backgroundColor: 'grey.200',
+                },
+            },
+        },
+        {
+            time: 8,
+            width: '100%',
+            height: '100%',
+            Component: material_1.Box,
+            extraProps: {
+                children: [
+                    (0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "rectangular", sx: {
+                            width: 60,
+                            height: 50,
+                            borderRadius: 1,
+                            backgroundColor: 'grey.200',
+                        } }),
+                    (0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "rectangular", sx: {
+                            width: 120,
+                            height: 50,
+                            borderRadius: 1,
+                            backgroundColor: 'grey.200',
+                        } }),
+                    (0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "rectangular", sx: {
+                            width: 180,
+                            height: 50,
+                            borderRadius: 1,
+                            backgroundColor: 'grey.200',
+                        } }),
+                ],
+                sx: {
+                    p: 2,
+                    display: 'flex',
+                    gap: 1.5,
+                    justifyContent: 'space-between',
+                },
+            },
+        },
+        {
+            time: 60,
+            width: 500,
+            height: 150,
+            extraProps: {
+                sx: {
+                    backgroundColor: 'grey.200',
+                },
+            },
+        },
+    ];
+    return ((0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ sx: Object.assign({ flex: 1, display: 'inline-flex', justifyContent: 'center', alignItems: 'center', backgroundColor: 'white', flexDirection: 'column', gap: 1.5, '@keyframes loading': {
+                '0%': {
+                    transform: 'translateY(-8px) scaleX(1.3)',
+                    opacity: 0,
+                    height: '100%',
+                },
+                '50%': {
+                    transform: 'translateY(0px)',
+                    opacity: 0.5,
+                    zoom: 1,
+                    height: '100%',
+                },
+                '100%': {
+                    transform: 'translateY(4px)',
+                    opacity: 1,
+                    zoom: 1,
+                    height: '100%',
+                },
+            } }, sx) }, restProps, { children: animationTimeList.map((item, index) => {
+            // 计算 index 之前的累计时间之和，作为动画延迟时间
+            const delay = animationTimeList.slice(0, index).reduce((prev, current) => prev + current.time, 0);
+            const { time, width, height, Component = material_1.Skeleton } = item, _a = item.extraProps, _b = _a === void 0 ? {} : _a, { sx } = _b, restSkeletonProps = __rest(_b, ["sx"]);
+            const isLast = index === animationTimeList.length - 1;
+            return ((0, jsx_runtime_1.jsx)(material_1.Box, { sx: {
+                    animation: `loading ${time}s 1 ${delay}s forwards`,
+                    borderRadius: 1,
+                    overflow: 'hidden',
+                    opacity: 0,
+                    transition: 'all 0.3s',
+                }, children: (0, jsx_runtime_1.jsx)(Component
+                // @ts-ignore
+                , Object.assign({ 
+                    // @ts-ignore
+                    variant: "rectangular", sx: Object.assign({ width,
+                        height, animationIterationCount: isLast ? 'infinite' : 1, animationFillMode: isLast ? 'forwards' : 'none' }, sx) }, restSkeletonProps)) }, index));
+        }) })));
+}
+exports.AIRunningLoading = AIRunningLoading;

package/lib/cjs/builtin/async/ai-runtime/runtime-components/V0/components/PropertiesSetting.js

@@ -0,0 +1,80 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const material_1 = require("@mui/material");
+const react_1 = require("react");
+const locale_1 = require("../../../../../locale");
+const ConfirmDialog_1 = __importDefault(require("./ConfirmDialog"));
+const FieldComponentMap = {
+    number: {
+        Filed: material_1.TextField,
+        extraProps: {
+            type: 'number',
+        },
+    },
+    boolean: {
+        Filed: material_1.Switch,
+    },
+    json: {
+        Filed: material_1.TextField,
+        extraProps: {
+            multiline: true,
+            minRows: 3,
+            maxRows: 5,
+        },
+    },
+    url: {
+        Filed: material_1.TextField,
+    },
+    string: {
+        Filed: material_1.TextField,
+    },
+};
+const PropertiesSetting = (0, react_1.forwardRef)((props, ref) => {
+    const { t, locale } = (0, locale_1.useLocaleContext)();
+    const ConfirmDialogRef = (0, react_1.useRef)();
+    const valuesRef = (0, react_1.useRef)({});
+    const openParamsRef = (0, react_1.useRef)({});
+    const open = (params) => {
+        var _a;
+        if (!(ConfirmDialogRef === null || ConfirmDialogRef === void 0 ? void 0 : ConfirmDialogRef.current))
+            return;
+        openParamsRef.current = params;
+        ConfirmDialogRef.current.open({
+            title: t('v0.propertiesSetting'),
+            children: ((0, jsx_runtime_1.jsxs)(material_1.Box, { children: [(0, jsx_runtime_1.jsx)(material_1.Alert, { severity: "info", sx: { mb: 2 }, children: t('v0.propertiesSettingTip') }), (0, jsx_runtime_1.jsx)(material_1.Stack, { spacing: 2, children: (_a = params === null || params === void 0 ? void 0 : params.schema) === null || _a === void 0 ? void 0 : _a.map((item) => {
+                            var _a, _b;
+                            const { id, key, type, locales } = item;
+                            const { Filed, extraProps } = (FieldComponentMap[type] || FieldComponentMap.string);
+                            const currentLocale = (locales === null || locales === void 0 ? void 0 : locales[locale]) || (locales === null || locales === void 0 ? void 0 : locales.en);
+                            return ((0, jsx_runtime_1.jsxs)(material_1.Box, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "subtitle2", sx: {
+                                            mb: 0.5,
+                                        }, children: currentLocale === null || currentLocale === void 0 ? void 0 : currentLocale.name }), (0, jsx_runtime_1.jsx)(Filed, Object.assign({ fullWidth: true, variant: "outlined", defaultValue: ((_b = (_a = openParamsRef === null || openParamsRef === void 0 ? void 0 : openParamsRef.current) === null || _a === void 0 ? void 0 : _a.defaultValues) === null || _b === void 0 ? void 0 : _b[key]) || (currentLocale === null || currentLocale === void 0 ? void 0 : currentLocale.defaultValue), size: "small", onChange: (e) => {
+                                            // update value
+                                            valuesRef.current = Object.assign(Object.assign({}, valuesRef.current), { [key]: e.target.value });
+                                        } }, extraProps))] }, id));
+                        }) })] })),
+            onConfirm: () => {
+                var _a;
+                (_a = params === null || params === void 0 ? void 0 : params.onSubmit) === null || _a === void 0 ? void 0 : _a.call(params, getValues());
+            },
+            onCancel: () => { },
+        });
+    };
+    const getValues = () => {
+        var _a;
+        return Object.assign(Object.assign({}, (_a = openParamsRef === null || openParamsRef === void 0 ? void 0 : openParamsRef.current) === null || _a === void 0 ? void 0 : _a.defaultValues), valuesRef.current);
+    };
+    (0, react_1.useImperativeHandle)(ref, () => ({
+        open,
+        getValues,
+    }));
+    (0, react_1.useEffect)(() => {
+        valuesRef.current = {};
+    }, [locale]);
+    return (0, jsx_runtime_1.jsx)(ConfirmDialog_1.default, Object.assign({ ref: ConfirmDialogRef }, props));
+});
+exports.default = PropertiesSetting;

package/lib/cjs/builtin/async/ai-runtime/runtime-components/V0/components/UserQuestion.js

@@ -0,0 +1,32 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const ClickToCopy_1 = __importDefault(require("@arcblock/ux/lib/ClickToCopy"));
+const material_1 = require("@mui/material");
+const ux_1 = require("../../../../../arcblock/ux");
+const locale_1 = require("../../../../../locale");
+const session_1 = require("../../../../../session");
+const utils_1 = require("../utils");
+function UserQuestion({ question }) {
+    var _a;
+    const { session: authSession } = (0, session_1.useSessionContext)();
+    const { user } = authSession;
+    const { locale } = (0, locale_1.useLocaleContext)();
+    return ((0, jsx_runtime_1.jsxs)(material_1.Box, { sx: {
+            display: 'flex',
+            alignItems: 'center',
+            gap: 1,
+        }, children: [((_a = authSession === null || authSession === void 0 ? void 0 : authSession.user) === null || _a === void 0 ? void 0 : _a.did) && ((0, jsx_runtime_1.jsx)(material_1.Box, { sx: {
+                    width: 30,
+                    height: 30,
+                }, children: (0, jsx_runtime_1.jsx)(ux_1.Avatar, { size: 30, did: user === null || user === void 0 ? void 0 : user.did, variant: "circle", shape: "circle", src: user === null || user === void 0 ? void 0 : user.avatar }) })), (0, jsx_runtime_1.jsx)(material_1.Box, { sx: {
+                    padding: '6px 8px',
+                    borderRadius: 1,
+                    //   borderTopLeftRadius: 0,
+                    backgroundColor: 'grey.200',
+                }, children: (0, jsx_runtime_1.jsx)(ClickToCopy_1.default, { locale: locale, unstyled: true, children: (0, jsx_runtime_1.jsx)(material_1.Typography, { sx: Object.assign({ fontWeight: 500, fontSize: 13, maxWidth: 300, color: 'textColor' }, (0, utils_1.getLineClamp)(1)), children: question }) }) })] }));
+}
+exports.default = UserQuestion;

package/lib/cjs/builtin/async/ai-runtime/runtime-components/V0/contexts/V0Runtime.js

@@ -0,0 +1,54 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useV0RuntimeContext = exports.V0RuntimeProvider = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const context = (0, react_1.createContext)(undefined);
+let cancelAutoScrollTimer;
+function V0RuntimeProvider({ children }) {
+    const [currentMessageTaskId, setCurrentMessageTaskId] = (0, react_1.useState)();
+    const [propertiesValueMap, setPropertiesValueMap] = (0, react_1.useState)({});
+    const state = (0, react_1.useMemo)(() => ({
+        setCurrentMessageTaskId: (taskId) => {
+            setCurrentMessageTaskId(taskId);
+            // auto scroll to the task
+            if (taskId) {
+                const scrollIntoView = () => {
+                    const el = document.getElementById(taskId);
+                    if (el) {
+                        el.scrollIntoView({ behavior: 'smooth' });
+                        // is first time to scroll
+                        if (!currentMessageTaskId) {
+                            const observer = new MutationObserver(() => {
+                                if (cancelAutoScrollTimer)
+                                    clearTimeout(cancelAutoScrollTimer);
+                                el === null || el === void 0 ? void 0 : el.scrollIntoView({ behavior: 'smooth' });
+                                cancelAutoScrollTimer = setTimeout(() => {
+                                    observer.disconnect();
+                                    cancelAutoScrollTimer = null;
+                                }, 1000);
+                            });
+                            observer.observe(el.parentElement, { attributes: true, childList: true, subtree: true });
+                        }
+                    }
+                };
+                setTimeout(scrollIntoView, 300);
+            }
+        },
+        currentMessageTaskId,
+        propertiesValueMap,
+        setPropertiesValueMap: (valueMap) => {
+            setPropertiesValueMap(Object.assign(Object.assign({}, propertiesValueMap), valueMap));
+        },
+    }), [setCurrentMessageTaskId, currentMessageTaskId, propertiesValueMap, setPropertiesValueMap]);
+    return (0, jsx_runtime_1.jsx)(context.Provider, { value: state, children: children });
+}
+exports.V0RuntimeProvider = V0RuntimeProvider;
+function useV0RuntimeContext() {
+    const current = (0, react_1.useContext)(context);
+    if (!current) {
+        throw new Error('No such message state. You should use `V0RuntimeProvider` within the `CurrentMessageProvider`');
+    }
+    return current;
+}
+exports.useV0RuntimeContext = useV0RuntimeContext;

package/lib/cjs/builtin/async/ai-runtime/runtime-components/V0/utils.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getLineClamp = void 0;
+const getLineClamp = (count) => {
+    return {
+        display: '-webkit-box',
+        WebkitLineClamp: count,
+        WebkitBoxOrient: 'vertical',
+        overflow: 'hidden',
+        textOverflow: 'ellipsis',
+    };
+};
+exports.getLineClamp = getLineClamp;

package/lib/cjs/builtin/async/ai-runtime/state/session.js

@@ -49,7 +49,14 @@ const createSessionState = ({ aid }) => {
                 state.currentSessionId = undefined;
             });
         },
-        load: () => __awaiter(void 0, void 0, void 0, function* () {
+        reload: () => __awaiter(void 0, void 0, void 0, function* () {
+            const { load, reset } = get();
+            reset();
+            yield load({
+                autoSetCurrentSessionId: false,
+            });
+        }),
+        load: (...args_1) => __awaiter(void 0, [...args_1], void 0, function* ({ autoSetCurrentSessionId = true } = {}) {
             const { loading, loaded } = get();
             if (!loading && !loaded) {
                 set((state) => {
@@ -60,8 +67,10 @@ const createSessionState = ({ aid }) => {
                     set((state) => {
                         var _a;
                         state.sessions = sessions;
-                        state.currentSessionId = (_a = sessions[0]) === null || _a === void 0 ? void 0 : _a.id;
                         state.sessionMap = Object.fromEntries(sessions.map((i) => [i.id, { session: i }]));
+                        if (autoSetCurrentSessionId) {
+                            state.currentSessionId = (_a = sessions[0]) === null || _a === void 0 ? void 0 : _a.id;
+                        }
                     });
                 }
                 catch (error) {
@@ -131,8 +140,8 @@ const createSessionState = ({ aid }) => {
                 state.currentSessionId = sessionId;
             });
         },
-        createSession: () => __awaiter(void 0, void 0, void 0, function* () {
-            const { created, sessions } = yield (0, session_1.createSession)({ aid });
+        createSession: (...args_2) => __awaiter(void 0, [...args_2], void 0, function* ({ name } = {}) {
+            const { created, sessions } = yield (0, session_1.createSession)({ aid, name });
             set((state) => {
                 state.sessions = sessions;
                 state.currentSessionId = created.id;
@@ -146,19 +155,22 @@ const createSessionState = ({ aid }) => {
             });
             return created;
         }),
-        deleteSession: (...args_1) => __awaiter(void 0, [...args_1], void 0, function* (args = {}) {
+        deleteSession: (...args_3) => __awaiter(void 0, [...args_3], void 0, function* (args = {}) {
+            var _a;
             const sessionId = args.sessionId || get().currentSessionId;
+            const autoSetCurrentSessionId = (_a = args.autoSetCurrentSessionId) !== null && _a !== void 0 ? _a : true;
             if (!sessionId)
                 return;
             const { sessions } = yield (0, session_1.deleteSession)({ sessionId });
             set((state) => {
                 var _a;
                 state.sessions = sessions;
-                if (!sessions.some((i) => i.id === state.currentSessionId))
-                    state.currentSessionId = (_a = sessions[0]) === null || _a === void 0 ? void 0 : _a.id;
+                if (!sessions.some((i) => i.id === state.currentSessionId)) {
+                    state.currentSessionId = autoSetCurrentSessionId ? (_a = sessions[0]) === null || _a === void 0 ? void 0 : _a.id : undefined;
+                }
             });
         }),
-        clearSession: (...args_2) => __awaiter(void 0, [...args_2], void 0, function* (args = {}) {
+        clearSession: (...args_4) => __awaiter(void 0, [...args_4], void 0, function* (args = {}) {
             const sessionId = args.sessionId || get().currentSessionId;
             if (!sessionId)
                 return;
@@ -173,9 +185,10 @@ const createSessionState = ({ aid }) => {
                 s.messageLoading = undefined;
             });
         }),
-        loadMoreMessages: (...args_3) => __awaiter(void 0, [...args_3], void 0, function* (args = {}) {
-            var _a, _b;
+        loadMoreMessages: (...args_5) => __awaiter(void 0, [...args_5], void 0, function* (args = {}) {
+            var _b, _c;
             const sessionId = args.sessionId || get().currentSessionId;
+            const limit = args.limit || GET_MESSAGES_LIMIT;
             if (!sessionId)
                 return;
             set((state) => {
@@ -192,9 +205,9 @@ const createSessionState = ({ aid }) => {
             try {
                 const result = yield (0, message_1.getMessages)({
                     sessionId: s.session.id,
-                    before: (_b = (_a = s.messages) === null || _a === void 0 ? void 0 : _a.slice(-1)[0]) === null || _b === void 0 ? void 0 : _b.id,
+                    before: (_c = (_b = s.messages) === null || _b === void 0 ? void 0 : _b.slice(-1)[0]) === null || _c === void 0 ? void 0 : _c.id,
                     orderDirection: GET_MESSAGES_ORDER_DIRECTION,
-                    limit: GET_MESSAGES_LIMIT,
+                    limit,
                 });
                 set((state) => {
                     var _a, _b;
@@ -202,7 +215,7 @@ const createSessionState = ({ aid }) => {
                     if (!s)
                         return;
                     s.messages = ((_b = s.messages) !== null && _b !== void 0 ? _b : []).concat(result.messages.toReversed());
-                    s.noMoreMessage = result.messages.length < GET_MESSAGES_LIMIT;
+                    s.noMoreMessage = result.messages.length < limit;
                 });
             }
             finally {
@@ -215,9 +228,25 @@ const createSessionState = ({ aid }) => {
                 });
             }
         }),
-        execute: (_c) => __awaiter(void 0, void 0, void 0, function* () {
-            var _d, e_1, _e, _f;
-            var { aid, working, parameters, onResponseStart } = _c, args = __rest(_c, ["aid", "working", "parameters", "onResponseStart"]);
+        loadLatestMessagesForAllSessions: () => __awaiter(void 0, void 0, void 0, function* () {
+            const { sessions, sessionMap } = get();
+            // sessions 按顺序分为每 n 个为一组，每次请求一组请求
+            const groupSize = 12;
+            for (let i = 0; i < sessions.length; i += groupSize) {
+                const group = sessions.slice(i, i + groupSize);
+                // eslint-disable-next-line no-await-in-loop
+                yield Promise.all(group.map((_d) => __awaiter(void 0, [_d], void 0, function* ({ id: sessionId }) {
+                    var _e, _f;
+                    // if messages is empty, load latest message
+                    if (!((_f = (_e = sessionMap === null || sessionMap === void 0 ? void 0 : sessionMap[sessionId]) === null || _e === void 0 ? void 0 : _e.messages) === null || _f === void 0 ? void 0 : _f.length)) {
+                        yield get().loadMoreMessages({ sessionId, limit: 1 });
+                    }
+                })));
+            }
+        }),
+        execute: (_g) => __awaiter(void 0, void 0, void 0, function* () {
+            var _h, e_1, _j, _k;
+            var { aid, working, parameters, onResponseStart } = _g, args = __rest(_g, ["aid", "working", "parameters", "onResponseStart"]);
             const sessionId = args.sessionId || get().currentSessionId || (yield get().createSession()).id;
             const identity = (0, aid_1.parseIdentity)(aid, { rejectWhenError: true });
             let message;
@@ -238,10 +267,10 @@ const createSessionState = ({ aid }) => {
                 });
                 let responseStarted = false;
                 try {
-                    for (var _g = true, stream_1 = __asyncValues(stream), stream_1_1; stream_1_1 = yield stream_1.next(), _d = stream_1_1.done, !_d; _g = true) {
-                        _f = stream_1_1.value;
-                        _g = false;
-                        const value = _f;
+                    for (var _l = true, stream_1 = __asyncValues(stream), stream_1_1; stream_1_1 = yield stream_1.next(), _h = stream_1_1.done, !_h; _l = true) {
+                        _k = stream_1_1.value;
+                        _l = false;
+                        const value = _k;
                         if (!responseStarted) {
                             responseStarted = true;
                             onResponseStart === null || onResponseStart === void 0 ? void 0 : onResponseStart();
@@ -308,7 +337,7 @@ const createSessionState = ({ aid }) => {
                 catch (e_1_1) { e_1 = { error: e_1_1 }; }
                 finally {
                     try {
-                        if (!_g && !_d && (_e = stream_1.return)) yield _e.call(stream_1);
+                        if (!_l && !_h && (_j = stream_1.return)) yield _j.call(stream_1);
                     }
                     finally { if (e_1) throw e_1.error; }
                 }
@@ -340,12 +369,12 @@ const createSessionState = ({ aid }) => {
     }))));
 };
 exports.createSessionState = createSessionState;
-function useAutoLoadSessionState() {
+function useAutoLoadSessionState(...args) {
     const { aid } = (0, Runtime_1.useRuntimeContext)();
     const state = (0, react_1.useMemo)(() => (0, exports.createSessionState)({ aid }), [aid]);
     const currentSessionId = state((s) => s.currentSessionId);
     (0, react_1.useEffect)(() => {
-        state.getState().load();
+        state.getState().load(...args);
     }, [state, currentSessionId]);
 }
 exports.useAutoLoadSessionState = useAutoLoadSessionState;

package/lib/cjs/components/CustomComponentRenderer/state.js

@@ -43,7 +43,7 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useComponent = exports.customComponentStates = void 0;
+exports.transpileAndLoadScript = exports.useComponent = exports.customComponentStates = void 0;
 const react_1 = require("react");
 const zustand_1 = require("zustand");
 const immer_1 = require("zustand/middleware/immer");
@@ -178,10 +178,17 @@ function usePreloadComponent({ instanceId, componentId, properties, locale, dev
     return null;
 }
 function useTranspileComponent({ componentId, locale, properties, dev: { defaultLocale, components } = {}, }) {
-    const [{ error, Component }, setComponent] = (0, react_1.useState)({});
+    const [{ error, Component, propertiesFromCode }, setComponent] = (0, react_1.useState)({});
     const component = (0, property_1.mergeComponent)({
         componentId,
-        getComponent: (componentId) => { var _a; return (_a = components === null || components === void 0 ? void 0 : components[componentId]) === null || _a === void 0 ? void 0 : _a.data; },
+        getComponent: (componentId) => {
+            var _a, _b, _c, _d;
+            // setting properties from code if it's not set from components props
+            if (propertiesFromCode && !((_b = (_a = components === null || components === void 0 ? void 0 : components[componentId]) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.properties)) {
+                return Object.assign(Object.assign({}, (_c = components === null || components === void 0 ? void 0 : components[componentId]) === null || _c === void 0 ? void 0 : _c.data), { properties: propertiesFromCode });
+            }
+            return (_d = components === null || components === void 0 ? void 0 : components[componentId]) === null || _d === void 0 ? void 0 : _d.data;
+        },
         locale,
         defaultLocale,
         properties,
@@ -191,7 +198,18 @@ function useTranspileComponent({ componentId, locale, properties, dev: { default
         if (script) {
             transpileAndLoadScript(script)
                 .then((m) => {
-                setComponent({ Component: m.default });
+                let propertiesFromCode;
+                // get properties from code
+                if (typeof (m === null || m === void 0 ? void 0 : m.PROPERTIES_SCHEMA) === 'object' && (m === null || m === void 0 ? void 0 : m.PROPERTIES_SCHEMA.length)) {
+                    propertiesFromCode = {};
+                    m.PROPERTIES_SCHEMA.forEach((data, index) => {
+                        propertiesFromCode[data.id] = {
+                            index,
+                            data,
+                        };
+                    });
+                }
+                setComponent({ Component: m.default, propertiesFromCode });
             })
                 .catch((error) => {
                 setComponent({ error });
@@ -220,3 +238,4 @@ function transpileAndLoadScript(script) {
         return Promise.resolve(`${url}`).then(s => __importStar(require(s)));
     });
 }
+exports.transpileAndLoadScript = transpileAndLoadScript;