@blocklet/pages-kit 0.2.326 → 0.2.328

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

@@ -44,6 +44,6 @@ function SimpleHeader(_a) {
     const { agent } = (0, runtime_1.useRuntimeState)();
     const title = agent.project.name;
     const { description } = agent.project;
-    return ((0, jsx_runtime_1.jsx)(material_1.Stack, Object.assign({ gap: 2, mt: 8, mb: 4 }, props, { className: (0, css_1.cx)('aigne-header aigne-simple-header', props.className), children: (0, jsx_runtime_1.jsxs)(react_wrap_balancer_1.Provider, { children: [title && ((0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ width: "100%", component: "h5", fontSize: 30, fontWeight: 700, textAlign: "center" }, TitleProps, { children: (0, jsx_runtime_1.jsx)(react_wrap_balancer_1.default, { children: title }) }))), description && ((0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ width: "100%", textAlign: "center" }, DescriptionProps, { children: (0, jsx_runtime_1.jsx)(react_wrap_balancer_1.default, { children: description }) })))] }) })));
+    return ((0, jsx_runtime_1.jsx)(material_1.Stack, Object.assign({ gap: 2, mt: 8, mb: 4 }, props, { className: (0, css_1.cx)('aigne-header aigne-simple-header', props.className), children: (0, jsx_runtime_1.jsxs)(react_wrap_balancer_1.Provider, { children: [title && ((0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ width: "100%", variant: "h4", fontSize: 30, fontWeight: 700, textAlign: "center" }, TitleProps, { children: (0, jsx_runtime_1.jsx)(react_wrap_balancer_1.default, { children: title }) }))), description && ((0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ width: "100%", textAlign: "center" }, DescriptionProps, { children: (0, jsx_runtime_1.jsx)(react_wrap_balancer_1.default, { children: description }) })))] }) })));
 }
 exports.default = SimpleHeader;

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

@@ -21,18 +21,32 @@ const react_1 = require("react");
 const runtime_1 = require("../state/runtime");
 const GlobalLoading_1 = __importDefault(require("./GlobalLoading"));
 function ThemeProvider({ children }) {
-    const { primaryColor } = (0, runtime_1.useRuntimeState)().agent.project;
+    const { appearance } = (0, runtime_1.useRuntimeState)().agent.project;
     const theme = (0, material_1.useTheme)();
     const newTheme = (0, react_1.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: {
@@ -98,30 +112,28 @@ function ThemeProvider({ children }) {
                 },
             },
         };
-        const paletteTheme = (0, material_1.createTheme)({
+        const tempTheme = (0, material_1.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 (0, material_1.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',
                 },
@@ -133,20 +145,26 @@ 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 ((0, jsx_runtime_1.jsxs)(material_1.ThemeProvider, { theme: newTheme, children: [(0, jsx_runtime_1.jsx)(material_1.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,
-                    },
-                } }), (0, jsx_runtime_1.jsx)(GlobalLoading_1.default, { sx: { position: 'fixed', left: 0, top: 0, width: '100%', zIndex: 'snackbar' } }), (0, jsx_runtime_1.jsx)(react_1.Suspense, { fallback: (0, jsx_runtime_1.jsx)(material_1.Stack, { flexGrow: 1, alignItems: "center", justifyContent: "center", children: (0, jsx_runtime_1.jsx)(material_1.CircularProgress, { size: 24 }) }), children: children })] }));
+    return ((0, jsx_runtime_1.jsx)(material_1.ThemeProvider, { theme: newTheme, children: (0, jsx_runtime_1.jsxs)(material_1.CssBaseline, { children: [(0, jsx_runtime_1.jsx)(material_1.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,
+                        },
+                    }) }), (0, jsx_runtime_1.jsx)(GlobalLoading_1.default, { sx: { position: 'fixed', left: 0, top: 0, width: '100%', zIndex: 'snackbar' } }), (0, jsx_runtime_1.jsx)(react_1.Suspense, { fallback: (0, jsx_runtime_1.jsx)(material_1.Stack, { flexGrow: 1, alignItems: "center", justifyContent: "center", children: (0, jsx_runtime_1.jsx)(material_1.CircularProgress, { size: 24 }) }), children: children })] }) }));
 }
 exports.default = ThemeProvider;

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

@@ -22,18 +22,16 @@ const dayjs_1 = __importDefault(require("dayjs"));
 const react_1 = require("react");
 const ux_1 = require("../../../arcblock/ux");
 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 ((0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ className: "user-info", alignItems: "center", direction: reverse ? 'row-reverse' : 'row', gap: 1.5 }, restProps, { children: [(avatar || did) && ((0, jsx_runtime_1.jsx)(material_1.Box, { sx: {
                     display: 'flex',
                     alignItems: 'center',
                     maxHeight: 44,
-                }, children: (0, jsx_runtime_1.jsx)(ux_1.Avatar, { size: 40, did: did, variant: "circle", shape: "circle", src: avatar }) })), (0, jsx_runtime_1.jsxs)(material_1.Box, { flex: 1, width: 0, children: [(0, jsx_runtime_1.jsxs)(UserName, { sx: {
-                            justifyContent: reverse ? 'flex-end' : 'flex-start',
-                        }, children: [name || '', time && ((0, jsx_runtime_1.jsx)(UserTime, { time: time, sx: {
+                }, children: (0, jsx_runtime_1.jsx)(ux_1.Avatar, { size: 40, did: did, variant: "circle", shape: "circle", src: avatar }) })), (0, jsx_runtime_1.jsxs)(material_1.Box, { flex: 1, width: 0, children: [(0, jsx_runtime_1.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 && ((0, jsx_runtime_1.jsx)(UserTime, { time: time, sx: {
                                     fontSize: 12,
                                     lineHeight: '24px',
-                                    color: 'text.secondary',
-                                } }))] }), showDID && did && (0, jsx_runtime_1.jsx)(material_1.Box, { component: DID_1.default, did: did, copyable: false, size: 14, responsive: true, sx: { mt: -0.25 } }), (0, jsx_runtime_1.jsx)(material_1.Box, { flex: 1, children: children })] })] })));
+                                    opacity: 0.8,
+                                } }))] })), showDID && did && (0, jsx_runtime_1.jsx)(material_1.Box, { component: DID_1.default, did: did, copyable: false, size: 14, responsive: true, sx: { mt: -0.25 } }), (0, jsx_runtime_1.jsx)(material_1.Box, { flex: 1, children: children })] })] })));
 }
 exports.default = UserInfo;
 function UserName(_a) {

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

@@ -97,8 +97,8 @@ exports.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?',
@@ -109,6 +109,9 @@ exports.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: {
@@ -206,8 +209,8 @@ exports.translations = {
         session: '会话',
         loadMore: '加载更多',
         v0: {
-            title: 'AIGNE v0',
-            description: 'AIGNE v0 是一个基于人工智能的代码工具，可以帮助您快速生成代码。',
+            title: 'Mock 0',
+            description: 'Mock 0 是一个基于人工智能的代码工具，可以帮助您快速生成代码。',
             noData: '暂无生成记录，点击下方按钮开始生成吧！',
             deleteSessionTitle: '删除生成记录',
             deleteSessionTip: '确定要删除此生成记录吗？',
@@ -218,6 +221,9 @@ exports.translations = {
             codePreviewTip: '以下是代码预览，您可以查看生成的代码，目前还不支持编辑。',
             hideSlider: '隐藏版本历史',
             showSlider: '显示版本历史',
+            retryTip: 'Agent 算力不足，请稍后重试...',
+            retry: '重试',
+            errorCodeTip: 'Agent 发现代码存在一些语法错误，请求重试...',
         },
     },
 };

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

@@ -50,15 +50,17 @@ const CurrentMessage_1 = __importDefault(require("../../contexts/CurrentMessage"
 const use_appearances_1 = __importStar(require("../../hooks/use-appearances"));
 const UserMessageView_1 = __importDefault(require("./UserMessageView"));
 const MessageView = (0, react_1.memo)(({ message }) => {
-    var _a, _b, _c, _d, _e;
+    var _a, _b, _c, _d, _e, _f;
+    const preferences = (0, ComponentPreferences_1.useComponentPreferences)();
+    const hasBg = !!((_a = preferences === null || preferences === void 0 ? void 0 : preferences.backgroundImage) === null || _a === void 0 ? void 0 : _a.url);
     const { session: authSession } = (0, session_1.useSessionContext)();
     const { appearanceOutput } = (0, use_appearances_1.default)({ agentId: message.assistantId });
     const profile = (0, use_appearances_1.useProfile)({ agentId: message.assistantId });
-    const { hideAgentAvatar, hideUserInputs } = (_a = (0, ComponentPreferences_1.useComponentPreferences)()) !== null && _a !== void 0 ? _a : {};
+    const { hideAgentAvatar, hideUserInputs } = (_b = (0, ComponentPreferences_1.useComponentPreferences)()) !== null && _b !== void 0 ? _b : {};
     if (!(appearanceOutput === null || appearanceOutput === void 0 ? void 0 : appearanceOutput.componentId))
         return null;
     const agentMessage = ((0, jsx_runtime_1.jsx)(MessageBodyContainer, { messageRole: "assistant", children: (0, jsx_runtime_1.jsx)(CustomComponentRenderer_1.default, { componentId: appearanceOutput.componentId, properties: appearanceOutput.componentProperties }) }));
-    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.jsxs)(material_1.Stack, { gap: 2, children: [!hideUserInputs && ((0, jsx_runtime_1.jsx)(material_1.Box, { children: (0, jsx_runtime_1.jsx)(UserInfo_1.default, { 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: (0, jsx_runtime_1.jsx)(material_1.Stack, { sx: { alignItems: 'flex-end' }, children: (0, jsx_runtime_1.jsx)(MessageBodyContainer, { messageRole: "user", children: (0, jsx_runtime_1.jsx)(UserMessageView_1.default, {}) }) }) }) })), (0, jsx_runtime_1.jsx)(material_1.Box, { children: !hideAgentAvatar ? ((0, jsx_runtime_1.jsx)(UserInfo_1.default, { 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 ((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.jsxs)(material_1.Stack, { gap: 2, children: [!hideUserInputs && ((0, jsx_runtime_1.jsx)(material_1.Box, { children: (0, jsx_runtime_1.jsx)(UserInfo_1.default, { 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: (0, jsx_runtime_1.jsx)(material_1.Stack, { sx: { alignItems: 'flex-end' }, children: (0, jsx_runtime_1.jsx)(MessageBodyContainer, { messageRole: "user", children: (0, jsx_runtime_1.jsx)(UserMessageView_1.default, {}) }) }) }) })), (0, jsx_runtime_1.jsx)(material_1.Box, { children: !hideAgentAvatar ? ((0, jsx_runtime_1.jsx)(UserInfo_1.default, { 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) })] }) }) }));
 });
 exports.default = MessageView;
 function MessageBodyContainer(_a) {
@@ -68,6 +70,6 @@ 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 ((0, jsx_runtime_1.jsx)(material_1.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) })));
 }
 exports.MessageBodyContainer = MessageBodyContainer;

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

@@ -15,7 +15,8 @@ const use_appearances_1 = require("../../hooks/use-appearances");
 const MessageView_1 = require("./MessageView");
 const OpeningMessageView = (0, react_1.memo)(({ isMessagesEmpty }) => {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
-    const { hideAgentAvatar } = (_a = (0, ComponentPreferences_1.useComponentPreferences)()) !== null && _a !== void 0 ? _a : {};
+    const { hideAgentAvatar, backgroundImage } = (_a = (0, ComponentPreferences_1.useComponentPreferences)()) !== null && _a !== void 0 ? _a : {};
+    const hasBg = !!(backgroundImage === null || backgroundImage === void 0 ? void 0 : backgroundImage.url);
     const openingMessage = (0, use_appearances_1.useOpeningMessage)();
     const openingMessageOutput = (0, react_1.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 === types_1.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) ||
@@ -31,6 +32,6 @@ const OpeningMessageView = (0, react_1.memo)(({ isMessagesEmpty }) => {
         return null;
     }
     const children = ((0, jsx_runtime_1.jsxs)(MessageView_1.MessageBodyContainer, { children: [openingMessage && openingMessageOutput && openingMessageComponentId && ((0, jsx_runtime_1.jsx)(CustomComponentRenderer_1.default, { 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 && ((0, jsx_runtime_1.jsx)(CustomComponentRenderer_1.default, { 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) : ((0, jsx_runtime_1.jsx)(UserInfo_1.default, { 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) : ((0, jsx_runtime_1.jsx)(UserInfo_1.default, { 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 }));
 });
 exports.default = OpeningMessageView;

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

@@ -36,6 +36,9 @@ function SimpleChat(_a) {
 }
 exports.default = SimpleChat;
 function SimpleChatView() {
+    var _a;
+    const preferences = (0, ComponentPreferences_1.useComponentPreferences)();
+    const hasBg = !!((_a = preferences === null || preferences === void 0 ? void 0 : preferences.backgroundImage) === null || _a === void 0 ? void 0 : _a.url);
     const { activeAgentId } = (0, ActiveAgent_1.useActiveAgent)();
     // auto scroll to bottom when new message is sent
     const running = (0, session_1.useCurrentSessionState)((s) => s === null || s === void 0 ? void 0 : s.running);
@@ -48,7 +51,7 @@ function SimpleChatView() {
     const sessionLoading = (0, session_1.useCurrentSessionState)((s) => s === null || s === void 0 ? void 0 : s.loading);
     const loading = (0, session_1.useSessionState)((s) => s === null || s === void 0 ? void 0 : s.loading) || sessionLoading;
     (0, use_header_menu_1.useHeaderMenu)();
-    return ((0, jsx_runtime_1.jsxs)(SimpleLayout_1.default, { px: 0, children: [(0, jsx_runtime_1.jsx)(SimpleHeader_1.default, { px: 4 }), loading ? ((0, jsx_runtime_1.jsx)(material_1.Box, { textAlign: "center", my: 10, children: (0, jsx_runtime_1.jsx)(material_1.CircularProgress, { size: 24 }) })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(CurrentAgent_1.default, { agentId: activeAgentId, children: (0, jsx_runtime_1.jsx)(MessagesView_1.default, { 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 } }) }), (0, jsx_runtime_1.jsx)(CurrentAgent_1.default, { agentId: activeAgentId, children: (0, jsx_runtime_1.jsx)(InputsView_1.default, { className: "aigne-inputs aigne-simple-chat-inputs", sx: {
+    return ((0, jsx_runtime_1.jsxs)(SimpleLayout_1.default, { px: 0, children: [(0, jsx_runtime_1.jsx)(SimpleHeader_1.default, { px: 4, sx: { color: hasBg ? 'white' : undefined } }), loading ? ((0, jsx_runtime_1.jsx)(material_1.Box, { textAlign: "center", my: 10, children: (0, jsx_runtime_1.jsx)(material_1.CircularProgress, { size: 24 }) })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(CurrentAgent_1.default, { agentId: activeAgentId, children: (0, jsx_runtime_1.jsx)(MessagesView_1.default, { 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 } }) }), (0, jsx_runtime_1.jsx)(CurrentAgent_1.default, { agentId: activeAgentId, children: (0, jsx_runtime_1.jsx)(InputsView_1.default, { className: "aigne-inputs aigne-simple-chat-inputs", sx: {
                                 position: 'sticky',
                                 bottom: 0,
                                 py: 2,

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

@@ -26,7 +26,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
 const Empty_1 = __importDefault(require("@arcblock/ux/lib/Empty"));
 const RelativeTime_1 = __importDefault(require("@arcblock/ux/lib/RelativeTime"));
-// import { useRuntimeState } from '@blocklet/pages-kit/builtin/async/ai-runtime';
 const react_1 = require("@iconify/react");
 const lab_1 = require("@mui/lab");
 const material_1 = require("@mui/material");
@@ -37,6 +36,7 @@ const ActiveAgent_1 = require("../../contexts/ActiveAgent");
 const CurrentAgent_1 = __importDefault(require("../../contexts/CurrentAgent"));
 const CurrentMessage_1 = __importDefault(require("../../contexts/CurrentMessage"));
 const use_appearances_1 = __importDefault(require("../../hooks/use-appearances"));
+const runtime_1 = require("../../state/runtime");
 const session_1 = require("../../state/session");
 const CodePreview_1 = require("./components/CodePreview");
 const ConfirmDialog_1 = __importDefault(require("./components/ConfirmDialog"));
@@ -96,9 +96,11 @@ function Page() {
 }
 exports.default = Page;
 function V0ListRender() {
+    var _a, _b;
     const ConfirmDialogRef = (0, react_2.useRef)();
     const { sessions: sessionsList, setCurrentSessionId, loadLatestMessagesForAllSessions, sessionMap, deleteSession, loading, } = (0, session_1.useSessionState)((s) => s) || {};
     const { isMobile } = (0, V0Runtime_1.useV0RuntimeContext)();
+    const { agent } = (0, runtime_1.useRuntimeState)();
     const { t } = (0, locale_1.useLocaleContext)();
     (0, react_2.useEffect)(() => {
         const loadData = () => __awaiter(this, void 0, void 0, function* () {
@@ -108,7 +110,7 @@ function V0ListRender() {
         });
         loadData();
     }, [sessionsList === null || sessionsList === void 0 ? void 0 : sessionsList.length]);
-    return ((0, jsx_runtime_1.jsxs)(material_1.Box, { flex: 1, children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "h2", color: "textColor", sx: { fontWeight: 'bold', mt: isMobile ? 3 : 6 }, children: 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: {
+    return ((0, jsx_runtime_1.jsxs)(material_1.Box, { flex: 1, children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "h2", color: "textColor", sx: { fontWeight: 'bold', mt: isMobile ? 3 : 6 }, children: ((_a = agent === null || agent === void 0 ? void 0 : agent.project) === null || _a === void 0 ? void 0 : _a.name) || t('v0.title') }), (0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "h5", color: "textColor", sx: Object.assign(Object.assign({}, (0, utils_1.getLineClamp)(5)), { mt: 2 }), children: ((_b = agent === null || agent === void 0 ? void 0 : agent.project) === null || _b === void 0 ? void 0 : _b.description) || t('v0.description') }), loading ? ((0, jsx_runtime_1.jsx)(Loading_1.default, { sx: {
                     position: 'relative',
                     height: '40vh',
                     width: '100%',
@@ -117,7 +119,7 @@ function V0ListRender() {
                     display: 'flex',
                     alignContent: 'center',
                     justifyContent: 'center',
-                }, children: [(sessionsList === null || sessionsList === void 0 ? void 0 : sessionsList.length) ? ((0, jsx_runtime_1.jsx)(lab_1.Masonry, { columns: { xs: 1, sm: 2, md: 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) ? ((0, jsx_runtime_1.jsx)(lab_1.Masonry, { columns: { xs: 1, sm: 2, md: 3, lg: 4 }, sequential: true, spacing: 2, children: sessionsList === null || sessionsList === void 0 ? void 0 : sessionsList.map((item) => {
                             var _a, _b;
                             const { name, id } = item;
                             const latestMessage = (_b = (_a = sessionMap === null || sessionMap === void 0 ? void 0 : sessionMap[id]) === null || _a === void 0 ? void 0 : _a.messages) === null || _b === void 0 ? void 0 : _b.at(-1);
@@ -177,11 +179,18 @@ function V0ListRender() {
 }
 function V0DetailRender() {
     const { setCurrentSessionId } = (0, session_1.useSessionState)((s) => s) || {};
-    const { messages: messagesList, loading } = (0, session_1.useCurrentSessionState)((s) => s) || {};
+    const { messages: messagesListOriginal, loading } = (0, session_1.useCurrentSessionState)((s) => s) || {};
     const { currentMessageTaskId, setCurrentMessageTaskId, propertiesValueMap, isMobile } = (0, V0Runtime_1.useV0RuntimeContext)();
     const [sliderOpenInMobile, setSliderOpenInMobile] = (0, react_2.useState)(!isMobile);
     const { t } = (0, locale_1.useLocaleContext)();
-    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);
     (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);
@@ -241,7 +250,7 @@ function V0DetailRender() {
                                     justifyContent: 'center',
                                     flexDirection: 'column',
                                     gap: 1,
-                                }, children: (0, jsx_runtime_1.jsxs)(material_1.Box, { onClick: () => {
+                                }, children: (0, jsx_runtime_1.jsxs)(material_1.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/cjs/builtin/async/ai-runtime/runtime-components/V0/components/CodePreview.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)
@@ -16,19 +25,74 @@ var __importDefault = (this && this.__importDefault) || function (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 react_1 = require("@iconify/react");
 const material_1 = require("@mui/material");
-const react_1 = require("react");
+const react_2 = require("react");
 const CustomComponentRenderer_1 = __importDefault(require("../../../../../../components/CustomComponentRenderer"));
 const locale_1 = require("../../../../../locale");
+const LoadingButton_1 = __importDefault(require("../../../components/LoadingButton"));
+const CurrentAgent_1 = require("../../../contexts/CurrentAgent");
+const runtime_1 = require("../../../state/runtime");
 const MessageErrorView_1 = __importDefault(require("../../ChatOutput/MessageErrorView"));
+const V0Runtime_1 = require("../contexts/V0Runtime");
 const Loading_1 = require("./Loading");
+const TransparentTooltip_1 = __importDefault(require("./TransparentTooltip"));
 const codeField = 'code';
+function RetryComponent({ message, tip }) {
+    const { t } = (0, locale_1.useLocaleContext)();
+    const { execute } = (0, runtime_1.useRuntimeState)();
+    const { aid } = (0, CurrentAgent_1.useCurrentAgent)();
+    const { setCurrentMessageTaskId } = (0, V0Runtime_1.useV0RuntimeContext)();
+    const [loading, setLoading] = (0, react_2.useState)(false);
+    return ((0, jsx_runtime_1.jsxs)(material_1.Box, { sx: {
+            width: '100%',
+            height: '100%',
+            display: 'flex',
+            flexDirection: 'column',
+            justifyContent: 'flex-start',
+            alignItems: 'center',
+            gap: 2,
+            p: 4,
+        }, children: [(0, jsx_runtime_1.jsx)(material_1.Box, { component: react_1.Icon, icon: "unjs:automd", sx: {
+                    mt: 6,
+                    fontSize: 120,
+                } }), (0, jsx_runtime_1.jsxs)(material_1.Typography, { variant: "h6", sx: {
+                    display: 'flex',
+                    alignItems: 'center',
+                }, children: [tip || t('v0.retryTip'), (0, jsx_runtime_1.jsx)(TransparentTooltip_1.default, { arrow: true, placement: "top", title: (0, jsx_runtime_1.jsx)(MessageErrorView_1.default, { error: (message === null || message === void 0 ? void 0 : message.error) || new Error('Empty response from AI or Code not found'), sx: {
+                                mr: 0,
+                            } }), children: (0, jsx_runtime_1.jsx)(material_1.Box, { component: react_1.Icon, icon: "akar-icons:info", sx: {
+                                ml: 1,
+                            } }) })] }), (0, jsx_runtime_1.jsx)(LoadingButton_1.default, { 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') })] }));
+}
 function CodePreview(_a) {
-    var { componentId = 'mock-dev-component', code, propertiesValue } = _a, restProps = __rest(_a, ["componentId", "code", "propertiesValue"]);
-    const { locale } = (0, locale_1.useLocaleContext)();
+    var { componentId = 'mock-dev-component', code, propertiesValue, message } = _a, restProps = __rest(_a, ["componentId", "code", "propertiesValue", "message"]);
+    const { t, 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: {
+    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 || {}, 
+            // eslint-disable-next-line react/no-unstable-nested-components
+            fallbackRender: () => (0, jsx_runtime_1.jsx)(RetryComponent, { message: message, tip: t('v0.errorCodeTip') }), dev: {
                 components: {
                     [componentId]: {
                         data: {
@@ -45,7 +109,7 @@ function CodePreview(_a) {
             } }) }), componentId));
 }
 exports.default = CodePreview;
-exports.CodePreviewMemo = (0, react_1.memo)(CodePreview);
+exports.CodePreviewMemo = (0, react_2.memo)(CodePreview);
 function CodeRenderByMessage({ zoom, message, minHeight = 200, sx, propertiesValueMap, }) {
     var _a;
     const { locale } = (0, locale_1.useLocaleContext)();
@@ -56,7 +120,7 @@ function CodeRenderByMessage({ zoom, message, minHeight = 200, sx, propertiesVal
         },
     };
     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)(() => {
+    const ContentRender = (0, react_2.useCallback)(() => {
         var _a, _b, _c, _d;
         if (isMessageLoading) {
             return ((0, jsx_runtime_1.jsx)(material_1.Box, { className: "code-message-loading", sx: {
@@ -66,24 +130,15 @@ function CodeRenderByMessage({ zoom, message, minHeight = 200, sx, propertiesVal
                     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,
-                    } }) }));
+        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 (0, jsx_runtime_1.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 ((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]) || ((_c = propertiesValueMap === null || propertiesValueMap === void 0 ? void 0 : propertiesValueMap[taskId]) === null || _c === void 0 ? void 0 : _c.en) || {} }, item.taskId));
+            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]) || ((_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]);
@@ -92,7 +147,7 @@ function CodeRenderByMessage({ zoom, message, minHeight = 200, sx, propertiesVal
             } }), 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);
+exports.CodeRenderByMessageMemo = (0, react_2.memo)(CodeRenderByMessage);
 function getCurrentCodeByTaskId(message, taskId) {
     var _a, _b, _c, _d;
     // @ts-ignore

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

@@ -0,0 +1,25 @@
+"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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const material_1 = require("@mui/material");
+const TransparentTooltip = (0, material_1.styled)((_a) => {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return ((0, jsx_runtime_1.jsx)(material_1.Tooltip, Object.assign({}, props, { classes: { popper: className } })));
+})(() => ({
+    [`& .${material_1.tooltipClasses.tooltip}`]: {
+        backgroundColor: 'transparent',
+        boxShadow: 'none',
+    },
+}));
+exports.default = TransparentTooltip;

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

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

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

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

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

@@ -150,7 +150,7 @@ 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,
     };
 }