@blocklet/pages-kit 0.2.308 → 0.2.310

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));

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

@@ -10,7 +10,7 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { RuntimeOutputVariable, } from '@blocklet/ai-runtime/types';
+import { RuntimeOutputVariable } from '@blocklet/ai-runtime/types';
 import { Box, Stack, ThemeProvider, createTheme, useTheme } from '@mui/material';
 import { memo, useEffect, useMemo } from 'react';
 import { useScrollToBottom } from 'react-scroll-to-bottom';
@@ -23,6 +23,7 @@ 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 MessageSuggestedQuestions, { MessageSuggestedQuestion } from '../ChatOutput/MessageSuggestedQuestions';
@@ -61,8 +62,8 @@ function SimpleChatView() {
 }
 function AgentInputRender(_a) {
     var props = __rest(_a, []);
-    const { appearanceInput } = useCurrentAgent();
-    if (!(appearanceInput === null || appearanceInput === void 0 ? void 0 : appearanceInput.componentId))
+    const { appearanceInput } = useAppearances();
+    if (!appearanceInput.componentId)
         return null;
     return (_jsx(Stack, Object.assign({}, props, { children: _jsx(CustomComponentRenderer, { componentId: appearanceInput.componentId, properties: appearanceInput.componentProps }) })));
 }
@@ -74,15 +75,15 @@ function OutputView(_a) {
     return (_jsxs(Stack, Object.assign({ gap: 2 }, props, { children: [_jsx(OpeningMessageView, {}), messages === null || messages === void 0 ? void 0 : messages.map((message) => _jsx(OutputItemView, { message: message }, message.taskId)), lastMessage && _jsx(SuggestedQuestionsView, { message: lastMessage }), !loading && !(messages === null || messages === void 0 ? void 0 : messages.length) && _jsx(OpeningQuestionsView, {})] })));
 }
 const OutputItemView = memo(({ message }) => {
-    var _a, _b, _c, _d, _e;
-    const { appearanceOutput } = useCurrentAgent({ agentId: message.assistantId });
-    const { appearancePage } = useRuntimeState();
+    var _a, _b, _c, _d;
     const { session: authSession } = useSessionContext();
+    const { appearanceOutput } = useAppearances({ agentId: message.assistantId });
+    const profile = useProfile({ 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: _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: appearancePage === null || appearancePage === void 0 ? void 0 : appearancePage.name, did: (_d = globalThis.blocklet) === null || _d === void 0 ? void 0 : _d.appId, avatar: (_e = appearancePage === null || appearancePage === void 0 ? void 0 : appearancePage.logo) === null || _e === void 0 ? void 0 : _e.url, time: message.createdAt, alignItems: "flex-start", children: _jsx(CustomComponentRenderer, { componentId: appearanceOutput.componentId, properties: appearanceOutput.componentProps, props: {
+                                } }) }) }), _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',
                                 } }) }) })] }) }) }));
 });
@@ -98,16 +99,12 @@ function SuggestedQuestionsView({ message }) {
             } })) : null }));
 }
 const OpeningMessageView = memo(() => {
-    var _a, _b;
-    const { childAgentId, appearancePage } = useRuntimeState();
-    const { agent } = useCurrentAgent({ agentId: childAgentId });
-    const openingMessage = useMemo(() => {
-        var _a, _b;
-        return (_b = (_a = agent.outputVariables) === null || _a === void 0 ? void 0 : _a.find((i) => i.name === RuntimeOutputVariable.openingMessage)) === null || _b === void 0 ? void 0 : _b.initialValue;
-    }, [agent]);
-    if (!(openingMessage === null || openingMessage === void 0 ? void 0 : openingMessage.message))
+    var _a;
+    const { childAgentId } = useRuntimeState();
+    const opening = useOpeningMessage({ agentId: childAgentId });
+    if (!(opening === null || opening === void 0 ? void 0 : opening.message))
         return null;
-    return (_jsx(Box, { children: _jsx(UserInfo, { name: (appearancePage === null || appearancePage === void 0 ? void 0 : appearancePage.name) || agent.name, did: (_a = globalThis.blocklet) === null || _a === void 0 ? void 0 : _a.appId, avatar: (_b = appearancePage === null || appearancePage === void 0 ? void 0 : appearancePage.logo) === null || _b === void 0 ? void 0 : _b.url, alignItems: "flex-start", children: _jsx(Box, { sx: {
+    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,
@@ -115,19 +112,16 @@ const OpeningMessageView = memo(() => {
                     py: 1,
                     mt: 0.5,
                     mr: 5,
-                }, children: _jsx(MarkdownRenderer, { children: openingMessage.message }) }) }) }));
+                }, children: _jsx(MarkdownRenderer, { children: opening.message }) }) }) }));
 });
 function OpeningQuestionsView() {
-    const { childAgentId } = useRuntimeState();
     const { execute } = useRuntimeState();
-    const { aid, agent } = useCurrentAgent({ agentId: childAgentId });
-    const openingQuestions = useMemo(() => {
-        var _a, _b, _c, _d;
-        return (_d = (_c = (_b = (_a = agent.outputVariables) === null || _a === void 0 ? void 0 : _a.find((i) => i.name === RuntimeOutputVariable.openingQuestions)) === null || _b === void 0 ? void 0 : _b.initialValue) === null || _c === void 0 ? void 0 : _c.items) === null || _d === void 0 ? void 0 : _d.filter((i) => !!i.title);
-    }, [agent]);
-    if (!(openingQuestions === null || openingQuestions === void 0 ? void 0 : openingQuestions.length))
+    const { childAgentId } = useRuntimeState();
+    const { aid } = useCurrentAgent({ agentId: childAgentId });
+    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: openingQuestions.map((item) => {
+    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/SimplePage/index.js

@@ -16,8 +16,9 @@ import Balancer from 'react-wrap-balancer';
 import CustomComponentRenderer from '../../../../../components/CustomComponentRenderer';
 import SimpleHeader from '../../components/Header/SimpleHeader';
 import SimpleLayout from '../../components/Layout/SimpleLayout';
-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';
 export default function SimplePage({ resultTitle, primaryColor }) {
@@ -45,7 +46,7 @@ export default function SimplePage({ 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 }) })));
@@ -56,7 +57,7 @@ function OutputView(_a) {
     return (_jsx(Stack, Object.assign({ gap: 2, mt: 4 }, props, { children: lastMessage && (_jsxs(_Fragment, { children: [resultTitle && (_jsx(Typography, { width: "100%", component: "h5", fontSize: 36, fontWeight: 700, textAlign: "center", children: _jsx(Balancer, { children: resultTitle }) })), _jsx(Stack, { children: _jsx(OutputItemView, { message: lastMessage }) })] })) })));
 }
 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 }) }) }) }));

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

@@ -39,13 +39,9 @@ export function useRuntimeState() {
         }
         return exec(Object.assign(Object.assign({}, args), { working }));
     }), [authSession.user, exec, working, login]);
-    const appearancePage = useMemo(() => {
-        var _a, _b;
-        return (_b = (_a = agent.outputVariables) === null || _a === void 0 ? void 0 : _a.find((i) => i.name === RuntimeOutputVariable.appearancePage)) === null || _b === void 0 ? void 0 : _b.initialValue;
-    }, [agent]);
     const childAgentId = useMemo(() => {
         var _a, _b, _c, _d, _e, _f;
         return ((_f = (_e = (_d = (_c = (_b = (_a = agent.outputVariables) === null || _a === void 0 ? void 0 : _a.find((i) => i.name === RuntimeOutputVariable.children)) === null || _b === void 0 ? void 0 : _b.initialValue) === null || _c === void 0 ? void 0 : _c.agents) === null || _d === void 0 ? void 0 : _d[0]) === null || _e === void 0 ? void 0 : _e.id) !== null && _f !== void 0 ? _f : agent.id);
     }, [agent]);
-    return { aid, working, agent, appearancePage, childAgentId, execute };
+    return { aid, working, agent, childAgentId, execute };
 }

package/lib/esm/builtin/async/ai-runtime/utils/runtime-output-schema.js

@@ -0,0 +1,4 @@
+export function getOutputVariableInitialValue(agent, output) {
+    var _a, _b;
+    return (_b = (_a = agent.outputVariables) === null || _a === void 0 ? void 0 : _a.find((i) => i.name === output)) === null || _b === void 0 ? void 0 : _b.initialValue;
+}

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

@@ -14,6 +14,14 @@ export interface Agent {
     }[];
     release?: AssistantBase['release'];
     createdBy?: string;
+    project: {
+        id: string;
+        name?: string;
+        description?: string;
+        createdBy: string;
+        createdAt: string;
+        updatedAt: string;
+    };
 }
 export declare function getAgent({ aid, working }: {
     aid: string;

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

@@ -1,5 +1,5 @@
-import { RuntimeOutputAppearance } from '@blocklet/ai-runtime/types';
 import { ReactNode } from 'react';
+import { Agent } from '../api/agent';
 export interface CurrentAgentState {
     aid: string;
 }
@@ -7,11 +7,10 @@ export default function CurrentAgentProvider({ agentId, children }: {
     agentId: string;
     children?: ReactNode;
 }): import("react/jsx-runtime").JSX.Element;
-export declare function useCurrentAgent({ agentId }?: {
+export declare function useCurrentAgent(args?: {
+    aid?: string;
     agentId?: string;
 }): {
     aid: string;
-    agent: import("immer").WritableDraft<import("../api/agent").Agent>;
-    appearanceInput: RuntimeOutputAppearance;
-    appearanceOutput: RuntimeOutputAppearance;
+    agent: Agent;
 };

package/lib/types/builtin/async/ai-runtime/hooks/use-appearances.d.ts

@@ -0,0 +1,45 @@
+export default function useAppearances(args?: {
+    aid: string;
+} | {
+    agentId: string;
+}): {
+    appearancePage: {
+        componentId: string;
+        componentName?: string | undefined;
+        componentProps?: {
+            [key: string]: any;
+        } | undefined;
+    };
+    appearanceInput: import("@blocklet/ai-runtime/types").RuntimeOutputAppearance;
+    appearanceOutput: import("@blocklet/ai-runtime/types").RuntimeOutputAppearance;
+};
+export declare function useProfile(args?: {
+    aid: string;
+} | {
+    agentId: string;
+}): {
+    avatar: string;
+    name: string | undefined;
+};
+export declare function useOpeningMessage(args?: {
+    aid: string;
+} | {
+    agentId: string;
+}): {
+    message: string;
+    profile: {
+        avatar: string;
+        name: string | undefined;
+    };
+} | undefined;
+export declare function useOpeningQuestions(args?: {
+    aid: string;
+} | {
+    agentId: string;
+}): {
+    questions: {
+        id: string;
+        title?: string | undefined;
+        parameters?: any;
+    }[];
+} | undefined;

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

@@ -8,6 +8,7 @@ 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';

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

@@ -0,0 +1,11 @@
+import { ComponentProps } from 'react';
+import ScrollView from '../../components/ScrollView';
+export default function MultiAgentsChat({ primaryColor, scrollViewProps, backgroundImage, }: {
+    primaryColor?: string;
+    scrollViewProps?: ComponentProps<typeof ScrollView>;
+    backgroundImage?: {
+        url?: string;
+        width?: number;
+        height?: number;
+    };
+}): import("react/jsx-runtime").JSX.Element;

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

@@ -13,4 +13,4 @@ export declare const createAgentState: ({ aid, working, agent }: {
 export declare function useAgentState({ aid, working }: {
     aid: string;
     working?: boolean;
-}): readonly [import("immer").WritableDraft<Agent>, import("immer").WritableDraft<AgentState>];
+}): [Agent, AgentState];

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

@@ -1,9 +1,7 @@
-import { RuntimeOutputAppearancePage } from '@blocklet/ai-runtime/types';
 export declare function useRuntimeState(): {
     aid: string;
     working: boolean | undefined;
-    agent: import("immer").WritableDraft<import("../api/agent").Agent>;
-    appearancePage: RuntimeOutputAppearancePage | undefined;
+    agent: import("../api/agent").Agent;
     childAgentId: string;
     execute: (options: {
         aid: string;

package/lib/types/builtin/async/ai-runtime/utils/runtime-output-schema.d.ts

@@ -0,0 +1,3 @@
+import { RuntimeOutputVariable, RuntimeOutputVariablesSchema } from '@blocklet/ai-runtime/types';
+import { Agent } from '../api/agent';
+export declare function getOutputVariableInitialValue<T extends RuntimeOutputVariable>(agent: Agent, output: T): RuntimeOutputVariablesSchema[T] | undefined;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/pages-kit",
-  "version": "0.2.308",
+  "version": "0.2.310",
   "description": "Pages Kit components and utils",
   "publishConfig": {
     "access": "public"
@@ -81,9 +81,9 @@
     "url": "git+https://github.com/blocklet/pages-kit.git"
   },
   "dependencies": {
-    "@arcblock/did-connect": "^2.9.77",
-    "@blocklet/ai-kit": "^0.1.31",
-    "@blocklet/ai-runtime": "^0.1.381",
+    "@arcblock/did-connect": "^2.9.79",
+    "@blocklet/ai-kit": "^0.1.33",
+    "@blocklet/ai-runtime": "^0.1.388",
     "@blocklet/js-sdk": "1.16.26",
     "@blocklet/sdk": "^1.16.26",
     "@iconify/react": "^4.1.1",
@@ -127,7 +127,7 @@
     "react-router-dom": "^6.16.0"
   },
   "devDependencies": {
-    "@arcblock/ux": "^2.9.77",
+    "@arcblock/ux": "^2.9.79",
     "@emotion/cache": "^11.11.0",
     "@emotion/css": "^11.11.2",
     "@emotion/react": "^11.11.4",
@@ -146,7 +146,7 @@
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-router-dom": "^6.23.1",
-    "rimraf": "^5.0.6"
+    "rimraf": "^5.0.7"
   },
   "scripts": {
     "lint": "eslint src --ext .mjs,.js,.jsx,.ts,.tsx",