@blocklet/pages-kit 0.2.312 → 0.2.313

package/lib/esm/builtin/async/ai-runtime/api/session.js

@@ -52,6 +52,14 @@ export function createSession(_a) {
         });
     });
 }
+export function clearSession(_a) {
+    return __awaiter(this, arguments, void 0, function* ({ sessionId }) {
+        return request({
+            method: 'POST',
+            url: joinURL(getComponentMountPoint(AI_STUDIO_DID), '/api/sessions', sessionId, '/clear'),
+        });
+    });
+}
 export function updateSession(_a) {
     return __awaiter(this, arguments, void 0, function* ({ sessionId, name, }) {
         return request({

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

@@ -0,0 +1,46 @@
+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)
+        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 { CircularProgress, MenuItem, Stack } from '@mui/material';
+import { useState } from 'react';
+export default function LoadingMenuItem(_a) {
+    var { children, confirmation } = _a, props = __rest(_a, ["children", "confirmation"]);
+    const [clicked, setClicked] = useState(false);
+    const [loading, setLoading] = useState(false);
+    const handleClick = (e) => __awaiter(this, void 0, void 0, function* () {
+        var _b;
+        if (loading)
+            return;
+        if (!clicked && confirmation) {
+            setClicked(true);
+            return;
+        }
+        try {
+            setLoading(true);
+            yield ((_b = props.onClick) === null || _b === void 0 ? void 0 : _b.call(props, e));
+        }
+        finally {
+            setClicked(false);
+            setLoading(false);
+        }
+    });
+    return (_jsxs(MenuItem, Object.assign({}, props, { onClick: handleClick, sx: Object.assign(Object.assign({}, props.sx), { display: 'flex', alignItems: 'center', gap: 1 }), children: [(clicked && confirmation) || children, _jsx(Stack, { direction: "row", alignItems: "center", justifyContent: "flex-end", sx: { width: 18 }, children: loading && _jsx(CircularProgress, { size: 14 }) })] })));
+}

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

@@ -0,0 +1,42 @@
+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)
+        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, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Button, ClickAwayListener, Grow, List, Paper, Popper, listItemIconClasses, } from '@mui/material';
+import { bindPopper, bindTrigger, usePopupState } from 'material-ui-popup-state/hooks';
+import React, { isValidElement } from 'react';
+export default function PopperMenuButton(_a) {
+    var { PopperProps, menus } = _a, props = __rest(_a, ["PopperProps", "menus"]);
+    const state = usePopupState({ variant: 'popper' });
+    return (_jsxs(_Fragment, { children: [_jsx(Box, Object.assign({ component: Button }, bindTrigger(state), props)), _jsx(Popper, Object.assign({ transition: true }, PopperProps, bindPopper(state), { children: ({ TransitionProps }) => (_jsx(ClickAwayListener, { onClickAway: state.close, children: _jsx(Grow, Object.assign({}, TransitionProps, { children: _jsx(Paper, { children: _jsx(List, { dense: true, sx: {
+                                    [`.${listItemIconClasses.root}`]: {
+                                        minWidth: 24,
+                                    },
+                                }, children: React.Children.map(menus, (menu) => !isValidElement(menu)
+                                    ? menu
+                                    : React.cloneElement(menu, {
+                                        // Close popper after the menu item click handler has been resolved
+                                        onClick: (...args) => __awaiter(this, void 0, void 0, function* () {
+                                            var _b, _c;
+                                            yield ((_c = (_b = menu.props).onClick) === null || _c === void 0 ? void 0 : _c.call(_b, ...args));
+                                            state.close();
+                                        }),
+                                    })) }) }) })) })) }))] }));
+}

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

@@ -118,7 +118,7 @@ export const translations = {
         parameters: '参数',
         parametersTitle: '告诉我你想要什么？',
         parametersSetting: '设置',
-        clearSession: '清空对话',
+        clearSession: '清空会话',
         generate: '生成',
         startChat: '开始对话',
         collections: '知识库',

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

@@ -1,24 +1,36 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Icon } from '@iconify/react';
 import { ArrowBackIosNewRounded } from '@mui/icons-material';
-import { Box, Button, CircularProgress, ClickAwayListener, Dialog, DialogContent, DialogTitle, Fab, Grow, IconButton, Popper, Stack, Typography, useMediaQuery, useTheme, } from '@mui/material';
+import { Box, Button, CircularProgress, ClickAwayListener, Dialog, DialogContent, DialogTitle, Fab, Grow, IconButton, ListItemIcon, Popper, Stack, Typography, useMediaQuery, useTheme, } from '@mui/material';
 import { Suspense, useRef, useState } from 'react';
 import CustomComponentRenderer from '../../../../../components/CustomComponentRenderer';
 import { Avatar } from '../../../../arcblock/ux';
+import { useLocaleContext } from '../../../../locale';
+import PopperMenuButton from '../../components/PopperMenuButton';
+import LoadingMenuItem from '../../components/PopperMenuButton/LoadingMenuItem';
 import RuntimeCommonProvider from '../../components/RuntimeCommonProvider';
 import ScrollView from '../../components/ScrollView';
 import { DEFAULT_PAGE_COMPONENT_ID } from '../../constants';
 import RuntimeProvider from '../../contexts/Runtime';
 import useAppearances, { useProfile } from '../../hooks/use-appearances';
 import { useRuntimeState } from '../../state/runtime';
-import { useSessionState } from '../../state/session';
+import { useAutoLoadSessionState, useSessionState } from '../../state/session';
 export default function ChatBotButton({ aid, working }) {
     return (_jsx(RuntimeProvider, { aid: aid, working: working, children: _jsx(RuntimeCommonProvider, { children: _jsx(ChatBotContent, {}) }) }));
 }
 function ChatBotContent() {
     var _a, _b;
     const anchorEl = useRef(null);
-    useSessionState({ autoLoad: true });
+    useAutoLoadSessionState();
     const { aid } = useRuntimeState();
     const { appearancePage } = useAppearances({ aid });
     const profile = useProfile({ aid });
@@ -32,7 +44,7 @@ function ChatBotContent() {
                         '.aigne-layout': {
                             px: 2,
                         },
-                    }, children: _jsx(Suspense, { fallback: _jsx(Stack, { flexGrow: 1, alignItems: "center", justifyContent: "center", children: _jsx(CircularProgress, { size: 24 }) }), children: _jsx(CustomComponentRenderer, { componentId: componentId, properties: appearancePage === null || appearancePage === void 0 ? void 0 : appearancePage.componentProps, props: { scrollViewProps: { disabled: true } } }) }) }) }))] }));
+                    }, children: _jsx(Suspense, { fallback: _jsx(Stack, { flexGrow: 1, alignItems: "center", justifyContent: "center", children: _jsx(CircularProgress, { size: 24 }) }), children: _jsx(CustomComponentRenderer, { componentId: componentId, properties: appearancePage === null || appearancePage === void 0 ? void 0 : appearancePage.componentProps, props: { scrollViewProps: { disabled: true }, hideHeaderMenuButton: true } }) }) }) }))] }));
 }
 function ResponsiveChatBotContainer({ open, anchorEl, children, onClose, }) {
     const theme = useTheme();
@@ -61,8 +73,13 @@ function ChatBotPopper({ title, anchorEl, open, children, onClose, }) {
                         position: 'relative',
                         background: 'white',
                         borderRadius: 1,
-                    }, children: [_jsxs(Stack, { direction: "row", alignItems: "center", justifyContent: "space-between", borderBottom: 1, borderColor: "divider", p: 2, gap: 2, children: [_jsx(Typography, { variant: "h6", noWrap: true, children: title }), _jsx(Button, { sx: { minWidth: 28, minHeight: 28, p: 0 }, onClick: onClose, children: _jsx(Icon, { icon: "tabler:x", fontSize: 24, color: "rgba(75, 85, 99, 1)" }) })] }), children] }) })) })) }));
+                    }, children: [_jsxs(Stack, { direction: "row", alignItems: "center", borderBottom: 1, borderColor: "divider", p: 2, gap: 2, children: [_jsx(Typography, { variant: "h6", noWrap: true, sx: { flex: 1, width: 1 }, children: title }), _jsx(ChatMenuButton, {}), _jsx(Button, { sx: { minWidth: 28, minHeight: 28, p: 0 }, onClick: onClose, children: _jsx(Icon, { icon: "tabler:x", fontSize: 24, color: "rgba(75, 85, 99, 1)" }) })] }), children] }) })) })) }));
 }
 function ChatBotDialog({ title, open, children, onClose, }) {
-    return (_jsxs(Dialog, { open: open, onClose: onClose, fullScreen: true, children: [_jsx(DialogTitle, { sx: { pl: 0 }, children: _jsxs(Stack, { direction: "row", alignItems: "center", gap: 2, children: [_jsx(IconButton, { size: "small", onClick: onClose, children: _jsx(ArrowBackIosNewRounded, { fontSize: "inherit" }) }), _jsx(Typography, { variant: "h6", noWrap: true, children: title })] }) }), _jsx(DialogContent, { sx: { p: 0 }, dividers: true, children: children })] }));
+    return (_jsxs(Dialog, { open: open, onClose: onClose, fullScreen: true, children: [_jsx(DialogTitle, { sx: { px: 1 }, children: _jsxs(Stack, { direction: "row", alignItems: "center", gap: 2, children: [_jsx(IconButton, { size: "small", onClick: onClose, children: _jsx(ArrowBackIosNewRounded, { fontSize: "inherit" }) }), _jsx(Typography, { variant: "h6", noWrap: true, sx: { flex: 1, width: 1 }, children: title }), _jsx(ChatMenuButton, {})] }) }), _jsx(DialogContent, { sx: { p: 0 }, dividers: true, children: children })] }));
+}
+function ChatMenuButton() {
+    const { t } = useLocaleContext();
+    const clearSession = useSessionState((s) => s.clearSession);
+    return (_jsx(PopperMenuButton, { component: IconButton, PopperProps: { placement: 'bottom-end', sx: { zIndex: 'snackbar' } }, menus: _jsxs(LoadingMenuItem, { onClick: () => __awaiter(this, void 0, void 0, function* () { return clearSession(); }), children: [_jsx(ListItemIcon, { children: _jsx(Icon, { icon: "mingcute:broom-line" }) }), t('clearSession')] }), children: _jsx(Icon, { icon: "tabler:dots" }) }));
 }

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

@@ -1,12 +1,11 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { Box, useMediaQuery, useTheme } from '@mui/material';
-import { useEffect } from 'react';
 import { Helmet } from 'react-helmet';
 import { joinURL } from 'ufo';
 import CustomComponentRenderer from '../../../../../components/CustomComponentRenderer';
 import { Avatar, DID } from '../../../../arcblock/ux';
 import { useLocaleContext } from '../../../../locale';
-import { useHeaderState } from '../../../../page/header';
+import { useHeader } from '../../../../page/header';
 import { getComponentMountPoint } from '../../../../utils';
 import RuntimeCommonProvider, { RuntimeLocaleProvider } from '../../components/RuntimeCommonProvider';
 import SocialShare from '../../components/SocialShare';
@@ -29,40 +28,30 @@ function RuntimeView() {
     const theme = useTheme();
     const isMobile = useMediaQuery(theme.breakpoints.down('sm'));
     const { locale } = useLocaleContext();
-    useEffect(() => {
-        useHeaderState.setState((state) => {
-            const logo = joinURL(window.location.origin, getComponentMountPoint(AI_STUDIO_DID), '/api/projects', agent.project.id, '/logo.png');
-            state.logo = logo && (_jsx(Box, { component: Avatar, src: logo, did: blocklet === null || blocklet === void 0 ? void 0 : blocklet.appId, borderRadius: 1, size: logoSize, sx: {
+    useHeader(() => {
+        const logo = joinURL(window.location.origin, getComponentMountPoint(AI_STUDIO_DID), '/api/projects', agent.project.id, '/logo.png');
+        const shareContent = `${agent.name}
+
+${agent === null || agent === void 0 ? void 0 : agent.description}
+    `;
+        return {
+            logo: logo && (_jsx(Box, { component: Avatar, src: logo, did: blocklet === null || blocklet === void 0 ? void 0 : blocklet.appId, borderRadius: 1, size: logoSize, sx: {
                     width: logoSize,
                     height: logoSize,
-                } }));
-            if (!isMobile) {
-                state.brand = (_jsx(Box, { sx: {
-                        height: 18,
-                        fontSize: 18,
-                    }, children: agent.project.name }));
-                state.description = agent.createdBy && (_jsx(RuntimeLocaleProvider, { children: _jsx(Box, { sx: {
-                            display: 'inline-flex',
-                            alignItems: 'center',
-                            gap: 0.5,
-                            mt: 0.5,
-                            height: 12,
-                            fontSize: 12,
-                        }, children: _jsx(AgentCreatedBy, { did: agent.project.createdBy }) }) }));
-            }
-            const shareContent = `${agent.name}
-
-    ${agent === null || agent === void 0 ? void 0 : agent.description}
-  `;
-            state.addons = (...exists) => [_jsx(SocialShare, { content: shareContent }), ...exists].filter(Boolean);
-        });
-        return () => {
-            useHeaderState.setState((state) => {
-                state.logo = undefined;
-                state.brand = undefined;
-                state.description = undefined;
-                state.addons = (...exists) => [...exists];
-            });
+                } })),
+            brand: !isMobile ? (_jsx(Box, { sx: {
+                    height: 18,
+                    fontSize: 18,
+                }, children: agent.project.name })) : undefined,
+            description: !isMobile && agent.createdBy ? (_jsx(RuntimeLocaleProvider, { children: _jsx(Box, { sx: {
+                        display: 'inline-flex',
+                        alignItems: 'center',
+                        gap: 0.5,
+                        mt: 0.5,
+                        height: 12,
+                        fontSize: 12,
+                    }, children: _jsx(AgentCreatedBy, { did: agent.project.createdBy }) }) })) : undefined,
+            addons: (...exists) => [_jsx(SocialShare, { content: shareContent }), ...exists].filter(Boolean),
         };
     }, [locale, isMobile, agent]);
     const componentId = (_a = appearancePage === null || appearancePage === void 0 ? void 0 : appearancePage.componentId) !== null && _a !== void 0 ? _a : DEFAULT_PAGE_COMPONENT_ID;

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

@@ -19,13 +19,13 @@ import AgentInputField from '../../components/AgentInputField';
 import LoadingButton from '../../components/LoadingButton';
 import { useCurrentAgent } from '../../contexts/CurrentAgent';
 import { useRuntimeState } from '../../state/runtime';
-import { useSessionState } from '../../state/session';
+import { useCurrentSessionState } from '../../state/session';
 import { isValidInput } from '../../utils/agent-inputs';
 export default function AutoForm({ submitText, inlineLabel, autoFillLastForm = true, submitInQuestionField, chatMode, }) {
     const { t } = useLocaleContext();
     const { aid, agent } = useCurrentAgent();
     const { execute } = useRuntimeState();
-    const running = useSessionState()((s) => s.running);
+    const running = useCurrentSessionState((s) => s === null || s === void 0 ? void 0 : s.running);
     const parameters = useMemo(() => {
         var _a;
         return (_a = agent.parameters) === null || _a === void 0 ? void 0 : _a.filter(isValidInput).map((i) => {
@@ -79,7 +79,7 @@ export default function AutoForm({ submitText, inlineLabel, autoFillLastForm = t
 }
 function useInitialFormValues() {
     const { agent } = useCurrentAgent();
-    const lastMessage = useSessionState()((s) => { var _a; return (_a = s.messages) === null || _a === void 0 ? void 0 : _a.at(-1); });
+    const lastMessage = useCurrentSessionState((s) => { var _a; return (_a = s === null || s === void 0 ? void 0 : s.messages) === null || _a === void 0 ? void 0 : _a.at(-1); });
     const [lastInputs, setLastInputs] = useState();
     useEffect(() => {
         if (!lastInputs) {

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

@@ -25,11 +25,11 @@ import CurrentAgentProvider, { useCurrentAgent } from '../../contexts/CurrentAge
 import CurrentMessageProvider from '../../contexts/CurrentMessage';
 import useAppearances, { useOpeningMessage, useOpeningQuestions, useProfile } from '../../hooks/use-appearances';
 import { useRuntimeState } from '../../state/runtime';
-import { useSessionState } from '../../state/session';
+import { useAutoLoadSessionState, useCurrentSessionState, useSessionState } from '../../state/session';
 import { getOutputVariableInitialValue } from '../../utils/runtime-output-schema';
 import MessageSuggestedQuestions, { MessageSuggestedQuestion } from '../ChatOutput/MessageSuggestedQuestions';
 export default function MultiAgentsChat({ primaryColor, scrollViewProps = { scroll: 'window', initialScrollBehavior: 'auto' }, backgroundImage, }) {
-    useSessionState({ autoLoad: true });
+    useAutoLoadSessionState();
     const inheritedTheme = useTheme();
     const theme = useMemo(() => {
         let { primary } = inheritedTheme.palette;
@@ -64,7 +64,7 @@ export default function MultiAgentsChat({ primaryColor, scrollViewProps = { scro
 }
 function SimpleChatView() {
     // auto scroll to bottom when new message is sent
-    const running = useSessionState()((s) => s.running);
+    const running = useCurrentSessionState((s) => s === null || s === void 0 ? void 0 : s.running);
     const scrollToBottom = useScrollToBottom();
     useEffect(() => {
         if (running)
@@ -106,10 +106,11 @@ function AgentInput() {
 }
 function OutputView(_a) {
     var { currentAgentId } = _a, props = __rest(_a, ["currentAgentId"]);
-    const messages = useSessionState()((s) => s.messages);
-    const loading = useSessionState()((s) => s.loading);
+    const messages = useCurrentSessionState((s) => s === null || s === void 0 ? void 0 : s.messages);
+    const loaded = useSessionState((s) => s.loaded);
+    const showOpening = useCurrentSessionState((s) => !s || (s === null || s === void 0 ? void 0 : s.loaded)) && loaded;
     const lastMessage = messages === null || messages === void 0 ? void 0 : messages.at(-1);
-    return (_jsxs(Stack, Object.assign({ gap: 2 }, props, { children: [_jsx(CurrentAgentProvider, { agentId: currentAgentId, children: _jsx(OpeningMessageView, {}) }), messages === null || messages === void 0 ? void 0 : messages.map((message) => _jsx(OutputItemView, { message: message }, message.taskId)), lastMessage && lastMessage.assistantId === currentAgentId && _jsx(SuggestedQuestionsView, { message: lastMessage }), !loading && !(messages === null || messages === void 0 ? void 0 : messages.length) && (_jsx(CurrentAgentProvider, { agentId: currentAgentId, children: _jsx(OpeningQuestionsView, {}) }))] })));
+    return (_jsxs(Stack, Object.assign({ gap: 2 }, props, { children: [showOpening && (_jsx(CurrentAgentProvider, { agentId: currentAgentId, children: _jsx(OpeningMessageView, {}) })), messages === null || messages === void 0 ? void 0 : messages.map((message) => _jsx(OutputItemView, { message: message }, message.taskId)), lastMessage && lastMessage.assistantId === currentAgentId && _jsx(SuggestedQuestionsView, { message: lastMessage }), showOpening && !(messages === null || messages === void 0 ? void 0 : messages.length) && (_jsx(CurrentAgentProvider, { agentId: currentAgentId, children: _jsx(OpeningQuestionsView, {}) }))] })));
 }
 const OutputItemView = memo(({ message }) => {
     var _a, _b, _c, _d;

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

@@ -22,11 +22,11 @@ import CurrentAgentProvider from '../../contexts/CurrentAgent';
 import CurrentMessageProvider from '../../contexts/CurrentMessage';
 import useAppearances from '../../hooks/use-appearances';
 import { useRuntimeState } from '../../state/runtime';
-import { useSessionState } from '../../state/session';
+import { useAutoLoadSessionState, useCurrentSessionState, useSessionState } from '../../state/session';
 import mapRight from '../../utils/map-right';
 export default function PhotoGallery({ resultTitle, primaryColor }) {
     const { childAgentId } = useRuntimeState();
-    useSessionState({ autoLoad: true });
+    useAutoLoadSessionState();
     const inheritedTheme = useTheme();
     const theme = useMemo(() => {
         let { primary } = inheritedTheme.palette;
@@ -58,15 +58,16 @@ function NoOutputs() {
     return (_jsx(Stack, { mt: 10, children: _jsx(Typography, { color: "text.disabled", children: "You haven't generated any pictures yet." }) }));
 }
 function OutputView(_a) {
-    var _b, _c, _d;
+    var _b, _c, _d, _e;
     var { resultTitle } = _a, props = __rest(_a, ["resultTitle"]);
     const { t } = useLocaleContext();
     const ref = useRef(null);
-    const { messages = [], running, loaded, noMoreMessage, loadMoreMessages } = useSessionState()();
+    const { messages = [], running, loaded, noMoreMessage } = (_b = useCurrentSessionState((s) => s)) !== null && _b !== void 0 ? _b : {};
+    const loadMoreMessages = useSessionState((s) => s.loadMoreMessages);
     return (_jsxs(Stack, Object.assign({ width: "100%", alignItems: "center", px: { xs: 2, sm: 3 }, mt: { xs: 2, sm: 3 } }, props, { children: [resultTitle && (_jsx(Typography, { width: "100%", component: "h2", fontSize: 36, fontWeight: 700, textAlign: "center", children: _jsx(Balancer, { children: resultTitle }) })), loaded && !messages.length && _jsx(NoOutputs, {}), _jsxs(Masonry, { ref: ref, columns: { xs: 2, sm: 3, md: 4, lg: 5 }, spacing: 1, sequential: true, sx: { width: '100%', overflow: 'hidden', '> *': { borderRadius: 1 } }, children: [running && (_jsx(Skeleton, { variant: "rectangular", sx: {
                             // FIXME: default using history height
-                            height: (_d = (_c = (_b = ref.current) === null || _b === void 0 ? void 0 : _b.querySelector('*')) === null || _c === void 0 ? void 0 : _c.clientHeight) !== null && _d !== void 0 ? _d : 200,
-                        } })), mapRight(messages, (message) => (_jsx(OutputItemView, { message: message }, message.taskId)))] }), _jsx(Box, { my: 4, children: !!messages.length && !noMoreMessage && (_jsx(LoadingButton, { variant: "outlined", onClick: loadMoreMessages, children: t('loadMore') })) })] })));
+                            height: (_e = (_d = (_c = ref.current) === null || _c === void 0 ? void 0 : _c.querySelector('*')) === null || _d === void 0 ? void 0 : _d.clientHeight) !== null && _e !== void 0 ? _e : 200,
+                        } })), mapRight(messages, (message) => (_jsx(OutputItemView, { message: message }, message.taskId)))] }), _jsx(Box, { my: 4, children: !!messages.length && !noMoreMessage && (_jsx(LoadingButton, { variant: "outlined", onClick: () => loadMoreMessages(), children: t('loadMore') })) })] })));
 }
 const OutputItemView = memo(({ message }) => {
     const { appearanceOutput } = useAppearances({ agentId: message.assistantId });

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

@@ -1,3 +1,12 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
 var __rest = (this && this.__rest) || function (s, e) {
     var t = {};
     for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
@@ -11,24 +20,29 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { RuntimeOutputVariable } from '@blocklet/ai-runtime/types';
-import { Box, Stack, ThemeProvider, createTheme, useTheme } from '@mui/material';
+import { Icon } from '@iconify/react';
+import { Box, IconButton, ListItemIcon, Stack, ThemeProvider, createTheme, useTheme } from '@mui/material';
 import { memo, useEffect, useMemo } from 'react';
 import { useScrollToBottom } from 'react-scroll-to-bottom';
 import CustomComponentRenderer from '../../../../../components/CustomComponentRenderer';
+import { useLocaleContext } from '../../../../locale';
+import { useHeader } from '../../../../page/header';
 import { useSessionContext } from '../../../../session';
 import SimpleHeader from '../../components/Header/SimpleHeader';
 import SimpleLayout from '../../components/Layout/SimpleLayout';
 import MarkdownRenderer from '../../components/MarkdownRenderer';
+import PopperMenuButton from '../../components/PopperMenuButton';
+import LoadingMenuItem from '../../components/PopperMenuButton/LoadingMenuItem';
 import ScrollView from '../../components/ScrollView';
 import UserInfo from '../../components/UserInfo';
 import CurrentAgentProvider, { useCurrentAgent } from '../../contexts/CurrentAgent';
 import CurrentMessageProvider from '../../contexts/CurrentMessage';
 import useAppearances, { useOpeningMessage, useOpeningQuestions, useProfile } from '../../hooks/use-appearances';
 import { useRuntimeState } from '../../state/runtime';
-import { useSessionState } from '../../state/session';
+import { useAutoLoadSessionState, useCurrentSessionState, useSessionState } from '../../state/session';
 import MessageSuggestedQuestions, { MessageSuggestedQuestion } from '../ChatOutput/MessageSuggestedQuestions';
-export default function SimpleChat({ primaryColor, scrollViewProps = { scroll: 'window', initialScrollBehavior: 'auto' }, }) {
-    useSessionState({ autoLoad: true });
+export default function SimpleChat({ primaryColor, scrollViewProps = { scroll: 'window', initialScrollBehavior: 'auto' }, hideHeaderMenuButton, }) {
+    useAutoLoadSessionState();
     const inheritedTheme = useTheme();
     const theme = useMemo(() => {
         let { primary } = inheritedTheme.palette;
@@ -47,17 +61,27 @@ export default function SimpleChat({ primaryColor, scrollViewProps = { scroll: '
             },
         });
     }, [inheritedTheme, primaryColor]);
-    return (_jsx(ScrollView, Object.assign({}, scrollViewProps, { children: _jsx(ThemeProvider, { theme: theme, children: _jsx(SimpleChatView, {}) }) })));
+    return (_jsx(ScrollView, Object.assign({}, scrollViewProps, { children: _jsx(ThemeProvider, { theme: theme, children: _jsx(SimpleChatView, { hideHeaderMenuButton: hideHeaderMenuButton }) }) })));
 }
-function SimpleChatView() {
+function SimpleChatView({ hideHeaderMenuButton }) {
+    const { t, locale } = useLocaleContext();
     const { childAgentId } = useRuntimeState();
     // auto scroll to bottom when new message is sent
-    const running = useSessionState()((s) => s.running);
+    const running = useCurrentSessionState((s) => s === null || s === void 0 ? void 0 : s.running);
     const scrollToBottom = useScrollToBottom();
     useEffect(() => {
         if (running)
             scrollToBottom({ behavior: 'smooth' });
     }, [scrollToBottom, running]);
+    const clearSession = useSessionState((s) => s.clearSession);
+    useHeader(() => hideHeaderMenuButton
+        ? {}
+        : {
+            addons: (...exists) => [
+                _jsx(PopperMenuButton, { component: IconButton, PopperProps: { placement: 'bottom-end', sx: { zIndex: 'appBar' } }, menus: _jsxs(LoadingMenuItem, { onClick: () => __awaiter(this, void 0, void 0, function* () { return clearSession(); }), children: [_jsx(ListItemIcon, { children: _jsx(Icon, { icon: "mingcute:broom-line" }) }), t('clearSession')] }), children: _jsx(Icon, { icon: "tabler:dots" }) }),
+                ...exists,
+            ],
+        }, [locale, hideHeaderMenuButton]);
     return (_jsxs(SimpleLayout, { children: [_jsx(SimpleHeader, {}), _jsx(OutputView, { className: "aigne-outputs aigne-simple-chat-outputs", flexGrow: 1, pb: 10 }), _jsx(CurrentAgentProvider, { agentId: childAgentId, children: _jsx(AgentInputRender, { className: "aigne-inputs aigne-simple-chat-inputs", sx: { position: 'sticky', bottom: 0, pt: 1, pb: 2, bgcolor: 'background.paper', zIndex: 10 } }) })] }));
 }
 function AgentInputRender(_a) {
@@ -69,10 +93,11 @@ function AgentInputRender(_a) {
 }
 function OutputView(_a) {
     var props = __rest(_a, []);
-    const messages = useSessionState()((s) => s.messages);
-    const loading = useSessionState()((s) => s.loading);
+    const messages = useCurrentSessionState((s) => s === null || s === void 0 ? void 0 : s.messages);
+    const loaded = useSessionState((s) => s.loaded);
+    const showOpening = useCurrentSessionState((s) => !s || (s === null || s === void 0 ? void 0 : s.loaded)) && loaded;
     const lastMessage = messages === null || messages === void 0 ? void 0 : messages.at(-1);
-    return (_jsxs(Stack, Object.assign({ gap: 2 }, props, { children: [_jsx(OpeningMessageView, {}), messages === null || messages === void 0 ? void 0 : messages.map((message) => _jsx(OutputItemView, { message: message }, message.taskId)), lastMessage && _jsx(SuggestedQuestionsView, { message: lastMessage }), !loading && !(messages === null || messages === void 0 ? void 0 : messages.length) && _jsx(OpeningQuestionsView, {})] })));
+    return (_jsxs(Stack, Object.assign({ gap: 2 }, props, { children: [showOpening && _jsx(OpeningMessageView, {}), messages === null || messages === void 0 ? void 0 : messages.map((message) => _jsx(OutputItemView, { message: message }, message.taskId)), lastMessage && _jsx(SuggestedQuestionsView, { message: lastMessage }), showOpening && !(messages === null || messages === void 0 ? void 0 : messages.length) && _jsx(OpeningQuestionsView, {})] })));
 }
 const OutputItemView = memo(({ message }) => {
     var _a, _b, _c, _d;

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

@@ -20,10 +20,10 @@ import CurrentAgentProvider from '../../contexts/CurrentAgent';
 import CurrentMessageProvider from '../../contexts/CurrentMessage';
 import useAppearances from '../../hooks/use-appearances';
 import { useRuntimeState } from '../../state/runtime';
-import { useSessionState } from '../../state/session';
+import { useAutoLoadSessionState, useCurrentSessionState } from '../../state/session';
 export default function SimplePage({ resultTitle, primaryColor }) {
     const { childAgentId } = useRuntimeState();
-    useSessionState({ autoLoad: true });
+    useAutoLoadSessionState();
     const inheritedTheme = useTheme();
     const theme = useMemo(() => {
         let { primary } = inheritedTheme.palette;
@@ -53,7 +53,7 @@ function AgentInputRender(_a) {
 }
 function OutputView(_a) {
     var { resultTitle } = _a, props = __rest(_a, ["resultTitle"]);
-    const lastMessage = useSessionState()((s) => { var _a; return (_a = s.messages) === null || _a === void 0 ? void 0 : _a.at(-1); });
+    const lastMessage = useCurrentSessionState((s) => { var _a; return (_a = s === null || s === void 0 ? void 0 : s.messages) === null || _a === void 0 ? void 0 : _a.at(-1); });
     return (_jsx(Stack, Object.assign({ gap: 2, mt: 4 }, props, { children: lastMessage && (_jsxs(_Fragment, { children: [resultTitle && (_jsx(Typography, { width: "100%", component: "h5", fontSize: 36, fontWeight: 700, textAlign: "center", children: _jsx(Balancer, { children: resultTitle }) })), _jsx(Stack, { children: _jsx(OutputItemView, { message: lastMessage }) })] })) })));
 }
 const OutputItemView = memo(({ message }) => {

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

@@ -19,13 +19,13 @@ import AgentInputField from '../../components/AgentInputField';
 import LoadingButton from '../../components/LoadingButton';
 import { useCurrentAgent } from '../../contexts/CurrentAgent';
 import { useRuntimeState } from '../../state/runtime';
-import { useSessionState } from '../../state/session';
+import { useCurrentSessionState } from '../../state/session';
 import { isValidInput } from '../../utils/agent-inputs';
 export default function AutoForm({ submitText, inlineLabel, autoFillLastForm = true, submitInQuestionField, chatMode, }) {
     const { t } = useLocaleContext();
     const { aid, agent } = useCurrentAgent();
     const { execute } = useRuntimeState();
-    const running = useSessionState()((s) => s.running);
+    const running = useCurrentSessionState((s) => s === null || s === void 0 ? void 0 : s.running);
     const parameters = useMemo(() => {
         var _a;
         return (_a = agent.parameters) === null || _a === void 0 ? void 0 : _a.filter(isValidInput).map((i) => {
@@ -79,7 +79,7 @@ export default function AutoForm({ submitText, inlineLabel, autoFillLastForm = t
 }
 function useInitialFormValues() {
     const { agent } = useCurrentAgent();
-    const lastMessage = useSessionState()((s) => { var _a; return (_a = s.messages) === null || _a === void 0 ? void 0 : _a.at(-1); });
+    const lastMessage = useCurrentSessionState((s) => { var _a; return (_a = s === null || s === void 0 ? void 0 : s.messages) === null || _a === void 0 ? void 0 : _a.at(-1); });
     const [lastInputs, setLastInputs] = useState();
     useEffect(() => {
         if (!lastInputs) {

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

@@ -20,7 +20,7 @@ import CurrentAgentProvider from '../../contexts/CurrentAgent';
 import CurrentMessageProvider from '../../contexts/CurrentMessage';
 import useAppearances from '../../hooks/use-appearances';
 import { useRuntimeState } from '../../state/runtime';
-import { useSessionState } from '../../state/session';
+import { useAutoLoadSessionState, useCurrentSessionState } from '../../state/session';
 const getLineClamp = (count) => {
     return {
         display: '-webkit-box',
@@ -53,9 +53,8 @@ function V0Page({ textColor = '#333', primaryColor }) {
     const [sessionId] = useState('1');
     const [message, setMessage] = useState();
     const { childAgentId } = useRuntimeState();
-    const messagesList = useSessionState({
-        autoLoad: true,
-    })((s) => s.messages);
+    useAutoLoadSessionState();
+    const messagesList = useCurrentSessionState((s) => s === null || s === void 0 ? void 0 : s.messages);
     useEffect(() => {
         if (messagesList === null || messagesList === void 0 ? void 0 : messagesList.length) {
             const lastMessage = messagesList[messagesList.length - 1];