@blocklet/pages-kit 0.2.317 → 0.2.319

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

@@ -1,3 +1,12 @@
+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)
@@ -10,28 +19,28 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Box, Card, CardContent, Container, Grid, Stack, ThemeProvider, Typography, createTheme, useTheme, } from '@mui/material';
-import dayjs from 'dayjs';
+import Empty from '@arcblock/ux/lib/Empty';
+import RelativeTime from '@arcblock/ux/lib/RelativeTime';
 // import { useRuntimeState } from '@blocklet/pages-kit/builtin/async/ai-runtime';
-// import { Icon } from 'iconify/react';
-import { Suspense, useCallback, useEffect, useMemo, useState } from 'react';
+import { Icon } from '@iconify/react';
+import { Masonry } from '@mui/lab';
+import { Box, Button, Chip, Container, IconButton, Stack, ThemeProvider, Tooltip, Typography, createTheme, useTheme, } from '@mui/material';
+import { Suspense, useEffect, useMemo, useRef } from 'react';
 import CustomComponentRenderer from '../../../../../components/CustomComponentRenderer';
+import { useLocaleContext } from '../../../../locale';
 import { useActiveAgent } from '../../contexts/ActiveAgent';
 import CurrentAgentProvider from '../../contexts/CurrentAgent';
 import CurrentMessageProvider from '../../contexts/CurrentMessage';
 import useAppearances from '../../hooks/use-appearances';
-import { useAutoLoadSessionState, useCurrentSessionState } from '../../state/session';
-const getLineClamp = (count) => {
-    return {
-        display: '-webkit-box',
-        WebkitLineClamp: count,
-        WebkitBoxOrient: 'vertical',
-        overflow: 'hidden',
-        textOverflow: 'ellipsis',
-    };
-};
+import { useAutoLoadSessionState, useCurrentSessionState, useSessionState } from '../../state/session';
+import { CodeRenderByMessageMemo as CodeRenderByMessage } from './components/CodePreview';
+import ConfirmDialog from './components/ConfirmDialog';
+import Loading from './components/Loading';
+import UserQuestion from './components/UserQuestion';
+import { V0RuntimeProvider, useV0RuntimeContext } from './contexts/V0Runtime';
+import { getLineClamp } from './utils';
+const sliderWidth = 200;
 function V0Page({ textColor = '#333', primaryColor }) {
-    var _a;
     const inheritedTheme = useTheme();
     const theme = useMemo(() => {
         let { primary } = inheritedTheme.palette;
@@ -44,98 +53,242 @@ function V0Page({ textColor = '#333', primaryColor }) {
             console.error('augment primary color error', { error });
         }
         return createTheme(inheritedTheme, {
-            palette: { primary, textColor },
+            palette: { primary, textColor, background: { block: '#f9f9f9' } },
             shape: {
                 borderRadius: 8,
             },
         });
     }, [inheritedTheme, primaryColor, textColor]);
-    const [sessionId] = useState('1');
-    const [message, setMessage] = useState();
+    useAutoLoadSessionState({
+        autoSetCurrentSessionId: false,
+    });
+    const { currentSessionId } = useSessionState((s) => s) || {};
     const { activeAgentId } = useActiveAgent();
-    useAutoLoadSessionState();
-    const messagesList = useCurrentSessionState((s) => s === null || s === void 0 ? void 0 : s.messages);
-    useEffect(() => {
-        if (messagesList === null || messagesList === void 0 ? void 0 : messagesList.length) {
-            const lastMessage = messagesList[messagesList.length - 1];
-            // @ts-ignore
-            setMessage(lastMessage);
-        }
-    }, [messagesList]);
-    const SliderRender = useCallback(({ message }) => {
-        // if is detail, return output
-        if (sessionId && (messagesList === null || messagesList === void 0 ? void 0 : messagesList.length)) {
-            return (_jsx(Box, { sx: {
-                    width: 200,
-                    p: 2,
-                    position: 'sticky',
-                    top: 64,
-                    height: 'calc(100vh - 65px)',
-                    overflowY: 'auto',
-                }, children: _jsx(Stack, { spacing: 2, justifyContent: "center", children: messagesList === null || messagesList === void 0 ? void 0 : messagesList.map((_, i) => {
-                        var _a;
-                        const isCurrent = _.taskId === (message === null || message === void 0 ? void 0 : message.taskId);
-                        return (_jsxs(Box, { onClick: () => {
-                                // @ts-ignore
-                                setMessage(_);
-                            }, sx: {
-                                cursor: 'pointer',
-                                backgroundColor: isCurrent ? 'primary.main' : 'rgba(0, 0, 0, 0.5)',
-                                color: '#fff',
-                                borderRadius: 1,
-                                p: 1,
-                            }, children: [_jsx(Typography, { variant: "caption", display: "block", sx: Object.assign({ color: 'rgba(255, 255, 255, 0.9)' }, getLineClamp(2)), children: (_a = _.parameters) === null || _a === void 0 ? void 0 : _a.question }), _jsx(Box, { children: _jsxs(Typography, { sx: {
-                                            textAlign: 'right',
-                                            fontWeight: 600,
-                                            fontSize: 12,
-                                            mt: 0.5,
-                                            display: 'flex',
-                                            justifyContent: 'space-between',
-                                        }, children: [_jsx("span", { style: {
-                                                    color: 'rgba(255, 255, 255, 0.7)',
-                                                    fontWeight: 400,
-                                                }, children: dayjs(_.updatedAt).format('MM-DD HH:mm') }), _jsx("span", { children: `V${i}` })] }) })] }, _.assistantId));
-                    }) }) }, "slider"));
-        }
-        return null;
-    }, [JSON.stringify(messagesList)]);
-    const ContentRender = useCallback(() => {
-        // if is detail, return output
-        if (sessionId) {
-            return (_jsx(Box, { flex: 1, children: _jsx(AgentOutputRender, { message: message }) }));
-        }
-        return (_jsx(Box, { flex: 1, children: _jsx(Grid, { container: true, spacing: 2, justifyContent: "center", children: [...Array(3)].map((_, i) => (_jsx(Grid, { item: true, xs: 12, sm: 6, md: 4, children: _jsx(Card, { sx: { backgroundColor: 'rgba(0, 0, 0, 0.5)', color: '#fff' }, children: _jsxs(CardContent, { children: [_jsx(Typography, { variant: "body2", sx: { mb: 1 }, children: `Code Snippet ${i + 1}` }), _jsx(Typography, { variant: "caption", display: "block", sx: { color: 'rgba(255, 255, 255, 0.7)' }, children: `This is history requirement ${i + 1}` })] }) }) }, i))) }) }));
-    }, [JSON.stringify(message)]);
-    return (_jsx(ThemeProvider, { theme: theme, children: _jsx(CurrentAgentProvider, { agentId: activeAgentId, children: _jsxs(Box, { sx: {
-                    display: 'flex',
-                    // background: 'linear-gradient(135deg, #1a237e 0%, #3c3f41 100%)',
-                }, children: [_jsx(SliderRender, { message: message }), _jsxs(Container, { sx: {
-                            minHeight: 'calc(100vh - 64px - 1px)',
+    return (_jsx(ThemeProvider, { theme: theme, children: _jsx(CurrentAgentProvider, { agentId: activeAgentId, children: _jsx(V0RuntimeProvider, { children: _jsx(Box, { flex: 1, children: _jsxs(Container, { sx: {
+                            height: 'calc(100vh - 64px - 1px)',
                             textAlign: 'center',
-                            py: 2,
-                            pt: 10,
+                            pt: 3,
                             gap: 2,
                             display: 'flex',
                             flexDirection: 'column',
-                        }, children: [_jsx(Typography, { variant: "h2", color: "textColor", sx: { fontWeight: 'bold' }, children: "AIGNE V0" }), _jsx(Typography, { variant: "h5", color: "textColor", sx: Object.assign({}, getLineClamp(5)), children: ((_a = message === null || message === void 0 ? void 0 : message.parameters) === null || _a === void 0 ? void 0 : _a.question) || 'A v0 release to help you build code quickly' }), _jsx(ContentRender, {}), _jsx(Box, { sx: {
+                            position: 'relative',
+                            '.code-preview-wrapper': {},
+                        }, children: [_jsx(Box, { sx: {
+                                    flex: 1,
+                                    height: currentSessionId ? 'calc(100% - 48px - 16px - 16px)' : 'unset',
+                                }, children: currentSessionId ? _jsx(V0DetailRender, {}) : _jsx(V0ListRender, {}) }), _jsx(Box, { sx: {
                                     position: 'sticky',
                                     bottom: 0,
                                     backgroundColor: 'white',
-                                    pt: 4,
-                                }, children: _jsx(AgentInputRender, {}) })] })] }) }) }));
+                                    py: 2,
+                                    pt: currentSessionId ? 0 : 2,
+                                }, children: _jsx(AgentInputRender, {}) })] }) }) }) }) }));
 }
 export default V0Page;
+function V0ListRender() {
+    const ConfirmDialogRef = useRef();
+    const { sessions: sessionsList, setCurrentSessionId, loadLatestMessagesForAllSessions, sessionMap, deleteSession, loading, } = useSessionState((s) => s) || {};
+    const { t } = useLocaleContext();
+    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 (_jsxs(Box, { flex: 1, children: [_jsx(Typography, { variant: "h2", color: "textColor", sx: { fontWeight: 'bold', mt: 6 }, children: t('v0.title') }), _jsx(Typography, { variant: "h5", color: "textColor", sx: Object.assign(Object.assign({}, getLineClamp(5)), { mt: 2 }), children: t('v0.description') }), loading ? (_jsx(Loading, { sx: {
+                    position: 'relative',
+                    height: '40vh',
+                    width: '100%',
+                } })) : (_jsxs(Box, { sx: {
+                    mt: 8,
+                }, children: [(sessionsList === null || sessionsList === void 0 ? void 0 : sessionsList.length) ? (_jsx(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 (_jsxs(Box, { sx: {
+                                    display: 'flex',
+                                    justifyContent: 'center',
+                                    flexDirection: 'column',
+                                    gap: 1,
+                                }, children: [_jsx(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: _jsx(CodeRenderByMessage, { zoom: 0.5, message: latestMessage, sx: {
+                                                pointerEvents: 'none',
+                                            } }) }), _jsxs(Box, { sx: {
+                                            display: 'flex',
+                                            alignItems: 'center',
+                                            justifyContent: 'space-between',
+                                        }, children: [_jsx(UserQuestion, { question: name }), _jsx(Box, { children: _jsx(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: _jsx(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: _jsx(Icon, { icon: "tabler:trash" }) }) })] })] }, id));
+                        }) }, "masonry-list")) : (_jsx(Box, { sx: {
+                            mt: 12,
+                        }, children: _jsx(Empty, { children: t('v0.noData') }) })), _jsx(ConfirmDialog, { ref: ConfirmDialogRef })] }))] }, "list-render"));
+}
+function V0DetailRender() {
+    const { setCurrentSessionId } = useSessionState((s) => s) || {};
+    const { messages: messagesList, loading } = useCurrentSessionState((s) => s) || {};
+    const { currentMessageTaskId, setCurrentMessageTaskId, propertiesValueMap } = useV0RuntimeContext();
+    const { t } = useLocaleContext();
+    const currentMessage = messagesList === null || messagesList === void 0 ? void 0 : messagesList.find((item) => item.taskId === currentMessageTaskId);
+    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 (_jsxs(Box, { flex: 1, sx: {
+            display: 'flex',
+            gap: 2,
+            height: '100%',
+        }, children: [_jsxs(Box, { sx: {
+                    width: sliderWidth,
+                    gap: 2,
+                    display: 'flex',
+                    flexDirection: 'column',
+                    height: '100%',
+                    backgroundColor: 'background.block',
+                    borderRadius: 1,
+                    p: 2,
+                    position: 'relative',
+                }, children: [_jsx(Button, { variant: "outlined", size: "small", startIcon: _jsx(Icon, { icon: "tabler:chevron-left" }), onClick: () => {
+                            setCurrentMessageTaskId(undefined);
+                            setCurrentSessionId('');
+                        }, sx: {
+                            backgroundColor: 'white',
+                        }, children: t('back') }), loading && (_jsx(Loading, { 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)',
+                        } })), _jsx(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 (_jsx(Box, { sx: {
+                                    display: 'flex',
+                                    justifyContent: 'center',
+                                    flexDirection: 'column',
+                                    gap: 1,
+                                }, children: _jsxs(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: [_jsx(CodeRenderByMessage, { zoom: 0.25, message: item, sx: {
+                                                pointerEvents: 'none',
+                                            }, propertiesValueMap: propertiesValueMap }), _jsx(Tooltip, { placement: "right", arrow: true, PopperProps: {
+                                            // disablePortal: true,
+                                            }, TransitionProps: {
+                                                timeout: {
+                                                    appear: 500,
+                                                    enter: 500,
+                                                    exit: 0,
+                                                },
+                                            }, title: _jsxs(Box, { children: [_jsx(Typography, { sx: {
+                                                            fontSize: 13,
+                                                            fontWeight: 500,
+                                                            color: 'white',
+                                                        }, children: parameters === null || parameters === void 0 ? void 0 : parameters.question }), _jsx(Box, { sx: {
+                                                            fontSize: 12,
+                                                            opacity: 0.75,
+                                                        }, children: _jsx(RelativeTime, { value: updatedAt }) })] }), children: _jsx(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"), _jsx(Box, { sx: {
+                    borderRadius: 1,
+                    backgroundColor: 'background.block',
+                    flex: 1,
+                    maxWidth: `calc(100% - ${sliderWidth}px - 16px)`,
+                }, children: _jsx(AgentOutputRender, { message: currentMessage }) })] }));
+}
 function AgentInputRender(_a) {
     var props = __rest(_a, []);
     const { appearanceInput } = useAppearances();
     if (!(appearanceInput === null || appearanceInput === void 0 ? void 0 : appearanceInput.componentId))
         return null;
-    return (_jsx(Suspense, { children: _jsx(CustomComponentRenderer, Object.assign({ componentId: appearanceInput.componentId, properties: appearanceInput.componentProperties }, props)) }));
+    return (_jsx(Suspense, { children: _jsx(CustomComponentRenderer, { componentId: appearanceInput.componentId, properties: appearanceInput.componentProperties, props: props }) }));
 }
 function AgentOutputRender(_a) {
     var { message } = _a, props = __rest(_a, ["message"]);
     const { appearanceOutput } = useAppearances();
     if (!(appearanceOutput === null || appearanceOutput === void 0 ? void 0 : appearanceOutput.componentId) || !message)
         return null;
-    return (_jsx(CurrentAgentProvider, { agentId: message.assistantId, children: _jsx(CurrentMessageProvider, { message: message, children: _jsx(Suspense, { children: _jsx(CustomComponentRenderer, Object.assign({ componentId: appearanceOutput.componentId, properties: appearanceOutput.componentProperties }, props)) }) }) }));
+    return (_jsx(CurrentAgentProvider, { agentId: message.assistantId, children: _jsx(CurrentMessageProvider, { message: message, children: _jsx(Suspense, { children: _jsx(CustomComponentRenderer, { componentId: appearanceOutput.componentId, properties: appearanceOutput.componentProperties, props: props }) }) }) }));
 }

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

@@ -0,0 +1,92 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Box } from '@mui/material';
+import { memo, useCallback } from 'react';
+import CustomComponentRenderer from '../../../../../../components/CustomComponentRenderer';
+import { useLocaleContext } from '../../../../../locale';
+import MessageErrorView from '../../ChatOutput/MessageErrorView';
+import { AIRunningLoading } from './Loading';
+const codeField = 'code';
+export default function CodePreview(_a) {
+    var { componentId = 'mock-dev-component', code, propertiesValue } = _a, restProps = __rest(_a, ["componentId", "code", "propertiesValue"]);
+    const { locale } = useLocaleContext();
+    if (!code)
+        return null;
+    return (_jsx(Box, Object.assign({ id: componentId, className: "code-preview-wrapper" }, restProps, { children: _jsx(CustomComponentRenderer, { componentId: componentId, locale: locale, props: propertiesValue || {}, dev: {
+                components: {
+                    [componentId]: {
+                        data: {
+                            id: componentId,
+                            createdAt: '',
+                            updatedAt: '',
+                            renderer: {
+                                type: 'react-component',
+                                script: code,
+                            },
+                        },
+                    },
+                },
+            } }) }), componentId));
+}
+export const CodePreviewMemo = memo(CodePreview);
+export function CodeRenderByMessage({ zoom, message, minHeight = 200, sx, propertiesValueMap, }) {
+    var _a;
+    const { locale } = 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 = useCallback(() => {
+        var _a, _b, _c, _d;
+        if (isMessageLoading) {
+            return (_jsx(Box, { className: "code-message-loading", sx: {
+                    py: 8,
+                    display: 'flex',
+                    justifyContent: 'center',
+                    alignItems: 'center',
+                }, children: _jsx(AIRunningLoading, {}) }));
+        }
+        if (message === null || message === void 0 ? void 0 : message.error) {
+            return (_jsx(Box, { sx: {
+                    width: '100%',
+                }, children: _jsx(MessageErrorView, { 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 (_jsx(Box, { children: _jsx(MessageErrorView, { 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 (_jsx(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 (_jsx(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: _jsx(ContentRender, {}) }, message === null || message === void 0 ? void 0 : message.taskId));
+}
+export const CodeRenderByMessageMemo = memo(CodeRenderByMessage);
+export 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];
+}

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

@@ -0,0 +1,55 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Icon } from '@iconify/react';
+import { Button, Dialog, DialogActions, DialogContent, DialogTitle, Typography } from '@mui/material';
+import { forwardRef, useImperativeHandle, useState } from 'react';
+import { useLocaleContext } from '../../../../../locale';
+import LoadingButton from '../../../components/LoadingButton';
+const ConfirmDialog = forwardRef((props, ref) => {
+    const [openDialog, setOpenDialog] = useState(false);
+    const [openParams, setOpenParams] = useState({});
+    const { t } = useLocaleContext();
+    const open = (params) => {
+        setOpenParams(params);
+        setOpenDialog(true);
+    };
+    const close = () => {
+        setOpenDialog(false);
+    };
+    useImperativeHandle(ref, () => ({
+        open,
+        close,
+    }));
+    const { title, children, onConfirm, onCancel, onConfirmProps, onCancelProps } = openParams;
+    return (_jsxs(Dialog, Object.assign({ disableScrollLock: true, onClose: close, fullWidth: true, maxWidth: "sm" }, props, { open: openDialog, children: [_jsxs(DialogTitle, { sx: {
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'space-between',
+                }, children: [_jsx(Typography, { component: "h5", sx: { fontSize: 24, fontWeight: 700 }, children: title }), _jsx(Button, { onClick: close, 
+                        //   variant="text"
+                        color: "inherit", disableElevation: true, sx: {
+                            minWidth: 32,
+                            minHeight: 32,
+                            p: 0,
+                            fontSize: 22,
+                        }, children: _jsx(Icon, { icon: "tabler:x" }) })] }), _jsx(DialogContent, { children: children }), _jsxs(DialogActions, { sx: {
+                    px: 3,
+                    pt: 0,
+                    pb: 2,
+                }, children: [_jsx(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') })), _jsx(LoadingButton, 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') }))] })] })));
+});
+export default ConfirmDialog;