@blocklet/pages-kit 0.2.302 → 0.2.304

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

@@ -16,18 +16,19 @@ var __asyncValues = (this && this.__asyncValues) || function (o) {
     function settle(resolve, reject, d, v) { Promise.resolve(v).then(function(v) { resolve({ value: v, done: d }); }, reject); }
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.createSessionState = void 0;
+exports.useSessionState = exports.createSessionState = void 0;
 const aid_1 = require("@blocklet/ai-runtime/common/aid");
+const react_1 = require("react");
 const zustand_1 = require("zustand");
 const immer_1 = require("zustand/middleware/immer");
 const message_1 = require("../api/message");
 const session_1 = require("../api/session");
-const STATES = {};
+const Runtime_1 = require("../contexts/Runtime");
+const zustand_2 = require("../utils/zustand");
 const GET_MESSAGES_LIMIT = 100;
 const GET_MESSAGES_ORDER_DIRECTION = 'desc';
 const createSessionState = ({ aid }) => {
-    var _a;
-    (_a = STATES[aid]) !== null && _a !== void 0 ? _a : (STATES[aid] = (0, zustand_1.create)()((0, immer_1.immer)((set, get) => ({
+    return (0, zustand_2.createCachedStore)(aid, () => (0, zustand_1.create)()((0, immer_1.immer)((set, get) => ({
         reset: () => {
             set((state) => {
                 state.loading = undefined;
@@ -41,13 +42,13 @@ const createSessionState = ({ aid }) => {
             });
         },
         load: () => __awaiter(void 0, void 0, void 0, function* () {
-            var _b;
+            var _a;
             set((state) => {
                 state.loading = true;
             });
             try {
                 const { sessions } = yield (0, session_1.getSessions)({ aid });
-                const session = (_b = sessions[0]) !== null && _b !== void 0 ? _b : (yield (0, session_1.createSession)({ aid })).created;
+                const session = (_a = sessions[0]) !== null && _a !== void 0 ? _a : (yield (0, session_1.createSession)({ aid })).created;
                 const { messages } = yield (0, message_1.getMessages)({
                     sessionId: session.id,
                     orderDirection: GET_MESSAGES_ORDER_DIRECTION,
@@ -73,7 +74,7 @@ const createSessionState = ({ aid }) => {
             }
         }),
         loadMoreMessages: () => __awaiter(void 0, void 0, void 0, function* () {
-            var _c;
+            var _b;
             set((state) => {
                 state.messageLoading = true;
             });
@@ -83,7 +84,7 @@ const createSessionState = ({ aid }) => {
             try {
                 const result = yield (0, message_1.getMessages)({
                     sessionId: session.id,
-                    before: (_c = messages === null || messages === void 0 ? void 0 : messages.slice(-1)[0]) === null || _c === void 0 ? void 0 : _c.id,
+                    before: (_b = messages === null || messages === void 0 ? void 0 : messages.slice(-1)[0]) === null || _b === void 0 ? void 0 : _b.id,
                     orderDirection: GET_MESSAGES_ORDER_DIRECTION,
                     limit: GET_MESSAGES_LIMIT,
                 });
@@ -99,8 +100,8 @@ const createSessionState = ({ aid }) => {
                 });
             }
         }),
-        execute: (_d) => __awaiter(void 0, [_d], void 0, function* ({ aid, working, parameters, onResponseStart, }) {
-            var _e, e_1, _f, _g;
+        execute: (_c) => __awaiter(void 0, [_c], void 0, function* ({ aid, working, parameters, onResponseStart, }) {
+            var _d, e_1, _e, _f;
             let { session } = get();
             if (!session) {
                 yield get().load();
@@ -124,10 +125,10 @@ const createSessionState = ({ aid }) => {
                 });
                 let responseStarted = false;
                 try {
-                    for (var _h = true, stream_1 = __asyncValues(stream), stream_1_1; stream_1_1 = yield stream_1.next(), _e = stream_1_1.done, !_e; _h = true) {
-                        _g = stream_1_1.value;
-                        _h = false;
-                        const value = _g;
+                    for (var _g = true, stream_1 = __asyncValues(stream), stream_1_1; stream_1_1 = yield stream_1.next(), _d = stream_1_1.done, !_d; _g = true) {
+                        _f = stream_1_1.value;
+                        _g = false;
+                        const value = _f;
                         if (!responseStarted) {
                             responseStarted = true;
                             onResponseStart === null || onResponseStart === void 0 ? void 0 : onResponseStart();
@@ -185,7 +186,7 @@ const createSessionState = ({ aid }) => {
                 catch (e_1_1) { e_1 = { error: e_1_1 }; }
                 finally {
                     try {
-                        if (!_h && !_e && (_f = stream_1.return)) yield _f.call(stream_1);
+                        if (!_g && !_d && (_e = stream_1.return)) yield _e.call(stream_1);
                     }
                     finally { if (e_1) throw e_1.error; }
                 }
@@ -208,6 +209,18 @@ const createSessionState = ({ aid }) => {
             }
         }),
     }))));
-    return STATES[aid];
 };
 exports.createSessionState = createSessionState;
+function useSessionState({ autoLoad } = {}) {
+    const { aid } = (0, Runtime_1.useRuntimeContext)();
+    const state = (0, react_1.useMemo)(() => (0, exports.createSessionState)({ aid }), [aid]);
+    (0, react_1.useEffect)(() => {
+        if (!autoLoad)
+            return;
+        const { loading, loaded, load } = state.getState();
+        if (!loading && !loaded)
+            load();
+    }, [state, autoLoad]);
+    return state;
+}
+exports.useSessionState = useSessionState;

package/lib/cjs/builtin/async/ai-runtime/utils/agent-inputs.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.isValidInput = exports.USER_INPUT_PARAMETER_TYPES = void 0;
+exports.USER_INPUT_PARAMETER_TYPES = ['string', 'number', 'select', 'language'];
+function isValidInput(input) {
+    return !!input.key && exports.USER_INPUT_PARAMETER_TYPES.includes(input.type || 'string');
+}
+exports.isValidInput = isValidInput;

package/lib/cjs/builtin/async/ai-runtime/utils/zustand.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createCachedStore = void 0;
+const STATES = {};
+function createCachedStore(key, creator) {
+    var _a;
+    (_a = STATES[key]) !== null && _a !== void 0 ? _a : (STATES[key] = creator());
+    return STATES[key];
+}
+exports.createCachedStore = createCachedStore;

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

@@ -13,19 +13,13 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Icon } from '@iconify/react';
 import { Box, Stack, styled } from '@mui/material';
 import React from 'react';
+import Markdown from 'react-markdown';
+import remarkGfm from 'remark-gfm';
 import { useLocaleContext } from '../../../locale';
-import MarkdownAsync from '../../react-markdown';
 import ReactSyntaxHighlighterAsync from '../../react-syntax-highlighter';
 import ActionButton from './ActionButton';
 const ReactSyntaxHighlighter = React.lazy(() => ReactSyntaxHighlighterAsync().then((m) => ({ default: m.Prism })));
-const Markdown = React.lazy(() => Promise.all([
-    MarkdownAsync(),
-    // @ts-ignore
-    import('https://esm.sh/remark-gfm@4?bundle'),
-]).then(([{ default: Markdown }, remark]) => ({
-    default: (props) => _jsx(Markdown, Object.assign({}, props, { remarkPlugins: [remark.default] })),
-})));
-const MarkdownRenderer = styled((props) => (_jsx(Markdown, Object.assign({}, props, { components: {
+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"]);

package/lib/esm/builtin/async/ai-runtime/contexts/CurrentAgent.js

@@ -5,21 +5,27 @@ import { createContext, useContext, useMemo } from 'react';
 import { DEFAULT_INPUT_COMPONENT_ID, DEFAULT_OUTPUT_COMPONENT_ID } from '../constants';
 import { useAgentState } from '../state/agent';
 import { useRuntimeState } from '../state/runtime';
-const context = createContext(undefined);
-export default function CurrentAgentProvider({ agentId, children }) {
+function useCurrentAid({ agentId }) {
     const { aid } = useRuntimeState();
-    const state = useMemo(() => ({
+    return useMemo(() => ({
         aid: stringifyIdentity(Object.assign(Object.assign({}, parseIdentity(aid, { rejectWhenError: true })), { assistantId: agentId })),
     }), [aid, agentId]);
+}
+const context = createContext(undefined);
+export default function CurrentAgentProvider({ agentId, children }) {
+    const state = useCurrentAid({ agentId });
     return _jsx(context.Provider, { value: state, children: children });
 }
-export function useCurrentAgent() {
-    const { working } = useRuntimeState();
+export function useCurrentAgent({ agentId } = {}) {
+    const { aid: runtimeAid, working } = useRuntimeState();
+    const aidFromParam = useMemo(() => agentId &&
+        stringifyIdentity(Object.assign(Object.assign({}, parseIdentity(runtimeAid, { rejectWhenError: true })), { assistantId: agentId })), [agentId]);
     const current = useContext(context);
-    if (!current) {
+    const aid = aidFromParam !== null && aidFromParam !== void 0 ? aidFromParam : current === null || current === void 0 ? void 0 : current.aid;
+    if (!aid) {
         throw new Error('No such current agent state. You should use `useCurrentAgent` within the `CurrentAgentProvider`');
     }
-    const [agent] = useAgentState({ aid: current.aid, working });
+    const [agent] = useAgentState({ aid, working });
     const appearanceInput = useMemo(() => {
         var _a, _b, _c;
         return (_c = (_b = (_a = agent.outputVariables) === null || _a === void 0 ? void 0 : _a.find((i) => i.name === RuntimeOutputVariable.appearanceInput)) === null || _b === void 0 ? void 0 : _b.initialValue) !== null && _c !== void 0 ? _c : { componentId: DEFAULT_INPUT_COMPONENT_ID };
@@ -28,5 +34,5 @@ export function useCurrentAgent() {
         var _a, _b, _c;
         return (_c = (_b = (_a = agent.outputVariables) === null || _a === void 0 ? void 0 : _a.find((i) => i.name === RuntimeOutputVariable.appearanceOutput)) === null || _b === void 0 ? void 0 : _b.initialValue) !== null && _c !== void 0 ? _c : { componentId: DEFAULT_OUTPUT_COMPONENT_ID };
     }, [agent]);
-    return Object.assign(Object.assign({}, current), { agent, appearanceInput, appearanceOutput });
+    return { aid, agent, appearanceInput, appearanceOutput };
 }

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

@@ -2,7 +2,7 @@ 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, IconButton, Popper, Stack, Typography, useMediaQuery, useTheme, } from '@mui/material';
-import { Suspense, useEffect, useRef, useState } from 'react';
+import { Suspense, useRef, useState } from 'react';
 import CustomComponentRenderer from '../../../../../components/CustomComponentRenderer';
 import { Avatar } from '../../../../arcblock/ux';
 import RuntimeCommonProvider from '../../components/RuntimeCommonProvider';
@@ -10,19 +10,18 @@ import ScrollView from '../../components/ScrollView';
 import { DEFAULT_PAGE_COMPONENT_ID } from '../../constants';
 import RuntimeProvider from '../../contexts/Runtime';
 import { useRuntimeState } from '../../state/runtime';
+import { 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, _c;
     const anchorEl = useRef(null);
-    const { appearancePage, sessionState } = useRuntimeState();
+    useSessionState({ autoLoad: true });
+    const { appearancePage } = useRuntimeState();
     const [open, setOpen] = useState(false);
-    useEffect(() => {
-        sessionState.load();
-    }, []);
     const componentId = (_a = appearancePage === null || appearancePage === void 0 ? void 0 : appearancePage.componentId) !== null && _a !== void 0 ? _a : DEFAULT_PAGE_COMPONENT_ID;
-    return (_jsxs(Box, { sx: { position: 'fixed', bottom: 32, right: 16, zIndex: 'fab' }, children: [_jsx(Fab, { sx: { width: 44, height: 44, boxShadow: open ? 0 : undefined }, onClick: () => setOpen(true), children: _jsx(Avatar, { size: 44, did: (_b = globalThis.blocklet) === null || _b === void 0 ? void 0 : _b.appId, variant: "circle", shape: "circle", src: (_c = appearancePage === null || appearancePage === void 0 ? void 0 : appearancePage.logo) === null || _c === void 0 ? void 0 : _c.url }) }), _jsx(Stack, { width: "100%", ref: anchorEl }), anchorEl.current && (_jsx(ResponsiveChatBotContainer, { anchorEl: anchorEl.current, open: open, onClose: () => setOpen(false), children: _jsx(ScrollView, { initialScrollBehavior: "auto", component: Stack, sx: {
+    return (_jsxs(Box, { sx: { position: 'fixed', bottom: 32, right: 16, zIndex: 'modal' }, children: [_jsx(Fab, { sx: { width: 44, height: 44, boxShadow: open ? 0 : undefined }, onClick: () => setOpen(true), children: _jsx(Avatar, { size: 44, did: (_b = globalThis.blocklet) === null || _b === void 0 ? void 0 : _b.appId, variant: "circle", shape: "circle", src: (_c = appearancePage === null || appearancePage === void 0 ? void 0 : appearancePage.logo) === null || _c === void 0 ? void 0 : _c.url }) }), _jsx(Stack, { width: "100%", ref: anchorEl }), anchorEl.current && (_jsx(ResponsiveChatBotContainer, { anchorEl: anchorEl.current, open: open, onClose: () => setOpen(false), children: _jsx(ScrollView, { initialScrollBehavior: "auto", component: Stack, sx: {
                         overscrollBehavior: 'contain',
                         height: '100%',
                         width: '100%',
@@ -43,12 +42,12 @@ function ResponsiveChatBotContainer({ open, anchorEl, children, onClose, }) {
     return (_jsx(ChatBotPopper, { anchorEl: anchorEl, title: title, open: open, onClose: onClose, children: children }));
 }
 function ChatBotPopper({ title, anchorEl, open, children, onClose, }) {
-    return (_jsx(Popper, { anchorEl: anchorEl, open: open, placement: "top-end", sx: {
+    return (_jsx(Popper, { anchorEl: anchorEl, open: open, disablePortal: true, placement: "top-end", sx: {
             zIndex: 'modal',
             maxWidth: 500,
-            maxHeight: '80vh',
-            width: '100%',
-            height: '100%',
+            maxHeight: 'min(calc(100vh - 128px), 1000px)',
+            width: 500,
+            height: '90vh',
         }, children: _jsx(ClickAwayListener, { onClickAway: (e) => {
                 e.preventDefault();
                 e.stopPropagation();

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

@@ -21,7 +21,7 @@ export default function Runtime() {
 }
 function RuntimeView() {
     var _a;
-    const { agent, appearancePage, sessionState } = useRuntimeState();
+    const { agent, appearancePage } = useRuntimeState();
     const theme = useTheme();
     const isMobile = useMediaQuery(theme.breakpoints.down('sm'));
     const { locale } = useLocaleContext();
@@ -61,10 +61,7 @@ function RuntimeView() {
                 state.addons = (...exists) => [...exists];
             });
         };
-    }, [appearancePage, locale, isMobile]);
-    useEffect(() => {
-        sessionState.load();
-    }, []);
+    }, [appearancePage, locale, isMobile, agent]);
     const componentId = (_a = appearancePage === null || appearancePage === void 0 ? void 0 : appearancePage.componentId) !== null && _a !== void 0 ? _a : DEFAULT_PAGE_COMPONENT_ID;
     return (_jsxs(RuntimeCommonProvider, { children: [appearancePage && (_jsxs(Helmet, { children: [appearancePage.name && _jsx("title", { children: appearancePage.name }), appearancePage.description && _jsx("meta", { name: "description", content: appearancePage.description })] })), _jsx(CustomComponentRenderer, { componentId: componentId, properties: appearancePage === null || appearancePage === void 0 ? void 0 : appearancePage.componentProps })] }));
 }

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

@@ -19,14 +19,16 @@ import AgentInputField from '../../components/AgentInputField';
 import LoadingButton from '../../components/LoadingButton';
 import { useCurrentAgent } from '../../contexts/CurrentAgent';
 import { useRuntimeState } from '../../state/runtime';
-export const SUPPORTED_PARAMETER_TYPES = ['string', 'number', 'select', 'language'];
+import { useSessionState } 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 { sessionState, execute } = useRuntimeState();
+    const { execute } = useRuntimeState();
+    const running = useSessionState()((s) => s.running);
     const parameters = useMemo(() => {
         var _a;
-        return (_a = agent.parameters) === null || _a === void 0 ? void 0 : _a.filter((i) => !!i.key && SUPPORTED_PARAMETER_TYPES.includes(i.type || 'string')).map((i) => {
+        return (_a = agent.parameters) === null || _a === void 0 ? void 0 : _a.filter(isValidInput).map((i) => {
             var _a;
             return (Object.assign(Object.assign({}, i), { label: ((_a = i.label) === null || _a === void 0 ? void 0 : _a.trim()) || undefined }));
         });
@@ -38,7 +40,7 @@ export default function AutoForm({ submitText, inlineLabel, autoFillLastForm = t
         if (autoFillLastForm && !form.formState.isSubmitted && !form.formState.isSubmitting) {
             form.reset(chatMode ? omit(defaultForm, 'question') : defaultForm);
         }
-    }, [defaultForm, autoFillLastForm, form]);
+    }, [defaultForm, autoFillLastForm, form, chatMode]);
     const onSubmit = (parameters) => __awaiter(this, void 0, void 0, function* () {
         yield execute({
             aid,
@@ -69,32 +71,30 @@ export default function AutoForm({ submitText, inlineLabel, autoFillLastForm = t
                                 var _a;
                                 return (_jsxs(Stack, { className: "form-item", children: [parameter.label && _jsx(FormLabel, { children: parameter.label }), _jsx(AgentInputField, { inputRef: field.ref, autoFocus: index === 0, size: "small", hiddenLabel: true, fullWidth: true, label: undefined, parameter: parameter, maxRows: !(parameter === null || parameter === void 0 ? void 0 : parameter.type) || (parameter === null || parameter === void 0 ? void 0 : parameter.type) === 'string' ? 5 : undefined, value: field.value || '', onChange: (value) => field.onChange({ target: { value } }), error: Boolean(fieldState.error), helperText: ((_a = fieldState.error) === null || _a === void 0 ? void 0 : _a.message) || (parameter === null || parameter === void 0 ? void 0 : parameter.helper), InputProps: parameter.key === 'question' && submitInQuestionField
                                                 ? {
-                                                    endAdornment: (_jsx(InputAdornment, { position: "end", sx: { py: 3, mr: -0.75 }, children: _jsx(LoadingButton, { type: "submit", variant: "contained", loading: sessionState.running, sx: { borderRadius: 100 }, children: submitText }) })),
+                                                    endAdornment: (_jsx(InputAdornment, { position: "end", sx: { py: 3, mr: -0.75 }, children: _jsx(LoadingButton, { type: "submit", variant: "contained", loading: running, sx: { borderRadius: 100 }, children: submitText }) })),
                                                 }
                                                 : undefined })] }));
                             } }) }, parameter.id));
-                }), !(submitInQuestionField && (parameters === null || parameters === void 0 ? void 0 : parameters.some((i) => i.key === 'question'))) && (_jsx(LoadingButton, { type: "submit", variant: "contained", loading: sessionState.running, sx: { height: 40 }, children: submitText || t('generate') }))] }) }));
+                }), !(submitInQuestionField && (parameters === null || parameters === void 0 ? void 0 : parameters.some((i) => i.key === 'question'))) && (_jsx(LoadingButton, { type: "submit", variant: "contained", loading: running, sx: { height: 40 }, children: submitText || t('generate') }))] }) }));
 }
 function useInitialFormValues() {
-    var _a;
-    const [lastMessage, setLastMessage] = useState();
     const { agent } = useCurrentAgent();
-    const { sessionState } = useRuntimeState();
+    const lastMessage = useSessionState()((s) => { var _a; return (_a = s.messages) === null || _a === void 0 ? void 0 : _a.at(-1); });
+    const [lastInputs, setLastInputs] = useState();
     useEffect(() => {
-        var _a;
-        if (!lastMessage) {
-            setLastMessage((_a = sessionState.messages) === null || _a === void 0 ? void 0 : _a.slice(-1)[0]);
+        if (!lastInputs) {
+            const lastParameters = lastMessage === null || lastMessage === void 0 ? void 0 : lastMessage.parameters;
+            if (!isEmpty(lastParameters))
+                setLastInputs(lastParameters);
         }
-    }, [(_a = sessionState.messages) === null || _a === void 0 ? void 0 : _a.length]);
+    }, [lastMessage]);
     return useMemo(() => {
         var _a, _b;
-        if (lastMessage) {
-            const lastParameters = lastMessage === null || lastMessage === void 0 ? void 0 : lastMessage.parameters;
-            if (!isEmpty(lastParameters))
-                return lastParameters;
+        if (lastInputs) {
+            return lastInputs;
         }
         return Object.fromEntries((_b = (_a = agent.parameters) === null || _a === void 0 ? void 0 : _a.map((parameter) => [parameter.key, parameter.defaultValue])) !== null && _b !== void 0 ? _b : []);
-    }, [lastMessage, agent]);
+    }, [lastInputs, agent]);
 }
 function useFormTheme() {
     const theme = useTheme();

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

@@ -12,7 +12,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Masonry } from '@mui/lab';
 import { Box, Skeleton, Stack, ThemeProvider, Typography, createTheme, useTheme } from '@mui/material';
-import { Suspense, useMemo, useRef } from 'react';
+import { Suspense, memo, useMemo, useRef } from 'react';
 import Balancer from 'react-wrap-balancer';
 import CustomComponentRenderer from '../../../../../components/CustomComponentRenderer';
 import { useLocaleContext } from '../../../../locale';
@@ -21,9 +21,11 @@ import LoadingButton from '../../components/LoadingButton';
 import CurrentAgentProvider, { useCurrentAgent } from '../../contexts/CurrentAgent';
 import CurrentMessageProvider from '../../contexts/CurrentMessage';
 import { useRuntimeState } from '../../state/runtime';
+import { useSessionState } from '../../state/session';
 import mapRight from '../../utils/map-right';
 export default function PhotoGallery({ resultTitle, primaryColor }) {
     const { childAgentId } = useRuntimeState();
+    useSessionState({ autoLoad: true });
     const inheritedTheme = useTheme();
     const theme = useMemo(() => {
         let { primary } = inheritedTheme.palette;
@@ -55,19 +57,19 @@ 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, _e, _f, _g;
+    var _b, _c, _d;
     var { resultTitle } = _a, props = __rest(_a, ["resultTitle"]);
     const { t } = useLocaleContext();
-    const { sessionState } = useRuntimeState();
     const ref = useRef(null);
-    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 }) })), sessionState.loaded && !((_b = sessionState.messages) === null || _b === void 0 ? void 0 : _b.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: [sessionState.running && (_jsx(Skeleton, { variant: "rectangular", sx: {
+    const { messages = [], running, loaded, noMoreMessage, loadMoreMessages } = useSessionState()();
+    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: (_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((_f = sessionState.messages) !== null && _f !== void 0 ? _f : [], (message) => (_jsx(CurrentAgentProvider, { agentId: message.assistantId, children: _jsx(CurrentMessageProvider, { message: message, children: _jsx(Suspense, { children: _jsx(OutputItemView, {}) }) }) }, message.taskId)))] }), _jsx(Box, { my: 4, children: !!((_g = sessionState.messages) === null || _g === void 0 ? void 0 : _g.length) && !sessionState.noMoreMessage && (_jsx(LoadingButton, { variant: "outlined", onClick: sessionState.loadMoreMessages, children: t('loadMore') })) })] })));
+                            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') })) })] })));
 }
-function OutputItemView() {
-    const { appearanceOutput } = useCurrentAgent();
+const OutputItemView = memo(({ message }) => {
+    const { appearanceOutput } = useCurrentAgent({ agentId: message.assistantId });
     if (!(appearanceOutput === null || appearanceOutput === void 0 ? void 0 : appearanceOutput.componentId))
         return null;
-    return (_jsx(CustomComponentRenderer, { componentId: appearanceOutput.componentId, properties: appearanceOutput.componentProps }));
-}
+    return (_jsx(CurrentAgentProvider, { agentId: message.assistantId, children: _jsx(CurrentMessageProvider, { message: message, children: _jsx(Suspense, { children: _jsx(CustomComponentRenderer, { componentId: appearanceOutput.componentId, properties: appearanceOutput.componentProps }) }) }) }, message.taskId));
+});

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

@@ -13,13 +13,15 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { RuntimeOutputVariable } from '@blocklet/ai-runtime/types';
 import { Icon } from '@iconify/react';
 import { Alert, Box, Button, Dialog, DialogContent, DialogTitle, Stack, Typography, alpha, } from '@mui/material';
-import { useState } from 'react';
+import { useMemo, useState } from 'react';
 import { RelativeTime } from '../../../../arcblock/ux';
 import { useLocaleContext } from '../../../../locale';
 import { useSessionContext } from '../../../../session';
 import ActionButton from '../../components/ActionButton';
 import UserInfo from '../../components/UserInfo';
+import { useCurrentAgent } from '../../contexts/CurrentAgent';
 import { useCurrentMessage } from '../../contexts/CurrentMessage';
+import { isValidInput } from '../../utils/agent-inputs';
 const getLineClamp = (line) => ({
     display: '-webkit-box',
     WebkitLineClamp: line,
@@ -85,6 +87,19 @@ export default function PhotoGalleryItem() {
 function RenderSubTitle({ children }) {
     return (_jsx(Typography, { variant: "caption", sx: { fontSize: 14 }, children: children }));
 }
+function PromptView() {
+    var _a;
+    const { message } = useCurrentMessage();
+    const { agent } = useCurrentAgent();
+    const params = useMemo(() => {
+        var _a;
+        return (_a = agent.parameters) === null || _a === void 0 ? void 0 : _a.filter(isValidInput).map((i) => { var _a; return [i.label || i.key, (_a = message.parameters) === null || _a === void 0 ? void 0 : _a[i.key]]; }).filter((i) => i[1]);
+    }, [agent.parameters, message.parameters]);
+    if ((params === null || params === void 0 ? void 0 : params.length) === 1) {
+        return (_a = params[0]) === null || _a === void 0 ? void 0 : _a[1];
+    }
+    return params === null || params === void 0 ? void 0 : params.map(([key, value]) => (_jsxs(Typography, { sx: { wordWrap: 'break-word' }, children: [_jsxs(Box, { component: "span", sx: { color: 'text.secondary' }, children: [key, ":"] }), "\u00A0\u00A0", _jsx("span", { children: value })] }, key)));
+}
 function PromptDialog(_a) {
     var _b, _c, _d;
     var { url } = _a, props = __rest(_a, ["url"]);
@@ -126,7 +141,7 @@ function PromptDialog(_a) {
                                         borderColor: 'divider',
                                         overflow: 'auto',
                                         maxHeight: { xs: 'unset', md: '40vh' },
-                                    }, children: parameters === null || parameters === void 0 ? void 0 : parameters.question }), _jsx(Box, { children: _jsx(ActionButton, { autoReset: true, size: "small", variant: "contained", placement: "right", tip: t('copyToClipboard'), title: t('copy'), titleSucceed: t('copied'), icon: "tabler:copy", iconSucceed: "tabler:copy-check-filled", onClick: () => {
+                                    }, children: _jsx(PromptView, {}) }), _jsx(Box, { children: _jsx(ActionButton, { autoReset: true, size: "small", variant: "contained", placement: "right", tip: t('copyToClipboard'), title: t('copy'), titleSucceed: t('copied'), icon: "tabler:copy", iconSucceed: "tabler:copy-check-filled", onClick: () => {
                                             window.navigator.clipboard.writeText(parameters === null || parameters === void 0 ? void 0 : parameters.question);
                                         }, sx: {
                                             borderRadius,

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

@@ -12,7 +12,7 @@ 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 { Suspense, useEffect, useMemo } from 'react';
+import { memo, useEffect, useMemo } from 'react';
 import { useScrollToBottom } from 'react-scroll-to-bottom';
 import CustomComponentRenderer from '../../../../../components/CustomComponentRenderer';
 import { useSessionContext } from '../../../../session';
@@ -21,10 +21,12 @@ import SimpleLayout from '../../components/Layout/SimpleLayout';
 import ScrollView from '../../components/ScrollView';
 import UserInfo from '../../components/UserInfo';
 import CurrentAgentProvider, { useCurrentAgent } from '../../contexts/CurrentAgent';
-import CurrentMessageProvider, { useCurrentMessage } from '../../contexts/CurrentMessage';
+import CurrentMessageProvider from '../../contexts/CurrentMessage';
 import { useRuntimeState } from '../../state/runtime';
+import { useSessionState } from '../../state/session';
 import MessageSuggestedQuestions from '../ChatOutput/MessageSuggestedQuestions';
 export default function SimpleChat({ primaryColor, scrollViewProps = { scroll: 'window', initialScrollBehavior: 'auto' }, }) {
+    useSessionState({ autoLoad: true });
     const inheritedTheme = useTheme();
     const theme = useMemo(() => {
         let { primary } = inheritedTheme.palette;
@@ -46,12 +48,14 @@ export default function SimpleChat({ primaryColor, scrollViewProps = { scroll: '
     return (_jsx(ScrollView, Object.assign({}, scrollViewProps, { children: _jsx(ThemeProvider, { theme: theme, children: _jsx(SimpleChatView, {}) }) })));
 }
 function SimpleChatView() {
-    const { childAgentId, sessionState } = useRuntimeState();
+    const { childAgentId } = useRuntimeState();
+    // auto scroll to bottom when new message is sent
+    const running = useSessionState()((s) => s.running);
     const scrollToBottom = useScrollToBottom();
     useEffect(() => {
-        if (sessionState.running)
+        if (running)
             scrollToBottom({ behavior: 'smooth' });
-    }, [scrollToBottom, sessionState.running]);
+    }, [scrollToBottom, running]);
     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) {
@@ -62,30 +66,27 @@ function AgentInputRender(_a) {
     return (_jsx(Stack, Object.assign({}, props, { children: _jsx(CustomComponentRenderer, { componentId: appearanceInput.componentId, properties: appearanceInput.componentProps }) })));
 }
 function OutputView(_a) {
-    var _b, _c;
     var props = __rest(_a, []);
-    const { sessionState } = useRuntimeState();
-    const lastMessage = (_b = sessionState.messages) === null || _b === void 0 ? void 0 : _b.slice(-1)[0];
-    return (_jsxs(Stack, Object.assign({ gap: 2 }, props, { children: [(_c = sessionState.messages) === null || _c === void 0 ? void 0 : _c.map((message) => (_jsx(Stack, { children: _jsx(CurrentAgentProvider, { agentId: message.assistantId, children: _jsx(CurrentMessageProvider, { message: message, children: _jsx(Suspense, { children: _jsx(OutputItemView, {}) }) }) }) }))), lastMessage && (_jsx(CurrentAgentProvider, { agentId: lastMessage.assistantId, children: _jsx(CurrentMessageProvider, { message: lastMessage, children: _jsx(SuggestedQuestionsView, {}) }) }))] })));
+    const messages = useSessionState()((s) => s.messages);
+    const lastMessage = messages === null || messages === void 0 ? void 0 : messages.at(-1);
+    return (_jsxs(Stack, Object.assign({ gap: 2 }, props, { children: [messages === null || messages === void 0 ? void 0 : messages.map((message) => _jsx(OutputItemView, { message: message }, message.taskId)), lastMessage && _jsx(SuggestedQuestionsView, { message: lastMessage })] })));
 }
-function OutputItemView() {
+const OutputItemView = memo(({ message }) => {
     var _a, _b, _c, _d, _e;
+    const { appearanceOutput } = useCurrentAgent({ agentId: message.assistantId });
     const { appearancePage } = useRuntimeState();
-    const { appearanceOutput } = useCurrentAgent();
-    const { message } = useCurrentMessage();
     const { session: authSession } = useSessionContext();
     if (!(appearanceOutput === null || appearanceOutput === void 0 ? void 0 : appearanceOutput.componentId))
         return null;
-    return (_jsxs(Stack, { gap: 2, children: [_jsx(Box, { children: _jsx(UserInfo, { name: (_a = authSession.user) === null || _a === void 0 ? void 0 : _a.fullName, did: (_b = authSession.user) === null || _b === void 0 ? void 0 : _b.did, avatar: (_c = authSession.user) === null || _c === void 0 ? void 0 : _c.avatar, time: message.createdAt, reverse: true, alignItems: "flex-start", children: _jsx(CustomComponentRenderer, { componentId: appearanceOutput.componentId, properties: appearanceOutput.componentProps, props: {
-                            renderType: 'parameters',
-                        } }) }) }), _jsx(Box, { children: _jsx(UserInfo, { name: appearancePage === null || appearancePage === void 0 ? void 0 : appearancePage.name, did: (_d = globalThis.blocklet) === null || _d === void 0 ? void 0 : _d.appId, avatar: (_e = appearancePage === null || appearancePage === void 0 ? void 0 : appearancePage.logo) === null || _e === void 0 ? void 0 : _e.url, time: message.createdAt, alignItems: "flex-start", children: _jsx(CustomComponentRenderer, { componentId: appearanceOutput.componentId, properties: appearanceOutput.componentProps, props: {
-                            renderType: 'result',
-                        } }) }) })] }));
-}
-function SuggestedQuestionsView() {
+    return (_jsx(CurrentAgentProvider, { agentId: message.assistantId, children: _jsx(CurrentMessageProvider, { message: message, children: _jsxs(Stack, { gap: 2, children: [_jsx(Box, { children: _jsx(UserInfo, { name: (_a = authSession.user) === null || _a === void 0 ? void 0 : _a.fullName, did: (_b = authSession.user) === null || _b === void 0 ? void 0 : _b.did, avatar: (_c = authSession.user) === null || _c === void 0 ? void 0 : _c.avatar, time: message.createdAt, reverse: true, alignItems: "flex-start", children: _jsx(CustomComponentRenderer, { componentId: appearanceOutput.componentId, properties: appearanceOutput.componentProps, props: {
+                                    renderType: 'parameters',
+                                } }) }) }), _jsx(Box, { children: _jsx(UserInfo, { name: appearancePage === null || appearancePage === void 0 ? void 0 : appearancePage.name, did: (_d = globalThis.blocklet) === null || _d === void 0 ? void 0 : _d.appId, avatar: (_e = appearancePage === null || appearancePage === void 0 ? void 0 : appearancePage.logo) === null || _e === void 0 ? void 0 : _e.url, time: message.createdAt, alignItems: "flex-start", children: _jsx(CustomComponentRenderer, { componentId: appearanceOutput.componentId, properties: appearanceOutput.componentProps, props: {
+                                    renderType: 'result',
+                                } }) }) })] }) }) }));
+});
+function SuggestedQuestionsView({ message }) {
+    const { aid } = useCurrentAgent({ agentId: message.assistantId });
     const { execute } = useRuntimeState();
-    const { aid } = useCurrentAgent();
-    const { message } = useCurrentMessage();
     const suggestedQuestions = 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[RuntimeOutputVariable.suggestedQuestions];

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

@@ -11,7 +11,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { Stack, ThemeProvider, Typography, createTheme, useTheme } from '@mui/material';
-import { Suspense, useMemo } from 'react';
+import { Suspense, memo, useMemo } from 'react';
 import Balancer from 'react-wrap-balancer';
 import CustomComponentRenderer from '../../../../../components/CustomComponentRenderer';
 import SimpleHeader from '../../components/Header/SimpleHeader';
@@ -19,8 +19,10 @@ import SimpleLayout from '../../components/Layout/SimpleLayout';
 import CurrentAgentProvider, { useCurrentAgent } from '../../contexts/CurrentAgent';
 import CurrentMessageProvider from '../../contexts/CurrentMessage';
 import { useRuntimeState } from '../../state/runtime';
+import { useSessionState } from '../../state/session';
 export default function SimplePage({ resultTitle, primaryColor }) {
     const { childAgentId } = useRuntimeState();
+    useSessionState({ autoLoad: true });
     const inheritedTheme = useTheme();
     const theme = useMemo(() => {
         let { primary } = inheritedTheme.palette;
@@ -49,15 +51,13 @@ function AgentInputRender(_a) {
     return (_jsx(Stack, Object.assign({}, props, { children: _jsx(CustomComponentRenderer, { componentId: appearanceInput.componentId, properties: appearanceInput.componentProps }) })));
 }
 function OutputView(_a) {
-    var _b;
     var { resultTitle } = _a, props = __rest(_a, ["resultTitle"]);
-    const { sessionState } = useRuntimeState();
-    const lastMessage = (_b = sessionState.messages) === null || _b === void 0 ? void 0 : _b.slice(-1)[0];
-    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(CurrentAgentProvider, { agentId: lastMessage.assistantId, children: _jsx(CurrentMessageProvider, { message: lastMessage, children: _jsx(Suspense, { children: _jsx(OutputItemView, {}) }) }) }) })] })) })));
+    const lastMessage = useSessionState()((s) => { var _a; return (_a = 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 }) })] })) })));
 }
-function OutputItemView() {
-    const { appearanceOutput } = useCurrentAgent();
+const OutputItemView = memo(({ message }) => {
+    const { appearanceOutput } = useCurrentAgent({ agentId: message.assistantId });
     if (!(appearanceOutput === null || appearanceOutput === void 0 ? void 0 : appearanceOutput.componentId))
         return null;
-    return (_jsx(CustomComponentRenderer, { componentId: appearanceOutput.componentId, properties: appearanceOutput.componentProps }));
-}
+    return (_jsx(CurrentAgentProvider, { agentId: message.assistantId, children: _jsx(CurrentMessageProvider, { message: message, children: _jsx(Suspense, { children: _jsx(CustomComponentRenderer, { componentId: appearanceOutput.componentId, properties: appearanceOutput.componentProps }) }) }) }));
+});

package/lib/esm/builtin/async/ai-runtime/state/agent.js

@@ -10,11 +10,10 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
 import { create } from 'zustand';
 import { immer } from 'zustand/middleware/immer';
 import { getAgent } from '../api/agent';
-const STATES = {};
+import { createCachedStore } from '../utils/zustand';
 export const createAgentState = ({ aid, working, agent }) => {
-    var _a;
     const key = working ? `${aid}-working` : aid;
-    (_a = STATES[key]) !== null && _a !== void 0 ? _a : (STATES[key] = create()(immer((set) => ({
+    return createCachedStore(key, () => create()(immer((set) => ({
         agent,
         load: () => __awaiter(void 0, void 0, void 0, function* () {
             set((state) => {
@@ -39,7 +38,6 @@ export const createAgentState = ({ aid, working, agent }) => {
             }
         }),
     }))));
-    return STATES[key];
 };
 const LOADING_TASKS = {};
 export function useAgentState({ aid, working }) {