@blocklet/pages-kit 0.2.286 → 0.2.288

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

@@ -0,0 +1,114 @@
+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;
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Alert, Box, Stack } from '@mui/material';
+import { Suspense, useEffect, useMemo, useState } from 'react';
+import { useForm } from 'react-hook-form';
+import { useLocaleContext } from '../../../../locale';
+import { alpha } from '../../../../mui/material';
+import { useSessionContext } from '../../../../session';
+import { createSession } from '../../api/session';
+import { useAssistantState } from '../../state/assistant';
+import { globalLoadingState } from '../../state/loading';
+import { createSessionState } from '../../state/session';
+import ParameterFormFields from '../form/ParameterFormFields';
+import RuntimeFormSubmit from './RuntimeFormSubmit';
+export default function RuntimeFormForms(_a) {
+    var _b, _c, _d;
+    var { page } = _a, props = __rest(_a, ["page"]);
+    const { t } = useLocaleContext();
+    const [agent] = useAssistantState({ assistantId: page.assistantId });
+    const lastParameters = useMemo(() => {
+        var _a;
+        if (page.sessionId) {
+            const { session, messages = [] } = 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 = 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 = useForm({ defaultValues: defaultForm });
+    const [error, setError] = useState();
+    const { session } = useSessionContext();
+    const [submitting, setSubmitting] = useState(false);
+    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 globalLoadingState.getState().run(() => __awaiter(this, void 0, void 0, function* () {
+                    const { created: session } = yield createSession({ assistantId: page.assistantId, parameters });
+                    yield 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 = 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 (_jsxs(Stack, Object.assign({ gap: 10, component: "form" }, props, { onSubmit: handleSubmit, children: [_jsxs(Stack, { gap: 2, children: [_jsx(Stack, { sx: { fontSize: 32, py: 2.5, mb: -2 }, children: "\uD83D\uDC69\uD83C\uDFFB\u200D\uD83D\uDCBB" }), openerMessage && _jsx(Box, { sx: { color: 'text.secondary' }, children: openerMessage }), _jsx(ParameterFormFields, { parameters: agent.parameters, form: form })] }), _jsx(Suspense, { children: _jsxs(Stack, { sx: {
+                        gap: 1,
+                        position: 'sticky',
+                        bottom: 0,
+                        pb: 1,
+                        pt: 1,
+                        // 从上透明到白色 0.72 的径向渐变
+                        background: (theme) => `linear-gradient(180deg, ${alpha(theme.palette.background.default, 0.1)}, ${alpha(theme.palette.background.default, 1)} 5%)`,
+                    }, children: [error && _jsx(Alert, { severity: "error", children: error.message }), _jsx(RuntimeFormSubmit, { 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') })] }) })] })));
+}

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

@@ -0,0 +1,19 @@
+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;
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Stack, Typography } from '@mui/material';
+import { Avatar } from '../../../../arcblock/ux';
+export default function RuntimeFormHeader(_a) {
+    var _b, _c, _d;
+    var { agent } = _a, props = __rest(_a, ["agent"]);
+    return (_jsxs(Stack, Object.assign({ direction: "row", justifyContent: "space-between", alignItems: "center", gap: 2, bgcolor: "rgb(246, 242, 255)" }, props, { children: [_jsxs(Stack, { children: [_jsx(Typography, { component: "h5", sx: { fontSize: 32, fontWeight: 700 }, children: ((_b = agent.release) === null || _b === void 0 ? void 0 : _b.title) || agent.name }), _jsx(Typography, { sx: { fontSize: 16, color: 'rgb(147, 151, 161)' }, children: ((_c = agent.release) === null || _c === void 0 ? void 0 : _c.description) || agent.description })] }), _jsx(Stack, { children: _jsx(Box, { component: 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 }) })] })));
+}

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

@@ -0,0 +1,66 @@
+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;
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Icon } from '@iconify/react';
+import { Box, Button, Stack, Tooltip } from '@mui/material';
+import { Suspense } from 'react';
+import { XIcon } from 'react-share';
+import { withQuery } from 'ufo';
+import { useLocaleContext } from '../../../../locale';
+import lottieJsonErrorUrl from '../../assets/lottie/lottie-error.json?url';
+import lottieJsonLoadingUrl from '../../assets/lottie/lottie-loading.json?url';
+import lottieJsonSuccessUrl from '../../assets/lottie/lottie-success.json?url';
+import lottieJsonWelcomeUrl from '../../assets/lottie/lottie-welcome.json?url';
+import { useSessionState } from '../../state/session';
+import { ActionButton } from '../ActionButton';
+import { MessageMetadataRenderer } from '../common';
+import Lottie from '../lottie';
+import MarkdownRenderer from '../MarkdownRenderer';
+export default function RuntimeFormResult(_a) {
+    var { page } = _a, props = __rest(_a, ["page"]);
+    return (_jsxs(Stack, Object.assign({}, props, { children: [_jsx(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" }), _jsx(Box, { sx: { px: { xs: 2, sm: 3, md: 4 } }, children: _jsx(Suspense, { children: page.sessionId ? (_jsx(ResultView, { sessionId: page.sessionId })) : (_jsx(Box, { width: 300, height: 300, m: "auto", mt: "100px", children: _jsx(Lottie, { src: lottieJsonWelcomeUrl }) })) }) })] })));
+}
+function ResultView({ sessionId }) {
+    var _a, _b, _c, _d;
+    const { t } = useLocaleContext();
+    const [, _e] = 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 (_jsxs(Box, { width: 240, height: 240, m: "auto", mt: "100px", children: [_jsx(Lottie, { src: lottieJsonErrorUrl }), _jsx(Box, { textAlign: "center", color: "#25292F", children: error.message })] }));
+    }
+    if ((message === null || message === void 0 ? void 0 : message.loading) && !textContent) {
+        return (_jsx(Box, { width: 240, height: 240, m: "auto", mt: "100px", children: _jsx(Lottie, { src: lottieJsonLoadingUrl }) }));
+    }
+    if (!message) {
+        return (_jsx(Box, { width: 300, height: 300, m: "auto", mt: "100px", children: _jsx(Lottie, { src: lottieJsonWelcomeUrl }) }));
+    }
+    return (_jsxs(Stack, { gap: 2, children: [textContent && (_jsxs(Box, { sx: {
+                    border: 1,
+                    borderColor: 'grey.200',
+                    borderRadius: 1,
+                    bgcolor: 'grey.100',
+                }, children: [_jsx(Box, { sx: { p: 2 }, children: _jsx(MarkdownRenderer, { 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 && (_jsxs(Stack, { direction: "row", alignItems: "center", justifyContent: "flex-end", px: 2, pb: 1, gap: 1, children: [_jsx(Box, { children: _jsx(ActionButton, { autoReset: true, size: "small", variant: "text", 
+                                    // @ts-ignore
+                                    color: "black", tip: t('copyToClipboard'), tipSucceed: t('copied'), title: _jsx(Icon, { icon: "tabler:copy", fontSize: 18 }), titleSucceed: _jsx(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);
+                                    } }) }), _jsx(Box, { children: _jsx(Tooltip, { title: t('socialShare.shareToX'), placement: "top", disableInteractive: true, children: _jsx(Button, { sx: { p: 0.5, minWidth: 0, minHeight: 0 }, target: "_blank", href: withQuery('https://twitter.com/intent/tweet', { text: textContent }), children: _jsx(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) => _jsx(MessageMetadataRenderer, { object: object.data }, object.taskId)), _jsx(Box, { display: "flex", justifyContent: "flex-end", mb: "60px", mt: "40px", children: _jsx(Box, { width: 120, height: 120, children: _jsx(Lottie, { src: lottieJsonSuccessUrl }) }) })] }));
+}

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

@@ -0,0 +1,25 @@
+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;
+};
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useSubscribeLink } from '../../hooks/subscribe';
+import LoadingButton from '../LoadingButton';
+import PoweredBy from '../PoweredBy';
+export default function RuntimeFormSubmit(_a) {
+    var { page } = _a, props = __rest(_a, ["page"]);
+    const { subscribeLink } = useSubscribeLink({ assistantId: page.assistantId });
+    return (_jsxs(_Fragment, { children: [_jsx(LoadingButton, Object.assign({}, props, { onClick: (e) => {
+                    if (subscribeLink) {
+                        e.preventDefault();
+                        window.location.href = subscribeLink;
+                    }
+                } })), _jsx(PoweredBy, { assistantId: page.assistantId })] }));
+}

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

@@ -0,0 +1,16 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Divider, Stack } from '@mui/material';
+import { useAssistantState } from '../../state/assistant';
+import RuntimeFormForms from './RuntimeFormForms';
+import RuntimeFormHeader from './RuntimeFormHeader';
+import RuntimeFormResult from './RuntimeFormResult';
+export default function RuntimeForm({ page }) {
+    const [agent] = useAssistantState({ assistantId: page.assistantId });
+    return (_jsxs(Stack, { sx: { flexGrow: { xs: 'unset', md: 1 } }, children: [_jsx(RuntimeFormHeader, { agent: agent, sx: {
+                    position: 'sticky',
+                    top: 64,
+                    zIndex: 10,
+                    px: { xs: 2, sm: 3, md: 8 },
+                    py: { xs: 2, sm: 3, md: 5 },
+                } }), _jsxs(Stack, { sx: { flexGrow: 1, flexDirection: { xs: 'column', md: 'row' } }, children: [_jsx(Stack, { sx: { flex: 1, px: { xs: 2, sm: 3, md: 4 }, ml: { xs: 0, md: 4 } }, children: _jsx(RuntimeFormForms, { page: page, sx: { position: 'sticky', top: 232 } }) }), _jsx(Divider, { orientation: "vertical", sx: { borderColor: 'grey.200', my: { xs: 2, sm: 3, md: 0 } } }), _jsx(Box, { sx: { flex: 2 }, children: _jsx(RuntimeFormResult, { page: page }) })] })] }));
+}

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

@@ -0,0 +1,59 @@
+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());
+    });
+};
+import { useEffect } from 'react';
+import { createSession, getSessions } from '../../api/session';
+import useAsync from '../../hooks/useAsync';
+import { useAssistantState } from '../../state/assistant';
+import { globalLoadingState } from '../../state/loading';
+import { createSessionState } from '../../state/session';
+import { parseIdentity } from '../../utils';
+export default function CheckSession({ cacheId, page, autoCreateSession, children, }) {
+    const { assistantId, sessionId } = page;
+    useAssistantState({ assistantId });
+    const result = useAsync(() => {
+        if (sessionId && createSessionState({ sessionId }).getState().session)
+            return undefined;
+        return 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 getSessions(parseIdentity(assistantId, { rejectWhenError: true }));
+                    const session = (_a = sessions[0]) !== null && _a !== void 0 ? _a : (autoCreateSession ? (yield createSession({ assistantId })).created : undefined);
+                    if (session) {
+                        yield 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 = 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]);
+    useEffect(() => {
+        if (result)
+            page.navigate(...result);
+    }, [result, page.navigate]);
+    if (result)
+        return null;
+    return children;
+}

package/lib/esm/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/esm/builtin/async/ai-runtime/constants.js

@@ -0,0 +1,2 @@
+export const AI_STUDIO_DID = 'z8iZpog7mcgcgBZzTiXJCWESvmnRrQmnd3XBB';
+export const PAYMENT_KIT_DID = 'z2qaCNvKMv5GjouKdcDWexv6WqtHbpNPQDnAk';

package/lib/esm/builtin/async/ai-runtime/error.js

@@ -0,0 +1,6 @@
+export class CustomError extends Error {
+    constructor(status, message) {
+        super(message);
+        this.status = status;
+    }
+}

package/lib/esm/builtin/async/ai-runtime/hooks/header.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Box } from '@mui/material';
+import { useEffect } from 'react';
+import { useHeaderState } from '../../../page/header';
+import SocialShare from '../components/SocialShare';
+export function useSetHeader({ assistant }) {
+    // set logo
+    useEffect(() => {
+        const { release } = assistant;
+        useHeaderState.setState((state) => {
+            state.logo = (release === null || release === void 0 ? void 0 : release.logo) && _jsx(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) => [_jsx(SocialShare, { content: shareContent }), ...exists];
+        });
+        return () => useHeaderState.setState((state) => {
+            state.logo = undefined;
+            state.brand = undefined;
+            state.addons = (...exists) => [...exists];
+        });
+    }, []);
+}

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

@@ -0,0 +1,32 @@
+import { useCallback, useMemo } from 'react';
+import { useLocation, useNavigate } from 'react-router-dom';
+import { getQuery, withQuery } from 'ufo';
+import { CustomError } from '../error';
+export function useNavigateTo() {
+    const location = useLocation();
+    return useCallback((query) => withQuery(`${location.pathname}${location.search}`, query), [location]);
+}
+export function useNavigateWithQuery() {
+    const to = useNavigateTo();
+    const navigate = useNavigate();
+    return useCallback((query, options) => {
+        navigate(to(Object.assign(Object.assign({}, query), { page: query.page === 'assistant' ? undefined : query.page })), options);
+    }, [navigate, to]);
+}
+const PAGES = ['assistant', 'session'];
+function isCurrentPage(page) {
+    return PAGES.includes(page);
+}
+export function useCurrentPage(page) {
+    const { search } = useLocation();
+    const { page: pageParam, assistantId, sessionId, } = useMemo(() => 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 CustomError(404, 'Missing required query parameters `assistantId`');
+}

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

@@ -0,0 +1,31 @@
+import { joinURL, withQuery } from 'ufo';
+import { useSessionContext } from '../../../session';
+import { getComponentMountPoint } from '../../../utils';
+import { PAYMENT_KIT_DID } from '../constants';
+import { useAssistantState } from '../state/assistant';
+import { useSubscriptionState } from '../state/subscription';
+export function useSubscribeLink({ assistantId }) {
+    var _a, _b, _c;
+    const [, state] = useSubscriptionState({ aid: assistantId });
+    const [assistant] = useAssistantState({ assistantId });
+    const { session } = 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,
+    };
+}
+function getSubscribeLink({ aid, userId, paymentLinkId }) {
+    return withQuery(joinURL('/', getComponentMountPoint(PAYMENT_KIT_DID), '/checkout/pay', paymentLinkId), {
+        'metadata.aid': aid,
+        'metadata.userId': userId,
+        redirect: window.location.href,
+    });
+}

package/lib/esm/builtin/async/ai-runtime/hooks/useAsync.js

@@ -0,0 +1,29 @@
+const PROMISE_CACHE = {};
+export default function useAsync(fn, keys) {
+    const key = keys.join('_');
+    let cache = PROMISE_CACHE[key];
+    if (!cache) {
+        const promise = fn();
+        const isPromise = promise instanceof Promise;
+        cache = {
+            promise: Promise.resolve(promise)
+                .then((result) => {
+                PROMISE_CACHE[key].result = result;
+            })
+                .catch((error) => {
+                PROMISE_CACHE[key].error = error;
+            })
+                .finally(() => {
+                PROMISE_CACHE[key].done = true;
+            }),
+            done: !isPromise,
+            result: isPromise ? undefined : promise,
+        };
+        PROMISE_CACHE[key] = cache;
+    }
+    if (cache.error)
+        throw cache.error;
+    if (cache.done)
+        return cache.result;
+    throw cache.promise;
+}

package/lib/esm/builtin/async/ai-runtime/index.js

@@ -0,0 +1,72 @@
+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());
+    });
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Stack } from '@mui/material';
+import { Suspense, useCallback, useEffect, useId, useMemo, useState } from 'react';
+import { ErrorBoundary } from 'react-error-boundary';
+import { Toast } from '../../arcblock/ux';
+import { getQuery } from '../../utils';
+import { getAssistant } from './api/assistant';
+import { ChatBot as ChatBotWrapper } from './components/common';
+import RuntimeChat from './components/runtime-chat';
+import RuntimeForm from './components/runtime-form';
+import RuntimeProvider from './components/RuntimeProvider';
+import ScrollView from './components/ScrollView';
+import CheckSession from './components/session/CheckSession';
+import { useSetHeader } from './hooks/header';
+import { useCurrentPage } from './hooks/navigate';
+import { createAssistantState, useAssistantState } from './state/assistant';
+import { parseIdentity } from './utils';
+export function getServerSideProps() {
+    return __awaiter(this, void 0, void 0, function* () {
+        const query = getQuery(globalThis.location.href);
+        const assistantId = typeof query.assistantId === 'string' ? query.assistantId : undefined;
+        const identity = assistantId ? parseIdentity(assistantId) : undefined;
+        const assistant = identity && (yield getAssistant(identity));
+        return { props: { preload: assistantId ? { assistantId, assistant } : undefined } };
+    });
+}
+export default function App(props) {
+    const cacheId = useId();
+    return (_jsx(RuntimeProvider, { children: _jsx(AIRuntime, Object.assign({}, props, { cacheId: cacheId })) }));
+}
+function AIRuntime({ cacheId, preload }) {
+    var _a;
+    const page = useCurrentPage();
+    const { assistantId } = page;
+    const [assistant] = useAssistantState({ assistantId });
+    useSetHeader({ assistant });
+    useMemo(() => {
+        // preload assistant from server side props
+        if (preload)
+            createAssistantState(preload);
+    }, []);
+    return (_jsx(CheckSession, { cacheId: cacheId, page: page, children: _jsx(ScrollView, { scroller: "window", initialScrollBehavior: "auto", children: _jsx(Stack, { flexGrow: 1, height: "100%", className: "ai-runtime-root", children: ((_a = assistant.release) === null || _a === void 0 ? void 0 : _a.template) === 'form' ? _jsx(RuntimeForm, { page: page }) : _jsx(RuntimeChat, { page: page }) }) }) }));
+}
+export function ChatBot(props) {
+    if (!props.assistantId)
+        throw new Error('Missing required parameter assistantId');
+    const navigate = useCallback((page) => {
+        setPage((state) => (Object.assign(Object.assign({}, state), page)));
+    }, []);
+    const [page, setPage] = useState({
+        page: 'assistant',
+        assistantId: props.assistantId,
+        navigate,
+    });
+    const cacheId = useId();
+    return (_jsx(RuntimeProvider, { children: _jsx(ErrorBoundary, { FallbackComponent: ChatBotErrorView, children: _jsx(Suspense, { children: _jsx(ChatBotWrapper, Object.assign({}, props, { children: _jsx(CheckSession, { cacheId: cacheId, autoCreateSession: true, page: page, children: _jsx(RuntimeChat, { page: page }) }) })) }) }) }));
+}
+function ChatBotErrorView({ error }) {
+    useEffect(() => {
+        Toast.error(error.message);
+    }, [error]);
+    return null;
+}