@blocklet/pages-kit 0.2.310 → 0.2.312

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

@@ -46,3 +46,5 @@ var ChatOutput_1 = require("./runtime-components/ChatOutput");
 Object.defineProperty(exports, "ChatOutput", { enumerable: true, get: function () { return __importDefault(ChatOutput_1).default; } });
 var PhotoGalleryItem_1 = require("./runtime-components/PhotoGalleryItem");
 Object.defineProperty(exports, "PhotoGalleryItem", { enumerable: true, get: function () { return __importDefault(PhotoGalleryItem_1).default; } });
+// only use to debug, should be removed when PR
+__exportStar(require("./runtime-components/V0"), exports);

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

@@ -74,23 +74,23 @@ function ResponsiveChatBotContainer({ open, anchorEl, children, onClose, }) {
     return ((0, jsx_runtime_1.jsx)(ChatBotPopper, { anchorEl: anchorEl, title: profile.name, open: open, onClose: onClose, children: children }));
 }
 function ChatBotPopper({ title, anchorEl, open, children, onClose, }) {
-    return ((0, jsx_runtime_1.jsx)(material_1.Popper, { anchorEl: anchorEl, open: open, disablePortal: true, placement: "top-end", sx: {
+    return ((0, jsx_runtime_1.jsx)(material_1.Popper, { anchorEl: anchorEl, open: open, disablePortal: true, placement: "top-end", transition: true, sx: {
             zIndex: 'modal',
             maxWidth: 500,
             maxHeight: 'min(calc(100vh - 128px), 1000px)',
             width: 500,
             height: '90vh',
-        }, children: (0, jsx_runtime_1.jsx)(material_1.ClickAwayListener, { onClickAway: (e) => {
+        }, children: ({ TransitionProps }) => ((0, jsx_runtime_1.jsx)(material_1.ClickAwayListener, { onClickAway: (e) => {
                 e.preventDefault();
                 e.stopPropagation();
                 onClose === null || onClose === void 0 ? void 0 : onClose();
-            }, children: (0, jsx_runtime_1.jsxs)(material_1.Stack, { sx: {
-                    height: '100%',
-                    boxShadow: 1,
-                    position: 'relative',
-                    background: 'white',
-                    borderRadius: 1,
-                }, children: [(0, jsx_runtime_1.jsxs)(material_1.Stack, { direction: "row", alignItems: "center", justifyContent: "space-between", borderBottom: 1, borderColor: "divider", p: 2, gap: 2, children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "h6", noWrap: true, children: title }), (0, jsx_runtime_1.jsx)(material_1.Button, { sx: { minWidth: 28, minHeight: 28, p: 0 }, onClick: onClose, children: (0, jsx_runtime_1.jsx)(react_1.Icon, { icon: "tabler:x", fontSize: 24, color: "rgba(75, 85, 99, 1)" }) })] }), children] }) }) }));
+            }, children: (0, jsx_runtime_1.jsx)(material_1.Grow, Object.assign({}, TransitionProps, { style: { transformOrigin: 'right bottom' }, timeout: 350, children: (0, jsx_runtime_1.jsxs)(material_1.Stack, { sx: {
+                        height: '100%',
+                        boxShadow: 1,
+                        position: 'relative',
+                        background: 'white',
+                        borderRadius: 1,
+                    }, children: [(0, jsx_runtime_1.jsxs)(material_1.Stack, { direction: "row", alignItems: "center", justifyContent: "space-between", borderBottom: 1, borderColor: "divider", p: 2, gap: 2, children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "h6", noWrap: true, children: title }), (0, jsx_runtime_1.jsx)(material_1.Button, { sx: { minWidth: 28, minHeight: 28, p: 0 }, onClick: onClose, children: (0, jsx_runtime_1.jsx)(react_1.Icon, { icon: "tabler:x", fontSize: 24, color: "rgba(75, 85, 99, 1)" }) })] }), children] }) })) })) }));
 }
 function ChatBotDialog({ title, open, children, onClose, }) {
     return ((0, jsx_runtime_1.jsxs)(material_1.Dialog, { open: open, onClose: onClose, fullScreen: true, children: [(0, jsx_runtime_1.jsx)(material_1.DialogTitle, { sx: { pl: 0 }, children: (0, jsx_runtime_1.jsxs)(material_1.Stack, { direction: "row", alignItems: "center", gap: 2, children: [(0, jsx_runtime_1.jsx)(material_1.IconButton, { size: "small", onClick: onClose, children: (0, jsx_runtime_1.jsx)(icons_material_1.ArrowBackIosNewRounded, { fontSize: "inherit" }) }), (0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "h6", noWrap: true, children: title })] }) }), (0, jsx_runtime_1.jsx)(material_1.DialogContent, { sx: { p: 0 }, dividers: true, children: children })] }));

package/lib/cjs/builtin/async/ai-runtime/runtime-components/ChatOutput/MessageMetadataRenderer.js

@@ -11,11 +11,14 @@ const react_1 = require("react");
 const ReferenceLinks_1 = __importDefault(require("./ReferenceLinks"));
 function MessageMetadataRenderer({ object }) {
     const referenceLinks = object[types_1.RuntimeOutputVariable.referenceLinks];
-    const images = (0, react_1.useMemo)(() => {
-        const list = object[types_1.RuntimeOutputVariable.images];
-        const images = (Array.isArray(list) ? list.map((i) => ({ src: i.url })) : []).filter((i) => typeof i.src === 'string');
-        return images.length ? images : undefined;
+    // 方便后续添加 metadata
+    const formattedObject = (0, react_1.useMemo)(() => {
+        const imagesList = object[types_1.RuntimeOutputVariable.images];
+        const images = (Array.isArray(imagesList) ? imagesList.map((i) => ({ src: i.url })) : []).filter((i) => typeof i.src === 'string');
+        return {
+            images: (images === null || images === void 0 ? void 0 : images.length) ? images : undefined,
+        };
     }, [object]);
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [Array.isArray(referenceLinks) && referenceLinks.length ? (0, jsx_runtime_1.jsx)(ReferenceLinks_1.default, { links: referenceLinks }) : undefined, images && ((0, jsx_runtime_1.jsx)(material_1.Stack, { gap: 1, children: (0, jsx_runtime_1.jsx)(image_preview_1.default, { dataSource: images, itemWidth: 100 }) }))] }));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [Array.isArray(referenceLinks) && referenceLinks.length ? (0, jsx_runtime_1.jsx)(ReferenceLinks_1.default, { links: referenceLinks }) : undefined, (formattedObject === null || formattedObject === void 0 ? void 0 : formattedObject.images) && ((0, jsx_runtime_1.jsx)(material_1.Stack, { gap: 1, children: (0, jsx_runtime_1.jsx)(image_preview_1.default, { dataSource: formattedObject.images, itemWidth: 100 }) }))] }));
 }
 exports.default = MessageMetadataRenderer;

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

@@ -0,0 +1,152 @@
+"use strict";
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const css_1 = require("@emotion/css");
+const material_1 = require("@mui/material");
+const isEmpty_1 = __importDefault(require("lodash/isEmpty"));
+const omit_1 = __importDefault(require("lodash/omit"));
+const react_1 = require("react");
+const react_hook_form_1 = require("react-hook-form");
+const locale_1 = require("../../../../locale");
+const AgentInputField_1 = __importDefault(require("../../components/AgentInputField"));
+const LoadingButton_1 = __importDefault(require("../../components/LoadingButton"));
+const CurrentAgent_1 = require("../../contexts/CurrentAgent");
+const runtime_1 = require("../../state/runtime");
+const session_1 = require("../../state/session");
+const agent_inputs_1 = require("../../utils/agent-inputs");
+function AutoForm({ submitText, inlineLabel, autoFillLastForm = true, submitInQuestionField, chatMode, }) {
+    const { t } = (0, locale_1.useLocaleContext)();
+    const { aid, agent } = (0, CurrentAgent_1.useCurrentAgent)();
+    const { execute } = (0, runtime_1.useRuntimeState)();
+    const running = (0, session_1.useSessionState)()((s) => s.running);
+    const parameters = (0, react_1.useMemo)(() => {
+        var _a;
+        return (_a = agent.parameters) === null || _a === void 0 ? void 0 : _a.filter(agent_inputs_1.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 = (0, react_hook_form_1.useForm)({ defaultValues: defaultForm });
+    (0, react_1.useEffect)(() => {
+        if (autoFillLastForm && !form.formState.isSubmitted && !form.formState.isSubmitting) {
+            form.reset(chatMode ? (0, omit_1.default)(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 ((0, jsx_runtime_1.jsx)(material_1.ThemeProvider, { theme: theme, children: (0, jsx_runtime_1.jsxs)(Form, { component: "form", className: (0, css_1.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 ((0, jsx_runtime_1.jsx)(material_1.Box, { children: (0, jsx_runtime_1.jsx)(react_hook_form_1.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 ((0, jsx_runtime_1.jsxs)(material_1.Stack, { className: "form-item", children: [parameter.label && (0, jsx_runtime_1.jsx)(material_1.FormLabel, { children: parameter.label }), (0, jsx_runtime_1.jsx)(AgentInputField_1.default, { 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: ((0, jsx_runtime_1.jsx)(material_1.InputAdornment, { position: "end", sx: { py: 3, mr: -0.75, alignSelf: 'flex-end' }, children: (0, jsx_runtime_1.jsx)(LoadingButton_1.default, { 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'))) && ((0, jsx_runtime_1.jsx)(LoadingButton_1.default, { type: "submit", variant: "contained", loading: running, sx: { height: 40 }, children: submitText || t('generate') }))] }) }));
+}
+exports.default = AutoForm;
+function useInitialFormValues() {
+    const { agent } = (0, CurrentAgent_1.useCurrentAgent)();
+    const lastMessage = (0, session_1.useSessionState)()((s) => { var _a; return (_a = s.messages) === null || _a === void 0 ? void 0 : _a.at(-1); });
+    const [lastInputs, setLastInputs] = (0, react_1.useState)();
+    (0, react_1.useEffect)(() => {
+        if (!lastInputs) {
+            const lastParameters = lastMessage === null || lastMessage === void 0 ? void 0 : lastMessage.parameters;
+            if (!(0, isEmpty_1.default)(lastParameters))
+                setLastInputs(lastParameters);
+        }
+    }, [lastMessage]);
+    return (0, react_1.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 = (0, material_1.useTheme)();
+    return (0, react_1.useMemo)(() => {
+        const themeOptions = {
+            shape: {
+                borderRadius: 8,
+            },
+            components: {
+                MuiTextField: {
+                    styleOverrides: {
+                        root: ({ theme }) => theme.unstable_sx({
+                            [`.${material_1.outlinedInputClasses.root}`]: {
+                                [`.${material_1.outlinedInputClasses.notchedOutline}`]: {
+                                    borderWidth: 2,
+                                    borderColor: 'primary.light',
+                                },
+                                ':hover': {
+                                    [`.${material_1.outlinedInputClasses.notchedOutline}`]: {
+                                        borderColor: 'primary.main',
+                                    },
+                                },
+                            },
+                        }),
+                    },
+                },
+            },
+        };
+        return (0, material_1.createTheme)(theme, themeOptions);
+    }, [theme]);
+}
+const Form = (0, material_1.styled)(material_1.Stack)(({ theme }) => theme.unstable_sx({
+    gap: 2,
+    '.form-item': {
+        gap: 0.5,
+        [`.${material_1.formLabelClasses.root}`]: {
+            fontWeight: 500,
+            color: 'text.primary',
+        },
+    },
+    '&.label-position-start': {
+        '.form-item': {
+            display: 'flex',
+            flexDirection: 'row',
+            alignItems: 'center',
+            gap: 1,
+        },
+    },
+}));

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

@@ -0,0 +1,79 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("@iconify/react");
+const material_1 = require("@mui/material");
+const react_2 = require("react");
+const CustomComponentRenderer_1 = __importDefault(require("../../../../../components/CustomComponentRenderer"));
+const MarkdownRenderer_1 = __importDefault(require("../../components/MarkdownRenderer"));
+const ShareActions_1 = __importDefault(require("../../components/ShareActions"));
+const CurrentMessage_1 = require("../../contexts/CurrentMessage");
+const MessageErrorView_1 = __importDefault(require("../ChatOutput/MessageErrorView"));
+const MessageMetadataRenderer_1 = __importDefault(require("../ChatOutput/MessageMetadataRenderer"));
+const codeField = 'code';
+function V0Output() {
+    var _a, _b;
+    const { message } = (0, CurrentMessage_1.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 ((0, jsx_runtime_1.jsxs)(material_1.Stack, { gap: 2, sx: {
+            py: 2,
+        }, children: [error && (0, jsx_runtime_1.jsx)(MessageErrorView_1.default, { error: error }), isMessageLoading && ((0, jsx_runtime_1.jsx)(material_1.Stack, { sx: {
+                    flex: 1,
+                }, children: (0, jsx_runtime_1.jsx)(material_1.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 ((0, jsx_runtime_1.jsx)(material_1.Box, { flex: 1, sx: {
+                        display: 'flex',
+                        justifyContent: 'center',
+                        alignItems: 'center',
+                    }, children: (0, jsx_runtime_1.jsx)(CodePreview, { code: code }) }));
+            }), objects === null || objects === void 0 ? void 0 : objects.map((item) => (0, jsx_runtime_1.jsx)(MessageMetadataRenderer_1.default, { object: item.data })), !isMessageLoading && ((_b = message.result) === null || _b === void 0 ? void 0 : _b.content) && ((0, jsx_runtime_1.jsx)(ShareActions_1.default, { direction: "row", justifyContent: "flex-end", sx: { mt: 2 } }))] }));
+}
+exports.default = V0Output;
+function CodePreview({ code }) {
+    const [showCode, setShowCode] = (0, react_2.useState)(false);
+    if (!code)
+        return null;
+    return ((0, jsx_runtime_1.jsxs)(material_1.Stack, { sx: {
+            flex: 1,
+        }, children: [(0, jsx_runtime_1.jsx)(material_1.Box, { sx: {
+                    display: 'flex',
+                    justifyContent: 'flex-end',
+                }, children: (0, jsx_runtime_1.jsx)(material_1.IconButton, { onClick: () => setShowCode((prev) => !prev), sx: {
+                        color: 'textColor',
+                    }, children: (0, jsx_runtime_1.jsx)(react_1.Icon, { icon: showCode ? 'tabler:layout-sidebar' : 'tabler:code' }) }) }), (0, jsx_runtime_1.jsx)(material_1.Stack, { gap: 2, sx: {
+                    display: 'flex',
+                    flexDirection: 'row',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                }, children: (0, jsx_runtime_1.jsx)(material_1.Box, { sx: {
+                        display: 'flex',
+                        justifyContent: 'center',
+                        alignItems: 'center',
+                    }, children: (0, jsx_runtime_1.jsx)(CustomComponentRenderer_1.default, { componentId: "mock-dev-component", dev: {
+                            components: {
+                                'mock-dev-component': {
+                                    data: {
+                                        id: 'mock-dev-component',
+                                        createdAt: '',
+                                        updatedAt: '',
+                                        renderer: {
+                                            type: 'react-component',
+                                            script: code,
+                                        },
+                                    },
+                                },
+                            },
+                        } }) }) }), (0, jsx_runtime_1.jsx)(material_1.Drawer, { anchor: "right", open: showCode, onClose: () => setShowCode(false), children: (0, jsx_runtime_1.jsx)(material_1.Box, { sx: {
+                        p: 2,
+                        maxWidth: '40vw',
+                    }, children: (0, jsx_runtime_1.jsx)(MarkdownRenderer_1.default, { children: `\`\`\`typescript\n${code}\n\`\`\`` }) }) })] }));
+}

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

@@ -0,0 +1,147 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const material_1 = require("@mui/material");
+const dayjs_1 = __importDefault(require("dayjs"));
+// import { useRuntimeState } from '@blocklet/pages-kit/builtin/async/ai-runtime';
+// import { Icon } from 'iconify/react';
+const react_1 = require("react");
+const CustomComponentRenderer_1 = __importDefault(require("../../../../../components/CustomComponentRenderer"));
+const CurrentAgent_1 = __importDefault(require("../../contexts/CurrentAgent"));
+const CurrentMessage_1 = __importDefault(require("../../contexts/CurrentMessage"));
+const use_appearances_1 = __importDefault(require("../../hooks/use-appearances"));
+const runtime_1 = require("../../state/runtime");
+const session_1 = require("../../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 = (0, material_1.useTheme)();
+    const theme = (0, react_1.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 (0, material_1.createTheme)(inheritedTheme, {
+            palette: { primary, textColor },
+            shape: {
+                borderRadius: 8,
+            },
+        });
+    }, [inheritedTheme, primaryColor, textColor]);
+    const [sessionId] = (0, react_1.useState)('1');
+    const [message, setMessage] = (0, react_1.useState)();
+    const { childAgentId } = (0, runtime_1.useRuntimeState)();
+    const messagesList = (0, session_1.useSessionState)({
+        autoLoad: true,
+    })((s) => s.messages);
+    (0, react_1.useEffect)(() => {
+        if (messagesList === null || messagesList === void 0 ? void 0 : messagesList.length) {
+            const lastMessage = messagesList[messagesList.length - 1];
+            // @ts-ignore
+            setMessage(lastMessage);
+        }
+    }, [messagesList]);
+    const SliderRender = (0, react_1.useCallback)(({ message }) => {
+        // if is detail, return output
+        if (sessionId && (messagesList === null || messagesList === void 0 ? void 0 : messagesList.length)) {
+            return ((0, jsx_runtime_1.jsx)(material_1.Box, { sx: {
+                    width: 200,
+                    p: 2,
+                    position: 'sticky',
+                    top: 64,
+                    height: 'calc(100vh - 65px)',
+                    overflowY: 'auto',
+                }, children: (0, jsx_runtime_1.jsx)(material_1.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 ((0, jsx_runtime_1.jsxs)(material_1.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: [(0, jsx_runtime_1.jsx)(material_1.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 }), (0, jsx_runtime_1.jsx)(material_1.Box, { children: (0, jsx_runtime_1.jsxs)(material_1.Typography, { sx: {
+                                            textAlign: 'right',
+                                            fontWeight: 600,
+                                            fontSize: 12,
+                                            mt: 0.5,
+                                            display: 'flex',
+                                            justifyContent: 'space-between',
+                                        }, children: [(0, jsx_runtime_1.jsx)("span", { style: {
+                                                    color: 'rgba(255, 255, 255, 0.7)',
+                                                    fontWeight: 400,
+                                                }, children: (0, dayjs_1.default)(_.updatedAt).format('MM-DD HH:mm') }), (0, jsx_runtime_1.jsx)("span", { children: `V${i}` })] }) })] }, _.assistantId));
+                    }) }) }, "slider"));
+        }
+        return null;
+    }, [JSON.stringify(messagesList)]);
+    const ContentRender = (0, react_1.useCallback)(() => {
+        // if is detail, return output
+        if (sessionId) {
+            return ((0, jsx_runtime_1.jsx)(material_1.Box, { flex: 1, children: (0, jsx_runtime_1.jsx)(AgentOutputRender, { message: message }) }));
+        }
+        return ((0, jsx_runtime_1.jsx)(material_1.Box, { flex: 1, children: (0, jsx_runtime_1.jsx)(material_1.Grid, { container: true, spacing: 2, justifyContent: "center", children: [...Array(3)].map((_, i) => ((0, jsx_runtime_1.jsx)(material_1.Grid, { item: true, xs: 12, sm: 6, md: 4, children: (0, jsx_runtime_1.jsx)(material_1.Card, { sx: { backgroundColor: 'rgba(0, 0, 0, 0.5)', color: '#fff' }, children: (0, jsx_runtime_1.jsxs)(material_1.CardContent, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "body2", sx: { mb: 1 }, children: `Code Snippet ${i + 1}` }), (0, jsx_runtime_1.jsx)(material_1.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 ((0, jsx_runtime_1.jsx)(material_1.ThemeProvider, { theme: theme, children: (0, jsx_runtime_1.jsx)(CurrentAgent_1.default, { agentId: childAgentId, children: (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: {
+                    display: 'flex',
+                    // background: 'linear-gradient(135deg, #1a237e 0%, #3c3f41 100%)',
+                }, children: [(0, jsx_runtime_1.jsx)(SliderRender, { message: message }), (0, jsx_runtime_1.jsxs)(material_1.Container, { sx: {
+                            minHeight: 'calc(100vh - 64px - 1px)',
+                            textAlign: 'center',
+                            py: 2,
+                            pt: 10,
+                            gap: 2,
+                            display: 'flex',
+                            flexDirection: 'column',
+                        }, children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "h2", color: "textColor", sx: { fontWeight: 'bold' }, children: "AIGNE V0" }), (0, jsx_runtime_1.jsx)(material_1.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' }), (0, jsx_runtime_1.jsx)(ContentRender, {}), (0, jsx_runtime_1.jsx)(material_1.Box, { sx: {
+                                    position: 'sticky',
+                                    bottom: 0,
+                                    backgroundColor: 'white',
+                                    pt: 4,
+                                }, children: (0, jsx_runtime_1.jsx)(AgentInputRender, {}) })] })] }) }) }));
+}
+exports.default = V0Page;
+function AgentInputRender(_a) {
+    var props = __rest(_a, []);
+    const { appearanceInput } = (0, use_appearances_1.default)();
+    if (!(appearanceInput === null || appearanceInput === void 0 ? void 0 : appearanceInput.componentId))
+        return null;
+    return ((0, jsx_runtime_1.jsx)(react_1.Suspense, { children: (0, jsx_runtime_1.jsx)(CustomComponentRenderer_1.default, Object.assign({ componentId: appearanceInput.componentId, properties: appearanceInput.componentProps }, props)) }));
+}
+function AgentOutputRender(_a) {
+    var { message } = _a, props = __rest(_a, ["message"]);
+    const { appearanceOutput } = (0, use_appearances_1.default)();
+    if (!(appearanceOutput === null || appearanceOutput === void 0 ? void 0 : appearanceOutput.componentId) || !message)
+        return null;
+    return ((0, jsx_runtime_1.jsx)(CurrentAgent_1.default, { agentId: message.assistantId, children: (0, jsx_runtime_1.jsx)(CurrentMessage_1.default, { message: message, children: (0, jsx_runtime_1.jsx)(react_1.Suspense, { children: (0, jsx_runtime_1.jsx)(CustomComponentRenderer_1.default, Object.assign({ componentId: appearanceOutput.componentId, properties: appearanceOutput.componentProps }, props)) }) }) }));
+}

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

@@ -0,0 +1,12 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.V0Input = exports.V0Output = exports.V0Page = void 0;
+var Page_1 = require("./Page");
+Object.defineProperty(exports, "V0Page", { enumerable: true, get: function () { return __importDefault(Page_1).default; } });
+var Output_1 = require("./Output");
+Object.defineProperty(exports, "V0Output", { enumerable: true, get: function () { return __importDefault(Output_1).default; } });
+var Input_1 = require("./Input");
+Object.defineProperty(exports, "V0Input", { enumerable: true, get: function () { return __importDefault(Input_1).default; } });

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

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.createTheme = exports.alpha = exports.Zoom = exports.Typography = exports.Tooltip = exports.ThemeProvider = exports.TextField = exports.Switch = exports.Stack = exports.Slide = exports.Popper = exports.Paper = exports.MenuList = exports.MenuItem = exports.Menu = exports.ListSubheader = exports.ListItemSecondaryAction = exports.ListItemIcon = exports.ListItemButton = exports.ListItemAvatar = exports.ListItem = exports.List = exports.Link = exports.LinearProgress = exports.Grow = exports.Grid = exports.GlobalStyles = exports.Fade = exports.Divider = exports.DialogTitle = exports.DialogContent = exports.DialogActions = exports.Dialog = exports.Container = exports.Collapse = exports.ClickAwayListener = exports.CircularProgress = exports.CardMedia = exports.CardHeader = exports.CardContent = exports.CardActions = exports.CardActionArea = exports.Card = exports.ButtonGroup = exports.Button = exports.Box = exports.Avatar = exports.Autocomplete = exports.AlertTitle = exports.Alert = void 0;
-exports.useTheme = exports.useMediaQuery = exports.styled = void 0;
+exports.alpha = exports.Zoom = exports.Typography = exports.Tooltip = exports.ThemeProvider = exports.TextField = exports.Switch = exports.Stack = exports.Slide = exports.Popper = exports.Paper = exports.MenuList = exports.MenuItem = exports.Menu = exports.ListSubheader = exports.ListItemSecondaryAction = exports.ListItemIcon = exports.ListItemButton = exports.ListItemAvatar = exports.ListItem = exports.List = exports.Link = exports.LinearProgress = exports.Grow = exports.Grid = exports.GlobalStyles = exports.Fade = exports.Divider = exports.DialogTitle = exports.DialogContent = exports.DialogActions = exports.Dialog = exports.Container = exports.Collapse = exports.ClickAwayListener = exports.CircularProgress = exports.CardMedia = exports.CardHeader = exports.CardContent = exports.CardActions = exports.CardActionArea = exports.Card = exports.ButtonGroup = exports.IconButton = exports.Button = exports.Box = exports.Avatar = exports.Autocomplete = exports.AlertTitle = exports.Alert = void 0;
+exports.useTheme = exports.useMediaQuery = exports.styled = exports.createTheme = void 0;
 var material_1 = require("@mui/material");
 Object.defineProperty(exports, "Alert", { enumerable: true, get: function () { return material_1.Alert; } });
 Object.defineProperty(exports, "AlertTitle", { enumerable: true, get: function () { return material_1.AlertTitle; } });
@@ -9,6 +9,7 @@ Object.defineProperty(exports, "Autocomplete", { enumerable: true, get: function
 Object.defineProperty(exports, "Avatar", { enumerable: true, get: function () { return material_1.Avatar; } });
 Object.defineProperty(exports, "Box", { enumerable: true, get: function () { return material_1.Box; } });
 Object.defineProperty(exports, "Button", { enumerable: true, get: function () { return material_1.Button; } });
+Object.defineProperty(exports, "IconButton", { enumerable: true, get: function () { return material_1.IconButton; } });
 Object.defineProperty(exports, "ButtonGroup", { enumerable: true, get: function () { return material_1.ButtonGroup; } });
 Object.defineProperty(exports, "Card", { enumerable: true, get: function () { return material_1.Card; } });
 Object.defineProperty(exports, "CardActionArea", { enumerable: true, get: function () { return material_1.CardActionArea; } });