@blocklet/pages-kit 0.2.324 → 0.2.326

package/lib/cjs/builtin/async/ai-runtime/components/{MarkdownRenderer.js → MarkdownRenderer/index.js}

@@ -43,19 +43,12 @@ const material_1 = require("@mui/material");
 const react_2 = __importStar(require("react"));
 const react_markdown_1 = __importDefault(require("react-markdown"));
 const remark_gfm_1 = __importDefault(require("remark-gfm"));
-const locale_1 = require("../../../locale");
-const react_syntax_highlighter_1 = __importDefault(require("../../react-syntax-highlighter"));
-const ActionButton_1 = __importDefault(require("./ActionButton"));
+const locale_1 = require("../../../../locale");
+const react_syntax_highlighter_1 = __importDefault(require("../../../react-syntax-highlighter"));
+const ActionButton_1 = __importDefault(require("../ActionButton"));
 const ReactSyntaxHighlighter = react_2.default.lazy(() => (0, react_syntax_highlighter_1.default)().then((m) => ({ default: m.Prism })));
 const MarkdownRenderer = (0, material_1.styled)((props) => ((0, jsx_runtime_1.jsx)(react_markdown_1.default, Object.assign({}, props, { remarkPlugins: [remark_gfm_1.default], components: {
         pre: MarkdownPre,
-        code: (_a) => {
-            var { node, inline, className, children } = _a, props = __rest(_a, ["node", "inline", "className", "children"]);
-            if (!children)
-                return null;
-            const match = /language-(\w+)/.exec(className || '');
-            return !inline ? ((0, jsx_runtime_1.jsx)(react_2.Suspense, { children: (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ component: ReactSyntaxHighlighter, language: match === null || match === void 0 ? void 0 : match[1] }, props, { sx: { borderRadius: 1 }, children: String(children).replace(/\n$/, '') })) })) : ((0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ component: "code", className: className }, props, { children: children })));
-        },
         table: ({ className, children }) => {
             return ((0, jsx_runtime_1.jsx)(material_1.Box, { sx: { overflow: 'auto', my: 1 }, children: (0, jsx_runtime_1.jsx)("table", { className: className, children: children }) }));
         },
@@ -134,7 +127,8 @@ const MarkdownRenderer = (0, material_1.styled)((props) => ((0, jsx_runtime_1.js
   }
 `;
 exports.default = MarkdownRenderer;
-function MarkdownPre({ children }) {
+function MarkdownPre(_a) {
+    var { children } = _a, props = __rest(_a, ["children"]);
     const { t } = (0, locale_1.useLocaleContext)();
     const childrenProps = children === null || children === void 0 ? void 0 : children.props;
     if (!(childrenProps === null || childrenProps === void 0 ? void 0 : childrenProps.children))
@@ -148,5 +142,5 @@ function MarkdownPre({ children }) {
             '> pre': { mt: '0 !important' },
         }, children: [(0, jsx_runtime_1.jsxs)(material_1.Stack, { direction: "row", alignItems: "center", p: 0.5, pl: 1.5, borderBottom: 1, borderColor: "grey.200", children: [(0, jsx_runtime_1.jsx)(material_1.Box, { children: language }), (0, jsx_runtime_1.jsx)(material_1.Box, { flex: 1 }), (0, jsx_runtime_1.jsx)(ActionButton_1.default, { autoReset: true, tip: t('copyToClipboard'), tipSucceed: t('copied'), title: (0, jsx_runtime_1.jsx)(react_1.Icon, { icon: "tabler:copy" }), titleSucceed: (0, jsx_runtime_1.jsx)(react_1.Icon, { icon: "tabler:copy-check" }), sx: { minWidth: 32, minHeight: 32, p: 0, fontSize: 18 }, onClick: () => {
                             window.navigator.clipboard.writeText(childrenProps.children);
-                        } })] }), children] }));
+                        } })] }), (0, jsx_runtime_1.jsx)(react_2.Suspense, { children: (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ component: ReactSyntaxHighlighter, language: match === null || match === void 0 ? void 0 : match[1] }, props, { sx: { borderRadius: 1, bgcolor: 'red' }, children: String(childrenProps.children).replace(/\n$/, '') })) })] }));
 }

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

@@ -105,7 +105,7 @@ function ShareCopy() {
     const image = (_f = (_e = (_d = (_c = (_b = message.result) === null || _b === void 0 ? void 0 : _b.objects) === null || _c === void 0 ? void 0 : _c.find((i) => { var _a; return (_a = i.data[types_1.RuntimeOutputVariable.images]) === null || _a === void 0 ? void 0 : _a.length; })) === null || _d === void 0 ? void 0 : _d.data[types_1.RuntimeOutputVariable.images]) === null || _e === void 0 ? void 0 : _e.at(0)) === null || _f === void 0 ? void 0 : _f.url;
     if (!content && !image)
         return null;
-    return ((0, jsx_runtime_1.jsx)(StyledActionButton, { tip: t('copy'), tipSucceed: t('copied'), title: (0, jsx_runtime_1.jsx)(react_1.Icon, { icon: "tabler:copy" }), titleSucceed: (0, jsx_runtime_1.jsx)(react_1.Icon, { icon: "tabler:copy-check" }), onClick: () => __awaiter(this, void 0, void 0, function* () {
+    return ((0, jsx_runtime_1.jsx)(StyledActionButton, { autoReset: true, tip: t('copy'), tipSucceed: t('copied'), title: (0, jsx_runtime_1.jsx)(react_1.Icon, { icon: "tabler:copy" }), titleSucceed: (0, jsx_runtime_1.jsx)(react_1.Icon, { icon: "tabler:copy-check" }), onClick: () => __awaiter(this, void 0, void 0, function* () {
             if (content) {
                 window.navigator.clipboard.writeText(content);
             }

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

@@ -64,6 +64,9 @@ function SocialShareMenu(_a) {
         gap: 1.5,
         minWidth: 120,
         lineHeight: '1!important',
+        width: '100%',
+        border: 'none',
+        bgcolor: 'transparent',
     };
     const iconProps = {
         bgStyle: { fill: '#fff' },
@@ -72,14 +75,14 @@ function SocialShareMenu(_a) {
             borderRadius: '6px',
         },
     };
-    return ((0, jsx_runtime_1.jsx)(MenuButton_1.default, Object.assign({ MenuProps: MenuProps, menus: [
+    return ((0, jsx_runtime_1.jsx)(MenuButton_1.default, Object.assign({ MenuProps: Object.assign(Object.assign({}, MenuProps), { sx: { li: { p: 0, button: { px: '8px !important', py: '4px !important' } } } }), menus: [
             (0, jsx_runtime_1.jsx)(material_1.MenuItem, { children: (0, jsx_runtime_1.jsxs)(material_1.Box, { component: react_share_1.TwitterShareButton, url: url, title: content, sx: buttonSx, children: [(0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ component: react_share_1.XIcon, sx: itemIconSx, round: true }, iconProps)), (0, jsx_runtime_1.jsx)("span", { children: t('socialShare.shareToX') })] }) }, "shareOnX"),
             (0, jsx_runtime_1.jsx)(material_1.MenuItem, { children: (0, jsx_runtime_1.jsxs)(material_1.Box, { component: react_share_1.TelegramShareButton, url: url, title: content, sx: buttonSx, children: [(0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ component: react_share_1.TelegramIcon, sx: itemIconSx, round: true }, iconProps)), (0, jsx_runtime_1.jsx)("span", { children: t('socialShare.shareToTelegram') })] }) }, "shareOnTelegram"),
             (0, jsx_runtime_1.jsx)(material_1.MenuItem, { children: (0, jsx_runtime_1.jsxs)(material_1.Box, { component: react_share_1.RedditShareButton, url: url, title: content, sx: buttonSx, children: [(0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ component: react_share_1.RedditIcon, sx: itemIconSx, round: true }, iconProps)), (0, jsx_runtime_1.jsx)("span", { children: t('socialShare.shareToReddit') })] }) }, "shareOnReddit"),
             (0, jsx_runtime_1.jsx)(material_1.MenuItem, { children: (0, jsx_runtime_1.jsxs)(material_1.Box, { component: react_share_1.WeiboShareButton, url: url, title: content, sx: buttonSx, children: [(0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ component: react_share_1.WeiboIcon, sx: itemIconSx, round: true }, iconProps)), (0, jsx_runtime_1.jsx)("span", { children: t('socialShare.shareToWeibo') })] }) }, "shareOnWeibo"),
             (0, jsx_runtime_1.jsx)(material_1.MenuItem, { children: (0, jsx_runtime_1.jsxs)(material_1.Box, { component: react_share_1.FacebookShareButton, url: url, sx: buttonSx, children: [(0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ component: react_share_1.FacebookIcon, sx: itemIconSx, round: true }, iconProps)), (0, jsx_runtime_1.jsx)("span", { children: t('socialShare.shareToFacebook') })] }) }, "shareOnFacebook"),
             (0, jsx_runtime_1.jsx)(material_1.MenuItem, { children: (0, jsx_runtime_1.jsxs)(material_1.Box, { component: react_share_1.LinkedinShareButton, url: url, summary: content, sx: buttonSx, children: [(0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ component: react_share_1.LinkedinIcon, sx: itemIconSx, round: true }, iconProps)), (0, jsx_runtime_1.jsx)("span", { children: t('socialShare.shareToLinkedin') })] }) }, "shareOnLinkedin"),
-            !disableCopyLink && ((0, jsx_runtime_1.jsx)(material_1.MenuItem, { children: (0, jsx_runtime_1.jsxs)(material_1.Box, { component: "div", sx: buttonSx, onClick: () => {
+            !disableCopyLink && ((0, jsx_runtime_1.jsx)(material_1.MenuItem, { children: (0, jsx_runtime_1.jsxs)(material_1.Box, { component: "button", sx: buttonSx, onClick: () => {
                         window.navigator.clipboard.writeText(url);
                     }, children: [(0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ sx: itemIconSx, round: true }, iconProps, { children: (0, jsx_runtime_1.jsx)(react_1.Icon, { icon: "tabler:link" }) })), (0, jsx_runtime_1.jsx)("span", { children: t('socialShare.copyLink') })] }) }, "copyToClipboard")),
         ].filter(Boolean) }, restProps, { children: children })));

package/lib/cjs/builtin/async/ai-runtime/constants.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getDefaultOutputComponent = exports.DEFAULT_OUTPUT_COMPONENTS = exports.IMAGES_VIEW_ID = exports.SHARE_VIEW_ID = exports.REFERENCED_LINKS_VIEW_ID = exports.SUGGESTED_QUESTIONS_VIEW_ID = exports.MARKDOWN_VIEW_ID = exports.DEFAULT_OUTPUT_COMPONENT_ID = exports.DEFAULT_INPUT_COMPONENT_ID = exports.DEFAULT_PAGE_COMPONENT_ID = exports.PAYMENT_KIT_DID = exports.AI_STUDIO_DID = void 0;
+exports.getDefaultOutputComponent = exports.DEFAULT_OUTPUT_COMPONENTS = exports.OPENING_QUESTIONS_VIEW_ID = exports.IMAGES_VIEW_ID = exports.SHARE_VIEW_ID = exports.REFERENCED_LINKS_VIEW_ID = exports.SUGGESTED_QUESTIONS_VIEW_ID = exports.MARKDOWN_VIEW_ID = exports.DEFAULT_OUTPUT_COMPONENT_ID = exports.DEFAULT_INPUT_COMPONENT_ID = exports.DEFAULT_PAGE_COMPONENT_ID = exports.PAYMENT_KIT_DID = exports.AI_STUDIO_DID = void 0;
 const types_1 = require("@blocklet/ai-runtime/types");
 exports.AI_STUDIO_DID = 'z8iZpog7mcgcgBZzTiXJCWESvmnRrQmnd3XBB';
 exports.PAYMENT_KIT_DID = 'z2qaCNvKMv5GjouKdcDWexv6WqtHbpNPQDnAk';
@@ -12,6 +12,7 @@ exports.SUGGESTED_QUESTIONS_VIEW_ID = '6u8m11ss7fvu8t7i';
 exports.REFERENCED_LINKS_VIEW_ID = 'baqmaoccdntqwayc';
 exports.SHARE_VIEW_ID = 'jfq3df9z8lkk9not';
 exports.IMAGES_VIEW_ID = 'txirtdgx8h2bmo7s';
+exports.OPENING_QUESTIONS_VIEW_ID = 'vgsgsvnhud0cq37v';
 exports.DEFAULT_OUTPUT_COMPONENTS = {
     [types_1.RuntimeOutputVariable.text]: {
         componentId: exports.MARKDOWN_VIEW_ID,
@@ -31,6 +32,9 @@ exports.DEFAULT_OUTPUT_COMPONENTS = {
     [types_1.RuntimeOutputVariable.share]: {
         componentId: exports.SHARE_VIEW_ID,
     },
+    [types_1.RuntimeOutputVariable.openingQuestions]: {
+        componentId: exports.OPENING_QUESTIONS_VIEW_ID,
+    },
 };
 function getDefaultOutputComponent(output) {
     return exports.DEFAULT_OUTPUT_COMPONENTS[output.name];

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

@@ -22,10 +22,22 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __setModuleDefault(result, mod);
     return result;
 };
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.MessageBodyContainer = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const material_1 = require("@mui/material");
 const react_1 = require("react");
@@ -45,14 +57,17 @@ const MessageView = (0, react_1.memo)(({ message }) => {
     const { hideAgentAvatar, hideUserInputs } = (_a = (0, ComponentPreferences_1.useComponentPreferences)()) !== null && _a !== void 0 ? _a : {};
     if (!(appearanceOutput === null || appearanceOutput === void 0 ? void 0 : appearanceOutput.componentId))
         return null;
-    return ((0, jsx_runtime_1.jsx)(CurrentAgent_1.default, { agentId: message.assistantId, children: (0, jsx_runtime_1.jsx)(CurrentMessage_1.default, { message: message, children: (0, jsx_runtime_1.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)(material_1.Box, { sx: {
-                                        borderRadius: 1,
-                                        borderTopRightRadius: '2px',
-                                        px: 2,
-                                        py: 1,
-                                        marginTop: 0.5,
-                                        maxWidth: 'calc(100% - 40px)',
-                                        bgcolor: 'rgba(239, 246, 255, 1)',
-                                    }, 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: (0, jsx_runtime_1.jsx)(CustomComponentRenderer_1.default, { componentId: appearanceOutput.componentId, properties: appearanceOutput.componentProperties }) })) : ((0, jsx_runtime_1.jsx)(CustomComponentRenderer_1.default, { componentId: appearanceOutput.componentId, properties: appearanceOutput.componentProperties })) })] }) }) }));
+    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) })] }) }) }));
 });
 exports.default = MessageView;
+function MessageBodyContainer(_a) {
+    var _b;
+    var { messageRole } = _a, props = __rest(_a, ["messageRole"]);
+    const preferences = (0, ComponentPreferences_1.useComponentPreferences)();
+    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) })));
+}
+exports.MessageBodyContainer = MessageBodyContainer;

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

@@ -20,7 +20,6 @@ const ComponentPreferences_1 = require("../../contexts/ComponentPreferences");
 const session_1 = require("../../state/session");
 const MessageView_1 = __importDefault(require("./MessageView"));
 const OpeningMessageView_1 = __importDefault(require("./OpeningMessageView"));
-const OpeningQuestionsView_1 = __importDefault(require("./OpeningQuestionsView"));
 function MessagesView(_a) {
     var _b;
     var props = __rest(_a, []);
@@ -28,6 +27,6 @@ function MessagesView(_a) {
     const loaded = (0, session_1.useSessionState)((s) => s.loaded);
     const showOpening = (0, session_1.useCurrentSessionState)((s) => !s || (s === null || s === void 0 ? void 0 : s.loaded)) && loaded;
     const divider = (_b = (0, ComponentPreferences_1.useComponentPreferences)()) === null || _b === void 0 ? void 0 : _b.divider;
-    return ((0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ gap: 2 }, props, { children: [showOpening && (0, jsx_runtime_1.jsx)(OpeningMessageView_1.default, {}), messages === null || messages === void 0 ? void 0 : messages.map((message, index) => ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(MessageView_1.default, { message: message }, message.taskId), divider && index !== messages.length - 1 ? (0, jsx_runtime_1.jsx)(material_1.Divider, { sx: { my: 2 } }) : undefined] }))), showOpening && !(messages === null || messages === void 0 ? void 0 : messages.length) && (0, jsx_runtime_1.jsx)(OpeningQuestionsView_1.default, {})] })));
+    return ((0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ gap: 2 }, props, { children: [showOpening && (0, jsx_runtime_1.jsx)(OpeningMessageView_1.default, { isMessagesEmpty: !(messages === null || messages === void 0 ? void 0 : messages.length) }), messages === null || messages === void 0 ? void 0 : messages.map((message, index) => ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(MessageView_1.default, { message: message }, message.taskId), divider && index !== messages.length - 1 ? (0, jsx_runtime_1.jsx)(material_1.Divider, { sx: { my: 2 } }) : undefined] })))] })));
 }
 exports.default = MessagesView;

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

@@ -8,16 +8,29 @@ const types_1 = require("@blocklet/ai-runtime/types");
 const react_1 = require("react");
 const CustomComponentRenderer_1 = __importDefault(require("../../../../../components/CustomComponentRenderer"));
 const UserInfo_1 = __importDefault(require("../../components/UserInfo"));
+const constants_1 = require("../../constants");
 const ComponentPreferences_1 = require("../../contexts/ComponentPreferences");
+const CurrentAgent_1 = require("../../contexts/CurrentAgent");
 const use_appearances_1 = require("../../hooks/use-appearances");
-const OpeningMessageView = (0, react_1.memo)(() => {
-    var _a, _b, _c, _d, _e;
+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 opening = (0, use_appearances_1.useOpeningMessage)();
-    const output = (0, react_1.useMemo)(() => { var _a; return (_a = opening === null || opening === void 0 ? void 0 : opening.agent.outputVariables) === null || _a === void 0 ? void 0 : _a.find((i) => i.name === types_1.RuntimeOutputVariable.openingMessage); }, [opening === null || opening === void 0 ? void 0 : opening.agent]);
-    const componentId = (_b = output === null || output === void 0 ? void 0 : output.appearance) === null || _b === void 0 ? void 0 : _b.componentId;
-    if (!output || !(opening === null || opening === void 0 ? void 0 : opening.message) || !componentId)
+    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) ||
+        ((_c = constants_1.DEFAULT_OUTPUT_COMPONENTS[types_1.RuntimeOutputVariable.openingMessage]) === null || _c === void 0 ? void 0 : _c.componentId);
+    const profile = (0, use_appearances_1.useProfile)();
+    const { agent } = (0, CurrentAgent_1.useCurrentAgent)();
+    const openingQuestions = (0, use_appearances_1.useOpeningQuestions)();
+    const openingQuestionsOutput = (0, react_1.useMemo)(() => { var _a; return (_a = agent.outputVariables) === null || _a === void 0 ? void 0 : _a.find((i) => i.name === types_1.RuntimeOutputVariable.openingQuestions); }, [agent.outputVariables]);
+    const openingQuestionsComponentId = ((_d = openingQuestionsOutput === null || openingQuestionsOutput === void 0 ? void 0 : openingQuestionsOutput.appearance) === null || _d === void 0 ? void 0 : _d.componentId) ||
+        ((_e = constants_1.DEFAULT_OUTPUT_COMPONENTS[types_1.RuntimeOutputVariable.openingQuestions]) === null || _e === void 0 ? void 0 : _e.componentId);
+    if ((!(openingMessage === null || openingMessage === void 0 ? void 0 : openingMessage.message) || !openingMessageComponentId) &&
+        (!openingQuestionsComponentId || !(openingQuestions === null || openingQuestions === void 0 ? void 0 : openingQuestions.questions.length) || !isMessagesEmpty)) {
         return null;
-    return hideAgentAvatar ? ((0, jsx_runtime_1.jsx)(CustomComponentRenderer_1.default, { instanceId: output.id, componentId: componentId, properties: (_c = output.appearance) === null || _c === void 0 ? void 0 : _c.componentProperties, props: { output, outputValue: opening.message } })) : ((0, jsx_runtime_1.jsx)(UserInfo_1.default, { name: opening.profile.name, did: (_d = globalThis.blocklet) === null || _d === void 0 ? void 0 : _d.appId, avatar: opening.profile.avatar, alignItems: "flex-start", children: (0, jsx_runtime_1.jsx)(CustomComponentRenderer_1.default, { instanceId: output.id, componentId: componentId, properties: (_e = output.appearance) === null || _e === void 0 ? void 0 : _e.componentProperties, props: { output, outputValue: opening.message } }) }));
+    }
+    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 }));
 });
 exports.default = OpeningMessageView;

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

@@ -52,7 +52,7 @@ function V0Output() {
         backgroundColor: 'white',
         borderColor: 'rgba(0, 0, 0, 0.1) !important',
         // rewrite disabled style
-        '&.Mui-disabled': {
+        '&.frame-button.Mui-disabled': {
             backgroundColor: 'primary.main',
             color: 'white',
         },
@@ -62,6 +62,7 @@ function V0Output() {
             key: 'Desktop',
             icon: 'tabler:device-desktop',
             props: {
+                className: 'frame-button',
                 disabled: (codePreviewExtraProps === null || codePreviewExtraProps === void 0 ? void 0 : codePreviewExtraProps.key) === 'Desktop',
                 sx: Object.assign({}, responsiveSx),
                 onClick: () => setCodePreviewExtraProps({
@@ -75,6 +76,7 @@ function V0Output() {
             key: 'Tablet',
             icon: 'tabler:device-tablet',
             props: {
+                className: 'frame-button',
                 disabled: (codePreviewExtraProps === null || codePreviewExtraProps === void 0 ? void 0 : codePreviewExtraProps.key) === 'Tablet',
                 sx: Object.assign({}, responsiveSx),
                 onClick: () => setCodePreviewExtraProps({
@@ -91,6 +93,7 @@ function V0Output() {
             key: 'Mobile',
             icon: 'tabler:device-mobile',
             props: {
+                className: 'frame-button',
                 disabled: (codePreviewExtraProps === null || codePreviewExtraProps === void 0 ? void 0 : codePreviewExtraProps.key) === 'Mobile',
                 sx: Object.assign({}, responsiveSx),
                 onClick: () => setCodePreviewExtraProps({

package/lib/cjs/builtin/async/ai-runtime/state/runtime.js

@@ -16,19 +16,21 @@ const Runtime_1 = require("../contexts/Runtime");
 const agent_1 = require("./agent");
 const session_2 = require("./session");
 function useRuntimeState() {
-    var _a;
     const { aid, working } = (0, Runtime_1.useRuntimeContext)();
     const [agent] = (0, agent_1.useAgentState)({ aid, working });
-    const { session: authSession } = (0, session_1.useSessionContext)();
+    const { session: authSession, events } = (0, session_1.useSessionContext)();
     const sessionState = (0, react_1.useMemo)(() => (0, session_2.createSessionState)({ aid }), [aid]);
     const exec = sessionState((s) => s.execute);
     // reset state after logged out
     (0, react_1.useEffect)(() => {
-        var _a;
-        if (!((_a = authSession.user) === null || _a === void 0 ? void 0 : _a.did)) {
+        const onLogout = () => {
             sessionState.getState().reset();
-        }
-    }, [(_a = authSession.user) === null || _a === void 0 ? void 0 : _a.did, sessionState]);
+        };
+        events.on('logout', onLogout);
+        return () => {
+            events.off('logout', onLogout);
+        };
+    }, []);
     const login = (0, react_1.useCallback)(() => __awaiter(this, void 0, void 0, function* () {
         yield new Promise((resolve) => {
             authSession.login(() => resolve());