@blocklet/pages-kit 0.2.305 → 0.2.306

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

@@ -30,29 +30,29 @@ const react_2 = require("react");
 const LoadingButton_1 = __importDefault(require("./LoadingButton"));
 function ActionButton(_a) {
     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 [active, setActive] = (0, react_2.useState)(false);
     const [error, setError] = (0, react_2.useState)();
     const timer = (0, react_2.useRef)();
     const onClose = () => {
         setError(undefined);
         if (autoReset) {
             timer.current = window.setTimeout(() => {
-                setCopied(false);
+                setActive(false);
             }, 3000);
         }
     };
     const onOpen = () => {
         clearTimeout(timer.current);
     };
-    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;
+    const realIcon = active ? iconSucceed : icon;
+    const toolTipTitleText = error ? (0, jsx_runtime_1.jsx)(material_1.Box, { color: "error", children: error.message }) : (active && tipSucceed) || tip;
+    const buttonText = active ? titleSucceed : title;
     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 {
                         yield props.onClick(e);
-                        setCopied(true);
+                        setActive(true);
                     }
                     catch (error) {
                         setError(error);

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

@@ -0,0 +1,153 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const types_1 = require("@blocklet/ai-runtime/types");
+const react_1 = require("@iconify/react");
+const material_1 = require("@mui/material");
+const file_saver_1 = require("file-saver");
+const react_2 = require("react");
+const ufo_1 = require("ufo");
+const locale_1 = require("../../../../locale");
+const CurrentAgent_1 = require("../../contexts/CurrentAgent");
+const CurrentMessage_1 = require("../../contexts/CurrentMessage");
+const runtime_1 = require("../../state/runtime");
+const download_image_1 = require("../../utils/download-image");
+const ActionButton_1 = __importDefault(require("../ActionButton"));
+function ShareActions(_a) {
+    var _b;
+    var props = __rest(_a, []);
+    const { agent } = (0, CurrentAgent_1.useCurrentAgent)();
+    const sharing = (0, react_2.useMemo)(() => {
+        var _a, _b;
+        return (_b = (_a = agent.outputVariables) === null || _a === void 0 ? void 0 : _a.find((i) => i.name === types_1.RuntimeOutputVariable.share)) === null || _b === void 0 ? void 0 : _b.initialValue;
+    }, [agent]);
+    const items = (_b = sharing === null || sharing === void 0 ? void 0 : sharing.items) === null || _b === void 0 ? void 0 : _b.map((item) => {
+        const C = ShareActionsMap[item.to];
+        if (!C)
+            return null;
+        return (0, jsx_runtime_1.jsx)(C, {});
+    }).filter((i) => !!i);
+    if (!(items === null || items === void 0 ? void 0 : items.length))
+        return null;
+    return (0, jsx_runtime_1.jsx)(material_1.Stack, Object.assign({}, props, { children: items }));
+}
+exports.default = ShareActions;
+const ShareActionsMap = {
+    twitter: ShareTwitter,
+    copy: ShareCopy,
+    saveAs: ShareSave,
+};
+function ShareTwitter() {
+    var _a, _b, _c, _d, _e, _f;
+    const { t } = (0, locale_1.useLocaleContext)();
+    const { message } = (0, CurrentMessage_1.useCurrentMessage)();
+    const content = ((_a = message.result) === null || _a === void 0 ? void 0 : _a.content) ||
+        ((_f = (_e = (_d = (_c = (_b = message.result) === null || _b === void 0 ? void 0 : _b.objects) === null || _c === void 0 ? void 0 : _c.find((i) => { var _a; return (_a = i.data[types_1.RuntimeOutputVariable.images]) === null || _a === void 0 ? void 0 : _a.length; })) === null || _d === void 0 ? void 0 : _d.data[types_1.RuntimeOutputVariable.images]) === null || _e === void 0 ? void 0 : _e.at(0)) === null || _f === void 0 ? void 0 : _f.url);
+    if (!content)
+        return null;
+    return ((0, jsx_runtime_1.jsx)(StyledActionButton, { tip: t('socialShare.shareToX'), title: (0, jsx_runtime_1.jsx)(react_1.Icon, { icon: "tabler:brand-x" }), href: (0, ufo_1.withQuery)('https://twitter.com/intent/tweet', {
+            text: content,
+            url: window.location.href,
+        }), target: '_blank' }));
+}
+function ShareCopy() {
+    var _a, _b, _c, _d, _e, _f;
+    const { t } = (0, locale_1.useLocaleContext)();
+    const { message } = (0, CurrentMessage_1.useCurrentMessage)();
+    const content = (_a = message.result) === null || _a === void 0 ? void 0 : _a.content;
+    const image = (_f = (_e = (_d = (_c = (_b = message.result) === null || _b === void 0 ? void 0 : _b.objects) === null || _c === void 0 ? void 0 : _c.find((i) => { var _a; return (_a = i.data[types_1.RuntimeOutputVariable.images]) === null || _a === void 0 ? void 0 : _a.length; })) === null || _d === void 0 ? void 0 : _d.data[types_1.RuntimeOutputVariable.images]) === null || _e === void 0 ? void 0 : _e.at(0)) === null || _f === void 0 ? void 0 : _f.url;
+    if (!content && !image)
+        return null;
+    return ((0, jsx_runtime_1.jsx)(StyledActionButton, { tip: t('copy'), tipSucceed: t('copied'), title: (0, jsx_runtime_1.jsx)(react_1.Icon, { icon: "tabler:copy" }), titleSucceed: (0, jsx_runtime_1.jsx)(react_1.Icon, { icon: "tabler:copy-check" }), onClick: () => __awaiter(this, void 0, void 0, function* () {
+            if (content) {
+                window.navigator.clipboard.writeText(content);
+            }
+            else if (image) {
+                const imageBlob = yield (0, download_image_1.convertImageToBlob)(yield (0, download_image_1.downloadImage)({ url: image }));
+                window.navigator.clipboard.write([new ClipboardItem({ 'image/png': imageBlob })]);
+            }
+        }) }));
+}
+function ShareSave() {
+    var _a, _b, _c, _d, _e, _f;
+    const { t } = (0, locale_1.useLocaleContext)();
+    const { message } = (0, CurrentMessage_1.useCurrentMessage)();
+    const { agent, appearancePage } = (0, runtime_1.useRuntimeState)();
+    const content = (_a = message.result) === null || _a === void 0 ? void 0 : _a.content;
+    const image = (_f = (_e = (_d = (_c = (_b = message.result) === null || _b === void 0 ? void 0 : _b.objects) === null || _c === void 0 ? void 0 : _c.find((i) => { var _a; return (_a = i.data[types_1.RuntimeOutputVariable.images]) === null || _a === void 0 ? void 0 : _a.length; })) === null || _d === void 0 ? void 0 : _d.data[types_1.RuntimeOutputVariable.images]) === null || _e === void 0 ? void 0 : _e.at(0)) === null || _f === void 0 ? void 0 : _f.url;
+    if (!content && !image)
+        return null;
+    return ((0, jsx_runtime_1.jsx)(StyledActionButton, { tip: t('save'), tipSucceed: t('saved'), title: (0, jsx_runtime_1.jsx)(react_1.Icon, { icon: "tabler:file" }), titleSucceed: (0, jsx_runtime_1.jsx)(react_1.Icon, { icon: "tabler:file-check" }), onClick: () => __awaiter(this, void 0, void 0, function* () {
+            // @ts-ignore
+            const { default: html2pdf } = yield Promise.resolve().then(() => __importStar(require('html2pdf.js')));
+            if (content) {
+                const element = document.createElement('div');
+                element.innerText = content;
+                yield html2pdf()
+                    .set({
+                    margin: 1,
+                    filename: `${(appearancePage === null || appearancePage === void 0 ? void 0 : appearancePage.name) || agent.name || agent.id} - ${message.taskId}.pdf`,
+                    image: { type: 'jpeg', quality: 0.98 },
+                    html2canvas: { scale: 2 },
+                    jsPDF: { unit: 'in', format: 'letter', orientation: 'portrait' },
+                })
+                    .from(element)
+                    .save();
+            }
+            else if (image) {
+                (0, file_saver_1.saveAs)(image, `${(appearancePage === null || appearancePage === void 0 ? void 0 : appearancePage.name) || agent.name || agent.id}.png`);
+            }
+        }) }));
+}
+const StyledActionButton = (0, material_1.styled)(ActionButton_1.default)(({ theme }) => theme.unstable_sx({
+    fontSize: 'inherit',
+    p: 0.5,
+    minWidth: 0,
+    minHeight: 0,
+}));

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

@@ -17,9 +17,13 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.PhotoGalleryItem = exports.ChatOutput = exports.SimpleOutput = exports.AutoForm = exports.PhotoGallery = exports.SimpleChat = exports.SimplePage = exports.ChatBotButton = exports.Runtime = void 0;
+exports.PhotoGalleryItem = exports.ChatOutput = exports.SimpleOutput = exports.AutoForm = exports.PhotoGallery = exports.SimpleChat = exports.SimplePage = exports.ChatBotButton = exports.Runtime = exports.CurrentMessageProvider = exports.CurrentAgentProvider = void 0;
 __exportStar(require("./contexts/CurrentAgent"), exports);
+var CurrentAgent_1 = require("./contexts/CurrentAgent");
+Object.defineProperty(exports, "CurrentAgentProvider", { enumerable: true, get: function () { return __importDefault(CurrentAgent_1).default; } });
 __exportStar(require("./contexts/CurrentMessage"), exports);
+var CurrentMessage_1 = require("./contexts/CurrentMessage");
+Object.defineProperty(exports, "CurrentMessageProvider", { enumerable: true, get: function () { return __importDefault(CurrentMessage_1).default; } });
 __exportStar(require("./state/runtime"), exports);
 __exportStar(require("./state/session"), exports);
 var Runtime_1 = require("./runtime/Runtime");

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

@@ -45,6 +45,7 @@ exports.translations = {
         contentPlaceholder: 'Write anything...',
         cancel: 'Cancel',
         save: 'Save',
+        saved: 'Saved',
         edit: 'Edit',
         chat: 'Chat',
         subscribeNow: 'Subscribe Now',
@@ -138,6 +139,7 @@ exports.translations = {
         contentPlaceholder: '写点什么吧...',
         cancel: '取消',
         save: '保存',
+        saved: '已保存',
         edit: '编辑',
         chat: '对话',
         subscribeNow: '立即订阅',

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

@@ -48,8 +48,8 @@ const react_1 = __importStar(require("react"));
 const ux_1 = require("../../../../arcblock/ux");
 const session_1 = require("../../../../session");
 const MarkdownRenderer_1 = __importDefault(require("../../components/MarkdownRenderer"));
+const ShareActions_1 = __importDefault(require("../../components/ShareActions"));
 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) => {
@@ -119,6 +119,7 @@ function AgentMessage({ message, hideAvatar }) {
     const isMobile = (0, material_1.useMediaQuery)(theme.breakpoints.down('sm'));
     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 = appearancePage === null || appearancePage === void 0 ? void 0 : appearancePage.logo) === null || _e === void 0 ? void 0 : _e.url }) })), (0, jsx_runtime_1.jsxs)(material_1.Box, { flex: 1, width: 0, children: [!hideAvatar && ((0, jsx_runtime_1.jsxs)(MessageUserName, { children: [appearancePage === null || appearancePage === void 0 ? void 0 : appearancePage.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, { placement: "right-start", slotProps: {
                                     popper: {
+                                        disablePortal: true,
                                         modifiers: [
                                             {
                                                 name: 'offset',
@@ -129,14 +130,16 @@ function AgentMessage({ message, hideAvatar }) {
                                         ],
                                     },
                                     tooltip: {
-                                        sx: {
-                                            bgcolor: 'white',
-                                            boxShadow: '0px 4px 8px 0px rgba(3, 7, 18, 0.08)',
-                                            border: '1px solid rgba(229, 231, 235, 1)',
-                                            p: 0.5,
-                                        },
+                                        sx: { p: 0, bgcolor: 'white' },
                                     },
-                                }, title: !isMessageLoading && ((_f = message.result) === null || _f === void 0 ? void 0 : _f.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: [(_h = (_g = message.result) === null || _g === void 0 ? void 0 : _g.messages) === null || _h === void 0 ? void 0 : _h.map((childMsg, index) => {
+                                }, title: !isMessageLoading &&
+                                    ((_f = message.result) === null || _f === void 0 ? void 0 : _f.content) && ((0, jsx_runtime_1.jsx)(ShareActions_1.default, { sx: {
+                                        fontSize: '1rem',
+                                        boxShadow: '0px 4px 8px 0px rgba(3, 7, 18, 0.08)',
+                                        border: '1px solid rgba(229, 231, 235, 1)',
+                                        borderRadius: 1,
+                                        p: 0.25,
+                                    } })), children: (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) &&

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

@@ -23,6 +23,7 @@ const ux_1 = require("../../../../arcblock/ux");
 const locale_1 = require("../../../../locale");
 const session_1 = require("../../../../session");
 const ActionButton_1 = __importDefault(require("../../components/ActionButton"));
+const ShareActions_1 = __importDefault(require("../../components/ShareActions"));
 const UserInfo_1 = __importDefault(require("../../components/UserInfo"));
 const CurrentAgent_1 = require("../../contexts/CurrentAgent");
 const CurrentMessage_1 = require("../../contexts/CurrentMessage");
@@ -151,5 +152,5 @@ function PromptDialog(_a) {
                                             window.navigator.clipboard.writeText(parameters === null || parameters === void 0 ? void 0 : parameters.question);
                                         }, sx: {
                                             borderRadius,
-                                        } }) })] })] }) })] })));
+                                        } }) }), (0, jsx_runtime_1.jsx)(ShareActions_1.default, { direction: "row", justifyContent: "flex-end", sx: { mt: 2 } })] })] }) })] })));
 }

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

@@ -46,13 +46,14 @@ const CustomComponentRenderer_1 = __importDefault(require("../../../../../compon
 const session_1 = require("../../../../session");
 const SimpleHeader_1 = __importDefault(require("../../components/Header/SimpleHeader"));
 const SimpleLayout_1 = __importDefault(require("../../components/Layout/SimpleLayout"));
+const MarkdownRenderer_1 = __importDefault(require("../../components/MarkdownRenderer"));
 const ScrollView_1 = __importDefault(require("../../components/ScrollView"));
 const UserInfo_1 = __importDefault(require("../../components/UserInfo"));
 const CurrentAgent_1 = __importStar(require("../../contexts/CurrentAgent"));
 const CurrentMessage_1 = __importDefault(require("../../contexts/CurrentMessage"));
 const runtime_1 = require("../../state/runtime");
 const session_2 = require("../../state/session");
-const MessageSuggestedQuestions_1 = __importDefault(require("../ChatOutput/MessageSuggestedQuestions"));
+const MessageSuggestedQuestions_1 = __importStar(require("../ChatOutput/MessageSuggestedQuestions"));
 function SimpleChat({ primaryColor, scrollViewProps = { scroll: 'window', initialScrollBehavior: 'auto' }, }) {
     (0, session_2.useSessionState)({ autoLoad: true });
     const inheritedTheme = (0, material_1.useTheme)();
@@ -97,8 +98,9 @@ function AgentInputRender(_a) {
 function OutputView(_a) {
     var props = __rest(_a, []);
     const messages = (0, session_2.useSessionState)()((s) => s.messages);
+    const loading = (0, session_2.useSessionState)()((s) => s.loading);
     const lastMessage = messages === null || messages === void 0 ? void 0 : messages.at(-1);
-    return ((0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ gap: 2 }, props, { children: [messages === null || messages === void 0 ? void 0 : messages.map((message) => (0, jsx_runtime_1.jsx)(OutputItemView, { message: message }, message.taskId)), lastMessage && (0, jsx_runtime_1.jsx)(SuggestedQuestionsView, { message: lastMessage })] })));
+    return ((0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ gap: 2 }, props, { children: [(0, jsx_runtime_1.jsx)(OpeningMessageView, {}), messages === null || messages === void 0 ? void 0 : messages.map((message) => (0, jsx_runtime_1.jsx)(OutputItemView, { message: message }, message.taskId)), lastMessage && (0, jsx_runtime_1.jsx)(SuggestedQuestionsView, { message: lastMessage }), !loading && !(messages === null || messages === void 0 ? void 0 : messages.length) && (0, jsx_runtime_1.jsx)(OpeningQuestionsView, {})] })));
 }
 const OutputItemView = (0, react_1.memo)(({ message }) => {
     var _a, _b, _c, _d, _e;
@@ -124,3 +126,37 @@ function SuggestedQuestionsView({ message }) {
                 execute({ aid, parameters: Object.assign(Object.assign({}, message.parameters), { question: item.question }) });
             } })) : null }));
 }
+const OpeningMessageView = (0, react_1.memo)(() => {
+    var _a, _b;
+    const { childAgentId, appearancePage } = (0, runtime_1.useRuntimeState)();
+    const { agent } = (0, CurrentAgent_1.useCurrentAgent)({ agentId: childAgentId });
+    const openingMessage = (0, react_1.useMemo)(() => {
+        var _a, _b;
+        return (_b = (_a = agent.outputVariables) === null || _a === void 0 ? void 0 : _a.find((i) => i.name === types_1.RuntimeOutputVariable.openingMessage)) === null || _b === void 0 ? void 0 : _b.initialValue;
+    }, [agent]);
+    if (!(openingMessage === null || openingMessage === void 0 ? void 0 : openingMessage.message))
+        return null;
+    return ((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) || agent.name, did: (_a = globalThis.blocklet) === null || _a === void 0 ? void 0 : _a.appId, avatar: (_b = appearancePage === null || appearancePage === void 0 ? void 0 : appearancePage.logo) === null || _b === void 0 ? void 0 : _b.url, alignItems: "flex-start", children: (0, jsx_runtime_1.jsx)(material_1.Box, { sx: {
+                    bgcolor: 'rgba(229, 231, 235, 1)',
+                    borderRadius: 1,
+                    borderTopLeftRadius: 2,
+                    px: 2,
+                    py: 1,
+                    mt: 0.5,
+                    mr: 5,
+                }, children: (0, jsx_runtime_1.jsx)(MarkdownRenderer_1.default, { children: openingMessage.message }) }) }) }));
+});
+function OpeningQuestionsView() {
+    const { childAgentId } = (0, runtime_1.useRuntimeState)();
+    const { execute } = (0, runtime_1.useRuntimeState)();
+    const { aid, agent } = (0, CurrentAgent_1.useCurrentAgent)({ agentId: childAgentId });
+    const openingQuestions = (0, react_1.useMemo)(() => {
+        var _a, _b, _c, _d;
+        return (_d = (_c = (_b = (_a = agent.outputVariables) === null || _a === void 0 ? void 0 : _a.find((i) => i.name === types_1.RuntimeOutputVariable.openingQuestions)) === null || _b === void 0 ? void 0 : _b.initialValue) === null || _c === void 0 ? void 0 : _c.items) === null || _d === void 0 ? void 0 : _d.filter((i) => !!i.title);
+    }, [agent]);
+    if (!(openingQuestions === null || openingQuestions === void 0 ? void 0 : openingQuestions.length))
+        return null;
+    return ((0, jsx_runtime_1.jsx)(material_1.Box, { ml: 6.5, mr: 2.5, children: (0, jsx_runtime_1.jsx)(material_1.Stack, { gap: 1, children: openingQuestions.map((item) => {
+                return ((0, jsx_runtime_1.jsx)(MessageSuggestedQuestions_1.MessageSuggestedQuestion, { onClick: () => execute({ aid, parameters: Object.assign(Object.assign({}, item.parameters), { question: item.parameters.question || item.title }) }), children: item.title }, item.id));
+            }) }) }));
+}

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

@@ -6,14 +6,16 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
 const material_1 = require("@mui/material");
 const MarkdownRenderer_1 = __importDefault(require("../../components/MarkdownRenderer"));
+const ShareActions_1 = __importDefault(require("../../components/ShareActions"));
 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;
+    var _a, _b, _c;
     const { message } = (0, CurrentMessage_1.useCurrentMessage)();
     const objects = (_a = message.result) === null || _a === void 0 ? void 0 : _a.objects;
     const { error } = message;
-    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 }))] }));
+    const isMessageLoading = (message.loading || !message.result) && !message.error;
+    return ((0, jsx_runtime_1.jsxs)(material_1.Stack, { gap: 2, boxShadow: 1, borderRadius: 1, p: 2, children: [(0, jsx_runtime_1.jsx)(MarkdownRenderer_1.default, { children: (_b = message.result) === null || _b === void 0 ? void 0 : _b.content }), error && (0, jsx_runtime_1.jsx)(MessageErrorView_1.default, { error: error }), objects === null || objects === void 0 ? void 0 : objects.map((item) => (0, jsx_runtime_1.jsx)(MessageMetadataRenderer_1.default, { object: item.data })), !isMessageLoading && ((_c = message.result) === null || _c === void 0 ? void 0 : _c.content) && ((0, jsx_runtime_1.jsx)(ShareActions_1.default, { direction: "row", justifyContent: "flex-end", sx: { mt: 2 } }))] }));
 }
 exports.default = SimpleOutput;

package/lib/cjs/builtin/async/ai-runtime/state/agent.js

@@ -13,6 +13,7 @@ exports.useAgentState = exports.createAgentState = void 0;
 const zustand_1 = require("zustand");
 const immer_1 = require("zustand/middleware/immer");
 const agent_1 = require("../api/agent");
+const Runtime_1 = require("../contexts/Runtime");
 const zustand_2 = require("../utils/zustand");
 const createAgentState = ({ aid, working, agent }) => {
     const key = working ? `${aid}-working` : aid;
@@ -46,7 +47,8 @@ exports.createAgentState = createAgentState;
 const LOADING_TASKS = {};
 function useAgentState({ aid, working }) {
     var _a;
-    const state = (0, exports.createAgentState)({ aid, working })();
+    const runtimeState = (0, Runtime_1.useRuntimeContext)();
+    const state = (0, exports.createAgentState)({ aid, working: working !== null && working !== void 0 ? working : runtimeState.working })();
     if (!state.agent) {
         if (state.error)
             throw state.error;

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

@@ -44,8 +44,7 @@ function useRuntimeState() {
     }), [authSession.user, exec, working, login]);
     const appearancePage = (0, react_1.useMemo)(() => {
         var _a, _b;
-        const initialValue = (_b = (_a = agent.outputVariables) === null || _a === void 0 ? void 0 : _a.find((i) => i.name === types_1.RuntimeOutputVariable.appearancePage)) === null || _b === void 0 ? void 0 : _b.initialValue;
-        return initialValue;
+        return (_b = (_a = agent.outputVariables) === null || _a === void 0 ? void 0 : _a.find((i) => i.name === types_1.RuntimeOutputVariable.appearancePage)) === null || _b === void 0 ? void 0 : _b.initialValue;
     }, [agent]);
     const childAgentId = (0, react_1.useMemo)(() => {
         var _a, _b, _c, _d, _e, _f;

package/lib/cjs/builtin/async/ai-runtime/utils/download-image.js

@@ -0,0 +1,41 @@
+"use strict";
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.convertImageToBlob = exports.downloadImage = void 0;
+function downloadImage(_a) {
+    return __awaiter(this, arguments, void 0, function* ({ url }) {
+        return new Promise((resolve, reject) => {
+            const image = new Image();
+            image.src = url;
+            image.onload = () => resolve(image);
+            image.onerror = (e) => reject(e);
+        });
+    });
+}
+exports.downloadImage = downloadImage;
+function convertImageToBlob(image) {
+    return __awaiter(this, void 0, void 0, function* () {
+        return new Promise((resolve, reject) => {
+            const c = document.createElement('canvas');
+            const ctx = c.getContext('2d');
+            c.width = image.naturalWidth;
+            c.height = image.naturalHeight;
+            ctx.drawImage(image, 0, 0);
+            c.toBlob((blob) => {
+                if (blob)
+                    resolve(blob);
+                else
+                    reject(new Error('Failed to get image'));
+            }, 'image/png', 1);
+        });
+    });
+}
+exports.convertImageToBlob = convertImageToBlob;

package/lib/cjs/components/CustomComponentRenderer/DevProvider.js

@@ -0,0 +1,26 @@
+"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 });
+exports.useDev = exports.DevProvider = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const devContext = (0, react_1.createContext)(undefined);
+function DevProvider(_a) {
+    var { dev } = _a, props = __rest(_a, ["dev"]);
+    return (0, jsx_runtime_1.jsx)(devContext.Provider, Object.assign({ value: dev }, props));
+}
+exports.DevProvider = DevProvider;
+function useDev() {
+    return (0, react_1.useContext)(devContext);
+}
+exports.useDev = useDev;

package/lib/cjs/components/CustomComponentRenderer/index.js

@@ -29,13 +29,15 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const material_1 = require("@mui/material");
 const react_error_boundary_1 = require("react-error-boundary");
 const property_1 = require("../../utils/property");
+const DevProvider_1 = require("./DevProvider");
 const state_1 = require("./state");
 __exportStar(require("./state"), exports);
 const MAXIMUM_RENDER_STACK_SIZE = 20;
 function CustomComponentRenderer(_a) {
     var _b;
-    var props = __rest(_a, []);
-    return ((0, jsx_runtime_1.jsx)(react_error_boundary_1.ErrorBoundary, { fallbackRender: ErrorView, resetKeys: [Date.now()], children: (0, jsx_runtime_1.jsx)(ComponentRenderer, Object.assign({}, props, { instanceId: (_b = props.instanceId) !== null && _b !== void 0 ? _b : props.componentId })) }));
+    var { dev } = _a, props = __rest(_a, ["dev"]);
+    const inheritedDev = (0, DevProvider_1.useDev)();
+    return ((0, jsx_runtime_1.jsx)(react_error_boundary_1.ErrorBoundary, { fallbackRender: ErrorView, resetKeys: [Date.now()], children: (0, jsx_runtime_1.jsx)(DevProvider_1.DevProvider, { dev: dev !== null && dev !== void 0 ? dev : inheritedDev, children: (0, jsx_runtime_1.jsx)(ComponentRenderer, Object.assign({}, props, { instanceId: (_b = props.instanceId) !== null && _b !== void 0 ? _b : props.componentId })) }) }));
 }
 exports.default = CustomComponentRenderer;
 function ErrorView({ error }) {
@@ -43,10 +45,11 @@ function ErrorView({ error }) {
 }
 function ComponentRenderer(_a) {
     var { renderCount = 0 } = _a, props = __rest(_a, ["renderCount"]);
+    const dev = (0, DevProvider_1.useDev)();
     if (renderCount > MAXIMUM_RENDER_STACK_SIZE) {
         throw new Error('Maximum render stack size exceeded');
     }
-    const component = (0, state_1.useComponent)(props);
+    const component = (0, state_1.useComponent)(Object.assign(Object.assign({}, props), { dev }));
     if (component === null || component === void 0 ? void 0 : component.error) {
         return (0, jsx_runtime_1.jsx)(ErrorView, { error: component.error });
     }
@@ -55,11 +58,11 @@ function ComponentRenderer(_a) {
     }
     return null;
 }
-function Renderer({ renderCount, Component, locale, props, dev, }) {
+function Renderer({ renderCount, Component, locale, props, }) {
     const componentProps = Object.fromEntries(Object.entries(props).map(([key, val]) => {
         return [
             key,
-            (val === null || val === void 0 ? void 0 : val.type) === property_1.RenderNestedComponent ? ((0, jsx_runtime_1.jsx)(ComponentRenderer, { locale: locale, renderCount: renderCount, componentId: val.componentId, properties: val.properties, props: val.props, dev: dev })) : (val),
+            (val === null || val === void 0 ? void 0 : val.type) === property_1.RenderNestedComponent ? ((0, jsx_runtime_1.jsx)(ComponentRenderer, { locale: locale, renderCount: renderCount, componentId: val.componentId, properties: val.properties, props: val.props })) : (val),
         ];
     }));
     return (0, jsx_runtime_1.jsx)(Component, Object.assign({ locale: locale }, componentProps));

package/lib/cjs/utils/builtin.js

@@ -40,6 +40,7 @@ const stream = __importStar(require("../builtin/stream"));
 const utils = __importStar(require("../builtin/utils"));
 const zustandMiddlewareImmer = __importStar(require("../builtin/zustand/middleware/immer"));
 exports.BuiltinModules = {
+    '@blocklet/pages-kit/builtin/pages-kit': {},
     '@blocklet/pages-kit/builtin/dayjs': dayjs,
     '@blocklet/pages-kit/builtin/utils': utils,
     '@blocklet/pages-kit/builtin/call': call,

package/lib/cjs/utils/inject-global-components.js

@@ -22,6 +22,9 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __setModuleDefault(result, mod);
     return result;
 };
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 const arcblockUx = __importStar(require("../builtin/arcblock/ux"));
 const aiRuntime = __importStar(require("../builtin/async/ai-runtime"));
@@ -47,11 +50,13 @@ const stream = __importStar(require("../builtin/stream"));
 const utils = __importStar(require("../builtin/utils"));
 const zustand = __importStar(require("../builtin/zustand"));
 const zustandMiddlewareImmer = __importStar(require("../builtin/zustand/middleware/immer"));
+const CustomComponentRenderer_1 = __importDefault(require("../components/CustomComponentRenderer"));
 const builtin_1 = require("../types/builtin");
 function injectGlobalComponents() {
     const win = window;
     win[builtin_1.BuiltinModulesGlobalVariableName] = {
         modules: {
+            '@blocklet/pages-kit/builtin/pages-kit': { CustomComponentRenderer: CustomComponentRenderer_1.default },
             '@blocklet/pages-kit/builtin/dayjs': dayjs,
             '@blocklet/pages-kit/builtin/utils': utils,
             '@blocklet/pages-kit/builtin/react': react,

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

@@ -25,29 +25,29 @@ import { useRef, useState } from 'react';
 import LoadingButton from './LoadingButton';
 export default function ActionButton(_a) {
     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 [active, setActive] = useState(false);
     const [error, setError] = useState();
     const timer = useRef();
     const onClose = () => {
         setError(undefined);
         if (autoReset) {
             timer.current = window.setTimeout(() => {
-                setCopied(false);
+                setActive(false);
             }, 3000);
         }
     };
     const onOpen = () => {
         clearTimeout(timer.current);
     };
-    const realIcon = copied ? iconSucceed : icon;
-    const toolTipTitleText = error ? _jsx(Box, { color: "error", children: error.message }) : (copied && tipSucceed) || tip;
-    const buttonText = copied ? titleSucceed : title;
+    const realIcon = active ? iconSucceed : icon;
+    const toolTipTitleText = error ? _jsx(Box, { color: "error", children: error.message }) : (active && tipSucceed) || tip;
+    const buttonText = active ? titleSucceed : title;
     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 {
                         yield props.onClick(e);
-                        setCopied(true);
+                        setActive(true);
                     }
                     catch (error) {
                         setError(error);