@blocklet/pages-kit 0.2.288 → 0.2.290

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

@@ -15,17 +15,9 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
-const subscribe_1 = require("../../hooks/subscribe");
 const LoadingButton_1 = __importDefault(require("../LoadingButton"));
-const PoweredBy_1 = __importDefault(require("../PoweredBy"));
 function RuntimeFormSubmit(_a) {
     var { page } = _a, props = __rest(_a, ["page"]);
-    const { subscribeLink } = (0, subscribe_1.useSubscribeLink)({ assistantId: page.assistantId });
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(LoadingButton_1.default, Object.assign({}, props, { onClick: (e) => {
-                    if (subscribeLink) {
-                        e.preventDefault();
-                        window.location.href = subscribeLink;
-                    }
-                } })), (0, jsx_runtime_1.jsx)(PoweredBy_1.default, { assistantId: page.assistantId })] }));
+    return (0, jsx_runtime_1.jsx)(LoadingButton_1.default, Object.assign({}, props));
 }
 exports.default = RuntimeFormSubmit;

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

@@ -5,18 +5,46 @@ 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 material_2 = require("../../../../mui/material");
 const assistant_1 = require("../../state/assistant");
+const PoweredBy_1 = __importDefault(require("../PoweredBy"));
 const RuntimeFormForms_1 = __importDefault(require("./RuntimeFormForms"));
 const RuntimeFormHeader_1 = __importDefault(require("./RuntimeFormHeader"));
 const RuntimeFormResult_1 = __importDefault(require("./RuntimeFormResult"));
 function RuntimeForm({ page }) {
     const [agent] = (0, assistant_1.useAssistantState)({ assistantId: page.assistantId });
-    return ((0, jsx_runtime_1.jsxs)(material_1.Stack, { sx: { flexGrow: { xs: 'unset', md: 1 } }, children: [(0, jsx_runtime_1.jsx)(RuntimeFormHeader_1.default, { agent: agent, sx: {
-                    position: 'sticky',
-                    top: 64,
-                    zIndex: 10,
-                    px: { xs: 2, sm: 3, md: 8 },
-                    py: { xs: 2, sm: 3, md: 5 },
-                } }), (0, jsx_runtime_1.jsxs)(material_1.Stack, { sx: { flexGrow: 1, flexDirection: { xs: 'column', md: 'row' } }, children: [(0, jsx_runtime_1.jsx)(material_1.Stack, { sx: { flex: 1, px: { xs: 2, sm: 3, md: 4 }, ml: { xs: 0, md: 4 } }, children: (0, jsx_runtime_1.jsx)(RuntimeFormForms_1.default, { page: page, sx: { position: 'sticky', top: 232 } }) }), (0, jsx_runtime_1.jsx)(material_1.Divider, { orientation: "vertical", sx: { borderColor: 'grey.200', my: { xs: 2, sm: 3, md: 0 } } }), (0, jsx_runtime_1.jsx)(material_1.Box, { sx: { flex: 2 }, children: (0, jsx_runtime_1.jsx)(RuntimeFormResult_1.default, { page: page }) })] })] }));
+    const theme = (0, material_1.useTheme)();
+    const isMobile = (0, material_1.useMediaQuery)(theme.breakpoints.down('md'));
+    const spacing = {
+        md: 5,
+        xs: 2,
+    };
+    return ((0, jsx_runtime_1.jsx)(material_1.Box, { sx: {
+            flex: 1,
+            display: 'flex',
+        }, children: (0, jsx_runtime_1.jsxs)(material_1.Stack, { divider: (0, jsx_runtime_1.jsx)(material_1.Divider, { orientation: "vertical", flexItem: true }), direction: {
+                md: 'row',
+                xs: 'column',
+            }, sx: {
+                flex: 1,
+            }, children: [(0, jsx_runtime_1.jsxs)(material_1.Box, { sx: {
+                        flex: 2,
+                        px: spacing,
+                        py: isMobile ? 4 : spacing,
+                        pb: '0 !important',
+                        display: 'flex',
+                        flexDirection: 'column',
+                        justifyContent: 'space-between',
+                    }, children: [(0, jsx_runtime_1.jsxs)(material_1.Stack, { gap: isMobile ? spacing : 1, spacing: spacing, children: [(0, jsx_runtime_1.jsx)(RuntimeFormHeader_1.default, { agent: agent }), (0, jsx_runtime_1.jsx)(RuntimeFormResult_1.default, { page: page })] }), !isMobile && (0, jsx_runtime_1.jsx)(PoweredBy_1.default, { assistantId: page.assistantId, sx: { mt: spacing, mb: 0.5, px: 2, pt: 0 } })] }), (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: {
+                        flex: {
+                            md: 1,
+                            xs: 0,
+                        },
+                        pt: spacing,
+                        position: 'sticky',
+                        bottom: 0,
+                        // 从上透明到白色 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)} 16px)`,
+                    }, children: [(0, jsx_runtime_1.jsx)(RuntimeFormForms_1.default, { page: page }), isMobile && (0, jsx_runtime_1.jsx)(PoweredBy_1.default, { assistantId: page.assistantId, sx: { my: 0.5, px: 2 } })] })] }) }));
 }
 exports.default = RuntimeForm;

package/lib/cjs/builtin/async/ai-runtime/hooks/header.js

@@ -5,28 +5,55 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useSetHeader = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const DID_1 = __importDefault(require("@arcblock/ux/lib/DID"));
 const material_1 = require("@mui/material");
 const react_1 = require("react");
+const ux_1 = require("../../../arcblock/ux");
+const locale_1 = require("../../../locale");
 const header_1 = require("../../../page/header");
 const SocialShare_1 = __importDefault(require("../components/SocialShare"));
-function useSetHeader({ assistant }) {
+const ThemeProvider_1 = __importDefault(require("../components/ThemeProvider"));
+const subscribe_1 = require("./subscribe");
+const logoSize = 44;
+function useSetHeader({ assistant, assistantId }) {
+    const { subscribeLink, requireSubscribe } = (0, subscribe_1.useSubscribeLink)({ assistantId });
+    const { t, locale } = (0, locale_1.useLocaleContext)();
     // set logo
     (0, react_1.useEffect)(() => {
         const { release } = assistant;
         header_1.useHeaderState.setState((state) => {
-            state.logo = (release === null || release === void 0 ? void 0 : release.logo) && (0, jsx_runtime_1.jsx)(material_1.Box, { component: "img", src: release.logo, sx: { borderRadius: 1 } });
+            state.logo = (release === null || release === void 0 ? void 0 : release.logo) && ((0, jsx_runtime_1.jsx)(material_1.Box, { component: ux_1.Avatar, size: logoSize, src: release === null || release === void 0 ? void 0 : release.logo, did: blocklet === null || blocklet === void 0 ? void 0 : blocklet.appId, borderRadius: 1, sx: {
+                    width: logoSize,
+                    height: logoSize,
+                } }));
             state.brand = (release === null || release === void 0 ? void 0 : release.title) || assistant.name;
+            state.description = assistant.createdBy && ((0, jsx_runtime_1.jsxs)(material_1.Box, { sx: {
+                    display: 'inline-flex',
+                    alignItems: 'center',
+                    gap: 0.5,
+                    mt: 0.5,
+                }, children: [t('by'), " ", (0, jsx_runtime_1.jsx)(DID_1.default, { did: assistant.createdBy, copyable: false })] }));
             const shareContent = `${(release === null || release === void 0 ? void 0 : release.title) || assistant.name}
 
 ${release === null || release === void 0 ? void 0 : release.description}
 `;
-            state.addons = (...exists) => [(0, jsx_runtime_1.jsx)(SocialShare_1.default, { content: shareContent }), ...exists];
+            state.addons = (...exists) => [
+                (0, jsx_runtime_1.jsx)(ThemeProvider_1.default, { children: (0, jsx_runtime_1.jsx)(material_1.Button, { disabled: !requireSubscribe, variant: "outlined", href: subscribeLink, 
+                        // @ts-ignore
+                        color: "black", sx: {
+                            // 字母不大写
+                            textTransform: 'none',
+                        }, children: subscribeLink ? t('subscribe') : t('subscribed') }) }),
+                (0, jsx_runtime_1.jsx)(SocialShare_1.default, { content: shareContent }),
+                ...exists,
+            ].filter(Boolean);
         });
         return () => header_1.useHeaderState.setState((state) => {
             state.logo = undefined;
             state.brand = undefined;
+            state.description = undefined;
             state.addons = (...exists) => [...exists];
         });
-    }, []);
+    }, [locale]);
 }
 exports.useSetHeader = useSetHeader;

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

@@ -50,7 +50,7 @@ function AIRuntime({ cacheId, preload }) {
     const page = (0, navigate_1.useCurrentPage)();
     const { assistantId } = page;
     const [assistant] = (0, assistant_2.useAssistantState)({ assistantId });
-    (0, header_1.useSetHeader)({ assistant });
+    (0, header_1.useSetHeader)({ assistant, assistantId });
     (0, react_1.useMemo)(() => {
         // preload assistant from server side props
         if (preload)

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

@@ -3,7 +3,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.translations = void 0;
 exports.translations = {
     en: {
+        by: 'By',
         socialShare: {
+            title: 'Share',
             shareToX: 'Share to X',
             shareToTelegram: 'Share to Telegram',
             shareToReddit: 'Share to Reddit',
@@ -37,6 +39,8 @@ exports.translations = {
         edit: 'Edit',
         chat: 'Chat',
         subscribeNow: 'Subscribe Now',
+        subscribe: 'Subscribe',
+        subscribed: 'Subscribed',
         requireNewSubscription: `Thank you for using our service!
 
   To get more features and exclusive content, please subscribe to our service. After subscribing, you will enjoy the following privileges:
@@ -72,9 +76,12 @@ exports.translations = {
         savedToNote: 'Saved as a new document',
         uploadFile: 'Upload File',
         submit: 'Submit',
+        send: 'Send',
     },
     zh: {
+        by: '来自',
         socialShare: {
+            title: '分享',
             shareToX: '分享到 X',
             shareToTelegram: '分享到 Telegram',
             shareToReddit: '分享到 Reddit',
@@ -108,6 +115,8 @@ exports.translations = {
         edit: '编辑',
         chat: '对话',
         subscribeNow: '立即订阅',
+        subscribe: '订阅',
+        subscribed: '已订阅',
         requireNewSubscription: `感谢您使用我们的服务！
 
   为了获得更多功能和专属内容，请订阅我们的服务。订阅后，您将享有以下特权：
@@ -143,5 +152,6 @@ exports.translations = {
         savedToNote: '已保存到知识库',
         uploadFile: '上传文件',
         submit: '提交',
+        send: '发送',
     },
 };

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

@@ -24,7 +24,7 @@ import { Box, Tooltip } from '@mui/material';
 import { useRef, useState } from 'react';
 import LoadingButton from './LoadingButton';
 export 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] = useState(false);
     const [error, setError] = useState();
     const timer = useRef();
@@ -42,7 +42,7 @@ export function ActionButton(_a) {
     const realIcon = copied ? iconSucceed : icon;
     const toolTipTitleText = error ? _jsx(Box, { color: "error", children: error.message }) : (copied && tipSucceed) || tip;
     const buttonText = copied ? titleSucceed : title;
-    return (_jsx(Tooltip, { title: toolTipTitleText, disableInteractive: true, placement: "top", onClose: onClose, onOpen: onOpen, children: _jsx("span", { children: _jsx(LoadingButton, Object.assign({ startIcon: realIcon && (typeof realIcon === 'string' ? _jsx(Icon, { icon: realIcon }) : realIcon), loadingPosition: realIcon ? 'start' : undefined }, props, { onClick: (e) => __awaiter(this, void 0, void 0, function* () {
+    return (_jsx(Tooltip, { title: toolTipTitleText, disableInteractive: true, placement: placement, onClose: onClose, onOpen: onOpen, children: _jsx("span", { children: _jsx(LoadingButton, Object.assign({ startIcon: realIcon && (typeof realIcon === 'string' ? _jsx(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/esm/builtin/async/ai-runtime/components/MenuButton.js

@@ -1,8 +1,20 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { MoreHoriz as MoreHorizIcon } from '@mui/icons-material';
 import { Box, IconButton, Menu } from '@mui/material';
 import { useState } from 'react';
-export default function MenuButton({ sx, menus, children }) {
+export default function MenuButton(_a) {
+    var { sx, menus, children, MenuProps } = _a, restProps = __rest(_a, ["sx", "menus", "children", "MenuProps"]);
     const [anchorEl, setAnchorEl] = useState(null);
     const open = Boolean(anchorEl);
     const handleClick = (event) => {
@@ -11,7 +23,7 @@ export default function MenuButton({ sx, menus, children }) {
     const handleClose = () => {
         setAnchorEl(null);
     };
-    return (_jsxs(Box, { sx: sx, children: [_jsx(IconButton, { onClick: handleClick, children: children || _jsx(MoreHorizIcon, {}) }), _jsx(Menu, { disableScrollLock: true, MenuListProps: {
+    return (_jsxs(Box, { sx: sx, children: [_jsx(IconButton, Object.assign({ onClick: handleClick }, restProps, { children: children || _jsx(MoreHorizIcon, {}) })), _jsx(Menu, Object.assign({ disableScrollLock: true, MenuListProps: {
                     sx: {
                         p: 0.5,
                         '.MuiMenuItem-root': {
@@ -36,5 +48,5 @@ export default 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 }))] }));
 }

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

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

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

@@ -186,5 +186,11 @@ export default 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] }));
 }

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

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

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

@@ -9,27 +9,58 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Stack } from '@mui/material';
 import { useLocaleContext } from '../../../../locale';
 import { ActionButton } from '../ActionButton';
+import { SocialShareMenu } from '../SocialShare';
 export default function MessageActions(_a) {
     var { content } = _a, props = __rest(_a, ["content"]);
     const { t } = useLocaleContext();
     const commonActionButtonsSx = {
         border: '0px !important',
+        borderRadius: '4px !important',
         minWidth: '32px',
         color: 'rgba(75, 85, 99, 1)',
         '.MuiButton-startIcon': {
             marginRight: '0px !important',
         },
     };
-    return (_jsx(Stack, Object.assign({ direction: "row", gap: 1 }, props, { children: _jsx(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 (_jsxs(Stack, Object.assign({ direction: "column", gap: 0.5 }, props, { children: [_jsx(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);
+                } }), _jsx(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: _jsx(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) }) })] })));
 }

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

@@ -8,17 +8,11 @@ export default function MessageErrorView({ assistantId, assistant, error, }) {
     const { t } = useLocaleContext();
     const { subscribeLink } = useSubscribeLink({ assistantId });
     if (error.type === 'InvalidSubscriptionError') {
-        return (_jsxs(Box, { className: "ai-chat-message-error", children: [_jsx(Box, { sx: {
-                        bgcolor: 'grey.100',
-                        p: 1.5,
-                        borderRadius: 1,
-                    }, children: _jsx(MarkdownRenderer, { children: t('requireNewSubscription', {
+        return (_jsxs(Box, { className: "ai-chat-message-error", children: [_jsx(Box, { className: "message-response", children: _jsx(MarkdownRenderer, { children: t('requireNewSubscription', {
                             price: (_b = (_a = assistant.release) === null || _a === void 0 ? void 0 : _a.payment) === null || _b === void 0 ? void 0 : _b.price,
-                        }) }) }), _jsx(Box, { mt: 1, children: subscribeLink ? (_jsx(Button, { variant: "contained", href: subscribeLink, children: t('subscribeNow') })) : (_jsx(Box, { sx: {
-                            bgcolor: 'grey.100',
-                            p: 1.5,
-                            borderRadius: 1,
-                        }, children: t('thanksForSubscription') })) })] }));
+                        }) }) }), _jsx(Box, { mt: 1, children: subscribeLink ? (
+                    // @ts-ignore
+                    _jsx(Button, { variant: "contained", color: "black", href: subscribeLink, children: t('subscribeNow') })) : (_jsx(Box, { className: "message-response", children: t('thanksForSubscription') })) })] }));
     }
     return (_jsx(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/esm/builtin/async/ai-runtime/components/message/MessageItemView.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import ImagePreview from '@blocklet/ai-kit/components/image-preview';
-import { Box, Skeleton, Stack, Typography } from '@mui/material';
+import { Box, Skeleton, Stack, Tooltip, Typography, useMediaQuery, useTheme } from '@mui/material';
 import dayjs from 'dayjs';
 import React, { useMemo } from 'react';
 import { Avatar } from '../../../../arcblock/ux';
@@ -12,36 +12,30 @@ import MessageErrorView from './MessageErrorView';
 export default 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 (_jsxs(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 (_jsxs(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 && _jsx(UserMessage, { message: message }), _jsx(AgentMessage, { assistantId: assistantId, assistant: assistant, message: message, hideAvatar: hideAvatar })] }));
 }
-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 } = useSessionContext();
@@ -57,21 +51,39 @@ function UserMessage({ message }) {
                 }, children: [_jsxs(MessageUserName, { children: [(_c = authSession.user) === null || _c === void 0 ? void 0 : _c.fullName, _jsx(MessageTime, { time: message.createdAt })] }), _jsx(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 (_jsxs(Stack, { className: "ai-chat-message-ai", direction: "row", gap: 1.5, children: [!hideAvatar && (_jsx(Box, { children: _jsx(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 }) })), _jsxs(Box, { flex: 1, overflow: "hidden", children: [!hideAvatar && (_jsxs(MessageUserName, { children: [((_f = assistant.release) === null || _f === void 0 ? void 0 : _f.title) || assistant.name, _jsx(MessageTime, { time: message.createdAt })] })), _jsxs(React.Suspense, { children: [showMainMessage ? (_jsxs(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) ? (_jsx(MarkdownRenderer, { 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) ? (_jsx(ImagePreview, { 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) && (_jsx(MarkdownRenderer, { className: isMessageLoading ? 'writing' : '', children: message.result.content })), !isMessageLoading && ((_k = message.result) === null || _k === void 0 ? void 0 : _k.content) && (_jsx(MessageActions, { className: "message-actions", content: message.result.content }))] })) : (isMessageLoading && (_jsx(Skeleton, { variant: "rectangular", height: 24 + 8 + 8, 
+    const theme = useTheme();
+    const isMobile = useMediaQuery(theme.breakpoints.down('sm'));
+    const isFormTemplate = ((_d = assistant.release) === null || _d === void 0 ? void 0 : _d.template) === 'form';
+    return (_jsxs(Stack, { className: "ai-chat-message-ai", direction: "row", gap: 1.5, children: [!hideAvatar && (_jsx(Box, { children: _jsx(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 }) })), _jsxs(Box, { flex: 1, overflow: "hidden", children: [!hideAvatar && (_jsxs(MessageUserName, { children: [((_g = assistant.release) === null || _g === void 0 ? void 0 : _g.title) || assistant.name, _jsx(MessageTime, { time: message.createdAt })] })), _jsxs(React.Suspense, { children: [showMainMessage ? (_jsx(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) && _jsx(MessageActions, { content: message.result.content }), children: _jsxs(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) ? (_jsx(MarkdownRenderer, { 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) ? (_jsx(ImagePreview, { 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) && (_jsx(MarkdownRenderer, { className: isMessageLoading ? 'writing' : '', children: message.result.content }))] }) }))) : (isMessageLoading && (_jsx(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) => (_jsx(MessageMetadataRenderer, { object: object.data }, object.taskId)))), message.error && _jsx(MessageErrorView, { 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) => (_jsx(MessageMetadataRenderer, { object: object.data }, object.taskId)))), message.error && _jsx(MessageErrorView, { assistantId: assistantId, assistant: assistant, error: message.error })] })] })] }));
 }
 function MessageUserName({ children }) {
     return (_jsx(Typography, { component: "div", noWrap: true, sx: {

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

@@ -11,7 +11,7 @@ import PoweredBy from '../PoweredBy';
 import { useScrollToBottomModule } from '../ScrollView';
 import { EntryListView } from './InitialForm';
 export default function RuntimeChatSession({ page }) {
-    var _a, _b, _c, _d, _e, _f, _g, _h;
+    var _a, _b, _c, _d, _e, _f;
     const [session, state] = useSessionState({ sessionId: page.sessionId, required: true });
     const [assistant] = useAssistantState({ assistantId: page.assistantId });
     const lastMessage = (_a = state.messages) === null || _a === void 0 ? void 0 : _a.slice(-1)[0];
@@ -42,5 +42,5 @@ export default function RuntimeChatSession({ page }) {
                     bottom: 0,
                     // 从上透明到白色 0.72 的径向渐变
                     background: (theme) => `linear-gradient(180deg, ${alpha(theme.palette.background.default, 0.1)}, ${alpha(theme.palette.background.default, 1)} 16px)`,
-                }, children: [_jsx(ParameterForm, { 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 }), _jsx(PoweredBy, { assistantId: page.assistantId, sx: { my: 0.5, px: 2 } })] })] }));
+                }, children: [_jsx(ParameterForm, { sessionId: page.sessionId, defaultValues: lastMessage === null || lastMessage === void 0 ? void 0 : lastMessage.parameters, assistant: assistant, onSubmit: onSubmit, isSubmitting: state.running }), _jsx(PoweredBy, { assistantId: page.assistantId, sx: { my: 0.5, px: 2 } })] })] }));
 }