@blocklet/pages-kit 0.2.326 → 0.2.328

package/lib/esm/builtin/async/ai-runtime/components/Header/SimpleHeader.js

@@ -19,5 +19,5 @@ export default function SimpleHeader(_a) {
     const { agent } = useRuntimeState();
     const title = agent.project.name;
     const { description } = agent.project;
-    return (_jsx(Stack, Object.assign({ gap: 2, mt: 8, mb: 4 }, props, { className: cx('aigne-header aigne-simple-header', props.className), children: _jsxs(Provider, { children: [title && (_jsx(Typography, Object.assign({ width: "100%", component: "h5", fontSize: 30, fontWeight: 700, textAlign: "center" }, TitleProps, { children: _jsx(Balancer, { children: title }) }))), description && (_jsx(Typography, Object.assign({ width: "100%", textAlign: "center" }, DescriptionProps, { children: _jsx(Balancer, { children: description }) })))] }) })));
+    return (_jsx(Stack, Object.assign({ gap: 2, mt: 8, mb: 4 }, props, { className: cx('aigne-header aigne-simple-header', props.className), children: _jsxs(Provider, { children: [title && (_jsx(Typography, Object.assign({ width: "100%", variant: "h4", fontSize: 30, fontWeight: 700, textAlign: "center" }, TitleProps, { children: _jsx(Balancer, { children: title }) }))), description && (_jsx(Typography, Object.assign({ width: "100%", textAlign: "center" }, DescriptionProps, { children: _jsx(Balancer, { children: description }) })))] }) })));
 }

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

@@ -11,23 +11,37 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { ArrowDropDownRounded } from '@mui/icons-material';
-import { CircularProgress, GlobalStyles, ThemeProvider as MuiThemeProvider, Stack, alpha, createTheme, inputBaseClasses, useTheme, } from '@mui/material';
+import { CircularProgress, CssBaseline, GlobalStyles, ThemeProvider as MuiThemeProvider, Stack, alpha, createTheme, inputBaseClasses, useTheme, } from '@mui/material';
 import { Suspense, useMemo } from 'react';
 import { useRuntimeState } from '../state/runtime';
 import GlobalLoading from './GlobalLoading';
 export default function ThemeProvider({ children }) {
-    const { primaryColor } = useRuntimeState().agent.project;
+    const { appearance } = useRuntimeState().agent.project;
     const theme = useTheme();
     const newTheme = useMemo(() => {
+        var _a, _b, _c, _d, _e, _f;
         let { primary } = theme.palette;
         try {
-            if (primaryColor) {
-                primary = theme.palette.augmentColor({ color: { main: primaryColor } });
+            if (appearance === null || appearance === void 0 ? void 0 : appearance.primaryColor) {
+                primary = theme.palette.augmentColor({ color: { main: appearance === null || appearance === void 0 ? void 0 : appearance.primaryColor } });
             }
         }
         catch (error) {
             console.error('augment primary color error', { error });
         }
+        const { fontFamily } = theme.typography;
+        const headingFontFamily = [
+            ((_b = (_a = appearance === null || appearance === void 0 ? void 0 : appearance.typography) === null || _a === void 0 ? void 0 : _a.heading) === null || _b === void 0 ? void 0 : _b.fontFamily) && JSON.stringify((_d = (_c = appearance === null || appearance === void 0 ? void 0 : appearance.typography) === null || _c === void 0 ? void 0 : _c.heading) === null || _d === void 0 ? void 0 : _d.fontFamily),
+            fontFamily,
+        ]
+            .filter(Boolean)
+            .join(',');
+        const bodyFontFamily = [
+            ((_e = appearance === null || appearance === void 0 ? void 0 : appearance.typography) === null || _e === void 0 ? void 0 : _e.fontFamily) && JSON.stringify((_f = appearance === null || appearance === void 0 ? void 0 : appearance.typography) === null || _f === void 0 ? void 0 : _f.fontFamily),
+            fontFamily,
+        ]
+            .filter(Boolean)
+            .join(',');
         const themeOptions = {
             components: {
                 MuiSelect: {
@@ -93,30 +107,28 @@ export default function ThemeProvider({ children }) {
                 },
             },
         };
-        const paletteTheme = createTheme({
+        const tempTheme = createTheme({
+            typography: Object.assign({ fontFamily: bodyFontFamily }, Object.fromEntries(new Array(5).fill(0).map((_, index) => [
+                `h${index + 1}`,
+                {
+                    fontFamily: headingFontFamily,
+                },
+            ]))),
             palette: {
                 primary,
                 secondary: {
                     main: '#010714',
                 },
-                text: {
-                    secondary: '#98A3B1',
-                    // @ts-ignore
-                    poweredBy: 'rgba(209, 213, 219, 1)',
-                },
-                // @ts-ignore custom `black` color
-                black: {
-                    main: '#010714',
-                },
             },
         });
         return createTheme(theme, themeOptions, {
+            typography: tempTheme.typography,
             palette: {
-                primary: paletteTheme.palette.primary,
-                secondary: paletteTheme.palette.secondary,
-                text: paletteTheme.palette.text,
+                primary: tempTheme.palette.primary,
+                secondary: tempTheme.palette.secondary,
+                text: tempTheme.palette.text,
                 // @ts-ignore
-                black: paletteTheme.palette.black,
+                black: tempTheme.palette.black,
                 background: {
                     default: '#ffffff',
                 },
@@ -128,19 +140,25 @@ export default function ThemeProvider({ children }) {
                 'none',
                 '0px 0px 0px 1px rgba(2, 7, 19, 0.08), 0px 1px 2px -1px rgba(2, 7, 19, 0.08), 0px 2px 4px 0px rgba(2, 7, 19, 0.04)',
                 '0px 0px 0px 1px rgba(2, 7, 19, 0.08), 0px 1px 2px -1px rgba(2, 7, 19, 0.08), 0px 2px 8px 0px rgba(2, 7, 19, 0.10)',
-                ...paletteTheme.shadows.slice(3),
+                ...tempTheme.shadows.slice(3),
             ],
         });
     }, [theme]);
-    return (_jsxs(MuiThemeProvider, { theme: newTheme, children: [_jsx(GlobalStyles, { styles: {
-                    '.page-header': {
-                        borderBottom: '1px solid rgba(229, 231, 235, 1)',
-                    },
-                    '.white-tooltip .MuiTooltip-tooltip': {
-                        background: 'white !important',
-                        boxShadow: '0px 4px 8px 0px rgba(3, 7, 18, 0.08)',
-                        border: '1px solid rgba(229, 231, 235, 1)',
-                        padding: 4,
-                    },
-                } }), _jsx(GlobalLoading, { sx: { position: 'fixed', left: 0, top: 0, width: '100%', zIndex: 'snackbar' } }), _jsx(Suspense, { fallback: _jsx(Stack, { flexGrow: 1, alignItems: "center", justifyContent: "center", children: _jsx(CircularProgress, { size: 24 }) }), children: children })] }));
+    return (_jsx(MuiThemeProvider, { theme: newTheme, children: _jsxs(CssBaseline, { children: [_jsx(GlobalStyles, { styles: (theme) => theme.unstable_sx({
+                        'h1,h2,h3,h4,h5': {
+                            fontFamily: `${theme.typography.h1.fontFamily} !important`,
+                        },
+                        body: {
+                            fontFamily: `${theme.typography.fontFamily} !important`,
+                        },
+                        '.page-header': {
+                            borderBottom: '1px solid rgba(229, 231, 235, 1)',
+                        },
+                        '.white-tooltip .MuiTooltip-tooltip': {
+                            background: 'white !important',
+                            boxShadow: '0px 4px 8px 0px rgba(3, 7, 18, 0.08)',
+                            border: '1px solid rgba(229, 231, 235, 1)',
+                            padding: 4,
+                        },
+                    }) }), _jsx(GlobalLoading, { sx: { position: 'fixed', left: 0, top: 0, width: '100%', zIndex: 'snackbar' } }), _jsx(Suspense, { fallback: _jsx(Stack, { flexGrow: 1, alignItems: "center", justifyContent: "center", children: _jsx(CircularProgress, { size: 24 }) }), children: children })] }) }));
 }

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

@@ -16,18 +16,16 @@ import dayjs from 'dayjs';
 import { useMemo } from 'react';
 import { Avatar } from '../../../arcblock/ux';
 export default function UserInfo(_a) {
-    var { avatar, showDID, did, name, time, children, reverse } = _a, restProps = __rest(_a, ["avatar", "showDID", "did", "name", "time", "children", "reverse"]);
+    var { avatar, showDID, did, name, time, children, reverse, UserNameProps } = _a, restProps = __rest(_a, ["avatar", "showDID", "did", "name", "time", "children", "reverse", "UserNameProps"]);
     return (_jsxs(Stack, Object.assign({ className: "user-info", alignItems: "center", direction: reverse ? 'row-reverse' : 'row', gap: 1.5 }, restProps, { children: [(avatar || did) && (_jsx(Box, { sx: {
                     display: 'flex',
                     alignItems: 'center',
                     maxHeight: 44,
-                }, children: _jsx(Avatar, { size: 40, did: did, variant: "circle", shape: "circle", src: avatar }) })), _jsxs(Box, { flex: 1, width: 0, children: [_jsxs(UserName, { sx: {
-                            justifyContent: reverse ? 'flex-end' : 'flex-start',
-                        }, children: [name || '', time && (_jsx(UserTime, { time: time, sx: {
+                }, children: _jsx(Avatar, { size: 40, did: did, variant: "circle", shape: "circle", src: avatar }) })), _jsxs(Box, { flex: 1, width: 0, children: [_jsxs(UserName, Object.assign({}, UserNameProps, { sx: Object.assign({ justifyContent: reverse ? 'flex-end' : 'flex-start' }, UserNameProps === null || UserNameProps === void 0 ? void 0 : UserNameProps.sx), children: [name || '', time && (_jsx(UserTime, { time: time, sx: {
                                     fontSize: 12,
                                     lineHeight: '24px',
-                                    color: 'text.secondary',
-                                } }))] }), showDID && did && _jsx(Box, { component: DID, did: did, copyable: false, size: 14, responsive: true, sx: { mt: -0.25 } }), _jsx(Box, { flex: 1, children: children })] })] })));
+                                    opacity: 0.8,
+                                } }))] })), showDID && did && _jsx(Box, { component: DID, did: did, copyable: false, size: 14, responsive: true, sx: { mt: -0.25 } }), _jsx(Box, { flex: 1, children: children })] })] })));
 }
 export function UserName(_a) {
     var { children, sx } = _a, restProps = __rest(_a, ["children", "sx"]);

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

@@ -94,8 +94,8 @@ export const translations = {
         session: 'Session',
         loadMore: 'Load More',
         v0: {
-            title: 'AIGNE v0',
-            description: 'AIGNE v0 is an AI-based code tool that can help you generate code quickly.',
+            title: 'Mock 0',
+            description: 'Mock 0 is an AI-based code tool that can help you generate code quickly.',
             noData: 'No conversation information yet, click the button below to start generating!',
             deleteSessionTitle: 'Delete Conversation Information',
             deleteSessionTip: 'Are you sure you want to delete this Conversation Information?',
@@ -106,6 +106,9 @@ export const translations = {
             codePreviewTip: 'Here is the code preview, you can view the generated code, and editing is not supported yet.',
             hideSlider: 'Hide Versions',
             showSlider: 'Show Versions',
+            retryTip: 'Agent not enough power, please try again later...',
+            retry: 'Try Again',
+            errorCodeTip: 'Agent found some syntax errors in the code, and want to try again...',
         },
     },
     zh: {
@@ -203,8 +206,8 @@ export const translations = {
         session: '会话',
         loadMore: '加载更多',
         v0: {
-            title: 'AIGNE v0',
-            description: 'AIGNE v0 是一个基于人工智能的代码工具，可以帮助您快速生成代码。',
+            title: 'Mock 0',
+            description: 'Mock 0 是一个基于人工智能的代码工具，可以帮助您快速生成代码。',
             noData: '暂无生成记录，点击下方按钮开始生成吧！',
             deleteSessionTitle: '删除生成记录',
             deleteSessionTip: '确定要删除此生成记录吗？',
@@ -215,6 +218,9 @@ export const translations = {
             codePreviewTip: '以下是代码预览，您可以查看生成的代码，目前还不支持编辑。',
             hideSlider: '隐藏版本历史',
             showSlider: '显示版本历史',
+            retryTip: 'Agent 算力不足，请稍后重试...',
+            retry: '重试',
+            errorCodeTip: 'Agent 发现代码存在一些语法错误，请求重试...',
         },
     },
 };

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

@@ -21,15 +21,17 @@ import CurrentMessageProvider from '../../contexts/CurrentMessage';
 import useAppearances, { useProfile } from '../../hooks/use-appearances';
 import UserMessageView from './UserMessageView';
 const MessageView = memo(({ message }) => {
-    var _a, _b, _c, _d, _e;
+    var _a, _b, _c, _d, _e, _f;
+    const preferences = useComponentPreferences();
+    const hasBg = !!((_a = preferences === null || preferences === void 0 ? void 0 : preferences.backgroundImage) === null || _a === void 0 ? void 0 : _a.url);
     const { session: authSession } = useSessionContext();
     const { appearanceOutput } = useAppearances({ agentId: message.assistantId });
     const profile = useProfile({ agentId: message.assistantId });
-    const { hideAgentAvatar, hideUserInputs } = (_a = useComponentPreferences()) !== null && _a !== void 0 ? _a : {};
+    const { hideAgentAvatar, hideUserInputs } = (_b = useComponentPreferences()) !== null && _b !== void 0 ? _b : {};
     if (!(appearanceOutput === null || appearanceOutput === void 0 ? void 0 : appearanceOutput.componentId))
         return null;
     const agentMessage = (_jsx(MessageBodyContainer, { messageRole: "assistant", children: _jsx(CustomComponentRenderer, { componentId: appearanceOutput.componentId, properties: appearanceOutput.componentProperties }) }));
-    return (_jsx(CurrentAgentProvider, { agentId: message.assistantId, children: _jsx(CurrentMessageProvider, { message: message, children: _jsxs(Stack, { gap: 2, children: [!hideUserInputs && (_jsx(Box, { children: _jsx(UserInfo, { name: (_b = authSession.user) === null || _b === void 0 ? void 0 : _b.fullName, did: (_c = authSession.user) === null || _c === void 0 ? void 0 : _c.did, avatar: (_d = authSession.user) === null || _d === void 0 ? void 0 : _d.avatar, time: message.createdAt, reverse: true, alignItems: "flex-start", children: _jsx(Stack, { sx: { alignItems: 'flex-end' }, children: _jsx(MessageBodyContainer, { messageRole: "user", children: _jsx(UserMessageView, {}) }) }) }) })), _jsx(Box, { children: !hideAgentAvatar ? (_jsx(UserInfo, { name: profile.name, did: (_e = globalThis.blocklet) === null || _e === void 0 ? void 0 : _e.appId, avatar: profile.avatar, time: message.createdAt, alignItems: "flex-start", children: agentMessage })) : (agentMessage) })] }) }) }));
+    return (_jsx(CurrentAgentProvider, { agentId: message.assistantId, children: _jsx(CurrentMessageProvider, { message: message, children: _jsxs(Stack, { gap: 2, children: [!hideUserInputs && (_jsx(Box, { children: _jsx(UserInfo, { name: (_c = authSession.user) === null || _c === void 0 ? void 0 : _c.fullName, did: (_d = authSession.user) === null || _d === void 0 ? void 0 : _d.did, avatar: (_e = authSession.user) === null || _e === void 0 ? void 0 : _e.avatar, time: message.createdAt, reverse: true, alignItems: "flex-start", UserNameProps: { sx: { color: hasBg ? 'white' : undefined } }, children: _jsx(Stack, { sx: { alignItems: 'flex-end' }, children: _jsx(MessageBodyContainer, { messageRole: "user", children: _jsx(UserMessageView, {}) }) }) }) })), _jsx(Box, { children: !hideAgentAvatar ? (_jsx(UserInfo, { name: profile.name, did: (_f = globalThis.blocklet) === null || _f === void 0 ? void 0 : _f.appId, avatar: profile.avatar, time: message.createdAt, alignItems: "flex-start", UserNameProps: { sx: { color: hasBg ? 'white' : undefined } }, children: agentMessage })) : (agentMessage) })] }) }) }));
 });
 export default MessageView;
 export function MessageBodyContainer(_a) {
@@ -39,5 +41,5 @@ export function MessageBodyContainer(_a) {
     const hasBg = !!((_b = preferences === null || preferences === void 0 ? void 0 : preferences.backgroundImage) === null || _b === void 0 ? void 0 : _b.url);
     const hideUserMessage = preferences === null || preferences === void 0 ? void 0 : preferences.hideUserInputs;
     return (_jsx(Box, Object.assign({}, props, { sx: hasBg
-            ? Object.assign({ borderRadius: 1, borderTopRightRadius: messageRole === 'user' ? 2 : undefined, borderTopLeftRadius: messageRole !== 'user' ? 2 : undefined, px: 2, py: 1, marginTop: 0.5, maxWidth: hideUserMessage ? 'unset' : 'calc(100% - 40px)', bgcolor: 'rgba(239, 246, 255, 1)' }, props.sx) : Object.assign({}, props.sx) })));
+            ? Object.assign({ borderRadius: 1, borderTopRightRadius: messageRole === 'user' ? 2 : undefined, borderTopLeftRadius: messageRole !== 'user' ? 2 : undefined, px: 2, py: 1, marginTop: 0.5, maxWidth: hideUserMessage ? 'unset' : 'calc(100% - 40px)', bgcolor: 'rgba(255, 255, 255, 0.8)', backdropFilter: 'blur(16px)' }, props.sx) : Object.assign({}, props.sx) })));
 }

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

@@ -10,7 +10,8 @@ import { useOpeningMessage, useOpeningQuestions, useProfile } from '../../hooks/
 import { MessageBodyContainer } from './MessageView';
 const OpeningMessageView = memo(({ isMessagesEmpty }) => {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
-    const { hideAgentAvatar } = (_a = useComponentPreferences()) !== null && _a !== void 0 ? _a : {};
+    const { hideAgentAvatar, backgroundImage } = (_a = useComponentPreferences()) !== null && _a !== void 0 ? _a : {};
+    const hasBg = !!(backgroundImage === null || backgroundImage === void 0 ? void 0 : backgroundImage.url);
     const openingMessage = useOpeningMessage();
     const openingMessageOutput = useMemo(() => { var _a; return (_a = openingMessage === null || openingMessage === void 0 ? void 0 : openingMessage.agent.outputVariables) === null || _a === void 0 ? void 0 : _a.find((i) => i.name === RuntimeOutputVariable.openingMessage); }, [openingMessage === null || openingMessage === void 0 ? void 0 : openingMessage.agent]);
     const openingMessageComponentId = ((_b = openingMessageOutput === null || openingMessageOutput === void 0 ? void 0 : openingMessageOutput.appearance) === null || _b === void 0 ? void 0 : _b.componentId) ||
@@ -26,6 +27,6 @@ const OpeningMessageView = memo(({ isMessagesEmpty }) => {
         return null;
     }
     const children = (_jsxs(MessageBodyContainer, { children: [openingMessage && openingMessageOutput && openingMessageComponentId && (_jsx(CustomComponentRenderer, { instanceId: openingMessageOutput.id, componentId: openingMessageComponentId, properties: (_f = openingMessageOutput.appearance) === null || _f === void 0 ? void 0 : _f.componentProperties, props: { output: openingMessageOutput, outputValue: openingMessage.message } })), isMessagesEmpty && openingQuestionsComponentId && (_jsx(CustomComponentRenderer, { instanceId: agent.id, componentId: openingQuestionsComponentId, properties: (_g = openingQuestionsOutput === null || openingQuestionsOutput === void 0 ? void 0 : openingQuestionsOutput.appearance) === null || _g === void 0 ? void 0 : _g.componentProperties, props: { output: openingQuestionsOutput } }))] }));
-    return hideAgentAvatar ? (children) : (_jsx(UserInfo, { name: ((_h = openingMessage === null || openingMessage === void 0 ? void 0 : openingMessage.profile) !== null && _h !== void 0 ? _h : profile).name, did: (_j = globalThis.blocklet) === null || _j === void 0 ? void 0 : _j.appId, avatar: ((_k = openingMessage === null || openingMessage === void 0 ? void 0 : openingMessage.profile) !== null && _k !== void 0 ? _k : profile).avatar, alignItems: "flex-start", children: children }));
+    return hideAgentAvatar ? (children) : (_jsx(UserInfo, { name: ((_h = openingMessage === null || openingMessage === void 0 ? void 0 : openingMessage.profile) !== null && _h !== void 0 ? _h : profile).name, did: (_j = globalThis.blocklet) === null || _j === void 0 ? void 0 : _j.appId, avatar: ((_k = openingMessage === null || openingMessage === void 0 ? void 0 : openingMessage.profile) !== null && _k !== void 0 ? _k : profile).avatar, alignItems: "flex-start", UserNameProps: { sx: { color: hasBg ? 'white' : undefined } }, children: children }));
 });
 export default OpeningMessageView;

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

@@ -17,7 +17,7 @@ import SimpleHeader from '../../components/Header/SimpleHeader';
 import SimpleLayout from '../../components/Layout/SimpleLayout';
 import ScrollView from '../../components/ScrollView';
 import { useActiveAgent } from '../../contexts/ActiveAgent';
-import { ComponentPreferencesProvider } from '../../contexts/ComponentPreferences';
+import { ComponentPreferencesProvider, useComponentPreferences } from '../../contexts/ComponentPreferences';
 import CurrentAgentProvider from '../../contexts/CurrentAgent';
 import { useHeaderMenu } from '../../hooks/use-header-menu';
 import { useAutoLoadSessionState, useCurrentSessionState, useSessionState } from '../../state/session';
@@ -30,6 +30,9 @@ export default function SimpleChat(_a) {
     return (_jsx(ComponentPreferencesProvider, Object.assign({}, preferences, { children: _jsxs(ScrollView, Object.assign({}, scrollViewProps, { children: [_jsx(BackgroundImage, {}), _jsx(SimpleChatView, {})] })) })));
 }
 function SimpleChatView() {
+    var _a;
+    const preferences = useComponentPreferences();
+    const hasBg = !!((_a = preferences === null || preferences === void 0 ? void 0 : preferences.backgroundImage) === null || _a === void 0 ? void 0 : _a.url);
     const { activeAgentId } = useActiveAgent();
     // auto scroll to bottom when new message is sent
     const running = useCurrentSessionState((s) => s === null || s === void 0 ? void 0 : s.running);
@@ -42,7 +45,7 @@ function SimpleChatView() {
     const sessionLoading = useCurrentSessionState((s) => s === null || s === void 0 ? void 0 : s.loading);
     const loading = useSessionState((s) => s === null || s === void 0 ? void 0 : s.loading) || sessionLoading;
     useHeaderMenu();
-    return (_jsxs(SimpleLayout, { px: 0, children: [_jsx(SimpleHeader, { px: 4 }), loading ? (_jsx(Box, { textAlign: "center", my: 10, children: _jsx(CircularProgress, { size: 24 }) })) : (_jsxs(_Fragment, { children: [_jsx(CurrentAgentProvider, { agentId: activeAgentId, children: _jsx(MessagesView, { className: "aigne-outputs aigne-simple-chat-outputs", flexGrow: (messages === null || messages === void 0 ? void 0 : messages.length) ? 1 : 0, pb: (messages === null || messages === void 0 ? void 0 : messages.length) ? 10 : 2, px: { xs: 2, sm: 3 } }) }), _jsx(CurrentAgentProvider, { agentId: activeAgentId, children: _jsx(InputsView, { className: "aigne-inputs aigne-simple-chat-inputs", sx: {
+    return (_jsxs(SimpleLayout, { px: 0, children: [_jsx(SimpleHeader, { px: 4, sx: { color: hasBg ? 'white' : undefined } }), loading ? (_jsx(Box, { textAlign: "center", my: 10, children: _jsx(CircularProgress, { size: 24 }) })) : (_jsxs(_Fragment, { children: [_jsx(CurrentAgentProvider, { agentId: activeAgentId, children: _jsx(MessagesView, { className: "aigne-outputs aigne-simple-chat-outputs", flexGrow: (messages === null || messages === void 0 ? void 0 : messages.length) ? 1 : 0, pb: (messages === null || messages === void 0 ? void 0 : messages.length) ? 10 : 2, px: { xs: 2, sm: 3 } }) }), _jsx(CurrentAgentProvider, { agentId: activeAgentId, children: _jsx(InputsView, { className: "aigne-inputs aigne-simple-chat-inputs", sx: {
                                 position: 'sticky',
                                 bottom: 0,
                                 py: 2,

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

@@ -21,7 +21,6 @@ var __rest = (this && this.__rest) || function (s, e) {
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 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 { Masonry } from '@mui/lab';
 import { Box, Button, Chip, Container, IconButton, Stack, ThemeProvider, Tooltip, Typography, createTheme, useTheme, } from '@mui/material';
@@ -32,6 +31,7 @@ import { useActiveAgent } from '../../contexts/ActiveAgent';
 import CurrentAgentProvider from '../../contexts/CurrentAgent';
 import CurrentMessageProvider from '../../contexts/CurrentMessage';
 import useAppearances from '../../hooks/use-appearances';
+import { useRuntimeState } from '../../state/runtime';
 import { useAutoLoadSessionState, useCurrentSessionState, useSessionState } from '../../state/session';
 import { CodeRenderByMessageMemo as CodeRenderByMessage } from './components/CodePreview';
 import ConfirmDialog from './components/ConfirmDialog';
@@ -90,9 +90,11 @@ export default function Page() {
     return (_jsx(V0RuntimeProvider, { children: _jsx(V0Page, {}) }));
 }
 function V0ListRender() {
+    var _a, _b;
     const ConfirmDialogRef = useRef();
     const { sessions: sessionsList, setCurrentSessionId, loadLatestMessagesForAllSessions, sessionMap, deleteSession, loading, } = useSessionState((s) => s) || {};
     const { isMobile } = useV0RuntimeContext();
+    const { agent } = useRuntimeState();
     const { t } = useLocaleContext();
     useEffect(() => {
         const loadData = () => __awaiter(this, void 0, void 0, function* () {
@@ -102,7 +104,7 @@ function V0ListRender() {
         });
         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: isMobile ? 3 : 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: {
+    return (_jsxs(Box, { flex: 1, children: [_jsx(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') }), _jsx(Typography, { variant: "h5", color: "textColor", sx: Object.assign(Object.assign({}, 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 ? (_jsx(Loading, { sx: {
                     position: 'relative',
                     height: '40vh',
                     width: '100%',
@@ -111,7 +113,7 @@ function V0ListRender() {
                     display: 'flex',
                     alignContent: 'center',
                     justifyContent: 'center',
-                }, children: [(sessionsList === null || sessionsList === void 0 ? void 0 : sessionsList.length) ? (_jsx(Masonry, { columns: { xs: 1, sm: 2, md: 4, lg: 4 }, sequential: true, spacing: 2, children: sessionsList === null || sessionsList === void 0 ? void 0 : sessionsList.map((item) => {
+                }, children: [(sessionsList === null || sessionsList === void 0 ? void 0 : sessionsList.length) ? (_jsx(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(-1);
@@ -171,11 +173,18 @@ function V0ListRender() {
 }
 function V0DetailRender() {
     const { setCurrentSessionId } = useSessionState((s) => s) || {};
-    const { messages: messagesList, loading } = useCurrentSessionState((s) => s) || {};
+    const { messages: messagesListOriginal, loading } = useCurrentSessionState((s) => s) || {};
     const { currentMessageTaskId, setCurrentMessageTaskId, propertiesValueMap, isMobile } = useV0RuntimeContext();
     const [sliderOpenInMobile, setSliderOpenInMobile] = useState(!isMobile);
     const { t } = useLocaleContext();
-    const currentMessage = messagesList === null || messagesList === void 0 ? void 0 : messagesList.find((item) => item.taskId === currentMessageTaskId);
+    // FIXME: 现在临时把 error 的消息隐藏了，后续需要优化
+    const messagesList = 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.result) === null || _a === void 0 ? void 0 : _a.objects) === null || _b === void 0 ? void 0 : _b.length)) ||
+            message.taskId === currentMessageTaskId ||
+            index === messagesListOriginal.length - 1;
+    });
+    const currentMessage = messagesList === null || messagesList === void 0 ? void 0 : messagesList.find((message) => message.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);
@@ -235,7 +244,7 @@ function V0DetailRender() {
                                     justifyContent: 'center',
                                     flexDirection: 'column',
                                     gap: 1,
-                                }, children: _jsxs(Box, { onClick: () => {
+                                }, children: _jsxs(Box, { id: taskId, onClick: () => {
                                         // @ts-ignore
                                         setCurrentMessageTaskId(item.taskId);
                                     }, 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': {

package/lib/esm/builtin/async/ai-runtime/runtime-components/V0/components/CodePreview.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)
@@ -9,20 +18,75 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Box } from '@mui/material';
-import { memo, useCallback } from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Icon } from '@iconify/react';
+import { Box, Typography } from '@mui/material';
+import { memo, useCallback, useState } from 'react';
 import CustomComponentRenderer from '../../../../../../components/CustomComponentRenderer';
 import { useLocaleContext } from '../../../../../locale';
+import LoadingButton from '../../../components/LoadingButton';
+import { useCurrentAgent } from '../../../contexts/CurrentAgent';
+import { useRuntimeState } from '../../../state/runtime';
 import MessageErrorView from '../../ChatOutput/MessageErrorView';
+import { useV0RuntimeContext } from '../contexts/V0Runtime';
 import { AIRunningLoading } from './Loading';
+import TransparentTooltip from './TransparentTooltip';
 const codeField = 'code';
+function RetryComponent({ message, tip }) {
+    const { t } = useLocaleContext();
+    const { execute } = useRuntimeState();
+    const { aid } = useCurrentAgent();
+    const { setCurrentMessageTaskId } = useV0RuntimeContext();
+    const [loading, setLoading] = useState(false);
+    return (_jsxs(Box, { sx: {
+            width: '100%',
+            height: '100%',
+            display: 'flex',
+            flexDirection: 'column',
+            justifyContent: 'flex-start',
+            alignItems: 'center',
+            gap: 2,
+            p: 4,
+        }, children: [_jsx(Box, { component: Icon, icon: "unjs:automd", sx: {
+                    mt: 6,
+                    fontSize: 120,
+                } }), _jsxs(Typography, { variant: "h6", sx: {
+                    display: 'flex',
+                    alignItems: 'center',
+                }, children: [tip || t('v0.retryTip'), _jsx(TransparentTooltip, { arrow: true, placement: "top", title: _jsx(MessageErrorView, { error: (message === null || message === void 0 ? void 0 : message.error) || new Error('Empty response from AI or Code not found'), sx: {
+                                mr: 0,
+                            } }), children: _jsx(Box, { component: Icon, icon: "akar-icons:info", sx: {
+                                ml: 1,
+                            } }) })] }), _jsx(LoadingButton, { variant: "contained", loading: loading, color: "primary", onClick: () => __awaiter(this, void 0, void 0, function* () {
+                    setLoading(true);
+                    try {
+                        const { parameters } = message || {};
+                        // remove $ starting parameters object
+                        const canUseParameters = Object.fromEntries(Object.entries(parameters || {}).filter(([key]) => !key.startsWith('$')));
+                        yield execute({
+                            aid,
+                            parameters: canUseParameters,
+                            onResponseStart: () => {
+                                setCurrentMessageTaskId(undefined);
+                            },
+                        });
+                    }
+                    catch (error) {
+                        console.error(error);
+                    }
+                    finally {
+                        setLoading(false);
+                    }
+                }), children: t('v0.retry') })] }));
+}
 export default function CodePreview(_a) {
-    var { componentId = 'mock-dev-component', code, propertiesValue } = _a, restProps = __rest(_a, ["componentId", "code", "propertiesValue"]);
-    const { locale } = useLocaleContext();
+    var { componentId = 'mock-dev-component', code, propertiesValue, message } = _a, restProps = __rest(_a, ["componentId", "code", "propertiesValue", "message"]);
+    const { t, 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: {
+    return (_jsx(Box, Object.assign({ id: componentId, className: "code-preview-wrapper" }, restProps, { children: _jsx(CustomComponentRenderer, { componentId: componentId, locale: locale, props: propertiesValue || {}, 
+            // eslint-disable-next-line react/no-unstable-nested-components
+            fallbackRender: () => _jsx(RetryComponent, { message: message, tip: t('v0.errorCodeTip') }), dev: {
                 components: {
                     [componentId]: {
                         data: {
@@ -59,24 +123,15 @@ export function CodeRenderByMessage({ zoom, message, minHeight = 200, sx, proper
                     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,
-                    } }) }));
+        if ((message === null || message === void 0 ? void 0 : message.error) || !((_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(RetryComponent, { message: message });
         }
         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, _c;
             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]) || ((_c = propertiesValueMap === null || propertiesValueMap === void 0 ? void 0 : propertiesValueMap[taskId]) === null || _c === void 0 ? void 0 : _c.en) || {} }, item.taskId));
+            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]) || ((_c = propertiesValueMap === null || propertiesValueMap === void 0 ? void 0 : propertiesValueMap[taskId]) === null || _c === void 0 ? void 0 : _c.en) || {}, message: message }, 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]);

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

@@ -0,0 +1,23 @@
+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 { Tooltip, styled, tooltipClasses } from '@mui/material';
+const TransparentTooltip = styled((_a) => {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return (_jsx(Tooltip, Object.assign({}, props, { classes: { popper: className } })));
+})(() => ({
+    [`& .${tooltipClasses.tooltip}`]: {
+        backgroundColor: 'transparent',
+        boxShadow: 'none',
+    },
+}));
+export default TransparentTooltip;

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

@@ -29,8 +29,13 @@ export default function UserQuestion({ question }) {
                     backgroundColor: 'grey.200',
                     maxWidth: 300,
                 }, children: _jsx(CopyButton, { locale: locale, unstyled: true, render: ({ copyButton, containerRef }) => {
-                        return (_jsx(Box, { ref: containerRef, display: "flex", alignItems: "center", sx: Object.assign(Object.assign({}, BASE_QUESTION_SX), { color: 'textColor' }), children: _jsx(ClickToCopy, { locale: locale, unstyled: true, disableHoverListener: true, disableFocusListener: true, disableTouchListener: true, children: _jsx(Tooltip, { placement: "bottom", arrow: true, title: _jsx(Box, { children: _jsxs(Typography, { sx: Object.assign(Object.assign({}, BASE_QUESTION_SX), { color: 'white' }), children: [question, _jsx(Box, { id: "copy-button-wrapper", component: "span", sx: {
-                                                        ml: 0.5,
-                                                    }, children: copyButton })] }) }), children: _jsx(Typography, { sx: Object.assign(Object.assign(Object.assign({}, BASE_QUESTION_SX), { textAlign: 'left', alignItems: 'center' }), getLineClamp(1)), children: question }) }) }) }));
+                        return (_jsx(Box, { ref: containerRef, display: "flex", alignItems: "center", sx: Object.assign(Object.assign({}, BASE_QUESTION_SX), { color: 'textColor' }), children: _jsx(ClickToCopy, { locale: locale, unstyled: true, disableHoverListener: true, disableFocusListener: true, disableTouchListener: true, children: _jsx(Tooltip, { placement: "bottom", arrow: true, title: _jsxs(Box, { sx: {
+                                            display: 'flex',
+                                            alignItems: 'center',
+                                        }, children: [_jsx(Typography, { sx: Object.assign(Object.assign({}, BASE_QUESTION_SX), { lineHeight: 1, color: 'white' }), children: question }), _jsx(Box, { id: "copy-button-wrapper", component: "span", sx: {
+                                                    ml: 0.5,
+                                                    mt: 0.25,
+                                                    fontSize: 14,
+                                                }, children: copyButton })] }), children: _jsx(Typography, { sx: Object.assign(Object.assign(Object.assign({}, BASE_QUESTION_SX), { textAlign: 'left', alignItems: 'center' }), getLineClamp(1)), children: question }) }) }) }));
                     } }) })] }));
 }

package/lib/esm/components/CustomComponentRenderer/index.js

@@ -23,7 +23,7 @@ export default function CustomComponentRenderer(_a) {
     var { dev } = _a, props = __rest(_a, ["dev"]);
     const inheritedDev = useDev();
     const BuiltinComponent = BuiltinComponents[props.componentId];
-    return (_jsx(ErrorBoundary, { fallbackRender: ErrorView, resetKeys: [Date.now()], children: _jsx(DevProvider, { dev: dev !== null && dev !== void 0 ? dev : inheritedDev, children: BuiltinComponent ? (_jsx(BuiltinComponent, Object.assign({}, props))) : (_jsx(ComponentRenderer, Object.assign({}, props, { instanceId: (_b = props.instanceId) !== null && _b !== void 0 ? _b : props.componentId }))) }) }));
+    return (_jsx(ErrorBoundary, { fallbackRender: (props === null || props === void 0 ? void 0 : props.fallbackRender) || ErrorView, resetKeys: [Date.now()], children: _jsx(DevProvider, { dev: dev !== null && dev !== void 0 ? dev : inheritedDev, children: BuiltinComponent ? (_jsx(BuiltinComponent, Object.assign({}, props))) : (_jsx(ComponentRenderer, Object.assign({}, props, { instanceId: (_b = props.instanceId) !== null && _b !== void 0 ? _b : props.componentId }))) }) }));
 }
 const BuiltinComponents = {
     'blocklet-react-component': BlockletReactComponentRenderer,
@@ -39,7 +39,8 @@ function ComponentRenderer(_a) {
     }
     const component = useComponent(Object.assign(Object.assign({}, props), { dev }));
     if (component === null || component === void 0 ? void 0 : component.error) {
-        return _jsx(ErrorView, { error: component.error });
+        // throw to outer error boundary
+        throw component.error;
     }
     if (component === null || component === void 0 ? void 0 : component.Component) {
         return (_jsx(Renderer, Object.assign({ renderCount: renderCount + 1 }, props, { Component: component.Component, props: Object.assign(Object.assign({}, component.props), props.props) })));

package/lib/esm/components/CustomComponentRenderer/state.js

@@ -120,7 +120,7 @@ export function useComponent({ instanceId, componentId, properties, locale, dev
     const preload = usePreloadComponent({ instanceId, componentId, properties, locale, dev });
     return {
         Component: (_a = transpile === null || transpile === void 0 ? void 0 : transpile.Component) !== null && _a !== void 0 ? _a : preload === null || preload === void 0 ? void 0 : preload.Component,
-        props: (_b = preload === null || preload === void 0 ? void 0 : preload.props) !== null && _b !== void 0 ? _b : transpile === null || transpile === void 0 ? void 0 : transpile.props,
+        props: (_b = transpile === null || transpile === void 0 ? void 0 : transpile.props) !== null && _b !== void 0 ? _b : preload === null || preload === void 0 ? void 0 : preload.props,
         error: transpile === null || transpile === void 0 ? void 0 : transpile.error,
     };
 }