@blocklet/pages-kit 0.2.299 → 0.2.301

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

@@ -0,0 +1,72 @@
+"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 react_1 = require("@iconify/react");
+const icons_material_1 = require("@mui/icons-material");
+const material_1 = require("@mui/material");
+const react_2 = require("react");
+const CustomComponentRenderer_1 = __importDefault(require("../../../../../components/CustomComponentRenderer"));
+const ux_1 = require("../../../../arcblock/ux");
+const RuntimeCommonProvider_1 = __importDefault(require("../../components/RuntimeCommonProvider"));
+const ScrollView_1 = __importDefault(require("../../components/ScrollView"));
+const constants_1 = require("../../constants");
+const Runtime_1 = __importDefault(require("../../contexts/Runtime"));
+const runtime_1 = require("../../state/runtime");
+function ChatBotButton({ aid, working }) {
+    return ((0, jsx_runtime_1.jsx)(Runtime_1.default, { aid: aid, working: working, children: (0, jsx_runtime_1.jsx)(RuntimeCommonProvider_1.default, { children: (0, jsx_runtime_1.jsx)(ChatBotContent, {}) }) }));
+}
+exports.default = ChatBotButton;
+function ChatBotContent() {
+    var _a, _b, _c;
+    const anchorEl = (0, react_2.useRef)(null);
+    const { appearancePage, sessionState } = (0, runtime_1.useRuntimeState)();
+    const [open, setOpen] = (0, react_2.useState)(false);
+    (0, react_2.useEffect)(() => {
+        sessionState.load();
+    }, []);
+    const componentId = (_a = appearancePage === null || appearancePage === void 0 ? void 0 : appearancePage.componentId) !== null && _a !== void 0 ? _a : constants_1.DEFAULT_PAGE_COMPONENT_ID;
+    return ((0, jsx_runtime_1.jsxs)(material_1.Box, { sx: { position: 'fixed', bottom: 32, right: 16, zIndex: 'fab' }, children: [(0, jsx_runtime_1.jsx)(material_1.Fab, { sx: { width: 44, height: 44, boxShadow: open ? 0 : undefined }, onClick: () => setOpen(true), children: (0, jsx_runtime_1.jsx)(ux_1.Avatar, { size: 44, did: (_b = globalThis.blocklet) === null || _b === void 0 ? void 0 : _b.appId, variant: "circle", shape: "circle", src: (_c = appearancePage === null || appearancePage === void 0 ? void 0 : appearancePage.logo) === null || _c === void 0 ? void 0 : _c.url }) }), (0, jsx_runtime_1.jsx)(material_1.Stack, { width: "100%", ref: anchorEl }), anchorEl.current && ((0, jsx_runtime_1.jsx)(ResponsiveChatBotContainer, { anchorEl: anchorEl.current, open: open, onClose: () => setOpen(false), children: (0, jsx_runtime_1.jsx)(ScrollView_1.default, { initialScrollBehavior: "auto", component: material_1.Stack, sx: {
+                        overscrollBehavior: 'contain',
+                        height: '100%',
+                        width: '100%',
+                        overflow: 'auto',
+                        '.aigne-layout': {
+                            px: 2,
+                        },
+                    }, children: (0, jsx_runtime_1.jsx)(react_2.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: (0, jsx_runtime_1.jsx)(CustomComponentRenderer_1.default, { componentId: componentId, properties: appearancePage === null || appearancePage === void 0 ? void 0 : appearancePage.componentProps, props: { scrollViewProps: { disabled: true } } }) }) }) }))] }));
+}
+function ResponsiveChatBotContainer({ open, anchorEl, children, onClose, }) {
+    const theme = (0, material_1.useTheme)();
+    const isMobile = (0, material_1.useMediaQuery)(theme.breakpoints.down('sm'));
+    const { agent, appearancePage } = (0, runtime_1.useRuntimeState)();
+    const title = (appearancePage === null || appearancePage === void 0 ? void 0 : appearancePage.name) || agent.name;
+    if (isMobile) {
+        return ((0, jsx_runtime_1.jsx)(ChatBotDialog, { title: title, open: open, onClose: onClose, children: children }));
+    }
+    return ((0, jsx_runtime_1.jsx)(ChatBotPopper, { anchorEl: anchorEl, title: title, open: open, onClose: onClose, children: children }));
+}
+function ChatBotPopper({ title, anchorEl, open, children, onClose, }) {
+    return ((0, jsx_runtime_1.jsx)(material_1.Popper, { anchorEl: anchorEl, open: open, placement: "top-end", sx: {
+            zIndex: 'modal',
+            maxWidth: 500,
+            maxHeight: '80vh',
+            width: '100%',
+            height: '100%',
+        }, children: (0, jsx_runtime_1.jsx)(material_1.ClickAwayListener, { onClickAway: (e) => {
+                e.preventDefault();
+                e.stopPropagation();
+                onClose === null || onClose === void 0 ? void 0 : onClose();
+            }, children: (0, jsx_runtime_1.jsxs)(material_1.Stack, { sx: {
+                    height: '100%',
+                    boxShadow: 1,
+                    position: 'relative',
+                    background: 'white',
+                    borderRadius: 1,
+                }, children: [(0, jsx_runtime_1.jsxs)(material_1.Stack, { direction: "row", alignItems: "center", justifyContent: "space-between", borderBottom: 1, borderColor: "divider", p: 2, gap: 2, children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "h6", noWrap: true, children: title }), (0, jsx_runtime_1.jsx)(material_1.Button, { sx: { minWidth: 28, minHeight: 28, p: 0 }, onClick: onClose, children: (0, jsx_runtime_1.jsx)(react_1.Icon, { icon: "tabler:x", fontSize: 24, color: "rgba(75, 85, 99, 1)" }) })] }), children] }) }) }));
+}
+function ChatBotDialog({ title, open, children, onClose, }) {
+    return ((0, jsx_runtime_1.jsxs)(material_1.Dialog, { open: open, onClose: onClose, fullScreen: true, children: [(0, jsx_runtime_1.jsx)(material_1.DialogTitle, { sx: { pl: 0 }, children: (0, jsx_runtime_1.jsxs)(material_1.Stack, { direction: "row", alignItems: "center", gap: 2, children: [(0, jsx_runtime_1.jsx)(material_1.IconButton, { size: "small", onClick: onClose, children: (0, jsx_runtime_1.jsx)(icons_material_1.ArrowBackIosNewRounded, { fontSize: "inherit" }) }), (0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "h6", noWrap: true, children: title })] }) }), (0, jsx_runtime_1.jsx)(material_1.DialogContent, { sx: { p: 0 }, dividers: true, children: children })] }));
+}

package/lib/cjs/builtin/async/ai-runtime/{components/runtime → runtime/Runtime}/index.js

@@ -34,16 +34,21 @@ const CustomComponentRenderer_1 = __importDefault(require("../../../../../compon
 const ux_1 = require("../../../../arcblock/ux");
 const locale_1 = require("../../../../locale");
 const header_1 = require("../../../../page/header");
-const RuntimeProvider_1 = __importStar(require("../RuntimeProvider"));
-const SocialShare_1 = __importDefault(require("../SocialShare"));
-const constants_1 = require("./constants");
-const runtime_1 = require("./state/runtime");
+const RuntimeCommonProvider_1 = __importStar(require("../../components/RuntimeCommonProvider"));
+const SocialShare_1 = __importDefault(require("../../components/SocialShare"));
+const constants_1 = require("../../constants");
+const Runtime_1 = require("../../contexts/Runtime");
+const runtime_1 = require("../../state/runtime");
 const logoSize = 44;
 function AgentCreatedBy({ agent }) {
     const { t } = (0, locale_1.useLocaleContext)();
     return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [t('by'), " ", (0, jsx_runtime_1.jsx)(material_1.Box, { component: ux_1.DID, did: agent.createdBy, copyable: false, responsive: true })] }));
 }
 function Runtime() {
+    return ((0, jsx_runtime_1.jsx)(Runtime_1.RuntimeProviderFromUrl, { children: (0, jsx_runtime_1.jsx)(RuntimeView, {}) }));
+}
+exports.default = Runtime;
+function RuntimeView() {
     var _a;
     const { agent, appearancePage, sessionState } = (0, runtime_1.useRuntimeState)();
     const theme = (0, material_1.useTheme)();
@@ -62,7 +67,7 @@ function Runtime() {
                         height: 18,
                         fontSize: 18,
                     }, children: (appearancePage === null || appearancePage === void 0 ? void 0 : appearancePage.name) || agent.name }));
-                state.description = agent.createdBy && ((0, jsx_runtime_1.jsx)(RuntimeProvider_1.RuntimeLocaleProvider, { children: (0, jsx_runtime_1.jsx)(material_1.Box, { sx: {
+                state.description = agent.createdBy && ((0, jsx_runtime_1.jsx)(RuntimeCommonProvider_1.RuntimeLocaleProvider, { children: (0, jsx_runtime_1.jsx)(material_1.Box, { sx: {
                             display: 'inline-flex',
                             alignItems: 'center',
                             gap: 0.5,
@@ -90,6 +95,5 @@ function Runtime() {
         sessionState.load();
     }, []);
     const componentId = (_a = appearancePage === null || appearancePage === void 0 ? void 0 : appearancePage.componentId) !== null && _a !== void 0 ? _a : constants_1.DEFAULT_PAGE_COMPONENT_ID;
-    return ((0, jsx_runtime_1.jsxs)(RuntimeProvider_1.default, { children: [appearancePage && ((0, jsx_runtime_1.jsxs)(react_helmet_1.Helmet, { children: [appearancePage.name && (0, jsx_runtime_1.jsx)("title", { children: appearancePage.name }), appearancePage.description && (0, jsx_runtime_1.jsx)("meta", { name: "description", content: appearancePage.description })] })), (0, jsx_runtime_1.jsx)(CustomComponentRenderer_1.default, { componentId: componentId, properties: appearancePage === null || appearancePage === void 0 ? void 0 : appearancePage.componentProps })] }));
+    return ((0, jsx_runtime_1.jsxs)(RuntimeCommonProvider_1.default, { children: [appearancePage && ((0, jsx_runtime_1.jsxs)(react_helmet_1.Helmet, { children: [appearancePage.name && (0, jsx_runtime_1.jsx)("title", { children: appearancePage.name }), appearancePage.description && (0, jsx_runtime_1.jsx)("meta", { name: "description", content: appearancePage.description })] })), (0, jsx_runtime_1.jsx)(CustomComponentRenderer_1.default, { componentId: componentId, properties: appearancePage === null || appearancePage === void 0 ? void 0 : appearancePage.componentProps })] }));
 }
-exports.default = Runtime;

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

@@ -20,9 +20,9 @@ const isEmpty_1 = __importDefault(require("lodash/isEmpty"));
 const omit_1 = __importDefault(require("lodash/omit"));
 const react_1 = require("react");
 const react_hook_form_1 = require("react-hook-form");
-const locale_1 = require("../../../../../../locale");
-const LoadingButton_1 = __importDefault(require("../../../LoadingButton"));
-const parameters_1 = __importDefault(require("../../../parameters"));
+const locale_1 = require("../../../../locale");
+const AgentInputField_1 = __importDefault(require("../../components/AgentInputField"));
+const LoadingButton_1 = __importDefault(require("../../components/LoadingButton"));
 const CurrentAgent_1 = require("../../contexts/CurrentAgent");
 const runtime_1 = require("../../state/runtime");
 exports.SUPPORTED_PARAMETER_TYPES = ['string', 'number', 'select', 'language'];
@@ -73,7 +73,7 @@ function AutoForm({ submitText, inlineLabel, autoFillLastForm = true, submitInQu
                                     : undefined,
                             }, render: ({ field, fieldState }) => {
                                 var _a;
-                                return ((0, jsx_runtime_1.jsxs)(material_1.Stack, { className: "form-item", children: [parameter.label && (0, jsx_runtime_1.jsx)(material_1.FormLabel, { children: parameter.label }), (0, jsx_runtime_1.jsx)(parameters_1.default, { inputRef: field.ref, autoFocus: index === 0, size: "small", hiddenLabel: true, fullWidth: true, label: undefined, parameter: parameter, maxRows: !(parameter === null || parameter === void 0 ? void 0 : parameter.type) || (parameter === null || parameter === void 0 ? void 0 : parameter.type) === 'string' ? 5 : undefined, value: field.value || '', onChange: (value) => field.onChange({ target: { value } }), error: Boolean(fieldState.error), helperText: ((_a = fieldState.error) === null || _a === void 0 ? void 0 : _a.message) || (parameter === null || parameter === void 0 ? void 0 : parameter.helper), InputProps: parameter.key === 'question' && submitInQuestionField
+                                return ((0, jsx_runtime_1.jsxs)(material_1.Stack, { className: "form-item", children: [parameter.label && (0, jsx_runtime_1.jsx)(material_1.FormLabel, { children: parameter.label }), (0, jsx_runtime_1.jsx)(AgentInputField_1.default, { inputRef: field.ref, autoFocus: index === 0, size: "small", hiddenLabel: true, fullWidth: true, label: undefined, parameter: parameter, maxRows: !(parameter === null || parameter === void 0 ? void 0 : parameter.type) || (parameter === null || parameter === void 0 ? void 0 : parameter.type) === 'string' ? 5 : undefined, value: field.value || '', onChange: (value) => field.onChange({ target: { value } }), error: Boolean(fieldState.error), helperText: ((_a = fieldState.error) === null || _a === void 0 ? void 0 : _a.message) || (parameter === null || parameter === void 0 ? void 0 : parameter.helper), InputProps: parameter.key === 'question' && submitInQuestionField
                                                 ? {
                                                     endAdornment: ((0, jsx_runtime_1.jsx)(material_1.InputAdornment, { position: "end", sx: { py: 3, mr: -0.75 }, children: (0, jsx_runtime_1.jsx)(LoadingButton_1.default, { type: "submit", variant: "contained", loading: sessionState.running, sx: { borderRadius: 100 }, children: submitText }) })),
                                                 }

package/lib/cjs/builtin/async/ai-runtime/{components/message → runtime-components/ChatOutput}/MessageActions.js

@@ -10,12 +10,15 @@ 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 material_1 = require("@mui/material");
 const locale_1 = require("../../../../locale");
-const ActionButton_1 = require("../ActionButton");
-const SocialShare_1 = require("../SocialShare");
+const ActionButton_1 = __importDefault(require("../../components/ActionButton"));
+const SocialShare_1 = require("../../components/SocialShare");
 function MessageActions(_a) {
     var { content } = _a, props = __rest(_a, ["content"]);
     const { t } = (0, locale_1.useLocaleContext)();
@@ -28,7 +31,7 @@ function MessageActions(_a) {
             marginRight: '0px !important',
         },
     };
-    return ((0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ direction: "column", gap: 0.5 }, props, { children: [(0, jsx_runtime_1.jsx)(ActionButton_1.ActionButton, { autoReset: true, size: "small", variant: "outlined", placement: "right", 
+    return ((0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ direction: "column", gap: 0.5 }, props, { children: [(0, jsx_runtime_1.jsx)(ActionButton_1.default, { autoReset: true, size: "small", variant: "outlined", placement: "right", 
                 // @ts-ignore
                 color: "black", tip: t('copyToClipboard'), 
                 // title={t('copy')}
@@ -62,7 +65,7 @@ function MessageActions(_a) {
                     '.MuiIconButton-root': {
                         p: 0,
                     },
-                }, children: (0, jsx_runtime_1.jsx)(ActionButton_1.ActionButton, { autoReset: true, size: "small", variant: "outlined", placement: "right", 
+                }, children: (0, jsx_runtime_1.jsx)(ActionButton_1.default, { autoReset: true, size: "small", variant: "outlined", placement: "right", 
                     // @ts-ignore
                     color: "black", tip: t('socialShare.title'), icon: "tabler:share", iconSucceed: "tabler:share", sx: Object.assign({}, commonActionButtonsSx) }) })] })));
 }

package/lib/cjs/builtin/async/ai-runtime/{components/runtime/components → runtime-components}/ChatOutput/MessageErrorView.js

@@ -5,8 +5,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
 const material_1 = require("@mui/material");
-const locale_1 = require("../../../../../../locale");
-const MarkdownRenderer_1 = __importDefault(require("../../../MarkdownRenderer"));
+const locale_1 = require("../../../../locale");
+const MarkdownRenderer_1 = __importDefault(require("../../components/MarkdownRenderer"));
 function MessageErrorView({ error }) {
     const { t } = (0, locale_1.useLocaleContext)();
     if (!error)

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

@@ -45,13 +45,13 @@ 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");
-const common_1 = require("../../../common");
-const MarkdownRenderer_1 = __importDefault(require("../../../MarkdownRenderer"));
-const MessageActions_1 = __importDefault(require("../../../message/MessageActions"));
+const ux_1 = require("../../../../arcblock/ux");
+const session_1 = require("../../../../session");
+const MarkdownRenderer_1 = __importDefault(require("../../components/MarkdownRenderer"));
 const runtime_1 = require("../../state/runtime");
+const MessageActions_1 = __importDefault(require("./MessageActions"));
 const MessageErrorView_1 = __importDefault(require("./MessageErrorView"));
+const MessageMetadataRenderer_1 = __importDefault(require("./MessageMetadataRenderer"));
 const MessageItemView = (0, react_1.memo)((_a) => {
     var _b;
     var { message, hideAvatar } = _a, props = __rest(_a, ["message", "hideAvatar"]);
@@ -146,7 +146,7 @@ function AgentMessage({ message, hideAvatar }) {
                                                     : '', sx: childMsg.respondAs === 'systemMessage' ? { color: 'text.secondary' } : {}, children: (_e = childMsg.result) === null || _e === void 0 ? void 0 : _e.content }, childMsg.taskId)) : ((_g = (_f = childMsg.result) === null || _f === void 0 ? void 0 : _f.images) === null || _g === void 0 ? void 0 : _g.length) ? ((0, jsx_runtime_1.jsx)(image_preview_1.default, { itemWidth: 100, spacing: 1, dataSource: childMsg.result.images.map((i) => ({ src: i.url })) }, childMsg.taskId)) : null;
                                         }), ((_j = message.result) === null || _j === void 0 ? void 0 : _j.content) && ((0, jsx_runtime_1.jsx)(MarkdownRenderer_1.default, { className: isMessageLoading ? 'writing' : '', children: message.result.content }))] }) })) : (isMessageLoading && ((0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "rectangular", height: 24 + 8 + 8, 
                                 // only response with loading
-                                className: "message-response" }))), (_l = (_k = message.result) === null || _k === void 0 ? void 0 : _k.objects) === null || _l === void 0 ? void 0 : _l.map((object) => ((0, jsx_runtime_1.jsx)(common_1.MessageMetadataRenderer, { object: object.data }, object.taskId))), message.error && (0, jsx_runtime_1.jsx)(MessageErrorView_1.default, { error: message.error })] })] })] }));
+                                className: "message-response" }))), (_l = (_k = message.result) === null || _k === void 0 ? void 0 : _k.objects) === null || _l === void 0 ? void 0 : _l.map((object) => ((0, jsx_runtime_1.jsx)(MessageMetadataRenderer_1.default, { object: object.data }, object.taskId))), message.error && (0, jsx_runtime_1.jsx)(MessageErrorView_1.default, { error: message.error })] })] })] }));
 }
 function MessageItemWrapper(_a) {
     var _b, _c;

package/lib/cjs/builtin/async/ai-runtime/{components/common → runtime-components/ChatOutput}/MessageMetadataRenderer.js

@@ -8,7 +8,7 @@ const image_preview_1 = __importDefault(require("@blocklet/ai-kit/components/ima
 const types_1 = require("@blocklet/ai-runtime/types");
 const material_1 = require("@mui/material");
 const react_1 = require("react");
-const ReferenceLinks_1 = __importDefault(require("../message/ReferenceLinks"));
+const ReferenceLinks_1 = __importDefault(require("./ReferenceLinks"));
 function MessageMetadataRenderer({ object }) {
     const referenceLinks = object[types_1.RuntimeOutputVariable.referenceLinks];
     const images = (0, react_1.useMemo)(() => {

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

@@ -0,0 +1,102 @@
+"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 lab_1 = require("@mui/lab");
+const material_1 = require("@mui/material");
+const react_1 = require("react");
+const react_wrap_balancer_1 = __importDefault(require("react-wrap-balancer"));
+const CustomComponentRenderer_1 = __importDefault(require("../../../../../components/CustomComponentRenderer"));
+const locale_1 = require("../../../../locale");
+const SimpleHeader_1 = __importDefault(require("../../components/Header/SimpleHeader"));
+const LoadingButton_1 = __importDefault(require("../../components/LoadingButton"));
+const CurrentAgent_1 = __importStar(require("../../contexts/CurrentAgent"));
+const CurrentMessage_1 = __importDefault(require("../../contexts/CurrentMessage"));
+const runtime_1 = require("../../state/runtime");
+const map_right_1 = __importDefault(require("../../utils/map-right"));
+function PhotoGallery({ resultTitle, primaryColor }) {
+    const { childAgentId } = (0, runtime_1.useRuntimeState)();
+    const inheritedTheme = (0, material_1.useTheme)();
+    const theme = (0, react_1.useMemo)(() => {
+        let { primary } = inheritedTheme.palette;
+        try {
+            if (primaryColor) {
+                primary = inheritedTheme.palette.augmentColor({ color: { main: primaryColor } });
+            }
+        }
+        catch (error) {
+            console.error('augment primary color error', { error });
+        }
+        return (0, material_1.createTheme)(inheritedTheme, {
+            palette: { primary },
+            shape: {
+                borderRadius: 8,
+            },
+        });
+    }, [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 })] }) }));
+}
+exports.default = PhotoGallery;
+function AgentInputRender(_a) {
+    var props = __rest(_a, []);
+    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, Object.assign({}, props, { 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." }) }));
+}
+function OutputView(_a) {
+    var _b, _c, _d, _e, _f, _g;
+    var { resultTitle } = _a, props = __rest(_a, ["resultTitle"]);
+    const { t } = (0, locale_1.useLocaleContext)();
+    const { sessionState } = (0, runtime_1.useRuntimeState)();
+    const ref = (0, react_1.useRef)(null);
+    return ((0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ width: "100%", alignItems: "center", px: { xs: 2, sm: 3 }, mt: { xs: 2, sm: 3 } }, props, { children: [resultTitle && ((0, jsx_runtime_1.jsx)(material_1.Typography, { width: "100%", component: "h2", fontSize: 36, fontWeight: 700, textAlign: "center", children: (0, jsx_runtime_1.jsx)(react_wrap_balancer_1.default, { children: resultTitle }) })), sessionState.loaded && !((_b = sessionState.messages) === null || _b === void 0 ? void 0 : _b.length) && (0, jsx_runtime_1.jsx)(NoOutputs, {}), (0, jsx_runtime_1.jsxs)(lab_1.Masonry, { ref: ref, columns: { xs: 2, sm: 3, md: 4, lg: 5 }, spacing: 1, sequential: true, sx: { width: '100%', overflow: 'hidden', '> *': { borderRadius: 1 } }, children: [sessionState.running && ((0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "rectangular", sx: {
+                            // FIXME: default using history height
+                            height: (_e = (_d = (_c = ref.current) === null || _c === void 0 ? void 0 : _c.querySelector('*')) === null || _d === void 0 ? void 0 : _d.clientHeight) !== null && _e !== void 0 ? _e : 200,
+                        } })), (0, map_right_1.default)((_f = sessionState.messages) !== null && _f !== void 0 ? _f : [], (message) => ((0, jsx_runtime_1.jsx)(CurrentAgent_1.default, { agentId: message.assistantId, children: (0, jsx_runtime_1.jsx)(CurrentMessage_1.default, { message: message, children: (0, jsx_runtime_1.jsx)(react_1.Suspense, { children: (0, jsx_runtime_1.jsx)(OutputItemView, {}) }) }) }, message.taskId)))] }), (0, jsx_runtime_1.jsx)(material_1.Box, { my: 4, children: !!((_g = sessionState.messages) === null || _g === void 0 ? void 0 : _g.length) && !sessionState.noMoreMessage && ((0, jsx_runtime_1.jsx)(LoadingButton_1.default, { variant: "outlined", onClick: sessionState.loadMoreMessages, children: t('loadMore') })) })] })));
+}
+function OutputItemView() {
+    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: appearanceOutput.componentId, properties: appearanceOutput.componentProps }));
+}

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

@@ -19,11 +19,11 @@ 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 ux_1 = require("../../../../arcblock/ux");
+const locale_1 = require("../../../../locale");
+const session_1 = require("../../../../session");
+const ActionButton_1 = __importDefault(require("../../components/ActionButton"));
+const UserInfo_1 = __importDefault(require("../../components/UserInfo"));
 const CurrentMessage_1 = require("../../contexts/CurrentMessage");
 const getLineClamp = (line) => ({
     display: '-webkit-box',
@@ -40,9 +40,18 @@ function PhotoGalleryItem() {
     const [openDialog, setOpenDialog] = (0, react_2.useState)(false);
     const objects = (_b = (_a = message.result) === null || _a === void 0 ? void 0 : _a.objects) !== null && _b !== void 0 ? _b : [];
     const images = objects.flatMap((i) => { var _a; return (_a = i.data[types_1.RuntimeOutputVariable.images]) !== null && _a !== void 0 ? _a : []; });
+    if (!images.length && message.error) {
+        return ((0, jsx_runtime_1.jsx)(material_1.Stack, { alignItems: "center", justifyContent: "center", sx: {
+                aspectRatio: 1,
+                bgcolor: 'grey.50',
+                borderRadius: 1,
+                overflow: 'hidden',
+                wordBreak: 'break-word',
+            }, children: (0, jsx_runtime_1.jsx)(material_1.Alert, { severity: "error", sx: { bgcolor: 'transparent' }, children: message.error.message }) }));
+    }
     return images.map(({ url }, index) => {
         var _a;
-        return ((0, jsx_runtime_1.jsxs)(material_1.Box, { className: "photo-wall-item", sx: {
+        return ((0, jsx_runtime_1.jsxs)(material_1.Box, { sx: {
                 position: 'relative',
                 overflow: 'hidden',
                 cursor: 'pointer',
@@ -90,7 +99,7 @@ function PromptDialog(_a) {
     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: {
+    return ((0, jsx_runtime_1.jsxs)(material_1.Dialog, Object.assign({ fullWidth: true, maxWidth: "xl", scroll: "paper", slotProps: {
             backdrop: {
                 sx: {
                     bgcolor: 'rgba(255, 255, 255, 0.4)',
@@ -123,7 +132,7 @@ function PromptDialog(_a) {
                                         borderColor: 'divider',
                                         overflow: 'auto',
                                         maxHeight: { xs: 'unset', md: '40vh' },
-                                    }, children: parameters === null || parameters === void 0 ? void 0 : parameters.question }), (0, jsx_runtime_1.jsx)(material_1.Box, { children: (0, jsx_runtime_1.jsx)(ActionButton_1.ActionButton, { autoReset: true, size: "small", variant: "contained", placement: "right", tip: t('copyToClipboard'), title: t('copy'), titleSucceed: t('copied'), icon: "tabler:copy", iconSucceed: "tabler:copy-check-filled", onClick: () => {
+                                    }, children: parameters === null || parameters === void 0 ? void 0 : parameters.question }), (0, jsx_runtime_1.jsx)(material_1.Box, { children: (0, jsx_runtime_1.jsx)(ActionButton_1.default, { autoReset: true, size: "small", variant: "contained", placement: "right", tip: t('copyToClipboard'), title: t('copy'), titleSucceed: t('copied'), icon: "tabler:copy", iconSucceed: "tabler:copy-check-filled", onClick: () => {
                                             window.navigator.clipboard.writeText(parameters === null || parameters === void 0 ? void 0 : parameters.question);
                                         }, sx: {
                                             borderRadius,

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

@@ -22,6 +22,17 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __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 };
 };
@@ -30,16 +41,18 @@ 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"));
-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 react_scroll_to_bottom_1 = require("react-scroll-to-bottom");
+const CustomComponentRenderer_1 = __importDefault(require("../../../../../components/CustomComponentRenderer"));
+const session_1 = require("../../../../session");
+const SimpleHeader_1 = __importDefault(require("../../components/Header/SimpleHeader"));
+const SimpleLayout_1 = __importDefault(require("../../components/Layout/SimpleLayout"));
+const ScrollView_1 = __importDefault(require("../../components/ScrollView"));
+const UserInfo_1 = __importDefault(require("../../components/UserInfo"));
 const CurrentAgent_1 = __importStar(require("../../contexts/CurrentAgent"));
 const CurrentMessage_1 = __importStar(require("../../contexts/CurrentMessage"));
 const runtime_1 = require("../../state/runtime");
-function SimpleChat({ primaryColor }) {
+const MessageSuggestedQuestions_1 = __importDefault(require("../ChatOutput/MessageSuggestedQuestions"));
+function SimpleChat({ primaryColor, scrollViewProps = { scroll: 'window', initialScrollBehavior: 'auto' }, }) {
     const inheritedTheme = (0, material_1.useTheme)();
     const theme = (0, react_1.useMemo)(() => {
         let { primary } = inheritedTheme.palette;
@@ -58,31 +71,31 @@ function SimpleChat({ primaryColor }) {
             },
         });
     }, [inheritedTheme, primaryColor]);
-    return ((0, jsx_runtime_1.jsx)(material_1.ThemeProvider, { theme: theme, children: (0, jsx_runtime_1.jsx)(ScrollView_1.default, { scroller: "window", initialScrollBehavior: "auto", children: (0, jsx_runtime_1.jsx)(SimpleChatView, {}) }) }));
+    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, {}) }) })));
 }
 exports.default = SimpleChat;
 function SimpleChatView() {
-    const { agent, childAgentId, appearancePage, sessionState } = (0, runtime_1.useRuntimeState)();
-    const scrollToBottom = (0, ScrollView_1.useScrollToBottomModule)().useScrollToBottom();
+    const { childAgentId, sessionState } = (0, runtime_1.useRuntimeState)();
+    const scrollToBottom = (0, react_scroll_to_bottom_1.useScrollToBottom)();
     (0, react_1.useEffect)(() => {
         if (sessionState.running)
-            scrollToBottom();
+            scrollToBottom({ behavior: 'smooth' });
     }, [scrollToBottom, sessionState.running]);
-    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, {}) }) })] }));
+    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() {
+function AgentInputRender(_a) {
+    var props = __rest(_a, []);
     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: 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.componentProps }) })));
 }
-function OutputView() {
-    var _a, _b;
+function OutputView(_a) {
+    var _b, _c;
+    var props = __rest(_a, []);
     const { sessionState } = (0, runtime_1.useRuntimeState)();
-    const lastMessage = (_a = sessionState.messages) === null || _a === void 0 ? void 0 : _a.slice(-1)[0];
-    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, {}) }) }))] }));
+    const lastMessage = (_b = sessionState.messages) === null || _b === void 0 ? void 0 : _b.slice(-1)[0];
+    return ((0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ gap: 2 }, props, { children: [(_c = sessionState.messages) === null || _c === void 0 ? void 0 : _c.map((message) => ((0, jsx_runtime_1.jsx)(material_1.Stack, { children: (0, jsx_runtime_1.jsx)(CurrentAgent_1.default, { agentId: message.assistantId, children: (0, jsx_runtime_1.jsx)(CurrentMessage_1.default, { message: message, children: (0, jsx_runtime_1.jsx)(react_1.Suspense, { children: (0, jsx_runtime_1.jsx)(OutputItemView, {}) }) }) }) }))), lastMessage && ((0, jsx_runtime_1.jsx)(CurrentAgent_1.default, { agentId: lastMessage.assistantId, children: (0, jsx_runtime_1.jsx)(CurrentMessage_1.default, { message: lastMessage, children: (0, jsx_runtime_1.jsx)(SuggestedQuestionsView, {}) }) }))] })));
 }
 function OutputItemView() {
     var _a, _b, _c, _d, _e;
@@ -92,7 +105,6 @@ function OutputItemView() {
     const { session: authSession } = (0, session_1.useSessionContext)();
     if (!(appearanceOutput === null || appearanceOutput === void 0 ? void 0 : appearanceOutput.componentId))
         return null;
-    // 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: {
@@ -107,7 +119,7 @@ function SuggestedQuestionsView() {
         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)(common_1.MessageSuggestedQuestions, { dataSource: suggestedQuestions, onClick: (item) => {
+    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 }));
 }

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

@@ -5,13 +5,15 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
 const material_1 = require("@mui/material");
-const common_1 = require("../../../common");
-const MarkdownRenderer_1 = __importDefault(require("../../../MarkdownRenderer"));
+const MarkdownRenderer_1 = __importDefault(require("../../components/MarkdownRenderer"));
 const CurrentMessage_1 = require("../../contexts/CurrentMessage");
+const MessageErrorView_1 = __importDefault(require("../ChatOutput/MessageErrorView"));
+const MessageMetadataRenderer_1 = __importDefault(require("../ChatOutput/MessageMetadataRenderer"));
 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 }))] }));
+    const { error } = message;
+    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 }))] }));
 }
 exports.default = SimpleOutput;

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

@@ -22,6 +22,17 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __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 };
 };
@@ -29,13 +40,15 @@ 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 react_wrap_balancer_1 = __importStar(require("react-wrap-balancer"));
-const CustomComponentRenderer_1 = __importDefault(require("../../../../../../../components/CustomComponentRenderer"));
+const react_wrap_balancer_1 = __importDefault(require("react-wrap-balancer"));
+const CustomComponentRenderer_1 = __importDefault(require("../../../../../components/CustomComponentRenderer"));
+const SimpleHeader_1 = __importDefault(require("../../components/Header/SimpleHeader"));
+const SimpleLayout_1 = __importDefault(require("../../components/Layout/SimpleLayout"));
 const CurrentAgent_1 = __importStar(require("../../contexts/CurrentAgent"));
 const CurrentMessage_1 = __importDefault(require("../../contexts/CurrentMessage"));
 const runtime_1 = require("../../state/runtime");
 function SimplePage({ resultTitle, primaryColor }) {
-    const { agent, appearancePage, childAgentId } = (0, runtime_1.useRuntimeState)();
+    const { childAgentId } = (0, runtime_1.useRuntimeState)();
     const inheritedTheme = (0, material_1.useTheme)();
     const theme = (0, react_1.useMemo)(() => {
         let { primary } = inheritedTheme.palette;
@@ -54,22 +67,22 @@ function SimplePage({ resultTitle, primaryColor }) {
             },
         });
     }, [inheritedTheme, primaryColor]);
-    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 }) })] }) }));
+    return ((0, jsx_runtime_1.jsx)(material_1.ThemeProvider, { theme: theme, children: (0, jsx_runtime_1.jsxs)(SimpleLayout_1.default, { children: [(0, jsx_runtime_1.jsx)(SimpleHeader_1.default, {}), (0, jsx_runtime_1.jsx)(CurrentAgent_1.default, { agentId: childAgentId, children: (0, jsx_runtime_1.jsx)(AgentInputRender, { className: "aigne-inputs aigne-simple-page-inputs" }) }), (0, jsx_runtime_1.jsx)(OutputView, { className: "aigne-outputs aigne-simple-page-outputs", resultTitle: resultTitle })] }) }));
 }
 exports.default = SimplePage;
-function AgentInputRender() {
+function AgentInputRender(_a) {
+    var props = __rest(_a, []);
     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: 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.componentProps }) })));
 }
-function OutputView({ resultTitle }) {
-    var _a;
+function OutputView(_a) {
+    var _b;
+    var { resultTitle } = _a, props = __rest(_a, ["resultTitle"]);
     const { sessionState } = (0, runtime_1.useRuntimeState)();
-    const lastMessage = (_a = sessionState.messages) === null || _a === void 0 ? void 0 : _a.slice(-1)[0];
-    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, {}) }) }) }) })] })) }));
+    const lastMessage = (_b = sessionState.messages) === null || _b === void 0 ? void 0 : _b.slice(-1)[0];
+    return ((0, jsx_runtime_1.jsx)(material_1.Stack, Object.assign({ gap: 2, mt: 4 }, props, { children: lastMessage && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [resultTitle && ((0, jsx_runtime_1.jsx)(material_1.Typography, { width: "100%", component: "h5", fontSize: 36, fontWeight: 700, textAlign: "center", children: (0, jsx_runtime_1.jsx)(react_wrap_balancer_1.default, { children: resultTitle }) })), (0, jsx_runtime_1.jsx)(material_1.Stack, { children: (0, jsx_runtime_1.jsx)(CurrentAgent_1.default, { agentId: lastMessage.assistantId, children: (0, jsx_runtime_1.jsx)(CurrentMessage_1.default, { message: lastMessage, children: (0, jsx_runtime_1.jsx)(react_1.Suspense, { children: (0, jsx_runtime_1.jsx)(OutputItemView, {}) }) }) }) })] })) })));
 }
 function OutputItemView() {
     const { appearanceOutput } = (0, CurrentAgent_1.useCurrentAgent)();