@blocklet/pages-kit 0.2.304 → 0.2.306

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

@@ -0,0 +1,124 @@
+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;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { RuntimeOutputVariable } from '@blocklet/ai-runtime/types';
+import { Icon } from '@iconify/react';
+import { Stack, styled } from '@mui/material';
+import { saveAs } from 'file-saver';
+import { useMemo } from 'react';
+import { withQuery } from 'ufo';
+import { useLocaleContext } from '../../../../locale';
+import { useCurrentAgent } from '../../contexts/CurrentAgent';
+import { useCurrentMessage } from '../../contexts/CurrentMessage';
+import { useRuntimeState } from '../../state/runtime';
+import { convertImageToBlob, downloadImage } from '../../utils/download-image';
+import ActionButton from '../ActionButton';
+export default function ShareActions(_a) {
+    var _b;
+    var props = __rest(_a, []);
+    const { agent } = useCurrentAgent();
+    const sharing = useMemo(() => {
+        var _a, _b;
+        return (_b = (_a = agent.outputVariables) === null || _a === void 0 ? void 0 : _a.find((i) => i.name === 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 _jsx(C, {});
+    }).filter((i) => !!i);
+    if (!(items === null || items === void 0 ? void 0 : items.length))
+        return null;
+    return _jsx(Stack, Object.assign({}, props, { children: items }));
+}
+const ShareActionsMap = {
+    twitter: ShareTwitter,
+    copy: ShareCopy,
+    saveAs: ShareSave,
+};
+function ShareTwitter() {
+    var _a, _b, _c, _d, _e, _f;
+    const { t } = useLocaleContext();
+    const { message } = 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[RuntimeOutputVariable.images]) === null || _a === void 0 ? void 0 : _a.length; })) === null || _d === void 0 ? void 0 : _d.data[RuntimeOutputVariable.images]) === null || _e === void 0 ? void 0 : _e.at(0)) === null || _f === void 0 ? void 0 : _f.url);
+    if (!content)
+        return null;
+    return (_jsx(StyledActionButton, { tip: t('socialShare.shareToX'), title: _jsx(Icon, { icon: "tabler:brand-x" }), href: 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 } = useLocaleContext();
+    const { message } = 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[RuntimeOutputVariable.images]) === null || _a === void 0 ? void 0 : _a.length; })) === null || _d === void 0 ? void 0 : _d.data[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 (_jsx(StyledActionButton, { tip: t('copy'), tipSucceed: t('copied'), title: _jsx(Icon, { icon: "tabler:copy" }), titleSucceed: _jsx(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 convertImageToBlob(yield downloadImage({ url: image }));
+                window.navigator.clipboard.write([new ClipboardItem({ 'image/png': imageBlob })]);
+            }
+        }) }));
+}
+function ShareSave() {
+    var _a, _b, _c, _d, _e, _f;
+    const { t } = useLocaleContext();
+    const { message } = useCurrentMessage();
+    const { agent, appearancePage } = 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[RuntimeOutputVariable.images]) === null || _a === void 0 ? void 0 : _a.length; })) === null || _d === void 0 ? void 0 : _d.data[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 (_jsx(StyledActionButton, { tip: t('save'), tipSucceed: t('saved'), title: _jsx(Icon, { icon: "tabler:file" }), titleSucceed: _jsx(Icon, { icon: "tabler:file-check" }), onClick: () => __awaiter(this, void 0, void 0, function* () {
+            // @ts-ignore
+            const { default: html2pdf } = yield import('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) {
+                saveAs(image, `${(appearancePage === null || appearancePage === void 0 ? void 0 : appearancePage.name) || agent.name || agent.id}.png`);
+            }
+        }) }));
+}
+const StyledActionButton = styled(ActionButton)(({ theme }) => theme.unstable_sx({
+    fontSize: 'inherit',
+    p: 0.5,
+    minWidth: 0,
+    minHeight: 0,
+}));

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

@@ -1,5 +1,7 @@
 export * from './contexts/CurrentAgent';
+export { default as CurrentAgentProvider } from './contexts/CurrentAgent';
 export * from './contexts/CurrentMessage';
+export { default as CurrentMessageProvider } from './contexts/CurrentMessage';
 export * from './state/runtime';
 export * from './state/session';
 export { default as Runtime } from './runtime/Runtime';

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

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

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

@@ -19,8 +19,8 @@ import React, { memo, useMemo, useState } from 'react';
 import { Avatar } from '../../../../arcblock/ux';
 import { useSessionContext } from '../../../../session';
 import MarkdownRenderer from '../../components/MarkdownRenderer';
+import ShareActions from '../../components/ShareActions';
 import { useRuntimeState } from '../../state/runtime';
-import MessageActions from './MessageActions';
 import MessageErrorView from './MessageErrorView';
 import MessageMetadataRenderer from './MessageMetadataRenderer';
 const MessageItemView = memo((_a) => {
@@ -90,6 +90,7 @@ function AgentMessage({ message, hideAvatar }) {
     const isMobile = useMediaQuery(theme.breakpoints.down('sm'));
     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 = appearancePage === null || appearancePage === void 0 ? void 0 : appearancePage.logo) === null || _e === void 0 ? void 0 : _e.url }) })), _jsxs(Box, { flex: 1, width: 0, children: [!hideAvatar && (_jsxs(MessageUserName, { children: [appearancePage === null || appearancePage === void 0 ? void 0 : appearancePage.name, _jsx(MessageTime, { time: message.createdAt })] })), _jsxs(React.Suspense, { children: [showMainMessage ? (_jsx(Tooltip, { placement: "right-start", slotProps: {
                                     popper: {
+                                        disablePortal: true,
                                         modifiers: [
                                             {
                                                 name: 'offset',
@@ -100,14 +101,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) && _jsx(MessageActions, { content: message.result.content }), children: _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) => {
+                                }, title: !isMessageLoading &&
+                                    ((_f = message.result) === null || _f === void 0 ? void 0 : _f.content) && (_jsx(ShareActions, { 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: _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) &&

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

@@ -18,6 +18,7 @@ import { RelativeTime } from '../../../../arcblock/ux';
 import { useLocaleContext } from '../../../../locale';
 import { useSessionContext } from '../../../../session';
 import ActionButton from '../../components/ActionButton';
+import ShareActions from '../../components/ShareActions';
 import UserInfo from '../../components/UserInfo';
 import { useCurrentAgent } from '../../contexts/CurrentAgent';
 import { useCurrentMessage } from '../../contexts/CurrentMessage';
@@ -93,12 +94,12 @@ function PromptView() {
     const { agent } = useCurrentAgent();
     const params = useMemo(() => {
         var _a;
-        return (_a = agent.parameters) === null || _a === void 0 ? void 0 : _a.filter(isValidInput).map((i) => { var _a; return [i.label || i.key, (_a = message.parameters) === null || _a === void 0 ? void 0 : _a[i.key]]; }).filter((i) => i[1]);
+        return (_a = agent.parameters) === null || _a === void 0 ? void 0 : _a.filter(isValidInput).map((i) => { var _a, _b; return [((_a = i.label) === null || _a === void 0 ? void 0 : _a.trim()) || i.key, (_b = message.parameters) === null || _b === void 0 ? void 0 : _b[i.key]]; }).filter((i) => i[1]);
     }, [agent.parameters, message.parameters]);
     if ((params === null || params === void 0 ? void 0 : params.length) === 1) {
         return (_a = params[0]) === null || _a === void 0 ? void 0 : _a[1];
     }
-    return params === null || params === void 0 ? void 0 : params.map(([key, value]) => (_jsxs(Typography, { sx: { wordWrap: 'break-word' }, children: [_jsxs(Box, { component: "span", sx: { color: 'text.secondary' }, children: [key, ":"] }), "\u00A0\u00A0", _jsx("span", { children: value })] }, key)));
+    return params === null || params === void 0 ? void 0 : params.map(([key, value]) => (_jsxs(Typography, { sx: { wordWrap: 'break-word' }, children: [_jsx(Box, { component: "span", sx: { color: 'text.secondary' }, children: key }), "\u00A0\u00A0", _jsx("span", { children: value })] }, key)));
 }
 function PromptDialog(_a) {
     var _b, _c, _d;
@@ -145,5 +146,5 @@ function PromptDialog(_a) {
                                             window.navigator.clipboard.writeText(parameters === null || parameters === void 0 ? void 0 : parameters.question);
                                         }, sx: {
                                             borderRadius,
-                                        } }) })] })] }) })] })));
+                                        } }) }), _jsx(ShareActions, { direction: "row", justifyContent: "flex-end", sx: { mt: 2 } })] })] }) })] })));
 }

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

@@ -10,7 +10,7 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { RuntimeOutputVariable } from '@blocklet/ai-runtime/types';
+import { RuntimeOutputVariable, } from '@blocklet/ai-runtime/types';
 import { Box, Stack, ThemeProvider, createTheme, useTheme } from '@mui/material';
 import { memo, useEffect, useMemo } from 'react';
 import { useScrollToBottom } from 'react-scroll-to-bottom';
@@ -18,13 +18,14 @@ import CustomComponentRenderer from '../../../../../components/CustomComponentRe
 import { useSessionContext } from '../../../../session';
 import SimpleHeader from '../../components/Header/SimpleHeader';
 import SimpleLayout from '../../components/Layout/SimpleLayout';
+import MarkdownRenderer from '../../components/MarkdownRenderer';
 import ScrollView from '../../components/ScrollView';
 import UserInfo from '../../components/UserInfo';
 import CurrentAgentProvider, { useCurrentAgent } from '../../contexts/CurrentAgent';
 import CurrentMessageProvider from '../../contexts/CurrentMessage';
 import { useRuntimeState } from '../../state/runtime';
 import { useSessionState } from '../../state/session';
-import MessageSuggestedQuestions from '../ChatOutput/MessageSuggestedQuestions';
+import MessageSuggestedQuestions, { MessageSuggestedQuestion } from '../ChatOutput/MessageSuggestedQuestions';
 export default function SimpleChat({ primaryColor, scrollViewProps = { scroll: 'window', initialScrollBehavior: 'auto' }, }) {
     useSessionState({ autoLoad: true });
     const inheritedTheme = useTheme();
@@ -68,8 +69,9 @@ function AgentInputRender(_a) {
 function OutputView(_a) {
     var props = __rest(_a, []);
     const messages = useSessionState()((s) => s.messages);
+    const loading = useSessionState()((s) => s.loading);
     const lastMessage = messages === null || messages === void 0 ? void 0 : messages.at(-1);
-    return (_jsxs(Stack, Object.assign({ gap: 2 }, props, { children: [messages === null || messages === void 0 ? void 0 : messages.map((message) => _jsx(OutputItemView, { message: message }, message.taskId)), lastMessage && _jsx(SuggestedQuestionsView, { message: lastMessage })] })));
+    return (_jsxs(Stack, Object.assign({ gap: 2 }, props, { children: [_jsx(OpeningMessageView, {}), messages === null || messages === void 0 ? void 0 : messages.map((message) => _jsx(OutputItemView, { message: message }, message.taskId)), lastMessage && _jsx(SuggestedQuestionsView, { message: lastMessage }), !loading && !(messages === null || messages === void 0 ? void 0 : messages.length) && _jsx(OpeningQuestionsView, {})] })));
 }
 const OutputItemView = memo(({ message }) => {
     var _a, _b, _c, _d, _e;
@@ -95,3 +97,37 @@ function SuggestedQuestionsView({ message }) {
                 execute({ aid, parameters: Object.assign(Object.assign({}, message.parameters), { question: item.question }) });
             } })) : null }));
 }
+const OpeningMessageView = memo(() => {
+    var _a, _b;
+    const { childAgentId, appearancePage } = useRuntimeState();
+    const { agent } = useCurrentAgent({ agentId: childAgentId });
+    const openingMessage = useMemo(() => {
+        var _a, _b;
+        return (_b = (_a = agent.outputVariables) === null || _a === void 0 ? void 0 : _a.find((i) => i.name === RuntimeOutputVariable.openingMessage)) === null || _b === void 0 ? void 0 : _b.initialValue;
+    }, [agent]);
+    if (!(openingMessage === null || openingMessage === void 0 ? void 0 : openingMessage.message))
+        return null;
+    return (_jsx(Box, { children: _jsx(UserInfo, { 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: _jsx(Box, { sx: {
+                    bgcolor: 'rgba(229, 231, 235, 1)',
+                    borderRadius: 1,
+                    borderTopLeftRadius: 2,
+                    px: 2,
+                    py: 1,
+                    mt: 0.5,
+                    mr: 5,
+                }, children: _jsx(MarkdownRenderer, { children: openingMessage.message }) }) }) }));
+});
+function OpeningQuestionsView() {
+    const { childAgentId } = useRuntimeState();
+    const { execute } = useRuntimeState();
+    const { aid, agent } = useCurrentAgent({ agentId: childAgentId });
+    const openingQuestions = useMemo(() => {
+        var _a, _b, _c, _d;
+        return (_d = (_c = (_b = (_a = agent.outputVariables) === null || _a === void 0 ? void 0 : _a.find((i) => i.name === 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 (_jsx(Box, { ml: 6.5, mr: 2.5, children: _jsx(Stack, { gap: 1, children: openingQuestions.map((item) => {
+                return (_jsx(MessageSuggestedQuestion, { onClick: () => execute({ aid, parameters: Object.assign(Object.assign({}, item.parameters), { question: item.parameters.question || item.title }) }), children: item.title }, item.id));
+            }) }) }));
+}

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

@@ -1,13 +1,15 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Stack } from '@mui/material';
 import MarkdownRenderer from '../../components/MarkdownRenderer';
+import ShareActions from '../../components/ShareActions';
 import { useCurrentMessage } from '../../contexts/CurrentMessage';
 import MessageErrorView from '../ChatOutput/MessageErrorView';
 import MessageMetadataRenderer from '../ChatOutput/MessageMetadataRenderer';
 export default function SimpleOutput() {
-    var _a, _b;
+    var _a, _b, _c;
     const { message } = useCurrentMessage();
     const objects = (_a = message.result) === null || _a === void 0 ? void 0 : _a.objects;
     const { error } = message;
-    return (_jsxs(Stack, { gap: 2, boxShadow: 1, borderRadius: 1, p: 2, children: [_jsx(MarkdownRenderer, { children: (_b = message.result) === null || _b === void 0 ? void 0 : _b.content }), error && _jsx(MessageErrorView, { error: error }), objects === null || objects === void 0 ? void 0 : objects.map((item) => _jsx(MessageMetadataRenderer, { object: item.data }))] }));
+    const isMessageLoading = (message.loading || !message.result) && !message.error;
+    return (_jsxs(Stack, { gap: 2, boxShadow: 1, borderRadius: 1, p: 2, children: [_jsx(MarkdownRenderer, { children: (_b = message.result) === null || _b === void 0 ? void 0 : _b.content }), error && _jsx(MessageErrorView, { error: error }), objects === null || objects === void 0 ? void 0 : objects.map((item) => _jsx(MessageMetadataRenderer, { object: item.data })), !isMessageLoading && ((_c = message.result) === null || _c === void 0 ? void 0 : _c.content) && (_jsx(ShareActions, { direction: "row", justifyContent: "flex-end", sx: { mt: 2 } }))] }));
 }

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

@@ -10,6 +10,7 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
 import { create } from 'zustand';
 import { immer } from 'zustand/middleware/immer';
 import { getAgent } from '../api/agent';
+import { useRuntimeContext } from '../contexts/Runtime';
 import { createCachedStore } from '../utils/zustand';
 export const createAgentState = ({ aid, working, agent }) => {
     const key = working ? `${aid}-working` : aid;
@@ -42,7 +43,8 @@ export const createAgentState = ({ aid, working, agent }) => {
 const LOADING_TASKS = {};
 export function useAgentState({ aid, working }) {
     var _a;
-    const state = createAgentState({ aid, working })();
+    const runtimeState = useRuntimeContext();
+    const state = createAgentState({ aid, working: working !== null && working !== void 0 ? working : runtimeState.working })();
     if (!state.agent) {
         if (state.error)
             throw state.error;

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

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

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

@@ -0,0 +1,36 @@
+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());
+    });
+};
+export 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);
+        });
+    });
+}
+export 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);
+        });
+    });
+}

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

@@ -0,0 +1,21 @@
+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 } from "react/jsx-runtime";
+import { createContext, useContext } from 'react';
+const devContext = createContext(undefined);
+export function DevProvider(_a) {
+    var { dev } = _a, props = __rest(_a, ["dev"]);
+    return _jsx(devContext.Provider, Object.assign({ value: dev }, props));
+}
+export function useDev() {
+    return useContext(devContext);
+}

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

@@ -13,23 +13,26 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { Alert, Box } from '@mui/material';
 import { ErrorBoundary } from 'react-error-boundary';
 import { RenderNestedComponent } from '../../utils/property';
+import { DevProvider, useDev } from './DevProvider';
 import { useComponent } from './state';
 export * from './state';
 const MAXIMUM_RENDER_STACK_SIZE = 20;
 export default function CustomComponentRenderer(_a) {
     var _b;
-    var props = __rest(_a, []);
-    return (_jsx(ErrorBoundary, { fallbackRender: ErrorView, resetKeys: [Date.now()], children: _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 = useDev();
+    return (_jsx(ErrorBoundary, { fallbackRender: ErrorView, resetKeys: [Date.now()], children: _jsx(DevProvider, { dev: dev !== null && dev !== void 0 ? dev : inheritedDev, children: _jsx(ComponentRenderer, Object.assign({}, props, { instanceId: (_b = props.instanceId) !== null && _b !== void 0 ? _b : props.componentId })) }) }));
 }
 function ErrorView({ error }) {
     return (_jsx(Box, { children: _jsx(Alert, { severity: "error", children: error.message }) }));
 }
 function ComponentRenderer(_a) {
     var { renderCount = 0 } = _a, props = __rest(_a, ["renderCount"]);
+    const dev = useDev();
     if (renderCount > MAXIMUM_RENDER_STACK_SIZE) {
         throw new Error('Maximum render stack size exceeded');
     }
-    const component = useComponent(props);
+    const component = useComponent(Object.assign(Object.assign({}, props), { dev }));
     if (component === null || component === void 0 ? void 0 : component.error) {
         return _jsx(ErrorView, { error: component.error });
     }
@@ -38,11 +41,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) === RenderNestedComponent ? (_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) === RenderNestedComponent ? (_jsx(ComponentRenderer, { locale: locale, renderCount: renderCount, componentId: val.componentId, properties: val.properties, props: val.props })) : (val),
         ];
     }));
     return _jsx(Component, Object.assign({ locale: locale }, componentProps));

package/lib/esm/utils/builtin.js

@@ -14,6 +14,7 @@ import * as stream from '../builtin/stream';
 import * as utils from '../builtin/utils';
 import * as zustandMiddlewareImmer from '../builtin/zustand/middleware/immer';
 export const 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/esm/utils/inject-global-components.js

@@ -22,11 +22,13 @@ import * as stream from '../builtin/stream';
 import * as utils from '../builtin/utils';
 import * as zustand from '../builtin/zustand';
 import * as zustandMiddlewareImmer from '../builtin/zustand/middleware/immer';
+import CustomComponentRenderer from '../components/CustomComponentRenderer';
 import { BuiltinModulesGlobalVariableName } from '../types/builtin';
 function injectGlobalComponents() {
     const win = window;
     win[BuiltinModulesGlobalVariableName] = {
         modules: {
+            '@blocklet/pages-kit/builtin/pages-kit': { CustomComponentRenderer },
             '@blocklet/pages-kit/builtin/dayjs': dayjs,
             '@blocklet/pages-kit/builtin/utils': utils,
             '@blocklet/pages-kit/builtin/react': react,

package/lib/types/builtin/async/ai-runtime/components/ActionButton.d.ts

@@ -1,4 +1,5 @@
 import { LoadingButtonProps } from '@mui/lab';
+import { TooltipProps } from '@mui/material';
 import { ReactNode } from 'react';
 export default function ActionButton({ tip, tipSucceed, title, titleSucceed, icon, iconSucceed, autoReset, placement, ...props }: {
     tip?: ReactNode;
@@ -8,5 +9,5 @@ export default function ActionButton({ tip, tipSucceed, title, titleSucceed, ico
     icon?: ReactNode;
     iconSucceed?: ReactNode;
     autoReset?: boolean;
-    placement?: 'top' | 'bottom' | 'left' | 'right' | 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end' | 'right-start' | 'right-end' | 'left-start' | 'left-end';
+    placement?: TooltipProps['placement'];
 } & Omit<Partial<LoadingButtonProps>, 'title'>): import("react/jsx-runtime").JSX.Element;

package/lib/types/builtin/async/ai-runtime/components/ShareActions/index.d.ts

@@ -0,0 +1,2 @@
+import { StackProps } from '@mui/material';
+export default function ShareActions({ ...props }: StackProps): import("react/jsx-runtime").JSX.Element | null;

package/lib/types/builtin/async/ai-runtime/index.d.ts

@@ -1,5 +1,7 @@
 export * from './contexts/CurrentAgent';
+export { default as CurrentAgentProvider } from './contexts/CurrentAgent';
 export * from './contexts/CurrentMessage';
+export { default as CurrentMessageProvider } from './contexts/CurrentMessage';
 export * from './state/runtime';
 export * from './state/session';
 export { default as Runtime } from './runtime/Runtime';

package/lib/types/builtin/async/ai-runtime/locales/index.d.ts

@@ -42,6 +42,7 @@ export declare const translations: {
         contentPlaceholder: string;
         cancel: string;
         save: string;
+        saved: string;
         edit: string;
         chat: string;
         subscribeNow: string;
@@ -123,6 +124,7 @@ export declare const translations: {
         contentPlaceholder: string;
         cancel: string;
         save: string;
+        saved: string;
         edit: string;
         chat: string;
         subscribeNow: string;

package/lib/types/builtin/async/ai-runtime/utils/download-image.d.ts

@@ -0,0 +1,4 @@
+export declare function downloadImage({ url }: {
+    url: string;
+}): Promise<HTMLImageElement>;
+export declare function convertImageToBlob(image: HTMLImageElement): Promise<Blob>;

package/lib/types/components/CustomComponentRenderer/DevProvider.d.ts

@@ -0,0 +1,9 @@
+import { ReactNode } from 'react';
+import type { CustomComponentRendererDevProps } from '.';
+export interface DevContext extends CustomComponentRendererDevProps {
+}
+export declare function DevProvider({ dev, ...props }: {
+    dev?: DevContext;
+    children?: ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function useDev(): DevContext | undefined;

package/lib/types/components/CustomComponentRenderer/index.d.ts

@@ -24,4 +24,4 @@ export interface CustomComponentRendererProps {
     };
     dev?: CustomComponentRendererDevProps;
 }
-export default function CustomComponentRenderer({ ...props }: CustomComponentRendererProps): import("react/jsx-runtime").JSX.Element;
+export default function CustomComponentRenderer({ dev, ...props }: CustomComponentRendererProps): import("react/jsx-runtime").JSX.Element;

package/lib/types/utils/builtin.d.ts

@@ -14,6 +14,7 @@ import * as stream from '../builtin/stream';
 import * as utils from '../builtin/utils';
 import * as zustandMiddlewareImmer from '../builtin/zustand/middleware/immer';
 export declare const BuiltinModules: {
+    '@blocklet/pages-kit/builtin/pages-kit': {};
     '@blocklet/pages-kit/builtin/dayjs': typeof dayjs;
     '@blocklet/pages-kit/builtin/utils': typeof utils;
     '@blocklet/pages-kit/builtin/call': typeof call;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/pages-kit",
-  "version": "0.2.304",
+  "version": "0.2.306",
   "description": "Pages Kit components and utils",
   "publishConfig": {
     "access": "public"
@@ -82,15 +82,18 @@
   },
   "dependencies": {
     "@arcblock/did-connect": "^2.9.77",
-    "@blocklet/ai-kit": "^0.1.30",
-    "@blocklet/ai-runtime": "^0.1.376",
+    "@blocklet/ai-kit": "^0.1.31",
+    "@blocklet/ai-runtime": "^0.1.381",
     "@blocklet/js-sdk": "1.16.26",
     "@blocklet/sdk": "^1.16.26",
     "@iconify/react": "^4.1.1",
     "@lottiefiles/lottie-player": "^1.7.1",
+    "@types/file-saver": "^2.0.7",
     "axios": "^1.6.8",
     "dayjs": "^1.11.11",
     "eventsource-parser": "^1.1.2",
+    "file-saver": "^2.0.5",
+    "html2pdf.js": "^0.10.1",
     "immer": "^10.1.1",
     "js-base64": "^3.7.7",
     "lodash": "^4.17.21",
@@ -134,7 +137,7 @@
     "@types/lodash": "^4.17.1",
     "@types/mustache": "^4.2.5",
     "@types/node-fetch": "^2.6.11",
-    "@types/react": "^18.3.1",
+    "@types/react": "^18.3.2",
     "@types/react-helmet": "^6.1.11",
     "@types/react-scroll-to-bottom": "^4.2.5",
     "@types/react-syntax-highlighter": "^15.5.13",
@@ -142,8 +145,8 @@
     "npm-run-all": "^4.1.5",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "react-router-dom": "^6.23.0",
-    "rimraf": "^5.0.5"
+    "react-router-dom": "^6.23.1",
+    "rimraf": "^5.0.6"
   },
   "scripts": {
     "lint": "eslint src --ext .mjs,.js,.jsx,.ts,.tsx",