@blocklet/pages-kit 0.2.291 → 0.2.293

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

@@ -0,0 +1,100 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { RuntimeOutputVariable } from '@blocklet/ai-runtime/types';
+import { Masonry } from '@mui/lab';
+import { Box, Skeleton, Stack, ThemeProvider, Typography, createTheme, styled, useTheme } from '@mui/material';
+import { Suspense, useMemo } from 'react';
+import Balancer, { Provider } from 'react-wrap-balancer';
+import CustomComponentRenderer from '../../../../../../../components/CustomComponentRenderer';
+import { useLocaleContext } from '../../../../../../locale';
+import LoadingButton from '../../../LoadingButton';
+import CurrentAgentProvider, { useCurrentAgent } from '../../contexts/CurrentAgent';
+import CurrentMessageProvider from '../../contexts/CurrentMessage';
+import { useRuntimeState } from '../../state/runtime';
+import mapRight from '../../utils/map-right';
+export default function PhotoGallery({ resultTitle, background, primaryColor, }) {
+    var _a;
+    const { appearancePage, agent } = useRuntimeState();
+    const children = useMemo(() => {
+        var _a, _b;
+        return (_b = (_a = agent.outputVariables) === null || _a === void 0 ? void 0 : _a.find((i) => i.name === RuntimeOutputVariable.children)) === null || _b === void 0 ? void 0 : _b.initialValue;
+    }, [agent]);
+    const inheritedTheme = useTheme();
+    const theme = useMemo(() => {
+        let { primary } = inheritedTheme.palette;
+        try {
+            if (primaryColor) {
+                primary = inheritedTheme.palette.augmentColor({ color: { main: primaryColor } });
+            }
+        }
+        catch (error) {
+            console.error('augment primary color error', { error });
+        }
+        return createTheme(inheritedTheme, {
+            palette: { primary },
+            shape: {
+                borderRadius: 8,
+            },
+        });
+    }, [inheritedTheme, primaryColor]);
+    return (_jsx(ThemeProvider, { theme: theme, children: _jsxs(Root, { className: "photo-wall-root", sx: { backgroundImage: `url(${background})` }, children: [_jsx(Stack, { className: "photo-wall-header", children: _jsxs(Provider, { children: [(appearancePage === null || appearancePage === void 0 ? void 0 : appearancePage.name) && (_jsx(Typography, { component: "h2", fontSize: 48, fontWeight: 700, textAlign: "center", children: _jsx(Balancer, { children: appearancePage.name }) })), (appearancePage === null || appearancePage === void 0 ? void 0 : appearancePage.description) && (_jsx(Typography, { fontSize: 20, textAlign: "center", children: _jsx(Balancer, { children: appearancePage.description }) }))] }) }), _jsx(Stack, { className: "photo-wall-input", children: (_a = children === null || children === void 0 ? void 0 : children.agents) === null || _a === void 0 ? void 0 : _a.map((i) => (_jsx(CurrentAgentProvider, { agentId: i.id, children: _jsx(AgentInputRender, {}) }, i.id))) }), _jsxs(Stack, { className: "photo-wall-output", gap: 2, children: [resultTitle && (_jsx(Typography, { component: "h2", fontSize: 48, fontWeight: 700, textAlign: "center", children: _jsx(Balancer, { children: resultTitle }) })), _jsx(OutputView, {})] })] }) }));
+}
+const Root = styled(Stack)(({ theme }) => theme.unstable_sx({
+    gap: { xs: 3, sm: 4, md: 5 },
+    width: '100%',
+    backgroundSize: '100% auto',
+    backgroundRepeat: 'no-repeat',
+    backgroundPosition: 'top',
+    mt: 4,
+    '.photo-wall-header': {
+        maxWidth: 'md',
+        mx: 'auto',
+        width: '100%',
+        px: { xs: 2, sm: 3 },
+        gap: { xs: 2, sm: 3 },
+    },
+    '.photo-wall-input': {
+        maxWidth: 'md',
+        mx: 'auto',
+        width: '100%',
+        px: { xs: 2, sm: 3 },
+    },
+    '.photo-wall-output': {
+        width: '100%',
+        alignItems: 'center',
+        px: { xs: 2, sm: 3 },
+        '.photo-wall-item': {
+            borderRadius: 1,
+            img: {
+                borderRadius: 1,
+            },
+        },
+    },
+}));
+function AgentInputRender() {
+    var _a, _b;
+    const { agent } = useCurrentAgent();
+    const input = (_b = (_a = agent.outputVariables) === null || _a === void 0 ? void 0 : _a.find((i) => i.name === RuntimeOutputVariable.appearanceInput)) === null || _b === void 0 ? void 0 : _b.initialValue;
+    if (!(input === null || input === void 0 ? void 0 : input.componentId))
+        return null;
+    return (_jsx(Stack, { children: _jsx(CustomComponentRenderer, { componentId: input.componentId, properties: input.componentProps }) }));
+}
+function NoOutputs() {
+    return (_jsx(Stack, { mt: 10, children: _jsx(Typography, { color: "text.disabled", children: "You haven't generated any pictures yet." }) }));
+}
+function OutputView() {
+    var _a, _b, _c, _d, _e;
+    const { t } = useLocaleContext();
+    const { sessionState } = useRuntimeState();
+    return (_jsxs(_Fragment, { children: [sessionState.loaded && !((_a = sessionState.messages) === null || _a === void 0 ? void 0 : _a.length) && _jsx(NoOutputs, {}), _jsxs(Masonry, { columns: { xs: 2, sm: 3, md: 4, lg: 5 }, spacing: 1, sequential: true, sx: { width: '100%', overflow: 'hidden' }, children: [sessionState.running && (_jsx(Skeleton, { className: "photo-wall-item", variant: "rectangular", sx: {
+                            // FIXME: default using history height
+                            height: (_c = (_b = document.getElementsByClassName('photo-wall-item')[0]) === null || _b === void 0 ? void 0 : _b.clientHeight) !== null && _c !== void 0 ? _c : 200,
+                        } })), mapRight((_d = sessionState.messages) !== null && _d !== void 0 ? _d : [], (message) => (_jsx(CurrentAgentProvider, { agentId: message.assistantId, children: _jsx(CurrentMessageProvider, { message: message, children: _jsx(Suspense, { children: _jsx(OutputItemView, {}) }) }) }, message.taskId)))] }), _jsx(Box, { my: 4, children: !!((_e = sessionState.messages) === null || _e === void 0 ? void 0 : _e.length) && !sessionState.noMoreMessage && (_jsx(LoadingButton, { variant: "outlined", onClick: sessionState.loadMoreMessages, children: t('loadMore') })) })] }));
+}
+function OutputItemView() {
+    var _a, _b;
+    const { agent } = useCurrentAgent();
+    const input = (_b = (_a = agent.outputVariables) === null || _a === void 0 ? void 0 : _a.find((i) => i.name === RuntimeOutputVariable.appearanceOutput)) === null || _b === void 0 ? void 0 : _b.initialValue;
+    if (!(input === null || input === void 0 ? void 0 : input.componentId))
+        return null;
+    return _jsx(CustomComponentRenderer, { componentId: input.componentId, properties: input.componentProps });
+}

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

@@ -0,0 +1,114 @@
+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 { RuntimeOutputVariable } from '@blocklet/ai-runtime/types';
+import { Icon } from '@iconify/react';
+import { Box, Button, Dialog, DialogContent, Stack, Typography, alpha, useTheme } from '@mui/material';
+import { useState } from 'react';
+import { useLocaleContext } from '../../../../../../locale';
+import { ActionButton } from '../../../ActionButton';
+import { useCurrentMessage } from '../../contexts/CurrentMessage';
+const getLineClamp = (line) => ({
+    display: '-webkit-box',
+    WebkitLineClamp: line,
+    WebkitBoxOrient: 'vertical',
+    overflow: 'hidden',
+    overflowWrap: 'break-word',
+    textOverflow: 'ellipsis',
+    whiteSpace: 'wrap',
+});
+export default function PhotoGalleryItem() {
+    var _a, _b;
+    const { message } = useCurrentMessage();
+    const [openDialog, setOpenDialog] = useState(false);
+    const objects = (_b = (_a = message.result) === null || _a === void 0 ? void 0 : _a.objects) !== null && _b !== void 0 ? _b : [];
+    const images = objects.flatMap((i) => { var _a; return (_a = i.data[RuntimeOutputVariable.images]) !== null && _a !== void 0 ? _a : []; });
+    return images.map(({ url }, index) => {
+        var _a;
+        return (_jsxs(Box, { className: "photo-wall-item", sx: {
+                position: 'relative',
+                overflow: 'hidden',
+                cursor: 'pointer',
+                '&:hover': {
+                    '.photo-wall-item-alt': {
+                        opacity: 1,
+                    },
+                },
+            }, onClick: () => setOpenDialog(true), children: [_jsx(Box, { component: "img", src: url, alt: "", width: "100%", height: "100%", 
+                    // 首屏 image 不能用 lazy，会闪烁乱序
+                    loading: index < 12 ? 'eager' : 'lazy' }), _jsx(Box, { className: "photo-wall-item-alt", sx: {
+                        position: 'absolute',
+                        top: 0,
+                        bottom: 0,
+                        left: 0,
+                        right: 0,
+                        width: '100%',
+                        height: '100%',
+                        px: 1.5,
+                        py: 1,
+                        display: 'flex',
+                        alignItems: 'flex-end',
+                        fontWeight: 500,
+                        fontSize: 13,
+                        color: 'white',
+                        background: 'linear-gradient(to bottom, rgba(2, 7, 19, 0) 0%, rgba(2, 7, 19, 0.8) 100%)',
+                        opacity: 0,
+                        transition: 'opacity 0.3s',
+                    }, children: _jsx(Box, { sx: Object.assign({ lineHeight: 1.5 }, getLineClamp(3)), children: (_a = message.parameters) === null || _a === void 0 ? void 0 : _a.question }) }), openDialog && (_jsx(PromptDialog, { open: true, url: url, onClose: (e) => {
+                        e.stopPropagation();
+                        e.preventDefault();
+                        setOpenDialog(false);
+                    } }))] }, url));
+    });
+}
+function PromptDialog(_a) {
+    var { url } = _a, props = __rest(_a, ["url"]);
+    const { message } = useCurrentMessage();
+    const { parameters } = message;
+    const theme = useTheme();
+    const { t } = useLocaleContext();
+    return (_jsxs(Dialog, Object.assign({ fullWidth: true, maxWidth: false, scroll: "paper", slotProps: {
+            backdrop: {
+                sx: {
+                    bgcolor: 'rgba(255, 255, 255, 0.4)',
+                    backdropFilter: 'blur(12px)',
+                },
+            },
+        } }, props, { children: [_jsx(Box, { sx: { position: 'absolute', right: 0, top: 0, p: 0.5 }, children: _jsx(Button, { onClick: (e) => { var _a; return (_a = props.onClose) === null || _a === void 0 ? void 0 : _a.call(props, e, 'backdropClick'); }, variant: "contained", disableElevation: true, sx: {
+                        bgcolor: (theme) => alpha(theme.palette.primary.light, 0.2),
+                        minWidth: 32,
+                        minHeight: 32,
+                        p: 0,
+                        fontSize: 22,
+                        color: 'primary.main',
+                        ':hover': {
+                            bgcolor: (theme) => alpha(theme.palette.primary.light, 0.3),
+                        },
+                    }, children: _jsx(Icon, { icon: "tabler:x" }) }) }), _jsx(DialogContent, { children: _jsxs(Stack, { gap: 4, sx: { flexDirection: { md: 'row' } }, children: [_jsxs(Stack, { sx: { flex: 3, width: { xs: '100%', md: 0 }, gap: 1 }, children: [_jsx(Typography, { component: "h5", sx: { fontSize: 24, fontWeight: 700, color: 'primary.main' }, children: t('photoWall.dialog.title') }), _jsx(Box, { component: "img", src: url, alt: "", loading: "lazy", sx: {
+                                        display: 'block',
+                                        width: '100%',
+                                        borderRadius: 1,
+                                    } })] }), _jsxs(Stack, { sx: { flex: 2, width: { xs: '100%', md: 0 }, gap: 1 }, children: [_jsx(Typography, { component: "h5", sx: { fontSize: 24, fontWeight: 700, color: 'primary.main' }, children: t('photoWall.dialog.prompt') }), _jsx(Box, { sx: {
+                                        p: 2,
+                                        borderRadius: 1,
+                                        background: (theme) => `linear-gradient(to top, ${alpha(theme.palette.primary.light, 0.5)}, ${alpha(theme.palette.primary.light, 0.1)})`,
+                                    }, children: _jsx(Box, { sx: {
+                                            backgroundColor: 'rgba(255,255,255,0.2)',
+                                            borderRadius: 1,
+                                            p: 1,
+                                            fontSize: 16,
+                                        }, children: parameters === null || parameters === void 0 ? void 0 : parameters.question }) }), _jsx(Box, { children: _jsx(ActionButton, { autoReset: true, size: "small", variant: "contained", placement: "right", tip: t('copyToClipboard'), title: t('copy'), titleSucceed: t('copied'), icon: "tabler:copy", iconSucceed: "tabler:copy-check-filled", onClick: () => {
+                                            window.navigator.clipboard.writeText(parameters === null || parameters === void 0 ? void 0 : parameters.question);
+                                        }, sx: {
+                                            borderRadius: theme.shape.borderRadius,
+                                        } }) })] })] }) })] })));
+}

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

@@ -0,0 +1,80 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { RuntimeOutputVariable } from '@blocklet/ai-runtime/types';
+import { Box, Stack, ThemeProvider, Typography, createTheme, useTheme } from '@mui/material';
+import { Suspense, useEffect, useMemo } from 'react';
+import Balancer, { Provider } from 'react-wrap-balancer';
+import CustomComponentRenderer from '../../../../../../../components/CustomComponentRenderer';
+import { MessageSuggestedQuestions } from '../../../common';
+import ScrollView, { useScrollToBottomModule } from '../../../ScrollView';
+import CurrentAgentProvider, { useCurrentAgent } from '../../contexts/CurrentAgent';
+import CurrentMessageProvider, { useCurrentMessage } from '../../contexts/CurrentMessage';
+import { useRuntimeState } from '../../state/runtime';
+export default function SimpleChat({ primaryColor }) {
+    const inheritedTheme = useTheme();
+    const theme = useMemo(() => {
+        let { primary } = inheritedTheme.palette;
+        try {
+            if (primaryColor) {
+                primary = inheritedTheme.palette.augmentColor({ color: { main: primaryColor } });
+            }
+        }
+        catch (error) {
+            console.error('augment primary color error', { error });
+        }
+        return createTheme(inheritedTheme, {
+            palette: { primary },
+            shape: {
+                borderRadius: 8,
+            },
+        });
+    }, [inheritedTheme, primaryColor]);
+    return (_jsx(ThemeProvider, { theme: theme, children: _jsx(ScrollView, { scroller: "window", initialScrollBehavior: "auto", children: _jsx(SimpleChatView, {}) }) }));
+}
+function SimpleChatView() {
+    var _a;
+    const { agent, appearancePage, sessionState } = useRuntimeState();
+    const scrollToBottom = useScrollToBottomModule().useScrollToBottom();
+    useEffect(() => {
+        if (sessionState.running)
+            scrollToBottom();
+    }, [scrollToBottom, sessionState.running]);
+    const children = useMemo(() => {
+        var _a, _b;
+        return (_b = (_a = agent.outputVariables) === null || _a === void 0 ? void 0 : _a.find((i) => i.name === RuntimeOutputVariable.children)) === null || _b === void 0 ? void 0 : _b.initialValue;
+    }, [agent]);
+    return (_jsxs(Stack, { flexGrow: 1, maxWidth: "md", width: "100%", mx: "auto", px: { xs: 2, sm: 3 }, children: [_jsx(Stack, { gap: 2, mt: 8, mb: 4, children: _jsxs(Provider, { children: [(appearancePage === null || appearancePage === void 0 ? void 0 : appearancePage.name) && (_jsx(Typography, { component: "h5", fontSize: 30, fontWeight: 700, textAlign: "center", children: _jsx(Balancer, { children: appearancePage.name }) })), (appearancePage === null || appearancePage === void 0 ? void 0 : appearancePage.description) && (_jsx(Typography, { textAlign: "center", children: _jsx(Balancer, { children: appearancePage.description }) }))] }) }), _jsx(Stack, { children: _jsx(OutputView, {}) }), _jsx(Box, { flexGrow: 1, minHeight: 200 }), _jsx(Stack, { sx: { position: 'sticky', bottom: 0, py: 1, bgcolor: 'background.paper', zIndex: 10 }, children: (_a = children === null || children === void 0 ? void 0 : children.agents) === null || _a === void 0 ? void 0 : _a.map((i) => (_jsx(CurrentAgentProvider, { agentId: i.id, children: _jsx(AgentInputRender, {}) }, i.id))) })] }));
+}
+function AgentInputRender() {
+    var _a, _b;
+    const { agent } = useCurrentAgent();
+    const input = (_b = (_a = agent.outputVariables) === null || _a === void 0 ? void 0 : _a.find((i) => i.name === RuntimeOutputVariable.appearanceInput)) === null || _b === void 0 ? void 0 : _b.initialValue;
+    if (!(input === null || input === void 0 ? void 0 : input.componentId))
+        return null;
+    return (_jsx(Stack, { children: _jsx(CustomComponentRenderer, { componentId: input.componentId, properties: input.componentProps }) }));
+}
+function OutputView() {
+    var _a, _b;
+    const { sessionState } = useRuntimeState();
+    const lastMessage = (_a = sessionState.messages) === null || _a === void 0 ? void 0 : _a.slice(-1)[0];
+    return (_jsxs(Stack, { gap: 2, children: [(_b = sessionState.messages) === null || _b === void 0 ? void 0 : _b.map((message) => (_jsx(Stack, { children: _jsx(CurrentAgentProvider, { agentId: message.assistantId, children: _jsx(CurrentMessageProvider, { message: message, children: _jsx(Suspense, { children: _jsx(OutputItemView, {}) }) }) }) }))), lastMessage && (_jsx(CurrentAgentProvider, { agentId: lastMessage.assistantId, children: _jsx(CurrentMessageProvider, { message: lastMessage, children: _jsx(SuggestedQuestionsView, {}) }) }))] }));
+}
+function OutputItemView() {
+    var _a, _b;
+    const { agent } = useCurrentAgent();
+    const input = (_b = (_a = agent.outputVariables) === null || _a === void 0 ? void 0 : _a.find((i) => i.name === RuntimeOutputVariable.appearanceOutput)) === null || _b === void 0 ? void 0 : _b.initialValue;
+    if (!(input === null || input === void 0 ? void 0 : input.componentId))
+        return null;
+    return _jsx(CustomComponentRenderer, { componentId: input.componentId, properties: input.componentProps });
+}
+function SuggestedQuestionsView() {
+    const { execute } = useRuntimeState();
+    const { aid } = useCurrentAgent();
+    const { message } = useCurrentMessage();
+    const suggestedQuestions = useMemo(() => {
+        var _a, _b, _c;
+        return (_c = (_b = (_a = message === null || message === void 0 ? void 0 : message.result) === null || _a === void 0 ? void 0 : _a.objects) === null || _b === void 0 ? void 0 : _b[0]) === null || _c === void 0 ? void 0 : _c.data[RuntimeOutputVariable.suggestedQuestions];
+    }, [message]);
+    return (_jsx(Box, { ml: 6.5, mr: 2.5, children: (suggestedQuestions === null || suggestedQuestions === void 0 ? void 0 : suggestedQuestions.length) ? (_jsx(MessageSuggestedQuestions, { dataSource: suggestedQuestions, onClick: (item) => {
+                execute({ aid, parameters: Object.assign(Object.assign({}, message.parameters), { question: item.question }) });
+            } })) : null }));
+}

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

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Stack } from '@mui/material';
+import { MessageMetadataRenderer } from '../../../common';
+import MarkdownRenderer from '../../../MarkdownRenderer';
+import { useCurrentMessage } from '../../contexts/CurrentMessage';
+export default function BaseOutputs() {
+    var _a, _b;
+    const { message } = useCurrentMessage();
+    const objects = (_a = message.result) === null || _a === void 0 ? void 0 : _a.objects;
+    return (_jsxs(Stack, { gap: 2, boxShadow: 1, borderRadius: 1, p: 2, children: [_jsx(MarkdownRenderer, { children: (_b = message.result) === null || _b === void 0 ? void 0 : _b.content }), objects === null || objects === void 0 ? void 0 : objects.map((item) => _jsx(MessageMetadataRenderer, { object: item.data }))] }));
+}

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

@@ -0,0 +1,58 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { RuntimeOutputVariable } from '@blocklet/ai-runtime/types';
+import { Stack, ThemeProvider, Typography, createTheme, useTheme } from '@mui/material';
+import { Suspense, useMemo } from 'react';
+import Balancer, { Provider } from 'react-wrap-balancer';
+import CustomComponentRenderer from '../../../../../../../components/CustomComponentRenderer';
+import CurrentAgentProvider, { useCurrentAgent } from '../../contexts/CurrentAgent';
+import CurrentMessageProvider from '../../contexts/CurrentMessage';
+import { useRuntimeState } from '../../state/runtime';
+export default function SimplePage({ resultTitle, primaryColor }) {
+    var _a;
+    const { agent, appearancePage } = useRuntimeState();
+    const children = useMemo(() => {
+        var _a, _b;
+        return (_b = (_a = agent.outputVariables) === null || _a === void 0 ? void 0 : _a.find((i) => i.name === RuntimeOutputVariable.children)) === null || _b === void 0 ? void 0 : _b.initialValue;
+    }, [agent]);
+    const inheritedTheme = useTheme();
+    const theme = useMemo(() => {
+        let { primary } = inheritedTheme.palette;
+        try {
+            if (primaryColor) {
+                primary = inheritedTheme.palette.augmentColor({ color: { main: primaryColor } });
+            }
+        }
+        catch (error) {
+            console.error('augment primary color error', { error });
+        }
+        return createTheme(inheritedTheme, {
+            palette: { primary },
+            shape: {
+                borderRadius: 8,
+            },
+        });
+    }, [inheritedTheme, primaryColor]);
+    return (_jsx(ThemeProvider, { theme: theme, children: _jsxs(Stack, { gap: 2, maxWidth: "md", width: "100%", mx: "auto", px: { xs: 2, sm: 3 }, children: [_jsx(Stack, { gap: 2, mt: 8, mb: 4, children: _jsxs(Provider, { children: [(appearancePage === null || appearancePage === void 0 ? void 0 : appearancePage.name) && (_jsx(Typography, { component: "h5", fontSize: 30, fontWeight: 700, textAlign: "center", children: _jsx(Balancer, { children: appearancePage.name }) })), (appearancePage === null || appearancePage === void 0 ? void 0 : appearancePage.description) && (_jsx(Typography, { textAlign: "center", children: _jsx(Balancer, { children: appearancePage.description }) }))] }) }), _jsx(Stack, { children: (_a = children === null || children === void 0 ? void 0 : children.agents) === null || _a === void 0 ? void 0 : _a.map((i) => (_jsx(CurrentAgentProvider, { agentId: i.id, children: _jsx(AgentInputRender, {}) }, i.id))) }), _jsx(Stack, { children: _jsx(OutputView, { resultTitle: resultTitle }) })] }) }));
+}
+function AgentInputRender() {
+    var _a, _b;
+    const { agent } = useCurrentAgent();
+    const input = (_b = (_a = agent.outputVariables) === null || _a === void 0 ? void 0 : _a.find((i) => i.name === RuntimeOutputVariable.appearanceInput)) === null || _b === void 0 ? void 0 : _b.initialValue;
+    if (!(input === null || input === void 0 ? void 0 : input.componentId))
+        return null;
+    return (_jsx(Stack, { children: _jsx(CustomComponentRenderer, { componentId: input.componentId, properties: input.componentProps }) }));
+}
+function OutputView({ resultTitle }) {
+    var _a;
+    const { sessionState } = useRuntimeState();
+    const lastMessage = (_a = sessionState.messages) === null || _a === void 0 ? void 0 : _a.slice(-1)[0];
+    return (_jsx(Stack, { gap: 2, children: lastMessage && (_jsxs(_Fragment, { children: [_jsx(Stack, { children: resultTitle && (_jsx(Typography, { component: "h5", fontSize: 36, fontWeight: 700, textAlign: "center", children: _jsx(Balancer, { children: resultTitle }) })) }), _jsx(Stack, { children: _jsx(CurrentAgentProvider, { agentId: lastMessage.assistantId, children: _jsx(CurrentMessageProvider, { message: lastMessage, children: _jsx(Suspense, { children: _jsx(OutputItemView, {}) }) }) }) })] })) }));
+}
+function OutputItemView() {
+    var _a, _b;
+    const { agent } = useCurrentAgent();
+    const input = (_b = (_a = agent.outputVariables) === null || _a === void 0 ? void 0 : _a.find((i) => i.name === RuntimeOutputVariable.appearanceOutput)) === null || _b === void 0 ? void 0 : _b.initialValue;
+    if (!(input === null || input === void 0 ? void 0 : input.componentId))
+        return null;
+    return _jsx(CustomComponentRenderer, { componentId: input.componentId, properties: input.componentProps });
+}

package/lib/esm/builtin/async/ai-runtime/components/runtime/contexts/CurrentAgent.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useContext, useMemo } from 'react';
+import { parseIdentity, stringifyIdentity } from '../../../utils';
+import { useAssistantState } from '../state/assistant';
+import { useRuntimeState } from '../state/runtime';
+const context = createContext(undefined);
+export default function CurrentAgentProvider({ agentId, children }) {
+    const { aid } = useRuntimeState();
+    const state = useMemo(() => ({
+        aid: stringifyIdentity(Object.assign(Object.assign({}, parseIdentity(aid, { rejectWhenError: true })), { assistantId: agentId })),
+    }), [aid, agentId]);
+    return _jsx(context.Provider, { value: state, children: children });
+}
+export function useCurrentAgent() {
+    const { working } = useRuntimeState();
+    const current = useContext(context);
+    if (!current) {
+        throw new Error('No such current agent state. You should use `useCurrentAgent` within the `CurrentAgentProvider`');
+    }
+    const [agent] = useAssistantState({ aid: current.aid, working });
+    return Object.assign(Object.assign({}, current), { agent });
+}

package/lib/esm/builtin/async/ai-runtime/components/runtime/contexts/CurrentMessage.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useContext, useMemo } from 'react';
+const context = createContext(undefined);
+export default function CurrentMessageProvider({ message, children }) {
+    const state = useMemo(() => ({ message }), [message]);
+    return _jsx(context.Provider, { value: state, children: children });
+}
+export function useCurrentMessage() {
+    const current = useContext(context);
+    if (!current) {
+        throw new Error('No such message state. You should use `useCurrentMessage` within the `CurrentMessageProvider`');
+    }
+    return current;
+}

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

@@ -0,0 +1,36 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { RuntimeOutputVariable } from '@blocklet/ai-runtime/types';
+import { Box } from '@mui/material';
+import { useEffect } from 'react';
+import { Helmet } from 'react-helmet';
+import CustomComponentRenderer from '../../../../../components/CustomComponentRenderer';
+import { Avatar } from '../../../../arcblock/ux';
+import { useHeaderState } from '../../../../page/header';
+import RuntimeProvider from '../RuntimeProvider';
+import { useRuntimeState } from './state/runtime';
+export default function Runtime() {
+    var _a, _b;
+    const { agent, appearancePage, sessionState } = useRuntimeState();
+    useEffect(() => {
+        useHeaderState.setState((state) => {
+            var _a;
+            const logo = (_a = appearancePage === null || appearancePage === void 0 ? void 0 : appearancePage.logo) === null || _a === void 0 ? void 0 : _a.url;
+            state.logo = logo && _jsx(Box, { component: Avatar, src: logo, did: blocklet === null || blocklet === void 0 ? void 0 : blocklet.appId, borderRadius: 1, size: 44 });
+            state.brand = appearancePage === null || appearancePage === void 0 ? void 0 : appearancePage.name;
+        });
+        return () => {
+            useHeaderState.setState((state) => {
+                state.logo = undefined;
+                state.brand = undefined;
+            });
+        };
+    }, [appearancePage]);
+    useEffect(() => {
+        sessionState.load();
+    }, []);
+    const appearance = (_b = (_a = agent.outputVariables) === null || _a === void 0 ? void 0 : _a.find((i) => i.name === RuntimeOutputVariable.appearancePage)) === null || _b === void 0 ? void 0 : _b.initialValue;
+    const componentId = appearance === null || appearance === void 0 ? void 0 : appearance.componentId;
+    if (!componentId)
+        throw new Error('Missing output `appearance`');
+    return (_jsxs(RuntimeProvider, { children: [appearancePage && (_jsxs(Helmet, { children: [appearancePage.name && _jsx("title", { children: appearancePage.name }), appearancePage.description && _jsx("meta", { name: "description", content: appearancePage.description })] })), _jsx(CustomComponentRenderer, { componentId: componentId, properties: appearance.componentProps })] }));
+}

package/lib/esm/builtin/async/ai-runtime/components/runtime/state/assistant.js

@@ -0,0 +1,56 @@
+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 { create } from 'zustand';
+import { immer } from 'zustand/middleware/immer';
+import { getAssistant } from '../../../api/assistant';
+const STATES = {};
+export const createAssistantState = ({ aid, working, assistant, }) => {
+    var _a;
+    const key = working ? `${aid}-working` : aid;
+    (_a = STATES[key]) !== null && _a !== void 0 ? _a : (STATES[key] = create()(immer((set) => ({
+        assistant,
+        load: () => __awaiter(void 0, void 0, void 0, function* () {
+            set((state) => {
+                state.loading = true;
+            });
+            try {
+                const assistant = yield getAssistant({ assistantId: aid, working });
+                set((state) => {
+                    state.assistant = assistant;
+                });
+            }
+            catch (error) {
+                console.error(error);
+                set((state) => {
+                    state.error = error;
+                });
+            }
+            finally {
+                set((state) => {
+                    state.loading = false;
+                });
+            }
+        }),
+    }))));
+    return STATES[key];
+};
+const LOADING_TASKS = {};
+export function useAssistantState({ aid, working }) {
+    var _a;
+    const state = createAssistantState({ aid, working })();
+    if (!state.assistant) {
+        if (state.error)
+            throw state.error;
+        const key = working ? `${aid}-working` : aid;
+        (_a = LOADING_TASKS[key]) !== null && _a !== void 0 ? _a : (LOADING_TASKS[key] = state.load());
+        throw LOADING_TASKS[key];
+    }
+    return [state.assistant, state];
+}

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

@@ -0,0 +1,52 @@
+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 { RuntimeOutputVariable } from '@blocklet/ai-runtime/types';
+import { useCallback, useEffect, useMemo } from 'react';
+import { useSearchParams } from 'react-router-dom';
+import { useSessionContext } from '../../../../../session';
+import { CustomError } from '../../../error';
+import { useAssistantState } from './assistant';
+import { createSessionState } from './session';
+export function useRuntimeState() {
+    var _a;
+    const [query] = useSearchParams();
+    const aid = query.get('aid');
+    if (!aid)
+        throw new CustomError(404, 'Missing required query parameters `aid`');
+    const working = query.get('working') === 'true';
+    const [agent] = useAssistantState({ aid, working });
+    const sessionState = createSessionState({ aid })();
+    const { session: authSession } = useSessionContext();
+    // reset state after logged out
+    useEffect(() => {
+        var _a;
+        if (!((_a = authSession.user) === null || _a === void 0 ? void 0 : _a.did)) {
+            sessionState.reset();
+        }
+    }, [(_a = authSession.user) === null || _a === void 0 ? void 0 : _a.did]);
+    const login = useCallback(() => __awaiter(this, void 0, void 0, function* () {
+        yield new Promise((resolve) => {
+            authSession.login(() => resolve());
+        });
+        yield Promise.all([sessionState.load()]);
+    }), [aid, authSession, sessionState]);
+    const execute = useCallback((args) => __awaiter(this, void 0, void 0, function* () {
+        if (!authSession.user) {
+            yield login();
+        }
+        return sessionState.execute(Object.assign(Object.assign({}, args), { working }));
+    }), [authSession.user, login, sessionState]);
+    const appearancePage = useMemo(() => {
+        var _a, _b;
+        const initialValue = (_b = (_a = agent.outputVariables) === null || _a === void 0 ? void 0 : _a.find((i) => i.name === RuntimeOutputVariable.appearancePage)) === null || _b === void 0 ? void 0 : _b.initialValue;
+        return initialValue;
+    }, [agent]);
+    return { aid, working, agent, appearancePage, sessionState, execute };
+}