@blocklet/pages-kit 0.2.309 → 0.2.311

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

@@ -16,8 +16,8 @@ import Balancer, { Provider } from 'react-wrap-balancer';
 import { useRuntimeState } from '../../state/runtime';
 export default function SimpleHeader(_a) {
     var { TitleProps, DescriptionProps } = _a, props = __rest(_a, ["TitleProps", "DescriptionProps"]);
-    const { agent, appearancePage } = useRuntimeState();
-    const title = (appearancePage === null || appearancePage === void 0 ? void 0 : appearancePage.name) || agent.name;
-    const description = (appearancePage === null || appearancePage === void 0 ? void 0 : appearancePage.description) || agent.description;
+    const { agent } = useRuntimeState();
+    const title = agent.project.name;
+    const { description } = agent.project;
     return (_jsx(Stack, Object.assign({ gap: 2, mt: 8, mb: 4 }, props, { className: cx('aigne-header aigne-simple-header', props.className), children: _jsxs(Provider, { children: [title && (_jsx(Typography, Object.assign({ width: "100%", component: "h5", fontSize: 30, fontWeight: 700, textAlign: "center" }, TitleProps, { children: _jsx(Balancer, { children: title }) }))), description && (_jsx(Typography, Object.assign({ width: "100%", textAlign: "center" }, DescriptionProps, { children: _jsx(Balancer, { children: description }) })))] }) })));
 }

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

@@ -28,6 +28,7 @@ import { withQuery } from 'ufo';
 import { useLocaleContext } from '../../../../locale';
 import { useCurrentAgent } from '../../contexts/CurrentAgent';
 import { useCurrentMessage } from '../../contexts/CurrentMessage';
+import { useProfile } from '../../hooks/use-appearances';
 import { useRuntimeState } from '../../state/runtime';
 import { convertImageToBlob, downloadImage } from '../../utils/download-image';
 import ActionButton from '../ActionButton';
@@ -89,7 +90,8 @@ function ShareSave() {
     var _a, _b, _c, _d, _e, _f;
     const { t } = useLocaleContext();
     const { message } = useCurrentMessage();
-    const { agent, appearancePage } = useRuntimeState();
+    const { aid, agent } = useRuntimeState();
+    const profile = useProfile({ aid });
     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)
@@ -103,7 +105,7 @@ function ShareSave() {
                 yield html2pdf()
                     .set({
                     margin: 1,
-                    filename: `${(appearancePage === null || appearancePage === void 0 ? void 0 : appearancePage.name) || agent.name || agent.id} - ${message.taskId}.pdf`,
+                    filename: `${profile.name || agent.id} - ${message.taskId}.pdf`,
                     image: { type: 'jpeg', quality: 0.98 },
                     html2canvas: { scale: 2 },
                     jsPDF: { unit: 'in', format: 'letter', orientation: 'portrait' },
@@ -112,7 +114,7 @@ function ShareSave() {
                     .save();
             }
             else if (image) {
-                saveAs(image, `${(appearancePage === null || appearancePage === void 0 ? void 0 : appearancePage.name) || agent.name || agent.id}.png`);
+                saveAs(image, `${profile.name || agent.id}.png`);
             }
         }) }));
 }

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

@@ -1,8 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { parseIdentity, stringifyIdentity } from '@blocklet/ai-runtime/common/aid';
-import { RuntimeOutputVariable } from '@blocklet/ai-runtime/types';
 import { createContext, useContext, useMemo } from 'react';
-import { DEFAULT_INPUT_COMPONENT_ID, DEFAULT_OUTPUT_COMPONENT_ID } from '../constants';
 import { useAgentState } from '../state/agent';
 import { useRuntimeState } from '../state/runtime';
 function useCurrentAid({ agentId }) {
@@ -16,23 +14,17 @@ export default function CurrentAgentProvider({ agentId, children }) {
     const state = useCurrentAid({ agentId });
     return _jsx(context.Provider, { value: state, children: children });
 }
-export function useCurrentAgent({ agentId } = {}) {
+export function useCurrentAgent(args = {}) {
     const { aid: runtimeAid, working } = useRuntimeState();
-    const aidFromParam = useMemo(() => agentId &&
-        stringifyIdentity(Object.assign(Object.assign({}, parseIdentity(runtimeAid, { rejectWhenError: true })), { assistantId: agentId })), [agentId]);
+    const aidFromParam = useMemo(() => args.aid ||
+        (args.agentId
+            ? stringifyIdentity(Object.assign(Object.assign({}, parseIdentity(runtimeAid, { rejectWhenError: true })), { assistantId: 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;
     if (!aid) {
         throw new Error('No such current agent state. You should use `useCurrentAgent` within the `CurrentAgentProvider`');
     }
     const [agent] = useAgentState({ aid, working });
-    const appearanceInput = useMemo(() => {
-        var _a, _b, _c;
-        return (_c = (_b = (_a = agent.outputVariables) === null || _a === void 0 ? void 0 : _a.find((i) => i.name === RuntimeOutputVariable.appearanceInput)) === null || _b === void 0 ? void 0 : _b.initialValue) !== null && _c !== void 0 ? _c : { componentId: DEFAULT_INPUT_COMPONENT_ID };
-    }, [agent]);
-    const appearanceOutput = useMemo(() => {
-        var _a, _b, _c;
-        return (_c = (_b = (_a = agent.outputVariables) === null || _a === void 0 ? void 0 : _a.find((i) => i.name === RuntimeOutputVariable.appearanceOutput)) === null || _b === void 0 ? void 0 : _b.initialValue) !== null && _c !== void 0 ? _c : { componentId: DEFAULT_OUTPUT_COMPONENT_ID };
-    }, [agent]);
-    return { aid, agent, appearanceInput, appearanceOutput };
+    return { aid, agent };
 }

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

@@ -0,0 +1,87 @@
+import { RuntimeOutputVariable } from '@blocklet/ai-runtime/types';
+import { useMemo } from 'react';
+import { joinURL } from 'ufo';
+import { getComponentMountPoint } from '../../../utils';
+import { AI_STUDIO_DID, DEFAULT_INPUT_COMPONENT_ID, DEFAULT_OUTPUT_COMPONENT_ID, DEFAULT_PAGE_COMPONENT_ID, } from '../constants';
+import { useCurrentAgent } from '../contexts/CurrentAgent';
+import { useRuntimeState } from '../state/runtime';
+import { getOutputVariableInitialValue } from '../utils/runtime-output-schema';
+export default function useAppearances(args) {
+    const { agent: runtimeAgent } = useRuntimeState();
+    const { agent } = useCurrentAgent(args);
+    const appearancePage = useMemo(() => {
+        const appearance = getOutputVariableInitialValue(agent, RuntimeOutputVariable.appearancePage);
+        return Object.assign(Object.assign({}, appearance), { componentId: (appearance === null || appearance === void 0 ? void 0 : appearance.componentId) || DEFAULT_PAGE_COMPONENT_ID });
+    }, [agent]);
+    const appearanceInput = useMemo(() => {
+        const appearance = getOutputVariableInitialValue(agent, RuntimeOutputVariable.appearanceInput);
+        if (appearance)
+            return appearance;
+        const runtimeAppearance = getOutputVariableInitialValue(runtimeAgent, RuntimeOutputVariable.appearanceInput);
+        if (runtimeAppearance)
+            return runtimeAppearance;
+        return {
+            componentId: DEFAULT_INPUT_COMPONENT_ID,
+        };
+    }, [agent, runtimeAgent]);
+    const appearanceOutput = useMemo(() => {
+        const appearance = getOutputVariableInitialValue(agent, RuntimeOutputVariable.appearanceOutput);
+        if (appearance === null || appearance === void 0 ? void 0 : appearance.componentId)
+            return appearance;
+        const runtimeAppearance = getOutputVariableInitialValue(runtimeAgent, RuntimeOutputVariable.appearanceOutput);
+        if (runtimeAppearance)
+            return runtimeAppearance;
+        return {
+            componentId: DEFAULT_OUTPUT_COMPONENT_ID,
+        };
+    }, [agent, runtimeAgent]);
+    return { appearancePage, appearanceInput, appearanceOutput };
+}
+function getProjectIconUrl(projectId) {
+    return joinURL(window.location.origin, getComponentMountPoint(AI_STUDIO_DID), '/api/projects', projectId, '/logo.png');
+}
+export function useProfile(args) {
+    const { agent: runtimeAgent } = useRuntimeState();
+    const { agent } = useCurrentAgent(args);
+    return useMemo(() => {
+        const profile = getOutputVariableInitialValue(agent, RuntimeOutputVariable.profile);
+        const runtimeProfile = getOutputVariableInitialValue(runtimeAgent, RuntimeOutputVariable.profile);
+        return {
+            avatar: (profile === null || profile === void 0 ? void 0 : profile.avatar) || (runtimeProfile === null || runtimeProfile === void 0 ? void 0 : runtimeProfile.avatar) || getProjectIconUrl(agent.project.id),
+            name: (profile === null || profile === void 0 ? void 0 : profile.name) || (runtimeProfile === null || runtimeProfile === void 0 ? void 0 : runtimeProfile.name) || agent.name,
+        };
+    }, [agent, runtimeAgent]);
+}
+export function useOpeningMessage(args) {
+    const { aid: runtimeAid, agent: runtimeAgent } = useRuntimeState();
+    const runtimeProfile = useProfile({ aid: runtimeAid });
+    const { agent } = useCurrentAgent(args);
+    const profile = useProfile(args);
+    return useMemo(() => {
+        const agentOpening = getOutputVariableInitialValue(agent, RuntimeOutputVariable.openingMessage);
+        if (agentOpening === null || agentOpening === void 0 ? void 0 : agentOpening.message) {
+            return {
+                message: agentOpening.message,
+                profile,
+            };
+        }
+        const runtimeOpening = getOutputVariableInitialValue(runtimeAgent, RuntimeOutputVariable.openingMessage);
+        if (runtimeOpening === null || runtimeOpening === void 0 ? void 0 : runtimeOpening.message) {
+            return {
+                message: runtimeOpening.message,
+                profile: runtimeProfile,
+            };
+        }
+        return undefined;
+    }, [agent, profile, runtimeAgent, runtimeProfile]);
+}
+export function useOpeningQuestions(args) {
+    const { agent } = useCurrentAgent(args);
+    return useMemo(() => {
+        var _a, _b;
+        const questions = (_b = (_a = getOutputVariableInitialValue(agent, RuntimeOutputVariable.openingQuestions)) === null || _a === void 0 ? void 0 : _a.items) === null || _b === void 0 ? void 0 : _b.filter((i) => !!i.title);
+        if (!(questions === null || questions === void 0 ? void 0 : questions.length))
+            return undefined;
+        return { questions };
+    }, [agent]);
+}

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

@@ -8,8 +8,11 @@ export { default as Runtime } from './runtime/Runtime';
 export { default as ChatBotButton } from './runtime/ChatBotButton';
 export { default as SimplePage } from './runtime-components/SimplePage';
 export { default as SimpleChat } from './runtime-components/SimpleChat';
+export { default as MultiAgentsChat } from './runtime-components/MultiAgentsChat';
 export { default as PhotoGallery } from './runtime-components/PhotoGallery';
 export { default as AutoForm } from './runtime-components/AutoForm';
 export { default as SimpleOutput } from './runtime-components/SimpleOutput';
 export { default as ChatOutput } from './runtime-components/ChatOutput';
 export { default as PhotoGalleryItem } from './runtime-components/PhotoGalleryItem';
+// only use to debug, should be removed when PR
+export * from './runtime-components/V0';

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

@@ -9,19 +9,22 @@ import RuntimeCommonProvider from '../../components/RuntimeCommonProvider';
 import ScrollView from '../../components/ScrollView';
 import { DEFAULT_PAGE_COMPONENT_ID } from '../../constants';
 import RuntimeProvider from '../../contexts/Runtime';
+import useAppearances, { useProfile } from '../../hooks/use-appearances';
 import { useRuntimeState } from '../../state/runtime';
 import { useSessionState } from '../../state/session';
 export default function ChatBotButton({ aid, working }) {
     return (_jsx(RuntimeProvider, { aid: aid, working: working, children: _jsx(RuntimeCommonProvider, { children: _jsx(ChatBotContent, {}) }) }));
 }
 function ChatBotContent() {
-    var _a, _b, _c;
+    var _a, _b;
     const anchorEl = useRef(null);
     useSessionState({ autoLoad: true });
-    const { appearancePage } = useRuntimeState();
+    const { aid } = useRuntimeState();
+    const { appearancePage } = useAppearances({ aid });
+    const profile = useProfile({ aid });
     const [open, setOpen] = useState(false);
     const componentId = (_a = appearancePage === null || appearancePage === void 0 ? void 0 : appearancePage.componentId) !== null && _a !== void 0 ? _a : DEFAULT_PAGE_COMPONENT_ID;
-    return (_jsxs(Box, { sx: { position: 'fixed', bottom: 32, right: 16, zIndex: 'modal' }, children: [_jsx(Fab, { sx: { width: 44, height: 44, boxShadow: open ? 0 : undefined }, onClick: () => setOpen(true), children: _jsx(Avatar, { size: 44, did: (_b = globalThis.blocklet) === null || _b === void 0 ? void 0 : _b.appId, variant: "circle", shape: "circle", src: (_c = appearancePage === null || appearancePage === void 0 ? void 0 : appearancePage.logo) === null || _c === void 0 ? void 0 : _c.url }) }), _jsx(Stack, { width: "100%", ref: anchorEl }), anchorEl.current && (_jsx(ResponsiveChatBotContainer, { anchorEl: anchorEl.current, open: open, onClose: () => setOpen(false), children: _jsx(ScrollView, { initialScrollBehavior: "auto", component: Stack, sx: {
+    return (_jsxs(Box, { sx: { position: 'fixed', bottom: 32, right: 16, zIndex: 'modal' }, children: [_jsx(Fab, { sx: { width: 44, height: 44, boxShadow: open ? 0 : undefined }, onClick: () => setOpen(true), children: _jsx(Avatar, { size: 44, did: (_b = globalThis.blocklet) === null || _b === void 0 ? void 0 : _b.appId, variant: "circle", shape: "circle", src: profile.avatar }) }), _jsx(Stack, { width: "100%", ref: anchorEl }), anchorEl.current && (_jsx(ResponsiveChatBotContainer, { anchorEl: anchorEl.current, open: open, onClose: () => setOpen(false), children: _jsx(ScrollView, { initialScrollBehavior: "auto", component: Stack, sx: {
                         overscrollBehavior: 'contain',
                         height: '100%',
                         width: '100%',
@@ -34,12 +37,12 @@ function ChatBotContent() {
 function ResponsiveChatBotContainer({ open, anchorEl, children, onClose, }) {
     const theme = useTheme();
     const isMobile = useMediaQuery(theme.breakpoints.down('sm'));
-    const { agent, appearancePage } = useRuntimeState();
-    const title = (appearancePage === null || appearancePage === void 0 ? void 0 : appearancePage.name) || agent.name;
+    const { aid } = useRuntimeState();
+    const profile = useProfile({ aid });
     if (isMobile) {
-        return (_jsx(ChatBotDialog, { title: title, open: open, onClose: onClose, children: children }));
+        return (_jsx(ChatBotDialog, { title: profile.name, open: open, onClose: onClose, children: children }));
     }
-    return (_jsx(ChatBotPopper, { anchorEl: anchorEl, title: title, open: open, onClose: onClose, children: children }));
+    return (_jsx(ChatBotPopper, { anchorEl: anchorEl, title: profile.name, open: open, onClose: onClose, children: children }));
 }
 function ChatBotPopper({ title, anchorEl, open, children, onClose, }) {
     return (_jsx(Popper, { anchorEl: anchorEl, open: open, disablePortal: true, placement: "top-end", sx: {

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

@@ -2,33 +2,36 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
 import { Box, useMediaQuery, useTheme } from '@mui/material';
 import { useEffect } from 'react';
 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 { useHeaderState } from '../../../../page/header';
+import { getComponentMountPoint } from '../../../../utils';
 import RuntimeCommonProvider, { RuntimeLocaleProvider } from '../../components/RuntimeCommonProvider';
 import SocialShare from '../../components/SocialShare';
-import { DEFAULT_PAGE_COMPONENT_ID } from '../../constants';
+import { AI_STUDIO_DID, DEFAULT_PAGE_COMPONENT_ID } from '../../constants';
 import { RuntimeProviderFromUrl } from '../../contexts/Runtime';
+import useAppearances from '../../hooks/use-appearances';
 import { useRuntimeState } from '../../state/runtime';
 const logoSize = 44;
-function AgentCreatedBy({ agent }) {
+function AgentCreatedBy({ did }) {
     const { t } = useLocaleContext();
-    return (_jsxs(_Fragment, { children: [t('by'), " ", _jsx(Box, { component: DID, did: agent.createdBy, copyable: false, responsive: true })] }));
+    return (_jsxs(_Fragment, { children: [t('by'), " ", _jsx(Box, { component: DID, did: did, copyable: false, responsive: true })] }));
 }
 export default function Runtime() {
     return (_jsx(RuntimeProviderFromUrl, { children: _jsx(RuntimeView, {}) }));
 }
 function RuntimeView() {
     var _a;
-    const { agent, appearancePage } = useRuntimeState();
+    const { aid, agent } = useRuntimeState();
+    const { appearancePage } = useAppearances({ aid });
     const theme = useTheme();
     const isMobile = useMediaQuery(theme.breakpoints.down('sm'));
     const { locale } = useLocaleContext();
     useEffect(() => {
         useHeaderState.setState((state) => {
-            var _a;
-            const logo = (_a = appearancePage === null || appearancePage === void 0 ? void 0 : appearancePage.logo) === null || _a === void 0 ? void 0 : _a.url;
+            const logo = joinURL(window.location.origin, getComponentMountPoint(AI_STUDIO_DID), '/api/projects', agent.project.id, '/logo.png');
             state.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,
@@ -37,7 +40,7 @@ function RuntimeView() {
                 state.brand = (_jsx(Box, { sx: {
                         height: 18,
                         fontSize: 18,
-                    }, children: (appearancePage === null || appearancePage === void 0 ? void 0 : appearancePage.name) || agent.name }));
+                    }, children: agent.project.name }));
                 state.description = agent.createdBy && (_jsx(RuntimeLocaleProvider, { children: _jsx(Box, { sx: {
                             display: 'inline-flex',
                             alignItems: 'center',
@@ -45,7 +48,7 @@ function RuntimeView() {
                             mt: 0.5,
                             height: 12,
                             fontSize: 12,
-                        }, children: _jsx(AgentCreatedBy, { agent: agent }) }) }));
+                        }, children: _jsx(AgentCreatedBy, { did: agent.project.createdBy }) }) }));
             }
             const shareContent = `${agent.name}
 
@@ -61,7 +64,7 @@ function RuntimeView() {
                 state.addons = (...exists) => [...exists];
             });
         };
-    }, [appearancePage, locale, isMobile, agent]);
+    }, [locale, isMobile, agent]);
     const componentId = (_a = appearancePage === null || appearancePage === void 0 ? void 0 : appearancePage.componentId) !== null && _a !== void 0 ? _a : DEFAULT_PAGE_COMPONENT_ID;
-    return (_jsxs(RuntimeCommonProvider, { children: [appearancePage && (_jsxs(Helmet, { children: [appearancePage.name && _jsx("title", { children: appearancePage.name }), appearancePage.description && _jsx("meta", { name: "description", content: appearancePage.description })] })), _jsx(CustomComponentRenderer, { componentId: componentId, properties: appearancePage === null || appearancePage === void 0 ? void 0 : appearancePage.componentProps })] }));
+    return (_jsxs(RuntimeCommonProvider, { 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.componentProps })] }));
 }

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

@@ -20,6 +20,7 @@ import { Avatar } from '../../../../arcblock/ux';
 import { useSessionContext } from '../../../../session';
 import MarkdownRenderer from '../../components/MarkdownRenderer';
 import ShareActions from '../../components/ShareActions';
+import { useProfile } from '../../hooks/use-appearances';
 import { useRuntimeState } from '../../state/runtime';
 import MessageErrorView from './MessageErrorView';
 import MessageMetadataRenderer from './MessageMetadataRenderer';
@@ -82,13 +83,14 @@ function UserMessage({ message, hideAvatar }) {
                 }, children: [!hideAvatar && (_jsxs(MessageUserName, { children: [(_c = authSession.user) === null || _c === void 0 ? void 0 : _c.fullName, _jsx(MessageTime, { time: message.createdAt })] })), _jsx(Box, { className: "message-question", sx: { whiteSpace: 'pre-wrap', wordBreak: 'break-word', textAlign: 'left' }, children: (_d = message.parameters) === null || _d === void 0 ? void 0 : _d.question })] })] }));
 }
 function AgentMessage({ message, hideAvatar }) {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
-    const { appearancePage } = useRuntimeState();
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+    const { aid } = useRuntimeState();
+    const profile = useProfile({ aid });
     const showMainMessage = !!(((_a = message.result) === null || _a === void 0 ? void 0 : _a.content) || ((_c = (_b = message.result) === null || _b === void 0 ? void 0 : _b.messages) === null || _c === void 0 ? void 0 : _c.length));
     const isMessageLoading = (message.loading || !message.result) && !message.error;
     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: (_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: {
+    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: 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: {
                                     popper: {
                                         disablePortal: true,
                                         modifiers: [
@@ -104,13 +106,13 @@ function AgentMessage({ message, hideAvatar }) {
                                         sx: { p: 0, bgcolor: 'white' },
                                     },
                                 }, title: !isMessageLoading &&
-                                    ((_f = message.result) === null || _f === void 0 ? void 0 : _f.content) && (_jsx(ShareActions, { sx: {
+                                    ((_e = message.result) === null || _e === void 0 ? void 0 : _e.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) => {
+                                    } })), children: _jsxs(Stack, { gap: 1, className: "message-response", children: [(_g = (_f = message.result) === null || _f === void 0 ? void 0 : _f.messages) === null || _g === void 0 ? void 0 : _g.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) &&
@@ -118,16 +120,17 @@ function AgentMessage({ message, hideAvatar }) {
                                                     message.result.messages.length - 1 === index
                                                     ? 'writing'
                                                     : '', sx: childMsg.respondAs === 'systemMessage' ? { color: 'text.secondary' } : {}, children: (_e = childMsg.result) === null || _e === void 0 ? void 0 : _e.content }, childMsg.taskId)) : ((_g = (_f = childMsg.result) === null || _f === void 0 ? void 0 : _f.images) === null || _g === void 0 ? void 0 : _g.length) ? (_jsx(ImagePreview, { itemWidth: 100, spacing: 1, dataSource: childMsg.result.images.map((i) => ({ src: i.url })) }, childMsg.taskId)) : null;
-                                        }), ((_j = message.result) === null || _j === void 0 ? void 0 : _j.content) && (_jsx(MarkdownRenderer, { className: isMessageLoading ? 'writing' : '', children: message.result.content }))] }) })) : (isMessageLoading && (_jsx(Skeleton, { variant: "rectangular", height: 24 + 8 + 8, 
+                                        }), ((_h = message.result) === null || _h === void 0 ? void 0 : _h.content) && (_jsx(MarkdownRenderer, { className: isMessageLoading ? 'writing' : '', children: message.result.content }))] }) })) : (isMessageLoading && (_jsx(Skeleton, { variant: "rectangular", height: 24 + 8 + 8, 
                                 // only response with loading
-                                className: "message-response" }))), (_l = (_k = message.result) === null || _k === void 0 ? void 0 : _k.objects) === null || _l === void 0 ? void 0 : _l.map((object) => (_jsx(MessageMetadataRenderer, { object: object.data }, object.taskId))), message.error && _jsx(MessageErrorView, { error: message.error })] })] })] }));
+                                className: "message-response" }))), (_k = (_j = message.result) === null || _j === void 0 ? void 0 : _j.objects) === null || _k === void 0 ? void 0 : _k.map((object) => (_jsx(MessageMetadataRenderer, { object: object.data }, object.taskId))), message.error && _jsx(MessageErrorView, { error: message.error })] })] })] }));
 }
 export function MessageItemWrapper(_a) {
-    var _b, _c;
+    var _b;
     var { hideAvatar, agentMessage } = _a, props = __rest(_a, ["hideAvatar", "agentMessage"]);
-    const { appearancePage } = useRuntimeState();
+    const { 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: (_c = appearancePage === null || appearancePage === void 0 ? void 0 : appearancePage.logo) === null || _c === void 0 ? void 0 : _c.url }) })), _jsxs(Box, { flex: 1, width: 0, children: [!hideAvatar && (_jsxs(MessageUserName, { children: [appearancePage === null || appearancePage === void 0 ? void 0 : appearancePage.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: profile.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/ChatOutput/MessageMetadataRenderer.js

@@ -6,10 +6,13 @@ import { useMemo } from 'react';
 import ReferenceLinks from './ReferenceLinks';
 export default function MessageMetadataRenderer({ object }) {
     const referenceLinks = object[RuntimeOutputVariable.referenceLinks];
-    const images = useMemo(() => {
-        const list = object[RuntimeOutputVariable.images];
-        const images = (Array.isArray(list) ? list.map((i) => ({ src: i.url })) : []).filter((i) => typeof i.src === 'string');
-        return images.length ? images : undefined;
+    // 方便后续添加 metadata
+    const formattedObject = useMemo(() => {
+        const imagesList = object[RuntimeOutputVariable.images];
+        const images = (Array.isArray(imagesList) ? imagesList.map((i) => ({ src: i.url })) : []).filter((i) => typeof i.src === 'string');
+        return {
+            images: (images === null || images === void 0 ? void 0 : images.length) ? images : undefined,
+        };
     }, [object]);
-    return (_jsxs(_Fragment, { children: [Array.isArray(referenceLinks) && referenceLinks.length ? _jsx(ReferenceLinks, { links: referenceLinks }) : undefined, images && (_jsx(Stack, { gap: 1, children: _jsx(ImagePreview, { dataSource: images, itemWidth: 100 }) }))] }));
+    return (_jsxs(_Fragment, { children: [Array.isArray(referenceLinks) && referenceLinks.length ? _jsx(ReferenceLinks, { links: referenceLinks }) : undefined, (formattedObject === null || formattedObject === void 0 ? void 0 : formattedObject.images) && (_jsx(Stack, { gap: 1, children: _jsx(ImagePreview, { dataSource: formattedObject.images, itemWidth: 100 }) }))] }));
 }

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

@@ -0,0 +1,163 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { RuntimeOutputVariable } from '@blocklet/ai-runtime/types';
+import { Avatar, Box, IconButton, Stack, ThemeProvider, alpha, createTheme, useTheme, } from '@mui/material';
+import { memo, useEffect, useMemo, useState } from 'react';
+import { useScrollToBottom } from 'react-scroll-to-bottom';
+import CustomComponentRenderer from '../../../../../components/CustomComponentRenderer';
+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 useAppearances, { useOpeningMessage, useOpeningQuestions, useProfile } from '../../hooks/use-appearances';
+import { useRuntimeState } from '../../state/runtime';
+import { useSessionState } from '../../state/session';
+import { getOutputVariableInitialValue } from '../../utils/runtime-output-schema';
+import MessageSuggestedQuestions, { MessageSuggestedQuestion } from '../ChatOutput/MessageSuggestedQuestions';
+export default function MultiAgentsChat({ primaryColor, scrollViewProps = { scroll: 'window', initialScrollBehavior: 'auto' }, backgroundImage, }) {
+    useSessionState({ autoLoad: true });
+    const inheritedTheme = useTheme();
+    const theme = useMemo(() => {
+        let { primary } = inheritedTheme.palette;
+        try {
+            if (primaryColor) {
+                primary = inheritedTheme.palette.augmentColor({ color: { main: primaryColor } });
+            }
+        }
+        catch (error) {
+            console.error('augment primary color error', { error });
+        }
+        return createTheme(inheritedTheme, {
+            palette: { primary },
+            shape: {
+                borderRadius: 8,
+            },
+        });
+    }, [inheritedTheme, primaryColor]);
+    return (_jsx(ScrollView, Object.assign({}, scrollViewProps, { children: _jsxs(ThemeProvider, { theme: theme, children: [_jsx(Box, { sx: {
+                        position: 'fixed',
+                        left: 0,
+                        top: 0,
+                        right: 0,
+                        bottom: 0,
+                        backgroundImage: `url(${backgroundImage === null || backgroundImage === void 0 ? void 0 : backgroundImage.url}) !important`,
+                        backgroundRepeat: 'no-repeat',
+                        backgroundSize: 'cover',
+                        backgroundPosition: 'center',
+                        pointerEvents: 'none',
+                        zIndex: -1,
+                    } }), _jsx(SimpleChatView, {})] }) })));
+}
+function SimpleChatView() {
+    // auto scroll to bottom when new message is sent
+    const running = useSessionState()((s) => s.running);
+    const scrollToBottom = useScrollToBottom();
+    useEffect(() => {
+        if (running)
+            scrollToBottom({ behavior: 'smooth' });
+    }, [scrollToBottom, running]);
+    const { childAgentId } = useRuntimeState();
+    const [currentAgentId, setCurrentAgentId] = useState(childAgentId);
+    return (_jsxs(SimpleLayout, { children: [_jsx(SimpleHeader, { px: 2 }), _jsx(OutputView, { className: "aigne-outputs aigne-simple-chat-outputs", flexGrow: 1, pb: 10, px: 2, currentAgentId: currentAgentId }), _jsx(AgentInputRender, { className: "aigne-inputs aigne-simple-chat-inputs", currentAgentId: currentAgentId, onCurrentAgentIdChange: setCurrentAgentId, sx: {
+                    position: 'sticky',
+                    bottom: 0,
+                    p: 2,
+                    borderRadius: 1,
+                    bgcolor: (theme) => alpha(theme.palette.background.paper, 0.7),
+                    backdropFilter: 'blur(10px)',
+                    zIndex: 10,
+                } })] }));
+}
+function AgentInputRender(_a) {
+    var { currentAgentId, onCurrentAgentIdChange } = _a, props = __rest(_a, ["currentAgentId", "onCurrentAgentIdChange"]);
+    const { agent } = useRuntimeState();
+    const children = useMemo(() => { var _a, _b; return (_b = (_a = getOutputVariableInitialValue(agent, RuntimeOutputVariable.children)) === null || _a === void 0 ? void 0 : _a.agents) === null || _b === void 0 ? void 0 : _b.filter((i) => !!i.id); }, [agent]);
+    return (_jsxs(Stack, Object.assign({ gap: 2 }, props, { children: [_jsx(Stack, { direction: "row", gap: 2, children: children === null || children === void 0 ? void 0 : children.map((child) => (_jsx(CurrentAgentProvider, { agentId: child.id, children: _jsx(AgentAvatar, { selected: currentAgentId === child.id, onClick: () => onCurrentAgentIdChange(child.id) }) }))) }), _jsx(Stack, { children: _jsx(CurrentAgentProvider, { agentId: currentAgentId, children: _jsx(AgentInput, {}) }) })] })));
+}
+function AgentAvatar(_a) {
+    var _b;
+    var { selected } = _a, props = __rest(_a, ["selected"]);
+    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) }) })));
+}
+function AgentInput() {
+    const { aid } = useCurrentAgent();
+    const { appearanceInput } = useAppearances({ aid });
+    if (!(appearanceInput === null || appearanceInput === void 0 ? void 0 : appearanceInput.componentId))
+        return null;
+    return (_jsx(CustomComponentRenderer, { componentId: appearanceInput.componentId, properties: appearanceInput.componentProps }));
+}
+function OutputView(_a) {
+    var { currentAgentId } = _a, props = __rest(_a, ["currentAgentId"]);
+    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: [_jsx(CurrentAgentProvider, { agentId: currentAgentId, children: _jsx(OpeningMessageView, {}) }), messages === null || messages === void 0 ? void 0 : messages.map((message) => _jsx(OutputItemView, { message: message }, message.taskId)), lastMessage && lastMessage.assistantId === currentAgentId && _jsx(SuggestedQuestionsView, { message: lastMessage }), !loading && !(messages === null || messages === void 0 ? void 0 : messages.length) && (_jsx(CurrentAgentProvider, { agentId: currentAgentId, children: _jsx(OpeningQuestionsView, {}) }))] })));
+}
+const OutputItemView = memo(({ message }) => {
+    var _a, _b, _c, _d;
+    const { aid } = useCurrentAgent({ agentId: message.assistantId });
+    const { appearanceOutput } = useAppearances({ aid });
+    const profile = useProfile({ aid });
+    const { session: authSession } = useSessionContext();
+    if (!(appearanceOutput === null || appearanceOutput === void 0 ? void 0 : appearanceOutput.componentId))
+        return null;
+    return (_jsx(CurrentAgentProvider, { agentId: message.assistantId, children: _jsx(CurrentMessageProvider, { message: message, children: _jsxs(Stack, { gap: 2, children: [_jsx(Box, { children: _jsx(UserInfo, { name: (_a = authSession.user) === null || _a === void 0 ? void 0 : _a.fullName, did: (_b = authSession.user) === null || _b === void 0 ? void 0 : _b.did, avatar: (_c = authSession.user) === null || _c === void 0 ? void 0 : _c.avatar, time: message.createdAt, reverse: true, alignItems: "flex-start", children: _jsx(CustomComponentRenderer, { componentId: appearanceOutput.componentId, properties: appearanceOutput.componentProps, props: {
+                                    renderType: 'parameters',
+                                } }) }) }), _jsx(Box, { children: _jsx(UserInfo, { name: profile.name, did: (_d = globalThis.blocklet) === null || _d === void 0 ? void 0 : _d.appId, avatar: profile.avatar, time: message.createdAt, alignItems: "flex-start", children: _jsx(CustomComponentRenderer, { componentId: appearanceOutput.componentId, properties: appearanceOutput.componentProps, props: {
+                                    renderType: 'result',
+                                } }) }) })] }) }) }));
+});
+function SuggestedQuestionsView({ message }) {
+    const { aid } = useCurrentAgent({ agentId: message.assistantId });
+    const { execute } = useRuntimeState();
+    const suggestedQuestions = useMemo(() => {
+        var _a, _b, _c;
+        return (_c = (_b = (_a = message === null || message === void 0 ? void 0 : message.result) === null || _a === void 0 ? void 0 : _a.objects) === null || _b === void 0 ? void 0 : _b[0]) === null || _c === void 0 ? void 0 : _c.data[RuntimeOutputVariable.suggestedQuestions];
+    }, [message]);
+    return (_jsx(Box, { ml: 6.5, mr: 2.5, children: (suggestedQuestions === null || suggestedQuestions === void 0 ? void 0 : suggestedQuestions.length) ? (_jsx(MessageSuggestedQuestions, { dataSource: suggestedQuestions, onClick: (item) => {
+                execute({ aid, parameters: Object.assign(Object.assign({}, message.parameters), { question: item.question }) });
+            } })) : null }));
+}
+const OpeningMessageView = memo(() => {
+    var _a;
+    const opening = useOpeningMessage();
+    if (!opening)
+        return null;
+    return (_jsx(Box, { children: _jsx(UserInfo, { name: opening.profile.name, did: (_a = globalThis.blocklet) === null || _a === void 0 ? void 0 : _a.appId, avatar: opening.profile.avatar, 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: opening.message }) }) }) }));
+});
+function OpeningQuestionsView() {
+    const { execute } = useRuntimeState();
+    const { aid } = useCurrentAgent();
+    const opening = useOpeningQuestions({ aid });
+    if (!(opening === null || opening === void 0 ? void 0 : opening.questions.length))
+        return null;
+    return (_jsx(Box, { ml: 6.5, mr: 2.5, children: _jsx(Stack, { gap: 1, children: opening.questions.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/PhotoGallery/index.js

@@ -18,8 +18,9 @@ import CustomComponentRenderer from '../../../../../components/CustomComponentRe
 import { useLocaleContext } from '../../../../locale';
 import SimpleHeader from '../../components/Header/SimpleHeader';
 import LoadingButton from '../../components/LoadingButton';
-import CurrentAgentProvider, { useCurrentAgent } from '../../contexts/CurrentAgent';
+import CurrentAgentProvider from '../../contexts/CurrentAgent';
 import CurrentMessageProvider from '../../contexts/CurrentMessage';
+import useAppearances from '../../hooks/use-appearances';
 import { useRuntimeState } from '../../state/runtime';
 import { useSessionState } from '../../state/session';
 import mapRight from '../../utils/map-right';
@@ -48,7 +49,7 @@ export default function PhotoGallery({ resultTitle, primaryColor }) {
 }
 function AgentInputRender(_a) {
     var props = __rest(_a, []);
-    const { appearanceInput } = useCurrentAgent();
+    const { appearanceInput } = useAppearances();
     if (!(appearanceInput === null || appearanceInput === void 0 ? void 0 : appearanceInput.componentId))
         return null;
     return (_jsx(Stack, Object.assign({}, props, { children: _jsx(CustomComponentRenderer, { componentId: appearanceInput.componentId, properties: appearanceInput.componentProps }) })));
@@ -68,7 +69,7 @@ function OutputView(_a) {
                         } })), mapRight(messages, (message) => (_jsx(OutputItemView, { message: message }, message.taskId)))] }), _jsx(Box, { my: 4, children: !!messages.length && !noMoreMessage && (_jsx(LoadingButton, { variant: "outlined", onClick: loadMoreMessages, children: t('loadMore') })) })] })));
 }
 const OutputItemView = memo(({ message }) => {
-    const { appearanceOutput } = useCurrentAgent({ agentId: message.assistantId });
+    const { appearanceOutput } = useAppearances({ agentId: message.assistantId });
     if (!(appearanceOutput === null || appearanceOutput === void 0 ? void 0 : appearanceOutput.componentId))
         return null;
     return (_jsx(CurrentAgentProvider, { agentId: message.assistantId, children: _jsx(CurrentMessageProvider, { message: message, children: _jsx(Suspense, { children: _jsx(CustomComponentRenderer, { componentId: appearanceOutput.componentId, properties: appearanceOutput.componentProps }) }) }) }, message.taskId));