@blocklet/pages-kit 0.2.289 → 0.2.291

package/LICENSE

@@ -0,0 +1,13 @@
+Copyright 2018-2020 ArcBlock
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.

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

@@ -30,7 +30,7 @@ const material_1 = require("@mui/material");
 const react_2 = require("react");
 const LoadingButton_1 = __importDefault(require("./LoadingButton"));
 function ActionButton(_a) {
-    var { tip, tipSucceed, title, titleSucceed, icon, iconSucceed, autoReset } = _a, props = __rest(_a, ["tip", "tipSucceed", "title", "titleSucceed", "icon", "iconSucceed", "autoReset"]);
+    var { tip, tipSucceed, title, titleSucceed, icon, iconSucceed, autoReset, placement = 'top' } = _a, props = __rest(_a, ["tip", "tipSucceed", "title", "titleSucceed", "icon", "iconSucceed", "autoReset", "placement"]);
     const [copied, setCopied] = (0, react_2.useState)(false);
     const [error, setError] = (0, react_2.useState)();
     const timer = (0, react_2.useRef)();
@@ -48,7 +48,7 @@ function ActionButton(_a) {
     const realIcon = copied ? iconSucceed : icon;
     const toolTipTitleText = error ? (0, jsx_runtime_1.jsx)(material_1.Box, { color: "error", children: error.message }) : (copied && tipSucceed) || tip;
     const buttonText = copied ? titleSucceed : title;
-    return ((0, jsx_runtime_1.jsx)(material_1.Tooltip, { title: toolTipTitleText, disableInteractive: true, placement: "top", onClose: onClose, onOpen: onOpen, children: (0, jsx_runtime_1.jsx)("span", { children: (0, jsx_runtime_1.jsx)(LoadingButton_1.default, Object.assign({ startIcon: realIcon && (typeof realIcon === 'string' ? (0, jsx_runtime_1.jsx)(react_1.Icon, { icon: realIcon }) : realIcon), loadingPosition: realIcon ? 'start' : undefined }, props, { onClick: (e) => __awaiter(this, void 0, void 0, function* () {
+    return ((0, jsx_runtime_1.jsx)(material_1.Tooltip, { title: toolTipTitleText, disableInteractive: true, placement: placement, onClose: onClose, onOpen: onOpen, children: (0, jsx_runtime_1.jsx)("span", { children: (0, jsx_runtime_1.jsx)(LoadingButton_1.default, Object.assign({ startIcon: realIcon && (typeof realIcon === 'string' ? (0, jsx_runtime_1.jsx)(react_1.Icon, { icon: realIcon }) : realIcon), loadingPosition: realIcon ? 'start' : undefined }, props, { onClick: (e) => __awaiter(this, void 0, void 0, function* () {
                     if (!props.onClick)
                         return;
                     try {

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

@@ -1,10 +1,22 @@
 "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;
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
 const icons_material_1 = require("@mui/icons-material");
 const material_1 = require("@mui/material");
 const react_1 = require("react");
-function MenuButton({ sx, menus, children }) {
+function MenuButton(_a) {
+    var { sx, menus, children, MenuProps } = _a, restProps = __rest(_a, ["sx", "menus", "children", "MenuProps"]);
     const [anchorEl, setAnchorEl] = (0, react_1.useState)(null);
     const open = Boolean(anchorEl);
     const handleClick = (event) => {
@@ -13,7 +25,7 @@ function MenuButton({ sx, menus, children }) {
     const handleClose = () => {
         setAnchorEl(null);
     };
-    return ((0, jsx_runtime_1.jsxs)(material_1.Box, { sx: sx, children: [(0, jsx_runtime_1.jsx)(material_1.IconButton, { onClick: handleClick, children: children || (0, jsx_runtime_1.jsx)(icons_material_1.MoreHoriz, {}) }), (0, jsx_runtime_1.jsx)(material_1.Menu, { disableScrollLock: true, MenuListProps: {
+    return ((0, jsx_runtime_1.jsxs)(material_1.Box, { sx: sx, children: [(0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ onClick: handleClick }, restProps, { children: children || (0, jsx_runtime_1.jsx)(icons_material_1.MoreHoriz, {}) })), (0, jsx_runtime_1.jsx)(material_1.Menu, Object.assign({ disableScrollLock: true, MenuListProps: {
                     sx: {
                         p: 0.5,
                         '.MuiMenuItem-root': {
@@ -38,6 +50,6 @@ function MenuButton({ sx, menus, children }) {
                 }, transformOrigin: {
                     vertical: 'top',
                     horizontal: 'right',
-                }, open: open, onClick: handleClose, onClose: handleClose, children: typeof menus === 'function' ? menus() : menus })] }));
+                }, open: open, onClick: handleClose, onClose: handleClose }, MenuProps, { children: typeof menus === 'function' ? menus() : menus }))] }));
 }
 exports.default = MenuButton;

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

@@ -39,13 +39,14 @@ function SocialShare(props) {
         if (type === 'buttons') {
             return (0, jsx_runtime_1.jsx)(SocialShareButtons, Object.assign({}, restProps));
         }
+        // @ts-ignore
         return (0, jsx_runtime_1.jsx)(SocialShareMenu, Object.assign({}, restProps));
     }, [type, restProps]);
     return ((0, jsx_runtime_1.jsx)(locale_1.LocaleProvider, { translations: locales_1.translations, locale: locale, fallbackLocale: "en", children: renderContent() }));
 }
 exports.default = SocialShare;
 function SocialShareMenu(_a) {
-    var { url = getFormattedUrl(window.location.href), content } = _a, restProps = __rest(_a, ["url", "content"]);
+    var { url = getFormattedUrl(window.location.href), content, children = (0, jsx_runtime_1.jsx)(react_1.Icon, { icon: "tabler:share" }), MenuProps, disableCopyLink = false } = _a, restProps = __rest(_a, ["url", "content", "children", "MenuProps", "disableCopyLink"]);
     const theme = (0, material_1.useTheme)();
     const { t } = (0, locale_1.useLocaleContext)();
     const itemIconSx = {
@@ -72,21 +73,17 @@ function SocialShareMenu(_a) {
             borderRadius: '6px',
         },
     };
-    const renderShareIcon = () => {
-        // eslint-disable-next-line react/no-unstable-nested-components
-        return (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ component: () => (0, jsx_runtime_1.jsx)(react_1.Icon, { icon: "tabler:share" }) }, restProps));
-    };
-    return ((0, jsx_runtime_1.jsx)(MenuButton_1.default, { menus: [
+    return ((0, jsx_runtime_1.jsx)(MenuButton_1.default, Object.assign({ MenuProps: MenuProps, menus: [
             (0, jsx_runtime_1.jsx)(material_1.MenuItem, { children: (0, jsx_runtime_1.jsxs)(material_1.Box, { component: react_share_1.TwitterShareButton, url: url, title: content, sx: buttonSx, children: [(0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ component: react_share_1.XIcon, sx: itemIconSx, round: true }, iconProps)), (0, jsx_runtime_1.jsx)("span", { children: t('socialShare.shareToX') })] }) }, "shareOnX"),
             (0, jsx_runtime_1.jsx)(material_1.MenuItem, { children: (0, jsx_runtime_1.jsxs)(material_1.Box, { component: react_share_1.TelegramShareButton, url: url, title: content, sx: buttonSx, children: [(0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ component: react_share_1.TelegramIcon, sx: itemIconSx, round: true }, iconProps)), (0, jsx_runtime_1.jsx)("span", { children: t('socialShare.shareToTelegram') })] }) }, "shareOnTelegram"),
             (0, jsx_runtime_1.jsx)(material_1.MenuItem, { children: (0, jsx_runtime_1.jsxs)(material_1.Box, { component: react_share_1.RedditShareButton, url: url, title: content, sx: buttonSx, children: [(0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ component: react_share_1.RedditIcon, sx: itemIconSx, round: true }, iconProps)), (0, jsx_runtime_1.jsx)("span", { children: t('socialShare.shareToReddit') })] }) }, "shareOnReddit"),
             (0, jsx_runtime_1.jsx)(material_1.MenuItem, { children: (0, jsx_runtime_1.jsxs)(material_1.Box, { component: react_share_1.WeiboShareButton, url: url, title: content, sx: buttonSx, children: [(0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ component: react_share_1.WeiboIcon, sx: itemIconSx, round: true }, iconProps)), (0, jsx_runtime_1.jsx)("span", { children: t('socialShare.shareToWeibo') })] }) }, "shareOnWeibo"),
             (0, jsx_runtime_1.jsx)(material_1.MenuItem, { children: (0, jsx_runtime_1.jsxs)(material_1.Box, { component: react_share_1.FacebookShareButton, url: url, sx: buttonSx, children: [(0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ component: react_share_1.FacebookIcon, sx: itemIconSx, round: true }, iconProps)), (0, jsx_runtime_1.jsx)("span", { children: t('socialShare.shareToFacebook') })] }) }, "shareOnFacebook"),
             (0, jsx_runtime_1.jsx)(material_1.MenuItem, { children: (0, jsx_runtime_1.jsxs)(material_1.Box, { component: react_share_1.LinkedinShareButton, url: url, summary: content, sx: buttonSx, children: [(0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ component: react_share_1.LinkedinIcon, sx: itemIconSx, round: true }, iconProps)), (0, jsx_runtime_1.jsx)("span", { children: t('socialShare.shareToLinkedin') })] }) }, "shareOnLinkedin"),
-            (0, jsx_runtime_1.jsx)(material_1.MenuItem, { children: (0, jsx_runtime_1.jsxs)(material_1.Box, { component: "div", sx: buttonSx, onClick: () => {
+            !disableCopyLink && ((0, jsx_runtime_1.jsx)(material_1.MenuItem, { children: (0, jsx_runtime_1.jsxs)(material_1.Box, { component: "div", sx: buttonSx, onClick: () => {
                         window.navigator.clipboard.writeText(url);
-                    }, children: [(0, jsx_runtime_1.jsx)(material_1.Box, { sx: itemIconSx, round: true, children: (0, jsx_runtime_1.jsx)(react_1.Icon, Object.assign({ icon: "tabler:link" }, iconProps)) }), (0, jsx_runtime_1.jsx)("span", { children: t('socialShare.copyLink') })] }) }, "copyToClipboard"),
-        ], children: renderShareIcon() }));
+                    }, children: [(0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ sx: itemIconSx, round: true }, iconProps, { children: (0, jsx_runtime_1.jsx)(react_1.Icon, { icon: "tabler:link" }) })), (0, jsx_runtime_1.jsx)("span", { children: t('socialShare.copyLink') })] }) }, "copyToClipboard")),
+        ].filter(Boolean) }, restProps, { children: children })));
 }
 exports.SocialShareMenu = SocialShareMenu;
 function SocialShareButtons(_a) {

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

@@ -188,6 +188,12 @@ function ThemeProvider({ children, template, transparentHeaderBg, }) {
                             zIndex: -1,
                         },
                     },
+                    '.white-tooltip .MuiTooltip-tooltip': {
+                        background: 'white !important',
+                        boxShadow: '0px 4px 8px 0px rgba(3, 7, 18, 0.08)',
+                        border: '1px solid rgba(229, 231, 235, 1)',
+                        padding: 4,
+                    },
                 } }), children] }));
 }
 exports.default = ThemeProvider;

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

@@ -84,6 +84,6 @@ function ParameterForm(_a) {
                                     transform: `rotateX(${expand ? '180deg' : '0deg'})`,
                                     transition: 'transform .3s ease-in-out',
                                 } }) }) }), (0, jsx_runtime_1.jsx)(material_1.Collapse, { in: expand, orientation: "vertical", sx: { maxHeight: '40vh', overflowY: 'auto' }, children: (0, jsx_runtime_1.jsx)(ParameterFormFields_1.default, { autoFocus: !sessionId, disabled: disabled, readOnly: readOnly, parameters: parameters, form: form, sx: { pb: 2, px: 2 } }) })] })), (0, jsx_runtime_1.jsx)(material_1.Box, { px: 2, children: !hideSubmit &&
-                    (isChat ? ((0, jsx_runtime_1.jsx)(QuestionField_1.default, { sessionId: sessionId, showSettingButton: !!sessionId, assistant: assistant, disabled: disabled, submitButtonTitle: submitButtonTitle, readOnly: readOnly, isSubmitting: isSubmitting, form: form, autoFocus: !!sessionId })) : ((0, jsx_runtime_1.jsxs)(material_1.Stack, { className: "ai-chat-generation-bar", direction: "row", alignItems: "center", justifyContent: "flex-end", gap: 2, children: [sessionId && (0, jsx_runtime_1.jsx)(SettingButton_1.default, { form: form, sessionId: sessionId }), (0, jsx_runtime_1.jsx)(material_1.Box, { flex: 1 }), (0, jsx_runtime_1.jsx)(material_1.Tooltip, { title: submitButtonTitle, disableInteractive: true, placement: "top", children: (0, jsx_runtime_1.jsx)("span", { children: (0, jsx_runtime_1.jsx)(LoadingButton_1.default, { disabled: disabled, type: "submit", variant: "contained", color: "secondary", loading: form.formState.isSubmitting || isSubmitting, children: submitButtonTitle || t('submit') }) }) })] }))) })] }));
+                    (isChat ? ((0, jsx_runtime_1.jsx)(QuestionField_1.default, { sessionId: sessionId, showSettingButton: !!sessionId, assistant: assistant, disabled: disabled, submitButtonTitle: submitButtonTitle || t('send'), readOnly: readOnly, isSubmitting: isSubmitting, form: form, autoFocus: !!sessionId })) : ((0, jsx_runtime_1.jsxs)(material_1.Stack, { className: "ai-chat-generation-bar", direction: "row", alignItems: "center", justifyContent: "flex-end", gap: 2, children: [sessionId && (0, jsx_runtime_1.jsx)(SettingButton_1.default, { form: form, sessionId: sessionId }), (0, jsx_runtime_1.jsx)(material_1.Box, { flex: 1 }), (0, jsx_runtime_1.jsx)(material_1.Tooltip, { title: submitButtonTitle, disableInteractive: true, placement: "top", children: (0, jsx_runtime_1.jsx)("span", { children: (0, jsx_runtime_1.jsx)(LoadingButton_1.default, { disabled: disabled, type: "submit", variant: "contained", color: "secondary", loading: form.formState.isSubmitting || isSubmitting, children: submitButtonTitle || t('send') }) }) })] }))) })] }));
 }
 exports.default = ParameterForm;

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

@@ -15,24 +15,55 @@ 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");
 function MessageActions(_a) {
     var { content } = _a, props = __rest(_a, ["content"]);
     const { t } = (0, locale_1.useLocaleContext)();
     const commonActionButtonsSx = {
         border: '0px !important',
+        borderRadius: '4px !important',
         minWidth: '32px',
         color: 'rgba(75, 85, 99, 1)',
         '.MuiButton-startIcon': {
             marginRight: '0px !important',
         },
     };
-    return ((0, jsx_runtime_1.jsx)(material_1.Stack, Object.assign({ direction: "row", gap: 1 }, props, { children: (0, jsx_runtime_1.jsx)(ActionButton_1.ActionButton, { autoReset: true, size: "small", variant: "outlined", 
-            // @ts-ignore
-            color: "black", tip: t('copyToClipboard'), 
-            // title={t('copy')}
-            // titleSucceed={t('copied')}
-            icon: "tabler:copy", iconSucceed: "tabler:copy-check-filled", sx: Object.assign({}, commonActionButtonsSx), onClick: () => {
-                window.navigator.clipboard.writeText(content);
-            } }) })));
+    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", 
+                // @ts-ignore
+                color: "black", tip: t('copyToClipboard'), 
+                // title={t('copy')}
+                // titleSucceed={t('copied')}
+                icon: "tabler:copy", iconSucceed: "tabler:copy-check-filled", sx: Object.assign({}, commonActionButtonsSx), onClick: () => {
+                    window.navigator.clipboard.writeText(content);
+                } }), (0, jsx_runtime_1.jsx)(SocialShare_1.SocialShareMenu, { content: content, disableCopyLink: true, size: "small", disableRipple: true, MenuProps: {
+                    anchorOrigin: {
+                        vertical: 'center',
+                        horizontal: 'right',
+                    },
+                    transformOrigin: {
+                        vertical: 'top',
+                        horizontal: 'left',
+                    },
+                    slotProps: {
+                        paper: {
+                            sx: {
+                                ml: 1.5,
+                                mt: -2,
+                                border: 1,
+                                borderColor: 'divider',
+                                boxShadow: '0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)',
+                            },
+                        },
+                    },
+                    sx: {
+                        zIndex: 9999,
+                    },
+                }, sx: {
+                    '.MuiIconButton-root': {
+                        p: 0,
+                    },
+                }, children: (0, jsx_runtime_1.jsx)(ActionButton_1.ActionButton, { 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) }) })] })));
 }
 exports.default = MessageActions;

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

@@ -13,17 +13,11 @@ function MessageErrorView({ assistantId, assistant, error, }) {
     const { t } = (0, locale_1.useLocaleContext)();
     const { subscribeLink } = (0, subscribe_1.useSubscribeLink)({ assistantId });
     if (error.type === 'InvalidSubscriptionError') {
-        return ((0, jsx_runtime_1.jsxs)(material_1.Box, { className: "ai-chat-message-error", children: [(0, jsx_runtime_1.jsx)(material_1.Box, { sx: {
-                        bgcolor: 'grey.100',
-                        p: 1.5,
-                        borderRadius: 1,
-                    }, children: (0, jsx_runtime_1.jsx)(MarkdownRenderer_1.default, { children: t('requireNewSubscription', {
+        return ((0, jsx_runtime_1.jsxs)(material_1.Box, { className: "ai-chat-message-error", children: [(0, jsx_runtime_1.jsx)(material_1.Box, { className: "message-response", children: (0, jsx_runtime_1.jsx)(MarkdownRenderer_1.default, { children: t('requireNewSubscription', {
                             price: (_b = (_a = assistant.release) === null || _a === void 0 ? void 0 : _a.payment) === null || _b === void 0 ? void 0 : _b.price,
-                        }) }) }), (0, jsx_runtime_1.jsx)(material_1.Box, { mt: 1, children: subscribeLink ? ((0, jsx_runtime_1.jsx)(material_1.Button, { variant: "contained", href: subscribeLink, children: t('subscribeNow') })) : ((0, jsx_runtime_1.jsx)(material_1.Box, { sx: {
-                            bgcolor: 'grey.100',
-                            p: 1.5,
-                            borderRadius: 1,
-                        }, children: t('thanksForSubscription') })) })] }));
+                        }) }) }), (0, jsx_runtime_1.jsx)(material_1.Box, { mt: 1, children: subscribeLink ? (
+                    // @ts-ignore
+                    (0, jsx_runtime_1.jsx)(material_1.Button, { variant: "contained", color: "black", href: subscribeLink, children: t('subscribeNow') })) : ((0, jsx_runtime_1.jsx)(material_1.Box, { className: "message-response", children: t('thanksForSubscription') })) })] }));
     }
     return ((0, jsx_runtime_1.jsx)(material_1.Alert, { className: "ai-chat-message-error", severity: "error", children: (error.type === 'ReachMaxRoundLimitError' && ((_c = assistant === null || assistant === void 0 ? void 0 : assistant.release) === null || _c === void 0 ? void 0 : _c.reachMaxRoundLimitTip)) || error.message }));
 }

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

@@ -40,37 +40,31 @@ const MessageErrorView_1 = __importDefault(require("./MessageErrorView"));
 function MessageItemView({ assistantId, assistant, message, hideAvatar, }) {
     var _a, _b;
     const showUserMessage = ((_a = assistant.release) === null || _a === void 0 ? void 0 : _a.template) !== 'form' && !!((_b = message.parameters) === null || _b === void 0 ? void 0 : _b.question);
-    return ((0, jsx_runtime_1.jsxs)(material_1.Stack, { className: "ai-chat-message-item", gap: 2.5, overflow: "hidden", sx: {
-            '.message-question': Object.assign(Object.assign({}, commonMessageSx), { borderTopRightRadius: '2px', backgroundColor: 'rgba(239, 246, 255, 1)' }),
-            '.message-response': Object.assign(Object.assign({}, commonMessageSx), { borderTopLeftRadius: '2px', backgroundColor: 'rgba(229, 231, 235, 1)' }),
-            '.ai-chat-message-ai:hover': {
-                '.message-actions': {
-                    opacity: 1,
-                },
-            },
+    const commonMessageSx = {
+        position: 'relative',
+        borderRadius: 1,
+        py: 1,
+        px: 2,
+        mt: 0.5,
+        // without logo width
+        maxWidth: 'calc(100% - 40px)',
+    };
+    return ((0, jsx_runtime_1.jsxs)(material_1.Stack, { className: "ai-chat-message-item", gap: 2.5, overflow: "hidden", 
+        // @ts-ignore
+        sx: {
+            '.message-question': Object.assign(Object.assign(Object.assign({}, commonMessageSx), (!hideAvatar
+                ? {
+                    borderTopRightRadius: '2px',
+                }
+                : {})), { borderTopRightRadius: !hideAvatar && '2px', backgroundColor: 'rgba(239, 246, 255, 1)' }),
+            '.message-response': Object.assign(Object.assign(Object.assign({}, commonMessageSx), (!hideAvatar
+                ? {
+                    borderTopLeftRadius: '2px',
+                }
+                : {})), { backgroundColor: 'rgba(229, 231, 235, 1)' }),
         }, children: [showUserMessage && (0, jsx_runtime_1.jsx)(UserMessage, { message: message }), (0, jsx_runtime_1.jsx)(AgentMessage, { assistantId: assistantId, assistant: assistant, message: message, hideAvatar: hideAvatar })] }));
 }
 exports.default = MessageItemView;
-const commonMessageSx = {
-    position: 'relative',
-    borderRadius: 1,
-    py: 1,
-    px: 2,
-    mt: 0.5,
-    // without logo width
-    maxWidth: 'calc(100% - 40px)',
-    '.message-actions': {
-        position: 'absolute',
-        top: 0,
-        right: -40,
-        background: 'white',
-        border: 1,
-        borderRadius: 1,
-        borderColor: 'grey.300',
-        opacity: 0,
-        transition: 'opacity 0.2s',
-    },
-};
 function UserMessage({ message }) {
     var _a, _b, _c, _d;
     const { session: authSession } = (0, session_1.useSessionContext)();
@@ -86,21 +80,39 @@ function UserMessage({ message }) {
                 }, 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 })] })] }));
 }
 function AgentMessage({ assistantId, assistant, message, hideAvatar, }) {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
     const showMainMessage = !!(((_a = message.result) === null || _a === void 0 ? void 0 : _a.content) || ((_c = (_b = message.result) === null || _b === void 0 ? void 0 : _b.messages) === null || _c === void 0 ? void 0 : _c.length));
     const isMessageLoading = (message.loading || !message.result) && !message.error;
-    return ((0, jsx_runtime_1.jsxs)(material_1.Stack, { className: "ai-chat-message-ai", direction: "row", gap: 1.5, children: [!hideAvatar && ((0, jsx_runtime_1.jsx)(material_1.Box, { children: (0, jsx_runtime_1.jsx)(ux_1.Avatar, { size: 40, did: (_d = globalThis.blocklet) === null || _d === void 0 ? void 0 : _d.appId, variant: "circle", shape: "circle", src: (_e = assistant.release) === null || _e === void 0 ? void 0 : _e.logo }) })), (0, jsx_runtime_1.jsxs)(material_1.Box, { flex: 1, overflow: "hidden", children: [!hideAvatar && ((0, jsx_runtime_1.jsxs)(MessageUserName, { children: [((_f = assistant.release) === null || _f === void 0 ? void 0 : _f.title) || assistant.name, (0, jsx_runtime_1.jsx)(MessageTime, { time: message.createdAt })] })), (0, jsx_runtime_1.jsxs)(react_1.default.Suspense, { children: [showMainMessage ? ((0, jsx_runtime_1.jsxs)(material_1.Stack, { gap: 1, className: "message-response", children: [(_h = (_g = message.result) === null || _g === void 0 ? void 0 : _g.messages) === null || _h === void 0 ? void 0 : _h.map((childMsg, index) => {
-                                        var _a, _b, _c, _d, _e, _f, _g;
-                                        return ((_a = childMsg.result) === null || _a === void 0 ? void 0 : _a.content) ? ((0, jsx_runtime_1.jsx)(MarkdownRenderer_1.default, { className: isMessageLoading &&
-                                                !((_b = message.result) === null || _b === void 0 ? void 0 : _b.content) &&
-                                                !((_d = (_c = message.result) === null || _c === void 0 ? void 0 : _c.images) === null || _d === void 0 ? void 0 : _d.length) &&
-                                                message.result.messages.length - 1 === index
-                                                ? 'writing'
-                                                : '', 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 && ((_k = message.result) === null || _k === void 0 ? void 0 : _k.content) && ((0, jsx_runtime_1.jsx)(MessageActions_1.default, { className: "message-actions", content: message.result.content }))] })) : (isMessageLoading && ((0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "rectangular", height: 24 + 8 + 8, 
+    const theme = (0, material_1.useTheme)();
+    const isMobile = (0, material_1.useMediaQuery)(theme.breakpoints.down('sm'));
+    const isFormTemplate = ((_d = assistant.release) === null || _d === void 0 ? void 0 : _d.template) === 'form';
+    return ((0, jsx_runtime_1.jsxs)(material_1.Stack, { className: "ai-chat-message-ai", direction: "row", gap: 1.5, children: [!hideAvatar && ((0, jsx_runtime_1.jsx)(material_1.Box, { children: (0, jsx_runtime_1.jsx)(ux_1.Avatar, { size: 40, did: (_e = globalThis.blocklet) === null || _e === void 0 ? void 0 : _e.appId, variant: "circle", shape: "circle", src: (_f = assistant.release) === null || _f === void 0 ? void 0 : _f.logo }) })), (0, jsx_runtime_1.jsxs)(material_1.Box, { flex: 1, overflow: "hidden", children: [!hideAvatar && ((0, jsx_runtime_1.jsxs)(MessageUserName, { children: [((_g = assistant.release) === null || _g === void 0 ? void 0 : _g.title) || assistant.name, (0, jsx_runtime_1.jsx)(MessageTime, { time: message.createdAt })] })), (0, jsx_runtime_1.jsxs)(react_1.default.Suspense, { children: [showMainMessage ? ((0, jsx_runtime_1.jsx)(material_1.Tooltip, Object.assign({}, (isFormTemplate && {
+                                open: true,
+                            }), { placement: "right-start", PopperProps: {
+                                    className: 'white-tooltip',
+                                }, slotProps: {
+                                    popper: {
+                                        modifiers: [
+                                            {
+                                                name: 'offset',
+                                                options: {
+                                                    offset: [-3, isMobile ? (!hideAvatar ? -18 : -8) : -6],
+                                                },
+                                            },
+                                        ],
+                                    },
+                                }, title: !isMessageLoading && ((_h = message.result) === null || _h === void 0 ? void 0 : _h.content) && (0, jsx_runtime_1.jsx)(MessageActions_1.default, { content: message.result.content }), children: (0, jsx_runtime_1.jsxs)(material_1.Stack, { gap: 1, className: "message-response", children: [(_k = (_j = message.result) === null || _j === void 0 ? void 0 : _j.messages) === null || _k === void 0 ? void 0 : _k.map((childMsg, index) => {
+                                            var _a, _b, _c, _d, _e, _f, _g;
+                                            return ((_a = childMsg.result) === null || _a === void 0 ? void 0 : _a.content) ? ((0, jsx_runtime_1.jsx)(MarkdownRenderer_1.default, { className: isMessageLoading &&
+                                                    !((_b = message.result) === null || _b === void 0 ? void 0 : _b.content) &&
+                                                    !((_d = (_c = message.result) === null || _c === void 0 ? void 0 : _c.images) === null || _d === void 0 ? void 0 : _d.length) &&
+                                                    message.result.messages.length - 1 === index
+                                                    ? 'writing'
+                                                    : '', 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;
+                                        }), ((_l = message.result) === null || _l === void 0 ? void 0 : _l.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" }))), !!((_m = (_l = message.result) === null || _l === void 0 ? void 0 : _l.objects) === null || _m === void 0 ? void 0 : _m.length) &&
-                                ((_p = (_o = message.result) === null || _o === void 0 ? void 0 : _o.objects) === null || _p === void 0 ? void 0 : _p.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, { assistantId: assistantId, assistant: assistant, error: message.error })] })] })] }));
+                                className: "message-response" }))), !!((_o = (_m = message.result) === null || _m === void 0 ? void 0 : _m.objects) === null || _o === void 0 ? void 0 : _o.length) &&
+                                ((_q = (_p = message.result) === null || _p === void 0 ? void 0 : _p.objects) === null || _q === void 0 ? void 0 : _q.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, { assistantId: assistantId, assistant: assistant, error: message.error })] })] })] }));
 }
 function MessageUserName({ children }) {
     return ((0, jsx_runtime_1.jsx)(material_1.Typography, { component: "div", noWrap: true, sx: {

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

@@ -16,7 +16,7 @@ const PoweredBy_1 = __importDefault(require("../PoweredBy"));
 const ScrollView_1 = require("../ScrollView");
 const InitialForm_1 = require("./InitialForm");
 function RuntimeChatSession({ page }) {
-    var _a, _b, _c, _d, _e, _f, _g, _h;
+    var _a, _b, _c, _d, _e, _f;
     const [session, state] = (0, session_1.useSessionState)({ sessionId: page.sessionId, required: true });
     const [assistant] = (0, assistant_1.useAssistantState)({ assistantId: page.assistantId });
     const lastMessage = (_a = state.messages) === null || _a === void 0 ? void 0 : _a.slice(-1)[0];
@@ -47,6 +47,6 @@ function RuntimeChatSession({ page }) {
                     bottom: 0,
                     // 从上透明到白色 0.72 的径向渐变
                     background: (theme) => `linear-gradient(180deg, ${(0, material_1.alpha)(theme.palette.background.default, 0.1)}, ${(0, material_1.alpha)(theme.palette.background.default, 1)} 16px)`,
-                }, children: [(0, jsx_runtime_1.jsx)(ParameterForm_1.default, { sessionId: page.sessionId, defaultValues: lastMessage === null || lastMessage === void 0 ? void 0 : lastMessage.parameters, assistant: assistant, onSubmit: onSubmit, isSubmitting: state.running, submitButtonTitle: (_h = (_g = assistant.release) === null || _g === void 0 ? void 0 : _g.submitButton) === null || _h === void 0 ? void 0 : _h.title }), (0, jsx_runtime_1.jsx)(PoweredBy_1.default, { assistantId: page.assistantId, sx: { my: 0.5, px: 2 } })] })] }));
+                }, children: [(0, jsx_runtime_1.jsx)(ParameterForm_1.default, { sessionId: page.sessionId, defaultValues: lastMessage === null || lastMessage === void 0 ? void 0 : lastMessage.parameters, assistant: assistant, onSubmit: onSubmit, isSubmitting: state.running }), (0, jsx_runtime_1.jsx)(PoweredBy_1.default, { assistantId: page.assistantId, sx: { my: 0.5, px: 2 } })] })] }));
 }
 exports.default = RuntimeChatSession;

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

@@ -24,11 +24,12 @@ 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("@iconify/react");
 const material_1 = require("@mui/material");
-const react_1 = require("react");
+const isEmpty_1 = __importDefault(require("lodash/isEmpty"));
+const react_2 = require("react");
 const react_hook_form_1 = require("react-hook-form");
 const locale_1 = require("../../../../locale");
-const material_2 = require("../../../../mui/material");
 const session_1 = require("../../../../session");
 const session_2 = require("../../api/session");
 const assistant_1 = require("../../state/assistant");
@@ -40,8 +41,14 @@ function RuntimeFormForms(_a) {
     var _b, _c, _d;
     var { page } = _a, props = __rest(_a, ["page"]);
     const { t } = (0, locale_1.useLocaleContext)();
+    const theme = (0, material_1.useTheme)();
+    const isMobile = (0, material_1.useMediaQuery)(theme.breakpoints.down('sm'));
     const [agent] = (0, assistant_1.useAssistantState)({ assistantId: page.assistantId });
-    const lastParameters = (0, react_1.useMemo)(() => {
+    const spacing = {
+        md: 2.5,
+        xs: 2,
+    };
+    const lastParameters = (0, react_2.useMemo)(() => {
         var _a;
         if (page.sessionId) {
             const { session, messages = [] } = (0, session_3.createSessionState)({ sessionId: page.sessionId }).getState();
@@ -50,7 +57,7 @@ function RuntimeFormForms(_a) {
         }
         return undefined;
     }, [page.sessionId]);
-    const defaultForm = (0, react_1.useMemo)(() => {
+    const defaultForm = (0, react_2.useMemo)(() => {
         var _a, _b;
         return Object.fromEntries((_b = (_a = agent.parameters) === null || _a === void 0 ? void 0 : _a.map((parameter) => [
             parameter.key,
@@ -58,10 +65,11 @@ function RuntimeFormForms(_a) {
         ])) !== null && _b !== void 0 ? _b : []);
     }, [agent.parameters, lastParameters]);
     const form = (0, react_hook_form_1.useForm)({ defaultValues: defaultForm });
-    const [error, setError] = (0, react_1.useState)();
+    const [error, setError] = (0, react_2.useState)();
+    const [expand, setExpand] = (0, react_2.useState)(false);
     const { session } = (0, session_1.useSessionContext)();
-    const [submitting, setSubmitting] = (0, react_1.useState)(false);
-    (0, react_1.useEffect)(() => {
+    const [submitting, setSubmitting] = (0, react_2.useState)(false);
+    (0, react_2.useEffect)(() => {
         form.reset(defaultForm);
     }, [defaultForm]);
     const onSubmit = (parameters) => __awaiter(this, void 0, void 0, function* () {
@@ -94,27 +102,38 @@ function RuntimeFormForms(_a) {
         }
     });
     const handleSubmit = (e) => __awaiter(this, void 0, void 0, function* () {
+        var _e;
         e.preventDefault();
         if (!session.user) {
             yield new Promise((resolve) => {
                 session.login(() => resolve());
             });
         }
+        (_e = agent.parameters) === null || _e === void 0 ? void 0 : _e.some((parameter) => {
+            if (parameter.required && (0, isEmpty_1.default)(form.getValues(parameter.key))) {
+                setExpand(true);
+                return true;
+            }
+            return false;
+        });
+        // focus the first error field
+        form.trigger();
         return form.handleSubmit(onSubmit)(e);
     });
     const openerMessage = (_b = agent.release) === null || _b === void 0 ? void 0 : _b.openerMessage;
-    return ((0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ gap: 10, component: "form" }, props, { onSubmit: handleSubmit, children: [(0, jsx_runtime_1.jsxs)(material_1.Stack, { gap: 2, children: [(0, jsx_runtime_1.jsx)(material_1.Stack, { sx: { fontSize: 32, py: 2.5, mb: -2 }, children: "\uD83D\uDC69\uD83C\uDFFB\u200D\uD83D\uDCBB" }), openerMessage && (0, jsx_runtime_1.jsx)(material_1.Box, { sx: { color: 'text.secondary' }, children: openerMessage }), (0, jsx_runtime_1.jsx)(ParameterFormFields_1.default, { parameters: agent.parameters, form: form })] }), (0, jsx_runtime_1.jsx)(react_1.Suspense, { children: (0, jsx_runtime_1.jsxs)(material_1.Stack, { sx: {
-                        gap: 1,
-                        position: 'sticky',
-                        bottom: 0,
-                        pb: 1,
-                        pt: 1,
-                        // 从上透明到白色 0.72 的径向渐变
-                        background: (theme) => `linear-gradient(180deg, ${(0, material_2.alpha)(theme.palette.background.default, 0.1)}, ${(0, material_2.alpha)(theme.palette.background.default, 1)} 5%)`,
-                    }, children: [error && (0, jsx_runtime_1.jsx)(material_1.Alert, { severity: "error", children: error.message }), (0, jsx_runtime_1.jsx)(RuntimeFormSubmit_1.default, { page: page, type: "submit", variant: "contained", fullWidth: true, loading: submitting, sx: {
-                                borderRadius: 100,
-                                height: 44,
-                                background: 'linear-gradient(90deg, rgb(69, 228, 250) 0%, rgb(138, 69, 250) 52.08%, rgb(250, 69, 188) 100%)',
-                            }, children: ((_d = (_c = agent.release) === null || _c === void 0 ? void 0 : _c.submitButton) === null || _d === void 0 ? void 0 : _d.title) || t('submit') })] }) })] })));
+    return ((0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ component: "form" }, props, { onSubmit: handleSubmit, children: [isMobile && ((0, jsx_runtime_1.jsx)(material_1.Button, { sx: { minWidth: 0, px: 4, py: 0, opacity: 0.7, color: 'text.secondary' }, onClick: () => setExpand(!expand), children: (0, jsx_runtime_1.jsx)(material_1.Box, { component: react_1.Icon, icon: "tabler:chevron-compact-up", sx: {
+                        fontSize: 24,
+                        transform: `rotateX(${expand ? '180deg' : '0deg'})`,
+                        transition: 'transform .3s ease-in-out',
+                    } }) })), (0, jsx_runtime_1.jsx)(material_1.Collapse, { in: expand || !isMobile, orientation: "vertical", sx: {
+                    maxHeight: isMobile ? undefined : '40vh',
+                    overflowY: 'auto',
+                }, children: (0, jsx_runtime_1.jsxs)(material_1.Stack, { gap: 2, children: [openerMessage && (0, jsx_runtime_1.jsx)(material_1.Box, { sx: { color: 'text.secondary', px: spacing }, children: openerMessage }), (0, jsx_runtime_1.jsx)(ParameterFormFields_1.default, { parameters: agent.parameters, form: form, sx: { pb: 2, px: spacing } })] }) }), (0, jsx_runtime_1.jsx)(react_2.Suspense, { children: (0, jsx_runtime_1.jsxs)(material_1.Stack, { gap: 2, sx: {
+                        px: spacing,
+                    }, children: [error && (0, jsx_runtime_1.jsx)(material_1.Alert, { severity: "error", children: error.message }), (0, jsx_runtime_1.jsx)(RuntimeFormSubmit_1.default, { page: page, type: "submit", variant: "contained", fullWidth: true, loading: submitting, 
+                            // @ts-ignore
+                            color: "black", sx: {
+                                height: 40,
+                            }, children: ((_d = (_c = agent.release) === null || _c === void 0 ? void 0 : _c.submitButton) === null || _d === void 0 ? void 0 : _d.title) || t('send') })] }) })] })));
 }
 exports.default = RuntimeFormForms;

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

@@ -1,4 +1,27 @@
 "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)
@@ -13,10 +36,21 @@ var __rest = (this && this.__rest) || function (s, e) {
 Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
 const material_1 = require("@mui/material");
+const react_wrap_balancer_1 = __importStar(require("react-wrap-balancer"));
 const ux_1 = require("../../../../arcblock/ux");
 function RuntimeFormHeader(_a) {
     var _b, _c, _d;
     var { agent } = _a, props = __rest(_a, ["agent"]);
-    return ((0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ direction: "row", justifyContent: "space-between", alignItems: "center", gap: 2, bgcolor: "rgb(246, 242, 255)" }, props, { children: [(0, jsx_runtime_1.jsxs)(material_1.Stack, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { component: "h5", sx: { fontSize: 32, fontWeight: 700 }, children: ((_b = agent.release) === null || _b === void 0 ? void 0 : _b.title) || agent.name }), (0, jsx_runtime_1.jsx)(material_1.Typography, { sx: { fontSize: 16, color: 'rgb(147, 151, 161)' }, children: ((_c = agent.release) === null || _c === void 0 ? void 0 : _c.description) || agent.description })] }), (0, jsx_runtime_1.jsx)(material_1.Stack, { children: (0, jsx_runtime_1.jsx)(material_1.Box, { component: ux_1.Avatar, size: 88, src: (_d = agent.release) === null || _d === void 0 ? void 0 : _d.logo, did: blocklet === null || blocklet === void 0 ? void 0 : blocklet.appId, borderRadius: 1 }) })] })));
+    return ((0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ direction: {
+            md: 'row',
+            xs: 'column',
+        }, justifyContent: "space-between", alignItems: "center", gap: 2 }, props, { children: [(0, jsx_runtime_1.jsx)(material_1.Stack, { children: (0, jsx_runtime_1.jsx)(material_1.Box, { component: ux_1.Avatar, size: 120, src: (_b = agent.release) === null || _b === void 0 ? void 0 : _b.logo, did: blocklet === null || blocklet === void 0 ? void 0 : blocklet.appId, borderRadius: 1 }) }), (0, jsx_runtime_1.jsx)(react_wrap_balancer_1.Provider, { children: (0, jsx_runtime_1.jsxs)(material_1.Stack, { spacing: 1, sx: {
+                        flex: 1,
+                        lineHeight: '28px',
+                        textAlign: {
+                            md: 'left',
+                            xs: 'center',
+                        },
+                    }, children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { component: "h5", sx: { fontSize: 18, fontWeight: 600 }, children: (0, jsx_runtime_1.jsx)(react_wrap_balancer_1.default, { children: ((_c = agent.release) === null || _c === void 0 ? void 0 : _c.title) || agent.name }) }), (0, jsx_runtime_1.jsx)(material_1.Typography, { sx: { fontSize: 16, color: 'rgba(75, 85, 99, 1)' }, children: (0, jsx_runtime_1.jsx)(react_wrap_balancer_1.default, { children: ((_d = agent.release) === null || _d === void 0 ? void 0 : _d.description) || agent.description }) })] }) })] })));
 }
 exports.default = RuntimeFormHeader;