@blocklet/pages-kit 0.2.358 → 0.2.360

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

@@ -0,0 +1,20 @@
+import { joinURL, withQuery } from 'ufo';
+import { getAIRuntimeApiPrefix } from './request';
+const presets = {
+    avatar: { w: 80 },
+};
+export function getAssetUrl({ blockletDid, aid, filename, w, preset, }) {
+    var _a;
+    const url = filename && aid && !(filename === null || filename === void 0 ? void 0 : filename.startsWith('http'))
+        ? withQuery(joinURL(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 withQuery(url, {
+        imageFilter: width ? 'resize' : undefined,
+        w: width,
+    });
+}

package/lib/esm/builtin/async/ai-runtime/contexts/CurrentAgent.js

@@ -6,7 +6,7 @@ import { useRuntimeState } from '../state/runtime';
 function useCurrentAid({ agentId }) {
     const { aid } = useRuntimeState();
     return useMemo(() => ({
-        aid: stringifyIdentity(Object.assign(Object.assign({}, parseIdentity(aid, { rejectWhenError: true })), { assistantId: agentId })),
+        aid: stringifyIdentity(Object.assign(Object.assign({}, parseIdentity(aid, { rejectWhenError: true })), { agentId })),
     }), [aid, agentId]);
 }
 const context = createContext(undefined);
@@ -18,7 +18,7 @@ export function useCurrentAgent(args = {}) {
     const { blockletDid, aid: runtimeAid, working } = useRuntimeState();
     const aidFromParam = useMemo(() => args.aid ||
         (args.agentId
-            ? stringifyIdentity(Object.assign(Object.assign({}, parseIdentity(runtimeAid, { rejectWhenError: true })), { assistantId: args.agentId }))
+            ? stringifyIdentity(Object.assign(Object.assign({}, parseIdentity(runtimeAid, { rejectWhenError: true })), { agentId: args.agentId }))
             : undefined), [args.agentId, args.aid, runtimeAid]);
     const current = useContext(context);
     const aid = aidFromParam !== null && aidFromParam !== void 0 ? aidFromParam : current === null || current === void 0 ? void 0 : current.aid;

package/lib/esm/builtin/async/ai-runtime/hooks/use-appearances.js

@@ -10,18 +10,25 @@ export default function useAppearances(args) {
     const { agent: runtimeAgent } = useRuntimeState();
     const { agent } = useCurrentAgent(args);
     const appearancePage = useMemo(() => {
-        var _a, _b;
+        var _a, _b, _c, _d;
         const appearance = (_b = (_a = agent.outputVariables) === null || _a === void 0 ? void 0 : _a.find((i) => i.name === RuntimeOutputVariable.appearancePage)) === null || _b === void 0 ? void 0 : _b.appearance;
-        return Object.assign(Object.assign({}, appearance), { componentId: (appearance === null || appearance === void 0 ? void 0 : appearance.componentId) || DEFAULT_PAGE_COMPONENT_ID });
+        if (appearance === null || appearance === void 0 ? void 0 : appearance.componentId)
+            return Object.assign(Object.assign({}, appearance), { componentId: appearance.componentId });
+        const runtimeAppearance = (_d = (_c = runtimeAgent.outputVariables) === null || _c === void 0 ? void 0 : _c.find((i) => i.name === RuntimeOutputVariable.appearancePage)) === null || _d === void 0 ? void 0 : _d.appearance;
+        if (runtimeAppearance === null || runtimeAppearance === void 0 ? void 0 : runtimeAppearance.componentId)
+            return Object.assign(Object.assign({}, runtimeAppearance), { componentId: runtimeAppearance.componentId });
+        return {
+            componentId: DEFAULT_PAGE_COMPONENT_ID,
+        };
     }, [agent]);
     const appearanceInput = useMemo(() => {
         var _a, _b, _c, _d;
         const appearance = (_b = (_a = agent.outputVariables) === null || _a === void 0 ? void 0 : _a.find((i) => i.name === RuntimeOutputVariable.appearanceInput)) === null || _b === void 0 ? void 0 : _b.appearance;
-        if (appearance)
-            return appearance;
+        if (appearance === null || appearance === void 0 ? void 0 : appearance.componentId)
+            return Object.assign(Object.assign({}, appearance), { componentId: appearance.componentId });
         const runtimeAppearance = (_d = (_c = runtimeAgent.outputVariables) === null || _c === void 0 ? void 0 : _c.find((i) => i.name === RuntimeOutputVariable.appearanceInput)) === null || _d === void 0 ? void 0 : _d.appearance;
-        if (runtimeAppearance)
-            return runtimeAppearance;
+        if (runtimeAppearance === null || runtimeAppearance === void 0 ? void 0 : runtimeAppearance.componentId)
+            return Object.assign(Object.assign({}, runtimeAppearance), { componentId: runtimeAppearance.componentId });
         return {
             componentId: DEFAULT_INPUT_COMPONENT_ID,
         };
@@ -30,10 +37,10 @@ export default function useAppearances(args) {
         var _a, _b, _c, _d;
         const appearance = (_b = (_a = agent.outputVariables) === null || _a === void 0 ? void 0 : _a.find((i) => i.name === RuntimeOutputVariable.appearanceOutput)) === null || _b === void 0 ? void 0 : _b.appearance;
         if (appearance === null || appearance === void 0 ? void 0 : appearance.componentId)
-            return appearance;
+            return Object.assign(Object.assign({}, appearance), { componentId: appearance.componentId });
         const runtimeAppearance = (_d = (_c = runtimeAgent.outputVariables) === null || _c === void 0 ? void 0 : _c.find((i) => i.name === RuntimeOutputVariable.appearanceOutput)) === null || _d === void 0 ? void 0 : _d.appearance;
-        if (runtimeAppearance)
-            return runtimeAppearance;
+        if (runtimeAppearance === null || runtimeAppearance === void 0 ? void 0 : runtimeAppearance.componentId)
+            return Object.assign(Object.assign({}, runtimeAppearance), { componentId: runtimeAppearance.componentId });
         return {
             componentId: DEFAULT_OUTPUT_COMPONENT_ID,
         };

package/lib/esm/builtin/async/ai-runtime/hooks/use-header-menu.js

@@ -15,18 +15,20 @@ import { useHeader } from '../../../page/header';
 import { settingsDialogState } from '../components/AgentSettings/AgentSettingsDialog';
 import PopperMenuButton from '../components/PopperMenuButton';
 import LoadingMenuItem from '../components/PopperMenuButton/LoadingMenuItem';
+import SocialShare from '../components/SocialShare';
 import { useComponentPreferences } from '../contexts/ComponentPreferences';
 import { useRuntimeState } from '../state/runtime';
 import { useSessionState } from '../state/session';
 import { useIsAgentAdmin } from './use-agent-admin';
 export function useHeaderMenu() {
-    var _a;
+    var _a, _b, _c;
     const { t, locale } = useLocaleContext();
     const { hideHeaderMenuButton } = (_a = useComponentPreferences()) !== null && _a !== void 0 ? _a : {};
     const clearSession = useSessionState((s) => s.clearSession);
     const { agent } = useRuntimeState();
     const isAdmin = useIsAgentAdmin(agent);
     const hasSettings = agent.config.secrets.length > 0;
+    const shareContent = ((_b = agent.project) === null || _b === void 0 ? void 0 : _b.name) ? `${agent.project.name}\n\n${(_c = agent.project) === null || _c === void 0 ? void 0 : _c.description}` : '';
     useHeader(() => hideHeaderMenuButton
         ? {}
         : {
@@ -35,6 +37,7 @@ export function useHeaderMenu() {
                         hasSettings && isAdmin && (_jsxs(MenuItem, { onClick: () => settingsDialogState.getState().open(), children: [_jsx(ListItemIcon, { children: _jsx(Icon, { icon: "tabler:settings" }) }), t('settings')] }, "settings")),
                         _jsxs(LoadingMenuItem, { onClick: () => __awaiter(this, void 0, void 0, function* () { return clearSession(); }), children: [_jsx(ListItemIcon, { children: _jsx(Icon, { icon: "mingcute:broom-line" }) }), t('clearSession')] }, "clearSession"),
                     ], children: _jsx(Icon, { icon: "tabler:dots" }) }),
+                _jsx(SocialShare, { content: shareContent }),
                 ...exists,
             ],
         }, [locale, hideHeaderMenuButton]);

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

@@ -1,65 +1,21 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { Box, useMediaQuery, useTheme } from '@mui/material';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { Helmet } from 'react-helmet';
-import { joinURL } from 'ufo';
 import CustomComponentRenderer from '../../../../../components/CustomComponentRenderer';
-import { Avatar, DID } from '../../../../arcblock/ux';
-import { useLocaleContext } from '../../../../locale';
-import { useHeader } from '../../../../page/header';
-import { getComponentMountPoint } from '../../../../utils';
 import AgentSettingsDialog from '../../components/AgentSettings/AgentSettingsDialog';
-import RuntimeCommonProvider, { RuntimeLocaleProvider } from '../../components/RuntimeCommonProvider';
-import SocialShare from '../../components/SocialShare';
+import RuntimeCommonProvider from '../../components/RuntimeCommonProvider';
 import ThemeProvider from '../../components/ThemeProvider';
-import { AI_STUDIO_DID, DEFAULT_PAGE_COMPONENT_ID } from '../../constants';
 import ActiveAgentProvider from '../../contexts/ActiveAgent';
 import RuntimeProvider, { RuntimeProviderFromUrl } from '../../contexts/Runtime';
 import useAppearances from '../../hooks/use-appearances';
 import { useHeaderMenu } from '../../hooks/use-header-menu';
 import { useRuntimeState } from '../../state/runtime';
-const logoSize = 44;
-function AgentCreatedBy({ did }) {
-    const { t } = useLocaleContext();
-    return (_jsxs(_Fragment, { children: [t('by'), " ", _jsx(Box, { component: DID, did: did, copyable: false, responsive: true })] }));
-}
 export default function Runtime({ blockletDid, aid, working, }) {
     const children = (_jsx(ThemeProvider, { children: _jsx(ActiveAgentProvider, { children: _jsx(RuntimeView, {}) }) }));
     return (_jsx(RuntimeCommonProvider, { children: aid ? (_jsx(RuntimeProvider, { blockletDid: blockletDid, aid: aid, working: working, children: children })) : (_jsx(RuntimeProviderFromUrl, { children: children })) }));
 }
 function RuntimeView() {
-    var _a;
     const { aid, agent } = useRuntimeState();
     const { appearancePage } = useAppearances({ aid });
-    const theme = useTheme();
-    const isMobile = useMediaQuery(theme.breakpoints.down('sm'));
-    const { locale } = useLocaleContext();
-    useHeader(() => {
-        const logo = joinURL(window.location.origin, getComponentMountPoint(AI_STUDIO_DID), '/api/projects', agent.project.id, '/logo.png');
-        const shareContent = `${agent.name}
-
-${agent === null || agent === void 0 ? void 0 : agent.description}
-    `;
-        return {
-            logo: logo && (_jsx(Box, { component: Avatar, src: logo, did: blocklet === null || blocklet === void 0 ? void 0 : blocklet.appId, borderRadius: 1, size: logoSize, sx: {
-                    width: logoSize,
-                    height: logoSize,
-                } })),
-            brand: !isMobile ? (_jsx(Box, { sx: {
-                    height: 18,
-                    fontSize: 18,
-                }, children: agent.project.name })) : undefined,
-            description: !isMobile && agent.createdBy ? (_jsx(RuntimeLocaleProvider, { children: _jsx(Box, { sx: {
-                        display: 'inline-flex',
-                        alignItems: 'center',
-                        gap: 0.5,
-                        mt: 0.5,
-                        height: 12,
-                        fontSize: 12,
-                    }, children: _jsx(AgentCreatedBy, { did: agent.project.createdBy }) }) })) : undefined,
-            addons: (exists) => [_jsx(SocialShare, { content: shareContent }), ...exists].filter(Boolean),
-        };
-    }, [locale, isMobile, agent]);
     useHeaderMenu();
-    const componentId = (_a = appearancePage === null || appearancePage === void 0 ? void 0 : appearancePage.componentId) !== null && _a !== void 0 ? _a : DEFAULT_PAGE_COMPONENT_ID;
-    return (_jsxs(_Fragment, { children: [_jsxs(Helmet, { children: [agent.project.name && _jsx("title", { children: agent.project.name }), agent.project.description && _jsx("meta", { name: "description", content: agent.project.description })] }), _jsx(CustomComponentRenderer, { componentId: componentId, properties: appearancePage === null || appearancePage === void 0 ? void 0 : appearancePage.componentProperties }), _jsx(AgentSettingsDialog, {})] }));
+    return (_jsxs(_Fragment, { children: [_jsxs(Helmet, { children: [agent.project.name && _jsx("title", { children: agent.project.name }), agent.project.description && _jsx("meta", { name: "description", content: agent.project.description })] }), _jsx(CustomComponentRenderer, { componentId: appearancePage.componentId, properties: appearancePage.componentProperties }), _jsx(AgentSettingsDialog, {})] }));
 }

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

@@ -17,6 +17,7 @@ import isEmpty from 'lodash/isEmpty';
 import React, { memo, useMemo, useState } from 'react';
 import { Avatar } from '../../../../arcblock/ux';
 import { useSessionContext } from '../../../../session';
+import { getAssetUrl } from '../../api/asset';
 import MarkdownRenderer from '../../components/MarkdownRenderer';
 import ShareActions from '../../components/ShareActions';
 import { useProfile } from '../../hooks/use-appearances';
@@ -83,13 +84,13 @@ function UserMessage({ message, hideAvatar }) {
 }
 function AgentMessage({ message, hideAvatar }) {
     var _a, _b, _c, _d, _e, _f;
-    const { aid } = useRuntimeState();
+    const { blockletDid, aid } = useRuntimeState();
     const profile = 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 = useTheme();
     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: (_b = globalThis.blocklet) === null || _b === void 0 ? void 0 : _b.appId, variant: "circle", shape: "circle", src: profile.avatar }) })), _jsxs(Box, { flex: 1, width: 0, children: [!hideAvatar && (_jsxs(MessageUserName, { children: [profile.name, _jsx(MessageTime, { time: message.createdAt })] })), _jsxs(React.Suspense, { children: [showMainMessage ? (_jsx(Tooltip, { placement: "right-start", slotProps: {
+    return (_jsxs(Stack, { className: "ai-chat-message-ai", direction: "row", gap: 1.5, children: [!hideAvatar && (_jsx(Box, { children: _jsx(Avatar, { size: 40, did: (_b = globalThis.blocklet) === null || _b === void 0 ? void 0 : _b.appId, variant: "circle", shape: "circle", src: getAssetUrl({ blockletDid, aid, filename: profile.avatar, preset: 'avatar' }) }) })), _jsxs(Box, { flex: 1, width: 0, children: [!hideAvatar && (_jsxs(MessageUserName, { children: [profile.name, _jsx(MessageTime, { time: message.createdAt })] })), _jsxs(React.Suspense, { children: [showMainMessage ? (_jsx(Tooltip, { placement: "right-start", slotProps: {
                                     popper: {
                                         disablePortal: true,
                                         modifiers: [
@@ -118,10 +119,10 @@ function AgentMessage({ message, hideAvatar }) {
 export function MessageItemWrapper(_a) {
     var _b;
     var { hideAvatar, agentMessage } = _a, props = __rest(_a, ["hideAvatar", "agentMessage"]);
-    const { aid } = useRuntimeState();
+    const { blockletDid, aid } = useRuntimeState();
     const profile = useProfile({ aid });
     const [time] = useState(() => new Date().toISOString());
-    return (_jsx(MessageItemContainer, Object.assign({}, props, { className: cx('ai-chat-message-item', hideAvatar && 'hide-avatar', props.className), children: agentMessage && (_jsxs(Stack, { className: "ai-chat-message-ai", direction: "row", gap: 1.5, children: [!hideAvatar && (_jsx(Box, { children: _jsx(Avatar, { size: 40, did: (_b = globalThis.blocklet) === null || _b === void 0 ? void 0 : _b.appId, variant: "circle", shape: "circle", src: profile.avatar }) })), _jsxs(Box, { flex: 1, width: 0, children: [!hideAvatar && (_jsxs(MessageUserName, { children: [profile.name, _jsx(MessageTime, { time: time })] })), agentMessage] })] })) })));
+    return (_jsx(MessageItemContainer, Object.assign({}, props, { className: cx('ai-chat-message-item', hideAvatar && 'hide-avatar', props.className), children: agentMessage && (_jsxs(Stack, { className: "ai-chat-message-ai", direction: "row", gap: 1.5, children: [!hideAvatar && (_jsx(Box, { children: _jsx(Avatar, { size: 40, did: (_b = globalThis.blocklet) === null || _b === void 0 ? void 0 : _b.appId, variant: "circle", shape: "circle", src: getAssetUrl({ blockletDid, aid, filename: profile.avatar, preset: 'avatar' }) }) })), _jsxs(Box, { flex: 1, width: 0, children: [!hideAvatar && (_jsxs(MessageUserName, { children: [profile.name, _jsx(MessageTime, { time: time })] })), agentMessage] })] })) })));
 }
 function MessageUserName({ children }) {
     return (_jsx(Typography, { component: "div", noWrap: true, sx: {

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

@@ -1,8 +1,11 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Box } from '@mui/material';
+import { getAssetUrl } from '../../api/asset';
 import { useComponentPreferences } from '../../contexts/ComponentPreferences';
+import { useRuntimeState } from '../../state/runtime';
 export default function BackgroundImage() {
     var _a, _b;
+    const { blockletDid, aid } = useRuntimeState();
     const preferences = useComponentPreferences();
     if (!((_a = preferences === null || preferences === void 0 ? void 0 : preferences.backgroundImage) === null || _a === void 0 ? void 0 : _a.url))
         return null;
@@ -12,7 +15,7 @@ export default function BackgroundImage() {
             top: 0,
             right: 0,
             bottom: 0,
-            backgroundImage: `url(${(_b = preferences.backgroundImage) === null || _b === void 0 ? void 0 : _b.url}) !important`,
+            backgroundImage: `url(${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/esm/builtin/async/ai-runtime/runtime-components/SimpleChat/InputsView.js

@@ -14,6 +14,7 @@ import { RuntimeOutputVariable } from '@blocklet/ai-runtime/types';
 import { Avatar, IconButton, Stack } from '@mui/material';
 import { useMemo } from 'react';
 import CustomComponentRenderer from '../../../../../components/CustomComponentRenderer';
+import { getAssetUrl } from '../../api/asset';
 import { useActiveAgent } from '../../contexts/ActiveAgent';
 import CurrentAgentProvider, { useCurrentAgent } from '../../contexts/CurrentAgent';
 import useAppearances, { useProfile } from '../../hooks/use-appearances';
@@ -29,11 +30,12 @@ export default function InputsView(_a) {
 function AgentAvatar(_a) {
     var _b;
     var { selected } = _a, props = __rest(_a, ["selected"]);
+    const { blockletDid, aid } = useRuntimeState();
     const { appearanceInput } = useAppearances();
     const profile = useProfile();
     if (!(appearanceInput === null || appearanceInput === void 0 ? void 0 : appearanceInput.componentId))
         return null;
-    return (_jsx(IconButton, Object.assign({}, props, { sx: Object.assign({ p: 0, outline: selected ? 3 : 0, outlineColor: 'primary.light' }, props.sx), children: _jsx(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 (_jsx(IconButton, Object.assign({}, props, { sx: Object.assign({ p: 0, outline: selected ? 3 : 0, outlineColor: 'primary.light' }, props.sx), children: _jsx(Avatar, { src: 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 } = useCurrentAgent();

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

@@ -14,15 +14,18 @@ import { Box, Stack } from '@mui/material';
 import { memo } from 'react';
 import CustomComponentRenderer from '../../../../../components/CustomComponentRenderer';
 import { useSessionContext } from '../../../../session';
+import { getAssetUrl } from '../../api/asset';
 import { AgentErrorView } from '../../components/AgentErrorBoundary';
 import UserInfo from '../../components/UserInfo';
 import { useComponentPreferences } from '../../contexts/ComponentPreferences';
 import CurrentAgentProvider from '../../contexts/CurrentAgent';
 import CurrentMessageProvider from '../../contexts/CurrentMessage';
 import useAppearances, { useProfile } from '../../hooks/use-appearances';
+import { useRuntimeState } from '../../state/runtime';
 import UserMessageView from './UserMessageView';
 const MessageView = memo(({ message }) => {
     var _a, _b, _c, _d, _e, _f;
+    const { aid, blockletDid } = useRuntimeState();
     const preferences = useComponentPreferences();
     const hasBg = !!((_a = preferences === null || preferences === void 0 ? void 0 : preferences.backgroundImage) === null || _a === void 0 ? void 0 : _a.url);
     const { session: authSession } = useSessionContext();
@@ -32,7 +35,7 @@ const MessageView = memo(({ message }) => {
     if (!(appearanceOutput === null || appearanceOutput === void 0 ? void 0 : appearanceOutput.componentId))
         return null;
     const agentMessage = (_jsx(MessageBodyContainer, { messageRole: "assistant", children: _jsx(CustomComponentRenderer, { componentId: appearanceOutput.componentId, properties: appearanceOutput.componentProperties, fallbackRender: AgentErrorView }, message.id) }));
-    return (_jsx(CurrentAgentProvider, { agentId: message.agentId, children: _jsx(CurrentMessageProvider, { message: message, children: _jsxs(Stack, { gap: 2, children: [!hideUserInputs && (_jsx(Box, { children: _jsx(UserInfo, { 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: _jsx(Stack, { sx: { alignItems: 'flex-end' }, children: _jsx(MessageBodyContainer, { messageRole: "user", children: _jsx(UserMessageView, {}) }) }) }) })), _jsx(Box, { children: !hideAgentAvatar ? (_jsx(UserInfo, { 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 (_jsx(CurrentAgentProvider, { agentId: message.agentId, children: _jsx(CurrentMessageProvider, { message: message, children: _jsxs(Stack, { gap: 2, children: [!hideUserInputs && (_jsx(Box, { children: _jsx(UserInfo, { 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: 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: _jsx(Stack, { sx: { alignItems: 'flex-end' }, children: _jsx(MessageBodyContainer, { messageRole: "user", children: _jsx(UserMessageView, {}) }) }) }) })), _jsx(Box, { children: !hideAgentAvatar ? (_jsx(UserInfo, { name: profile.name, did: (_f = globalThis.blocklet) === null || _f === void 0 ? void 0 : _f.appId, avatar: getAssetUrl({ blockletDid, aid, filename: profile.avatar, preset: 'avatar' }), time: message.createdAt, alignItems: "flex-start", UserNameProps: { sx: { color: hasBg ? 'white' : undefined } }, children: agentMessage })) : (agentMessage) })] }) }) }));
 });
 export default MessageView;
 export function MessageBodyContainer(_a) {

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

@@ -2,14 +2,17 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { RuntimeOutputVariable } from '@blocklet/ai-runtime/types';
 import { memo, useMemo } from 'react';
 import CustomComponentRenderer from '../../../../../components/CustomComponentRenderer';
+import { getAssetUrl } from '../../api/asset';
 import UserInfo from '../../components/UserInfo';
 import { DEFAULT_OUTPUT_COMPONENTS } from '../../constants';
 import { useComponentPreferences } from '../../contexts/ComponentPreferences';
 import { useCurrentAgent } from '../../contexts/CurrentAgent';
 import { useOpeningMessage, useOpeningQuestions, useProfile } from '../../hooks/use-appearances';
+import { useRuntimeState } from '../../state/runtime';
 import { MessageBodyContainer } from './MessageView';
 const OpeningMessageView = memo(({ isMessagesEmpty }) => {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+    const { blockletDid, aid } = useRuntimeState();
     const { hideAgentAvatar, backgroundImage } = (_a = useComponentPreferences()) !== null && _a !== void 0 ? _a : {};
     const hasBg = !!(backgroundImage === null || backgroundImage === void 0 ? void 0 : backgroundImage.url);
     const openingMessage = useOpeningMessage();
@@ -27,6 +30,11 @@ const OpeningMessageView = memo(({ isMessagesEmpty }) => {
         return null;
     }
     const children = (_jsxs(MessageBodyContainer, { children: [openingMessage && openingMessageOutput && openingMessageComponentId && (_jsx(CustomComponentRenderer, { 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 && (_jsx(CustomComponentRenderer, { 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) : (_jsx(UserInfo, { 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) : (_jsx(UserInfo, { 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: 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 }));
 });
 export default OpeningMessageView;

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

@@ -268,6 +268,7 @@ export const createSessionState = ({ aid }) => {
                     parameters: Object.assign(Object.assign({}, parameters), { $clientTime: new Date().toISOString() }),
                 });
                 let responseStarted = false;
+                let mainTaskId;
                 try {
                     for (var _e = true, stream_1 = __asyncValues(stream), stream_1_1; stream_1_1 = yield stream_1.next(), _b = stream_1_1.done, !_b; _e = true) {
                         _d = stream_1_1.value;
@@ -279,9 +280,10 @@ export const createSessionState = ({ aid }) => {
                         }
                         if ((value === null || value === void 0 ? void 0 : value.type) === 'CHUNK') {
                             if (!message) {
+                                mainTaskId = value.taskId;
                                 message = {
-                                    id: value.taskId,
-                                    agentId: identity.assistantId,
+                                    id: value.messageId,
+                                    agentId: identity.agentId,
                                     sessionId,
                                     inputs: parameters,
                                     createdAt: new Date().toISOString(),
@@ -297,7 +299,7 @@ export const createSessionState = ({ aid }) => {
                                     s.messages.push(message);
                                 });
                             }
-                            if (message.id === value.taskId) {
+                            if (mainTaskId === value.taskId) {
                                 requestAnimationFrame(() => {
                                     set((state) => {
                                         var _a, _b, _c, _d;