@blocklet/pages-kit 0.2.317 → 0.2.319

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

@@ -1,4 +1,13 @@
 "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 __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)
@@ -15,30 +24,30 @@ var __importDefault = (this && this.__importDefault) || function (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"));
+const Empty_1 = __importDefault(require("@arcblock/ux/lib/Empty"));
+const RelativeTime_1 = __importDefault(require("@arcblock/ux/lib/RelativeTime"));
 // import { useRuntimeState } from '@blocklet/pages-kit/builtin/async/ai-runtime';
-// import { Icon } from 'iconify/react';
-const react_1 = require("react");
+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 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 session_1 = require("../../state/session");
-const getLineClamp = (count) => {
-    return {
-        display: '-webkit-box',
-        WebkitLineClamp: count,
-        WebkitBoxOrient: 'vertical',
-        overflow: 'hidden',
-        textOverflow: 'ellipsis',
-    };
-};
+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 }) {
-    var _a;
     const inheritedTheme = (0, material_1.useTheme)();
-    const theme = (0, react_1.useMemo)(() => {
+    const theme = (0, react_2.useMemo)(() => {
         let { primary } = inheritedTheme.palette;
         try {
             if (primaryColor) {
@@ -49,98 +58,242 @@ function V0Page({ textColor = '#333', primaryColor }) {
             console.error('augment primary color error', { error });
         }
         return (0, material_1.createTheme)(inheritedTheme, {
-            palette: { primary, textColor },
+            palette: { primary, textColor, background: { block: '#f9f9f9' } },
             shape: {
                 borderRadius: 8,
             },
         });
     }, [inheritedTheme, primaryColor, textColor]);
-    const [sessionId] = (0, react_1.useState)('1');
-    const [message, setMessage] = (0, react_1.useState)();
+    (0, session_1.useAutoLoadSessionState)({
+        autoSetCurrentSessionId: false,
+    });
+    const { currentSessionId } = (0, session_1.useSessionState)((s) => s) || {};
     const { activeAgentId } = (0, ActiveAgent_1.useActiveAgent)();
-    (0, session_1.useAutoLoadSessionState)();
-    const messagesList = (0, session_1.useCurrentSessionState)((s) => s === null || s === void 0 ? void 0 : 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: activeAgentId, 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)',
+    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)(V0Runtime_1.V0RuntimeProvider, { 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',
-                            py: 2,
-                            pt: 10,
+                            pt: 3,
                             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: 'relative',
+                            '.code-preview-wrapper': {},
+                        }, children: [(0, jsx_runtime_1.jsx)(material_1.Box, { sx: {
+                                    flex: 1,
+                                    height: 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',
-                                    pt: 4,
-                                }, children: (0, jsx_runtime_1.jsx)(AgentInputRender, {}) })] })] }) }) }));
+                                    py: 2,
+                                    pt: currentSessionId ? 0 : 2,
+                                }, children: (0, jsx_runtime_1.jsx)(AgentInputRender, {}) })] }) }) }) }) }));
 }
 exports.default = V0Page;
+function V0ListRender() {
+    const ConfirmDialogRef = (0, react_2.useRef)();
+    const { sessions: sessionsList, setCurrentSessionId, loadLatestMessagesForAllSessions, sessionMap, deleteSession, loading, } = (0, session_1.useSessionState)((s) => s) || {};
+    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: 6 }, children: 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: 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: 8,
+                }, children: [(sessionsList === null || sessionsList === void 0 ? void 0 : sessionsList.length) ? ((0, jsx_runtime_1.jsx)(lab_1.Masonry, { columns: { xs: 2, sm: 3, md: 4, 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(-1);
+                            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',
+                                            '&: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() {
+    const { setCurrentSessionId } = (0, session_1.useSessionState)((s) => s) || {};
+    const { messages: messagesList, loading } = (0, session_1.useCurrentSessionState)((s) => s) || {};
+    const { currentMessageTaskId, setCurrentMessageTaskId, propertiesValueMap } = (0, V0Runtime_1.useV0RuntimeContext)();
+    const { t } = (0, locale_1.useLocaleContext)();
+    const currentMessage = messagesList === null || messagesList === void 0 ? void 0 : messagesList.find((item) => item.taskId === currentMessageTaskId);
+    (0, react_2.useEffect)(() => {
+        if (messagesList === null || messagesList === void 0 ? void 0 : messagesList.length) {
+            const latestMessage = messagesList === null || messagesList === void 0 ? void 0 : messagesList.at(-1);
+            // no currentMessageTaskId or has new message
+            if (!currentMessageTaskId || (currentMessageTaskId === (latestMessage === null || latestMessage === void 0 ? void 0 : latestMessage.taskId) && (messagesList === null || messagesList === void 0 ? void 0 : messagesList.length) > 1)) {
+                // @ts-ignore
+                setCurrentMessageTaskId(latestMessage.taskId);
+            }
+        }
+    }, [messagesList, currentMessageTaskId]);
+    return ((0, jsx_runtime_1.jsxs)(material_1.Box, { flex: 1, sx: {
+            display: 'flex',
+            gap: 2,
+            height: '100%',
+        }, children: [(0, jsx_runtime_1.jsxs)(material_1.Box, { sx: {
+                    width: sliderWidth,
+                    gap: 2,
+                    display: 'flex',
+                    flexDirection: 'column',
+                    height: '100%',
+                    backgroundColor: 'background.block',
+                    borderRadius: 1,
+                    p: 2,
+                    position: 'relative',
+                }, 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',
+                        }, children: t('back') }), loading && ((0, jsx_runtime_1.jsx)(Loading_1.default, { sx: {
+                            position: 'absolute',
+                            width: '80px',
+                            height: '80px',
+                            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)',
+                        } })), (0, jsx_runtime_1.jsx)(material_1.Stack, { spacing: 2, sx: {
+                            overflowY: 'auto',
+                            overflowX: 'hidden',
+                            // scrollbarWidth: 'thin',
+                            // scrollbarColor: 'grey transparent',
+                            '&::-webkit-scrollbar': {
+                                display: 'none',
+                            },
+                        }, children: messagesList === null || messagesList === void 0 ? void 0 : messagesList.map((item, i) => {
+                            const { parameters, 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, { onClick: () => {
+                                        // @ts-ignore
+                                        setCurrentMessageTaskId(item.taskId);
+                                    }, sx: {
+                                        cursor: 'pointer',
+                                        color: 'textColor',
+                                        borderRadius: 1,
+                                        border: 1,
+                                        borderColor: isCurrent ? 'primary.main' : 'background.block',
+                                        backgroundColor: 'white',
+                                        position: 'relative',
+                                        transition: 'all 0.3s',
+                                        '&:hover': {
+                                            borderColor: isCurrent ? 'primary.main' : 'textColor',
+                                        },
+                                        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${i}`, 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: `calc(100% - ${sliderWidth}px - 16px)`,
+                }, children: (0, jsx_runtime_1.jsx)(AgentOutputRender, { message: currentMessage }) })] }));
+}
 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.componentProperties }, props)) }));
+    return ((0, jsx_runtime_1.jsx)(react_2.Suspense, { children: (0, jsx_runtime_1.jsx)(CustomComponentRenderer_1.default, { componentId: appearanceInput.componentId, properties: appearanceInput.componentProperties, props: 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.componentProperties }, props)) }) }) }));
+    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_2.Suspense, { children: (0, jsx_runtime_1.jsx)(CustomComponentRenderer_1.default, { componentId: appearanceOutput.componentId, properties: appearanceOutput.componentProperties, props: props }) }) }) }));
 }

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

@@ -0,0 +1,101 @@
+"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 });
+exports.getCurrentCodeByTaskId = exports.CodeRenderByMessageMemo = exports.CodeRenderByMessage = exports.CodePreviewMemo = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const material_1 = require("@mui/material");
+const react_1 = require("react");
+const CustomComponentRenderer_1 = __importDefault(require("../../../../../../components/CustomComponentRenderer"));
+const locale_1 = require("../../../../../locale");
+const MessageErrorView_1 = __importDefault(require("../../ChatOutput/MessageErrorView"));
+const Loading_1 = require("./Loading");
+const codeField = 'code';
+function CodePreview(_a) {
+    var { componentId = 'mock-dev-component', code, propertiesValue } = _a, restProps = __rest(_a, ["componentId", "code", "propertiesValue"]);
+    const { locale } = (0, locale_1.useLocaleContext)();
+    if (!code)
+        return null;
+    return ((0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ id: componentId, className: "code-preview-wrapper" }, restProps, { children: (0, jsx_runtime_1.jsx)(CustomComponentRenderer_1.default, { componentId: componentId, locale: locale, props: propertiesValue || {}, dev: {
+                components: {
+                    [componentId]: {
+                        data: {
+                            id: componentId,
+                            createdAt: '',
+                            updatedAt: '',
+                            renderer: {
+                                type: 'react-component',
+                                script: code,
+                            },
+                        },
+                    },
+                },
+            } }) }), componentId));
+}
+exports.default = CodePreview;
+exports.CodePreviewMemo = (0, react_1.memo)(CodePreview);
+function CodeRenderByMessage({ zoom, message, minHeight = 200, sx, propertiesValueMap, }) {
+    var _a;
+    const { locale } = (0, locale_1.useLocaleContext)();
+    const zoomSx = {
+        '& > *': {
+            zoom,
+            minHeight,
+        },
+    };
+    const isMessageLoading = ((message === null || message === void 0 ? void 0 : message.loading) || !(message === null || message === void 0 ? void 0 : message.result)) && !(message === null || message === void 0 ? void 0 : message.error);
+    const ContentRender = (0, react_1.useCallback)(() => {
+        var _a, _b, _c, _d;
+        if (isMessageLoading) {
+            return ((0, jsx_runtime_1.jsx)(material_1.Box, { className: "code-message-loading", sx: {
+                    py: 8,
+                    display: 'flex',
+                    justifyContent: 'center',
+                    alignItems: 'center',
+                }, children: (0, jsx_runtime_1.jsx)(Loading_1.AIRunningLoading, {}) }));
+        }
+        if (message === null || message === void 0 ? void 0 : message.error) {
+            return ((0, jsx_runtime_1.jsx)(material_1.Box, { sx: {
+                    width: '100%',
+                }, children: (0, jsx_runtime_1.jsx)(MessageErrorView_1.default, { error: message.error, sx: {
+                        mr: 0,
+                    } }) }));
+        }
+        if (!((_b = (_a = message === null || message === void 0 ? void 0 : message.result) === null || _a === void 0 ? void 0 : _a.objects) === null || _b === void 0 ? void 0 : _b.length)) {
+            return ((0, jsx_runtime_1.jsx)(material_1.Box, { children: (0, jsx_runtime_1.jsx)(MessageErrorView_1.default, { error: new Error('Something error'), sx: {
+                        mr: 0,
+                    } }) }));
+        }
+        return (_d = (_c = message === null || message === void 0 ? void 0 : message.result) === null || _c === void 0 ? void 0 : _c.objects) === null || _d === void 0 ? void 0 : _d.map((item) => {
+            var _a, _b;
+            const { taskId } = item;
+            // @ts-ignore
+            const code = (_a = item === null || item === void 0 ? void 0 : item.data) === null || _a === void 0 ? void 0 : _a[codeField];
+            return ((0, jsx_runtime_1.jsx)(exports.CodePreviewMemo, { componentId: `code-preview-${taskId}`, code: code, propertiesValue: (_b = propertiesValueMap === null || propertiesValueMap === void 0 ? void 0 : propertiesValueMap[taskId]) === null || _b === void 0 ? void 0 : _b[locale] }, item.taskId));
+        });
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [isMessageLoading, (_a = message === null || message === void 0 ? void 0 : message.result) === null || _a === void 0 ? void 0 : _a.objects, propertiesValueMap, locale]);
+    return ((0, jsx_runtime_1.jsx)(material_1.Box, { sx: Object.assign(Object.assign(Object.assign({ transition: 'all 0.3s', overflow: 'hidden', borderRadius: 1, width: '100%', height: '100%', backgroundColor: 'white' }, zoomSx), sx), { '.code-preview-wrapper': {
+            // p: 2,
+            } }), children: (0, jsx_runtime_1.jsx)(ContentRender, {}) }, message === null || message === void 0 ? void 0 : message.taskId));
+}
+exports.CodeRenderByMessage = CodeRenderByMessage;
+exports.CodeRenderByMessageMemo = (0, react_1.memo)(CodeRenderByMessage);
+function getCurrentCodeByTaskId(message, taskId) {
+    var _a, _b, _c, _d;
+    // @ts-ignore
+    return (_d = (_c = (_b = (_a = message === null || message === void 0 ? void 0 : message.result) === null || _a === void 0 ? void 0 : _a.objects) === null || _b === void 0 ? void 0 : _b.find((item) => item.taskId === taskId)) === null || _c === void 0 ? void 0 : _c.data) === null || _d === void 0 ? void 0 : _d[codeField];
+}
+exports.getCurrentCodeByTaskId = getCurrentCodeByTaskId;

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

@@ -0,0 +1,60 @@
+"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 react_1 = require("@iconify/react");
+const material_1 = require("@mui/material");
+const react_2 = require("react");
+const locale_1 = require("../../../../../locale");
+const LoadingButton_1 = __importDefault(require("../../../components/LoadingButton"));
+const ConfirmDialog = (0, react_2.forwardRef)((props, ref) => {
+    const [openDialog, setOpenDialog] = (0, react_2.useState)(false);
+    const [openParams, setOpenParams] = (0, react_2.useState)({});
+    const { t } = (0, locale_1.useLocaleContext)();
+    const open = (params) => {
+        setOpenParams(params);
+        setOpenDialog(true);
+    };
+    const close = () => {
+        setOpenDialog(false);
+    };
+    (0, react_2.useImperativeHandle)(ref, () => ({
+        open,
+        close,
+    }));
+    const { title, children, onConfirm, onCancel, onConfirmProps, onCancelProps } = openParams;
+    return ((0, jsx_runtime_1.jsxs)(material_1.Dialog, Object.assign({ disableScrollLock: true, onClose: close, fullWidth: true, maxWidth: "sm" }, props, { open: openDialog, children: [(0, jsx_runtime_1.jsxs)(material_1.DialogTitle, { sx: {
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'space-between',
+                }, children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { component: "h5", sx: { fontSize: 24, fontWeight: 700 }, children: title }), (0, jsx_runtime_1.jsx)(material_1.Button, { onClick: close, 
+                        //   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.DialogContent, { children: children }), (0, jsx_runtime_1.jsxs)(material_1.DialogActions, { sx: {
+                    px: 3,
+                    pt: 0,
+                    pb: 2,
+                }, children: [(0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ variant: "contained", color: "inherit" }, onCancelProps, { onClick: () => {
+                            onCancel === null || onCancel === void 0 ? void 0 : onCancel();
+                            setOpenDialog(false);
+                        }, children: (onCancelProps === null || onCancelProps === void 0 ? void 0 : onCancelProps.children) || t('cancel') })), (0, jsx_runtime_1.jsx)(LoadingButton_1.default, Object.assign({ variant: "contained" }, onConfirmProps, { onClick: () => __awaiter(void 0, void 0, void 0, function* () {
+                            yield (onConfirm === null || onConfirm === void 0 ? void 0 : onConfirm());
+                            setOpenDialog(false);
+                        }), children: (onConfirmProps === null || onConfirmProps === void 0 ? void 0 : onConfirmProps.children) || t('submit') }))] })] })));
+});
+exports.default = ConfirmDialog;