@blocklet/pages-kit 0.2.311 → 0.2.313

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

@@ -22,7 +22,7 @@ var __asyncGenerator = (this && this.__asyncGenerator) || function (thisArg, _ar
     function settle(f, v) { if (f(v), q.shift(), q.length) resume(q[0][0], q[0][1]); }
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.runAgent = exports.deleteSession = exports.updateSession = exports.createSession = exports.getSession = exports.getSessions = void 0;
+exports.runAgent = exports.deleteSession = exports.updateSession = exports.clearSession = exports.createSession = exports.getSession = exports.getSessions = void 0;
 const ufo_1 = require("ufo");
 const stream_1 = require("../../../stream");
 const utils_1 = require("../../../utils");
@@ -58,6 +58,15 @@ function createSession(_a) {
     });
 }
 exports.createSession = createSession;
+function clearSession(_a) {
+    return __awaiter(this, arguments, void 0, function* ({ sessionId }) {
+        return (0, request_1.request)({
+            method: 'POST',
+            url: (0, ufo_1.joinURL)((0, utils_1.getComponentMountPoint)(constants_1.AI_STUDIO_DID), '/api/sessions', sessionId, '/clear'),
+        });
+    });
+}
+exports.clearSession = clearSession;
 function updateSession(_a) {
     return __awaiter(this, arguments, void 0, function* ({ sessionId, name, }) {
         return (0, request_1.request)({

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

@@ -0,0 +1,49 @@
+"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)
+        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 react_1 = require("react");
+function LoadingMenuItem(_a) {
+    var { children, confirmation } = _a, props = __rest(_a, ["children", "confirmation"]);
+    const [clicked, setClicked] = (0, react_1.useState)(false);
+    const [loading, setLoading] = (0, react_1.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 ((0, jsx_runtime_1.jsxs)(material_1.MenuItem, Object.assign({}, props, { onClick: handleClick, sx: Object.assign(Object.assign({}, props.sx), { display: 'flex', alignItems: 'center', gap: 1 }), children: [(clicked && confirmation) || children, (0, jsx_runtime_1.jsx)(material_1.Stack, { direction: "row", alignItems: "center", justifyContent: "flex-end", sx: { width: 18 }, children: loading && (0, jsx_runtime_1.jsx)(material_1.CircularProgress, { size: 14 }) })] })));
+}
+exports.default = LoadingMenuItem;

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

@@ -0,0 +1,68 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const material_1 = require("@mui/material");
+const hooks_1 = require("material-ui-popup-state/hooks");
+const react_1 = __importStar(require("react"));
+function PopperMenuButton(_a) {
+    var { PopperProps, menus } = _a, props = __rest(_a, ["PopperProps", "menus"]);
+    const state = (0, hooks_1.usePopupState)({ variant: 'popper' });
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ component: material_1.Button }, (0, hooks_1.bindTrigger)(state), props)), (0, jsx_runtime_1.jsx)(material_1.Popper, Object.assign({ transition: true }, PopperProps, (0, hooks_1.bindPopper)(state), { children: ({ TransitionProps }) => ((0, jsx_runtime_1.jsx)(material_1.ClickAwayListener, { onClickAway: state.close, children: (0, jsx_runtime_1.jsx)(material_1.Grow, Object.assign({}, TransitionProps, { children: (0, jsx_runtime_1.jsx)(material_1.Paper, { children: (0, jsx_runtime_1.jsx)(material_1.List, { dense: true, sx: {
+                                    [`.${material_1.listItemIconClasses.root}`]: {
+                                        minWidth: 24,
+                                    },
+                                }, children: react_1.default.Children.map(menus, (menu) => !(0, react_1.isValidElement)(menu)
+                                    ? menu
+                                    : react_1.default.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();
+                                        }),
+                                    })) }) }) })) })) }))] }));
+}
+exports.default = PopperMenuButton;

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

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

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

@@ -22,6 +22,15 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __setModuleDefault(result, mod);
     return result;
 };
+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 __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -33,6 +42,9 @@ const material_1 = require("@mui/material");
 const react_2 = require("react");
 const CustomComponentRenderer_1 = __importDefault(require("../../../../../components/CustomComponentRenderer"));
 const ux_1 = require("../../../../arcblock/ux");
+const locale_1 = require("../../../../locale");
+const PopperMenuButton_1 = __importDefault(require("../../components/PopperMenuButton"));
+const LoadingMenuItem_1 = __importDefault(require("../../components/PopperMenuButton/LoadingMenuItem"));
 const RuntimeCommonProvider_1 = __importDefault(require("../../components/RuntimeCommonProvider"));
 const ScrollView_1 = __importDefault(require("../../components/ScrollView"));
 const constants_1 = require("../../constants");
@@ -47,7 +59,7 @@ exports.default = ChatBotButton;
 function ChatBotContent() {
     var _a, _b;
     const anchorEl = (0, react_2.useRef)(null);
-    (0, session_1.useSessionState)({ autoLoad: true });
+    (0, session_1.useAutoLoadSessionState)();
     const { aid } = (0, runtime_1.useRuntimeState)();
     const { appearancePage } = (0, use_appearances_1.default)({ aid });
     const profile = (0, use_appearances_1.useProfile)({ aid });
@@ -61,7 +73,7 @@ function ChatBotContent() {
                         '.aigne-layout': {
                             px: 2,
                         },
-                    }, children: (0, jsx_runtime_1.jsx)(react_2.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: (0, jsx_runtime_1.jsx)(CustomComponentRenderer_1.default, { componentId: componentId, properties: appearancePage === null || appearancePage === void 0 ? void 0 : appearancePage.componentProps, props: { scrollViewProps: { disabled: true } } }) }) }) }))] }));
+                    }, children: (0, jsx_runtime_1.jsx)(react_2.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: (0, jsx_runtime_1.jsx)(CustomComponentRenderer_1.default, { 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 = (0, material_1.useTheme)();
@@ -74,24 +86,29 @@ function ResponsiveChatBotContainer({ open, anchorEl, children, onClose, }) {
     return ((0, jsx_runtime_1.jsx)(ChatBotPopper, { anchorEl: anchorEl, title: profile.name, open: open, onClose: onClose, children: children }));
 }
 function ChatBotPopper({ title, anchorEl, open, children, onClose, }) {
-    return ((0, jsx_runtime_1.jsx)(material_1.Popper, { anchorEl: anchorEl, open: open, disablePortal: true, placement: "top-end", sx: {
+    return ((0, jsx_runtime_1.jsx)(material_1.Popper, { anchorEl: anchorEl, open: open, disablePortal: true, placement: "top-end", transition: true, sx: {
             zIndex: 'modal',
             maxWidth: 500,
             maxHeight: 'min(calc(100vh - 128px), 1000px)',
             width: 500,
             height: '90vh',
-        }, children: (0, jsx_runtime_1.jsx)(material_1.ClickAwayListener, { onClickAway: (e) => {
+        }, children: ({ TransitionProps }) => ((0, jsx_runtime_1.jsx)(material_1.ClickAwayListener, { onClickAway: (e) => {
                 e.preventDefault();
                 e.stopPropagation();
                 onClose === null || onClose === void 0 ? void 0 : onClose();
-            }, children: (0, jsx_runtime_1.jsxs)(material_1.Stack, { sx: {
-                    height: '100%',
-                    boxShadow: 1,
-                    position: 'relative',
-                    background: 'white',
-                    borderRadius: 1,
-                }, children: [(0, jsx_runtime_1.jsxs)(material_1.Stack, { direction: "row", alignItems: "center", justifyContent: "space-between", borderBottom: 1, borderColor: "divider", p: 2, gap: 2, children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "h6", noWrap: true, children: title }), (0, jsx_runtime_1.jsx)(material_1.Button, { sx: { minWidth: 28, minHeight: 28, p: 0 }, onClick: onClose, children: (0, jsx_runtime_1.jsx)(react_1.Icon, { icon: "tabler:x", fontSize: 24, color: "rgba(75, 85, 99, 1)" }) })] }), children] }) }) }));
+            }, children: (0, jsx_runtime_1.jsx)(material_1.Grow, Object.assign({}, TransitionProps, { style: { transformOrigin: 'right bottom' }, timeout: 350, children: (0, jsx_runtime_1.jsxs)(material_1.Stack, { sx: {
+                        height: '100%',
+                        boxShadow: 1,
+                        position: 'relative',
+                        background: 'white',
+                        borderRadius: 1,
+                    }, children: [(0, jsx_runtime_1.jsxs)(material_1.Stack, { direction: "row", alignItems: "center", borderBottom: 1, borderColor: "divider", p: 2, gap: 2, children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "h6", noWrap: true, sx: { flex: 1, width: 1 }, children: title }), (0, jsx_runtime_1.jsx)(ChatMenuButton, {}), (0, jsx_runtime_1.jsx)(material_1.Button, { sx: { minWidth: 28, minHeight: 28, p: 0 }, onClick: onClose, children: (0, jsx_runtime_1.jsx)(react_1.Icon, { icon: "tabler:x", fontSize: 24, color: "rgba(75, 85, 99, 1)" }) })] }), children] }) })) })) }));
 }
 function ChatBotDialog({ title, open, children, onClose, }) {
-    return ((0, jsx_runtime_1.jsxs)(material_1.Dialog, { open: open, onClose: onClose, fullScreen: true, children: [(0, jsx_runtime_1.jsx)(material_1.DialogTitle, { sx: { pl: 0 }, children: (0, jsx_runtime_1.jsxs)(material_1.Stack, { direction: "row", alignItems: "center", gap: 2, children: [(0, jsx_runtime_1.jsx)(material_1.IconButton, { size: "small", onClick: onClose, children: (0, jsx_runtime_1.jsx)(icons_material_1.ArrowBackIosNewRounded, { fontSize: "inherit" }) }), (0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "h6", noWrap: true, children: title })] }) }), (0, jsx_runtime_1.jsx)(material_1.DialogContent, { sx: { p: 0 }, dividers: true, children: children })] }));
+    return ((0, jsx_runtime_1.jsxs)(material_1.Dialog, { open: open, onClose: onClose, fullScreen: true, children: [(0, jsx_runtime_1.jsx)(material_1.DialogTitle, { sx: { px: 1 }, children: (0, jsx_runtime_1.jsxs)(material_1.Stack, { direction: "row", alignItems: "center", gap: 2, children: [(0, jsx_runtime_1.jsx)(material_1.IconButton, { size: "small", onClick: onClose, children: (0, jsx_runtime_1.jsx)(icons_material_1.ArrowBackIosNewRounded, { fontSize: "inherit" }) }), (0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "h6", noWrap: true, sx: { flex: 1, width: 1 }, children: title }), (0, jsx_runtime_1.jsx)(ChatMenuButton, {})] }) }), (0, jsx_runtime_1.jsx)(material_1.DialogContent, { sx: { p: 0 }, dividers: true, children: children })] }));
+}
+function ChatMenuButton() {
+    const { t } = (0, locale_1.useLocaleContext)();
+    const clearSession = (0, session_1.useSessionState)((s) => s.clearSession);
+    return ((0, jsx_runtime_1.jsx)(PopperMenuButton_1.default, { component: material_1.IconButton, PopperProps: { placement: 'bottom-end', sx: { zIndex: 'snackbar' } }, menus: (0, jsx_runtime_1.jsxs)(LoadingMenuItem_1.default, { onClick: () => __awaiter(this, void 0, void 0, function* () { return clearSession(); }), children: [(0, jsx_runtime_1.jsx)(material_1.ListItemIcon, { children: (0, jsx_runtime_1.jsx)(react_1.Icon, { icon: "mingcute:broom-line" }) }), t('clearSession')] }), children: (0, jsx_runtime_1.jsx)(react_1.Icon, { icon: "tabler:dots" }) }));
 }

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

@@ -28,7 +28,6 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
 const material_1 = require("@mui/material");
-const react_1 = require("react");
 const react_helmet_1 = require("react-helmet");
 const ufo_1 = require("ufo");
 const CustomComponentRenderer_1 = __importDefault(require("../../../../../components/CustomComponentRenderer"));
@@ -58,40 +57,30 @@ function RuntimeView() {
     const theme = (0, material_1.useTheme)();
     const isMobile = (0, material_1.useMediaQuery)(theme.breakpoints.down('sm'));
     const { locale } = (0, locale_1.useLocaleContext)();
-    (0, react_1.useEffect)(() => {
-        header_1.useHeaderState.setState((state) => {
-            const logo = (0, ufo_1.joinURL)(window.location.origin, (0, utils_1.getComponentMountPoint)(constants_1.AI_STUDIO_DID), '/api/projects', agent.project.id, '/logo.png');
-            state.logo = logo && ((0, jsx_runtime_1.jsx)(material_1.Box, { component: ux_1.Avatar, src: logo, did: blocklet === null || blocklet === void 0 ? void 0 : blocklet.appId, borderRadius: 1, size: logoSize, sx: {
+    (0, header_1.useHeader)(() => {
+        const logo = (0, ufo_1.joinURL)(window.location.origin, (0, utils_1.getComponentMountPoint)(constants_1.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 && ((0, jsx_runtime_1.jsx)(material_1.Box, { component: ux_1.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 = ((0, jsx_runtime_1.jsx)(material_1.Box, { sx: {
-                        height: 18,
-                        fontSize: 18,
-                    }, children: agent.project.name }));
-                state.description = agent.createdBy && ((0, jsx_runtime_1.jsx)(RuntimeCommonProvider_1.RuntimeLocaleProvider, { children: (0, jsx_runtime_1.jsx)(material_1.Box, { sx: {
-                            display: 'inline-flex',
-                            alignItems: 'center',
-                            gap: 0.5,
-                            mt: 0.5,
-                            height: 12,
-                            fontSize: 12,
-                        }, children: (0, jsx_runtime_1.jsx)(AgentCreatedBy, { did: agent.project.createdBy }) }) }));
-            }
-            const shareContent = `${agent.name}
-
-    ${agent === null || agent === void 0 ? void 0 : agent.description}
-  `;
-            state.addons = (...exists) => [(0, jsx_runtime_1.jsx)(SocialShare_1.default, { content: shareContent }), ...exists].filter(Boolean);
-        });
-        return () => {
-            header_1.useHeaderState.setState((state) => {
-                state.logo = undefined;
-                state.brand = undefined;
-                state.description = undefined;
-                state.addons = (...exists) => [...exists];
-            });
+                } })),
+            brand: !isMobile ? ((0, jsx_runtime_1.jsx)(material_1.Box, { sx: {
+                    height: 18,
+                    fontSize: 18,
+                }, children: agent.project.name })) : undefined,
+            description: !isMobile && agent.createdBy ? ((0, jsx_runtime_1.jsx)(RuntimeCommonProvider_1.RuntimeLocaleProvider, { children: (0, jsx_runtime_1.jsx)(material_1.Box, { sx: {
+                        display: 'inline-flex',
+                        alignItems: 'center',
+                        gap: 0.5,
+                        mt: 0.5,
+                        height: 12,
+                        fontSize: 12,
+                    }, children: (0, jsx_runtime_1.jsx)(AgentCreatedBy, { did: agent.project.createdBy }) }) })) : undefined,
+            addons: (...exists) => [(0, jsx_runtime_1.jsx)(SocialShare_1.default, { 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 : constants_1.DEFAULT_PAGE_COMPONENT_ID;

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

@@ -30,7 +30,7 @@ function AutoForm({ submitText, inlineLabel, autoFillLastForm = true, submitInQu
     const { t } = (0, locale_1.useLocaleContext)();
     const { aid, agent } = (0, CurrentAgent_1.useCurrentAgent)();
     const { execute } = (0, runtime_1.useRuntimeState)();
-    const running = (0, session_1.useSessionState)()((s) => s.running);
+    const running = (0, session_1.useCurrentSessionState)((s) => s === null || s === void 0 ? void 0 : s.running);
     const parameters = (0, react_1.useMemo)(() => {
         var _a;
         return (_a = agent.parameters) === null || _a === void 0 ? void 0 : _a.filter(agent_inputs_1.isValidInput).map((i) => {
@@ -85,7 +85,7 @@ function AutoForm({ submitText, inlineLabel, autoFillLastForm = true, submitInQu
 exports.default = AutoForm;
 function useInitialFormValues() {
     const { agent } = (0, CurrentAgent_1.useCurrentAgent)();
-    const lastMessage = (0, session_1.useSessionState)()((s) => { var _a; return (_a = s.messages) === null || _a === void 0 ? void 0 : _a.at(-1); });
+    const lastMessage = (0, session_1.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] = (0, react_1.useState)();
     (0, react_1.useEffect)(() => {
         if (!lastInputs) {

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

@@ -57,7 +57,7 @@ const session_2 = require("../../state/session");
 const runtime_output_schema_1 = require("../../utils/runtime-output-schema");
 const MessageSuggestedQuestions_1 = __importStar(require("../ChatOutput/MessageSuggestedQuestions"));
 function MultiAgentsChat({ primaryColor, scrollViewProps = { scroll: 'window', initialScrollBehavior: 'auto' }, backgroundImage, }) {
-    (0, session_2.useSessionState)({ autoLoad: true });
+    (0, session_2.useAutoLoadSessionState)();
     const inheritedTheme = (0, material_1.useTheme)();
     const theme = (0, react_1.useMemo)(() => {
         let { primary } = inheritedTheme.palette;
@@ -93,7 +93,7 @@ function MultiAgentsChat({ primaryColor, scrollViewProps = { scroll: 'window', i
 exports.default = MultiAgentsChat;
 function SimpleChatView() {
     // auto scroll to bottom when new message is sent
-    const running = (0, session_2.useSessionState)()((s) => s.running);
+    const running = (0, session_2.useCurrentSessionState)((s) => s === null || s === void 0 ? void 0 : s.running);
     const scrollToBottom = (0, react_scroll_to_bottom_1.useScrollToBottom)();
     (0, react_1.useEffect)(() => {
         if (running)
@@ -135,10 +135,11 @@ function AgentInput() {
 }
 function OutputView(_a) {
     var { currentAgentId } = _a, props = __rest(_a, ["currentAgentId"]);
-    const messages = (0, session_2.useSessionState)()((s) => s.messages);
-    const loading = (0, session_2.useSessionState)()((s) => s.loading);
+    const messages = (0, session_2.useCurrentSessionState)((s) => s === null || s === void 0 ? void 0 : s.messages);
+    const loaded = (0, session_2.useSessionState)((s) => s.loaded);
+    const showOpening = (0, session_2.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 ((0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ gap: 2 }, props, { children: [(0, jsx_runtime_1.jsx)(CurrentAgent_1.default, { agentId: currentAgentId, children: (0, jsx_runtime_1.jsx)(OpeningMessageView, {}) }), messages === null || messages === void 0 ? void 0 : messages.map((message) => (0, jsx_runtime_1.jsx)(OutputItemView, { message: message }, message.taskId)), lastMessage && lastMessage.assistantId === currentAgentId && (0, jsx_runtime_1.jsx)(SuggestedQuestionsView, { message: lastMessage }), !loading && !(messages === null || messages === void 0 ? void 0 : messages.length) && ((0, jsx_runtime_1.jsx)(CurrentAgent_1.default, { agentId: currentAgentId, children: (0, jsx_runtime_1.jsx)(OpeningQuestionsView, {}) }))] })));
+    return ((0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ gap: 2 }, props, { children: [showOpening && ((0, jsx_runtime_1.jsx)(CurrentAgent_1.default, { agentId: currentAgentId, children: (0, jsx_runtime_1.jsx)(OpeningMessageView, {}) })), messages === null || messages === void 0 ? void 0 : messages.map((message) => (0, jsx_runtime_1.jsx)(OutputItemView, { message: message }, message.taskId)), lastMessage && lastMessage.assistantId === currentAgentId && (0, jsx_runtime_1.jsx)(SuggestedQuestionsView, { message: lastMessage }), showOpening && !(messages === null || messages === void 0 ? void 0 : messages.length) && ((0, jsx_runtime_1.jsx)(CurrentAgent_1.default, { agentId: currentAgentId, children: (0, jsx_runtime_1.jsx)(OpeningQuestionsView, {}) }))] })));
 }
 const OutputItemView = (0, react_1.memo)(({ message }) => {
     var _a, _b, _c, _d;

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

@@ -31,7 +31,7 @@ const session_1 = require("../../state/session");
 const map_right_1 = __importDefault(require("../../utils/map-right"));
 function PhotoGallery({ resultTitle, primaryColor }) {
     const { childAgentId } = (0, runtime_1.useRuntimeState)();
-    (0, session_1.useSessionState)({ autoLoad: true });
+    (0, session_1.useAutoLoadSessionState)();
     const inheritedTheme = (0, material_1.useTheme)();
     const theme = (0, react_1.useMemo)(() => {
         let { primary } = inheritedTheme.palette;
@@ -64,15 +64,16 @@ function NoOutputs() {
     return ((0, jsx_runtime_1.jsx)(material_1.Stack, { mt: 10, children: (0, jsx_runtime_1.jsx)(material_1.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 } = (0, locale_1.useLocaleContext)();
     const ref = (0, react_1.useRef)(null);
-    const { messages = [], running, loaded, noMoreMessage, loadMoreMessages } = (0, session_1.useSessionState)()();
+    const { messages = [], running, loaded, noMoreMessage } = (_b = (0, session_1.useCurrentSessionState)((s) => s)) !== null && _b !== void 0 ? _b : {};
+    const loadMoreMessages = (0, session_1.useSessionState)((s) => s.loadMoreMessages);
     return ((0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ width: "100%", alignItems: "center", px: { xs: 2, sm: 3 }, mt: { xs: 2, sm: 3 } }, props, { children: [resultTitle && ((0, jsx_runtime_1.jsx)(material_1.Typography, { width: "100%", component: "h2", fontSize: 36, fontWeight: 700, textAlign: "center", children: (0, jsx_runtime_1.jsx)(react_wrap_balancer_1.default, { children: resultTitle }) })), loaded && !messages.length && (0, jsx_runtime_1.jsx)(NoOutputs, {}), (0, jsx_runtime_1.jsxs)(lab_1.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 && ((0, jsx_runtime_1.jsx)(material_1.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,
-                        } })), (0, map_right_1.default)(messages, (message) => ((0, jsx_runtime_1.jsx)(OutputItemView, { message: message }, message.taskId)))] }), (0, jsx_runtime_1.jsx)(material_1.Box, { my: 4, children: !!messages.length && !noMoreMessage && ((0, jsx_runtime_1.jsx)(LoadingButton_1.default, { 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,
+                        } })), (0, map_right_1.default)(messages, (message) => ((0, jsx_runtime_1.jsx)(OutputItemView, { message: message }, message.taskId)))] }), (0, jsx_runtime_1.jsx)(material_1.Box, { my: 4, children: !!messages.length && !noMoreMessage && ((0, jsx_runtime_1.jsx)(LoadingButton_1.default, { variant: "outlined", onClick: () => loadMoreMessages(), children: t('loadMore') })) })] })));
 }
 const OutputItemView = (0, react_1.memo)(({ message }) => {
     const { appearanceOutput } = (0, use_appearances_1.default)({ agentId: message.assistantId });

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

@@ -22,6 +22,15 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __setModuleDefault(result, mod);
     return result;
 };
+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)
@@ -39,14 +48,19 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
 const types_1 = require("@blocklet/ai-runtime/types");
+const react_1 = require("@iconify/react");
 const material_1 = require("@mui/material");
-const react_1 = require("react");
+const react_2 = require("react");
 const react_scroll_to_bottom_1 = require("react-scroll-to-bottom");
 const CustomComponentRenderer_1 = __importDefault(require("../../../../../components/CustomComponentRenderer"));
+const locale_1 = require("../../../../locale");
+const header_1 = require("../../../../page/header");
 const session_1 = require("../../../../session");
 const SimpleHeader_1 = __importDefault(require("../../components/Header/SimpleHeader"));
 const SimpleLayout_1 = __importDefault(require("../../components/Layout/SimpleLayout"));
 const MarkdownRenderer_1 = __importDefault(require("../../components/MarkdownRenderer"));
+const PopperMenuButton_1 = __importDefault(require("../../components/PopperMenuButton"));
+const LoadingMenuItem_1 = __importDefault(require("../../components/PopperMenuButton/LoadingMenuItem"));
 const ScrollView_1 = __importDefault(require("../../components/ScrollView"));
 const UserInfo_1 = __importDefault(require("../../components/UserInfo"));
 const CurrentAgent_1 = __importStar(require("../../contexts/CurrentAgent"));
@@ -55,10 +69,10 @@ const use_appearances_1 = __importStar(require("../../hooks/use-appearances"));
 const runtime_1 = require("../../state/runtime");
 const session_2 = require("../../state/session");
 const MessageSuggestedQuestions_1 = __importStar(require("../ChatOutput/MessageSuggestedQuestions"));
-function SimpleChat({ primaryColor, scrollViewProps = { scroll: 'window', initialScrollBehavior: 'auto' }, }) {
-    (0, session_2.useSessionState)({ autoLoad: true });
+function SimpleChat({ primaryColor, scrollViewProps = { scroll: 'window', initialScrollBehavior: 'auto' }, hideHeaderMenuButton, }) {
+    (0, session_2.useAutoLoadSessionState)();
     const inheritedTheme = (0, material_1.useTheme)();
-    const theme = (0, react_1.useMemo)(() => {
+    const theme = (0, react_2.useMemo)(() => {
         let { primary } = inheritedTheme.palette;
         try {
             if (primaryColor) {
@@ -75,18 +89,28 @@ function SimpleChat({ primaryColor, scrollViewProps = { scroll: 'window', initia
             },
         });
     }, [inheritedTheme, primaryColor]);
-    return ((0, jsx_runtime_1.jsx)(ScrollView_1.default, Object.assign({}, scrollViewProps, { children: (0, jsx_runtime_1.jsx)(material_1.ThemeProvider, { theme: theme, children: (0, jsx_runtime_1.jsx)(SimpleChatView, {}) }) })));
+    return ((0, jsx_runtime_1.jsx)(ScrollView_1.default, Object.assign({}, scrollViewProps, { children: (0, jsx_runtime_1.jsx)(material_1.ThemeProvider, { theme: theme, children: (0, jsx_runtime_1.jsx)(SimpleChatView, { hideHeaderMenuButton: hideHeaderMenuButton }) }) })));
 }
 exports.default = SimpleChat;
-function SimpleChatView() {
+function SimpleChatView({ hideHeaderMenuButton }) {
+    const { t, locale } = (0, locale_1.useLocaleContext)();
     const { childAgentId } = (0, runtime_1.useRuntimeState)();
     // auto scroll to bottom when new message is sent
-    const running = (0, session_2.useSessionState)()((s) => s.running);
+    const running = (0, session_2.useCurrentSessionState)((s) => s === null || s === void 0 ? void 0 : s.running);
     const scrollToBottom = (0, react_scroll_to_bottom_1.useScrollToBottom)();
-    (0, react_1.useEffect)(() => {
+    (0, react_2.useEffect)(() => {
         if (running)
             scrollToBottom({ behavior: 'smooth' });
     }, [scrollToBottom, running]);
+    const clearSession = (0, session_2.useSessionState)((s) => s.clearSession);
+    (0, header_1.useHeader)(() => hideHeaderMenuButton
+        ? {}
+        : {
+            addons: (...exists) => [
+                (0, jsx_runtime_1.jsx)(PopperMenuButton_1.default, { component: material_1.IconButton, PopperProps: { placement: 'bottom-end', sx: { zIndex: 'appBar' } }, menus: (0, jsx_runtime_1.jsxs)(LoadingMenuItem_1.default, { onClick: () => __awaiter(this, void 0, void 0, function* () { return clearSession(); }), children: [(0, jsx_runtime_1.jsx)(material_1.ListItemIcon, { children: (0, jsx_runtime_1.jsx)(react_1.Icon, { icon: "mingcute:broom-line" }) }), t('clearSession')] }), children: (0, jsx_runtime_1.jsx)(react_1.Icon, { icon: "tabler:dots" }) }),
+                ...exists,
+            ],
+        }, [locale, hideHeaderMenuButton]);
     return ((0, jsx_runtime_1.jsxs)(SimpleLayout_1.default, { children: [(0, jsx_runtime_1.jsx)(SimpleHeader_1.default, {}), (0, jsx_runtime_1.jsx)(OutputView, { className: "aigne-outputs aigne-simple-chat-outputs", flexGrow: 1, pb: 10 }), (0, jsx_runtime_1.jsx)(CurrentAgent_1.default, { agentId: childAgentId, children: (0, jsx_runtime_1.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) {
@@ -98,12 +122,13 @@ function AgentInputRender(_a) {
 }
 function OutputView(_a) {
     var props = __rest(_a, []);
-    const messages = (0, session_2.useSessionState)()((s) => s.messages);
-    const loading = (0, session_2.useSessionState)()((s) => s.loading);
+    const messages = (0, session_2.useCurrentSessionState)((s) => s === null || s === void 0 ? void 0 : s.messages);
+    const loaded = (0, session_2.useSessionState)((s) => s.loaded);
+    const showOpening = (0, session_2.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 ((0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ gap: 2 }, props, { children: [(0, jsx_runtime_1.jsx)(OpeningMessageView, {}), messages === null || messages === void 0 ? void 0 : messages.map((message) => (0, jsx_runtime_1.jsx)(OutputItemView, { message: message }, message.taskId)), lastMessage && (0, jsx_runtime_1.jsx)(SuggestedQuestionsView, { message: lastMessage }), !loading && !(messages === null || messages === void 0 ? void 0 : messages.length) && (0, jsx_runtime_1.jsx)(OpeningQuestionsView, {})] })));
+    return ((0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ gap: 2 }, props, { children: [showOpening && (0, jsx_runtime_1.jsx)(OpeningMessageView, {}), messages === null || messages === void 0 ? void 0 : messages.map((message) => (0, jsx_runtime_1.jsx)(OutputItemView, { message: message }, message.taskId)), lastMessage && (0, jsx_runtime_1.jsx)(SuggestedQuestionsView, { message: lastMessage }), showOpening && !(messages === null || messages === void 0 ? void 0 : messages.length) && (0, jsx_runtime_1.jsx)(OpeningQuestionsView, {})] })));
 }
-const OutputItemView = (0, react_1.memo)(({ message }) => {
+const OutputItemView = (0, react_2.memo)(({ message }) => {
     var _a, _b, _c, _d;
     const { session: authSession } = (0, session_1.useSessionContext)();
     const { appearanceOutput } = (0, use_appearances_1.default)({ agentId: message.assistantId });
@@ -119,7 +144,7 @@ const OutputItemView = (0, react_1.memo)(({ message }) => {
 function SuggestedQuestionsView({ message }) {
     const { aid } = (0, CurrentAgent_1.useCurrentAgent)({ agentId: message.assistantId });
     const { execute } = (0, runtime_1.useRuntimeState)();
-    const suggestedQuestions = (0, react_1.useMemo)(() => {
+    const suggestedQuestions = (0, react_2.useMemo)(() => {
         var _a, _b, _c;
         return (_c = (_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[0]) === null || _c === void 0 ? void 0 : _c.data[types_1.RuntimeOutputVariable.suggestedQuestions];
     }, [message]);
@@ -127,7 +152,7 @@ function SuggestedQuestionsView({ message }) {
                 execute({ aid, parameters: Object.assign(Object.assign({}, message.parameters), { question: item.question }) });
             } })) : null }));
 }
-const OpeningMessageView = (0, react_1.memo)(() => {
+const OpeningMessageView = (0, react_2.memo)(() => {
     var _a;
     const { childAgentId } = (0, runtime_1.useRuntimeState)();
     const opening = (0, use_appearances_1.useOpeningMessage)({ agentId: childAgentId });

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

@@ -28,7 +28,7 @@ const runtime_1 = require("../../state/runtime");
 const session_1 = require("../../state/session");
 function SimplePage({ resultTitle, primaryColor }) {
     const { childAgentId } = (0, runtime_1.useRuntimeState)();
-    (0, session_1.useSessionState)({ autoLoad: true });
+    (0, session_1.useAutoLoadSessionState)();
     const inheritedTheme = (0, material_1.useTheme)();
     const theme = (0, react_1.useMemo)(() => {
         let { primary } = inheritedTheme.palette;
@@ -59,7 +59,7 @@ function AgentInputRender(_a) {
 }
 function OutputView(_a) {
     var { resultTitle } = _a, props = __rest(_a, ["resultTitle"]);
-    const lastMessage = (0, session_1.useSessionState)()((s) => { var _a; return (_a = s.messages) === null || _a === void 0 ? void 0 : _a.at(-1); });
+    const lastMessage = (0, session_1.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 ((0, jsx_runtime_1.jsx)(material_1.Stack, Object.assign({ gap: 2, mt: 4 }, props, { children: lastMessage && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [resultTitle && ((0, jsx_runtime_1.jsx)(material_1.Typography, { width: "100%", component: "h5", fontSize: 36, fontWeight: 700, textAlign: "center", children: (0, jsx_runtime_1.jsx)(react_wrap_balancer_1.default, { children: resultTitle }) })), (0, jsx_runtime_1.jsx)(material_1.Stack, { children: (0, jsx_runtime_1.jsx)(OutputItemView, { message: lastMessage }) })] })) })));
 }
 const OutputItemView = (0, react_1.memo)(({ message }) => {

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

@@ -30,7 +30,7 @@ function AutoForm({ submitText, inlineLabel, autoFillLastForm = true, submitInQu
     const { t } = (0, locale_1.useLocaleContext)();
     const { aid, agent } = (0, CurrentAgent_1.useCurrentAgent)();
     const { execute } = (0, runtime_1.useRuntimeState)();
-    const running = (0, session_1.useSessionState)()((s) => s.running);
+    const running = (0, session_1.useCurrentSessionState)((s) => s === null || s === void 0 ? void 0 : s.running);
     const parameters = (0, react_1.useMemo)(() => {
         var _a;
         return (_a = agent.parameters) === null || _a === void 0 ? void 0 : _a.filter(agent_inputs_1.isValidInput).map((i) => {
@@ -85,7 +85,7 @@ function AutoForm({ submitText, inlineLabel, autoFillLastForm = true, submitInQu
 exports.default = AutoForm;
 function useInitialFormValues() {
     const { agent } = (0, CurrentAgent_1.useCurrentAgent)();
-    const lastMessage = (0, session_1.useSessionState)()((s) => { var _a; return (_a = s.messages) === null || _a === void 0 ? void 0 : _a.at(-1); });
+    const lastMessage = (0, session_1.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] = (0, react_1.useState)();
     (0, react_1.useEffect)(() => {
         if (!lastInputs) {

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

@@ -58,9 +58,8 @@ function V0Page({ textColor = '#333', primaryColor }) {
     const [sessionId] = (0, react_1.useState)('1');
     const [message, setMessage] = (0, react_1.useState)();
     const { childAgentId } = (0, runtime_1.useRuntimeState)();
-    const messagesList = (0, session_1.useSessionState)({
-        autoLoad: true,
-    })((s) => s.messages);
+    (0, session_1.useAutoLoadSessionState)();
+    const messagesList = (0, session_1.useCurrentSessionState)((s) => s === null || s === void 0 ? void 0 : s.messages);
     (0, react_1.useEffect)(() => {
         if (messagesList === null || messagesList === void 0 ? void 0 : messagesList.length) {
             const lastMessage = messagesList[messagesList.length - 1];