@blocklet/pages-kit 0.2.324 → 0.2.326

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

@@ -15,19 +15,12 @@ import { Box, Stack, styled } from '@mui/material';
 import React, { Suspense } from 'react';
 import Markdown from 'react-markdown';
 import remarkGfm from 'remark-gfm';
-import { useLocaleContext } from '../../../locale';
-import ReactSyntaxHighlighterAsync from '../../react-syntax-highlighter';
-import ActionButton from './ActionButton';
+import { useLocaleContext } from '../../../../locale';
+import ReactSyntaxHighlighterAsync from '../../../react-syntax-highlighter';
+import ActionButton from '../ActionButton';
 const ReactSyntaxHighlighter = React.lazy(() => ReactSyntaxHighlighterAsync().then((m) => ({ default: m.Prism })));
 const MarkdownRenderer = styled((props) => (_jsx(Markdown, Object.assign({}, props, { remarkPlugins: [remarkGfm], 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 ? (_jsx(Suspense, { children: _jsx(Box, Object.assign({ component: ReactSyntaxHighlighter, language: match === null || match === void 0 ? void 0 : match[1] }, props, { sx: { borderRadius: 1 }, children: String(children).replace(/\n$/, '') })) })) : (_jsx(Box, Object.assign({ component: "code", className: className }, props, { children: children })));
-        },
         table: ({ className, children }) => {
             return (_jsx(Box, { sx: { overflow: 'auto', my: 1 }, children: _jsx("table", { className: className, children: children }) }));
         },
@@ -106,7 +99,8 @@ const MarkdownRenderer = styled((props) => (_jsx(Markdown, Object.assign({}, pro
   }
 `;
 export default MarkdownRenderer;
-function MarkdownPre({ children }) {
+function MarkdownPre(_a) {
+    var { children } = _a, props = __rest(_a, ["children"]);
     const { t } = useLocaleContext();
     const childrenProps = children === null || children === void 0 ? void 0 : children.props;
     if (!(childrenProps === null || childrenProps === void 0 ? void 0 : childrenProps.children))
@@ -120,5 +114,5 @@ function MarkdownPre({ children }) {
             '> pre': { mt: '0 !important' },
         }, children: [_jsxs(Stack, { direction: "row", alignItems: "center", p: 0.5, pl: 1.5, borderBottom: 1, borderColor: "grey.200", children: [_jsx(Box, { children: language }), _jsx(Box, { flex: 1 }), _jsx(ActionButton, { autoReset: true, tip: t('copyToClipboard'), tipSucceed: t('copied'), title: _jsx(Icon, { icon: "tabler:copy" }), titleSucceed: _jsx(Icon, { icon: "tabler:copy-check" }), sx: { minWidth: 32, minHeight: 32, p: 0, fontSize: 18 }, onClick: () => {
                             window.navigator.clipboard.writeText(childrenProps.children);
-                        } })] }), children] }));
+                        } })] }), _jsx(Suspense, { children: _jsx(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/esm/builtin/async/ai-runtime/components/ShareActions/index.js

@@ -76,7 +76,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[RuntimeOutputVariable.images]) === null || _a === void 0 ? void 0 : _a.length; })) === null || _d === void 0 ? void 0 : _d.data[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 (_jsx(StyledActionButton, { tip: t('copy'), tipSucceed: t('copied'), title: _jsx(Icon, { icon: "tabler:copy" }), titleSucceed: _jsx(Icon, { icon: "tabler:copy-check" }), onClick: () => __awaiter(this, void 0, void 0, function* () {
+    return (_jsx(StyledActionButton, { autoReset: true, tip: t('copy'), tipSucceed: t('copied'), title: _jsx(Icon, { icon: "tabler:copy" }), titleSucceed: _jsx(Icon, { icon: "tabler:copy-check" }), onClick: () => __awaiter(this, void 0, void 0, function* () {
             if (content) {
                 window.navigator.clipboard.writeText(content);
             }

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

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

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

@@ -9,6 +9,7 @@ export const SUGGESTED_QUESTIONS_VIEW_ID = '6u8m11ss7fvu8t7i';
 export const REFERENCED_LINKS_VIEW_ID = 'baqmaoccdntqwayc';
 export const SHARE_VIEW_ID = 'jfq3df9z8lkk9not';
 export const IMAGES_VIEW_ID = 'txirtdgx8h2bmo7s';
+export const OPENING_QUESTIONS_VIEW_ID = 'vgsgsvnhud0cq37v';
 export const DEFAULT_OUTPUT_COMPONENTS = {
     [RuntimeOutputVariable.text]: {
         componentId: MARKDOWN_VIEW_ID,
@@ -28,6 +29,9 @@ export const DEFAULT_OUTPUT_COMPONENTS = {
     [RuntimeOutputVariable.share]: {
         componentId: SHARE_VIEW_ID,
     },
+    [RuntimeOutputVariable.openingQuestions]: {
+        componentId: OPENING_QUESTIONS_VIEW_ID,
+    },
 };
 export function getDefaultOutputComponent(output) {
     return DEFAULT_OUTPUT_COMPONENTS[output.name];

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

@@ -1,3 +1,14 @@
+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, jsxs as _jsxs } from "react/jsx-runtime";
 import { Box, Stack } from '@mui/material';
 import { memo } from 'react';
@@ -17,14 +28,16 @@ const MessageView = memo(({ message }) => {
     const { hideAgentAvatar, hideUserInputs } = (_a = useComponentPreferences()) !== null && _a !== void 0 ? _a : {};
     if (!(appearanceOutput === null || appearanceOutput === void 0 ? void 0 : appearanceOutput.componentId))
         return null;
-    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(Box, { sx: {
-                                        borderRadius: 1,
-                                        borderTopRightRadius: '2px',
-                                        px: 2,
-                                        py: 1,
-                                        marginTop: 0.5,
-                                        maxWidth: 'calc(100% - 40px)',
-                                        bgcolor: 'rgba(239, 246, 255, 1)',
-                                    }, 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: _jsx(CustomComponentRenderer, { componentId: appearanceOutput.componentId, properties: appearanceOutput.componentProperties }) })) : (_jsx(CustomComponentRenderer, { componentId: appearanceOutput.componentId, properties: appearanceOutput.componentProperties })) })] }) }) }));
+    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) })] }) }) }));
 });
 export default MessageView;
+export function MessageBodyContainer(_a) {
+    var _b;
+    var { messageRole } = _a, props = __rest(_a, ["messageRole"]);
+    const preferences = 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 (_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) })));
+}

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

@@ -15,7 +15,6 @@ import { useComponentPreferences } from '../../contexts/ComponentPreferences';
 import { useCurrentSessionState, useSessionState } from '../../state/session';
 import MessageView from './MessageView';
 import OpeningMessageView from './OpeningMessageView';
-import OpeningQuestionsView from './OpeningQuestionsView';
 export default function MessagesView(_a) {
     var _b;
     var props = __rest(_a, []);
@@ -23,5 +22,5 @@ export default function MessagesView(_a) {
     const loaded = useSessionState((s) => s.loaded);
     const showOpening = useCurrentSessionState((s) => !s || (s === null || s === void 0 ? void 0 : s.loaded)) && loaded;
     const divider = (_b = useComponentPreferences()) === null || _b === void 0 ? void 0 : _b.divider;
-    return (_jsxs(Stack, Object.assign({ gap: 2 }, props, { children: [showOpening && _jsx(OpeningMessageView, {}), messages === null || messages === void 0 ? void 0 : messages.map((message, index) => (_jsxs(_Fragment, { children: [_jsx(MessageView, { message: message }, message.taskId), divider && index !== messages.length - 1 ? _jsx(Divider, { sx: { my: 2 } }) : undefined] }))), showOpening && !(messages === null || messages === void 0 ? void 0 : messages.length) && _jsx(OpeningQuestionsView, {})] })));
+    return (_jsxs(Stack, Object.assign({ gap: 2 }, props, { children: [showOpening && _jsx(OpeningMessageView, { isMessagesEmpty: !(messages === null || messages === void 0 ? void 0 : messages.length) }), messages === null || messages === void 0 ? void 0 : messages.map((message, index) => (_jsxs(_Fragment, { children: [_jsx(MessageView, { message: message }, message.taskId), divider && index !== messages.length - 1 ? _jsx(Divider, { sx: { my: 2 } }) : undefined] })))] })));
 }

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

@@ -1,18 +1,31 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { RuntimeOutputVariable } from '@blocklet/ai-runtime/types';
 import { memo, useMemo } from 'react';
 import CustomComponentRenderer from '../../../../../components/CustomComponentRenderer';
 import UserInfo from '../../components/UserInfo';
+import { DEFAULT_OUTPUT_COMPONENTS } from '../../constants';
 import { useComponentPreferences } from '../../contexts/ComponentPreferences';
-import { useOpeningMessage } from '../../hooks/use-appearances';
-const OpeningMessageView = memo(() => {
-    var _a, _b, _c, _d, _e;
+import { useCurrentAgent } from '../../contexts/CurrentAgent';
+import { useOpeningMessage, useOpeningQuestions, useProfile } from '../../hooks/use-appearances';
+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 opening = useOpeningMessage();
-    const output = 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 === 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 = 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) ||
+        ((_c = DEFAULT_OUTPUT_COMPONENTS[RuntimeOutputVariable.openingMessage]) === null || _c === void 0 ? void 0 : _c.componentId);
+    const profile = useProfile();
+    const { agent } = useCurrentAgent();
+    const openingQuestions = useOpeningQuestions();
+    const openingQuestionsOutput = useMemo(() => { var _a; return (_a = agent.outputVariables) === null || _a === void 0 ? void 0 : _a.find((i) => i.name === 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 = DEFAULT_OUTPUT_COMPONENTS[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 ? (_jsx(CustomComponentRenderer, { instanceId: output.id, componentId: componentId, properties: (_c = output.appearance) === null || _c === void 0 ? void 0 : _c.componentProperties, props: { output, outputValue: opening.message } })) : (_jsx(UserInfo, { name: opening.profile.name, did: (_d = globalThis.blocklet) === null || _d === void 0 ? void 0 : _d.appId, avatar: opening.profile.avatar, alignItems: "flex-start", children: _jsx(CustomComponentRenderer, { instanceId: output.id, componentId: componentId, properties: (_e = output.appearance) === null || _e === void 0 ? void 0 : _e.componentProperties, props: { output, outputValue: opening.message } }) }));
+    }
+    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 }));
 });
 export default OpeningMessageView;

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

@@ -47,7 +47,7 @@ export default 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',
         },
@@ -57,6 +57,7 @@ export default 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({
@@ -70,6 +71,7 @@ export default 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({
@@ -86,6 +88,7 @@ export default 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/esm/builtin/async/ai-runtime/state/runtime.js

@@ -13,19 +13,21 @@ import { useRuntimeContext } from '../contexts/Runtime';
 import { useAgentState } from './agent';
 import { createSessionState } from './session';
 export function useRuntimeState() {
-    var _a;
     const { aid, working } = useRuntimeContext();
     const [agent] = useAgentState({ aid, working });
-    const { session: authSession } = useSessionContext();
+    const { session: authSession, events } = useSessionContext();
     const sessionState = useMemo(() => createSessionState({ aid }), [aid]);
     const exec = sessionState((s) => s.execute);
     // reset state after logged out
     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 = useCallback(() => __awaiter(this, void 0, void 0, function* () {
         yield new Promise((resolve) => {
             authSession.login(() => resolve());