@blocklet/pages-kit 0.2.432 → 0.2.434

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

@@ -1,252 +0,0 @@
-"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 });
-exports.default = V0Output;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const Toast_1 = __importDefault(require("@arcblock/ux/lib/Toast"));
-const react_1 = require("@iconify/react");
-const material_1 = require("@mui/material");
-const groupBy_1 = __importDefault(require("lodash/groupBy"));
-const react_2 = require("react");
-const CustomComponentRenderer_1 = require("../../../../../components/CustomComponentRenderer");
-const locale_1 = require("../../../../locale");
-const MarkdownRenderer_1 = __importDefault(require("../../components/MarkdownRenderer"));
-const ShareActions_1 = __importDefault(require("../../components/ShareActions"));
-const CurrentMessage_1 = require("../../contexts/CurrentMessage");
-const MessageMetadataRenderer_1 = __importDefault(require("../ChatOutput/MessageMetadataRenderer"));
-const CodePreview_1 = require("./components/CodePreview");
-const Loading_1 = __importDefault(require("./components/Loading"));
-const PropertiesSetting_1 = __importDefault(require("./components/PropertiesSetting"));
-const UserQuestion_1 = __importDefault(require("./components/UserQuestion"));
-const V0Runtime_1 = require("./contexts/V0Runtime");
-const DEFAULT_DESKTOP_SX = {
-    width: '100%',
-    height: '100%',
-};
-function V0Output() {
-    var _a, _b;
-    const { message } = (0, CurrentMessage_1.useCurrentMessage)();
-    const propertiesSettingRef = (0, react_2.useRef)(null);
-    const { propertiesValueMap, setPropertiesValueMap, isMobile } = (0, V0Runtime_1.useV0RuntimeContext)();
-    const [code, setCode] = (0, react_2.useState)('');
-    const { t, locale } = (0, locale_1.useLocaleContext)();
-    const [codePreviewExtraProps, setCodePreviewExtraProps] = (0, react_2.useState)({
-        sx: DEFAULT_DESKTOP_SX,
-        key: 'Desktop',
-    });
-    const objects = (_a = message.outputs) === null || _a === void 0 ? void 0 : _a.objects;
-    const { id: taskId, inputs } = message;
-    const isMessageLoading = (message.loading || !message.outputs) && !message.error;
-    const disabled = isMessageLoading || !(objects === null || objects === void 0 ? void 0 : objects.length) || message.error;
-    const responsiveSx = {
-        backgroundColor: 'white',
-        borderColor: 'rgba(0, 0, 0, 0.1) !important',
-        // rewrite disabled style
-        '&.frame-button.Mui-disabled': {
-            backgroundColor: 'primary.main',
-            color: 'white',
-        },
-    };
-    const tooltipOptions = [
-        !isMobile && {
-            key: 'Desktop',
-            icon: 'tabler:device-desktop',
-            props: {
-                className: 'frame-button',
-                disabled: (codePreviewExtraProps === null || codePreviewExtraProps === void 0 ? void 0 : codePreviewExtraProps.key) === 'Desktop',
-                sx: Object.assign({}, responsiveSx),
-                onClick: () => setCodePreviewExtraProps({
-                    sx: DEFAULT_DESKTOP_SX,
-                    key: 'Desktop',
-                }),
-            },
-            group: 'responsive',
-        },
-        !isMobile && {
-            key: 'Tablet',
-            icon: 'tabler:device-tablet',
-            props: {
-                className: 'frame-button',
-                disabled: (codePreviewExtraProps === null || codePreviewExtraProps === void 0 ? void 0 : codePreviewExtraProps.key) === 'Tablet',
-                sx: Object.assign({}, responsiveSx),
-                onClick: () => setCodePreviewExtraProps({
-                    sx: {
-                        width: '768px',
-                        height: '1024px',
-                    },
-                    key: 'Tablet',
-                }),
-            },
-            group: 'responsive',
-        },
-        !isMobile && {
-            key: 'Mobile',
-            icon: 'tabler:device-mobile',
-            props: {
-                className: 'frame-button',
-                disabled: (codePreviewExtraProps === null || codePreviewExtraProps === void 0 ? void 0 : codePreviewExtraProps.key) === 'Mobile',
-                sx: Object.assign({}, responsiveSx),
-                onClick: () => setCodePreviewExtraProps({
-                    sx: {
-                        width: '375px',
-                        height: '667px',
-                    },
-                    key: 'Mobile',
-                }),
-            },
-            group: 'responsive',
-        },
-        // setting
-        {
-            key: 'Setting',
-            icon: 'tabler:settings-2',
-            props: {
-                disabled,
-                sx: Object.assign({}, responsiveSx),
-                onClick: (e) => __awaiter(this, void 0, void 0, function* () {
-                    var _a;
-                    const { taskid: taskId } = ((_a = e === null || e === void 0 ? void 0 : e.currentTarget) === null || _a === void 0 ? void 0 : _a.dataset) || {};
-                    const currentCode = (0, CodePreview_1.getCurrentCodeByTaskId)(message);
-                    try {
-                        yield (0, CustomComponentRenderer_1.transpileAndLoadScript)(currentCode).then((m) => {
-                            var _a, _b, _c;
-                            if (typeof (m === null || m === void 0 ? void 0 : m.PROPERTIES_SCHEMA) === 'object' && (m === null || m === void 0 ? void 0 : m.PROPERTIES_SCHEMA.length)) {
-                                const schemaDefaultValues = Object.fromEntries(m.PROPERTIES_SCHEMA.map((item) => {
-                                    const { key, locales } = item;
-                                    const currentLocale = (locales === null || locales === void 0 ? void 0 : locales[locale]) || (locales === null || locales === void 0 ? void 0 : locales.en);
-                                    return [key, currentLocale === null || currentLocale === void 0 ? void 0 : currentLocale.defaultValue];
-                                }));
-                                const defaultValues = Object.assign(Object.assign({}, schemaDefaultValues), (((_a = propertiesValueMap[taskId]) === null || _a === void 0 ? void 0 : _a[locale]) || ((_b = propertiesValueMap[taskId]) === null || _b === void 0 ? void 0 : _b.en) || {}));
-                                // format default values
-                                m.PROPERTIES_SCHEMA.forEach((item) => {
-                                    const { key, type } = item;
-                                    if (type === 'json' && typeof defaultValues[key] === 'object') {
-                                        try {
-                                            defaultValues[key] = JSON.stringify(defaultValues[key], null, 2);
-                                        }
-                                        catch (error) {
-                                            // ignore error
-                                        }
-                                    }
-                                });
-                                // @ts-ignore
-                                (_c = propertiesSettingRef.current) === null || _c === void 0 ? void 0 : _c.open({
-                                    schema: m.PROPERTIES_SCHEMA,
-                                    onSubmit: (values) => {
-                                        const realValues = {};
-                                        m.PROPERTIES_SCHEMA.forEach((item) => {
-                                            const { key, type } = item;
-                                            if (type === 'json' && typeof values[key] === 'string') {
-                                                try {
-                                                    realValues[key] = JSON.parse(values[key]);
-                                                    return;
-                                                }
-                                                catch (error) {
-                                                    // ignore error
-                                                }
-                                            }
-                                            realValues[key] = values[key];
-                                        });
-                                        setPropertiesValueMap(Object.assign(Object.assign({}, propertiesValueMap), { [taskId]: Object.assign(Object.assign({}, propertiesValueMap[taskId]), { [locale]: realValues }) }));
-                                    },
-                                    defaultValues,
-                                });
-                                return;
-                            }
-                            throw new Error('No properties schema found');
-                        });
-                    }
-                    catch (error) {
-                        // ignore error
-                        // send cannot set properties message
-                        Toast_1.default.info(t('v0.cannotSetPropertiesTip'));
-                    }
-                }),
-            },
-            group: 'setting',
-        },
-        {
-            key: 'CodePreview',
-            icon: code ? 'tabler:layout-board' : 'tabler:code',
-            buttonText: !isMobile && (code ? 'Canvas' : 'Code'),
-            props: {
-                disabled,
-                variant: 'contained',
-                color: 'primary',
-                onClick: () => {
-                    setCode((0, CodePreview_1.getCurrentCodeByTaskId)(message));
-                },
-            },
-            group: 'codePreview',
-        },
-    ].filter(Boolean);
-    const onCloseCode = () => setCode('');
-    return ((0, jsx_runtime_1.jsxs)(material_1.Stack, { sx: {
-            p: 2,
-            gap: 2,
-            height: '100%',
-            display: 'flex',
-            justifyContent: 'flex-start',
-            alignItems: 'center',
-            flexDirection: 'column',
-        }, children: [(0, jsx_runtime_1.jsxs)(material_1.Stack, { sx: {
-                    display: 'flex',
-                    justifyContent: 'space-between',
-                    alignItems: 'center',
-                    width: '100%',
-                    gap: 1.5,
-                    flexDirection: 'row',
-                    '.question': {
-                        backgroundColor: 'white',
-                        border: 1,
-                        borderColor: 'rgba(0, 0, 0, 0.1) !important',
-                    },
-                }, children: [(0, jsx_runtime_1.jsx)(UserQuestion_1.default, { question: inputs === null || inputs === void 0 ? void 0 : inputs.question }), (0, jsx_runtime_1.jsx)(material_1.Box, { sx: {
-                            display: 'flex',
-                            alignItems: 'center',
-                            gap: 1,
-                        }, children: Object.entries((0, groupBy_1.default)(tooltipOptions, 'group')).map(([group, options]) => {
-                            return ((0, jsx_runtime_1.jsx)(material_1.ButtonGroup, { variant: "text", color: "inherit", size: "small", sx: {
-                                    borderColor: 'rgba(0, 0, 0, 0.1) !important',
-                                    border: 1,
-                                }, children: options.map((option) => {
-                                    const { icon, key, props, buttonText } = option;
-                                    return ((0, jsx_runtime_1.jsxs)(material_1.Button, Object.assign({ "data-taskId": taskId }, props, { children: [(0, jsx_runtime_1.jsx)(react_1.Icon, { icon: icon, fontSize: 22 }), buttonText && (0, jsx_runtime_1.jsx)(material_1.Box, { sx: { ml: 1 }, children: buttonText })] }), key));
-                                }) }, group));
-                        }) })] }), (0, jsx_runtime_1.jsx)(material_1.Box, { sx: Object.assign({ display: 'flex', justifyContent: 'center', overflow: 'hidden', backgroundColor: 'white', borderRadius: 1 }, codePreviewExtraProps === null || codePreviewExtraProps === void 0 ? void 0 : codePreviewExtraProps.sx), children: (0, jsx_runtime_1.jsx)(CodePreview_1.CodeRenderByMessageMemo, { message: message, zoom: 1, sx: {
-                        overflowX: 'auto',
-                        overflowY: 'auto',
-                        scrollbarWidth: 'thin',
-                        scrollbarColor: 'grey transparent',
-                    }, propertiesValueMap: propertiesValueMap }) }), objects === null || objects === void 0 ? void 0 : objects.map((item, index) => (0, jsx_runtime_1.jsx)(MessageMetadataRenderer_1.default, { object: item }, index)), !isMessageLoading && ((_b = message.outputs) === null || _b === void 0 ? void 0 : _b.content) && ((0, jsx_runtime_1.jsx)(ShareActions_1.default, { direction: "row", justifyContent: "flex-end", sx: { mt: 2 } })), (0, jsx_runtime_1.jsxs)(react_2.Suspense, { fallback: (0, jsx_runtime_1.jsx)(Loading_1.default, {}), children: [(0, jsx_runtime_1.jsx)(material_1.Drawer, { anchor: isMobile ? 'bottom' : 'right', open: !!code, onClose: onCloseCode, children: (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: Object.assign({ p: 2, pt: 0 }, (isMobile ? { maxHeight: '70vh' } : { maxWidth: '70vw' })), children: [(0, jsx_runtime_1.jsxs)(material_1.Box, { sx: {
-                                        py: 2,
-                                        position: 'sticky',
-                                        top: 0,
-                                        left: 0,
-                                        backgroundColor: 'white',
-                                        zIndex: 9999,
-                                        display: 'flex',
-                                        justifyContent: 'space-between',
-                                        alignItems: 'center',
-                                    }, children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "h6", sx: {
-                                                lineHeight: 1,
-                                            }, children: t('v0.codePreview') }), (0, jsx_runtime_1.jsx)(material_1.Button, { onClick: onCloseCode, 
-                                            //   variant="text"
-                                            color: "inherit", disableElevation: true, sx: {
-                                                minWidth: 32,
-                                                minHeight: 32,
-                                                p: 0,
-                                                fontSize: 22,
-                                            }, children: (0, jsx_runtime_1.jsx)(react_1.Icon, { icon: "tabler:x" }) })] }), (0, jsx_runtime_1.jsx)(material_1.Alert, { severity: "info", sx: { mb: 2 }, children: t('v0.codePreviewTip') }), (0, jsx_runtime_1.jsx)(MarkdownRenderer_1.default, { children: `\`\`\`typescript\n${code}\n\`\`\`` })] }) }), (0, jsx_runtime_1.jsx)(PropertiesSetting_1.default, { ref: propertiesSettingRef })] })] }));
-}

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

@@ -1,300 +0,0 @@
-"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 });
-exports.default = Page;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const Empty_1 = __importDefault(require("@arcblock/ux/lib/Empty"));
-const RelativeTime_1 = __importDefault(require("@arcblock/ux/lib/RelativeTime"));
-const react_1 = require("@iconify/react");
-const lab_1 = require("@mui/lab");
-const material_1 = require("@mui/material");
-const react_2 = require("react");
-const CustomComponentRenderer_1 = __importDefault(require("../../../../../components/CustomComponentRenderer"));
-const locale_1 = require("../../../../locale");
-const AgentErrorBoundary_1 = require("../../components/AgentErrorBoundary");
-const ActiveAgent_1 = require("../../contexts/ActiveAgent");
-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 map_right_1 = __importDefault(require("../../utils/map-right"));
-const CodePreview_1 = require("./components/CodePreview");
-const ConfirmDialog_1 = __importDefault(require("./components/ConfirmDialog"));
-const Loading_1 = __importDefault(require("./components/Loading"));
-const UserQuestion_1 = __importDefault(require("./components/UserQuestion"));
-const V0Runtime_1 = require("./contexts/V0Runtime");
-const utils_1 = require("./utils");
-const sliderWidth = 200;
-function V0Page({ textColor = '#333', primaryColor = '#333' }) {
-    const inheritedTheme = (0, material_1.useTheme)();
-    const theme = (0, react_2.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, background: { block: '#f6f6f6' } },
-            shape: {
-                borderRadius: 8,
-            },
-        });
-    }, [inheritedTheme, primaryColor, textColor]);
-    (0, session_1.useAutoLoadSessionState)({
-        autoSetCurrentSessionId: false,
-    });
-    const { currentSessionId } = (0, session_1.useSessionState)((s) => s) || {};
-    const { activeAgentId } = (0, ActiveAgent_1.useActiveAgent)();
-    const { isMobile } = (0, V0Runtime_1.useV0RuntimeContext)();
-    return ((0, jsx_runtime_1.jsx)(material_1.ThemeProvider, { theme: theme, children: (0, jsx_runtime_1.jsx)(CurrentAgent_1.default, { agentId: activeAgentId, children: (0, jsx_runtime_1.jsx)(material_1.Box, { flex: 1, children: (0, jsx_runtime_1.jsxs)(material_1.Container, { sx: {
-                        height: 'calc(100vh - 64px - 1px)',
-                        textAlign: 'center',
-                        pt: 3,
-                        gap: 2,
-                        display: 'flex',
-                        flexDirection: 'column',
-                        position: 'relative',
-                        '.code-preview-wrapper': {},
-                    }, children: [(0, jsx_runtime_1.jsx)(material_1.Box, { sx: {
-                                flex: 1,
-                                height: !isMobile && currentSessionId ? 'calc(100% - 48px - 16px - 16px)' : 'unset',
-                            }, children: currentSessionId ? (0, jsx_runtime_1.jsx)(V0DetailRender, {}) : (0, jsx_runtime_1.jsx)(V0ListRender, {}) }), (0, jsx_runtime_1.jsx)(material_1.Box, { sx: {
-                                position: 'sticky',
-                                bottom: 0,
-                                backgroundColor: 'white',
-                                py: 2,
-                                pt: currentSessionId ? 0 : 2,
-                                zIndex: 1100,
-                            }, children: (0, jsx_runtime_1.jsx)(AgentInputRender, {}) })] }) }) }) }));
-}
-function Page() {
-    return ((0, jsx_runtime_1.jsx)(V0Runtime_1.V0RuntimeProvider, { children: (0, jsx_runtime_1.jsx)(V0Page, {}) }));
-}
-function V0ListRender() {
-    var _a, _b;
-    const ConfirmDialogRef = (0, react_2.useRef)();
-    const { sessions: sessionsList, setCurrentSessionId, loadLatestMessagesForAllSessions, sessionMap, deleteSession, loading, } = (0, session_1.useSessionState)((s) => s) || {};
-    const { isMobile } = (0, V0Runtime_1.useV0RuntimeContext)();
-    const { agent } = (0, runtime_1.useRuntimeState)();
-    const { t } = (0, locale_1.useLocaleContext)();
-    (0, react_2.useEffect)(() => {
-        const loadData = () => __awaiter(this, void 0, void 0, function* () {
-            if (sessionsList === null || sessionsList === void 0 ? void 0 : sessionsList.length) {
-                yield loadLatestMessagesForAllSessions();
-            }
-        });
-        loadData();
-    }, [sessionsList === null || sessionsList === void 0 ? void 0 : sessionsList.length]);
-    return ((0, jsx_runtime_1.jsxs)(material_1.Box, { flex: 1, children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "h2", color: "textColor", sx: { fontWeight: 'bold', mt: isMobile ? 3 : 6 }, children: ((_a = agent === null || agent === void 0 ? void 0 : agent.project) === null || _a === void 0 ? void 0 : _a.name) || t('v0.title') }), (0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "h5", color: "textColor", sx: Object.assign(Object.assign({}, (0, utils_1.getLineClamp)(5)), { mt: 2 }), children: ((_b = agent === null || agent === void 0 ? void 0 : agent.project) === null || _b === void 0 ? void 0 : _b.description) || t('v0.description') }), loading ? ((0, jsx_runtime_1.jsx)(Loading_1.default, { sx: {
-                    position: 'relative',
-                    height: '40vh',
-                    width: '100%',
-                } })) : ((0, jsx_runtime_1.jsxs)(material_1.Box, { sx: {
-                    mt: isMobile ? 4 : 8,
-                    display: 'flex',
-                    alignContent: 'center',
-                    justifyContent: 'center',
-                }, children: [(sessionsList === null || sessionsList === void 0 ? void 0 : sessionsList.length) ? ((0, jsx_runtime_1.jsx)(lab_1.Masonry, { columns: { xs: 1, sm: 2, md: 3, lg: 4 }, sequential: true, spacing: 2, children: sessionsList === null || sessionsList === void 0 ? void 0 : sessionsList.map((item) => {
-                            var _a, _b;
-                            const { name, id } = item;
-                            const latestMessage = (_b = (_a = sessionMap === null || sessionMap === void 0 ? void 0 : sessionMap[id]) === null || _a === void 0 ? void 0 : _a.messages) === null || _b === void 0 ? void 0 : _b.at(0);
-                            return ((0, jsx_runtime_1.jsxs)(material_1.Box, { sx: {
-                                    display: 'flex',
-                                    justifyContent: 'center',
-                                    flexDirection: 'column',
-                                    gap: 1,
-                                }, children: [(0, jsx_runtime_1.jsx)(material_1.Box, { sx: {
-                                            border: 2,
-                                            borderRadius: 1,
-                                            borderColor: 'background.block',
-                                            backgroundColor: 'background.block',
-                                            display: 'flex',
-                                            alignItems: 'center',
-                                            justifyContent: 'center',
-                                            cursor: 'pointer',
-                                            transition: 'all 0.3s',
-                                            overflow: 'hidden',
-                                            // minHeight: sliderWidth,
-                                            // maxHeight: '50vh',
-                                            height: 300,
-                                            '&:hover': {
-                                                borderColor: 'primary.main',
-                                            },
-                                        }, onClick: () => {
-                                            setCurrentSessionId(id);
-                                        }, children: (0, jsx_runtime_1.jsx)(CodePreview_1.CodeRenderByMessageMemo, { zoom: 0.5, message: latestMessage, sx: {
-                                                pointerEvents: 'none',
-                                            } }) }), (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: {
-                                            display: 'flex',
-                                            alignItems: 'center',
-                                            justifyContent: 'space-between',
-                                        }, children: [(0, jsx_runtime_1.jsx)(UserQuestion_1.default, { question: name }), (0, jsx_runtime_1.jsx)(material_1.Box, { children: (0, jsx_runtime_1.jsx)(material_1.IconButton, { color: "error", size: "small", onClick: () => {
-                                                        var _a, _b;
-                                                        (_b = (_a = ConfirmDialogRef === null || ConfirmDialogRef === void 0 ? void 0 : ConfirmDialogRef.current) === null || _a === void 0 ? void 0 : _a.open) === null || _b === void 0 ? void 0 : _b.call(_a, {
-                                                            title: t('v0.deleteSessionTitle', { name }),
-                                                            children: (0, jsx_runtime_1.jsx)(material_1.Box, { children: t('v0.deleteSessionTip') }),
-                                                            onConfirm: () => __awaiter(this, void 0, void 0, function* () {
-                                                                yield deleteSession({
-                                                                    sessionId: id,
-                                                                    autoSetCurrentSessionId: false,
-                                                                });
-                                                            }),
-                                                            onConfirmProps: {
-                                                                color: 'error',
-                                                                children: t('delete'),
-                                                            },
-                                                            onCancelProps: {
-                                                                color: 'inherit',
-                                                            },
-                                                        });
-                                                    }, children: (0, jsx_runtime_1.jsx)(react_1.Icon, { icon: "tabler:trash" }) }) })] })] }, id));
-                        }) }, "masonry-list")) : ((0, jsx_runtime_1.jsx)(material_1.Box, { sx: {
-                            mt: 12,
-                        }, children: (0, jsx_runtime_1.jsx)(Empty_1.default, { children: t('v0.noData') }) })), (0, jsx_runtime_1.jsx)(ConfirmDialog_1.default, { ref: ConfirmDialogRef })] }))] }, "list-render"));
-}
-function V0DetailRender() {
-    var _a;
-    const { setCurrentSessionId } = (0, session_1.useSessionState)((s) => s) || {};
-    const { messages: messagesListOriginal, loading } = (0, session_1.useCurrentSessionState)((s) => s) || {};
-    const { currentMessageTaskId, setCurrentMessageTaskId, propertiesValueMap, isMobile } = (0, V0Runtime_1.useV0RuntimeContext)();
-    const [sliderOpenInMobile, setSliderOpenInMobile] = (0, react_2.useState)(!isMobile);
-    const { t } = (0, locale_1.useLocaleContext)();
-    // FIXME: 现在临时把 error 的消息隐藏了，后续需要优化
-    const messagesList = (_a = messagesListOriginal === null || messagesListOriginal === void 0 ? void 0 : messagesListOriginal.filter((message, index) => { var _a, _b; return (!(message === null || message === void 0 ? void 0 : message.error) && ((_b = (_a = message === null || message === void 0 ? void 0 : message.outputs) === null || _a === void 0 ? void 0 : _a.objects) === null || _b === void 0 ? void 0 : _b.length)) || message.id === currentMessageTaskId || index === 0; })) !== null && _a !== void 0 ? _a : [];
-    const currentMessage = messagesList.find((message) => message.id === currentMessageTaskId);
-    (0, react_2.useEffect)(() => {
-        if (messagesList.length) {
-            const latestMessage = messagesList === null || messagesList === void 0 ? void 0 : messagesList.at(0);
-            // no currentMessageTaskId or has new message
-            if (!currentMessageTaskId || (currentMessageTaskId === (latestMessage === null || latestMessage === void 0 ? void 0 : latestMessage.id) && messagesList.length > 1)) {
-                // @ts-ignore
-                setCurrentMessageTaskId(latestMessage.id);
-            }
-        }
-    }, [messagesList, currentMessageTaskId]);
-    const sliderOpen = isMobile ? sliderOpenInMobile : true;
-    const sliderWrapperSx = {
-        height: isMobile ? 'unset' : '100%',
-        backgroundColor: 'background.block',
-        borderRadius: 1,
-        p: 2,
-        position: 'relative',
-    };
-    return ((0, jsx_runtime_1.jsxs)(material_1.Box, { flex: 1, sx: {
-            display: 'flex',
-            gap: 2,
-            height: '100%',
-            flexDirection: isMobile ? 'column' : 'row',
-        }, children: [(0, jsx_runtime_1.jsxs)(material_1.Box, { sx: Object.assign({ width: isMobile ? '100%' : sliderWidth, gap: 2, display: 'flex', flexDirection: 'column' }, (isMobile ? {} : Object.assign({}, sliderWrapperSx))), children: [(0, jsx_runtime_1.jsxs)(material_1.Box, { sx: {
-                            display: 'flex',
-                            justifyContent: 'space-between',
-                            alignItems: 'center',
-                            gap: 2,
-                        }, children: [(0, jsx_runtime_1.jsx)(material_1.Button, { variant: "outlined", size: "small", startIcon: (0, jsx_runtime_1.jsx)(react_1.Icon, { icon: "tabler:chevron-left" }), onClick: () => {
-                                    setCurrentMessageTaskId(undefined);
-                                    setCurrentSessionId('');
-                                }, sx: {
-                                    backgroundColor: 'white',
-                                    width: isMobile ? 'auto' : '100%',
-                                }, children: t('back') }), isMobile ? ((0, jsx_runtime_1.jsx)(material_1.Button, { startIcon: (0, jsx_runtime_1.jsx)(react_1.Icon, { icon: sliderOpenInMobile ? 'tabler:chevron-up' : 'tabler:chevron-down' }), size: "small", onClick: () => setSliderOpenInMobile(!sliderOpenInMobile), children: sliderOpenInMobile ? t('v0.hideSlider') : t('v0.showSlider') })) : null, loading && ((0, jsx_runtime_1.jsx)(Loading_1.default, { sx: Object.assign({ position: 'absolute', zIndex: 99999, top: 0, left: 0, right: 0, bottom: 0, margin: 'auto', background: 'rgba(255, 255, 255, 0.8)', opacity: 0.8, borderRadius: 1, boxShadow: '0 0 10px rgba(0, 0, 0, 0.1)' }, (isMobile
-                                    ? {
-                                        width: '40px',
-                                        height: '40px',
-                                    }
-                                    : {
-                                        width: '80px',
-                                        height: '80px',
-                                    })) }))] }), sliderOpen && ((0, jsx_runtime_1.jsx)(material_1.Stack, { spacing: 2, direction: isMobile ? 'row' : 'column', sx: Object.assign(Object.assign({}, (isMobile
-                            ? Object.assign({ overflowY: 'hidden', overflowX: 'auto' }, sliderWrapperSx) : {
-                            overflowY: 'auto',
-                            overflowX: 'hidden',
-                        })), { 
-                            // scrollbarWidth: 'thin',
-                            // scrollbarColor: 'grey transparent',
-                            '&::-webkit-scrollbar': {
-                                display: 'none',
-                            } }), children: (0, map_right_1.default)(messagesList, (item, i) => {
-                            const { inputs: parameters, id: taskId, updatedAt } = item;
-                            const isCurrent = taskId === (currentMessageTaskId || undefined);
-                            return ((0, jsx_runtime_1.jsx)(material_1.Box, { sx: {
-                                    display: 'flex',
-                                    justifyContent: 'center',
-                                    flexDirection: 'column',
-                                    gap: 1,
-                                }, children: (0, jsx_runtime_1.jsxs)(material_1.Box, { id: taskId, onClick: () => {
-                                        // @ts-ignore
-                                        setCurrentMessageTaskId(item.id);
-                                    }, sx: Object.assign({ cursor: 'pointer', color: 'textColor', borderRadius: 1, border: 1, borderColor: isCurrent ? 'primary.main' : 'background.block', backgroundColor: 'white', position: 'relative', transition: 'all 0.3s', '&:hover': {
-                                            borderColor: 'primary.main',
-                                        } }, (isMobile
-                                        ? {
-                                            width: sliderWidth / 2,
-                                            height: sliderWidth / 2,
-                                        }
-                                        : {
-                                            minHeight: sliderWidth / 2,
-                                            maxHeight: '50vh',
-                                        })), children: [(0, jsx_runtime_1.jsx)(CodePreview_1.CodeRenderByMessageMemo, { zoom: 0.25, message: item, sx: {
-                                                pointerEvents: 'none',
-                                            }, propertiesValueMap: propertiesValueMap }), (0, jsx_runtime_1.jsx)(material_1.Tooltip, { placement: "right", arrow: true, PopperProps: {
-                                            // disablePortal: true,
-                                            }, TransitionProps: {
-                                                timeout: {
-                                                    appear: 500,
-                                                    enter: 500,
-                                                    exit: 0,
-                                                },
-                                            }, title: (0, jsx_runtime_1.jsxs)(material_1.Box, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { sx: {
-                                                            fontSize: 13,
-                                                            fontWeight: 500,
-                                                            color: 'white',
-                                                        }, children: parameters === null || parameters === void 0 ? void 0 : parameters.question }), (0, jsx_runtime_1.jsx)(material_1.Box, { sx: {
-                                                            fontSize: 12,
-                                                            opacity: 0.75,
-                                                        }, children: (0, jsx_runtime_1.jsx)(RelativeTime_1.default, { value: updatedAt }) })] }), children: (0, jsx_runtime_1.jsx)(material_1.Chip, { label: `V${messagesList.length - i - 1}`, size: "small", variant: "outlined", sx: {
-                                                    fontWeight: 500,
-                                                    fontSize: 10,
-                                                    height: 20,
-                                                    position: 'absolute',
-                                                    bottom: 4,
-                                                    right: 4,
-                                                    backgroundColor: 'background.block',
-                                                    borderColor: isCurrent ? 'primary.main' : 'textColor',
-                                                    color: isCurrent ? 'primary.main' : 'textColor',
-                                                    borderRadius: 1,
-                                                } }) }, taskId)] }, taskId) }, taskId));
-                        }) }))] }, "slider"), (0, jsx_runtime_1.jsx)(material_1.Box, { sx: {
-                    borderRadius: 1,
-                    backgroundColor: 'background.block',
-                    flex: 1,
-                    maxWidth: isMobile ? '100%' : `calc(100% - ${sliderWidth}px - 16px)`,
-                }, children: currentMessage && (0, jsx_runtime_1.jsx)(AgentOutputRender, { message: currentMessage }) })] }));
-}
-function AgentInputRender() {
-    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_2.Suspense, { children: (0, jsx_runtime_1.jsx)(CustomComponentRenderer_1.default, { componentId: appearanceInput.componentId, properties: appearanceInput.componentProperties }) }));
-}
-function AgentOutputRender({ 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.agentId, children: (0, jsx_runtime_1.jsx)(CurrentMessage_1.default, { message: message, children: (0, jsx_runtime_1.jsx)(react_2.Suspense, { children: (0, jsx_runtime_1.jsx)(CustomComponentRenderer_1.default, { componentId: appearanceOutput.componentId, properties: appearanceOutput.componentProperties, fallbackRender: AgentErrorBoundary_1.AgentErrorView }, message.id) }) }) }));
-}