@blocklet/pages-kit 0.2.296 → 0.2.297

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

@@ -3,6 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.RuntimeLocaleProvider = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const material_1 = require("@mui/material");
 const react_1 = __importDefault(require("react"));
@@ -13,10 +14,14 @@ const locales_1 = require("../locales");
 const GlobalLoading_1 = __importDefault(require("./GlobalLoading"));
 const ThemeProvider_1 = __importDefault(require("./ThemeProvider"));
 function RuntimeProvider({ children }) {
-    const { locale } = (0, locale_1.useLocaleContext)();
-    return ((0, jsx_runtime_1.jsx)(locale_1.LocaleProvider, { translations: locales_1.translations, locale: locale, fallbackLocale: "en", children: (0, jsx_runtime_1.jsx)(ThemeProvider_1.default, { children: (0, jsx_runtime_1.jsxs)(react_error_boundary_1.ErrorBoundary, { FallbackComponent: ErrorRender, children: [(0, jsx_runtime_1.jsx)(GlobalLoading_1.default, { sx: { position: 'fixed', left: 0, top: 0, width: '100%', zIndex: 'snackbar' } }), (0, jsx_runtime_1.jsx)(react_1.default.Suspense, { fallback: (0, jsx_runtime_1.jsx)(material_1.Stack, { flexGrow: 1, alignItems: "center", justifyContent: "center", children: (0, jsx_runtime_1.jsx)(material_1.CircularProgress, { size: 24 }) }), children: children })] }) }) }));
+    return ((0, jsx_runtime_1.jsx)(RuntimeLocaleProvider, { children: (0, jsx_runtime_1.jsx)(ThemeProvider_1.default, { children: (0, jsx_runtime_1.jsxs)(react_error_boundary_1.ErrorBoundary, { FallbackComponent: ErrorRender, children: [(0, jsx_runtime_1.jsx)(GlobalLoading_1.default, { sx: { position: 'fixed', left: 0, top: 0, width: '100%', zIndex: 'snackbar' } }), (0, jsx_runtime_1.jsx)(react_1.default.Suspense, { fallback: (0, jsx_runtime_1.jsx)(material_1.Stack, { flexGrow: 1, alignItems: "center", justifyContent: "center", children: (0, jsx_runtime_1.jsx)(material_1.CircularProgress, { size: 24 }) }), children: children })] }) }) }));
 }
 exports.default = RuntimeProvider;
 function ErrorRender({ error }) {
     return ((0, jsx_runtime_1.jsx)(ux_1.Result, { status: error.status || 'error', description: error.message, sx: { bgcolor: 'transparent', mt: '20%' } }));
 }
+function RuntimeLocaleProvider({ children }) {
+    const { locale } = (0, locale_1.useLocaleContext)();
+    return ((0, jsx_runtime_1.jsx)(locale_1.LocaleProvider, { translations: locales_1.translations, locale: locale, fallbackLocale: "en", children: children }));
+}
+exports.RuntimeLocaleProvider = RuntimeLocaleProvider;

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

@@ -0,0 +1,56 @@
+"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 });
+exports.UserTime = exports.UserName = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const DID_1 = __importDefault(require("@arcblock/ux/lib/DID"));
+const material_1 = require("@mui/material");
+const dayjs_1 = __importDefault(require("dayjs"));
+const react_1 = require("react");
+const ux_1 = require("../../../../arcblock/ux");
+function UserInfo(_a) {
+    var { avatar, showDID, did, name, time, children, reverse } = _a, restProps = __rest(_a, ["avatar", "showDID", "did", "name", "time", "children", "reverse"]);
+    return ((0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ className: "user-info", alignItems: "center", direction: reverse ? 'row-reverse' : 'row', gap: 1.5 }, restProps, { children: [(avatar || did) && ((0, jsx_runtime_1.jsx)(material_1.Box, { sx: {
+                    display: 'flex',
+                    alignItems: 'center',
+                    maxHeight: 44,
+                }, children: (0, jsx_runtime_1.jsx)(ux_1.Avatar, { size: 40, did: did, variant: "circle", shape: "circle", src: avatar }) })), (0, jsx_runtime_1.jsxs)(material_1.Box, { flex: 1, width: 0, children: [(0, jsx_runtime_1.jsxs)(UserName, { sx: {
+                            justifyContent: reverse ? 'flex-end' : 'flex-start',
+                        }, children: [name || '', time && ((0, jsx_runtime_1.jsx)(UserTime, { time: time, sx: {
+                                    fontSize: 12,
+                                    lineHeight: '24px',
+                                    color: 'text.secondary',
+                                } }))] }), showDID && did && (0, jsx_runtime_1.jsx)(material_1.Box, { component: DID_1.default, did: did, copyable: false, size: 14, responsive: true, sx: { mt: -0.25 } }), (0, jsx_runtime_1.jsx)(material_1.Box, { flex: 1, children: children })] })] })));
+}
+exports.default = UserInfo;
+function UserName(_a) {
+    var { children, sx } = _a, restProps = __rest(_a, ["children", "sx"]);
+    return ((0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ component: "div", noWrap: true, sx: Object.assign({ fontSize: 14, lineHeight: '24px', fontWeight: 500, display: 'flex', alignItems: 'center', gap: 1 }, sx) }, restProps, { children: children })));
+}
+exports.UserName = UserName;
+function UserTime(_a) {
+    var { time } = _a, restProps = __rest(_a, ["time"]);
+    const formattedTime = (0, react_1.useMemo)(() => {
+        const date = (0, dayjs_1.default)(time);
+        if (!date.isValid())
+            return undefined;
+        return date.isSame((0, dayjs_1.default)(), 'date') ? date.format('HH:mm') : date.format('YYYY-MM-DD HH:mm');
+    }, [time]);
+    if (!formattedTime)
+        return null;
+    return ((0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({}, restProps, { children: formattedTime }), "user-time"));
+}
+exports.UserTime = UserTime;

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

@@ -43,6 +43,7 @@ const image_preview_1 = __importDefault(require("@blocklet/ai-kit/components/ima
 const css_1 = require("@emotion/css");
 const material_1 = require("@mui/material");
 const dayjs_1 = __importDefault(require("dayjs"));
+const isEmpty_1 = __importDefault(require("lodash/isEmpty"));
 const react_1 = __importStar(require("react"));
 const ux_1 = require("../../../../../../arcblock/ux");
 const session_1 = require("../../../../../../session");
@@ -55,13 +56,23 @@ const MessageItemView = (0, react_1.memo)((_a) => {
     var _b;
     var { message, hideAvatar } = _a, props = __rest(_a, ["message", "hideAvatar"]);
     const showUserMessage = !!((_b = message.parameters) === null || _b === void 0 ? void 0 : _b.question);
-    return ((0, jsx_runtime_1.jsxs)(MessageItemContainer, Object.assign({}, props, { className: (0, css_1.cx)('ai-chat-message-item', hideAvatar && 'hide-avatar', props.className), children: [showUserMessage && (0, jsx_runtime_1.jsx)(UserMessage, { message: message }), (0, jsx_runtime_1.jsx)(AgentMessage, { message: message, hideAvatar: hideAvatar })] })));
+    return ((0, jsx_runtime_1.jsxs)(MessageItemContainer, Object.assign({}, props, { className: (0, css_1.cx)('ai-chat-message-item', hideAvatar && 'hide-avatar', props.className), children: [showUserMessage && !(0, isEmpty_1.default)(message.parameters) && (0, jsx_runtime_1.jsx)(UserMessage, { message: message, hideAvatar: hideAvatar }), !(0, isEmpty_1.default)(message.result) && (0, jsx_runtime_1.jsx)(AgentMessage, { message: message, hideAvatar: hideAvatar })] })));
 });
 exports.default = MessageItemView;
 const MessageItemContainer = (0, material_1.styled)(material_1.Stack) `
   gap: ${({ theme }) => theme.spacing(2.5)};
   overflow: hidden;
 
+  &.hide-avatar {
+    .message-question {
+      border-top-right-radius: ${({ theme }) => theme.shape.borderRadius}px;
+    }
+
+    .message-response {
+      border-top-left-radius: ${({ theme }) => theme.shape.borderRadius}px;
+    }
+  }
+
   .message-question {
     position: relative;
     border-radius: ${({ theme }) => theme.shape.borderRadius}px;
@@ -71,10 +82,6 @@ const MessageItemContainer = (0, material_1.styled)(material_1.Stack) `
     // without logo width
     max-width: calc(100% - 40px);
     background-color: rgba(239, 246, 255, 1);
-
-    &.hide-avatar {
-      border-top-right-radius: ${({ theme }) => theme.shape.borderRadius}px;
-    }
   }
 
   .message-response {
@@ -85,14 +92,11 @@ const MessageItemContainer = (0, material_1.styled)(material_1.Stack) `
     margin-top: ${({ theme }) => theme.spacing(0.5)};
     // without logo width
     max-width: calc(100% - 40px);
+    display: inline-flex;
     background-color: rgba(229, 231, 235, 1);
-
-    &.hide-avatar {
-      border-top-left-radius: ${({ theme }) => theme.shape.borderRadius}px;
-    }
   }
 `;
-function UserMessage({ message }) {
+function UserMessage({ message, hideAvatar }) {
     var _a, _b, _c, _d;
     const { session: authSession } = (0, session_1.useSessionContext)();
     return ((0, jsx_runtime_1.jsxs)(material_1.Stack, { className: "ai-chat-message-user", direction: "row", gap: 1.5, sx: {
@@ -100,11 +104,11 @@ function UserMessage({ message }) {
             flexDirection: 'row-reverse',
             textAlign: 'right',
             justifyContent: 'flex-end',
-        }, children: [(0, jsx_runtime_1.jsx)(material_1.Box, { children: (0, jsx_runtime_1.jsx)(ux_1.Avatar, { size: 40, src: (_a = authSession.user) === null || _a === void 0 ? void 0 : _a.avatar, did: (_b = authSession.user) === null || _b === void 0 ? void 0 : _b.did, variant: "circle", shape: "circle" }) }), (0, jsx_runtime_1.jsxs)(material_1.Stack, { flex: 1, overflow: "hidden", sx: {
+        }, children: [!hideAvatar && ((0, jsx_runtime_1.jsx)(material_1.Box, { children: (0, jsx_runtime_1.jsx)(ux_1.Avatar, { size: 40, src: (_a = authSession.user) === null || _a === void 0 ? void 0 : _a.avatar, did: (_b = authSession.user) === null || _b === void 0 ? void 0 : _b.did, variant: "circle", shape: "circle" }) })), (0, jsx_runtime_1.jsxs)(material_1.Stack, { flex: 1, overflow: "hidden", sx: {
                     display: 'flex',
                     flexDirection: 'column',
                     alignItems: 'flex-end',
-                }, children: [(0, jsx_runtime_1.jsxs)(MessageUserName, { children: [(_c = authSession.user) === null || _c === void 0 ? void 0 : _c.fullName, (0, jsx_runtime_1.jsx)(MessageTime, { time: message.createdAt })] }), (0, jsx_runtime_1.jsx)(material_1.Box, { className: "message-question", sx: { whiteSpace: 'pre-wrap', wordBreak: 'break-word', textAlign: 'left' }, children: (_d = message.parameters) === null || _d === void 0 ? void 0 : _d.question })] })] }));
+                }, children: [!hideAvatar && ((0, jsx_runtime_1.jsxs)(MessageUserName, { children: [(_c = authSession.user) === null || _c === void 0 ? void 0 : _c.fullName, (0, jsx_runtime_1.jsx)(MessageTime, { time: message.createdAt })] })), (0, jsx_runtime_1.jsx)(material_1.Box, { className: "message-question", sx: { whiteSpace: 'pre-wrap', wordBreak: 'break-word', textAlign: 'left' }, children: (_d = message.parameters) === null || _d === void 0 ? void 0 : _d.question })] })] }));
 }
 function AgentMessage({ message, hideAvatar }) {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;

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

@@ -4,10 +4,21 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
 const CurrentMessage_1 = require("../../contexts/CurrentMessage");
 const MessageItemView_1 = __importDefault(require("./MessageItemView"));
-function ChatOutput() {
+// default hideAvatar to true, only show message when polish agent layout
+function ChatOutput({ hideAvatar = true, renderType, }) {
     const { message } = (0, CurrentMessage_1.useCurrentMessage)();
-    return (0, jsx_runtime_1.jsx)(MessageItemView_1.default, { message: message });
+    const formattedMessage = (0, react_1.useMemo)(() => {
+        if (renderType) {
+            return Object.assign({}, message, {
+                result: renderType === 'parameters' ? {} : message.result,
+                parameters: renderType === 'result' ? {} : message.parameters,
+            });
+        }
+        return message;
+    }, [message, renderType]);
+    return (0, jsx_runtime_1.jsx)(MessageItemView_1.default, { message: formattedMessage, hideAvatar: hideAvatar });
 }
 exports.default = ChatOutput;

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

@@ -27,7 +27,6 @@ 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 lab_1 = require("@mui/lab");
 const material_1 = require("@mui/material");
 const react_1 = require("react");
@@ -40,12 +39,7 @@ const CurrentMessage_1 = __importDefault(require("../../contexts/CurrentMessage"
 const runtime_1 = require("../../state/runtime");
 const map_right_1 = __importDefault(require("../../utils/map-right"));
 function PhotoGallery({ resultTitle, background, primaryColor, }) {
-    var _a;
-    const { appearancePage, agent } = (0, runtime_1.useRuntimeState)();
-    const children = (0, react_1.useMemo)(() => {
-        var _a, _b;
-        return (_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;
-    }, [agent]);
+    const { agent, appearancePage, childAgentId } = (0, runtime_1.useRuntimeState)();
     const inheritedTheme = (0, material_1.useTheme)();
     const theme = (0, react_1.useMemo)(() => {
         let { primary } = inheritedTheme.palette;
@@ -64,7 +58,9 @@ function PhotoGallery({ resultTitle, background, primaryColor, }) {
             },
         });
     }, [inheritedTheme, primaryColor]);
-    return ((0, jsx_runtime_1.jsx)(material_1.ThemeProvider, { theme: theme, children: (0, jsx_runtime_1.jsxs)(Root, { className: "photo-wall-root", sx: { backgroundImage: `url(${background})` }, children: [(0, jsx_runtime_1.jsx)(material_1.Stack, { className: "photo-wall-header", children: (0, jsx_runtime_1.jsxs)(react_wrap_balancer_1.Provider, { children: [(appearancePage === null || appearancePage === void 0 ? void 0 : appearancePage.name) && ((0, jsx_runtime_1.jsx)(material_1.Typography, { component: "h2", fontSize: 48, fontWeight: 700, textAlign: "center", children: (0, jsx_runtime_1.jsx)(react_wrap_balancer_1.default, { children: appearancePage.name }) })), (appearancePage === null || appearancePage === void 0 ? void 0 : appearancePage.description) && ((0, jsx_runtime_1.jsx)(material_1.Typography, { fontSize: 20, textAlign: "center", children: (0, jsx_runtime_1.jsx)(react_wrap_balancer_1.default, { children: appearancePage.description }) }))] }) }), (0, jsx_runtime_1.jsx)(material_1.Stack, { className: "photo-wall-input", children: (_a = children === null || children === void 0 ? void 0 : children.agents) === null || _a === void 0 ? void 0 : _a.map((i) => ((0, jsx_runtime_1.jsx)(CurrentAgent_1.default, { agentId: i.id, children: (0, jsx_runtime_1.jsx)(AgentInputRender, {}) }, i.id))) }), (0, jsx_runtime_1.jsxs)(material_1.Stack, { className: "photo-wall-output", gap: 2, children: [resultTitle && ((0, jsx_runtime_1.jsx)(material_1.Typography, { component: "h2", fontSize: 48, fontWeight: 700, textAlign: "center", children: (0, jsx_runtime_1.jsx)(react_wrap_balancer_1.default, { children: resultTitle }) })), (0, jsx_runtime_1.jsx)(OutputView, {})] })] }) }));
+    const title = (appearancePage === null || appearancePage === void 0 ? void 0 : appearancePage.name) || agent.name;
+    const description = (appearancePage === null || appearancePage === void 0 ? void 0 : appearancePage.description) || agent.description;
+    return ((0, jsx_runtime_1.jsx)(material_1.ThemeProvider, { theme: theme, children: (0, jsx_runtime_1.jsxs)(Root, { className: "photo-wall-root", sx: { backgroundImage: `url(${background})` }, children: [(0, jsx_runtime_1.jsx)(material_1.Stack, { className: "photo-wall-header", children: (0, jsx_runtime_1.jsxs)(react_wrap_balancer_1.Provider, { children: [title && ((0, jsx_runtime_1.jsx)(material_1.Typography, { component: "h2", fontSize: 48, fontWeight: 700, textAlign: "center", children: (0, jsx_runtime_1.jsx)(react_wrap_balancer_1.default, { children: title }) })), description && ((0, jsx_runtime_1.jsx)(material_1.Typography, { fontSize: 20, textAlign: "center", children: (0, jsx_runtime_1.jsx)(react_wrap_balancer_1.default, { children: description }) }))] }) }), (0, jsx_runtime_1.jsx)(material_1.Stack, { className: "photo-wall-input", children: (0, jsx_runtime_1.jsx)(CurrentAgent_1.default, { agentId: childAgentId, children: (0, jsx_runtime_1.jsx)(AgentInputRender, {}) }) }), (0, jsx_runtime_1.jsxs)(material_1.Stack, { className: "photo-wall-output", gap: 2, children: [resultTitle && ((0, jsx_runtime_1.jsx)(material_1.Typography, { component: "h2", fontSize: 48, fontWeight: 700, textAlign: "center", children: (0, jsx_runtime_1.jsx)(react_wrap_balancer_1.default, { children: resultTitle }) })), (0, jsx_runtime_1.jsx)(OutputView, {})] })] }) }));
 }
 exports.default = PhotoGallery;
 const Root = (0, material_1.styled)(material_1.Stack)(({ theme }) => theme.unstable_sx({
@@ -100,12 +96,10 @@ const Root = (0, material_1.styled)(material_1.Stack)(({ theme }) => theme.unsta
     },
 }));
 function AgentInputRender() {
-    var _a, _b;
-    const { agent } = (0, CurrentAgent_1.useCurrentAgent)();
-    const input = (_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;
-    if (!(input === null || input === void 0 ? void 0 : input.componentId))
+    const { appearanceInput } = (0, CurrentAgent_1.useCurrentAgent)();
+    if (!(appearanceInput === null || appearanceInput === void 0 ? void 0 : appearanceInput.componentId))
         return null;
-    return ((0, jsx_runtime_1.jsx)(material_1.Stack, { children: (0, jsx_runtime_1.jsx)(CustomComponentRenderer_1.default, { componentId: input.componentId, properties: input.componentProps }) }));
+    return ((0, jsx_runtime_1.jsx)(material_1.Stack, { children: (0, jsx_runtime_1.jsx)(CustomComponentRenderer_1.default, { componentId: appearanceInput.componentId, properties: appearanceInput.componentProps }) }));
 }
 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." }) }));
@@ -120,10 +114,8 @@ function OutputView() {
                         } })), (0, map_right_1.default)((_d = sessionState.messages) !== null && _d !== void 0 ? _d : [], (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: !!((_e = sessionState.messages) === null || _e === void 0 ? void 0 : _e.length) && !sessionState.noMoreMessage && ((0, jsx_runtime_1.jsx)(LoadingButton_1.default, { variant: "outlined", onClick: sessionState.loadMoreMessages, children: t('loadMore') })) })] }));
 }
 function OutputItemView() {
-    var _a, _b;
-    const { agent } = (0, CurrentAgent_1.useCurrentAgent)();
-    const input = (_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;
-    if (!(input === null || input === void 0 ? void 0 : input.componentId))
+    const { appearanceOutput } = (0, CurrentAgent_1.useCurrentAgent)();
+    if (!(appearanceOutput === null || appearanceOutput === void 0 ? void 0 : appearanceOutput.componentId))
         return null;
-    return (0, jsx_runtime_1.jsx)(CustomComponentRenderer_1.default, { componentId: input.componentId, properties: input.componentProps });
+    return ((0, jsx_runtime_1.jsx)(CustomComponentRenderer_1.default, { componentId: appearanceOutput.componentId, properties: appearanceOutput.componentProps }));
 }

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

@@ -10,14 +10,20 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     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 react_1 = require("@iconify/react");
 const material_1 = require("@mui/material");
 const react_2 = require("react");
+const ux_1 = require("../../../../../../arcblock/ux");
 const locale_1 = require("../../../../../../locale");
+const session_1 = require("../../../../../../session");
 const ActionButton_1 = require("../../../ActionButton");
+const UserInfo_1 = __importDefault(require("../../../common/UserInfo"));
 const CurrentMessage_1 = require("../../contexts/CurrentMessage");
 const getLineClamp = (line) => ({
     display: '-webkit-box',
@@ -73,12 +79,17 @@ function PhotoGalleryItem() {
     });
 }
 exports.default = PhotoGalleryItem;
+function RenderSubTitle({ children }) {
+    return ((0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "caption", sx: { fontSize: 14 }, children: children }));
+}
 function PromptDialog(_a) {
+    var _b, _c, _d;
     var { url } = _a, props = __rest(_a, ["url"]);
     const { message } = (0, CurrentMessage_1.useCurrentMessage)();
     const { parameters } = message;
-    const theme = (0, material_1.useTheme)();
     const { t } = (0, locale_1.useLocaleContext)();
+    const { session: authSession } = (0, session_1.useSessionContext)();
+    const borderRadius = 1;
     return ((0, jsx_runtime_1.jsxs)(material_1.Dialog, Object.assign({ fullWidth: true, maxWidth: false, scroll: "paper", slotProps: {
             backdrop: {
                 sx: {
@@ -86,32 +97,35 @@ function PromptDialog(_a) {
                     backdropFilter: 'blur(12px)',
                 },
             },
-        } }, props, { children: [(0, jsx_runtime_1.jsx)(material_1.Box, { sx: { position: 'absolute', right: 0, top: 0, p: 0.5 }, children: (0, jsx_runtime_1.jsx)(material_1.Button, { onClick: (e) => { var _a; return (_a = props.onClose) === null || _a === void 0 ? void 0 : _a.call(props, e, 'backdropClick'); }, variant: "contained", disableElevation: true, sx: {
-                        bgcolor: (theme) => (0, material_1.alpha)(theme.palette.primary.light, 0.2),
-                        minWidth: 32,
-                        minHeight: 32,
-                        p: 0,
-                        fontSize: 22,
-                        color: 'primary.main',
-                        ':hover': {
-                            bgcolor: (theme) => (0, material_1.alpha)(theme.palette.primary.light, 0.3),
-                        },
-                    }, children: (0, jsx_runtime_1.jsx)(react_1.Icon, { icon: "tabler:x" }) }) }), (0, jsx_runtime_1.jsx)(material_1.DialogContent, { children: (0, jsx_runtime_1.jsxs)(material_1.Stack, { gap: 4, sx: { flexDirection: { md: 'row' } }, children: [(0, jsx_runtime_1.jsxs)(material_1.Stack, { sx: { flex: 3, width: { xs: '100%', md: 0 }, gap: 1 }, children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { component: "h5", sx: { fontSize: 24, fontWeight: 700, color: 'primary.main' }, children: t('photoWall.dialog.title') }), (0, jsx_runtime_1.jsx)(material_1.Box, { component: "img", src: url, alt: "", loading: "lazy", sx: {
-                                        display: 'block',
-                                        width: '100%',
-                                        borderRadius: 1,
-                                    } })] }), (0, jsx_runtime_1.jsxs)(material_1.Stack, { sx: { flex: 2, width: { xs: '100%', md: 0 }, gap: 1 }, children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { component: "h5", sx: { fontSize: 24, fontWeight: 700, color: 'primary.main' }, children: t('photoWall.dialog.prompt') }), (0, jsx_runtime_1.jsx)(material_1.Box, { sx: {
-                                        p: 2,
-                                        borderRadius: 1,
-                                        background: (theme) => `linear-gradient(to top, ${(0, material_1.alpha)(theme.palette.primary.light, 0.5)}, ${(0, material_1.alpha)(theme.palette.primary.light, 0.1)})`,
-                                    }, children: (0, jsx_runtime_1.jsx)(material_1.Box, { sx: {
-                                            backgroundColor: 'rgba(255,255,255,0.2)',
-                                            borderRadius: 1,
-                                            p: 1,
-                                            fontSize: 16,
-                                        }, 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.ActionButton, { autoReset: true, size: "small", variant: "contained", placement: "right", tip: t('copyToClipboard'), title: t('copy'), titleSucceed: t('copied'), icon: "tabler:copy", iconSucceed: "tabler:copy-check-filled", onClick: () => {
+        } }, props, { children: [(0, jsx_runtime_1.jsxs)(material_1.DialogTitle, { sx: {
+                    display: 'flex',
+                    justifyContent: 'space-between',
+                }, children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { component: "h5", sx: { fontSize: 24, fontWeight: 700, color: 'primary.main' }, children: t('photoWall.dialog.title') }), (0, jsx_runtime_1.jsx)(material_1.Box, { children: (0, jsx_runtime_1.jsx)(material_1.Button, { onClick: (e) => { var _a; return (_a = props.onClose) === null || _a === void 0 ? void 0 : _a.call(props, e, 'backdropClick'); }, variant: "contained", disableElevation: true, sx: {
+                                bgcolor: (theme) => (0, material_1.alpha)(theme.palette.primary.light, 0.2),
+                                minWidth: 32,
+                                minHeight: 32,
+                                p: 0,
+                                fontSize: 22,
+                                color: 'primary.main',
+                                ':hover': {
+                                    bgcolor: (theme) => (0, material_1.alpha)(theme.palette.primary.light, 0.3),
+                                },
+                            }, children: (0, jsx_runtime_1.jsx)(react_1.Icon, { icon: "tabler:x" }) }) })] }), (0, jsx_runtime_1.jsx)(material_1.DialogContent, { children: (0, jsx_runtime_1.jsxs)(material_1.Stack, { gap: 2.5, sx: { flexDirection: { md: 'row' } }, children: [(0, jsx_runtime_1.jsx)(material_1.Stack, { sx: { flex: 3, width: { xs: '100%', md: 0 }, gap: 1 }, children: (0, jsx_runtime_1.jsx)(material_1.Box, { component: "img", src: url, alt: "", loading: "lazy", sx: {
+                                    display: 'block',
+                                    width: '100%',
+                                    borderRadius,
+                                } }) }), (0, jsx_runtime_1.jsxs)(material_1.Stack, { sx: { flex: 2, width: { xs: '100%', md: 0 }, gap: 1 }, children: [(0, jsx_runtime_1.jsx)(RenderSubTitle, { children: t('photoWall.dialog.author') }), (0, jsx_runtime_1.jsx)(UserInfo_1.default, { showDID: true, 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 }), (0, jsx_runtime_1.jsx)(material_1.Box, {}), (0, jsx_runtime_1.jsx)(material_1.Box, { sx: { fontSize: 14, color: 'text.secondary' }, children: (0, jsx_runtime_1.jsx)(ux_1.RelativeTime, { value: message.createdAt }) }), (0, jsx_runtime_1.jsx)(material_1.Box, {}), (0, jsx_runtime_1.jsx)(RenderSubTitle, { children: t('photoWall.dialog.prompt') }), (0, jsx_runtime_1.jsx)(material_1.Box, { sx: {
+                                        backgroundColor: 'background.paper',
+                                        borderRadius,
+                                        p: 1,
+                                        fontSize: 16,
+                                        border: 1,
+                                        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.ActionButton, { autoReset: true, size: "small", variant: "contained", placement: "right", tip: t('copyToClipboard'), title: t('copy'), titleSucceed: t('copied'), icon: "tabler:copy", iconSucceed: "tabler:copy-check-filled", onClick: () => {
                                             window.navigator.clipboard.writeText(parameters === null || parameters === void 0 ? void 0 : parameters.question);
                                         }, sx: {
-                                            borderRadius: theme.shape.borderRadius,
+                                            borderRadius,
                                         } }) })] })] }) })] })));
 }

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

@@ -32,7 +32,9 @@ const material_1 = require("@mui/material");
 const react_1 = require("react");
 const react_wrap_balancer_1 = __importStar(require("react-wrap-balancer"));
 const CustomComponentRenderer_1 = __importDefault(require("../../../../../../../components/CustomComponentRenderer"));
+const session_1 = require("../../../../../../session");
 const common_1 = require("../../../common");
+const UserInfo_1 = __importDefault(require("../../../common/UserInfo"));
 const ScrollView_1 = __importStar(require("../../../ScrollView"));
 const CurrentAgent_1 = __importStar(require("../../contexts/CurrentAgent"));
 const CurrentMessage_1 = __importStar(require("../../contexts/CurrentMessage"));
@@ -60,26 +62,21 @@ function SimpleChat({ primaryColor }) {
 }
 exports.default = SimpleChat;
 function SimpleChatView() {
-    var _a;
-    const { agent, appearancePage, sessionState } = (0, runtime_1.useRuntimeState)();
+    const { agent, childAgentId, appearancePage, sessionState } = (0, runtime_1.useRuntimeState)();
     const scrollToBottom = (0, ScrollView_1.useScrollToBottomModule)().useScrollToBottom();
     (0, react_1.useEffect)(() => {
         if (sessionState.running)
             scrollToBottom();
     }, [scrollToBottom, sessionState.running]);
-    const children = (0, react_1.useMemo)(() => {
-        var _a, _b;
-        return (_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;
-    }, [agent]);
-    return ((0, jsx_runtime_1.jsxs)(material_1.Stack, { flexGrow: 1, maxWidth: "md", width: "100%", mx: "auto", px: { xs: 2, sm: 3 }, children: [(0, jsx_runtime_1.jsx)(material_1.Stack, { gap: 2, mt: 8, mb: 4, children: (0, jsx_runtime_1.jsxs)(react_wrap_balancer_1.Provider, { children: [(appearancePage === null || appearancePage === void 0 ? void 0 : appearancePage.name) && ((0, jsx_runtime_1.jsx)(material_1.Typography, { component: "h5", fontSize: 30, fontWeight: 700, textAlign: "center", children: (0, jsx_runtime_1.jsx)(react_wrap_balancer_1.default, { children: appearancePage.name }) })), (appearancePage === null || appearancePage === void 0 ? void 0 : appearancePage.description) && ((0, jsx_runtime_1.jsx)(material_1.Typography, { textAlign: "center", children: (0, jsx_runtime_1.jsx)(react_wrap_balancer_1.default, { children: appearancePage.description }) }))] }) }), (0, jsx_runtime_1.jsx)(material_1.Stack, { children: (0, jsx_runtime_1.jsx)(OutputView, {}) }), (0, jsx_runtime_1.jsx)(material_1.Box, { flexGrow: 1, minHeight: 200 }), (0, jsx_runtime_1.jsx)(material_1.Stack, { sx: { position: 'sticky', bottom: 0, py: 1, bgcolor: 'background.paper', zIndex: 10 }, children: (_a = children === null || children === void 0 ? void 0 : children.agents) === null || _a === void 0 ? void 0 : _a.map((i) => ((0, jsx_runtime_1.jsx)(CurrentAgent_1.default, { agentId: i.id, children: (0, jsx_runtime_1.jsx)(AgentInputRender, {}) }, i.id))) })] }));
+    const title = (appearancePage === null || appearancePage === void 0 ? void 0 : appearancePage.name) || agent.name;
+    const description = (appearancePage === null || appearancePage === void 0 ? void 0 : appearancePage.description) || agent.description;
+    return ((0, jsx_runtime_1.jsxs)(material_1.Stack, { flexGrow: 1, maxWidth: "md", width: "100%", mx: "auto", px: { xs: 2, sm: 3 }, children: [(0, jsx_runtime_1.jsx)(material_1.Stack, { gap: 2, mt: 8, mb: 4, children: (0, jsx_runtime_1.jsxs)(react_wrap_balancer_1.Provider, { children: [title && ((0, jsx_runtime_1.jsx)(material_1.Typography, { component: "h5", fontSize: 30, fontWeight: 700, textAlign: "center", children: (0, jsx_runtime_1.jsx)(react_wrap_balancer_1.default, { children: title }) })), description && ((0, jsx_runtime_1.jsx)(material_1.Typography, { textAlign: "center", children: (0, jsx_runtime_1.jsx)(react_wrap_balancer_1.default, { children: description }) }))] }) }), (0, jsx_runtime_1.jsx)(material_1.Stack, { children: (0, jsx_runtime_1.jsx)(OutputView, {}) }), (0, jsx_runtime_1.jsx)(material_1.Box, { flexGrow: 1, minHeight: 200 }), (0, jsx_runtime_1.jsx)(material_1.Stack, { sx: { position: 'sticky', bottom: 0, py: 1, bgcolor: 'background.paper', zIndex: 10 }, children: (0, jsx_runtime_1.jsx)(CurrentAgent_1.default, { agentId: childAgentId, children: (0, jsx_runtime_1.jsx)(AgentInputRender, {}) }) })] }));
 }
 function AgentInputRender() {
-    var _a, _b;
-    const { agent } = (0, CurrentAgent_1.useCurrentAgent)();
-    const input = (_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;
-    if (!(input === null || input === void 0 ? void 0 : input.componentId))
+    const { appearanceInput } = (0, CurrentAgent_1.useCurrentAgent)();
+    if (!(appearanceInput === null || appearanceInput === void 0 ? void 0 : appearanceInput.componentId))
         return null;
-    return ((0, jsx_runtime_1.jsx)(material_1.Stack, { children: (0, jsx_runtime_1.jsx)(CustomComponentRenderer_1.default, { componentId: input.componentId, properties: input.componentProps }) }));
+    return ((0, jsx_runtime_1.jsx)(material_1.Stack, { children: (0, jsx_runtime_1.jsx)(CustomComponentRenderer_1.default, { componentId: appearanceInput.componentId, properties: appearanceInput.componentProps }) }));
 }
 function OutputView() {
     var _a, _b;
@@ -88,12 +85,19 @@ function OutputView() {
     return ((0, jsx_runtime_1.jsxs)(material_1.Stack, { gap: 2, children: [(_b = sessionState.messages) === null || _b === void 0 ? void 0 : _b.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, {}) }) }))] }));
 }
 function OutputItemView() {
-    var _a, _b;
-    const { agent } = (0, CurrentAgent_1.useCurrentAgent)();
-    const input = (_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;
-    if (!(input === null || input === void 0 ? void 0 : input.componentId))
+    var _a, _b, _c, _d, _e;
+    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.jsx)(CustomComponentRenderer_1.default, { componentId: input.componentId, properties: input.componentProps });
+    // return <CustomComponentRenderer componentId={input.componentId} properties={input.componentProps} props={{hideAvatar: false}} />;
+    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() {
     const { execute } = (0, runtime_1.useRuntimeState)();

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

@@ -8,10 +8,10 @@ const material_1 = require("@mui/material");
 const common_1 = require("../../../common");
 const MarkdownRenderer_1 = __importDefault(require("../../../MarkdownRenderer"));
 const CurrentMessage_1 = require("../../contexts/CurrentMessage");
-function BaseOutputs() {
+function SimpleOutput() {
     var _a, _b;
     const { message } = (0, CurrentMessage_1.useCurrentMessage)();
     const objects = (_a = message.result) === null || _a === void 0 ? void 0 : _a.objects;
     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 }), objects === null || objects === void 0 ? void 0 : objects.map((item) => (0, jsx_runtime_1.jsx)(common_1.MessageMetadataRenderer, { object: item.data }))] }));
 }
-exports.default = BaseOutputs;
+exports.default = SimpleOutput;

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

@@ -27,7 +27,6 @@ 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 react_1 = require("react");
 const react_wrap_balancer_1 = __importStar(require("react-wrap-balancer"));
@@ -36,12 +35,7 @@ const CurrentAgent_1 = __importStar(require("../../contexts/CurrentAgent"));
 const CurrentMessage_1 = __importDefault(require("../../contexts/CurrentMessage"));
 const runtime_1 = require("../../state/runtime");
 function SimplePage({ resultTitle, primaryColor }) {
-    var _a;
-    const { agent, appearancePage } = (0, runtime_1.useRuntimeState)();
-    const children = (0, react_1.useMemo)(() => {
-        var _a, _b;
-        return (_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;
-    }, [agent]);
+    const { agent, appearancePage, childAgentId } = (0, runtime_1.useRuntimeState)();
     const inheritedTheme = (0, material_1.useTheme)();
     const theme = (0, react_1.useMemo)(() => {
         let { primary } = inheritedTheme.palette;
@@ -60,16 +54,16 @@ function SimplePage({ resultTitle, primaryColor }) {
             },
         });
     }, [inheritedTheme, primaryColor]);
-    return ((0, jsx_runtime_1.jsx)(material_1.ThemeProvider, { theme: theme, children: (0, jsx_runtime_1.jsxs)(material_1.Stack, { gap: 2, maxWidth: "md", width: "100%", mx: "auto", px: { xs: 2, sm: 3 }, children: [(0, jsx_runtime_1.jsx)(material_1.Stack, { gap: 2, mt: 8, mb: 4, children: (0, jsx_runtime_1.jsxs)(react_wrap_balancer_1.Provider, { children: [(appearancePage === null || appearancePage === void 0 ? void 0 : appearancePage.name) && ((0, jsx_runtime_1.jsx)(material_1.Typography, { component: "h5", fontSize: 30, fontWeight: 700, textAlign: "center", children: (0, jsx_runtime_1.jsx)(react_wrap_balancer_1.default, { children: appearancePage.name }) })), (appearancePage === null || appearancePage === void 0 ? void 0 : appearancePage.description) && ((0, jsx_runtime_1.jsx)(material_1.Typography, { textAlign: "center", children: (0, jsx_runtime_1.jsx)(react_wrap_balancer_1.default, { children: appearancePage.description }) }))] }) }), (0, jsx_runtime_1.jsx)(material_1.Stack, { children: (_a = children === null || children === void 0 ? void 0 : children.agents) === null || _a === void 0 ? void 0 : _a.map((i) => ((0, jsx_runtime_1.jsx)(CurrentAgent_1.default, { agentId: i.id, children: (0, jsx_runtime_1.jsx)(AgentInputRender, {}) }, i.id))) }), (0, jsx_runtime_1.jsx)(material_1.Stack, { children: (0, jsx_runtime_1.jsx)(OutputView, { resultTitle: resultTitle }) })] }) }));
+    const title = (appearancePage === null || appearancePage === void 0 ? void 0 : appearancePage.name) || agent.name;
+    const description = (appearancePage === null || appearancePage === void 0 ? void 0 : appearancePage.description) || agent.description;
+    return ((0, jsx_runtime_1.jsx)(material_1.ThemeProvider, { theme: theme, children: (0, jsx_runtime_1.jsxs)(material_1.Stack, { gap: 2, maxWidth: "md", width: "100%", mx: "auto", px: { xs: 2, sm: 3 }, children: [(0, jsx_runtime_1.jsx)(material_1.Stack, { gap: 2, mt: 8, mb: 4, children: (0, jsx_runtime_1.jsxs)(react_wrap_balancer_1.Provider, { children: [title && ((0, jsx_runtime_1.jsx)(material_1.Typography, { component: "h5", fontSize: 30, fontWeight: 700, textAlign: "center", children: (0, jsx_runtime_1.jsx)(react_wrap_balancer_1.default, { children: title }) })), description && ((0, jsx_runtime_1.jsx)(material_1.Typography, { textAlign: "center", children: (0, jsx_runtime_1.jsx)(react_wrap_balancer_1.default, { children: description }) }))] }) }), (0, jsx_runtime_1.jsx)(material_1.Stack, { children: (0, jsx_runtime_1.jsx)(CurrentAgent_1.default, { agentId: childAgentId, children: (0, jsx_runtime_1.jsx)(AgentInputRender, {}) }) }), (0, jsx_runtime_1.jsx)(material_1.Stack, { children: (0, jsx_runtime_1.jsx)(OutputView, { resultTitle: resultTitle }) })] }) }));
 }
 exports.default = SimplePage;
 function AgentInputRender() {
-    var _a, _b;
-    const { agent } = (0, CurrentAgent_1.useCurrentAgent)();
-    const input = (_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;
-    if (!(input === null || input === void 0 ? void 0 : input.componentId))
+    const { appearanceInput } = (0, CurrentAgent_1.useCurrentAgent)();
+    if (!(appearanceInput === null || appearanceInput === void 0 ? void 0 : appearanceInput.componentId))
         return null;
-    return ((0, jsx_runtime_1.jsx)(material_1.Stack, { children: (0, jsx_runtime_1.jsx)(CustomComponentRenderer_1.default, { componentId: input.componentId, properties: input.componentProps }) }));
+    return ((0, jsx_runtime_1.jsx)(material_1.Stack, { children: (0, jsx_runtime_1.jsx)(CustomComponentRenderer_1.default, { componentId: appearanceInput.componentId, properties: appearanceInput.componentProps }) }));
 }
 function OutputView({ resultTitle }) {
     var _a;
@@ -78,10 +72,8 @@ function OutputView({ resultTitle }) {
     return ((0, jsx_runtime_1.jsx)(material_1.Stack, { gap: 2, children: lastMessage && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.Stack, { children: resultTitle && ((0, jsx_runtime_1.jsx)(material_1.Typography, { 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, {}) }) }) }) })] })) }));
 }
 function OutputItemView() {
-    var _a, _b;
-    const { agent } = (0, CurrentAgent_1.useCurrentAgent)();
-    const input = (_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;
-    if (!(input === null || input === void 0 ? void 0 : input.componentId))
+    const { appearanceOutput } = (0, CurrentAgent_1.useCurrentAgent)();
+    if (!(appearanceOutput === null || appearanceOutput === void 0 ? void 0 : appearanceOutput.componentId))
         return null;
-    return (0, jsx_runtime_1.jsx)(CustomComponentRenderer_1.default, { componentId: input.componentId, properties: input.componentProps });
+    return ((0, jsx_runtime_1.jsx)(CustomComponentRenderer_1.default, { componentId: appearanceOutput.componentId, properties: appearanceOutput.componentProps }));
 }

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

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DEFAULT_OUTPUT_COMPONENT_ID = exports.DEFAULT_INPUT_COMPONENT_ID = exports.DEFAULT_PAGE_COMPONENT_ID = void 0;
+exports.DEFAULT_PAGE_COMPONENT_ID = 'ctnxha29uu8cx4xv';
+exports.DEFAULT_INPUT_COMPONENT_ID = '1wwtemqcdio6nqf0';
+exports.DEFAULT_OUTPUT_COMPONENT_ID = 'q0ckknkxph4hfwas';

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

@@ -2,8 +2,10 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useCurrentAgent = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const types_1 = require("@blocklet/ai-runtime/types");
 const react_1 = require("react");
 const utils_1 = require("../../../utils");
+const constants_1 = require("../constants");
 const assistant_1 = require("../state/assistant");
 const runtime_1 = require("../state/runtime");
 const context = (0, react_1.createContext)(undefined);
@@ -22,6 +24,14 @@ function useCurrentAgent() {
         throw new Error('No such current agent state. You should use `useCurrentAgent` within the `CurrentAgentProvider`');
     }
     const [agent] = (0, assistant_1.useAssistantState)({ aid: current.aid, working });
-    return Object.assign(Object.assign({}, current), { agent });
+    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 };
+    }, [agent]);
+    const appearanceOutput = (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.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 });
 }
 exports.useCurrentAgent = useCurrentAgent;