@blocklet/pages-kit 0.2.309 → 0.2.311

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

@@ -10,7 +10,7 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { RuntimeOutputVariable, } from '@blocklet/ai-runtime/types';
+import { RuntimeOutputVariable } from '@blocklet/ai-runtime/types';
 import { Box, Stack, ThemeProvider, createTheme, useTheme } from '@mui/material';
 import { memo, useEffect, useMemo } from 'react';
 import { useScrollToBottom } from 'react-scroll-to-bottom';
@@ -23,6 +23,7 @@ import ScrollView from '../../components/ScrollView';
 import UserInfo from '../../components/UserInfo';
 import CurrentAgentProvider, { useCurrentAgent } from '../../contexts/CurrentAgent';
 import CurrentMessageProvider from '../../contexts/CurrentMessage';
+import useAppearances, { useOpeningMessage, useOpeningQuestions, useProfile } from '../../hooks/use-appearances';
 import { useRuntimeState } from '../../state/runtime';
 import { useSessionState } from '../../state/session';
 import MessageSuggestedQuestions, { MessageSuggestedQuestion } from '../ChatOutput/MessageSuggestedQuestions';
@@ -61,8 +62,8 @@ function SimpleChatView() {
 }
 function AgentInputRender(_a) {
     var props = __rest(_a, []);
-    const { appearanceInput } = useCurrentAgent();
-    if (!(appearanceInput === null || appearanceInput === void 0 ? void 0 : appearanceInput.componentId))
+    const { appearanceInput } = useAppearances();
+    if (!appearanceInput.componentId)
         return null;
     return (_jsx(Stack, Object.assign({}, props, { children: _jsx(CustomComponentRenderer, { componentId: appearanceInput.componentId, properties: appearanceInput.componentProps }) })));
 }
@@ -74,15 +75,15 @@ function OutputView(_a) {
     return (_jsxs(Stack, Object.assign({ gap: 2 }, props, { children: [_jsx(OpeningMessageView, {}), messages === null || messages === void 0 ? void 0 : messages.map((message) => _jsx(OutputItemView, { message: message }, message.taskId)), lastMessage && _jsx(SuggestedQuestionsView, { message: lastMessage }), !loading && !(messages === null || messages === void 0 ? void 0 : messages.length) && _jsx(OpeningQuestionsView, {})] })));
 }
 const OutputItemView = memo(({ message }) => {
-    var _a, _b, _c, _d, _e;
-    const { appearanceOutput } = useCurrentAgent({ agentId: message.assistantId });
-    const { appearancePage } = useRuntimeState();
+    var _a, _b, _c, _d;
     const { session: authSession } = useSessionContext();
+    const { appearanceOutput } = useAppearances({ agentId: message.assistantId });
+    const profile = useProfile({ agentId: message.assistantId });
     if (!(appearanceOutput === null || appearanceOutput === void 0 ? void 0 : appearanceOutput.componentId))
         return null;
     return (_jsx(CurrentAgentProvider, { agentId: message.assistantId, children: _jsx(CurrentMessageProvider, { message: message, children: _jsxs(Stack, { gap: 2, children: [_jsx(Box, { children: _jsx(UserInfo, { name: (_a = authSession.user) === null || _a === void 0 ? void 0 : _a.fullName, did: (_b = authSession.user) === null || _b === void 0 ? void 0 : _b.did, avatar: (_c = authSession.user) === null || _c === void 0 ? void 0 : _c.avatar, time: message.createdAt, reverse: true, alignItems: "flex-start", children: _jsx(CustomComponentRenderer, { componentId: appearanceOutput.componentId, properties: appearanceOutput.componentProps, props: {
                                     renderType: 'parameters',
-                                } }) }) }), _jsx(Box, { children: _jsx(UserInfo, { name: appearancePage === null || appearancePage === void 0 ? void 0 : appearancePage.name, did: (_d = globalThis.blocklet) === null || _d === void 0 ? void 0 : _d.appId, avatar: (_e = appearancePage === null || appearancePage === void 0 ? void 0 : appearancePage.logo) === null || _e === void 0 ? void 0 : _e.url, time: message.createdAt, alignItems: "flex-start", children: _jsx(CustomComponentRenderer, { componentId: appearanceOutput.componentId, properties: appearanceOutput.componentProps, props: {
+                                } }) }) }), _jsx(Box, { children: _jsx(UserInfo, { name: profile.name, did: (_d = globalThis.blocklet) === null || _d === void 0 ? void 0 : _d.appId, avatar: profile.avatar, time: message.createdAt, alignItems: "flex-start", children: _jsx(CustomComponentRenderer, { componentId: appearanceOutput.componentId, properties: appearanceOutput.componentProps, props: {
                                     renderType: 'result',
                                 } }) }) })] }) }) }));
 });
@@ -98,16 +99,12 @@ function SuggestedQuestionsView({ message }) {
             } })) : null }));
 }
 const OpeningMessageView = memo(() => {
-    var _a, _b;
-    const { childAgentId, appearancePage } = useRuntimeState();
-    const { agent } = useCurrentAgent({ agentId: childAgentId });
-    const openingMessage = useMemo(() => {
-        var _a, _b;
-        return (_b = (_a = agent.outputVariables) === null || _a === void 0 ? void 0 : _a.find((i) => i.name === RuntimeOutputVariable.openingMessage)) === null || _b === void 0 ? void 0 : _b.initialValue;
-    }, [agent]);
-    if (!(openingMessage === null || openingMessage === void 0 ? void 0 : openingMessage.message))
+    var _a;
+    const { childAgentId } = useRuntimeState();
+    const opening = useOpeningMessage({ agentId: childAgentId });
+    if (!(opening === null || opening === void 0 ? void 0 : opening.message))
         return null;
-    return (_jsx(Box, { children: _jsx(UserInfo, { name: (appearancePage === null || appearancePage === void 0 ? void 0 : appearancePage.name) || agent.name, did: (_a = globalThis.blocklet) === null || _a === void 0 ? void 0 : _a.appId, avatar: (_b = appearancePage === null || appearancePage === void 0 ? void 0 : appearancePage.logo) === null || _b === void 0 ? void 0 : _b.url, alignItems: "flex-start", children: _jsx(Box, { sx: {
+    return (_jsx(Box, { children: _jsx(UserInfo, { name: opening.profile.name, did: (_a = globalThis.blocklet) === null || _a === void 0 ? void 0 : _a.appId, avatar: opening.profile.avatar, alignItems: "flex-start", children: _jsx(Box, { sx: {
                     bgcolor: 'rgba(229, 231, 235, 1)',
                     borderRadius: 1,
                     borderTopLeftRadius: 2,
@@ -115,19 +112,16 @@ const OpeningMessageView = memo(() => {
                     py: 1,
                     mt: 0.5,
                     mr: 5,
-                }, children: _jsx(MarkdownRenderer, { children: openingMessage.message }) }) }) }));
+                }, children: _jsx(MarkdownRenderer, { children: opening.message }) }) }) }));
 });
 function OpeningQuestionsView() {
-    const { childAgentId } = useRuntimeState();
     const { execute } = useRuntimeState();
-    const { aid, agent } = useCurrentAgent({ agentId: childAgentId });
-    const openingQuestions = useMemo(() => {
-        var _a, _b, _c, _d;
-        return (_d = (_c = (_b = (_a = agent.outputVariables) === null || _a === void 0 ? void 0 : _a.find((i) => i.name === RuntimeOutputVariable.openingQuestions)) === null || _b === void 0 ? void 0 : _b.initialValue) === null || _c === void 0 ? void 0 : _c.items) === null || _d === void 0 ? void 0 : _d.filter((i) => !!i.title);
-    }, [agent]);
-    if (!(openingQuestions === null || openingQuestions === void 0 ? void 0 : openingQuestions.length))
+    const { childAgentId } = useRuntimeState();
+    const { aid } = useCurrentAgent({ agentId: childAgentId });
+    const opening = useOpeningQuestions({ aid });
+    if (!(opening === null || opening === void 0 ? void 0 : opening.questions.length))
         return null;
-    return (_jsx(Box, { ml: 6.5, mr: 2.5, children: _jsx(Stack, { gap: 1, children: openingQuestions.map((item) => {
+    return (_jsx(Box, { ml: 6.5, mr: 2.5, children: _jsx(Stack, { gap: 1, children: opening.questions.map((item) => {
                 return (_jsx(MessageSuggestedQuestion, { onClick: () => execute({ aid, parameters: Object.assign(Object.assign({}, item.parameters), { question: item.parameters.question || item.title }) }), children: item.title }, item.id));
             }) }) }));
 }

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

@@ -16,8 +16,9 @@ import Balancer from 'react-wrap-balancer';
 import CustomComponentRenderer from '../../../../../components/CustomComponentRenderer';
 import SimpleHeader from '../../components/Header/SimpleHeader';
 import SimpleLayout from '../../components/Layout/SimpleLayout';
-import CurrentAgentProvider, { useCurrentAgent } from '../../contexts/CurrentAgent';
+import CurrentAgentProvider from '../../contexts/CurrentAgent';
 import CurrentMessageProvider from '../../contexts/CurrentMessage';
+import useAppearances from '../../hooks/use-appearances';
 import { useRuntimeState } from '../../state/runtime';
 import { useSessionState } from '../../state/session';
 export default function SimplePage({ resultTitle, primaryColor }) {
@@ -45,7 +46,7 @@ export default function SimplePage({ resultTitle, primaryColor }) {
 }
 function AgentInputRender(_a) {
     var props = __rest(_a, []);
-    const { appearanceInput } = useCurrentAgent();
+    const { appearanceInput } = useAppearances();
     if (!(appearanceInput === null || appearanceInput === void 0 ? void 0 : appearanceInput.componentId))
         return null;
     return (_jsx(Stack, Object.assign({}, props, { children: _jsx(CustomComponentRenderer, { componentId: appearanceInput.componentId, properties: appearanceInput.componentProps }) })));
@@ -56,7 +57,7 @@ function OutputView(_a) {
     return (_jsx(Stack, Object.assign({ gap: 2, mt: 4 }, props, { children: lastMessage && (_jsxs(_Fragment, { children: [resultTitle && (_jsx(Typography, { width: "100%", component: "h5", fontSize: 36, fontWeight: 700, textAlign: "center", children: _jsx(Balancer, { children: resultTitle }) })), _jsx(Stack, { children: _jsx(OutputItemView, { message: lastMessage }) })] })) })));
 }
 const OutputItemView = memo(({ message }) => {
-    const { appearanceOutput } = useCurrentAgent({ agentId: message.assistantId });
+    const { appearanceOutput } = useAppearances({ agentId: message.assistantId });
     if (!(appearanceOutput === null || appearanceOutput === void 0 ? void 0 : appearanceOutput.componentId))
         return null;
     return (_jsx(CurrentAgentProvider, { agentId: message.assistantId, children: _jsx(CurrentMessageProvider, { message: message, children: _jsx(Suspense, { children: _jsx(CustomComponentRenderer, { componentId: appearanceOutput.componentId, properties: appearanceOutput.componentProps }) }) }) }));

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

@@ -0,0 +1,146 @@
+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, jsxs as _jsxs } from "react/jsx-runtime";
+import { cx } from '@emotion/css';
+import { Box, FormLabel, InputAdornment, Stack, ThemeProvider, createTheme, formLabelClasses, outlinedInputClasses, styled, useTheme, } from '@mui/material';
+import isEmpty from 'lodash/isEmpty';
+import omit from 'lodash/omit';
+import { useEffect, useMemo, useState } from 'react';
+import { Controller, useForm } from 'react-hook-form';
+import { useLocaleContext } from '../../../../locale';
+import AgentInputField from '../../components/AgentInputField';
+import LoadingButton from '../../components/LoadingButton';
+import { useCurrentAgent } from '../../contexts/CurrentAgent';
+import { useRuntimeState } from '../../state/runtime';
+import { useSessionState } from '../../state/session';
+import { isValidInput } from '../../utils/agent-inputs';
+export default function AutoForm({ submitText, inlineLabel, autoFillLastForm = true, submitInQuestionField, chatMode, }) {
+    const { t } = useLocaleContext();
+    const { aid, agent } = useCurrentAgent();
+    const { execute } = useRuntimeState();
+    const running = useSessionState()((s) => s.running);
+    const parameters = useMemo(() => {
+        var _a;
+        return (_a = agent.parameters) === null || _a === void 0 ? void 0 : _a.filter(isValidInput).map((i) => {
+            var _a;
+            return (Object.assign(Object.assign({}, i), { label: ((_a = i.label) === null || _a === void 0 ? void 0 : _a.trim()) || undefined }));
+        });
+    }, [agent.parameters]);
+    const defaultForm = useInitialFormValues();
+    const theme = useFormTheme();
+    const form = useForm({ defaultValues: defaultForm });
+    useEffect(() => {
+        if (autoFillLastForm && !form.formState.isSubmitted && !form.formState.isSubmitting) {
+            form.reset(chatMode ? omit(defaultForm, 'question') : defaultForm);
+        }
+    }, [defaultForm, autoFillLastForm, form, chatMode]);
+    const onSubmit = (parameters) => __awaiter(this, void 0, void 0, function* () {
+        yield execute({
+            aid,
+            parameters,
+            onResponseStart: () => {
+                if (chatMode)
+                    form.resetField('question', { defaultValue: '' });
+            },
+        });
+    });
+    return (_jsx(ThemeProvider, { theme: theme, children: _jsxs(Form, { component: "form", className: cx('form', `label-position-${inlineLabel ? 'start' : 'top'}`), onSubmit: form.handleSubmit(onSubmit), children: [parameters === null || parameters === void 0 ? void 0 : parameters.map((parameter, index) => {
+                    const { key, required } = parameter !== null && parameter !== void 0 ? parameter : {};
+                    return (_jsx(Box, { children: _jsx(Controller, { control: form.control, name: key, rules: {
+                                required,
+                                min: parameter.type === 'number' && typeof parameter.min === 'number'
+                                    ? { value: parameter.min, message: '' }
+                                    : undefined,
+                                max: parameter.type === 'number' && typeof parameter.max === 'number'
+                                    ? { value: parameter.max, message: '' }
+                                    : undefined,
+                                minLength: parameter.type === 'string' && typeof parameter.minLength === 'number'
+                                    ? { value: parameter.minLength, message: '' }
+                                    : undefined,
+                                maxLength: parameter.type === 'string' && typeof parameter.maxLength === 'number'
+                                    ? { value: parameter.maxLength, message: '' }
+                                    : undefined,
+                            }, render: ({ field, fieldState }) => {
+                                var _a;
+                                return (_jsxs(Stack, { className: "form-item", children: [parameter.label && _jsx(FormLabel, { children: parameter.label }), _jsx(AgentInputField, { inputRef: field.ref, autoFocus: index === 0, size: "small", hiddenLabel: true, fullWidth: true, label: undefined, parameter: parameter, maxRows: !(parameter === null || parameter === void 0 ? void 0 : parameter.type) || (parameter === null || parameter === void 0 ? void 0 : parameter.type) === 'string' ? 5 : undefined, value: field.value || '', onChange: (value) => field.onChange({ target: { value } }), error: Boolean(fieldState.error), helperText: ((_a = fieldState.error) === null || _a === void 0 ? void 0 : _a.message) || (parameter === null || parameter === void 0 ? void 0 : parameter.helper), InputProps: parameter.key === 'question' && submitInQuestionField
+                                                ? {
+                                                    endAdornment: (_jsx(InputAdornment, { position: "end", sx: { py: 3, mr: -0.75, alignSelf: 'flex-end' }, children: _jsx(LoadingButton, { type: "submit", variant: "contained", loading: running, sx: { borderRadius: 100 }, children: submitText }) })),
+                                                }
+                                                : undefined })] }));
+                            } }) }, parameter.id));
+                }), !(submitInQuestionField && (parameters === null || parameters === void 0 ? void 0 : parameters.some((i) => i.key === 'question'))) && (_jsx(LoadingButton, { type: "submit", variant: "contained", loading: running, sx: { height: 40 }, children: submitText || t('generate') }))] }) }));
+}
+function useInitialFormValues() {
+    const { agent } = useCurrentAgent();
+    const lastMessage = useSessionState()((s) => { var _a; return (_a = s.messages) === null || _a === void 0 ? void 0 : _a.at(-1); });
+    const [lastInputs, setLastInputs] = useState();
+    useEffect(() => {
+        if (!lastInputs) {
+            const lastParameters = lastMessage === null || lastMessage === void 0 ? void 0 : lastMessage.parameters;
+            if (!isEmpty(lastParameters))
+                setLastInputs(lastParameters);
+        }
+    }, [lastMessage]);
+    return useMemo(() => {
+        var _a, _b;
+        if (lastInputs) {
+            return lastInputs;
+        }
+        return Object.fromEntries((_b = (_a = agent.parameters) === null || _a === void 0 ? void 0 : _a.map((parameter) => [parameter.key, parameter.defaultValue])) !== null && _b !== void 0 ? _b : []);
+    }, [lastInputs, agent]);
+}
+function useFormTheme() {
+    const theme = useTheme();
+    return useMemo(() => {
+        const themeOptions = {
+            shape: {
+                borderRadius: 8,
+            },
+            components: {
+                MuiTextField: {
+                    styleOverrides: {
+                        root: ({ theme }) => theme.unstable_sx({
+                            [`.${outlinedInputClasses.root}`]: {
+                                [`.${outlinedInputClasses.notchedOutline}`]: {
+                                    borderWidth: 2,
+                                    borderColor: 'primary.light',
+                                },
+                                ':hover': {
+                                    [`.${outlinedInputClasses.notchedOutline}`]: {
+                                        borderColor: 'primary.main',
+                                    },
+                                },
+                            },
+                        }),
+                    },
+                },
+            },
+        };
+        return createTheme(theme, themeOptions);
+    }, [theme]);
+}
+const Form = styled(Stack)(({ theme }) => theme.unstable_sx({
+    gap: 2,
+    '.form-item': {
+        gap: 0.5,
+        [`.${formLabelClasses.root}`]: {
+            fontWeight: 500,
+            color: 'text.primary',
+        },
+    },
+    '&.label-position-start': {
+        '.form-item': {
+            display: 'flex',
+            flexDirection: 'row',
+            alignItems: 'center',
+            gap: 1,
+        },
+    },
+}));

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

@@ -0,0 +1,73 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Icon } from '@iconify/react';
+import { Box, Drawer, IconButton, Skeleton, Stack } from '@mui/material';
+import { useState } from 'react';
+import CustomComponentRenderer from '../../../../../components/CustomComponentRenderer';
+import MarkdownRenderer from '../../components/MarkdownRenderer';
+import ShareActions from '../../components/ShareActions';
+import { useCurrentMessage } from '../../contexts/CurrentMessage';
+import MessageErrorView from '../ChatOutput/MessageErrorView';
+import MessageMetadataRenderer from '../ChatOutput/MessageMetadataRenderer';
+const codeField = 'code';
+export default function V0Output() {
+    var _a, _b;
+    const { message } = useCurrentMessage();
+    const objects = (_a = message.result) === null || _a === void 0 ? void 0 : _a.objects;
+    const { error } = message;
+    const isMessageLoading = (message.loading || !message.result) && !message.error;
+    return (_jsxs(Stack, { gap: 2, sx: {
+            py: 2,
+        }, children: [error && _jsx(MessageErrorView, { error: error }), isMessageLoading && (_jsx(Stack, { sx: {
+                    flex: 1,
+                }, children: _jsx(Skeleton, { variant: "rectangular", sx: {
+                        height: 400,
+                        borderRadius: 1,
+                    } }) })), objects === null || objects === void 0 ? void 0 : objects.map((item) => {
+                // @ts-ignore
+                const code = item.data[codeField];
+                return (_jsx(Box, { flex: 1, sx: {
+                        display: 'flex',
+                        justifyContent: 'center',
+                        alignItems: 'center',
+                    }, children: _jsx(CodePreview, { code: code }) }));
+            }), objects === null || objects === void 0 ? void 0 : objects.map((item) => _jsx(MessageMetadataRenderer, { object: item.data })), !isMessageLoading && ((_b = message.result) === null || _b === void 0 ? void 0 : _b.content) && (_jsx(ShareActions, { direction: "row", justifyContent: "flex-end", sx: { mt: 2 } }))] }));
+}
+function CodePreview({ code }) {
+    const [showCode, setShowCode] = useState(false);
+    if (!code)
+        return null;
+    return (_jsxs(Stack, { sx: {
+            flex: 1,
+        }, children: [_jsx(Box, { sx: {
+                    display: 'flex',
+                    justifyContent: 'flex-end',
+                }, children: _jsx(IconButton, { onClick: () => setShowCode((prev) => !prev), sx: {
+                        color: 'textColor',
+                    }, children: _jsx(Icon, { icon: showCode ? 'tabler:layout-sidebar' : 'tabler:code' }) }) }), _jsx(Stack, { gap: 2, sx: {
+                    display: 'flex',
+                    flexDirection: 'row',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                }, children: _jsx(Box, { sx: {
+                        display: 'flex',
+                        justifyContent: 'center',
+                        alignItems: 'center',
+                    }, children: _jsx(CustomComponentRenderer, { componentId: "mock-dev-component", dev: {
+                            components: {
+                                'mock-dev-component': {
+                                    data: {
+                                        id: 'mock-dev-component',
+                                        createdAt: '',
+                                        updatedAt: '',
+                                        renderer: {
+                                            type: 'react-component',
+                                            script: code,
+                                        },
+                                    },
+                                },
+                            },
+                        } }) }) }), _jsx(Drawer, { anchor: "right", open: showCode, onClose: () => setShowCode(false), children: _jsx(Box, { sx: {
+                        p: 2,
+                        maxWidth: '40vw',
+                    }, children: _jsx(MarkdownRenderer, { children: `\`\`\`typescript\n${code}\n\`\`\`` }) }) })] }));
+}

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

@@ -0,0 +1,142 @@
+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, Card, CardContent, Container, Grid, Stack, ThemeProvider, Typography, createTheme, useTheme, } from '@mui/material';
+import dayjs from 'dayjs';
+// import { useRuntimeState } from '@blocklet/pages-kit/builtin/async/ai-runtime';
+// import { Icon } from 'iconify/react';
+import { Suspense, useCallback, useEffect, useMemo, useState } from 'react';
+import CustomComponentRenderer from '../../../../../components/CustomComponentRenderer';
+import CurrentAgentProvider from '../../contexts/CurrentAgent';
+import CurrentMessageProvider from '../../contexts/CurrentMessage';
+import useAppearances from '../../hooks/use-appearances';
+import { useRuntimeState } from '../../state/runtime';
+import { useSessionState } from '../../state/session';
+const getLineClamp = (count) => {
+    return {
+        display: '-webkit-box',
+        WebkitLineClamp: count,
+        WebkitBoxOrient: 'vertical',
+        overflow: 'hidden',
+        textOverflow: 'ellipsis',
+    };
+};
+function V0Page({ textColor = '#333', primaryColor }) {
+    var _a;
+    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, textColor },
+            shape: {
+                borderRadius: 8,
+            },
+        });
+    }, [inheritedTheme, primaryColor, textColor]);
+    const [sessionId] = useState('1');
+    const [message, setMessage] = useState();
+    const { childAgentId } = useRuntimeState();
+    const messagesList = useSessionState({
+        autoLoad: true,
+    })((s) => s.messages);
+    useEffect(() => {
+        if (messagesList === null || messagesList === void 0 ? void 0 : messagesList.length) {
+            const lastMessage = messagesList[messagesList.length - 1];
+            // @ts-ignore
+            setMessage(lastMessage);
+        }
+    }, [messagesList]);
+    const SliderRender = useCallback(({ message }) => {
+        // if is detail, return output
+        if (sessionId && (messagesList === null || messagesList === void 0 ? void 0 : messagesList.length)) {
+            return (_jsx(Box, { sx: {
+                    width: 200,
+                    p: 2,
+                    position: 'sticky',
+                    top: 64,
+                    height: 'calc(100vh - 65px)',
+                    overflowY: 'auto',
+                }, children: _jsx(Stack, { spacing: 2, justifyContent: "center", children: messagesList === null || messagesList === void 0 ? void 0 : messagesList.map((_, i) => {
+                        var _a;
+                        const isCurrent = _.taskId === (message === null || message === void 0 ? void 0 : message.taskId);
+                        return (_jsxs(Box, { onClick: () => {
+                                // @ts-ignore
+                                setMessage(_);
+                            }, sx: {
+                                cursor: 'pointer',
+                                backgroundColor: isCurrent ? 'primary.main' : 'rgba(0, 0, 0, 0.5)',
+                                color: '#fff',
+                                borderRadius: 1,
+                                p: 1,
+                            }, children: [_jsx(Typography, { variant: "caption", display: "block", sx: Object.assign({ color: 'rgba(255, 255, 255, 0.9)' }, getLineClamp(2)), children: (_a = _.parameters) === null || _a === void 0 ? void 0 : _a.question }), _jsx(Box, { children: _jsxs(Typography, { sx: {
+                                            textAlign: 'right',
+                                            fontWeight: 600,
+                                            fontSize: 12,
+                                            mt: 0.5,
+                                            display: 'flex',
+                                            justifyContent: 'space-between',
+                                        }, children: [_jsx("span", { style: {
+                                                    color: 'rgba(255, 255, 255, 0.7)',
+                                                    fontWeight: 400,
+                                                }, children: dayjs(_.updatedAt).format('MM-DD HH:mm') }), _jsx("span", { children: `V${i}` })] }) })] }, _.assistantId));
+                    }) }) }, "slider"));
+        }
+        return null;
+    }, [JSON.stringify(messagesList)]);
+    const ContentRender = useCallback(() => {
+        // if is detail, return output
+        if (sessionId) {
+            return (_jsx(Box, { flex: 1, children: _jsx(AgentOutputRender, { message: message }) }));
+        }
+        return (_jsx(Box, { flex: 1, children: _jsx(Grid, { container: true, spacing: 2, justifyContent: "center", children: [...Array(3)].map((_, i) => (_jsx(Grid, { item: true, xs: 12, sm: 6, md: 4, children: _jsx(Card, { sx: { backgroundColor: 'rgba(0, 0, 0, 0.5)', color: '#fff' }, children: _jsxs(CardContent, { children: [_jsx(Typography, { variant: "body2", sx: { mb: 1 }, children: `Code Snippet ${i + 1}` }), _jsx(Typography, { variant: "caption", display: "block", sx: { color: 'rgba(255, 255, 255, 0.7)' }, children: `This is history requirement ${i + 1}` })] }) }) }, i))) }) }));
+    }, [JSON.stringify(message)]);
+    return (_jsx(ThemeProvider, { theme: theme, children: _jsx(CurrentAgentProvider, { agentId: childAgentId, children: _jsxs(Box, { sx: {
+                    display: 'flex',
+                    // background: 'linear-gradient(135deg, #1a237e 0%, #3c3f41 100%)',
+                }, children: [_jsx(SliderRender, { message: message }), _jsxs(Container, { sx: {
+                            minHeight: 'calc(100vh - 64px - 1px)',
+                            textAlign: 'center',
+                            py: 2,
+                            pt: 10,
+                            gap: 2,
+                            display: 'flex',
+                            flexDirection: 'column',
+                        }, children: [_jsx(Typography, { variant: "h2", color: "textColor", sx: { fontWeight: 'bold' }, children: "AIGNE V0" }), _jsx(Typography, { variant: "h5", color: "textColor", sx: Object.assign({}, getLineClamp(5)), children: ((_a = message === null || message === void 0 ? void 0 : message.parameters) === null || _a === void 0 ? void 0 : _a.question) || 'A v0 release to help you build code quickly' }), _jsx(ContentRender, {}), _jsx(Box, { sx: {
+                                    position: 'sticky',
+                                    bottom: 0,
+                                    backgroundColor: 'white',
+                                    pt: 4,
+                                }, children: _jsx(AgentInputRender, {}) })] })] }) }) }));
+}
+export default V0Page;
+function AgentInputRender(_a) {
+    var props = __rest(_a, []);
+    const { appearanceInput } = useAppearances();
+    if (!(appearanceInput === null || appearanceInput === void 0 ? void 0 : appearanceInput.componentId))
+        return null;
+    return (_jsx(Suspense, { children: _jsx(CustomComponentRenderer, Object.assign({ componentId: appearanceInput.componentId, properties: appearanceInput.componentProps }, props)) }));
+}
+function AgentOutputRender(_a) {
+    var { message } = _a, props = __rest(_a, ["message"]);
+    const { appearanceOutput } = useAppearances();
+    if (!(appearanceOutput === null || appearanceOutput === void 0 ? void 0 : appearanceOutput.componentId) || !message)
+        return null;
+    return (_jsx(CurrentAgentProvider, { agentId: message.assistantId, children: _jsx(CurrentMessageProvider, { message: message, children: _jsx(Suspense, { children: _jsx(CustomComponentRenderer, Object.assign({ componentId: appearanceOutput.componentId, properties: appearanceOutput.componentProps }, props)) }) }) }));
+}

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

@@ -0,0 +1,3 @@
+export { default as V0Page } from './Page';
+export { default as V0Output } from './Output';
+export { default as V0Input } from './Input';

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

@@ -39,13 +39,9 @@ export function useRuntimeState() {
         }
         return exec(Object.assign(Object.assign({}, args), { working }));
     }), [authSession.user, exec, working, login]);
-    const appearancePage = useMemo(() => {
-        var _a, _b;
-        return (_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;
-    }, [agent]);
     const childAgentId = useMemo(() => {
         var _a, _b, _c, _d, _e, _f;
         return ((_f = (_e = (_d = (_c = (_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) === null || _c === void 0 ? void 0 : _c.agents) === null || _d === void 0 ? void 0 : _d[0]) === null || _e === void 0 ? void 0 : _e.id) !== null && _f !== void 0 ? _f : agent.id);
     }, [agent]);
-    return { aid, working, agent, appearancePage, childAgentId, execute };
+    return { aid, working, agent, childAgentId, execute };
 }

package/lib/esm/builtin/async/ai-runtime/utils/runtime-output-schema.js

@@ -0,0 +1,4 @@
+export function getOutputVariableInitialValue(agent, output) {
+    var _a, _b;
+    return (_b = (_a = agent.outputVariables) === null || _a === void 0 ? void 0 : _a.find((i) => i.name === output)) === null || _b === void 0 ? void 0 : _b.initialValue;
+}

package/lib/esm/builtin/mui/material.js

@@ -1 +1 @@
-export { Alert, AlertTitle, Autocomplete, Avatar, Box, Button, ButtonGroup, Card, CardActionArea, CardActions, CardContent, CardHeader, CardMedia, CircularProgress, ClickAwayListener, Collapse, Container, Dialog, DialogActions, DialogContent, DialogTitle, Divider, Fade, GlobalStyles, Grid, Grow, LinearProgress, Link, List, ListItem, ListItemAvatar, ListItemButton, ListItemIcon, ListItemSecondaryAction, ListSubheader, Menu, MenuItem, MenuList, Paper, Popper, Slide, Stack, Switch, TextField, ThemeProvider, Tooltip, Typography, Zoom, alpha, createTheme, styled, useMediaQuery, useTheme, } from '@mui/material';
+export { Alert, AlertTitle, Autocomplete, Avatar, Box, Button, IconButton, ButtonGroup, Card, CardActionArea, CardActions, CardContent, CardHeader, CardMedia, CircularProgress, ClickAwayListener, Collapse, Container, Dialog, DialogActions, DialogContent, DialogTitle, Divider, Fade, GlobalStyles, Grid, Grow, LinearProgress, Link, List, ListItem, ListItemAvatar, ListItemButton, ListItemIcon, ListItemSecondaryAction, ListSubheader, Menu, MenuItem, MenuList, Paper, Popper, Slide, Stack, Switch, TextField, ThemeProvider, Tooltip, Typography, Zoom, alpha, createTheme, styled, useMediaQuery, useTheme, } from '@mui/material';