@blocklet/pages-kit 0.2.302 → 0.2.304

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

@@ -1,27 +1,4 @@
 "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 __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)
@@ -41,18 +18,13 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("@iconify/react");
 const material_1 = require("@mui/material");
 const react_2 = __importDefault(require("react"));
+const react_markdown_1 = __importDefault(require("react-markdown"));
+const remark_gfm_1 = __importDefault(require("remark-gfm"));
 const locale_1 = require("../../../locale");
-const react_markdown_1 = __importDefault(require("../../react-markdown"));
 const react_syntax_highlighter_1 = __importDefault(require("../../react-syntax-highlighter"));
 const ActionButton_1 = __importDefault(require("./ActionButton"));
 const ReactSyntaxHighlighter = react_2.default.lazy(() => (0, react_syntax_highlighter_1.default)().then((m) => ({ default: m.Prism })));
-const Markdown = react_2.default.lazy(() => Promise.all([
-    (0, react_markdown_1.default)(),
-    Promise.resolve().then(() => __importStar(require('https://esm.sh/remark-gfm@4?bundle'))),
-]).then(([{ default: Markdown }, remark]) => ({
-    default: (props) => (0, jsx_runtime_1.jsx)(Markdown, Object.assign({}, props, { remarkPlugins: [remark.default] })),
-})));
-const MarkdownRenderer = (0, material_1.styled)((props) => ((0, jsx_runtime_1.jsx)(Markdown, Object.assign({}, props, { components: {
+const MarkdownRenderer = (0, material_1.styled)((props) => ((0, jsx_runtime_1.jsx)(react_markdown_1.default, Object.assign({}, props, { remarkPlugins: [remark_gfm_1.default], components: {
         pre: MarkdownPre,
         code: (_a) => {
             var { node, inline, className, children } = _a, props = __rest(_a, ["node", "inline", "className", "children"]);

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

@@ -8,22 +8,28 @@ const react_1 = require("react");
 const constants_1 = require("../constants");
 const agent_1 = require("../state/agent");
 const runtime_1 = require("../state/runtime");
-const context = (0, react_1.createContext)(undefined);
-function CurrentAgentProvider({ agentId, children }) {
+function useCurrentAid({ agentId }) {
     const { aid } = (0, runtime_1.useRuntimeState)();
-    const state = (0, react_1.useMemo)(() => ({
+    return (0, react_1.useMemo)(() => ({
         aid: (0, aid_1.stringifyIdentity)(Object.assign(Object.assign({}, (0, aid_1.parseIdentity)(aid, { rejectWhenError: true })), { assistantId: agentId })),
     }), [aid, agentId]);
+}
+const context = (0, react_1.createContext)(undefined);
+function CurrentAgentProvider({ agentId, children }) {
+    const state = useCurrentAid({ agentId });
     return (0, jsx_runtime_1.jsx)(context.Provider, { value: state, children: children });
 }
 exports.default = CurrentAgentProvider;
-function useCurrentAgent() {
-    const { working } = (0, runtime_1.useRuntimeState)();
+function useCurrentAgent({ agentId } = {}) {
+    const { aid: runtimeAid, working } = (0, runtime_1.useRuntimeState)();
+    const aidFromParam = (0, react_1.useMemo)(() => agentId &&
+        (0, aid_1.stringifyIdentity)(Object.assign(Object.assign({}, (0, aid_1.parseIdentity)(runtimeAid, { rejectWhenError: true })), { assistantId: agentId })), [agentId]);
     const current = (0, react_1.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] = (0, agent_1.useAgentState)({ aid: current.aid, working });
+    const [agent] = (0, agent_1.useAgentState)({ aid, working });
     const appearanceInput = (0, react_1.useMemo)(() => {
         var _a, _b, _c;
         return (_c = (_b = (_a = agent.outputVariables) === null || _a === void 0 ? void 0 : _a.find((i) => i.name === types_1.RuntimeOutputVariable.appearanceInput)) === null || _b === void 0 ? void 0 : _b.initialValue) !== null && _c !== void 0 ? _c : { componentId: constants_1.DEFAULT_INPUT_COMPONENT_ID };
@@ -32,6 +38,6 @@ function useCurrentAgent() {
         var _a, _b, _c;
         return (_c = (_b = (_a = agent.outputVariables) === null || _a === void 0 ? void 0 : _a.find((i) => i.name === types_1.RuntimeOutputVariable.appearanceOutput)) === null || _b === void 0 ? void 0 : _b.initialValue) !== null && _c !== void 0 ? _c : { componentId: constants_1.DEFAULT_OUTPUT_COMPONENT_ID };
     }, [agent]);
-    return Object.assign(Object.assign({}, current), { agent, appearanceInput, appearanceOutput });
+    return { aid, agent, appearanceInput, appearanceOutput };
 }
 exports.useCurrentAgent = useCurrentAgent;

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

@@ -15,6 +15,7 @@ const ScrollView_1 = __importDefault(require("../../components/ScrollView"));
 const constants_1 = require("../../constants");
 const Runtime_1 = __importDefault(require("../../contexts/Runtime"));
 const runtime_1 = require("../../state/runtime");
+const session_1 = require("../../state/session");
 function ChatBotButton({ aid, working }) {
     return ((0, jsx_runtime_1.jsx)(Runtime_1.default, { aid: aid, working: working, children: (0, jsx_runtime_1.jsx)(RuntimeCommonProvider_1.default, { children: (0, jsx_runtime_1.jsx)(ChatBotContent, {}) }) }));
 }
@@ -22,13 +23,11 @@ exports.default = ChatBotButton;
 function ChatBotContent() {
     var _a, _b, _c;
     const anchorEl = (0, react_2.useRef)(null);
-    const { appearancePage, sessionState } = (0, runtime_1.useRuntimeState)();
+    (0, session_1.useSessionState)({ autoLoad: true });
+    const { appearancePage } = (0, runtime_1.useRuntimeState)();
     const [open, setOpen] = (0, react_2.useState)(false);
-    (0, react_2.useEffect)(() => {
-        sessionState.load();
-    }, []);
     const componentId = (_a = appearancePage === null || appearancePage === void 0 ? void 0 : appearancePage.componentId) !== null && _a !== void 0 ? _a : constants_1.DEFAULT_PAGE_COMPONENT_ID;
-    return ((0, jsx_runtime_1.jsxs)(material_1.Box, { sx: { position: 'fixed', bottom: 32, right: 16, zIndex: 'fab' }, children: [(0, jsx_runtime_1.jsx)(material_1.Fab, { sx: { width: 44, height: 44, boxShadow: open ? 0 : undefined }, onClick: () => setOpen(true), children: (0, jsx_runtime_1.jsx)(ux_1.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 }) }), (0, jsx_runtime_1.jsx)(material_1.Stack, { width: "100%", ref: anchorEl }), anchorEl.current && ((0, jsx_runtime_1.jsx)(ResponsiveChatBotContainer, { anchorEl: anchorEl.current, open: open, onClose: () => setOpen(false), children: (0, jsx_runtime_1.jsx)(ScrollView_1.default, { initialScrollBehavior: "auto", component: material_1.Stack, sx: {
+    return ((0, jsx_runtime_1.jsxs)(material_1.Box, { sx: { position: 'fixed', bottom: 32, right: 16, zIndex: 'modal' }, children: [(0, jsx_runtime_1.jsx)(material_1.Fab, { sx: { width: 44, height: 44, boxShadow: open ? 0 : undefined }, onClick: () => setOpen(true), children: (0, jsx_runtime_1.jsx)(ux_1.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 }) }), (0, jsx_runtime_1.jsx)(material_1.Stack, { width: "100%", ref: anchorEl }), anchorEl.current && ((0, jsx_runtime_1.jsx)(ResponsiveChatBotContainer, { anchorEl: anchorEl.current, open: open, onClose: () => setOpen(false), children: (0, jsx_runtime_1.jsx)(ScrollView_1.default, { initialScrollBehavior: "auto", component: material_1.Stack, sx: {
                         overscrollBehavior: 'contain',
                         height: '100%',
                         width: '100%',
@@ -49,12 +48,12 @@ function ResponsiveChatBotContainer({ open, anchorEl, children, onClose, }) {
     return ((0, jsx_runtime_1.jsx)(ChatBotPopper, { anchorEl: anchorEl, title: title, 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, placement: "top-end", sx: {
+    return ((0, jsx_runtime_1.jsx)(material_1.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: (0, jsx_runtime_1.jsx)(material_1.ClickAwayListener, { onClickAway: (e) => {
                 e.preventDefault();
                 e.stopPropagation();

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

@@ -50,7 +50,7 @@ function Runtime() {
 exports.default = Runtime;
 function RuntimeView() {
     var _a;
-    const { agent, appearancePage, sessionState } = (0, runtime_1.useRuntimeState)();
+    const { agent, appearancePage } = (0, runtime_1.useRuntimeState)();
     const theme = (0, material_1.useTheme)();
     const isMobile = (0, material_1.useMediaQuery)(theme.breakpoints.down('sm'));
     const { locale } = (0, locale_1.useLocaleContext)();
@@ -90,10 +90,7 @@ function RuntimeView() {
                 state.addons = (...exists) => [...exists];
             });
         };
-    }, [appearancePage, locale, isMobile]);
-    (0, react_1.useEffect)(() => {
-        sessionState.load();
-    }, []);
+    }, [appearancePage, 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;
     return ((0, jsx_runtime_1.jsxs)(RuntimeCommonProvider_1.default, { children: [appearancePage && ((0, jsx_runtime_1.jsxs)(react_helmet_1.Helmet, { children: [appearancePage.name && (0, jsx_runtime_1.jsx)("title", { children: appearancePage.name }), appearancePage.description && (0, jsx_runtime_1.jsx)("meta", { name: "description", content: appearancePage.description })] })), (0, jsx_runtime_1.jsx)(CustomComponentRenderer_1.default, { componentId: componentId, properties: appearancePage === null || appearancePage === void 0 ? void 0 : appearancePage.componentProps })] }));
 }

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

@@ -12,7 +12,6 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.SUPPORTED_PARAMETER_TYPES = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const css_1 = require("@emotion/css");
 const material_1 = require("@mui/material");
@@ -25,14 +24,16 @@ const AgentInputField_1 = __importDefault(require("../../components/AgentInputFi
 const LoadingButton_1 = __importDefault(require("../../components/LoadingButton"));
 const CurrentAgent_1 = require("../../contexts/CurrentAgent");
 const runtime_1 = require("../../state/runtime");
-exports.SUPPORTED_PARAMETER_TYPES = ['string', 'number', 'select', 'language'];
+const session_1 = require("../../state/session");
+const agent_inputs_1 = require("../../utils/agent-inputs");
 function AutoForm({ submitText, inlineLabel, autoFillLastForm = true, submitInQuestionField, chatMode, }) {
     const { t } = (0, locale_1.useLocaleContext)();
     const { aid, agent } = (0, CurrentAgent_1.useCurrentAgent)();
-    const { sessionState, execute } = (0, runtime_1.useRuntimeState)();
+    const { execute } = (0, runtime_1.useRuntimeState)();
+    const running = (0, session_1.useSessionState)()((s) => s.running);
     const parameters = (0, react_1.useMemo)(() => {
         var _a;
-        return (_a = agent.parameters) === null || _a === void 0 ? void 0 : _a.filter((i) => !!i.key && exports.SUPPORTED_PARAMETER_TYPES.includes(i.type || 'string')).map((i) => {
+        return (_a = agent.parameters) === null || _a === void 0 ? void 0 : _a.filter(agent_inputs_1.isValidInput).map((i) => {
             var _a;
             return (Object.assign(Object.assign({}, i), { label: ((_a = i.label) === null || _a === void 0 ? void 0 : _a.trim()) || undefined }));
         });
@@ -44,7 +45,7 @@ function AutoForm({ submitText, inlineLabel, autoFillLastForm = true, submitInQu
         if (autoFillLastForm && !form.formState.isSubmitted && !form.formState.isSubmitting) {
             form.reset(chatMode ? (0, omit_1.default)(defaultForm, 'question') : defaultForm);
         }
-    }, [defaultForm, autoFillLastForm, form]);
+    }, [defaultForm, autoFillLastForm, form, chatMode]);
     const onSubmit = (parameters) => __awaiter(this, void 0, void 0, function* () {
         yield execute({
             aid,
@@ -75,33 +76,31 @@ function AutoForm({ submitText, inlineLabel, autoFillLastForm = true, submitInQu
                                 var _a;
                                 return ((0, jsx_runtime_1.jsxs)(material_1.Stack, { className: "form-item", children: [parameter.label && (0, jsx_runtime_1.jsx)(material_1.FormLabel, { children: parameter.label }), (0, jsx_runtime_1.jsx)(AgentInputField_1.default, { 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: ((0, jsx_runtime_1.jsx)(material_1.InputAdornment, { position: "end", sx: { py: 3, mr: -0.75 }, children: (0, jsx_runtime_1.jsx)(LoadingButton_1.default, { type: "submit", variant: "contained", loading: sessionState.running, sx: { borderRadius: 100 }, children: submitText }) })),
+                                                    endAdornment: ((0, jsx_runtime_1.jsx)(material_1.InputAdornment, { position: "end", sx: { py: 3, mr: -0.75 }, children: (0, jsx_runtime_1.jsx)(LoadingButton_1.default, { 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'))) && ((0, jsx_runtime_1.jsx)(LoadingButton_1.default, { 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'))) && ((0, jsx_runtime_1.jsx)(LoadingButton_1.default, { type: "submit", variant: "contained", loading: running, sx: { height: 40 }, children: submitText || t('generate') }))] }) }));
 }
 exports.default = AutoForm;
 function useInitialFormValues() {
-    var _a;
-    const [lastMessage, setLastMessage] = (0, react_1.useState)();
     const { agent } = (0, CurrentAgent_1.useCurrentAgent)();
-    const { sessionState } = (0, runtime_1.useRuntimeState)();
+    const lastMessage = (0, session_1.useSessionState)()((s) => { var _a; return (_a = s.messages) === null || _a === void 0 ? void 0 : _a.at(-1); });
+    const [lastInputs, setLastInputs] = (0, react_1.useState)();
     (0, react_1.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 (!(0, isEmpty_1.default)(lastParameters))
+                setLastInputs(lastParameters);
         }
-    }, [(_a = sessionState.messages) === null || _a === void 0 ? void 0 : _a.length]);
+    }, [lastMessage]);
     return (0, react_1.useMemo)(() => {
         var _a, _b;
-        if (lastMessage) {
-            const lastParameters = lastMessage === null || lastMessage === void 0 ? void 0 : lastMessage.parameters;
-            if (!(0, isEmpty_1.default)(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 = (0, material_1.useTheme)();

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

@@ -49,9 +49,11 @@ const LoadingButton_1 = __importDefault(require("../../components/LoadingButton"
 const CurrentAgent_1 = __importStar(require("../../contexts/CurrentAgent"));
 const CurrentMessage_1 = __importDefault(require("../../contexts/CurrentMessage"));
 const runtime_1 = require("../../state/runtime");
+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 });
     const inheritedTheme = (0, material_1.useTheme)();
     const theme = (0, react_1.useMemo)(() => {
         let { primary } = inheritedTheme.palette;
@@ -84,19 +86,19 @@ 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, _e, _f, _g;
+    var _b, _c, _d;
     var { resultTitle } = _a, props = __rest(_a, ["resultTitle"]);
     const { t } = (0, locale_1.useLocaleContext)();
-    const { sessionState } = (0, runtime_1.useRuntimeState)();
     const ref = (0, react_1.useRef)(null);
-    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 }) })), sessionState.loaded && !((_b = sessionState.messages) === null || _b === void 0 ? void 0 : _b.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: [sessionState.running && ((0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "rectangular", sx: {
+    const { messages = [], running, loaded, noMoreMessage, loadMoreMessages } = (0, session_1.useSessionState)()();
+    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: (_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)((_f = sessionState.messages) !== null && _f !== void 0 ? _f : [], (message) => ((0, jsx_runtime_1.jsx)(CurrentAgent_1.default, { agentId: message.assistantId, children: (0, jsx_runtime_1.jsx)(CurrentMessage_1.default, { message: message, children: (0, jsx_runtime_1.jsx)(react_1.Suspense, { children: (0, jsx_runtime_1.jsx)(OutputItemView, {}) }) }) }, message.taskId)))] }), (0, jsx_runtime_1.jsx)(material_1.Box, { my: 4, children: !!((_g = sessionState.messages) === null || _g === void 0 ? void 0 : _g.length) && !sessionState.noMoreMessage && ((0, jsx_runtime_1.jsx)(LoadingButton_1.default, { 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,
+                        } })), (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') })) })] })));
 }
-function OutputItemView() {
-    const { appearanceOutput } = (0, CurrentAgent_1.useCurrentAgent)();
+const OutputItemView = (0, react_1.memo)(({ message }) => {
+    const { appearanceOutput } = (0, CurrentAgent_1.useCurrentAgent)({ agentId: message.assistantId });
     if (!(appearanceOutput === null || appearanceOutput === void 0 ? void 0 : appearanceOutput.componentId))
         return null;
-    return ((0, jsx_runtime_1.jsx)(CustomComponentRenderer_1.default, { componentId: appearanceOutput.componentId, properties: appearanceOutput.componentProps }));
-}
+    return ((0, jsx_runtime_1.jsx)(CurrentAgent_1.default, { agentId: message.assistantId, children: (0, jsx_runtime_1.jsx)(CurrentMessage_1.default, { message: message, children: (0, jsx_runtime_1.jsx)(react_1.Suspense, { children: (0, jsx_runtime_1.jsx)(CustomComponentRenderer_1.default, { componentId: appearanceOutput.componentId, properties: appearanceOutput.componentProps }) }) }) }, message.taskId));
+});

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

@@ -24,7 +24,9 @@ const locale_1 = require("../../../../locale");
 const session_1 = require("../../../../session");
 const ActionButton_1 = __importDefault(require("../../components/ActionButton"));
 const UserInfo_1 = __importDefault(require("../../components/UserInfo"));
+const CurrentAgent_1 = require("../../contexts/CurrentAgent");
 const CurrentMessage_1 = require("../../contexts/CurrentMessage");
+const agent_inputs_1 = require("../../utils/agent-inputs");
 const getLineClamp = (line) => ({
     display: '-webkit-box',
     WebkitLineClamp: line,
@@ -91,6 +93,19 @@ exports.default = PhotoGalleryItem;
 function RenderSubTitle({ children }) {
     return ((0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "caption", sx: { fontSize: 14 }, children: children }));
 }
+function PromptView() {
+    var _a;
+    const { message } = (0, CurrentMessage_1.useCurrentMessage)();
+    const { agent } = (0, CurrentAgent_1.useCurrentAgent)();
+    const params = (0, react_2.useMemo)(() => {
+        var _a;
+        return (_a = agent.parameters) === null || _a === void 0 ? void 0 : _a.filter(agent_inputs_1.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]) => ((0, jsx_runtime_1.jsxs)(material_1.Typography, { sx: { wordWrap: 'break-word' }, children: [(0, jsx_runtime_1.jsxs)(material_1.Box, { component: "span", sx: { color: 'text.secondary' }, children: [key, ":"] }), "\u00A0\u00A0", (0, jsx_runtime_1.jsx)("span", { children: value })] }, key)));
+}
 function PromptDialog(_a) {
     var _b, _c, _d;
     var { url } = _a, props = __rest(_a, ["url"]);
@@ -132,7 +147,7 @@ function PromptDialog(_a) {
                                         borderColor: 'divider',
                                         overflow: 'auto',
                                         maxHeight: { xs: 'unset', md: '40vh' },
-                                    }, children: parameters === null || parameters === void 0 ? void 0 : parameters.question }), (0, jsx_runtime_1.jsx)(material_1.Box, { children: (0, jsx_runtime_1.jsx)(ActionButton_1.default, { 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: (0, jsx_runtime_1.jsx)(PromptView, {}) }), (0, jsx_runtime_1.jsx)(material_1.Box, { children: (0, jsx_runtime_1.jsx)(ActionButton_1.default, { 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/cjs/builtin/async/ai-runtime/runtime-components/SimpleChat/index.js

@@ -49,10 +49,12 @@ const SimpleLayout_1 = __importDefault(require("../../components/Layout/SimpleLa
 const ScrollView_1 = __importDefault(require("../../components/ScrollView"));
 const UserInfo_1 = __importDefault(require("../../components/UserInfo"));
 const CurrentAgent_1 = __importStar(require("../../contexts/CurrentAgent"));
-const CurrentMessage_1 = __importStar(require("../../contexts/CurrentMessage"));
+const CurrentMessage_1 = __importDefault(require("../../contexts/CurrentMessage"));
 const runtime_1 = require("../../state/runtime");
+const session_2 = require("../../state/session");
 const MessageSuggestedQuestions_1 = __importDefault(require("../ChatOutput/MessageSuggestedQuestions"));
 function SimpleChat({ primaryColor, scrollViewProps = { scroll: 'window', initialScrollBehavior: 'auto' }, }) {
+    (0, session_2.useSessionState)({ autoLoad: true });
     const inheritedTheme = (0, material_1.useTheme)();
     const theme = (0, react_1.useMemo)(() => {
         let { primary } = inheritedTheme.palette;
@@ -75,12 +77,14 @@ function SimpleChat({ primaryColor, scrollViewProps = { scroll: 'window', initia
 }
 exports.default = SimpleChat;
 function SimpleChatView() {
-    const { childAgentId, sessionState } = (0, runtime_1.useRuntimeState)();
+    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 scrollToBottom = (0, react_scroll_to_bottom_1.useScrollToBottom)();
     (0, react_1.useEffect)(() => {
-        if (sessionState.running)
+        if (running)
             scrollToBottom({ behavior: 'smooth' });
-    }, [scrollToBottom, sessionState.running]);
+    }, [scrollToBottom, running]);
     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) {
@@ -91,30 +95,27 @@ function AgentInputRender(_a) {
     return ((0, jsx_runtime_1.jsx)(material_1.Stack, Object.assign({}, props, { children: (0, jsx_runtime_1.jsx)(CustomComponentRenderer_1.default, { componentId: appearanceInput.componentId, properties: appearanceInput.componentProps }) })));
 }
 function OutputView(_a) {
-    var _b, _c;
     var props = __rest(_a, []);
-    const { sessionState } = (0, runtime_1.useRuntimeState)();
-    const lastMessage = (_b = sessionState.messages) === null || _b === void 0 ? void 0 : _b.slice(-1)[0];
-    return ((0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ gap: 2 }, props, { children: [(_c = sessionState.messages) === null || _c === void 0 ? void 0 : _c.map((message) => ((0, jsx_runtime_1.jsx)(material_1.Stack, { children: (0, jsx_runtime_1.jsx)(CurrentAgent_1.default, { agentId: message.assistantId, children: (0, jsx_runtime_1.jsx)(CurrentMessage_1.default, { message: message, children: (0, jsx_runtime_1.jsx)(react_1.Suspense, { children: (0, jsx_runtime_1.jsx)(OutputItemView, {}) }) }) }) }))), lastMessage && ((0, jsx_runtime_1.jsx)(CurrentAgent_1.default, { agentId: lastMessage.assistantId, children: (0, jsx_runtime_1.jsx)(CurrentMessage_1.default, { message: lastMessage, children: (0, jsx_runtime_1.jsx)(SuggestedQuestionsView, {}) }) }))] })));
+    const messages = (0, session_2.useSessionState)()((s) => s.messages);
+    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: [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 })] })));
 }
-function OutputItemView() {
+const OutputItemView = (0, react_1.memo)(({ message }) => {
     var _a, _b, _c, _d, _e;
+    const { appearanceOutput } = (0, CurrentAgent_1.useCurrentAgent)({ agentId: message.assistantId });
     const { appearancePage } = (0, runtime_1.useRuntimeState)();
-    const { appearanceOutput } = (0, CurrentAgent_1.useCurrentAgent)();
-    const { message } = (0, CurrentMessage_1.useCurrentMessage)();
     const { session: authSession } = (0, session_1.useSessionContext)();
     if (!(appearanceOutput === null || appearanceOutput === void 0 ? void 0 : appearanceOutput.componentId))
         return null;
-    return ((0, jsx_runtime_1.jsxs)(material_1.Stack, { gap: 2, children: [(0, jsx_runtime_1.jsx)(material_1.Box, { children: (0, jsx_runtime_1.jsx)(UserInfo_1.default, { 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: (0, jsx_runtime_1.jsx)(CustomComponentRenderer_1.default, { componentId: appearanceOutput.componentId, properties: appearanceOutput.componentProps, props: {
-                            renderType: 'parameters',
-                        } }) }) }), (0, jsx_runtime_1.jsx)(material_1.Box, { children: (0, jsx_runtime_1.jsx)(UserInfo_1.default, { 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: (0, jsx_runtime_1.jsx)(CustomComponentRenderer_1.default, { componentId: appearanceOutput.componentId, properties: appearanceOutput.componentProps, props: {
-                            renderType: 'result',
-                        } }) }) })] }));
-}
-function SuggestedQuestionsView() {
+    return ((0, jsx_runtime_1.jsx)(CurrentAgent_1.default, { agentId: message.assistantId, children: (0, jsx_runtime_1.jsx)(CurrentMessage_1.default, { message: message, children: (0, jsx_runtime_1.jsxs)(material_1.Stack, { gap: 2, children: [(0, jsx_runtime_1.jsx)(material_1.Box, { children: (0, jsx_runtime_1.jsx)(UserInfo_1.default, { 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: (0, jsx_runtime_1.jsx)(CustomComponentRenderer_1.default, { componentId: appearanceOutput.componentId, properties: appearanceOutput.componentProps, props: {
+                                    renderType: 'parameters',
+                                } }) }) }), (0, jsx_runtime_1.jsx)(material_1.Box, { children: (0, jsx_runtime_1.jsx)(UserInfo_1.default, { 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: (0, jsx_runtime_1.jsx)(CustomComponentRenderer_1.default, { componentId: appearanceOutput.componentId, properties: appearanceOutput.componentProps, props: {
+                                    renderType: 'result',
+                                } }) }) })] }) }) }));
+});
+function SuggestedQuestionsView({ message }) {
+    const { aid } = (0, CurrentAgent_1.useCurrentAgent)({ agentId: message.assistantId });
     const { execute } = (0, runtime_1.useRuntimeState)();
-    const { aid } = (0, CurrentAgent_1.useCurrentAgent)();
-    const { message } = (0, CurrentMessage_1.useCurrentMessage)();
     const suggestedQuestions = (0, react_1.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];

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

@@ -47,8 +47,10 @@ const SimpleLayout_1 = __importDefault(require("../../components/Layout/SimpleLa
 const CurrentAgent_1 = __importStar(require("../../contexts/CurrentAgent"));
 const CurrentMessage_1 = __importDefault(require("../../contexts/CurrentMessage"));
 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 });
     const inheritedTheme = (0, material_1.useTheme)();
     const theme = (0, react_1.useMemo)(() => {
         let { primary } = inheritedTheme.palette;
@@ -78,15 +80,13 @@ function AgentInputRender(_a) {
     return ((0, jsx_runtime_1.jsx)(material_1.Stack, Object.assign({}, props, { children: (0, jsx_runtime_1.jsx)(CustomComponentRenderer_1.default, { componentId: appearanceInput.componentId, properties: appearanceInput.componentProps }) })));
 }
 function OutputView(_a) {
-    var _b;
     var { resultTitle } = _a, props = __rest(_a, ["resultTitle"]);
-    const { sessionState } = (0, runtime_1.useRuntimeState)();
-    const lastMessage = (_b = sessionState.messages) === null || _b === void 0 ? void 0 : _b.slice(-1)[0];
-    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)(CurrentAgent_1.default, { agentId: lastMessage.assistantId, children: (0, jsx_runtime_1.jsx)(CurrentMessage_1.default, { message: lastMessage, children: (0, jsx_runtime_1.jsx)(react_1.Suspense, { children: (0, jsx_runtime_1.jsx)(OutputItemView, {}) }) }) }) })] })) })));
+    const lastMessage = (0, session_1.useSessionState)()((s) => { var _a; return (_a = 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 }) })] })) })));
 }
-function OutputItemView() {
-    const { appearanceOutput } = (0, CurrentAgent_1.useCurrentAgent)();
+const OutputItemView = (0, react_1.memo)(({ message }) => {
+    const { appearanceOutput } = (0, CurrentAgent_1.useCurrentAgent)({ agentId: message.assistantId });
     if (!(appearanceOutput === null || appearanceOutput === void 0 ? void 0 : appearanceOutput.componentId))
         return null;
-    return ((0, jsx_runtime_1.jsx)(CustomComponentRenderer_1.default, { componentId: appearanceOutput.componentId, properties: appearanceOutput.componentProps }));
-}
+    return ((0, jsx_runtime_1.jsx)(CurrentAgent_1.default, { agentId: message.assistantId, children: (0, jsx_runtime_1.jsx)(CurrentMessage_1.default, { message: message, children: (0, jsx_runtime_1.jsx)(react_1.Suspense, { children: (0, jsx_runtime_1.jsx)(CustomComponentRenderer_1.default, { componentId: appearanceOutput.componentId, properties: appearanceOutput.componentProps }) }) }) }));
+});

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

@@ -13,11 +13,10 @@ exports.useAgentState = exports.createAgentState = void 0;
 const zustand_1 = require("zustand");
 const immer_1 = require("zustand/middleware/immer");
 const agent_1 = require("../api/agent");
-const STATES = {};
+const zustand_2 = require("../utils/zustand");
 const createAgentState = ({ aid, working, agent }) => {
-    var _a;
     const key = working ? `${aid}-working` : aid;
-    (_a = STATES[key]) !== null && _a !== void 0 ? _a : (STATES[key] = (0, zustand_1.create)()((0, immer_1.immer)((set) => ({
+    return (0, zustand_2.createCachedStore)(key, () => (0, zustand_1.create)()((0, immer_1.immer)((set) => ({
         agent,
         load: () => __awaiter(void 0, void 0, void 0, function* () {
             set((state) => {
@@ -42,7 +41,6 @@ const createAgentState = ({ aid, working, agent }) => {
             }
         }),
     }))));
-    return STATES[key];
 };
 exports.createAgentState = createAgentState;
 const LOADING_TASKS = {};

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

@@ -20,27 +20,28 @@ function useRuntimeState() {
     var _a;
     const { aid, working } = (0, Runtime_1.useRuntimeContext)();
     const [agent] = (0, agent_1.useAgentState)({ aid, working });
-    const sessionState = (0, session_2.createSessionState)({ aid })();
     const { session: authSession } = (0, session_1.useSessionContext)();
+    const sessionState = (0, react_1.useMemo)(() => (0, session_2.createSessionState)({ aid }), [aid]);
+    const exec = sessionState((s) => s.execute);
     // reset state after logged out
     (0, react_1.useEffect)(() => {
         var _a;
         if (!((_a = authSession.user) === null || _a === void 0 ? void 0 : _a.did)) {
-            sessionState.reset();
+            sessionState.getState().reset();
         }
-    }, [(_a = authSession.user) === null || _a === void 0 ? void 0 : _a.did]);
+    }, [(_a = authSession.user) === null || _a === void 0 ? void 0 : _a.did, sessionState]);
     const login = (0, react_1.useCallback)(() => __awaiter(this, void 0, void 0, function* () {
         yield new Promise((resolve) => {
             authSession.login(() => resolve());
         });
-        yield Promise.all([sessionState.load()]);
-    }), [aid, authSession, sessionState]);
+        yield sessionState.getState().load();
+    }), [authSession, sessionState]);
     const execute = (0, react_1.useCallback)((args) => __awaiter(this, void 0, void 0, function* () {
         if (!authSession.user) {
             yield login();
         }
-        return sessionState.execute(Object.assign(Object.assign({}, args), { working }));
-    }), [authSession.user, login, sessionState]);
+        return exec(Object.assign(Object.assign({}, args), { working }));
+    }), [authSession.user, exec, working, login]);
     const appearancePage = (0, react_1.useMemo)(() => {
         var _a, _b;
         const initialValue = (_b = (_a = agent.outputVariables) === null || _a === void 0 ? void 0 : _a.find((i) => i.name === types_1.RuntimeOutputVariable.appearancePage)) === null || _b === void 0 ? void 0 : _b.initialValue;
@@ -50,6 +51,6 @@ function useRuntimeState() {
         var _a, _b, _c, _d, _e, _f;
         return ((_f = (_e = (_d = (_c = (_b = (_a = agent.outputVariables) === null || _a === void 0 ? void 0 : _a.find((i) => i.name === types_1.RuntimeOutputVariable.children)) === null || _b === void 0 ? void 0 : _b.initialValue) === null || _c === void 0 ? void 0 : _c.agents) === null || _d === void 0 ? void 0 : _d[0]) === null || _e === void 0 ? void 0 : _e.id) !== null && _f !== void 0 ? _f : agent.id);
     }, [agent]);
-    return { aid, working, agent, appearancePage, sessionState, childAgentId, execute };
+    return { aid, working, agent, appearancePage, childAgentId, execute };
 }
 exports.useRuntimeState = useRuntimeState;