@blocklet/pages-kit 0.2.316 → 0.2.317

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

@@ -23,14 +23,14 @@ const CustomComponentRenderer_1 = __importDefault(require("../../../../../compon
 const locale_1 = require("../../../../locale");
 const SimpleHeader_1 = __importDefault(require("../../components/Header/SimpleHeader"));
 const LoadingButton_1 = __importDefault(require("../../components/LoadingButton"));
+const ActiveAgent_1 = require("../../contexts/ActiveAgent");
 const CurrentAgent_1 = __importDefault(require("../../contexts/CurrentAgent"));
 const CurrentMessage_1 = __importDefault(require("../../contexts/CurrentMessage"));
 const use_appearances_1 = __importDefault(require("../../hooks/use-appearances"));
-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)();
+    const { activeAgentId } = (0, ActiveAgent_1.useActiveAgent)();
     (0, session_1.useAutoLoadSessionState)();
     const inheritedTheme = (0, material_1.useTheme)();
     const theme = (0, react_1.useMemo)(() => {
@@ -50,7 +50,7 @@ function PhotoGallery({ resultTitle, primaryColor }) {
             },
         });
     }, [inheritedTheme, primaryColor]);
-    return ((0, jsx_runtime_1.jsx)(material_1.ThemeProvider, { theme: theme, children: (0, jsx_runtime_1.jsxs)(material_1.Stack, { className: "aigne-layout aigne-photo-wall-layout", children: [(0, jsx_runtime_1.jsx)(SimpleHeader_1.default, { TitleProps: { fontSize: 48 }, DescriptionProps: { fontSize: 20 }, maxWidth: "md", mx: "auto", width: "100%", px: { xs: 2, sm: 3 } }), (0, jsx_runtime_1.jsx)(CurrentAgent_1.default, { agentId: childAgentId, children: (0, jsx_runtime_1.jsx)(AgentInputRender, { className: "aigne-inputs aigne-photo-wall-inputs", maxWidth: "md", mx: "auto", width: "100%", px: { xs: 2, sm: 3 } }) }), (0, jsx_runtime_1.jsx)(OutputView, { resultTitle: resultTitle, className: "aigne-outputs aigne-photo-wall-outputs", gap: 2 })] }) }));
+    return ((0, jsx_runtime_1.jsx)(material_1.ThemeProvider, { theme: theme, children: (0, jsx_runtime_1.jsxs)(material_1.Stack, { className: "aigne-layout aigne-photo-wall-layout", children: [(0, jsx_runtime_1.jsx)(SimpleHeader_1.default, { TitleProps: { fontSize: 48 }, DescriptionProps: { fontSize: 20 }, maxWidth: "md", mx: "auto", width: "100%", px: { xs: 2, sm: 3 } }), (0, jsx_runtime_1.jsx)(CurrentAgent_1.default, { agentId: activeAgentId, children: (0, jsx_runtime_1.jsx)(AgentInputRender, { className: "aigne-inputs aigne-photo-wall-inputs", maxWidth: "md", mx: "auto", width: "100%", px: { xs: 2, sm: 3 } }) }), (0, jsx_runtime_1.jsx)(OutputView, { resultTitle: resultTitle, className: "aigne-outputs aigne-photo-wall-outputs", gap: 2 })] }) }));
 }
 exports.default = PhotoGallery;
 function AgentInputRender(_a) {
@@ -58,7 +58,7 @@ function AgentInputRender(_a) {
     const { appearanceInput } = (0, use_appearances_1.default)();
     if (!(appearanceInput === null || appearanceInput === void 0 ? void 0 : appearanceInput.componentId))
         return null;
-    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 }) })));
+    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.componentProperties }) })));
 }
 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." }) }));
@@ -79,5 +79,5 @@ const OutputItemView = (0, react_1.memo)(({ message }) => {
     const { appearanceOutput } = (0, use_appearances_1.default)({ agentId: message.assistantId });
     if (!(appearanceOutput === null || appearanceOutput === void 0 ? void 0 : appearanceOutput.componentId))
         return null;
-    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));
+    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.componentProperties }) }) }) }, message.taskId));
 });

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

@@ -0,0 +1,26 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const material_1 = require("@mui/material");
+const joi_1 = __importDefault(require("joi"));
+const react_1 = require("react");
+const OutputFieldContainer_1 = __importDefault(require("../../components/OutputFieldContainer"));
+const referencedLinksSchema = joi_1.default.array().items(joi_1.default.object({
+    title: joi_1.default.string().required(),
+    url: joi_1.default.string().required(),
+}));
+function SuggestedQuestionsView({ output, outputValue }) {
+    const links = (0, react_1.useMemo)(() => {
+        const result = referencedLinksSchema.validate(outputValue, { allowUnknown: true });
+        if (result.error)
+            return undefined;
+        return result.value;
+    }, [outputValue]);
+    if (!(links === null || links === void 0 ? void 0 : links.length))
+        return null;
+    return ((0, jsx_runtime_1.jsx)(OutputFieldContainer_1.default, { output: output, children: (0, jsx_runtime_1.jsx)(material_1.Stack, { gap: 1, children: links.map((item) => ((0, jsx_runtime_1.jsx)(material_1.Link, { href: item.url, children: item.title }))) }) }));
+}
+exports.default = SuggestedQuestionsView;

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

@@ -0,0 +1,16 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const OutputFieldContainer_1 = __importDefault(require("../../components/OutputFieldContainer"));
+const ShareActions_1 = __importDefault(require("../../components/ShareActions"));
+const CurrentMessage_1 = require("../../contexts/CurrentMessage");
+function ShareView({ output }) {
+    const message = (0, CurrentMessage_1.useCurrentMessage)({ optional: true });
+    if (message === null || message === void 0 ? void 0 : message.message.loading)
+        return null;
+    return ((0, jsx_runtime_1.jsx)(OutputFieldContainer_1.default, { output: output, children: (0, jsx_runtime_1.jsx)(ShareActions_1.default, { flexDirection: "row", justifyContent: "flex-end" }) }));
+}
+exports.default = ShareView;

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

@@ -0,0 +1,25 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const material_1 = require("@mui/material");
+const ComponentPreferences_1 = require("../../contexts/ComponentPreferences");
+function BackgroundImage() {
+    var _a, _b;
+    const preferences = (0, ComponentPreferences_1.useComponentPreferences)();
+    if (!((_a = preferences === null || preferences === void 0 ? void 0 : preferences.backgroundImage) === null || _a === void 0 ? void 0 : _a.url))
+        return null;
+    return ((0, jsx_runtime_1.jsx)(material_1.Box, { sx: {
+            position: 'fixed',
+            left: 0,
+            top: 0,
+            right: 0,
+            bottom: 0,
+            backgroundImage: `url(${(_b = preferences.backgroundImage) === null || _b === void 0 ? void 0 : _b.url}) !important`,
+            backgroundRepeat: 'no-repeat',
+            backgroundSize: 'cover',
+            backgroundPosition: 'center',
+            pointerEvents: 'none',
+            zIndex: -1,
+        } }));
+}
+exports.default = BackgroundImage;

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

@@ -0,0 +1,73 @@
+"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)
+        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;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const types_1 = require("@blocklet/ai-runtime/types");
+const material_1 = require("@mui/material");
+const react_1 = require("react");
+const CustomComponentRenderer_1 = __importDefault(require("../../../../../components/CustomComponentRenderer"));
+const ActiveAgent_1 = require("../../contexts/ActiveAgent");
+const CurrentAgent_1 = __importStar(require("../../contexts/CurrentAgent"));
+const use_appearances_1 = __importStar(require("../../hooks/use-appearances"));
+const runtime_1 = require("../../state/runtime");
+const runtime_output_schema_1 = require("../../utils/runtime-output-schema");
+function InputsView(_a) {
+    var props = __rest(_a, []);
+    const { activeAgentId, setActiveAgentId } = (0, ActiveAgent_1.useActiveAgent)();
+    const { agent } = (0, runtime_1.useRuntimeState)();
+    const children = (0, react_1.useMemo)(() => { var _a, _b; return (_b = (_a = (0, runtime_output_schema_1.getOutputVariableInitialValue)(agent, types_1.RuntimeOutputVariable.children)) === null || _a === void 0 ? void 0 : _a.agents) === null || _b === void 0 ? void 0 : _b.filter((i) => !!i.id); }, [agent]);
+    return ((0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ gap: 2 }, props, { children: [children && children.length > 1 && ((0, jsx_runtime_1.jsx)(material_1.Stack, { direction: "row", gap: 2, children: children === null || children === void 0 ? void 0 : children.map((child) => ((0, jsx_runtime_1.jsx)(CurrentAgent_1.default, { agentId: child.id, children: (0, jsx_runtime_1.jsx)(AgentAvatar, { selected: activeAgentId === child.id, onClick: () => setActiveAgentId(child.id) }) }))) })), (0, jsx_runtime_1.jsx)(material_1.Stack, { children: (0, jsx_runtime_1.jsx)(CurrentAgent_1.default, { agentId: activeAgentId, children: (0, jsx_runtime_1.jsx)(AgentInput, {}) }) })] })));
+}
+exports.default = InputsView;
+function AgentAvatar(_a) {
+    var _b;
+    var { selected } = _a, props = __rest(_a, ["selected"]);
+    const { appearanceInput } = (0, use_appearances_1.default)();
+    const profile = (0, use_appearances_1.useProfile)();
+    if (!(appearanceInput === null || appearanceInput === void 0 ? void 0 : appearanceInput.componentId))
+        return null;
+    return ((0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({}, props, { sx: Object.assign({ p: 0, outline: selected ? 3 : 0, outlineColor: 'primary.light' }, props.sx), children: (0, jsx_runtime_1.jsx)(material_1.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 } = (0, CurrentAgent_1.useCurrentAgent)();
+    const { appearanceInput } = (0, use_appearances_1.default)({ aid });
+    if (!(appearanceInput === null || appearanceInput === void 0 ? void 0 : appearanceInput.componentId))
+        return null;
+    return ((0, jsx_runtime_1.jsx)(CustomComponentRenderer_1.default, { componentId: appearanceInput.componentId, properties: appearanceInput.componentProperties }));
+}

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

@@ -0,0 +1,58 @@
+"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 __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const material_1 = require("@mui/material");
+const react_1 = require("react");
+const CustomComponentRenderer_1 = __importDefault(require("../../../../../components/CustomComponentRenderer"));
+const session_1 = require("../../../../session");
+const UserInfo_1 = __importDefault(require("../../components/UserInfo"));
+const ComponentPreferences_1 = require("../../contexts/ComponentPreferences");
+const CurrentAgent_1 = __importDefault(require("../../contexts/CurrentAgent"));
+const CurrentMessage_1 = __importDefault(require("../../contexts/CurrentMessage"));
+const use_appearances_1 = __importStar(require("../../hooks/use-appearances"));
+const UserMessageView_1 = __importDefault(require("./UserMessageView"));
+const MessageView = (0, react_1.memo)(({ message }) => {
+    var _a, _b, _c, _d, _e;
+    const { session: authSession } = (0, session_1.useSessionContext)();
+    const { appearanceOutput } = (0, use_appearances_1.default)({ agentId: message.assistantId });
+    const profile = (0, use_appearances_1.useProfile)({ agentId: message.assistantId });
+    const { hideAgentAvatar, hideUserInputs } = (_a = (0, ComponentPreferences_1.useComponentPreferences)()) !== null && _a !== void 0 ? _a : {};
+    if (!(appearanceOutput === null || appearanceOutput === void 0 ? void 0 : appearanceOutput.componentId))
+        return null;
+    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: [!hideUserInputs && ((0, jsx_runtime_1.jsx)(material_1.Box, { children: (0, jsx_runtime_1.jsx)(UserInfo_1.default, { 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: (0, jsx_runtime_1.jsx)(material_1.Stack, { sx: { alignItems: 'flex-end' }, children: (0, jsx_runtime_1.jsx)(material_1.Box, { sx: {
+                                        borderRadius: 1,
+                                        borderTopRightRadius: '2px',
+                                        px: 2,
+                                        py: 1,
+                                        marginTop: 0.5,
+                                        maxWidth: 'calc(100% - 40px)',
+                                        bgcolor: 'rgba(239, 246, 255, 1)',
+                                    }, children: (0, jsx_runtime_1.jsx)(UserMessageView_1.default, {}) }) }) }) })), (0, jsx_runtime_1.jsx)(material_1.Box, { children: !hideAgentAvatar ? ((0, jsx_runtime_1.jsx)(UserInfo_1.default, { 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: (0, jsx_runtime_1.jsx)(CustomComponentRenderer_1.default, { componentId: appearanceOutput.componentId, properties: appearanceOutput.componentProperties }) })) : ((0, jsx_runtime_1.jsx)(CustomComponentRenderer_1.default, { componentId: appearanceOutput.componentId, properties: appearanceOutput.componentProperties })) })] }) }) }));
+});
+exports.default = MessageView;

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

@@ -0,0 +1,33 @@
+"use strict";
+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;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const material_1 = require("@mui/material");
+const ComponentPreferences_1 = require("../../contexts/ComponentPreferences");
+const session_1 = require("../../state/session");
+const MessageView_1 = __importDefault(require("./MessageView"));
+const OpeningMessageView_1 = __importDefault(require("./OpeningMessageView"));
+const OpeningQuestionsView_1 = __importDefault(require("./OpeningQuestionsView"));
+function MessagesView(_a) {
+    var _b;
+    var props = __rest(_a, []);
+    const messages = (0, session_1.useCurrentSessionState)((s) => s === null || s === void 0 ? void 0 : s.messages);
+    const loaded = (0, session_1.useSessionState)((s) => s.loaded);
+    const showOpening = (0, session_1.useCurrentSessionState)((s) => !s || (s === null || s === void 0 ? void 0 : s.loaded)) && loaded;
+    const divider = (_b = (0, ComponentPreferences_1.useComponentPreferences)()) === null || _b === void 0 ? void 0 : _b.divider;
+    return ((0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ gap: 2 }, props, { children: [showOpening && (0, jsx_runtime_1.jsx)(OpeningMessageView_1.default, {}), messages === null || messages === void 0 ? void 0 : messages.map((message, index) => ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(MessageView_1.default, { message: message }, message.taskId), divider && index !== messages.length - 1 ? (0, jsx_runtime_1.jsx)(material_1.Divider, { sx: { my: 2 } }) : undefined] }))), showOpening && !(messages === null || messages === void 0 ? void 0 : messages.length) && (0, jsx_runtime_1.jsx)(OpeningQuestionsView_1.default, {})] })));
+}
+exports.default = MessagesView;

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

@@ -0,0 +1,23 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const types_1 = require("@blocklet/ai-runtime/types");
+const react_1 = require("react");
+const CustomComponentRenderer_1 = __importDefault(require("../../../../../components/CustomComponentRenderer"));
+const UserInfo_1 = __importDefault(require("../../components/UserInfo"));
+const ComponentPreferences_1 = require("../../contexts/ComponentPreferences");
+const use_appearances_1 = require("../../hooks/use-appearances");
+const OpeningMessageView = (0, react_1.memo)(() => {
+    var _a, _b, _c, _d, _e;
+    const { hideAgentAvatar } = (_a = (0, ComponentPreferences_1.useComponentPreferences)()) !== null && _a !== void 0 ? _a : {};
+    const opening = (0, use_appearances_1.useOpeningMessage)();
+    const output = (0, react_1.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 === types_1.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 ? ((0, jsx_runtime_1.jsx)(CustomComponentRenderer_1.default, { instanceId: output.id, componentId: componentId, properties: (_c = output.appearance) === null || _c === void 0 ? void 0 : _c.componentProperties, props: { output, outputValue: opening.message } })) : ((0, jsx_runtime_1.jsx)(UserInfo_1.default, { name: opening.profile.name, did: (_d = globalThis.blocklet) === null || _d === void 0 ? void 0 : _d.appId, avatar: opening.profile.avatar, alignItems: "flex-start", children: (0, jsx_runtime_1.jsx)(CustomComponentRenderer_1.default, { instanceId: output.id, componentId: componentId, properties: (_e = output.appearance) === null || _e === void 0 ? void 0 : _e.componentProperties, props: { output, outputValue: opening.message } }) }));
+});
+exports.default = OpeningMessageView;

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

@@ -0,0 +1,20 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const types_1 = require("@blocklet/ai-runtime/types");
+const react_1 = require("react");
+const CustomComponentRenderer_1 = __importDefault(require("../../../../../components/CustomComponentRenderer"));
+const CurrentAgent_1 = require("../../contexts/CurrentAgent");
+function OpeningQuestionsView() {
+    var _a, _b;
+    const { agent } = (0, CurrentAgent_1.useCurrentAgent)();
+    const output = (0, react_1.useMemo)(() => { var _a; return (_a = agent.outputVariables) === null || _a === void 0 ? void 0 : _a.find((i) => i.name === types_1.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 ((0, jsx_runtime_1.jsx)(CustomComponentRenderer_1.default, { instanceId: output.id, componentId: componentId, properties: (_b = output.appearance) === null || _b === void 0 ? void 0 : _b.componentProperties, props: { output } }));
+}
+exports.default = OpeningQuestionsView;

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

@@ -0,0 +1,26 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const material_1 = require("@mui/material");
+const react_1 = require("react");
+const MarkdownRenderer_1 = __importDefault(require("../../components/MarkdownRenderer"));
+const CurrentAgent_1 = require("../../contexts/CurrentAgent");
+const CurrentMessage_1 = require("../../contexts/CurrentMessage");
+const agent_inputs_1 = require("../../utils/agent-inputs");
+function UserMessageView() {
+    var _a;
+    const { message } = (0, CurrentMessage_1.useCurrentMessage)();
+    const { agent } = (0, CurrentAgent_1.useCurrentAgent)();
+    const params = (0, react_1.useMemo)(() => {
+        var _a;
+        return (_a = agent.parameters) === null || _a === void 0 ? void 0 : _a.filter(agent_inputs_1.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 (0, jsx_runtime_1.jsx)(MarkdownRenderer_1.default, { children: (_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.jsx)(material_1.Box, { component: "span", sx: { color: 'text.secondary' }, children: key }), "\u00A0\u00A0", (0, jsx_runtime_1.jsx)("span", { children: value })] }, key)));
+}
+exports.default = UserMessageView;

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

@@ -1,36 +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 __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)
@@ -47,32 +15,25 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
-const types_1 = require("@blocklet/ai-runtime/types");
-const react_1 = require("@iconify/react");
 const material_1 = require("@mui/material");
-const react_2 = require("react");
+const react_1 = require("react");
 const react_scroll_to_bottom_1 = require("react-scroll-to-bottom");
-const CustomComponentRenderer_1 = __importDefault(require("../../../../../components/CustomComponentRenderer"));
-const locale_1 = require("../../../../locale");
-const header_1 = require("../../../../page/header");
-const session_1 = require("../../../../session");
 const SimpleHeader_1 = __importDefault(require("../../components/Header/SimpleHeader"));
 const SimpleLayout_1 = __importDefault(require("../../components/Layout/SimpleLayout"));
-const MarkdownRenderer_1 = __importDefault(require("../../components/MarkdownRenderer"));
-const PopperMenuButton_1 = __importDefault(require("../../components/PopperMenuButton"));
-const LoadingMenuItem_1 = __importDefault(require("../../components/PopperMenuButton/LoadingMenuItem"));
 const ScrollView_1 = __importDefault(require("../../components/ScrollView"));
-const UserInfo_1 = __importDefault(require("../../components/UserInfo"));
-const CurrentAgent_1 = __importStar(require("../../contexts/CurrentAgent"));
-const CurrentMessage_1 = __importDefault(require("../../contexts/CurrentMessage"));
-const use_appearances_1 = __importStar(require("../../hooks/use-appearances"));
-const runtime_1 = require("../../state/runtime");
-const session_2 = require("../../state/session");
-const MessageSuggestedQuestions_1 = __importStar(require("../ChatOutput/MessageSuggestedQuestions"));
-function SimpleChat({ primaryColor, scrollViewProps = { scroll: 'window', initialScrollBehavior: 'auto' }, hideHeaderMenuButton, }) {
-    (0, session_2.useAutoLoadSessionState)();
+const ActiveAgent_1 = require("../../contexts/ActiveAgent");
+const ComponentPreferences_1 = require("../../contexts/ComponentPreferences");
+const CurrentAgent_1 = __importDefault(require("../../contexts/CurrentAgent"));
+const use_header_menu_1 = require("../../hooks/use-header-menu");
+const session_1 = require("../../state/session");
+const BackgroundImage_1 = __importDefault(require("./BackgroundImage"));
+const InputsView_1 = __importDefault(require("./InputsView"));
+const MessagesView_1 = __importDefault(require("./MessagesView"));
+function SimpleChat(_a) {
+    var { primaryColor, scrollViewProps = { scroll: 'window', initialScrollBehavior: 'auto' } } = _a, preferences = __rest(_a, ["primaryColor", "scrollViewProps"]);
+    (0, session_1.useAutoLoadSessionState)();
     const inheritedTheme = (0, material_1.useTheme)();
-    const theme = (0, react_2.useMemo)(() => {
+    const theme = (0, react_1.useMemo)(() => {
         let { primary } = inheritedTheme.palette;
         try {
             if (primaryColor) {
@@ -89,93 +50,26 @@ function SimpleChat({ primaryColor, scrollViewProps = { scroll: 'window', initia
             },
         });
     }, [inheritedTheme, primaryColor]);
-    return ((0, jsx_runtime_1.jsx)(ScrollView_1.default, Object.assign({}, scrollViewProps, { children: (0, jsx_runtime_1.jsx)(material_1.ThemeProvider, { theme: theme, children: (0, jsx_runtime_1.jsx)(SimpleChatView, { hideHeaderMenuButton: hideHeaderMenuButton }) }) })));
+    return ((0, jsx_runtime_1.jsx)(ComponentPreferences_1.ComponentPreferencesProvider, Object.assign({}, preferences, { children: (0, jsx_runtime_1.jsx)(ScrollView_1.default, Object.assign({}, scrollViewProps, { children: (0, jsx_runtime_1.jsxs)(material_1.ThemeProvider, { theme: theme, children: [(0, jsx_runtime_1.jsx)(BackgroundImage_1.default, {}), (0, jsx_runtime_1.jsx)(SimpleChatView, {})] }) })) })));
 }
 exports.default = SimpleChat;
-function SimpleChatView({ hideHeaderMenuButton }) {
-    const { t, locale } = (0, locale_1.useLocaleContext)();
-    const { childAgentId } = (0, runtime_1.useRuntimeState)();
+function SimpleChatView() {
+    const { activeAgentId } = (0, ActiveAgent_1.useActiveAgent)();
     // auto scroll to bottom when new message is sent
-    const running = (0, session_2.useCurrentSessionState)((s) => s === null || s === void 0 ? void 0 : s.running);
+    const running = (0, session_1.useCurrentSessionState)((s) => s === null || s === void 0 ? void 0 : s.running);
     const scrollToBottom = (0, react_scroll_to_bottom_1.useScrollToBottom)();
-    (0, react_2.useEffect)(() => {
+    (0, react_1.useEffect)(() => {
         if (running)
             scrollToBottom({ behavior: 'smooth' });
     }, [scrollToBottom, running]);
-    const clearSession = (0, session_2.useSessionState)((s) => s.clearSession);
-    (0, header_1.useHeader)(() => hideHeaderMenuButton
-        ? {}
-        : {
-            addons: (...exists) => [
-                (0, jsx_runtime_1.jsx)(PopperMenuButton_1.default, { component: material_1.IconButton, PopperProps: { placement: 'bottom-end', sx: { zIndex: 'appBar' } }, menus: (0, jsx_runtime_1.jsxs)(LoadingMenuItem_1.default, { onClick: () => __awaiter(this, void 0, void 0, function* () { return clearSession(); }), children: [(0, jsx_runtime_1.jsx)(material_1.ListItemIcon, { children: (0, jsx_runtime_1.jsx)(react_1.Icon, { icon: "mingcute:broom-line" }) }), t('clearSession')] }), children: (0, jsx_runtime_1.jsx)(react_1.Icon, { icon: "tabler:dots" }) }),
-                ...exists,
-            ],
-        }, [locale, hideHeaderMenuButton]);
-    return ((0, jsx_runtime_1.jsxs)(SimpleLayout_1.default, { children: [(0, jsx_runtime_1.jsx)(SimpleHeader_1.default, {}), (0, jsx_runtime_1.jsx)(OutputView, { className: "aigne-outputs aigne-simple-chat-outputs", flexGrow: 1, pb: 10 }), (0, jsx_runtime_1.jsx)(CurrentAgent_1.default, { agentId: childAgentId, children: (0, jsx_runtime_1.jsx)(AgentInputRender, { className: "aigne-inputs aigne-simple-chat-inputs", sx: { position: 'sticky', bottom: 0, pt: 1, pb: 2, bgcolor: 'background.paper', zIndex: 10 } }) })] }));
-}
-function AgentInputRender(_a) {
-    var props = __rest(_a, []);
-    const { appearanceInput } = (0, use_appearances_1.default)();
-    if (!appearanceInput.componentId)
-        return null;
-    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 props = __rest(_a, []);
-    const messages = (0, session_2.useCurrentSessionState)((s) => s === null || s === void 0 ? void 0 : s.messages);
-    const loaded = (0, session_2.useSessionState)((s) => s.loaded);
-    const showOpening = (0, session_2.useCurrentSessionState)((s) => !s || (s === null || s === void 0 ? void 0 : s.loaded)) && loaded;
-    const lastMessage = messages === null || messages === void 0 ? void 0 : messages.at(-1);
-    return ((0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ gap: 2 }, props, { children: [showOpening && (0, jsx_runtime_1.jsx)(OpeningMessageView, {}), messages === null || messages === void 0 ? void 0 : messages.map((message) => (0, jsx_runtime_1.jsx)(OutputItemView, { message: message }, message.taskId)), lastMessage && (0, jsx_runtime_1.jsx)(SuggestedQuestionsView, { message: lastMessage }), showOpening && !(messages === null || messages === void 0 ? void 0 : messages.length) && (0, jsx_runtime_1.jsx)(OpeningQuestionsView, {})] })));
-}
-const OutputItemView = (0, react_2.memo)(({ message }) => {
-    var _a, _b, _c, _d;
-    const { session: authSession } = (0, session_1.useSessionContext)();
-    const { appearanceOutput } = (0, use_appearances_1.default)({ agentId: message.assistantId });
-    const profile = (0, use_appearances_1.useProfile)({ agentId: message.assistantId });
-    if (!(appearanceOutput === null || appearanceOutput === void 0 ? void 0 : appearanceOutput.componentId))
-        return null;
-    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: profile.name, did: (_d = globalThis.blocklet) === null || _d === void 0 ? void 0 : _d.appId, avatar: profile.avatar, 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 suggestedQuestions = (0, react_2.useMemo)(() => {
-        var _a, _b, _c;
-        return (_c = (_b = (_a = message === null || message === void 0 ? void 0 : message.result) === null || _a === void 0 ? void 0 : _a.objects) === null || _b === void 0 ? void 0 : _b[0]) === null || _c === void 0 ? void 0 : _c.data[types_1.RuntimeOutputVariable.suggestedQuestions];
-    }, [message]);
-    return ((0, jsx_runtime_1.jsx)(material_1.Box, { ml: 6.5, mr: 2.5, children: (suggestedQuestions === null || suggestedQuestions === void 0 ? void 0 : suggestedQuestions.length) ? ((0, jsx_runtime_1.jsx)(MessageSuggestedQuestions_1.default, { dataSource: suggestedQuestions, onClick: (item) => {
-                execute({ aid, parameters: Object.assign(Object.assign({}, message.parameters), { question: item.question }) });
-            } })) : null }));
-}
-const OpeningMessageView = (0, react_2.memo)(() => {
-    var _a;
-    const { childAgentId } = (0, runtime_1.useRuntimeState)();
-    const opening = (0, use_appearances_1.useOpeningMessage)({ agentId: childAgentId });
-    if (!(opening === null || opening === void 0 ? void 0 : opening.message))
-        return null;
-    return ((0, jsx_runtime_1.jsx)(material_1.Box, { children: (0, jsx_runtime_1.jsx)(UserInfo_1.default, { name: opening.profile.name, did: (_a = globalThis.blocklet) === null || _a === void 0 ? void 0 : _a.appId, avatar: opening.profile.avatar, alignItems: "flex-start", children: (0, jsx_runtime_1.jsx)(material_1.Box, { sx: {
-                    bgcolor: 'rgba(229, 231, 235, 1)',
-                    borderRadius: 1,
-                    borderTopLeftRadius: 2,
-                    px: 2,
-                    py: 1,
-                    mt: 0.5,
-                    mr: 5,
-                }, children: (0, jsx_runtime_1.jsx)(MarkdownRenderer_1.default, { children: opening.message }) }) }) }));
-});
-function OpeningQuestionsView() {
-    const { execute } = (0, runtime_1.useRuntimeState)();
-    const { childAgentId } = (0, runtime_1.useRuntimeState)();
-    const { aid } = (0, CurrentAgent_1.useCurrentAgent)({ agentId: childAgentId });
-    const opening = (0, use_appearances_1.useOpeningQuestions)({ aid });
-    if (!(opening === null || opening === void 0 ? void 0 : opening.questions.length))
-        return null;
-    return ((0, jsx_runtime_1.jsx)(material_1.Box, { ml: 6.5, mr: 2.5, children: (0, jsx_runtime_1.jsx)(material_1.Stack, { gap: 1, children: opening.questions.map((item) => {
-                return ((0, jsx_runtime_1.jsx)(MessageSuggestedQuestions_1.MessageSuggestedQuestion, { onClick: () => execute({ aid, parameters: Object.assign(Object.assign({}, item.parameters), { question: item.parameters.question || item.title }) }), children: item.title }, item.id));
-            }) }) }));
+    (0, use_header_menu_1.useHeaderMenu)();
+    return ((0, jsx_runtime_1.jsxs)(SimpleLayout_1.default, { children: [(0, jsx_runtime_1.jsx)(SimpleHeader_1.default, { px: 2 }), (0, jsx_runtime_1.jsx)(CurrentAgent_1.default, { agentId: activeAgentId, children: (0, jsx_runtime_1.jsx)(MessagesView_1.default, { className: "aigne-outputs aigne-simple-chat-outputs", flexGrow: 1, pb: 10 }) }), (0, jsx_runtime_1.jsx)(CurrentAgent_1.default, { agentId: activeAgentId, children: (0, jsx_runtime_1.jsx)(InputsView_1.default, { className: "aigne-inputs aigne-simple-chat-inputs", sx: {
+                        position: 'sticky',
+                        bottom: 0,
+                        p: 2,
+                        zIndex: 10,
+                        borderRadius: 1,
+                        bgcolor: (theme) => (0, material_1.alpha)(theme.palette.background.paper, 0.7),
+                        backdropFilter: 'blur(10px)',
+                    } }) })] }));
 }

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

@@ -4,18 +4,44 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
+const types_1 = require("@blocklet/ai-runtime/types");
 const material_1 = require("@mui/material");
-const MarkdownRenderer_1 = __importDefault(require("../../components/MarkdownRenderer"));
-const ShareActions_1 = __importDefault(require("../../components/ShareActions"));
+const react_1 = require("react");
+const CustomComponentRenderer_1 = __importDefault(require("../../../../../components/CustomComponentRenderer"));
+const constants_1 = require("../../constants");
+const CurrentAgent_1 = require("../../contexts/CurrentAgent");
 const CurrentMessage_1 = require("../../contexts/CurrentMessage");
-const MessageErrorView_1 = __importDefault(require("../ChatOutput/MessageErrorView"));
-const MessageMetadataRenderer_1 = __importDefault(require("../ChatOutput/MessageMetadataRenderer"));
+const ignoredOutputs = new Set([
+    types_1.RuntimeOutputVariable.appearancePage,
+    types_1.RuntimeOutputVariable.appearanceInput,
+    types_1.RuntimeOutputVariable.appearanceOutput,
+    types_1.RuntimeOutputVariable.openingQuestions,
+    types_1.RuntimeOutputVariable.openingMessage,
+]);
 function SimpleOutput() {
-    var _a, _b, _c;
     const { message } = (0, CurrentMessage_1.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 ((0, jsx_runtime_1.jsxs)(material_1.Stack, { gap: 2, boxShadow: 1, borderRadius: 1, p: 2, children: [(0, jsx_runtime_1.jsx)(MarkdownRenderer_1.default, { children: (_b = message.result) === null || _b === void 0 ? void 0 : _b.content }), error && (0, jsx_runtime_1.jsx)(MessageErrorView_1.default, { error: error }), objects === null || objects === void 0 ? void 0 : objects.map((item) => (0, jsx_runtime_1.jsx)(MessageMetadataRenderer_1.default, { object: item.data })), !isMessageLoading && ((_c = message.result) === null || _c === void 0 ? void 0 : _c.content) && ((0, jsx_runtime_1.jsx)(ShareActions_1.default, { direction: "row", justifyContent: "flex-end", sx: { mt: 2 } }))] }));
+    if (message.error)
+        throw message.error;
+    const { agent } = (0, CurrentAgent_1.useCurrentAgent)();
+    const outputs = (0, react_1.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 = (0, constants_1.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 ((0, jsx_runtime_1.jsx)(material_1.Stack, { gap: 2, children: outputs.map((output) => {
+            var _a, _b, _c, _d, _e;
+            const value = output.name === types_1.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 ((0, jsx_runtime_1.jsx)(CustomComponentRenderer_1.default, { instanceId: output.id, componentId: output.appearance.componentId, properties: output.appearance.componentProperties, props: {
+                    output,
+                    outputValue: value,
+                    writing: output.name === types_1.RuntimeOutputVariable.text && message.loading,
+                } }, output.id));
+        }) }));
 }
 exports.default = SimpleOutput;