@blocklet/pages-kit 0.2.286 → 0.2.288

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

@@ -0,0 +1,111 @@
+"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 });
+exports.EntryListView = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const material_1 = require("@mui/material");
+const omit_1 = __importDefault(require("lodash/omit"));
+const react_1 = require("react");
+const session_1 = require("../../../../session");
+const session_2 = require("../../api/session");
+const assistant_1 = require("../../state/assistant");
+const loading_1 = require("../../state/loading");
+const session_3 = require("../../state/session");
+const MessageSuggestedQuestions_1 = require("../common/MessageSuggestedQuestions");
+const ParameterForm_1 = __importDefault(require("../form/ParameterForm"));
+const MessageItemView_1 = __importDefault(require("../message/MessageItemView"));
+const PoweredBy_1 = __importDefault(require("../PoweredBy"));
+function InitialForm({ page }) {
+    var _a;
+    const { assistantId } = page;
+    const { session: authSession } = (0, session_1.useSessionContext)();
+    const [assistant] = (0, assistant_1.useAssistantState)({ assistantId: page.assistantId });
+    const { parameters } = assistant;
+    const [error, setError] = (0, react_1.useState)();
+    const isChat = parameters === null || parameters === void 0 ? void 0 : parameters.some((i) => i.key === 'question');
+    const opener = (0, react_1.useMemo)(() => {
+        var _a;
+        const { openerMessage } = (_a = assistant.release) !== null && _a !== void 0 ? _a : {};
+        if (openerMessage) {
+            return {
+                taskId: '',
+                sessionId: '',
+                createdAt: new Date().toISOString(),
+                updatedAt: new Date().toISOString(),
+                result: { content: openerMessage },
+            };
+        }
+        return undefined;
+    }, [assistant.release]);
+    const [creating, setCreating] = (0, react_1.useState)(false);
+    const onSubmit = (...args_1) => __awaiter(this, [...args_1], void 0, function* (parameters = {}, entry) {
+        if (!authSession.user) {
+            yield new Promise((resolve) => {
+                authSession.login(() => {
+                    resolve();
+                });
+            });
+        }
+        if (creating)
+            return;
+        setCreating(true);
+        try {
+            yield loading_1.globalLoadingState.getState().run(() => __awaiter(this, void 0, void 0, function* () {
+                const { created: session } = yield (0, session_2.createSession)({
+                    assistantId,
+                    name: parameters.question,
+                    parameters: (0, omit_1.default)(parameters, isChat ? ['question'] : []),
+                    entry,
+                });
+                (0, session_3.createSessionState)({ sessionId: session.id, session }).getState().execute({
+                    assistantId,
+                    parameters,
+                });
+                setError(undefined);
+                page.navigate({ page: 'session', assistantId, sessionId: session.id });
+            }));
+        }
+        catch (error) {
+            setError(error);
+        }
+        finally {
+            setCreating(false);
+        }
+    });
+    if (authSession.loading)
+        return null;
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [opener && ((0, jsx_runtime_1.jsx)(material_1.Box, { my: 2, mx: 2, children: (0, jsx_runtime_1.jsx)(MessageItemView_1.default, { assistantId: assistantId, hideAvatar: true, assistant: assistant, message: opener }) })), ((_a = assistant.entries) === null || _a === void 0 ? void 0 : _a.length) && ((0, jsx_runtime_1.jsx)(EntryListView, { assistant: assistant, onEntryClick: (entry) => onSubmit(entry.parameters, { id: entry.id, title: entry.title }), sx: { px: 2 } })), (0, jsx_runtime_1.jsx)(material_1.Box, { flex: 1 }), (0, jsx_runtime_1.jsxs)(material_1.Box, { className: "ai-runtime-form-container", sx: {
+                    position: 'sticky',
+                    bottom: 0,
+                    background: (theme) => `linear-gradient(180deg, ${(0, material_1.alpha)(theme.palette.background.default, 0.1)}, ${(0, material_1.alpha)(theme.palette.background.default, 1)} 16px)`,
+                }, children: [(0, jsx_runtime_1.jsx)(ParameterForm_1.default, { assistant: assistant, onSubmit: onSubmit }), error && (0, jsx_runtime_1.jsx)(material_1.Alert, { severity: "error", children: error.message }), (0, jsx_runtime_1.jsx)(PoweredBy_1.default, { assistantId: page.assistantId, sx: { my: 1, px: 2 } })] })] }));
+}
+exports.default = InitialForm;
+function EntryListView(_a) {
+    var _b;
+    var { assistant, onEntryClick } = _a, props = __rest(_a, ["assistant", "onEntryClick"]);
+    return ((0, jsx_runtime_1.jsx)(material_1.Stack, Object.assign({ gap: 1, alignItems: "flex-start" }, props, { children: (_b = assistant.entries) === null || _b === void 0 ? void 0 : _b.map((entry) => entry.title && ((0, jsx_runtime_1.jsx)(MessageSuggestedQuestions_1.MessageSuggestedQuestion, { onClick: () => onEntryClick === null || onEntryClick === void 0 ? void 0 : onEntryClick(entry), children: entry.title }, entry.title))) })));
+}
+exports.EntryListView = EntryListView;

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

@@ -0,0 +1,60 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+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 react_wrap_balancer_1 = __importStar(require("react-wrap-balancer"));
+const ux_1 = require("../../../../arcblock/ux");
+function RuntimeChatHeader(_a) {
+    var _b, _c, _d, _e;
+    var { assistant } = _a, props = __rest(_a, ["assistant"]);
+    return ((0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: "ai-chat-header", pt: 10 }, props, { children: (0, jsx_runtime_1.jsxs)(react_wrap_balancer_1.Provider, { children: [(0, jsx_runtime_1.jsx)(material_1.Box, { sx: { display: 'flex', justifyContent: 'center', alignItems: 'center' }, children: (0, jsx_runtime_1.jsx)(material_1.Box, { component: ux_1.Avatar, className: "logo", size: 100, did: (_b = globalThis.blocklet) === null || _b === void 0 ? void 0 : _b.appId, src: (_c = assistant.release) === null || _c === void 0 ? void 0 : _c.logo, sx: { borderRadius: 1 } }) }), (0, jsx_runtime_1.jsx)(material_1.Typography, { component: "h1", sx: {
+                        fontWeight: 'bold',
+                        fontSize: 18,
+                        mt: 1,
+                        lineHeight: '28px',
+                        textAlign: 'center',
+                        color: '#010714',
+                    }, children: (0, jsx_runtime_1.jsxs)(react_wrap_balancer_1.default, { children: ["\u200C\u200C\u200C\u200C\u200C\u200C", ((_d = assistant.release) === null || _d === void 0 ? void 0 : _d.title) || (assistant === null || assistant === void 0 ? void 0 : assistant.name)] }) }), (0, jsx_runtime_1.jsx)(material_1.Typography, { component: "p", sx: {
+                        mt: 2.5,
+                        fontSize: 16,
+                        lineHeight: '28px',
+                        textAlign: 'center',
+                        whiteSpace: 'pre-wrap',
+                        color: '#465566',
+                    }, children: (0, jsx_runtime_1.jsxs)(react_wrap_balancer_1.default, { children: ["\u200C\u200C\u200C\u200C\u200C\u200C\u200C", ((_e = assistant.release) === null || _e === void 0 ? void 0 : _e.description) || (assistant === null || assistant === void 0 ? void 0 : assistant.description)] }) })] }) })));
+}
+exports.default = RuntimeChatHeader;

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

@@ -0,0 +1,52 @@
+"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 MessageListView_1 = __importDefault(require("../message/MessageListView"));
+const PoweredBy_1 = __importDefault(require("../PoweredBy"));
+const ScrollView_1 = require("../ScrollView");
+const InitialForm_1 = require("./InitialForm");
+function RuntimeChatSession({ page }) {
+    var _a, _b, _c, _d, _e, _f, _g, _h;
+    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, px: 2, assistantId: page.assistantId, sessionId: page.sessionId }), (0, jsx_runtime_1.jsx)(material_1.Box, { ml: 6.5, mr: 2.5, mt: -4, px: 2, children: (suggestedQuestions === null || suggestedQuestions === void 0 ? void 0 : suggestedQuestions.length) ? ((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 }));
+                    } })) : !((_e = state.messages) === null || _e === void 0 ? void 0 : _e.length) && ((_f = assistant.entries) === null || _f === void 0 ? void 0 : _f.length) ? ((0, jsx_runtime_1.jsx)(InitialForm_1.EntryListView, { assistant: assistant, onEntryClick: (entry) => onSubmit(Object.assign(Object.assign({}, lastMessage === null || lastMessage === void 0 ? void 0 : lastMessage.parameters), entry.parameters)) })) : null }), (0, jsx_runtime_1.jsx)(material_1.Box, { flex: 1 }), error && ((0, jsx_runtime_1.jsx)(material_1.Alert, { severity: "error", sx: { mb: 1, mx: 2 }, children: error.message })), (0, jsx_runtime_1.jsxs)(material_1.Box, { className: "ai-runtime-form-container", sx: {
+                    pt: 2,
+                    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)} 16px)`,
+                }, children: [(0, jsx_runtime_1.jsx)(ParameterForm_1.default, { sessionId: page.sessionId, defaultValues: lastMessage === null || lastMessage === void 0 ? void 0 : lastMessage.parameters, assistant: assistant, onSubmit: onSubmit, isSubmitting: state.running, submitButtonTitle: (_h = (_g = assistant.release) === null || _g === void 0 ? void 0 : _g.submitButton) === null || _h === void 0 ? void 0 : _h.title }), (0, jsx_runtime_1.jsx)(PoweredBy_1.default, { assistantId: page.assistantId, sx: { my: 0.5, px: 2 } })] })] }));
+}
+exports.default = RuntimeChatSession;

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

@@ -0,0 +1,28 @@
+"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 material_1 = require("@mui/material");
+const assistant_1 = require("../../state/assistant");
+const InitialForm_1 = __importDefault(require("./InitialForm"));
+const RuntimeChatHeader_1 = __importDefault(require("./RuntimeChatHeader"));
+const RuntimeChatSession_1 = __importDefault(require("./RuntimeChatSession"));
+function RuntimeChat(_a) {
+    var { page } = _a, props = __rest(_a, ["page"]);
+    const [assistant] = (0, assistant_1.useAssistantState)({ assistantId: page.assistantId });
+    return ((0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ flexGrow: 1, width: "100%", height: "100%", maxWidth: 750, mx: "auto", justifyContent: page.page === 'session' ? 'space-between' : 'unset' }, props, { children: [(0, jsx_runtime_1.jsx)(RuntimeChatHeader_1.default, { assistant: assistant, sx: { mx: 2 } }), page.page === 'session' ? (0, jsx_runtime_1.jsx)(RuntimeChatSession_1.default, { page: page }) : (0, jsx_runtime_1.jsx)(InitialForm_1.default, { page: page })] })));
+}
+exports.default = RuntimeChat;

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

@@ -0,0 +1,120 @@
+"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 loading_1 = require("../../state/loading");
+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)();
+    const [submitting, setSubmitting] = (0, react_1.useState)(false);
+    (0, react_1.useEffect)(() => {
+        form.reset(defaultForm);
+    }, [defaultForm]);
+    const onSubmit = (parameters) => __awaiter(this, void 0, void 0, function* () {
+        try {
+            setSubmitting(true);
+            let { sessionId } = page;
+            if (!sessionId) {
+                const session = yield loading_1.globalLoadingState.getState().run(() => __awaiter(this, void 0, void 0, function* () {
+                    const { created: session } = yield (0, session_2.createSession)({ assistantId: page.assistantId, parameters });
+                    yield (0, session_3.createSessionState)({ sessionId: session.id }).getState().load();
+                    return session;
+                }));
+                sessionId = session.id;
+                page.navigate({ page: 'session', assistantId: page.assistantId, sessionId: session.id });
+            }
+            const sid = sessionId;
+            yield new Promise((resolve, reject) => {
+                setTimeout(() => {
+                    const session = (0, session_3.createSessionState)({ sessionId: sid }).getState();
+                    session.execute({ assistantId: page.assistantId, parameters }).then(resolve).catch(reject);
+                });
+            });
+        }
+        catch (error) {
+            setError(error);
+            throw error;
+        }
+        finally {
+            setSubmitting(false);
+        }
+    });
+    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: submitting, 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,65 @@
+"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 __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = require("react");
+const session_1 = require("../../api/session");
+const useAsync_1 = __importDefault(require("../../hooks/useAsync"));
+const assistant_1 = require("../../state/assistant");
+const loading_1 = require("../../state/loading");
+const session_2 = require("../../state/session");
+const utils_1 = require("../../utils");
+function CheckSession({ cacheId, page, autoCreateSession, children, }) {
+    const { assistantId, sessionId } = page;
+    (0, assistant_1.useAssistantState)({ assistantId });
+    const result = (0, useAsync_1.default)(() => {
+        if (sessionId && (0, session_2.createSessionState)({ sessionId }).getState().session)
+            return undefined;
+        return loading_1.globalLoadingState.getState().run(() => __awaiter(this, void 0, void 0, function* () {
+            var _a;
+            if (!sessionId) {
+                try {
+                    // get the last session or create a new session if `autoCreateSession` is enabled
+                    const { sessions } = yield (0, session_1.getSessions)((0, utils_1.parseIdentity)(assistantId, { rejectWhenError: true }));
+                    const session = (_a = sessions[0]) !== null && _a !== void 0 ? _a : (autoCreateSession ? (yield (0, session_1.createSession)({ assistantId })).created : undefined);
+                    if (session) {
+                        yield (0, session_2.createSessionState)({ sessionId: session.id, session }).getState().load();
+                        return [{ page: 'session', assistantId, sessionId: session.id }];
+                    }
+                }
+                catch (error) {
+                    console.error('get first session or auto create a new session error', { error });
+                }
+            }
+            else {
+                try {
+                    const state = (0, session_2.createSessionState)({ sessionId });
+                    yield state.getState().load();
+                }
+                catch (error) {
+                    console.error('load session error', { error });
+                    return [{ page: 'assistant', assistantId, sessionId: undefined }, { replace: true }];
+                }
+            }
+            return undefined;
+        }));
+    }, [sessionId, cacheId]);
+    (0, react_1.useEffect)(() => {
+        if (result)
+            page.navigate(...result);
+    }, [result, page.navigate]);
+    if (result)
+        return null;
+    return children;
+}
+exports.default = CheckSession;