@blocklet/pages-kit 0.2.359 → 0.2.360

package/lib/cjs/builtin/async/ai-runtime/api/asset.js

@@ -0,0 +1,23 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getAssetUrl = getAssetUrl;
+const ufo_1 = require("ufo");
+const request_1 = require("./request");
+const presets = {
+    avatar: { w: 80 },
+};
+function getAssetUrl({ blockletDid, aid, filename, w, preset, }) {
+    var _a;
+    const url = filename && aid && !(filename === null || filename === void 0 ? void 0 : filename.startsWith('http'))
+        ? (0, ufo_1.withQuery)((0, ufo_1.joinURL)((0, request_1.getAIRuntimeApiPrefix)(), '/api/agents', aid, 'assets', filename), {
+            blockletDid,
+        })
+        : filename;
+    if (!url)
+        return url;
+    const width = w !== null && w !== void 0 ? w : (_a = presets[preset]) === null || _a === void 0 ? void 0 : _a.w;
+    return (0, ufo_1.withQuery)(url, {
+        imageFilter: width ? 'resize' : undefined,
+        w: width,
+    });
+}

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

@@ -46,6 +46,7 @@ const isEmpty_1 = __importDefault(require("lodash/isEmpty"));
 const react_1 = __importStar(require("react"));
 const ux_1 = require("../../../../arcblock/ux");
 const session_1 = require("../../../../session");
+const asset_1 = require("../../api/asset");
 const MarkdownRenderer_1 = __importDefault(require("../../components/MarkdownRenderer"));
 const ShareActions_1 = __importDefault(require("../../components/ShareActions"));
 const use_appearances_1 = require("../../hooks/use-appearances");
@@ -112,13 +113,13 @@ function UserMessage({ message, hideAvatar }) {
 }
 function AgentMessage({ message, hideAvatar }) {
     var _a, _b, _c, _d, _e, _f;
-    const { aid } = (0, runtime_1.useRuntimeState)();
+    const { blockletDid, aid } = (0, runtime_1.useRuntimeState)();
     const profile = (0, use_appearances_1.useProfile)({ aid });
     const showMainMessage = !!((_a = message.outputs) === null || _a === void 0 ? void 0 : _a.content);
     const isMessageLoading = (message.loading || !message.outputs) && !message.error;
     const theme = (0, material_1.useTheme)();
     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: (_b = globalThis.blocklet) === null || _b === void 0 ? void 0 : _b.appId, variant: "circle", shape: "circle", src: profile.avatar }) })), (0, jsx_runtime_1.jsxs)(material_1.Box, { flex: 1, width: 0, children: [!hideAvatar && ((0, jsx_runtime_1.jsxs)(MessageUserName, { children: [profile.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: {
+    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: (_b = globalThis.blocklet) === null || _b === void 0 ? void 0 : _b.appId, variant: "circle", shape: "circle", src: (0, asset_1.getAssetUrl)({ blockletDid, aid, filename: profile.avatar, preset: 'avatar' }) }) })), (0, jsx_runtime_1.jsxs)(material_1.Box, { flex: 1, width: 0, children: [!hideAvatar && ((0, jsx_runtime_1.jsxs)(MessageUserName, { children: [profile.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: [
@@ -147,10 +148,10 @@ function AgentMessage({ message, hideAvatar }) {
 function MessageItemWrapper(_a) {
     var _b;
     var { hideAvatar, agentMessage } = _a, props = __rest(_a, ["hideAvatar", "agentMessage"]);
-    const { aid } = (0, runtime_1.useRuntimeState)();
+    const { blockletDid, aid } = (0, runtime_1.useRuntimeState)();
     const profile = (0, use_appearances_1.useProfile)({ aid });
     const [time] = (0, react_1.useState)(() => new Date().toISOString());
-    return ((0, jsx_runtime_1.jsx)(MessageItemContainer, Object.assign({}, props, { className: (0, css_1.cx)('ai-chat-message-item', hideAvatar && 'hide-avatar', props.className), children: agentMessage && ((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: (_b = globalThis.blocklet) === null || _b === void 0 ? void 0 : _b.appId, variant: "circle", shape: "circle", src: profile.avatar }) })), (0, jsx_runtime_1.jsxs)(material_1.Box, { flex: 1, width: 0, children: [!hideAvatar && ((0, jsx_runtime_1.jsxs)(MessageUserName, { children: [profile.name, (0, jsx_runtime_1.jsx)(MessageTime, { time: time })] })), agentMessage] })] })) })));
+    return ((0, jsx_runtime_1.jsx)(MessageItemContainer, Object.assign({}, props, { className: (0, css_1.cx)('ai-chat-message-item', hideAvatar && 'hide-avatar', props.className), children: agentMessage && ((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: (_b = globalThis.blocklet) === null || _b === void 0 ? void 0 : _b.appId, variant: "circle", shape: "circle", src: (0, asset_1.getAssetUrl)({ blockletDid, aid, filename: profile.avatar, preset: 'avatar' }) }) })), (0, jsx_runtime_1.jsxs)(material_1.Box, { flex: 1, width: 0, children: [!hideAvatar && ((0, jsx_runtime_1.jsxs)(MessageUserName, { children: [profile.name, (0, jsx_runtime_1.jsx)(MessageTime, { time: time })] })), agentMessage] })] })) })));
 }
 function MessageUserName({ children }) {
     return ((0, jsx_runtime_1.jsx)(material_1.Typography, { component: "div", noWrap: true, sx: {

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

@@ -3,9 +3,12 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = BackgroundImage;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const material_1 = require("@mui/material");
+const asset_1 = require("../../api/asset");
 const ComponentPreferences_1 = require("../../contexts/ComponentPreferences");
+const runtime_1 = require("../../state/runtime");
 function BackgroundImage() {
     var _a, _b;
+    const { blockletDid, aid } = (0, runtime_1.useRuntimeState)();
     const preferences = (0, ComponentPreferences_1.useComponentPreferences)();
     if (!((_a = preferences === null || preferences === void 0 ? void 0 : preferences.backgroundImage) === null || _a === void 0 ? void 0 : _a.url))
         return null;
@@ -15,7 +18,7 @@ function BackgroundImage() {
             top: 0,
             right: 0,
             bottom: 0,
-            backgroundImage: `url(${(_b = preferences.backgroundImage) === null || _b === void 0 ? void 0 : _b.url}) !important`,
+            backgroundImage: `url(${(0, asset_1.getAssetUrl)({ blockletDid, aid, filename: (_b = preferences.backgroundImage) === null || _b === void 0 ? void 0 : _b.url })}) !important`,
             backgroundRepeat: 'no-repeat',
             backgroundSize: 'cover',
             backgroundPosition: 'center',

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

@@ -43,6 +43,7 @@ const types_1 = require("@blocklet/ai-runtime/types");
 const material_1 = require("@mui/material");
 const react_1 = require("react");
 const CustomComponentRenderer_1 = __importDefault(require("../../../../../components/CustomComponentRenderer"));
+const asset_1 = require("../../api/asset");
 const ActiveAgent_1 = require("../../contexts/ActiveAgent");
 const CurrentAgent_1 = __importStar(require("../../contexts/CurrentAgent"));
 const use_appearances_1 = __importStar(require("../../hooks/use-appearances"));
@@ -58,11 +59,12 @@ function InputsView(_a) {
 function AgentAvatar(_a) {
     var _b;
     var { selected } = _a, props = __rest(_a, ["selected"]);
+    const { blockletDid, aid } = (0, runtime_1.useRuntimeState)();
     const { appearanceInput } = (0, use_appearances_1.default)();
     const profile = (0, use_appearances_1.useProfile)();
     if (!(appearanceInput === null || appearanceInput === void 0 ? void 0 : appearanceInput.componentId))
         return null;
-    return ((0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({}, props, { sx: Object.assign({ p: 0, outline: selected ? 3 : 0, outlineColor: 'primary.light' }, props.sx), children: (0, jsx_runtime_1.jsx)(material_1.Avatar, { src: profile === null || profile === void 0 ? void 0 : profile.avatar, children: (_b = profile.name) === null || _b === void 0 ? void 0 : _b.slice(0, 1) }) })));
+    return ((0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({}, props, { sx: Object.assign({ p: 0, outline: selected ? 3 : 0, outlineColor: 'primary.light' }, props.sx), children: (0, jsx_runtime_1.jsx)(material_1.Avatar, { src: (0, asset_1.getAssetUrl)({ blockletDid, aid, filename: profile === null || profile === void 0 ? void 0 : profile.avatar, preset: 'avatar' }), children: (_b = profile.name) === null || _b === void 0 ? void 0 : _b.slice(0, 1) }) })));
 }
 function AgentInput() {
     const { aid } = (0, CurrentAgent_1.useCurrentAgent)();

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

@@ -43,15 +43,18 @@ const material_1 = require("@mui/material");
 const react_1 = require("react");
 const CustomComponentRenderer_1 = __importDefault(require("../../../../../components/CustomComponentRenderer"));
 const session_1 = require("../../../../session");
+const asset_1 = require("../../api/asset");
 const AgentErrorBoundary_1 = require("../../components/AgentErrorBoundary");
 const UserInfo_1 = __importDefault(require("../../components/UserInfo"));
 const ComponentPreferences_1 = require("../../contexts/ComponentPreferences");
 const CurrentAgent_1 = __importDefault(require("../../contexts/CurrentAgent"));
 const CurrentMessage_1 = __importDefault(require("../../contexts/CurrentMessage"));
 const use_appearances_1 = __importStar(require("../../hooks/use-appearances"));
+const runtime_1 = require("../../state/runtime");
 const UserMessageView_1 = __importDefault(require("./UserMessageView"));
 const MessageView = (0, react_1.memo)(({ message }) => {
     var _a, _b, _c, _d, _e, _f;
+    const { aid, blockletDid } = (0, runtime_1.useRuntimeState)();
     const preferences = (0, ComponentPreferences_1.useComponentPreferences)();
     const hasBg = !!((_a = preferences === null || preferences === void 0 ? void 0 : preferences.backgroundImage) === null || _a === void 0 ? void 0 : _a.url);
     const { session: authSession } = (0, session_1.useSessionContext)();
@@ -61,7 +64,7 @@ const MessageView = (0, react_1.memo)(({ message }) => {
     if (!(appearanceOutput === null || appearanceOutput === void 0 ? void 0 : appearanceOutput.componentId))
         return null;
     const agentMessage = ((0, jsx_runtime_1.jsx)(MessageBodyContainer, { messageRole: "assistant", children: (0, jsx_runtime_1.jsx)(CustomComponentRenderer_1.default, { componentId: appearanceOutput.componentId, properties: appearanceOutput.componentProperties, fallbackRender: AgentErrorBoundary_1.AgentErrorView }, message.id) }));
-    return ((0, jsx_runtime_1.jsx)(CurrentAgent_1.default, { agentId: message.agentId, children: (0, jsx_runtime_1.jsx)(CurrentMessage_1.default, { message: message, children: (0, jsx_runtime_1.jsxs)(material_1.Stack, { gap: 2, children: [!hideUserInputs && ((0, jsx_runtime_1.jsx)(material_1.Box, { children: (0, jsx_runtime_1.jsx)(UserInfo_1.default, { name: (_c = authSession.user) === null || _c === void 0 ? void 0 : _c.fullName, did: (_d = authSession.user) === null || _d === void 0 ? void 0 : _d.did, avatar: (_e = authSession.user) === null || _e === void 0 ? void 0 : _e.avatar, time: message.createdAt, reverse: true, alignItems: "flex-start", UserNameProps: { sx: { color: hasBg ? 'white' : undefined } }, children: (0, jsx_runtime_1.jsx)(material_1.Stack, { sx: { alignItems: 'flex-end' }, children: (0, jsx_runtime_1.jsx)(MessageBodyContainer, { messageRole: "user", children: (0, jsx_runtime_1.jsx)(UserMessageView_1.default, {}) }) }) }) })), (0, jsx_runtime_1.jsx)(material_1.Box, { children: !hideAgentAvatar ? ((0, jsx_runtime_1.jsx)(UserInfo_1.default, { name: profile.name, did: (_f = globalThis.blocklet) === null || _f === void 0 ? void 0 : _f.appId, avatar: profile.avatar, time: message.createdAt, alignItems: "flex-start", UserNameProps: { sx: { color: hasBg ? 'white' : undefined } }, children: agentMessage })) : (agentMessage) })] }) }) }));
+    return ((0, jsx_runtime_1.jsx)(CurrentAgent_1.default, { agentId: message.agentId, children: (0, jsx_runtime_1.jsx)(CurrentMessage_1.default, { message: message, children: (0, jsx_runtime_1.jsxs)(material_1.Stack, { gap: 2, children: [!hideUserInputs && ((0, jsx_runtime_1.jsx)(material_1.Box, { children: (0, jsx_runtime_1.jsx)(UserInfo_1.default, { name: (_c = authSession.user) === null || _c === void 0 ? void 0 : _c.fullName, did: (_d = authSession.user) === null || _d === void 0 ? void 0 : _d.did, avatar: (0, asset_1.getAssetUrl)({ filename: (_e = authSession.user) === null || _e === void 0 ? void 0 : _e.avatar, preset: 'avatar' }), time: message.createdAt, reverse: true, alignItems: "flex-start", UserNameProps: { sx: { color: hasBg ? 'white' : undefined } }, children: (0, jsx_runtime_1.jsx)(material_1.Stack, { sx: { alignItems: 'flex-end' }, children: (0, jsx_runtime_1.jsx)(MessageBodyContainer, { messageRole: "user", children: (0, jsx_runtime_1.jsx)(UserMessageView_1.default, {}) }) }) }) })), (0, jsx_runtime_1.jsx)(material_1.Box, { children: !hideAgentAvatar ? ((0, jsx_runtime_1.jsx)(UserInfo_1.default, { name: profile.name, did: (_f = globalThis.blocklet) === null || _f === void 0 ? void 0 : _f.appId, avatar: (0, asset_1.getAssetUrl)({ blockletDid, aid, filename: profile.avatar, preset: 'avatar' }), time: message.createdAt, alignItems: "flex-start", UserNameProps: { sx: { color: hasBg ? 'white' : undefined } }, children: agentMessage })) : (agentMessage) })] }) }) }));
 });
 exports.default = MessageView;
 function MessageBodyContainer(_a) {

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

@@ -7,14 +7,17 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const types_1 = require("@blocklet/ai-runtime/types");
 const react_1 = require("react");
 const CustomComponentRenderer_1 = __importDefault(require("../../../../../components/CustomComponentRenderer"));
+const asset_1 = require("../../api/asset");
 const UserInfo_1 = __importDefault(require("../../components/UserInfo"));
 const constants_1 = require("../../constants");
 const ComponentPreferences_1 = require("../../contexts/ComponentPreferences");
 const CurrentAgent_1 = require("../../contexts/CurrentAgent");
 const use_appearances_1 = require("../../hooks/use-appearances");
+const runtime_1 = require("../../state/runtime");
 const MessageView_1 = require("./MessageView");
 const OpeningMessageView = (0, react_1.memo)(({ isMessagesEmpty }) => {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+    const { blockletDid, aid } = (0, runtime_1.useRuntimeState)();
     const { hideAgentAvatar, backgroundImage } = (_a = (0, ComponentPreferences_1.useComponentPreferences)()) !== null && _a !== void 0 ? _a : {};
     const hasBg = !!(backgroundImage === null || backgroundImage === void 0 ? void 0 : backgroundImage.url);
     const openingMessage = (0, use_appearances_1.useOpeningMessage)();
@@ -32,6 +35,11 @@ const OpeningMessageView = (0, react_1.memo)(({ isMessagesEmpty }) => {
         return null;
     }
     const children = ((0, jsx_runtime_1.jsxs)(MessageView_1.MessageBodyContainer, { children: [openingMessage && openingMessageOutput && openingMessageComponentId && ((0, jsx_runtime_1.jsx)(CustomComponentRenderer_1.default, { instanceId: openingMessageOutput.id, componentId: openingMessageComponentId, properties: (_f = openingMessageOutput.appearance) === null || _f === void 0 ? void 0 : _f.componentProperties, props: { output: openingMessageOutput, outputValue: openingMessage.message } })), isMessagesEmpty && openingQuestionsComponentId && ((0, jsx_runtime_1.jsx)(CustomComponentRenderer_1.default, { instanceId: agent.id, componentId: openingQuestionsComponentId, properties: (_g = openingQuestionsOutput === null || openingQuestionsOutput === void 0 ? void 0 : openingQuestionsOutput.appearance) === null || _g === void 0 ? void 0 : _g.componentProperties, props: { output: openingQuestionsOutput } }))] }));
-    return hideAgentAvatar ? (children) : ((0, jsx_runtime_1.jsx)(UserInfo_1.default, { name: ((_h = openingMessage === null || openingMessage === void 0 ? void 0 : openingMessage.profile) !== null && _h !== void 0 ? _h : profile).name, did: (_j = globalThis.blocklet) === null || _j === void 0 ? void 0 : _j.appId, avatar: ((_k = openingMessage === null || openingMessage === void 0 ? void 0 : openingMessage.profile) !== null && _k !== void 0 ? _k : profile).avatar, alignItems: "flex-start", UserNameProps: { sx: { color: hasBg ? 'white' : undefined } }, children: children }));
+    return hideAgentAvatar ? (children) : ((0, jsx_runtime_1.jsx)(UserInfo_1.default, { name: ((_h = openingMessage === null || openingMessage === void 0 ? void 0 : openingMessage.profile) !== null && _h !== void 0 ? _h : profile).name, did: (_j = globalThis.blocklet) === null || _j === void 0 ? void 0 : _j.appId, avatar: (0, asset_1.getAssetUrl)({
+            blockletDid,
+            aid,
+            filename: ((_k = openingMessage === null || openingMessage === void 0 ? void 0 : openingMessage.profile) !== null && _k !== void 0 ? _k : profile).avatar,
+            preset: 'avatar',
+        }), alignItems: "flex-start", UserNameProps: { sx: { color: hasBg ? 'white' : undefined } }, children: children }));
 });
 exports.default = OpeningMessageView;