@blocklet/pages-kit 0.2.285 → 0.2.287

package/lib/cjs/builtin/async/ai-runtime/components/runtime-chat/RuntimeChatSession.js

@@ -0,0 +1,67 @@
+"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 types_1 = require("@blocklet/ai-runtime/types");
+const material_1 = require("@mui/material");
+const react_1 = require("react");
+const assistant_1 = require("../../state/assistant");
+const session_1 = require("../../state/session");
+const common_1 = require("../common");
+const ParameterForm_1 = __importDefault(require("../form/ParameterForm"));
+const layout_1 = __importDefault(require("../layout"));
+const MessageListView_1 = __importDefault(require("../message/MessageListView"));
+const PoweredBy_1 = __importDefault(require("../PoweredBy"));
+const ScrollView_1 = require("../ScrollView");
+const RuntimeChatHeader_1 = __importDefault(require("./RuntimeChatHeader"));
+function RuntimeChatSession({ page }) {
+    const [assistant] = (0, assistant_1.useAssistantState)({ assistantId: page.assistantId });
+    return ((0, jsx_runtime_1.jsxs)(layout_1.default, { disableBottomPadding: true, containerProps: {
+            sx: {
+                display: 'flex',
+                flexDirection: 'column',
+                justifyContent: 'space-between',
+                height: '100%',
+            },
+        }, children: [(0, jsx_runtime_1.jsx)(RuntimeChatHeader_1.default, { assistant: assistant }), (0, jsx_runtime_1.jsx)(ChatForm, { page: page })] }));
+}
+exports.default = RuntimeChatSession;
+function ChatForm({ page }) {
+    var _a, _b, _c, _d, _e, _f, _g;
+    const [session, state] = (0, session_1.useSessionState)({ sessionId: page.sessionId, required: true });
+    const [assistant] = (0, assistant_1.useAssistantState)({ assistantId: page.assistantId });
+    const lastMessage = (_a = state.messages) === null || _a === void 0 ? void 0 : _a.slice(-1)[0];
+    const suggestedQuestions = (_d = (_c = (_b = lastMessage === null || lastMessage === void 0 ? void 0 : lastMessage.result) === null || _b === void 0 ? void 0 : _b.objects) === null || _c === void 0 ? void 0 : _c[0]) === null || _d === void 0 ? void 0 : _d.data[types_1.RuntimeOutputVariable.suggestedQuestions];
+    const scrollToBottom = (0, ScrollView_1.useScrollToBottomModule)().useScrollToBottom();
+    const [error, setError] = (0, react_1.useState)();
+    const onSubmit = (parameters) => {
+        scrollToBottom({ behavior: 'smooth' });
+        if (!session)
+            return;
+        state
+            .execute({
+            assistantId: page.assistantId,
+            parameters: Object.assign({}, parameters),
+        })
+            .then(() => {
+            setError(undefined);
+        })
+            .catch((error) => {
+            setError(error);
+        });
+    };
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(MessageListView_1.default, { className: "ai-chat-message-list", my: 5, assistantId: page.assistantId, sessionId: page.sessionId }), !!(suggestedQuestions === null || suggestedQuestions === void 0 ? void 0 : suggestedQuestions.length) && ((0, jsx_runtime_1.jsx)(material_1.Box, { ml: 6.5, mr: 2.5, mt: -4, children: (0, jsx_runtime_1.jsx)(common_1.MessageSuggestedQuestions, { dataSource: suggestedQuestions, onClick: (item) => {
+                        onSubmit(Object.assign(Object.assign({}, lastMessage === null || lastMessage === void 0 ? void 0 : lastMessage.parameters), { question: item.question }));
+                    } }) })), (0, jsx_runtime_1.jsx)(material_1.Box, { flex: 1 }), (0, jsx_runtime_1.jsxs)(material_1.Box, { className: "ai-chat-question-container", sx: {
+                    pt: 1,
+                    position: 'sticky',
+                    bottom: 0,
+                    // 从上透明到白色 0.72 的径向渐变
+                    background: (theme) => `linear-gradient(180deg, ${(0, material_1.alpha)(theme.palette.background.default, 0.1)}, ${(0, material_1.alpha)(theme.palette.background.default, 1)} 5%)`,
+                    '.ai-chat-question-bar > .MuiFormControl-root > .MuiInputBase-root': {
+                        backdropFilter: 'blur(60px)',
+                    },
+                }, children: [error && ((0, jsx_runtime_1.jsx)(material_1.Alert, { severity: "error", sx: { mb: 1 }, children: error.message })), (0, jsx_runtime_1.jsx)(ParameterForm_1.default, { sessionId: page.sessionId, defaultValues: (_e = lastMessage === null || lastMessage === void 0 ? void 0 : lastMessage.parameters) !== null && _e !== void 0 ? _e : session.parameters, assistant: assistant, onSubmit: onSubmit, isSubmitting: state.running, submitButtonTitle: (_g = (_f = assistant.release) === null || _f === void 0 ? void 0 : _f.submitButton) === null || _g === void 0 ? void 0 : _g.title }), (0, jsx_runtime_1.jsx)(PoweredBy_1.default, { assistantId: page.assistantId, sx: { my: 0.5 } })] })] }));
+}

package/lib/cjs/builtin/async/ai-runtime/components/runtime-chat/index.js

@@ -0,0 +1,15 @@
+"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 RuntimeChatHome_1 = __importDefault(require("./RuntimeChatHome"));
+const RuntimeChatSession_1 = __importDefault(require("./RuntimeChatSession"));
+function RuntimeChat({ page }) {
+    if (page.page === 'session') {
+        return (0, jsx_runtime_1.jsx)(RuntimeChatSession_1.default, { page: page });
+    }
+    return (0, jsx_runtime_1.jsx)(RuntimeChatHome_1.default, { page: page });
+}
+exports.default = RuntimeChat;

package/lib/cjs/builtin/async/ai-runtime/components/runtime-form/RuntimeFormForms.js

@@ -0,0 +1,103 @@
+"use strict";
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+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 });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const material_1 = require("@mui/material");
+const react_1 = require("react");
+const react_hook_form_1 = require("react-hook-form");
+const locale_1 = require("../../../../locale");
+const material_2 = require("../../../../mui/material");
+const session_1 = require("../../../../session");
+const session_2 = require("../../api/session");
+const assistant_1 = require("../../state/assistant");
+const session_3 = require("../../state/session");
+const ParameterFormFields_1 = __importDefault(require("../form/ParameterFormFields"));
+const RuntimeFormSubmit_1 = __importDefault(require("./RuntimeFormSubmit"));
+function RuntimeFormForms(_a) {
+    var _b, _c, _d;
+    var { page } = _a, props = __rest(_a, ["page"]);
+    const { t } = (0, locale_1.useLocaleContext)();
+    const [agent] = (0, assistant_1.useAssistantState)({ assistantId: page.assistantId });
+    const lastParameters = (0, react_1.useMemo)(() => {
+        var _a;
+        if (page.sessionId) {
+            const { session, messages = [] } = (0, session_3.createSessionState)({ sessionId: page.sessionId }).getState();
+            const lastMessage = messages[messages.length - 1];
+            return (_a = lastMessage === null || lastMessage === void 0 ? void 0 : lastMessage.parameters) !== null && _a !== void 0 ? _a : session === null || session === void 0 ? void 0 : session.parameters;
+        }
+        return undefined;
+    }, [page.sessionId]);
+    const defaultForm = (0, react_1.useMemo)(() => {
+        var _a, _b;
+        return Object.fromEntries((_b = (_a = agent.parameters) === null || _a === void 0 ? void 0 : _a.map((parameter) => [
+            parameter.key,
+            (lastParameters === null || lastParameters === void 0 ? void 0 : lastParameters[parameter.key]) || parameter.defaultValue,
+        ])) !== null && _b !== void 0 ? _b : []);
+    }, [agent.parameters, lastParameters]);
+    const form = (0, react_hook_form_1.useForm)({ defaultValues: defaultForm });
+    const [error, setError] = (0, react_1.useState)();
+    const { session } = (0, session_1.useSessionContext)();
+    (0, react_1.useEffect)(() => {
+        form.reset(defaultForm);
+    }, [defaultForm]);
+    const onSubmit = (parameters) => __awaiter(this, void 0, void 0, function* () {
+        try {
+            const { created: session } = yield (0, session_2.createSession)({ assistantId: page.assistantId, parameters });
+            (0, session_3.createSessionState)({ sessionId: session.id, session });
+            page.navigate({ page: 'session', assistantId: page.assistantId, sessionId: session.id });
+            yield (0, session_3.createSessionState)({ sessionId: session.id })
+                .getState()
+                .execute({ assistantId: page.assistantId, parameters });
+        }
+        catch (error) {
+            setError(error);
+            throw error;
+        }
+    });
+    const handleSubmit = (e) => __awaiter(this, void 0, void 0, function* () {
+        e.preventDefault();
+        if (!session.user) {
+            yield new Promise((resolve) => {
+                session.login(() => resolve());
+            });
+        }
+        return form.handleSubmit(onSubmit)(e);
+    });
+    const openerMessage = (_b = agent.release) === null || _b === void 0 ? void 0 : _b.openerMessage;
+    return ((0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ gap: 10, component: "form" }, props, { onSubmit: handleSubmit, children: [(0, jsx_runtime_1.jsxs)(material_1.Stack, { gap: 2, children: [(0, jsx_runtime_1.jsx)(material_1.Stack, { sx: { fontSize: 32, py: 2.5, mb: -2 }, children: "\uD83D\uDC69\uD83C\uDFFB\u200D\uD83D\uDCBB" }), openerMessage && (0, jsx_runtime_1.jsx)(material_1.Box, { sx: { color: 'text.secondary' }, children: openerMessage }), (0, jsx_runtime_1.jsx)(ParameterFormFields_1.default, { parameters: agent.parameters, form: form })] }), (0, jsx_runtime_1.jsx)(react_1.Suspense, { children: (0, jsx_runtime_1.jsxs)(material_1.Stack, { sx: {
+                        gap: 1,
+                        position: 'sticky',
+                        bottom: 0,
+                        pb: 1,
+                        pt: 1,
+                        // 从上透明到白色 0.72 的径向渐变
+                        background: (theme) => `linear-gradient(180deg, ${(0, material_2.alpha)(theme.palette.background.default, 0.1)}, ${(0, material_2.alpha)(theme.palette.background.default, 1)} 5%)`,
+                    }, children: [error && (0, jsx_runtime_1.jsx)(material_1.Alert, { severity: "error", children: error.message }), (0, jsx_runtime_1.jsx)(RuntimeFormSubmit_1.default, { page: page, type: "submit", variant: "contained", fullWidth: true, loading: form.formState.isSubmitting, sx: {
+                                borderRadius: 100,
+                                height: 44,
+                                background: 'linear-gradient(90deg, rgb(69, 228, 250) 0%, rgb(138, 69, 250) 52.08%, rgb(250, 69, 188) 100%)',
+                            }, children: ((_d = (_c = agent.release) === null || _c === void 0 ? void 0 : _c.submitButton) === null || _d === void 0 ? void 0 : _d.title) || t('submit') })] }) })] })));
+}
+exports.default = RuntimeFormForms;

package/lib/cjs/builtin/async/ai-runtime/components/runtime-form/RuntimeFormHeader.js

@@ -0,0 +1,22 @@
+"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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const material_1 = require("@mui/material");
+const ux_1 = require("../../../../arcblock/ux");
+function RuntimeFormHeader(_a) {
+    var _b, _c, _d;
+    var { agent } = _a, props = __rest(_a, ["agent"]);
+    return ((0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ direction: "row", justifyContent: "space-between", alignItems: "center", gap: 2, bgcolor: "rgb(246, 242, 255)" }, props, { children: [(0, jsx_runtime_1.jsxs)(material_1.Stack, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { component: "h5", sx: { fontSize: 32, fontWeight: 700 }, children: ((_b = agent.release) === null || _b === void 0 ? void 0 : _b.title) || agent.name }), (0, jsx_runtime_1.jsx)(material_1.Typography, { sx: { fontSize: 16, color: 'rgb(147, 151, 161)' }, children: ((_c = agent.release) === null || _c === void 0 ? void 0 : _c.description) || agent.description })] }), (0, jsx_runtime_1.jsx)(material_1.Stack, { children: (0, jsx_runtime_1.jsx)(material_1.Box, { component: ux_1.Avatar, size: 88, src: (_d = agent.release) === null || _d === void 0 ? void 0 : _d.logo, did: blocklet === null || blocklet === void 0 ? void 0 : blocklet.appId, borderRadius: 1 }) })] })));
+}
+exports.default = RuntimeFormHeader;

package/lib/cjs/builtin/async/ai-runtime/components/runtime-form/RuntimeFormResult.js

@@ -0,0 +1,72 @@
+"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 });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("@iconify/react");
+const material_1 = require("@mui/material");
+const react_2 = require("react");
+const react_share_1 = require("react-share");
+const ufo_1 = require("ufo");
+const locale_1 = require("../../../../locale");
+const lottie_error_json_url_1 = __importDefault(require("../../assets/lottie/lottie-error.json?url"));
+const lottie_loading_json_url_1 = __importDefault(require("../../assets/lottie/lottie-loading.json?url"));
+const lottie_success_json_url_1 = __importDefault(require("../../assets/lottie/lottie-success.json?url"));
+const lottie_welcome_json_url_1 = __importDefault(require("../../assets/lottie/lottie-welcome.json?url"));
+const session_1 = require("../../state/session");
+const ActionButton_1 = require("../ActionButton");
+const common_1 = require("../common");
+const lottie_1 = __importDefault(require("../lottie"));
+const MarkdownRenderer_1 = __importDefault(require("../MarkdownRenderer"));
+function RuntimeFormResult(_a) {
+    var { page } = _a, props = __rest(_a, ["page"]);
+    return ((0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({}, props, { children: [(0, jsx_runtime_1.jsx)(material_1.Stack, { sx: {
+                    px: { xs: 2, sm: 3, md: 4 },
+                    py: 2.5,
+                    bgcolor: 'background.default',
+                    position: { xs: 'unset', md: 'sticky' },
+                    top: 0,
+                    zIndex: 2,
+                    fontSize: 32,
+                }, children: "\uD83E\uDD16" }), (0, jsx_runtime_1.jsx)(material_1.Box, { sx: { px: { xs: 2, sm: 3, md: 4 } }, children: (0, jsx_runtime_1.jsx)(react_2.Suspense, { children: page.sessionId ? ((0, jsx_runtime_1.jsx)(ResultView, { sessionId: page.sessionId })) : ((0, jsx_runtime_1.jsx)(material_1.Box, { width: 300, height: 300, m: "auto", mt: "100px", children: (0, jsx_runtime_1.jsx)(lottie_1.default, { src: lottie_welcome_json_url_1.default }) })) }) })] })));
+}
+exports.default = RuntimeFormResult;
+function ResultView({ sessionId }) {
+    var _a, _b, _c, _d;
+    const { t } = (0, locale_1.useLocaleContext)();
+    const [, _e] = (0, session_1.useSessionState)({ sessionId }), { messages = [] } = _e, state = __rest(_e, ["messages"]);
+    const message = messages[messages.length - 1];
+    const textContent = (_a = message === null || message === void 0 ? void 0 : message.result) === null || _a === void 0 ? void 0 : _a.content;
+    const error = state.error || (message === null || message === void 0 ? void 0 : message.error);
+    if (error) {
+        return ((0, jsx_runtime_1.jsxs)(material_1.Box, { width: 240, height: 240, m: "auto", mt: "100px", children: [(0, jsx_runtime_1.jsx)(lottie_1.default, { src: lottie_error_json_url_1.default }), (0, jsx_runtime_1.jsx)(material_1.Box, { textAlign: "center", color: "#25292F", children: error.message })] }));
+    }
+    if ((message === null || message === void 0 ? void 0 : message.loading) && !textContent) {
+        return ((0, jsx_runtime_1.jsx)(material_1.Box, { width: 240, height: 240, m: "auto", mt: "100px", children: (0, jsx_runtime_1.jsx)(lottie_1.default, { src: lottie_loading_json_url_1.default }) }));
+    }
+    if (!message) {
+        return ((0, jsx_runtime_1.jsx)(material_1.Box, { width: 300, height: 300, m: "auto", mt: "100px", children: (0, jsx_runtime_1.jsx)(lottie_1.default, { src: lottie_welcome_json_url_1.default }) }));
+    }
+    return ((0, jsx_runtime_1.jsxs)(material_1.Stack, { gap: 2, children: [textContent && ((0, jsx_runtime_1.jsxs)(material_1.Box, { sx: {
+                    border: 1,
+                    borderColor: 'grey.200',
+                    borderRadius: 1,
+                    bgcolor: 'grey.100',
+                }, children: [(0, jsx_runtime_1.jsx)(material_1.Box, { sx: { p: 2 }, children: (0, jsx_runtime_1.jsx)(MarkdownRenderer_1.default, { className: (message === null || message === void 0 ? void 0 : message.loading) ? 'writing' : '', children: (_b = message === null || message === void 0 ? void 0 : message.result) === null || _b === void 0 ? void 0 : _b.content }) }), !(message === null || message === void 0 ? void 0 : message.loading) && textContent && ((0, jsx_runtime_1.jsxs)(material_1.Stack, { direction: "row", alignItems: "center", justifyContent: "flex-end", px: 2, pb: 1, gap: 1, children: [(0, jsx_runtime_1.jsx)(material_1.Box, { children: (0, jsx_runtime_1.jsx)(ActionButton_1.ActionButton, { autoReset: true, size: "small", variant: "text", 
+                                    // @ts-ignore
+                                    color: "black", tip: t('copyToClipboard'), tipSucceed: t('copied'), title: (0, jsx_runtime_1.jsx)(react_1.Icon, { icon: "tabler:copy", fontSize: 18 }), titleSucceed: (0, jsx_runtime_1.jsx)(react_1.Icon, { icon: "tabler:copy-check-filled", fontSize: 18 }), sx: { p: 0.5, minWidth: 0, minHeight: 0, color: 'text.secondary' }, onClick: () => {
+                                        window.navigator.clipboard.writeText(textContent);
+                                    } }) }), (0, jsx_runtime_1.jsx)(material_1.Box, { children: (0, jsx_runtime_1.jsx)(material_1.Tooltip, { title: t('socialShare.shareToX'), placement: "top", disableInteractive: true, children: (0, jsx_runtime_1.jsx)(material_1.Button, { sx: { p: 0.5, minWidth: 0, minHeight: 0 }, target: "_blank", href: (0, ufo_1.withQuery)('https://twitter.com/intent/tweet', { text: textContent }), children: (0, jsx_runtime_1.jsx)(react_share_1.XIcon, { size: 18, borderRadius: 16 }) }) }) })] }))] })), (_d = (_c = message.result) === null || _c === void 0 ? void 0 : _c.objects) === null || _d === void 0 ? void 0 : _d.map((object) => (0, jsx_runtime_1.jsx)(common_1.MessageMetadataRenderer, { object: object.data }, object.taskId)), (0, jsx_runtime_1.jsx)(material_1.Box, { display: "flex", justifyContent: "flex-end", mb: "60px", mt: "40px", children: (0, jsx_runtime_1.jsx)(material_1.Box, { width: 120, height: 120, children: (0, jsx_runtime_1.jsx)(lottie_1.default, { src: lottie_success_json_url_1.default }) }) })] }));
+}

package/lib/cjs/builtin/async/ai-runtime/components/runtime-form/RuntimeFormSubmit.js

@@ -0,0 +1,31 @@
+"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 });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const subscribe_1 = require("../../hooks/subscribe");
+const LoadingButton_1 = __importDefault(require("../LoadingButton"));
+const PoweredBy_1 = __importDefault(require("../PoweredBy"));
+function RuntimeFormSubmit(_a) {
+    var { page } = _a, props = __rest(_a, ["page"]);
+    const { subscribeLink } = (0, subscribe_1.useSubscribeLink)({ assistantId: page.assistantId });
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(LoadingButton_1.default, Object.assign({}, props, { onClick: (e) => {
+                    if (subscribeLink) {
+                        e.preventDefault();
+                        window.location.href = subscribeLink;
+                    }
+                } })), (0, jsx_runtime_1.jsx)(PoweredBy_1.default, { assistantId: page.assistantId })] }));
+}
+exports.default = RuntimeFormSubmit;

package/lib/cjs/builtin/async/ai-runtime/components/runtime-form/index.js

@@ -0,0 +1,22 @@
+"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 assistant_1 = require("../../state/assistant");
+const RuntimeFormForms_1 = __importDefault(require("./RuntimeFormForms"));
+const RuntimeFormHeader_1 = __importDefault(require("./RuntimeFormHeader"));
+const RuntimeFormResult_1 = __importDefault(require("./RuntimeFormResult"));
+function RuntimeForm({ page }) {
+    const [agent] = (0, assistant_1.useAssistantState)({ assistantId: page.assistantId });
+    return ((0, jsx_runtime_1.jsxs)(material_1.Stack, { sx: { flexGrow: { xs: 'unset', md: 1 } }, children: [(0, jsx_runtime_1.jsx)(RuntimeFormHeader_1.default, { agent: agent, sx: {
+                    position: 'sticky',
+                    top: 64,
+                    zIndex: 10,
+                    px: { xs: 2, sm: 3, md: 8 },
+                    py: { xs: 2, sm: 3, md: 5 },
+                } }), (0, jsx_runtime_1.jsxs)(material_1.Stack, { sx: { flexGrow: 1, flexDirection: { xs: 'column', md: 'row' } }, children: [(0, jsx_runtime_1.jsx)(material_1.Stack, { sx: { flex: 1, px: { xs: 2, sm: 3, md: 4 }, ml: { xs: 0, md: 4 } }, children: (0, jsx_runtime_1.jsx)(RuntimeFormForms_1.default, { page: page, sx: { position: 'sticky', top: 232 } }) }), (0, jsx_runtime_1.jsx)(material_1.Divider, { orientation: "vertical", sx: { borderColor: 'grey.200', my: { xs: 2, sm: 3, md: 0 } } }), (0, jsx_runtime_1.jsx)(material_1.Box, { sx: { flex: 2 }, children: (0, jsx_runtime_1.jsx)(RuntimeFormResult_1.default, { page: page }) })] })] }));
+}
+exports.default = RuntimeForm;

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

@@ -0,0 +1,62 @@
+"use strict";
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = require("react");
+const session_1 = require("../../../../session");
+const session_2 = require("../../api/session");
+const assistant_1 = require("../../state/assistant");
+const session_3 = require("../../state/session");
+const utils_1 = require("../../utils");
+const GlobalLoading_1 = require("../GlobalLoading");
+function CheckSession({ assistantId, sessionId, autoCreateSession, children, navigate, }) {
+    (0, assistant_1.useAssistantState)({ assistantId });
+    const { session: authSession } = (0, session_1.useSessionContext)();
+    const [done, setDone] = (0, react_1.useState)(false);
+    const [error, setError] = (0, react_1.useState)();
+    (0, react_1.useEffect)(() => {
+        if (!authSession.user)
+            return;
+        GlobalLoading_1.globalLoadingState.getState().run(() => __awaiter(this, void 0, void 0, function* () {
+            var _a;
+            try {
+                if (!sessionId) {
+                    if (authSession.user) {
+                        const { sessions } = yield (0, session_2.getSessions)((0, utils_1.parseIdentity)(assistantId, { rejectWhenError: true }));
+                        const session = (_a = sessions[0]) !== null && _a !== void 0 ? _a : (autoCreateSession ? (yield (0, session_2.createSession)({ assistantId })).created : undefined);
+                        if (session) {
+                            yield (0, session_3.createSessionState)({ sessionId: session.id, session }).getState().load();
+                            navigate === null || navigate === void 0 ? void 0 : navigate({ page: 'session', assistantId, sessionId: session.id });
+                        }
+                    }
+                }
+                else {
+                    const state = (0, session_3.createSessionState)({ sessionId });
+                    yield state.getState().load();
+                }
+                setDone(true);
+            }
+            catch (error) {
+                if (sessionId) {
+                    navigate === null || navigate === void 0 ? void 0 : navigate({ page: 'assistant', assistantId, sessionId: undefined }, { replace: true });
+                }
+                else {
+                    setError(error);
+                }
+            }
+        }));
+    }, [assistantId, sessionId, authSession.user]);
+    if (error)
+        throw error;
+    if (authSession.loading)
+        return null;
+    return done && children;
+}
+exports.default = CheckSession;

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

@@ -0,0 +1,88 @@
+"use strict";
+// import { Box, CircularProgress, Stack, Typography } from '@mui/material';
+// import { useEffect } from 'react';
+// import { RelativeTime } from 'src/builtin/arcblock/ux';
+// import { useLocaleContext } from 'src/builtin/locale';
+// import { Session } from '../../api/session';
+// import { useNavigateTo } from '../../hooks/navigate';
+// import { createState } from '../../state';
+// import Layout from '../layout';
+// export default function SessionListView({ releaseId }: { releaseId: string }) {
+//   const { t } = useLocaleContext();
+//   const state = createState({ releaseId })();
+//   useEffect(() => {
+//     if (!state.sessions?.length) {
+//       state.getAssistant();
+//     } else {
+//       state.getSessions();
+//     }
+//   }, []);
+//   return (
+//     <Layout>
+//       <Typography
+//         component="h1"
+//         textAlign="center"
+//         sx={{
+//           fontWeight: 700,
+//           fontSize: 32,
+//           lineHeight: '44px',
+//           mt: 5,
+//           mb: 2.5,
+//         }}>
+//         {t('history')}
+//       </Typography>
+//       {!state.sessions?.length && (
+//         <Stack alignItems="center" gap={0.5} mt="10vh" mx={3}>
+//           {state.loading ? (
+//             <CircularProgress size={24} />
+//           ) : (
+//             <>
+//               <Typography fontSize={18}>💬</Typography>
+//               <Typography fontSize={12} sx={{ color: 'text.secondary' }}>
+//                 {t('noData', { data: t('history') })}
+//               </Typography>
+//             </>
+//           )}
+//         </Stack>
+//       )}
+//       <Stack gap={2.5}>
+//         {state.sessions?.map((session) => <SessionItemView key={session.id} session={session} />)}
+//       </Stack>
+//     </Layout>
+//   );
+// }
+// function SessionItemView({ session }: { session: Session }) {
+//   const { locale } = useLocaleContext();
+//   const to = useNavigateTo();
+//   return (
+//     <Stack
+//       component={RouterLink}
+//       to={to({ page: 'session', sessionId: session.id })}
+//       gap={1.5}
+//       sx={{
+//         bgcolor: 'background.paper',
+//         p: 2.5,
+//         borderRadius: 1,
+//         boxShadow: 1,
+//         cursor: 'pointer',
+//         ':hover': {
+//           boxShadow: 2,
+//         },
+//       }}>
+//       <Box
+//         sx={{
+//           display: '-webkit-box',
+//           WebkitBoxOrient: 'vertical',
+//           WebkitLineClamp: 3,
+//           overflow: 'hidden',
+//           fontSize: 18,
+//           lineHeight: '32px',
+//         }}>
+//         {session.name || session.entry?.title}
+//       </Box>
+//       <Typography color="text.secondary">
+//         <RelativeTime locale={locale} value={session.updatedAt} relativeRange={600e3} />
+//       </Typography>
+//     </Stack>
+//   );
+// }

package/lib/cjs/builtin/async/ai-runtime/constants.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PAYMENT_KIT_DID = exports.AI_STUDIO_DID = void 0;
+exports.AI_STUDIO_DID = 'z8iZpog7mcgcgBZzTiXJCWESvmnRrQmnd3XBB';
+exports.PAYMENT_KIT_DID = 'z2qaCNvKMv5GjouKdcDWexv6WqtHbpNPQDnAk';

package/lib/cjs/builtin/async/ai-runtime/hooks/header.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 });
+exports.useSetHeader = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const material_1 = require("@mui/material");
+const react_1 = require("react");
+const header_1 = require("../../../page/header");
+const SocialShare_1 = __importDefault(require("../components/SocialShare"));
+function useSetHeader({ assistant }) {
+    // set logo
+    (0, react_1.useEffect)(() => {
+        const { release } = assistant;
+        header_1.useHeaderState.setState((state) => {
+            state.logo = (release === null || release === void 0 ? void 0 : release.logo) && (0, jsx_runtime_1.jsx)(material_1.Box, { component: "img", src: release.logo, sx: { borderRadius: 1 } });
+            state.brand = (release === null || release === void 0 ? void 0 : release.title) || assistant.name;
+            const shareContent = `${(release === null || release === void 0 ? void 0 : release.title) || assistant.name}
+
+${release === null || release === void 0 ? void 0 : release.description}
+`;
+            state.addons = (...exists) => [(0, jsx_runtime_1.jsx)(SocialShare_1.default, { content: shareContent }), ...exists];
+        });
+        return () => header_1.useHeaderState.setState((state) => {
+            state.logo = undefined;
+            state.brand = undefined;
+            state.addons = (...exists) => [...exists];
+        });
+    }, []);
+}
+exports.useSetHeader = useSetHeader;

package/lib/cjs/builtin/async/ai-runtime/hooks/navigate.js

@@ -0,0 +1,37 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useCurrentPage = exports.useNavigateWithQuery = exports.useNavigateTo = void 0;
+const react_1 = require("react");
+const react_router_dom_1 = require("react-router-dom");
+const ufo_1 = require("ufo");
+function useNavigateTo() {
+    const location = (0, react_router_dom_1.useLocation)();
+    return (0, react_1.useCallback)((query) => (0, ufo_1.withQuery)(`${location.pathname}${location.search}`, query), [location]);
+}
+exports.useNavigateTo = useNavigateTo;
+function useNavigateWithQuery() {
+    const to = useNavigateTo();
+    const navigate = (0, react_router_dom_1.useNavigate)();
+    return (0, react_1.useCallback)((query, options) => {
+        navigate(to(Object.assign(Object.assign({}, query), { page: query.page === 'assistant' ? undefined : query.page })), options);
+    }, [navigate, to]);
+}
+exports.useNavigateWithQuery = useNavigateWithQuery;
+const PAGES = ['assistant', 'session'];
+function isCurrentPage(page) {
+    return PAGES.includes(page);
+}
+function useCurrentPage(page) {
+    const { search } = (0, react_router_dom_1.useLocation)();
+    const { page: pageParam, assistantId, sessionId, } = (0, react_1.useMemo)(() => (0, ufo_1.getQuery)(search), [search]);
+    const navigate = useNavigateWithQuery();
+    const currentPage = isCurrentPage(pageParam) ? pageParam : 'assistant';
+    if (page && page !== currentPage)
+        throw new Error('Invalid page state');
+    if (currentPage === 'assistant' && assistantId)
+        return { page: currentPage, assistantId, navigate };
+    if (currentPage === 'session' && assistantId && sessionId)
+        return { page: currentPage, assistantId, sessionId, navigate };
+    throw new Error('Not Found: missing required query');
+}
+exports.useCurrentPage = useCurrentPage;

package/lib/cjs/builtin/async/ai-runtime/hooks/subscribe.js

@@ -0,0 +1,35 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useSubscribeLink = void 0;
+const ufo_1 = require("ufo");
+const session_1 = require("../../../session");
+const utils_1 = require("../../../utils");
+const constants_1 = require("../constants");
+const assistant_1 = require("../state/assistant");
+const subscription_1 = require("../state/subscription");
+function useSubscribeLink({ assistantId }) {
+    var _a, _b, _c;
+    const [, state] = (0, subscription_1.useSubscriptionState)({ aid: assistantId });
+    const [assistant] = (0, assistant_1.useAssistantState)({ assistantId });
+    const { session } = (0, session_1.useSessionContext)();
+    const requireSubscribe = ((_b = (_a = assistant.release) === null || _a === void 0 ? void 0 : _a.payment) === null || _b === void 0 ? void 0 : _b.enable) && !state.subscription;
+    const subscribeLink = requireSubscribe && session.user && ((_c = state.release) === null || _c === void 0 ? void 0 : _c.paymentLinkId)
+        ? getSubscribeLink({
+            aid: assistantId,
+            userId: session.user.did,
+            paymentLinkId: state.release.paymentLinkId,
+        })
+        : undefined;
+    return {
+        requireSubscribe,
+        subscribeLink,
+    };
+}
+exports.useSubscribeLink = useSubscribeLink;
+function getSubscribeLink({ aid, userId, paymentLinkId }) {
+    return (0, ufo_1.withQuery)((0, ufo_1.joinURL)('/', (0, utils_1.getComponentMountPoint)(constants_1.PAYMENT_KIT_DID), '/checkout/pay', paymentLinkId), {
+        'metadata.aid': aid,
+        'metadata.userId': userId,
+        redirect: window.location.href,
+    });
+}