@blocklet/pages-kit 0.2.316 → 0.2.317

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

@@ -0,0 +1,44 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { RuntimeOutputVariable } from '@blocklet/ai-runtime/types';
+import { Avatar, IconButton, Stack } from '@mui/material';
+import { useMemo } from 'react';
+import CustomComponentRenderer from '../../../../../components/CustomComponentRenderer';
+import { useActiveAgent } from '../../contexts/ActiveAgent';
+import CurrentAgentProvider, { useCurrentAgent } from '../../contexts/CurrentAgent';
+import useAppearances, { useProfile } from '../../hooks/use-appearances';
+import { useRuntimeState } from '../../state/runtime';
+import { getOutputVariableInitialValue } from '../../utils/runtime-output-schema';
+export default function InputsView(_a) {
+    var props = __rest(_a, []);
+    const { activeAgentId, setActiveAgentId } = useActiveAgent();
+    const { agent } = useRuntimeState();
+    const children = useMemo(() => { var _a, _b; return (_b = (_a = getOutputVariableInitialValue(agent, RuntimeOutputVariable.children)) === null || _a === void 0 ? void 0 : _a.agents) === null || _b === void 0 ? void 0 : _b.filter((i) => !!i.id); }, [agent]);
+    return (_jsxs(Stack, Object.assign({ gap: 2 }, props, { children: [children && children.length > 1 && (_jsx(Stack, { direction: "row", gap: 2, children: children === null || children === void 0 ? void 0 : children.map((child) => (_jsx(CurrentAgentProvider, { agentId: child.id, children: _jsx(AgentAvatar, { selected: activeAgentId === child.id, onClick: () => setActiveAgentId(child.id) }) }))) })), _jsx(Stack, { children: _jsx(CurrentAgentProvider, { agentId: activeAgentId, children: _jsx(AgentInput, {}) }) })] })));
+}
+function AgentAvatar(_a) {
+    var _b;
+    var { selected } = _a, props = __rest(_a, ["selected"]);
+    const { appearanceInput } = useAppearances();
+    const profile = useProfile();
+    if (!(appearanceInput === null || appearanceInput === void 0 ? void 0 : appearanceInput.componentId))
+        return null;
+    return (_jsx(IconButton, Object.assign({}, props, { sx: Object.assign({ p: 0, outline: selected ? 3 : 0, outlineColor: 'primary.light' }, props.sx), children: _jsx(Avatar, { src: profile === null || profile === void 0 ? void 0 : profile.avatar, children: (_b = profile.name) === null || _b === void 0 ? void 0 : _b.slice(0, 1) }) })));
+}
+function AgentInput() {
+    const { aid } = useCurrentAgent();
+    const { appearanceInput } = useAppearances({ aid });
+    if (!(appearanceInput === null || appearanceInput === void 0 ? void 0 : appearanceInput.componentId))
+        return null;
+    return (_jsx(CustomComponentRenderer, { componentId: appearanceInput.componentId, properties: appearanceInput.componentProperties }));
+}

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

@@ -0,0 +1,30 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Stack } from '@mui/material';
+import { memo } from 'react';
+import CustomComponentRenderer from '../../../../../components/CustomComponentRenderer';
+import { useSessionContext } from '../../../../session';
+import UserInfo from '../../components/UserInfo';
+import { useComponentPreferences } from '../../contexts/ComponentPreferences';
+import CurrentAgentProvider from '../../contexts/CurrentAgent';
+import CurrentMessageProvider from '../../contexts/CurrentMessage';
+import useAppearances, { useProfile } from '../../hooks/use-appearances';
+import UserMessageView from './UserMessageView';
+const MessageView = memo(({ message }) => {
+    var _a, _b, _c, _d, _e;
+    const { session: authSession } = useSessionContext();
+    const { appearanceOutput } = useAppearances({ agentId: message.assistantId });
+    const profile = useProfile({ agentId: message.assistantId });
+    const { hideAgentAvatar, hideUserInputs } = (_a = useComponentPreferences()) !== null && _a !== void 0 ? _a : {};
+    if (!(appearanceOutput === null || appearanceOutput === void 0 ? void 0 : appearanceOutput.componentId))
+        return null;
+    return (_jsx(CurrentAgentProvider, { agentId: message.assistantId, children: _jsx(CurrentMessageProvider, { message: message, children: _jsxs(Stack, { gap: 2, children: [!hideUserInputs && (_jsx(Box, { children: _jsx(UserInfo, { name: (_b = authSession.user) === null || _b === void 0 ? void 0 : _b.fullName, did: (_c = authSession.user) === null || _c === void 0 ? void 0 : _c.did, avatar: (_d = authSession.user) === null || _d === void 0 ? void 0 : _d.avatar, time: message.createdAt, reverse: true, alignItems: "flex-start", children: _jsx(Stack, { sx: { alignItems: 'flex-end' }, children: _jsx(Box, { sx: {
+                                        borderRadius: 1,
+                                        borderTopRightRadius: '2px',
+                                        px: 2,
+                                        py: 1,
+                                        marginTop: 0.5,
+                                        maxWidth: 'calc(100% - 40px)',
+                                        bgcolor: 'rgba(239, 246, 255, 1)',
+                                    }, children: _jsx(UserMessageView, {}) }) }) }) })), _jsx(Box, { children: !hideAgentAvatar ? (_jsx(UserInfo, { name: profile.name, did: (_e = globalThis.blocklet) === null || _e === void 0 ? void 0 : _e.appId, avatar: profile.avatar, time: message.createdAt, alignItems: "flex-start", children: _jsx(CustomComponentRenderer, { componentId: appearanceOutput.componentId, properties: appearanceOutput.componentProperties }) })) : (_jsx(CustomComponentRenderer, { componentId: appearanceOutput.componentId, properties: appearanceOutput.componentProperties })) })] }) }) }));
+});
+export default MessageView;

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

@@ -0,0 +1,27 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Divider, Stack } from '@mui/material';
+import { useComponentPreferences } from '../../contexts/ComponentPreferences';
+import { useCurrentSessionState, useSessionState } from '../../state/session';
+import MessageView from './MessageView';
+import OpeningMessageView from './OpeningMessageView';
+import OpeningQuestionsView from './OpeningQuestionsView';
+export default function MessagesView(_a) {
+    var _b;
+    var props = __rest(_a, []);
+    const messages = useCurrentSessionState((s) => s === null || s === void 0 ? void 0 : s.messages);
+    const loaded = useSessionState((s) => s.loaded);
+    const showOpening = useCurrentSessionState((s) => !s || (s === null || s === void 0 ? void 0 : s.loaded)) && loaded;
+    const divider = (_b = useComponentPreferences()) === null || _b === void 0 ? void 0 : _b.divider;
+    return (_jsxs(Stack, Object.assign({ gap: 2 }, props, { children: [showOpening && _jsx(OpeningMessageView, {}), messages === null || messages === void 0 ? void 0 : messages.map((message, index) => (_jsxs(_Fragment, { children: [_jsx(MessageView, { message: message }, message.taskId), divider && index !== messages.length - 1 ? _jsx(Divider, { sx: { my: 2 } }) : undefined] }))), showOpening && !(messages === null || messages === void 0 ? void 0 : messages.length) && _jsx(OpeningQuestionsView, {})] })));
+}

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

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

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

@@ -0,0 +1,14 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { RuntimeOutputVariable } from '@blocklet/ai-runtime/types';
+import { useMemo } from 'react';
+import CustomComponentRenderer from '../../../../../components/CustomComponentRenderer';
+import { useCurrentAgent } from '../../contexts/CurrentAgent';
+export default function OpeningQuestionsView() {
+    var _a, _b;
+    const { agent } = useCurrentAgent();
+    const output = useMemo(() => { var _a; return (_a = agent.outputVariables) === null || _a === void 0 ? void 0 : _a.find((i) => i.name === RuntimeOutputVariable.openingQuestions); }, [agent.outputVariables]);
+    const componentId = (_a = output === null || output === void 0 ? void 0 : output.appearance) === null || _a === void 0 ? void 0 : _a.componentId;
+    if (!componentId)
+        return null;
+    return (_jsx(CustomComponentRenderer, { instanceId: output.id, componentId: componentId, properties: (_b = output.appearance) === null || _b === void 0 ? void 0 : _b.componentProperties, props: { output } }));
+}

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

@@ -0,0 +1,20 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Typography } from '@mui/material';
+import { useMemo } from 'react';
+import MarkdownRenderer from '../../components/MarkdownRenderer';
+import { useCurrentAgent } from '../../contexts/CurrentAgent';
+import { useCurrentMessage } from '../../contexts/CurrentMessage';
+import { isValidInput } from '../../utils/agent-inputs';
+export default function UserMessageView() {
+    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, _b; return [((_a = i.label) === null || _a === void 0 ? void 0 : _a.trim()) || i.key, (_b = message.parameters) === null || _b === void 0 ? void 0 : _b[i.key]]; }).filter((i) => i[1]);
+    }, [agent.parameters, message.parameters]);
+    if ((params === null || params === void 0 ? void 0 : params.length) === 1) {
+        return _jsx(MarkdownRenderer, { children: (_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: [_jsx(Box, { component: "span", sx: { color: 'text.secondary' }, children: key }), "\u00A0\u00A0", _jsx("span", { children: value })] }, key)));
+}

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

@@ -1,12 +1,3 @@
-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)
@@ -19,29 +10,22 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { RuntimeOutputVariable } from '@blocklet/ai-runtime/types';
-import { Icon } from '@iconify/react';
-import { Box, IconButton, ListItemIcon, Stack, ThemeProvider, createTheme, useTheme } from '@mui/material';
-import { memo, useEffect, useMemo } from 'react';
+import { ThemeProvider, alpha, createTheme, useTheme } from '@mui/material';
+import { useEffect, useMemo } from 'react';
 import { useScrollToBottom } from 'react-scroll-to-bottom';
-import CustomComponentRenderer from '../../../../../components/CustomComponentRenderer';
-import { useLocaleContext } from '../../../../locale';
-import { useHeader } from '../../../../page/header';
-import { useSessionContext } from '../../../../session';
 import SimpleHeader from '../../components/Header/SimpleHeader';
 import SimpleLayout from '../../components/Layout/SimpleLayout';
-import MarkdownRenderer from '../../components/MarkdownRenderer';
-import PopperMenuButton from '../../components/PopperMenuButton';
-import LoadingMenuItem from '../../components/PopperMenuButton/LoadingMenuItem';
 import ScrollView from '../../components/ScrollView';
-import UserInfo from '../../components/UserInfo';
-import CurrentAgentProvider, { useCurrentAgent } from '../../contexts/CurrentAgent';
-import CurrentMessageProvider from '../../contexts/CurrentMessage';
-import useAppearances, { useOpeningMessage, useOpeningQuestions, useProfile } from '../../hooks/use-appearances';
-import { useRuntimeState } from '../../state/runtime';
-import { useAutoLoadSessionState, useCurrentSessionState, useSessionState } from '../../state/session';
-import MessageSuggestedQuestions, { MessageSuggestedQuestion } from '../ChatOutput/MessageSuggestedQuestions';
-export default function SimpleChat({ primaryColor, scrollViewProps = { scroll: 'window', initialScrollBehavior: 'auto' }, hideHeaderMenuButton, }) {
+import { useActiveAgent } from '../../contexts/ActiveAgent';
+import { ComponentPreferencesProvider } from '../../contexts/ComponentPreferences';
+import CurrentAgentProvider from '../../contexts/CurrentAgent';
+import { useHeaderMenu } from '../../hooks/use-header-menu';
+import { useAutoLoadSessionState, useCurrentSessionState } from '../../state/session';
+import BackgroundImage from './BackgroundImage';
+import InputsView from './InputsView';
+import MessagesView from './MessagesView';
+export default function SimpleChat(_a) {
+    var { primaryColor, scrollViewProps = { scroll: 'window', initialScrollBehavior: 'auto' } } = _a, preferences = __rest(_a, ["primaryColor", "scrollViewProps"]);
     useAutoLoadSessionState();
     const inheritedTheme = useTheme();
     const theme = useMemo(() => {
@@ -61,11 +45,10 @@ export default function SimpleChat({ primaryColor, scrollViewProps = { scroll: '
             },
         });
     }, [inheritedTheme, primaryColor]);
-    return (_jsx(ScrollView, Object.assign({}, scrollViewProps, { children: _jsx(ThemeProvider, { theme: theme, children: _jsx(SimpleChatView, { hideHeaderMenuButton: hideHeaderMenuButton }) }) })));
+    return (_jsx(ComponentPreferencesProvider, Object.assign({}, preferences, { children: _jsx(ScrollView, Object.assign({}, scrollViewProps, { children: _jsxs(ThemeProvider, { theme: theme, children: [_jsx(BackgroundImage, {}), _jsx(SimpleChatView, {})] }) })) })));
 }
-function SimpleChatView({ hideHeaderMenuButton }) {
-    const { t, locale } = useLocaleContext();
-    const { childAgentId } = useRuntimeState();
+function SimpleChatView() {
+    const { activeAgentId } = useActiveAgent();
     // auto scroll to bottom when new message is sent
     const running = useCurrentSessionState((s) => s === null || s === void 0 ? void 0 : s.running);
     const scrollToBottom = useScrollToBottom();
@@ -73,80 +56,14 @@ function SimpleChatView({ hideHeaderMenuButton }) {
         if (running)
             scrollToBottom({ behavior: 'smooth' });
     }, [scrollToBottom, running]);
-    const clearSession = useSessionState((s) => s.clearSession);
-    useHeader(() => hideHeaderMenuButton
-        ? {}
-        : {
-            addons: (...exists) => [
-                _jsx(PopperMenuButton, { component: IconButton, PopperProps: { placement: 'bottom-end', sx: { zIndex: 'appBar' } }, menus: _jsxs(LoadingMenuItem, { onClick: () => __awaiter(this, void 0, void 0, function* () { return clearSession(); }), children: [_jsx(ListItemIcon, { children: _jsx(Icon, { icon: "mingcute:broom-line" }) }), t('clearSession')] }), children: _jsx(Icon, { icon: "tabler:dots" }) }),
-                ...exists,
-            ],
-        }, [locale, hideHeaderMenuButton]);
-    return (_jsxs(SimpleLayout, { children: [_jsx(SimpleHeader, {}), _jsx(OutputView, { className: "aigne-outputs aigne-simple-chat-outputs", flexGrow: 1, pb: 10 }), _jsx(CurrentAgentProvider, { agentId: childAgentId, children: _jsx(AgentInputRender, { className: "aigne-inputs aigne-simple-chat-inputs", sx: { position: 'sticky', bottom: 0, pt: 1, pb: 2, bgcolor: 'background.paper', zIndex: 10 } }) })] }));
-}
-function AgentInputRender(_a) {
-    var props = __rest(_a, []);
-    const { appearanceInput } = useAppearances();
-    if (!appearanceInput.componentId)
-        return null;
-    return (_jsx(Stack, Object.assign({}, props, { children: _jsx(CustomComponentRenderer, { componentId: appearanceInput.componentId, properties: appearanceInput.componentProps }) })));
-}
-function OutputView(_a) {
-    var props = __rest(_a, []);
-    const messages = useCurrentSessionState((s) => s === null || s === void 0 ? void 0 : s.messages);
-    const loaded = useSessionState((s) => s.loaded);
-    const showOpening = useCurrentSessionState((s) => !s || (s === null || s === void 0 ? void 0 : s.loaded)) && loaded;
-    const lastMessage = messages === null || messages === void 0 ? void 0 : messages.at(-1);
-    return (_jsxs(Stack, Object.assign({ gap: 2 }, props, { children: [showOpening && _jsx(OpeningMessageView, {}), messages === null || messages === void 0 ? void 0 : messages.map((message) => _jsx(OutputItemView, { message: message }, message.taskId)), lastMessage && _jsx(SuggestedQuestionsView, { message: lastMessage }), showOpening && !(messages === null || messages === void 0 ? void 0 : messages.length) && _jsx(OpeningQuestionsView, {})] })));
-}
-const OutputItemView = memo(({ message }) => {
-    var _a, _b, _c, _d;
-    const { session: authSession } = useSessionContext();
-    const { appearanceOutput } = useAppearances({ agentId: message.assistantId });
-    const profile = useProfile({ agentId: message.assistantId });
-    if (!(appearanceOutput === null || appearanceOutput === void 0 ? void 0 : appearanceOutput.componentId))
-        return null;
-    return (_jsx(CurrentAgentProvider, { agentId: message.assistantId, children: _jsx(CurrentMessageProvider, { message: message, children: _jsxs(Stack, { gap: 2, children: [_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: profile.name, did: (_d = globalThis.blocklet) === null || _d === void 0 ? void 0 : _d.appId, avatar: profile.avatar, 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 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];
-    }, [message]);
-    return (_jsx(Box, { ml: 6.5, mr: 2.5, children: (suggestedQuestions === null || suggestedQuestions === void 0 ? void 0 : suggestedQuestions.length) ? (_jsx(MessageSuggestedQuestions, { dataSource: suggestedQuestions, onClick: (item) => {
-                execute({ aid, parameters: Object.assign(Object.assign({}, message.parameters), { question: item.question }) });
-            } })) : null }));
-}
-const OpeningMessageView = memo(() => {
-    var _a;
-    const { childAgentId } = useRuntimeState();
-    const opening = useOpeningMessage({ agentId: childAgentId });
-    if (!(opening === null || opening === void 0 ? void 0 : opening.message))
-        return null;
-    return (_jsx(Box, { children: _jsx(UserInfo, { name: opening.profile.name, did: (_a = globalThis.blocklet) === null || _a === void 0 ? void 0 : _a.appId, avatar: opening.profile.avatar, alignItems: "flex-start", children: _jsx(Box, { sx: {
-                    bgcolor: 'rgba(229, 231, 235, 1)',
-                    borderRadius: 1,
-                    borderTopLeftRadius: 2,
-                    px: 2,
-                    py: 1,
-                    mt: 0.5,
-                    mr: 5,
-                }, children: _jsx(MarkdownRenderer, { children: opening.message }) }) }) }));
-});
-function OpeningQuestionsView() {
-    const { execute } = useRuntimeState();
-    const { childAgentId } = useRuntimeState();
-    const { aid } = useCurrentAgent({ agentId: childAgentId });
-    const opening = useOpeningQuestions({ aid });
-    if (!(opening === null || opening === void 0 ? void 0 : opening.questions.length))
-        return null;
-    return (_jsx(Box, { ml: 6.5, mr: 2.5, children: _jsx(Stack, { gap: 1, children: opening.questions.map((item) => {
-                return (_jsx(MessageSuggestedQuestion, { onClick: () => execute({ aid, parameters: Object.assign(Object.assign({}, item.parameters), { question: item.parameters.question || item.title }) }), children: item.title }, item.id));
-            }) }) }));
+    useHeaderMenu();
+    return (_jsxs(SimpleLayout, { children: [_jsx(SimpleHeader, { px: 2 }), _jsx(CurrentAgentProvider, { agentId: activeAgentId, children: _jsx(MessagesView, { className: "aigne-outputs aigne-simple-chat-outputs", flexGrow: 1, pb: 10 }) }), _jsx(CurrentAgentProvider, { agentId: activeAgentId, children: _jsx(InputsView, { className: "aigne-inputs aigne-simple-chat-inputs", sx: {
+                        position: 'sticky',
+                        bottom: 0,
+                        p: 2,
+                        zIndex: 10,
+                        borderRadius: 1,
+                        bgcolor: (theme) => alpha(theme.palette.background.paper, 0.7),
+                        backdropFilter: 'blur(10px)',
+                    } }) })] }));
 }

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

@@ -1,15 +1,41 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { RuntimeOutputVariable } from '@blocklet/ai-runtime/types';
 import { Stack } from '@mui/material';
-import MarkdownRenderer from '../../components/MarkdownRenderer';
-import ShareActions from '../../components/ShareActions';
+import { useMemo } from 'react';
+import CustomComponentRenderer from '../../../../../components/CustomComponentRenderer';
+import { getDefaultOutputComponent } from '../../constants';
+import { useCurrentAgent } from '../../contexts/CurrentAgent';
 import { useCurrentMessage } from '../../contexts/CurrentMessage';
-import MessageErrorView from '../ChatOutput/MessageErrorView';
-import MessageMetadataRenderer from '../ChatOutput/MessageMetadataRenderer';
+const ignoredOutputs = new Set([
+    RuntimeOutputVariable.appearancePage,
+    RuntimeOutputVariable.appearanceInput,
+    RuntimeOutputVariable.appearanceOutput,
+    RuntimeOutputVariable.openingQuestions,
+    RuntimeOutputVariable.openingMessage,
+]);
 export default function SimpleOutput() {
-    var _a, _b, _c;
     const { message } = useCurrentMessage();
-    const objects = (_a = message.result) === null || _a === void 0 ? void 0 : _a.objects;
-    const { error } = message;
-    const isMessageLoading = (message.loading || !message.result) && !message.error;
-    return (_jsxs(Stack, { gap: 2, boxShadow: 1, borderRadius: 1, p: 2, children: [_jsx(MarkdownRenderer, { children: (_b = message.result) === null || _b === void 0 ? void 0 : _b.content }), error && _jsx(MessageErrorView, { error: error }), objects === null || objects === void 0 ? void 0 : objects.map((item) => _jsx(MessageMetadataRenderer, { object: item.data })), !isMessageLoading && ((_c = message.result) === null || _c === void 0 ? void 0 : _c.content) && (_jsx(ShareActions, { direction: "row", justifyContent: "flex-end", sx: { mt: 2 } }))] }));
+    if (message.error)
+        throw message.error;
+    const { agent } = useCurrentAgent();
+    const outputs = useMemo(() => {
+        var _a;
+        return (_a = agent.outputVariables) === null || _a === void 0 ? void 0 : _a.map((i) => {
+            var _a, _b;
+            return (Object.assign(Object.assign({}, i), { appearance: Object.assign(Object.assign({}, i.appearance), { componentId: ((_a = i.appearance) === null || _a === void 0 ? void 0 : _a.componentId) || ((_b = getDefaultOutputComponent(i)) === null || _b === void 0 ? void 0 : _b.componentId) }) }));
+        }).filter((i) => { var _a; return !!((_a = i.appearance) === null || _a === void 0 ? void 0 : _a.componentId) && !ignoredOutputs.has(i.name); });
+    }, [agent.outputVariables]);
+    if (!(outputs === null || outputs === void 0 ? void 0 : outputs.length))
+        return null;
+    return (_jsx(Stack, { gap: 2, children: outputs.map((output) => {
+            var _a, _b, _c, _d, _e;
+            const value = output.name === RuntimeOutputVariable.text
+                ? (_a = message.result) === null || _a === void 0 ? void 0 : _a.content
+                : (_e = (_d = (_c = (_b = message.result) === null || _b === void 0 ? void 0 : _b.objects) === null || _c === void 0 ? void 0 : _c[0]) === null || _d === void 0 ? void 0 : _d.data) === null || _e === void 0 ? void 0 : _e[output.name];
+            return (_jsx(CustomComponentRenderer, { instanceId: output.id, componentId: output.appearance.componentId, properties: output.appearance.componentProperties, props: {
+                    output,
+                    outputValue: value,
+                    writing: output.name === RuntimeOutputVariable.text && message.loading,
+                } }, output.id));
+        }) }));
 }

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

@@ -16,13 +16,13 @@ import Balancer from 'react-wrap-balancer';
 import CustomComponentRenderer from '../../../../../components/CustomComponentRenderer';
 import SimpleHeader from '../../components/Header/SimpleHeader';
 import SimpleLayout from '../../components/Layout/SimpleLayout';
+import { useActiveAgent } from '../../contexts/ActiveAgent';
 import CurrentAgentProvider from '../../contexts/CurrentAgent';
 import CurrentMessageProvider from '../../contexts/CurrentMessage';
 import useAppearances from '../../hooks/use-appearances';
-import { useRuntimeState } from '../../state/runtime';
 import { useAutoLoadSessionState, useCurrentSessionState } from '../../state/session';
 export default function SimplePage({ resultTitle, primaryColor }) {
-    const { childAgentId } = useRuntimeState();
+    const { activeAgentId } = useActiveAgent();
     useAutoLoadSessionState();
     const inheritedTheme = useTheme();
     const theme = useMemo(() => {
@@ -42,14 +42,14 @@ export default function SimplePage({ resultTitle, primaryColor }) {
             },
         });
     }, [inheritedTheme, primaryColor]);
-    return (_jsx(ThemeProvider, { theme: theme, children: _jsxs(SimpleLayout, { pb: 4, children: [_jsx(SimpleHeader, {}), _jsx(CurrentAgentProvider, { agentId: childAgentId, children: _jsx(AgentInputRender, { className: "aigne-inputs aigne-simple-page-inputs" }) }), _jsx(OutputView, { className: "aigne-outputs aigne-simple-page-outputs", resultTitle: resultTitle })] }) }));
+    return (_jsx(ThemeProvider, { theme: theme, children: _jsxs(SimpleLayout, { pb: 4, children: [_jsx(SimpleHeader, {}), _jsx(CurrentAgentProvider, { agentId: activeAgentId, children: _jsx(AgentInputRender, { className: "aigne-inputs aigne-simple-page-inputs" }) }), _jsx(OutputView, { className: "aigne-outputs aigne-simple-page-outputs", resultTitle: resultTitle })] }) }));
 }
 function AgentInputRender(_a) {
     var props = __rest(_a, []);
     const { appearanceInput } = useAppearances();
     if (!(appearanceInput === null || appearanceInput === void 0 ? void 0 : appearanceInput.componentId))
         return null;
-    return (_jsx(Stack, Object.assign({}, props, { children: _jsx(CustomComponentRenderer, { componentId: appearanceInput.componentId, properties: appearanceInput.componentProps }) })));
+    return (_jsx(Stack, Object.assign({}, props, { children: _jsx(CustomComponentRenderer, { componentId: appearanceInput.componentId, properties: appearanceInput.componentProperties }) })));
 }
 function OutputView(_a) {
     var { resultTitle } = _a, props = __rest(_a, ["resultTitle"]);
@@ -60,5 +60,5 @@ const OutputItemView = memo(({ message }) => {
     const { appearanceOutput } = useAppearances({ agentId: message.assistantId });
     if (!(appearanceOutput === null || appearanceOutput === void 0 ? void 0 : appearanceOutput.componentId))
         return null;
-    return (_jsx(CurrentAgentProvider, { agentId: message.assistantId, children: _jsx(CurrentMessageProvider, { message: message, children: _jsx(Suspense, { children: _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.componentProperties }) }) }) }));
 });

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

@@ -0,0 +1,48 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Stack, Typography } from '@mui/material';
+import Joi from 'joi';
+import { useMemo } from 'react';
+import OutputFieldContainer from '../../components/OutputFieldContainer';
+import { useCurrentAgent } from '../../contexts/CurrentAgent';
+import { useCurrentMessage } from '../../contexts/CurrentMessage';
+import { useRuntimeState } from '../../state/runtime';
+import { useCurrentSessionState } from '../../state/session';
+const suggestedQuestionsSchema = Joi.array().items(Joi.object({
+    question: Joi.string().required(),
+}));
+export default function SuggestedQuestionsView({ output, outputValue, onlyLastMessage, }) {
+    var _a;
+    const { message } = (_a = useCurrentMessage({ optional: true })) !== null && _a !== void 0 ? _a : {};
+    const lastMessage = useCurrentSessionState((s) => { var _a; return (_a = s === null || s === void 0 ? void 0 : s.messages) === null || _a === void 0 ? void 0 : _a.at(-1); });
+    const isLastMessage = !!message && message.taskId === (lastMessage === null || lastMessage === void 0 ? void 0 : lastMessage.taskId);
+    const questions = useMemo(() => {
+        const result = suggestedQuestionsSchema.validate(outputValue, { allowUnknown: true });
+        if (result.error)
+            return undefined;
+        return result.value;
+    }, [outputValue]);
+    const { aid } = useCurrentAgent();
+    const { execute } = useRuntimeState();
+    if (!message || (!isLastMessage && onlyLastMessage) || !(questions === null || questions === void 0 ? void 0 : questions.length))
+        return null;
+    return (_jsx(OutputFieldContainer, { output: output, children: _jsx(Stack, { gap: 1, children: questions.map((item) => (_jsx(MessageSuggestedQuestion, { onClick: () => {
+                    execute({ aid, parameters: Object.assign(Object.assign({}, message.parameters), { question: item.question }) });
+                }, children: item.question }, item.question))) }) }));
+}
+function MessageSuggestedQuestion(_a) {
+    var props = __rest(_a, []);
+    return (_jsx(Typography, Object.assign({ variant: "subtitle2" }, props, { sx: Object.assign({ display: 'inline-block', border: 1, borderColor: 'rgba(229, 231, 235, 1)', borderRadius: 1, py: 1, px: 2, cursor: 'pointer', '&:hover': {
+                backgroundColor: 'rgba(239, 246, 255, 1)',
+            } }, props.sx) })));
+}

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

@@ -16,10 +16,10 @@ import dayjs from 'dayjs';
 // import { Icon } from 'iconify/react';
 import { Suspense, useCallback, useEffect, useMemo, useState } from 'react';
 import CustomComponentRenderer from '../../../../../components/CustomComponentRenderer';
+import { useActiveAgent } from '../../contexts/ActiveAgent';
 import CurrentAgentProvider from '../../contexts/CurrentAgent';
 import CurrentMessageProvider from '../../contexts/CurrentMessage';
 import useAppearances from '../../hooks/use-appearances';
-import { useRuntimeState } from '../../state/runtime';
 import { useAutoLoadSessionState, useCurrentSessionState } from '../../state/session';
 const getLineClamp = (count) => {
     return {
@@ -52,7 +52,7 @@ function V0Page({ textColor = '#333', primaryColor }) {
     }, [inheritedTheme, primaryColor, textColor]);
     const [sessionId] = useState('1');
     const [message, setMessage] = useState();
-    const { childAgentId } = useRuntimeState();
+    const { activeAgentId } = useActiveAgent();
     useAutoLoadSessionState();
     const messagesList = useCurrentSessionState((s) => s === null || s === void 0 ? void 0 : s.messages);
     useEffect(() => {
@@ -106,7 +106,7 @@ function V0Page({ textColor = '#333', primaryColor }) {
         }
         return (_jsx(Box, { flex: 1, children: _jsx(Grid, { container: true, spacing: 2, justifyContent: "center", children: [...Array(3)].map((_, i) => (_jsx(Grid, { item: true, xs: 12, sm: 6, md: 4, children: _jsx(Card, { sx: { backgroundColor: 'rgba(0, 0, 0, 0.5)', color: '#fff' }, children: _jsxs(CardContent, { children: [_jsx(Typography, { variant: "body2", sx: { mb: 1 }, children: `Code Snippet ${i + 1}` }), _jsx(Typography, { variant: "caption", display: "block", sx: { color: 'rgba(255, 255, 255, 0.7)' }, children: `This is history requirement ${i + 1}` })] }) }) }, i))) }) }));
     }, [JSON.stringify(message)]);
-    return (_jsx(ThemeProvider, { theme: theme, children: _jsx(CurrentAgentProvider, { agentId: childAgentId, children: _jsxs(Box, { sx: {
+    return (_jsx(ThemeProvider, { theme: theme, children: _jsx(CurrentAgentProvider, { agentId: activeAgentId, children: _jsxs(Box, { sx: {
                     display: 'flex',
                     // background: 'linear-gradient(135deg, #1a237e 0%, #3c3f41 100%)',
                 }, children: [_jsx(SliderRender, { message: message }), _jsxs(Container, { sx: {
@@ -130,12 +130,12 @@ function AgentInputRender(_a) {
     const { appearanceInput } = useAppearances();
     if (!(appearanceInput === null || appearanceInput === void 0 ? void 0 : appearanceInput.componentId))
         return null;
-    return (_jsx(Suspense, { children: _jsx(CustomComponentRenderer, Object.assign({ componentId: appearanceInput.componentId, properties: appearanceInput.componentProps }, props)) }));
+    return (_jsx(Suspense, { children: _jsx(CustomComponentRenderer, Object.assign({ componentId: appearanceInput.componentId, properties: appearanceInput.componentProperties }, props)) }));
 }
 function AgentOutputRender(_a) {
     var { message } = _a, props = __rest(_a, ["message"]);
     const { appearanceOutput } = useAppearances();
     if (!(appearanceOutput === null || appearanceOutput === void 0 ? void 0 : appearanceOutput.componentId) || !message)
         return null;
-    return (_jsx(CurrentAgentProvider, { agentId: message.assistantId, children: _jsx(CurrentMessageProvider, { message: message, children: _jsx(Suspense, { children: _jsx(CustomComponentRenderer, Object.assign({ componentId: appearanceOutput.componentId, properties: appearanceOutput.componentProps }, props)) }) }) }));
+    return (_jsx(CurrentAgentProvider, { agentId: message.assistantId, children: _jsx(CurrentMessageProvider, { message: message, children: _jsx(Suspense, { children: _jsx(CustomComponentRenderer, Object.assign({ componentId: appearanceOutput.componentId, properties: appearanceOutput.componentProperties }, props)) }) }) }));
 }

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

@@ -7,7 +7,6 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
-import { RuntimeOutputVariable } from '@blocklet/ai-runtime/types';
 import { useCallback, useEffect, useMemo } from 'react';
 import { useSessionContext } from '../../../session';
 import { useRuntimeContext } from '../contexts/Runtime';
@@ -39,9 +38,5 @@ export function useRuntimeState() {
         }
         return exec(Object.assign(Object.assign({}, args), { working }));
     }), [authSession.user, exec, working, login]);
-    const childAgentId = useMemo(() => {
-        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 === 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, childAgentId, execute };
+    return { aid, working, agent, execute };
 }

package/lib/esm/builtin/mui/material.js

@@ -1 +1 @@
-export { Alert, AlertTitle, Autocomplete, Avatar, Box, Button, IconButton, ButtonGroup, Card, CardActionArea, CardActions, CardContent, CardHeader, CardMedia, CircularProgress, ClickAwayListener, Collapse, Container, Dialog, DialogActions, DialogContent, DialogTitle, Divider, Fade, GlobalStyles, Grid, Grow, LinearProgress, Link, List, ListItem, ListItemAvatar, ListItemButton, ListItemIcon, ListItemSecondaryAction, ListSubheader, Menu, MenuItem, MenuList, Paper, Popper, Slide, Stack, Switch, TextField, ThemeProvider, Tooltip, Typography, Zoom, alpha, createTheme, styled, useMediaQuery, useTheme, } from '@mui/material';
+export { Checkbox, ListItemText, Alert, AlertTitle, Autocomplete, Avatar, Box, Button, IconButton, ButtonGroup, Card, CardActionArea, CardActions, CardContent, CardHeader, CardMedia, CircularProgress, ClickAwayListener, Collapse, Container, Dialog, DialogActions, DialogContent, DialogTitle, Divider, Fade, GlobalStyles, Grid, Grow, LinearProgress, Link, List, ListItem, ListItemAvatar, ListItemButton, ListItemIcon, ListItemSecondaryAction, ListSubheader, Menu, MenuItem, MenuList, Paper, Popper, Slide, Stack, Switch, TextField, ThemeProvider, Tooltip, Typography, Zoom, alpha, createTheme, styled, useMediaQuery, useTheme, } from '@mui/material';