npm - @blocklet/pages-kit - Versions diffs - 0.2.309 → 0.2.310 - Mend

@blocklet/pages-kit 0.2.309 → 0.2.310

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (37) hide show

package/lib/cjs/builtin/async/ai-runtime/components/Header/SimpleHeader.js CHANGED Viewed

@@ -41,9 +41,9 @@ const react_wrap_balancer_1 = __importStar(require("react-wrap-balancer"));
 const runtime_1 = require("../../state/runtime");
 function SimpleHeader(_a) {
     var { TitleProps, DescriptionProps } = _a, props = __rest(_a, ["TitleProps", "DescriptionProps"]);
-    const { agent, appearancePage } = (0, runtime_1.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 } = (0, runtime_1.useRuntimeState)();
+    const title = agent.project.name;
+    const { description } = agent.project;
     return ((0, jsx_runtime_1.jsx)(material_1.Stack, Object.assign({ gap: 2, mt: 8, mb: 4 }, props, { className: (0, css_1.cx)('aigne-header aigne-simple-header', props.className), children: (0, jsx_runtime_1.jsxs)(react_wrap_balancer_1.Provider, { children: [title && ((0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ width: "100%", component: "h5", fontSize: 30, fontWeight: 700, textAlign: "center" }, TitleProps, { children: (0, jsx_runtime_1.jsx)(react_wrap_balancer_1.default, { children: title }) }))), description && ((0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ width: "100%", textAlign: "center" }, DescriptionProps, { children: (0, jsx_runtime_1.jsx)(react_wrap_balancer_1.default, { children: description }) })))] }) })));
 }
 exports.default = SimpleHeader;

package/lib/cjs/builtin/async/ai-runtime/components/ShareActions/index.js CHANGED Viewed

@@ -56,6 +56,7 @@ const ufo_1 = require("ufo");
 const locale_1 = require("../../../../locale");
 const CurrentAgent_1 = require("../../contexts/CurrentAgent");
 const CurrentMessage_1 = require("../../contexts/CurrentMessage");
+const use_appearances_1 = require("../../hooks/use-appearances");
 const runtime_1 = require("../../state/runtime");
 const download_image_1 = require("../../utils/download-image");
 const ActionButton_1 = __importDefault(require("../ActionButton"));
@@ -118,7 +119,8 @@ function ShareSave() {
     var _a, _b, _c, _d, _e, _f;
     const { t } = (0, locale_1.useLocaleContext)();
     const { message } = (0, CurrentMessage_1.useCurrentMessage)();
-    const { agent, appearancePage } = (0, runtime_1.useRuntimeState)();
+    const { aid, agent } = (0, runtime_1.useRuntimeState)();
+    const profile = (0, use_appearances_1.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[types_1.RuntimeOutputVariable.images]) === null || _a === void 0 ? void 0 : _a.length; })) === null || _d === void 0 ? void 0 : _d.data[types_1.RuntimeOutputVariable.images]) === null || _e === void 0 ? void 0 : _e.at(0)) === null || _f === void 0 ? void 0 : _f.url;
     if (!content && !image)
@@ -132,7 +134,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' },
@@ -141,7 +143,7 @@ function ShareSave() {
                     .save();
             }
             else if (image) {
-                (0, file_saver_1.saveAs)(image, `${(appearancePage === null || appearancePage === void 0 ? void 0 : appearancePage.name) || agent.name || agent.id}.png`);
+                (0, file_saver_1.saveAs)(image, `${profile.name || agent.id}.png`);
             }
         }) }));
 }

package/lib/cjs/builtin/async/ai-runtime/contexts/CurrentAgent.js CHANGED Viewed

@@ -3,9 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.useCurrentAgent = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const aid_1 = require("@blocklet/ai-runtime/common/aid");
-const types_1 = require("@blocklet/ai-runtime/types");
 const react_1 = require("react");
-const constants_1 = require("../constants");
 const agent_1 = require("../state/agent");
 const runtime_1 = require("../state/runtime");
 function useCurrentAid({ agentId }) {
@@ -20,24 +18,18 @@ function CurrentAgentProvider({ agentId, children }) {
     return (0, jsx_runtime_1.jsx)(context.Provider, { value: state, children: children });
 }
 exports.default = CurrentAgentProvider;
-function useCurrentAgent({ agentId } = {}) {
+function useCurrentAgent(args = {}) {
     const { aid: runtimeAid, working } = (0, runtime_1.useRuntimeState)();
-    const aidFromParam = (0, react_1.useMemo)(() => agentId &&
-        (0, aid_1.stringifyIdentity)(Object.assign(Object.assign({}, (0, aid_1.parseIdentity)(runtimeAid, { rejectWhenError: true })), { assistantId: agentId })), [agentId]);
+    const aidFromParam = (0, react_1.useMemo)(() => args.aid ||
+        (args.agentId
+            ? (0, aid_1.stringifyIdentity)(Object.assign(Object.assign({}, (0, aid_1.parseIdentity)(runtimeAid, { rejectWhenError: true })), { assistantId: args.agentId }))
+            : undefined), [args.agentId, args.aid, runtimeAid]);
     const current = (0, react_1.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] = (0, agent_1.useAgentState)({ aid, working });
-    const appearanceInput = (0, react_1.useMemo)(() => {
-        var _a, _b, _c;
-        return (_c = (_b = (_a = agent.outputVariables) === null || _a === void 0 ? void 0 : _a.find((i) => i.name === types_1.RuntimeOutputVariable.appearanceInput)) === null || _b === void 0 ? void 0 : _b.initialValue) !== null && _c !== void 0 ? _c : { componentId: constants_1.DEFAULT_INPUT_COMPONENT_ID };
-    }, [agent]);
-    const appearanceOutput = (0, react_1.useMemo)(() => {
-        var _a, _b, _c;
-        return (_c = (_b = (_a = agent.outputVariables) === null || _a === void 0 ? void 0 : _a.find((i) => i.name === types_1.RuntimeOutputVariable.appearanceOutput)) === null || _b === void 0 ? void 0 : _b.initialValue) !== null && _c !== void 0 ? _c : { componentId: constants_1.DEFAULT_OUTPUT_COMPONENT_ID };
-    }, [agent]);
-    return { aid, agent, appearanceInput, appearanceOutput };
+    return { aid, agent };
 }
 exports.useCurrentAgent = useCurrentAgent;

package/lib/cjs/builtin/async/ai-runtime/hooks/use-appearances.js ADDED Viewed

@@ -0,0 +1,94 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useOpeningQuestions = exports.useOpeningMessage = exports.useProfile = void 0;
+const types_1 = require("@blocklet/ai-runtime/types");
+const react_1 = require("react");
+const ufo_1 = require("ufo");
+const utils_1 = require("../../../utils");
+const constants_1 = require("../constants");
+const CurrentAgent_1 = require("../contexts/CurrentAgent");
+const runtime_1 = require("../state/runtime");
+const runtime_output_schema_1 = require("../utils/runtime-output-schema");
+function useAppearances(args) {
+    const { agent: runtimeAgent } = (0, runtime_1.useRuntimeState)();
+    const { agent } = (0, CurrentAgent_1.useCurrentAgent)(args);
+    const appearancePage = (0, react_1.useMemo)(() => {
+        const appearance = (0, runtime_output_schema_1.getOutputVariableInitialValue)(agent, types_1.RuntimeOutputVariable.appearancePage);
+        return Object.assign(Object.assign({}, appearance), { componentId: (appearance === null || appearance === void 0 ? void 0 : appearance.componentId) || constants_1.DEFAULT_PAGE_COMPONENT_ID });
+    }, [agent]);
+    const appearanceInput = (0, react_1.useMemo)(() => {
+        const appearance = (0, runtime_output_schema_1.getOutputVariableInitialValue)(agent, types_1.RuntimeOutputVariable.appearanceInput);
+        if (appearance)
+            return appearance;
+        const runtimeAppearance = (0, runtime_output_schema_1.getOutputVariableInitialValue)(runtimeAgent, types_1.RuntimeOutputVariable.appearanceInput);
+        if (runtimeAppearance)
+            return runtimeAppearance;
+        return {
+            componentId: constants_1.DEFAULT_INPUT_COMPONENT_ID,
+        };
+    }, [agent, runtimeAgent]);
+    const appearanceOutput = (0, react_1.useMemo)(() => {
+        const appearance = (0, runtime_output_schema_1.getOutputVariableInitialValue)(agent, types_1.RuntimeOutputVariable.appearanceOutput);
+        if (appearance === null || appearance === void 0 ? void 0 : appearance.componentId)
+            return appearance;
+        const runtimeAppearance = (0, runtime_output_schema_1.getOutputVariableInitialValue)(runtimeAgent, types_1.RuntimeOutputVariable.appearanceOutput);
+        if (runtimeAppearance)
+            return runtimeAppearance;
+        return {
+            componentId: constants_1.DEFAULT_OUTPUT_COMPONENT_ID,
+        };
+    }, [agent, runtimeAgent]);
+    return { appearancePage, appearanceInput, appearanceOutput };
+}
+exports.default = useAppearances;
+function getProjectIconUrl(projectId) {
+    return (0, ufo_1.joinURL)(window.location.origin, (0, utils_1.getComponentMountPoint)(constants_1.AI_STUDIO_DID), '/api/projects', projectId, '/logo.png');
+}
+function useProfile(args) {
+    const { agent: runtimeAgent } = (0, runtime_1.useRuntimeState)();
+    const { agent } = (0, CurrentAgent_1.useCurrentAgent)(args);
+    return (0, react_1.useMemo)(() => {
+        const profile = (0, runtime_output_schema_1.getOutputVariableInitialValue)(agent, types_1.RuntimeOutputVariable.profile);
+        const runtimeProfile = (0, runtime_output_schema_1.getOutputVariableInitialValue)(runtimeAgent, types_1.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]);
+}
+exports.useProfile = useProfile;
+function useOpeningMessage(args) {
+    const { aid: runtimeAid, agent: runtimeAgent } = (0, runtime_1.useRuntimeState)();
+    const runtimeProfile = useProfile({ aid: runtimeAid });
+    const { agent } = (0, CurrentAgent_1.useCurrentAgent)(args);
+    const profile = useProfile(args);
+    return (0, react_1.useMemo)(() => {
+        const agentOpening = (0, runtime_output_schema_1.getOutputVariableInitialValue)(agent, types_1.RuntimeOutputVariable.openingMessage);
+        if (agentOpening === null || agentOpening === void 0 ? void 0 : agentOpening.message) {
+            return {
+                message: agentOpening.message,
+                profile,
+            };
+        }
+        const runtimeOpening = (0, runtime_output_schema_1.getOutputVariableInitialValue)(runtimeAgent, types_1.RuntimeOutputVariable.openingMessage);
+        if (runtimeOpening === null || runtimeOpening === void 0 ? void 0 : runtimeOpening.message) {
+            return {
+                message: runtimeOpening.message,
+                profile: runtimeProfile,
+            };
+        }
+        return undefined;
+    }, [agent, profile, runtimeAgent, runtimeProfile]);
+}
+exports.useOpeningMessage = useOpeningMessage;
+function useOpeningQuestions(args) {
+    const { agent } = (0, CurrentAgent_1.useCurrentAgent)(args);
+    return (0, react_1.useMemo)(() => {
+        var _a, _b;
+        const questions = (_b = (_a = (0, runtime_output_schema_1.getOutputVariableInitialValue)(agent, types_1.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]);
+}
+exports.useOpeningQuestions = useOpeningQuestions;

package/lib/cjs/builtin/async/ai-runtime/index.js CHANGED Viewed

@@ -17,7 +17,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.PhotoGalleryItem = exports.ChatOutput = exports.SimpleOutput = exports.AutoForm = exports.PhotoGallery = exports.SimpleChat = exports.SimplePage = exports.ChatBotButton = exports.Runtime = exports.CurrentMessageProvider = exports.CurrentAgentProvider = void 0;
+exports.PhotoGalleryItem = exports.ChatOutput = exports.SimpleOutput = exports.AutoForm = exports.PhotoGallery = exports.MultiAgentsChat = exports.SimpleChat = exports.SimplePage = exports.ChatBotButton = exports.Runtime = exports.CurrentMessageProvider = exports.CurrentAgentProvider = void 0;
 __exportStar(require("./contexts/CurrentAgent"), exports);
 var CurrentAgent_1 = require("./contexts/CurrentAgent");
 Object.defineProperty(exports, "CurrentAgentProvider", { enumerable: true, get: function () { return __importDefault(CurrentAgent_1).default; } });
@@ -34,6 +34,8 @@ var SimplePage_1 = require("./runtime-components/SimplePage");
 Object.defineProperty(exports, "SimplePage", { enumerable: true, get: function () { return __importDefault(SimplePage_1).default; } });
 var SimpleChat_1 = require("./runtime-components/SimpleChat");
 Object.defineProperty(exports, "SimpleChat", { enumerable: true, get: function () { return __importDefault(SimpleChat_1).default; } });
+var MultiAgentsChat_1 = require("./runtime-components/MultiAgentsChat");
+Object.defineProperty(exports, "MultiAgentsChat", { enumerable: true, get: function () { return __importDefault(MultiAgentsChat_1).default; } });
 var PhotoGallery_1 = require("./runtime-components/PhotoGallery");
 Object.defineProperty(exports, "PhotoGallery", { enumerable: true, get: function () { return __importDefault(PhotoGallery_1).default; } });
 var AutoForm_1 = require("./runtime-components/AutoForm");

package/lib/cjs/builtin/async/ai-runtime/runtime/ChatBotButton/index.js CHANGED Viewed

@@ -1,4 +1,27 @@
 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -14,6 +37,7 @@ const RuntimeCommonProvider_1 = __importDefault(require("../../components/Runtim
 const ScrollView_1 = __importDefault(require("../../components/ScrollView"));
 const constants_1 = require("../../constants");
 const Runtime_1 = __importDefault(require("../../contexts/Runtime"));
+const use_appearances_1 = __importStar(require("../../hooks/use-appearances"));
 const runtime_1 = require("../../state/runtime");
 const session_1 = require("../../state/session");
 function ChatBotButton({ aid, working }) {
@@ -21,13 +45,15 @@ function ChatBotButton({ aid, working }) {
 }
 exports.default = ChatBotButton;
 function ChatBotContent() {
-    var _a, _b, _c;
+    var _a, _b;
     const anchorEl = (0, react_2.useRef)(null);
     (0, session_1.useSessionState)({ autoLoad: true });
-    const { appearancePage } = (0, runtime_1.useRuntimeState)();
+    const { aid } = (0, runtime_1.useRuntimeState)();
+    const { appearancePage } = (0, use_appearances_1.default)({ aid });
+    const profile = (0, use_appearances_1.useProfile)({ aid });
     const [open, setOpen] = (0, react_2.useState)(false);
     const componentId = (_a = appearancePage === null || appearancePage === void 0 ? void 0 : appearancePage.componentId) !== null && _a !== void 0 ? _a : constants_1.DEFAULT_PAGE_COMPONENT_ID;
-    return ((0, jsx_runtime_1.jsxs)(material_1.Box, { sx: { position: 'fixed', bottom: 32, right: 16, zIndex: 'modal' }, children: [(0, jsx_runtime_1.jsx)(material_1.Fab, { sx: { width: 44, height: 44, boxShadow: open ? 0 : undefined }, onClick: () => setOpen(true), children: (0, jsx_runtime_1.jsx)(ux_1.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 }) }), (0, jsx_runtime_1.jsx)(material_1.Stack, { width: "100%", ref: anchorEl }), anchorEl.current && ((0, jsx_runtime_1.jsx)(ResponsiveChatBotContainer, { anchorEl: anchorEl.current, open: open, onClose: () => setOpen(false), children: (0, jsx_runtime_1.jsx)(ScrollView_1.default, { initialScrollBehavior: "auto", component: material_1.Stack, sx: {
+    return ((0, jsx_runtime_1.jsxs)(material_1.Box, { sx: { position: 'fixed', bottom: 32, right: 16, zIndex: 'modal' }, children: [(0, jsx_runtime_1.jsx)(material_1.Fab, { sx: { width: 44, height: 44, boxShadow: open ? 0 : undefined }, onClick: () => setOpen(true), children: (0, jsx_runtime_1.jsx)(ux_1.Avatar, { size: 44, did: (_b = globalThis.blocklet) === null || _b === void 0 ? void 0 : _b.appId, variant: "circle", shape: "circle", src: profile.avatar }) }), (0, jsx_runtime_1.jsx)(material_1.Stack, { width: "100%", ref: anchorEl }), anchorEl.current && ((0, jsx_runtime_1.jsx)(ResponsiveChatBotContainer, { anchorEl: anchorEl.current, open: open, onClose: () => setOpen(false), children: (0, jsx_runtime_1.jsx)(ScrollView_1.default, { initialScrollBehavior: "auto", component: material_1.Stack, sx: {
                         overscrollBehavior: 'contain',
                         height: '100%',
                         width: '100%',
@@ -40,12 +66,12 @@ function ChatBotContent() {
 function ResponsiveChatBotContainer({ open, anchorEl, children, onClose, }) {
     const theme = (0, material_1.useTheme)();
     const isMobile = (0, material_1.useMediaQuery)(theme.breakpoints.down('sm'));
-    const { agent, appearancePage } = (0, runtime_1.useRuntimeState)();
-    const title = (appearancePage === null || appearancePage === void 0 ? void 0 : appearancePage.name) || agent.name;
+    const { aid } = (0, runtime_1.useRuntimeState)();
+    const profile = (0, use_appearances_1.useProfile)({ aid });
     if (isMobile) {
-        return ((0, jsx_runtime_1.jsx)(ChatBotDialog, { title: title, open: open, onClose: onClose, children: children }));
+        return ((0, jsx_runtime_1.jsx)(ChatBotDialog, { title: profile.name, open: open, onClose: onClose, children: children }));
     }
-    return ((0, jsx_runtime_1.jsx)(ChatBotPopper, { anchorEl: anchorEl, title: title, open: open, onClose: onClose, children: children }));
+    return ((0, jsx_runtime_1.jsx)(ChatBotPopper, { anchorEl: anchorEl, title: profile.name, open: open, onClose: onClose, children: children }));
 }
 function ChatBotPopper({ title, anchorEl, open, children, onClose, }) {
     return ((0, jsx_runtime_1.jsx)(material_1.Popper, { anchorEl: anchorEl, open: open, disablePortal: true, placement: "top-end", sx: {

package/lib/cjs/builtin/async/ai-runtime/runtime/Runtime/index.js CHANGED Viewed

@@ -30,19 +30,22 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const material_1 = require("@mui/material");
 const react_1 = require("react");
 const react_helmet_1 = require("react-helmet");
+const ufo_1 = require("ufo");
 const CustomComponentRenderer_1 = __importDefault(require("../../../../../components/CustomComponentRenderer"));
 const ux_1 = require("../../../../arcblock/ux");
 const locale_1 = require("../../../../locale");
 const header_1 = require("../../../../page/header");
+const utils_1 = require("../../../../utils");
 const RuntimeCommonProvider_1 = __importStar(require("../../components/RuntimeCommonProvider"));
 const SocialShare_1 = __importDefault(require("../../components/SocialShare"));
 const constants_1 = require("../../constants");
 const Runtime_1 = require("../../contexts/Runtime");
+const use_appearances_1 = __importDefault(require("../../hooks/use-appearances"));
 const runtime_1 = require("../../state/runtime");
 const logoSize = 44;
-function AgentCreatedBy({ agent }) {
+function AgentCreatedBy({ did }) {
     const { t } = (0, locale_1.useLocaleContext)();
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [t('by'), " ", (0, jsx_runtime_1.jsx)(material_1.Box, { component: ux_1.DID, did: agent.createdBy, copyable: false, responsive: true })] }));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [t('by'), " ", (0, jsx_runtime_1.jsx)(material_1.Box, { component: ux_1.DID, did: did, copyable: false, responsive: true })] }));
 }
 function Runtime() {
     return ((0, jsx_runtime_1.jsx)(Runtime_1.RuntimeProviderFromUrl, { children: (0, jsx_runtime_1.jsx)(RuntimeView, {}) }));
@@ -50,14 +53,14 @@ function Runtime() {
 exports.default = Runtime;
 function RuntimeView() {
     var _a;
-    const { agent, appearancePage } = (0, runtime_1.useRuntimeState)();
+    const { aid, agent } = (0, runtime_1.useRuntimeState)();
+    const { appearancePage } = (0, use_appearances_1.default)({ aid });
     const theme = (0, material_1.useTheme)();
     const isMobile = (0, material_1.useMediaQuery)(theme.breakpoints.down('sm'));
     const { locale } = (0, locale_1.useLocaleContext)();
     (0, react_1.useEffect)(() => {
         header_1.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 = (0, ufo_1.joinURL)(window.location.origin, (0, utils_1.getComponentMountPoint)(constants_1.AI_STUDIO_DID), '/api/projects', agent.project.id, '/logo.png');
             state.logo = logo && ((0, jsx_runtime_1.jsx)(material_1.Box, { component: ux_1.Avatar, src: logo, did: blocklet === null || blocklet === void 0 ? void 0 : blocklet.appId, borderRadius: 1, size: logoSize, sx: {
                     width: logoSize,
                     height: logoSize,
@@ -66,7 +69,7 @@ function RuntimeView() {
                 state.brand = ((0, jsx_runtime_1.jsx)(material_1.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 && ((0, jsx_runtime_1.jsx)(RuntimeCommonProvider_1.RuntimeLocaleProvider, { children: (0, jsx_runtime_1.jsx)(material_1.Box, { sx: {
                             display: 'inline-flex',
                             alignItems: 'center',
@@ -74,7 +77,7 @@ function RuntimeView() {
                             mt: 0.5,
                             height: 12,
                             fontSize: 12,
-                        }, children: (0, jsx_runtime_1.jsx)(AgentCreatedBy, { agent: agent }) }) }));
+                        }, children: (0, jsx_runtime_1.jsx)(AgentCreatedBy, { did: agent.project.createdBy }) }) }));
             }
             const shareContent = `${agent.name}
@@ -90,7 +93,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 : constants_1.DEFAULT_PAGE_COMPONENT_ID;
-    return ((0, jsx_runtime_1.jsxs)(RuntimeCommonProvider_1.default, { children: [appearancePage && ((0, jsx_runtime_1.jsxs)(react_helmet_1.Helmet, { children: [appearancePage.name && (0, jsx_runtime_1.jsx)("title", { children: appearancePage.name }), appearancePage.description && (0, jsx_runtime_1.jsx)("meta", { name: "description", content: appearancePage.description })] })), (0, jsx_runtime_1.jsx)(CustomComponentRenderer_1.default, { componentId: componentId, properties: appearancePage === null || appearancePage === void 0 ? void 0 : appearancePage.componentProps })] }));
+    return ((0, jsx_runtime_1.jsxs)(RuntimeCommonProvider_1.default, { children: [(0, jsx_runtime_1.jsxs)(react_helmet_1.Helmet, { children: [agent.project.name && (0, jsx_runtime_1.jsx)("title", { children: agent.project.name }), agent.project.description && (0, jsx_runtime_1.jsx)("meta", { name: "description", content: agent.project.description })] }), (0, jsx_runtime_1.jsx)(CustomComponentRenderer_1.default, { componentId: componentId, properties: appearancePage === null || appearancePage === void 0 ? void 0 : appearancePage.componentProps })] }));
 }

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

@@ -49,6 +49,7 @@ const ux_1 = require("../../../../arcblock/ux");
 const session_1 = require("../../../../session");
 const MarkdownRenderer_1 = __importDefault(require("../../components/MarkdownRenderer"));
 const ShareActions_1 = __importDefault(require("../../components/ShareActions"));
+const use_appearances_1 = require("../../hooks/use-appearances");
 const runtime_1 = require("../../state/runtime");
 const MessageErrorView_1 = __importDefault(require("./MessageErrorView"));
 const MessageMetadataRenderer_1 = __importDefault(require("./MessageMetadataRenderer"));
@@ -111,13 +112,14 @@ function UserMessage({ message, hideAvatar }) {
                 }, children: [!hideAvatar && ((0, jsx_runtime_1.jsxs)(MessageUserName, { children: [(_c = authSession.user) === null || _c === void 0 ? void 0 : _c.fullName, (0, jsx_runtime_1.jsx)(MessageTime, { time: message.createdAt })] })), (0, jsx_runtime_1.jsx)(material_1.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 } = (0, runtime_1.useRuntimeState)();
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+    const { aid } = (0, runtime_1.useRuntimeState)();
+    const profile = (0, use_appearances_1.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 = (0, material_1.useTheme)();
     const isMobile = (0, material_1.useMediaQuery)(theme.breakpoints.down('sm'));
-    return ((0, jsx_runtime_1.jsxs)(material_1.Stack, { className: "ai-chat-message-ai", direction: "row", gap: 1.5, children: [!hideAvatar && ((0, jsx_runtime_1.jsx)(material_1.Box, { children: (0, jsx_runtime_1.jsx)(ux_1.Avatar, { size: 40, did: (_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 }) })), (0, jsx_runtime_1.jsxs)(material_1.Box, { flex: 1, width: 0, children: [!hideAvatar && ((0, jsx_runtime_1.jsxs)(MessageUserName, { children: [appearancePage === null || appearancePage === void 0 ? void 0 : appearancePage.name, (0, jsx_runtime_1.jsx)(MessageTime, { time: message.createdAt })] })), (0, jsx_runtime_1.jsxs)(react_1.default.Suspense, { children: [showMainMessage ? ((0, jsx_runtime_1.jsx)(material_1.Tooltip, { placement: "right-start", slotProps: {
+    return ((0, jsx_runtime_1.jsxs)(material_1.Stack, { className: "ai-chat-message-ai", direction: "row", gap: 1.5, children: [!hideAvatar && ((0, jsx_runtime_1.jsx)(material_1.Box, { children: (0, jsx_runtime_1.jsx)(ux_1.Avatar, { size: 40, did: (_d = globalThis.blocklet) === null || _d === void 0 ? void 0 : _d.appId, variant: "circle", shape: "circle", src: profile.avatar }) })), (0, jsx_runtime_1.jsxs)(material_1.Box, { flex: 1, width: 0, children: [!hideAvatar && ((0, jsx_runtime_1.jsxs)(MessageUserName, { children: [profile.name, (0, jsx_runtime_1.jsx)(MessageTime, { time: message.createdAt })] })), (0, jsx_runtime_1.jsxs)(react_1.default.Suspense, { children: [showMainMessage ? ((0, jsx_runtime_1.jsx)(material_1.Tooltip, { placement: "right-start", slotProps: {
                                     popper: {
                                         disablePortal: true,
                                         modifiers: [
@@ -133,13 +135,13 @@ function AgentMessage({ message, hideAvatar }) {
                                         sx: { p: 0, bgcolor: 'white' },
                                     },
                                 }, title: !isMessageLoading &&
-                                    ((_f = message.result) === null || _f === void 0 ? void 0 : _f.content) && ((0, jsx_runtime_1.jsx)(ShareActions_1.default, { sx: {
+                                    ((_e = message.result) === null || _e === void 0 ? void 0 : _e.content) && ((0, jsx_runtime_1.jsx)(ShareActions_1.default, { 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: (0, jsx_runtime_1.jsxs)(material_1.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: (0, jsx_runtime_1.jsxs)(material_1.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) ? ((0, jsx_runtime_1.jsx)(MarkdownRenderer_1.default, { className: isMessageLoading &&
                                                     !((_b = message.result) === null || _b === void 0 ? void 0 : _b.content) &&
@@ -147,16 +149,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) ? ((0, jsx_runtime_1.jsx)(image_preview_1.default, { 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) && ((0, jsx_runtime_1.jsx)(MarkdownRenderer_1.default, { className: isMessageLoading ? 'writing' : '', children: message.result.content }))] }) })) : (isMessageLoading && ((0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "rectangular", height: 24 + 8 + 8,
+                                        }), ((_h = message.result) === null || _h === void 0 ? void 0 : _h.content) && ((0, jsx_runtime_1.jsx)(MarkdownRenderer_1.default, { className: isMessageLoading ? 'writing' : '', children: message.result.content }))] }) })) : (isMessageLoading && ((0, jsx_runtime_1.jsx)(material_1.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) => ((0, jsx_runtime_1.jsx)(MessageMetadataRenderer_1.default, { object: object.data }, object.taskId))), message.error && (0, jsx_runtime_1.jsx)(MessageErrorView_1.default, { 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) => ((0, jsx_runtime_1.jsx)(MessageMetadataRenderer_1.default, { object: object.data }, object.taskId))), message.error && (0, jsx_runtime_1.jsx)(MessageErrorView_1.default, { error: message.error })] })] })] }));
 }
 function MessageItemWrapper(_a) {
-    var _b, _c;
+    var _b;
     var { hideAvatar, agentMessage } = _a, props = __rest(_a, ["hideAvatar", "agentMessage"]);
-    const { appearancePage } = (0, runtime_1.useRuntimeState)();
+    const { aid } = (0, runtime_1.useRuntimeState)();
+    const profile = (0, use_appearances_1.useProfile)({ aid });
     const [time] = (0, react_1.useState)(() => new Date().toISOString());
-    return ((0, jsx_runtime_1.jsx)(MessageItemContainer, Object.assign({}, props, { className: (0, css_1.cx)('ai-chat-message-item', hideAvatar && 'hide-avatar', props.className), children: agentMessage && ((0, jsx_runtime_1.jsxs)(material_1.Stack, { className: "ai-chat-message-ai", direction: "row", gap: 1.5, children: [!hideAvatar && ((0, jsx_runtime_1.jsx)(material_1.Box, { children: (0, jsx_runtime_1.jsx)(ux_1.Avatar, { size: 40, did: (_b = globalThis.blocklet) === null || _b === void 0 ? void 0 : _b.appId, variant: "circle", shape: "circle", src: (_c = appearancePage === null || appearancePage === void 0 ? void 0 : appearancePage.logo) === null || _c === void 0 ? void 0 : _c.url }) })), (0, jsx_runtime_1.jsxs)(material_1.Box, { flex: 1, width: 0, children: [!hideAvatar && ((0, jsx_runtime_1.jsxs)(MessageUserName, { children: [appearancePage === null || appearancePage === void 0 ? void 0 : appearancePage.name, (0, jsx_runtime_1.jsx)(MessageTime, { time: time })] })), agentMessage] })] })) })));
+    return ((0, jsx_runtime_1.jsx)(MessageItemContainer, Object.assign({}, props, { className: (0, css_1.cx)('ai-chat-message-item', hideAvatar && 'hide-avatar', props.className), children: agentMessage && ((0, jsx_runtime_1.jsxs)(material_1.Stack, { className: "ai-chat-message-ai", direction: "row", gap: 1.5, children: [!hideAvatar && ((0, jsx_runtime_1.jsx)(material_1.Box, { children: (0, jsx_runtime_1.jsx)(ux_1.Avatar, { size: 40, did: (_b = globalThis.blocklet) === null || _b === void 0 ? void 0 : _b.appId, variant: "circle", shape: "circle", src: profile.avatar }) })), (0, jsx_runtime_1.jsxs)(material_1.Box, { flex: 1, width: 0, children: [!hideAvatar && ((0, jsx_runtime_1.jsxs)(MessageUserName, { children: [profile.name, (0, jsx_runtime_1.jsx)(MessageTime, { time: time })] })), agentMessage] })] })) })));
 }
 exports.MessageItemWrapper = MessageItemWrapper;
 function MessageUserName({ children }) {

package/lib/cjs/builtin/async/ai-runtime/runtime-components/MultiAgentsChat/index.js ADDED Viewed

@@ -0,0 +1,192 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+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;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const types_1 = require("@blocklet/ai-runtime/types");
+const material_1 = require("@mui/material");
+const react_1 = require("react");
+const react_scroll_to_bottom_1 = require("react-scroll-to-bottom");
+const CustomComponentRenderer_1 = __importDefault(require("../../../../../components/CustomComponentRenderer"));
+const session_1 = require("../../../../session");
+const SimpleHeader_1 = __importDefault(require("../../components/Header/SimpleHeader"));
+const SimpleLayout_1 = __importDefault(require("../../components/Layout/SimpleLayout"));
+const MarkdownRenderer_1 = __importDefault(require("../../components/MarkdownRenderer"));
+const ScrollView_1 = __importDefault(require("../../components/ScrollView"));
+const UserInfo_1 = __importDefault(require("../../components/UserInfo"));
+const CurrentAgent_1 = __importStar(require("../../contexts/CurrentAgent"));
+const CurrentMessage_1 = __importDefault(require("../../contexts/CurrentMessage"));
+const use_appearances_1 = __importStar(require("../../hooks/use-appearances"));
+const runtime_1 = require("../../state/runtime");
+const session_2 = require("../../state/session");
+const runtime_output_schema_1 = require("../../utils/runtime-output-schema");
+const MessageSuggestedQuestions_1 = __importStar(require("../ChatOutput/MessageSuggestedQuestions"));
+function MultiAgentsChat({ primaryColor, scrollViewProps = { scroll: 'window', initialScrollBehavior: 'auto' }, backgroundImage, }) {
+    (0, session_2.useSessionState)({ autoLoad: true });
+    const inheritedTheme = (0, material_1.useTheme)();
+    const theme = (0, react_1.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 (0, material_1.createTheme)(inheritedTheme, {
+            palette: { primary },
+            shape: {
+                borderRadius: 8,
+            },
+        });
+    }, [inheritedTheme, primaryColor]);
+    return ((0, jsx_runtime_1.jsx)(ScrollView_1.default, Object.assign({}, scrollViewProps, { children: (0, jsx_runtime_1.jsxs)(material_1.ThemeProvider, { theme: theme, children: [(0, jsx_runtime_1.jsx)(material_1.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,
+                    } }), (0, jsx_runtime_1.jsx)(SimpleChatView, {})] }) })));
+}
+exports.default = MultiAgentsChat;
+function SimpleChatView() {
+    // auto scroll to bottom when new message is sent
+    const running = (0, session_2.useSessionState)()((s) => s.running);
+    const scrollToBottom = (0, react_scroll_to_bottom_1.useScrollToBottom)();
+    (0, react_1.useEffect)(() => {
+        if (running)
+            scrollToBottom({ behavior: 'smooth' });
+    }, [scrollToBottom, running]);
+    const { childAgentId } = (0, runtime_1.useRuntimeState)();
+    const [currentAgentId, setCurrentAgentId] = (0, react_1.useState)(childAgentId);
+    return ((0, jsx_runtime_1.jsxs)(SimpleLayout_1.default, { children: [(0, jsx_runtime_1.jsx)(SimpleHeader_1.default, { px: 2 }), (0, jsx_runtime_1.jsx)(OutputView, { className: "aigne-outputs aigne-simple-chat-outputs", flexGrow: 1, pb: 10, px: 2, currentAgentId: currentAgentId }), (0, jsx_runtime_1.jsx)(AgentInputRender, { className: "aigne-inputs aigne-simple-chat-inputs", currentAgentId: currentAgentId, onCurrentAgentIdChange: setCurrentAgentId, sx: {
+                    position: 'sticky',
+                    bottom: 0,
+                    p: 2,
+                    borderRadius: 1,
+                    bgcolor: (theme) => (0, material_1.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 } = (0, runtime_1.useRuntimeState)();
+    const children = (0, react_1.useMemo)(() => { var _a, _b; return (_b = (_a = (0, runtime_output_schema_1.getOutputVariableInitialValue)(agent, types_1.RuntimeOutputVariable.children)) === null || _a === void 0 ? void 0 : _a.agents) === null || _b === void 0 ? void 0 : _b.filter((i) => !!i.id); }, [agent]);
+    return ((0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ gap: 2 }, props, { children: [(0, jsx_runtime_1.jsx)(material_1.Stack, { direction: "row", gap: 2, children: children === null || children === void 0 ? void 0 : children.map((child) => ((0, jsx_runtime_1.jsx)(CurrentAgent_1.default, { agentId: child.id, children: (0, jsx_runtime_1.jsx)(AgentAvatar, { selected: currentAgentId === child.id, onClick: () => onCurrentAgentIdChange(child.id) }) }))) }), (0, jsx_runtime_1.jsx)(material_1.Stack, { children: (0, jsx_runtime_1.jsx)(CurrentAgent_1.default, { agentId: currentAgentId, children: (0, jsx_runtime_1.jsx)(AgentInput, {}) }) })] })));
+}
+function AgentAvatar(_a) {
+    var _b;
+    var { selected } = _a, props = __rest(_a, ["selected"]);
+    const { appearanceInput } = (0, use_appearances_1.default)();
+    const profile = (0, use_appearances_1.useProfile)();
+    if (!(appearanceInput === null || appearanceInput === void 0 ? void 0 : appearanceInput.componentId))
+        return null;
+    return ((0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({}, props, { sx: Object.assign({ p: 0, outline: selected ? 3 : 0, outlineColor: 'primary.light' }, props.sx), children: (0, jsx_runtime_1.jsx)(material_1.Avatar, { src: profile === null || profile === void 0 ? void 0 : profile.avatar, children: (_b = profile.name) === null || _b === void 0 ? void 0 : _b.slice(0, 1) }) })));
+}
+function AgentInput() {
+    const { aid } = (0, CurrentAgent_1.useCurrentAgent)();
+    const { appearanceInput } = (0, use_appearances_1.default)({ aid });
+    if (!(appearanceInput === null || appearanceInput === void 0 ? void 0 : appearanceInput.componentId))
+        return null;
+    return ((0, jsx_runtime_1.jsx)(CustomComponentRenderer_1.default, { componentId: appearanceInput.componentId, properties: appearanceInput.componentProps }));
+}
+function OutputView(_a) {
+    var { currentAgentId } = _a, props = __rest(_a, ["currentAgentId"]);
+    const messages = (0, session_2.useSessionState)()((s) => s.messages);
+    const loading = (0, session_2.useSessionState)()((s) => s.loading);
+    const lastMessage = messages === null || messages === void 0 ? void 0 : messages.at(-1);
+    return ((0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ gap: 2 }, props, { children: [(0, jsx_runtime_1.jsx)(CurrentAgent_1.default, { agentId: currentAgentId, children: (0, jsx_runtime_1.jsx)(OpeningMessageView, {}) }), messages === null || messages === void 0 ? void 0 : messages.map((message) => (0, jsx_runtime_1.jsx)(OutputItemView, { message: message }, message.taskId)), lastMessage && lastMessage.assistantId === currentAgentId && (0, jsx_runtime_1.jsx)(SuggestedQuestionsView, { message: lastMessage }), !loading && !(messages === null || messages === void 0 ? void 0 : messages.length) && ((0, jsx_runtime_1.jsx)(CurrentAgent_1.default, { agentId: currentAgentId, children: (0, jsx_runtime_1.jsx)(OpeningQuestionsView, {}) }))] })));
+}
+const OutputItemView = (0, react_1.memo)(({ message }) => {
+    var _a, _b, _c, _d;
+    const { aid } = (0, CurrentAgent_1.useCurrentAgent)({ agentId: message.assistantId });
+    const { appearanceOutput } = (0, use_appearances_1.default)({ aid });
+    const profile = (0, use_appearances_1.useProfile)({ aid });
+    const { session: authSession } = (0, session_1.useSessionContext)();
+    if (!(appearanceOutput === null || appearanceOutput === void 0 ? void 0 : appearanceOutput.componentId))
+        return null;
+    return ((0, jsx_runtime_1.jsx)(CurrentAgent_1.default, { agentId: message.assistantId, children: (0, jsx_runtime_1.jsx)(CurrentMessage_1.default, { message: message, children: (0, jsx_runtime_1.jsxs)(material_1.Stack, { gap: 2, children: [(0, jsx_runtime_1.jsx)(material_1.Box, { children: (0, jsx_runtime_1.jsx)(UserInfo_1.default, { 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: (0, jsx_runtime_1.jsx)(CustomComponentRenderer_1.default, { componentId: appearanceOutput.componentId, properties: appearanceOutput.componentProps, props: {
+                                    renderType: 'parameters',
+                                } }) }) }), (0, jsx_runtime_1.jsx)(material_1.Box, { children: (0, jsx_runtime_1.jsx)(UserInfo_1.default, { 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: (0, jsx_runtime_1.jsx)(CustomComponentRenderer_1.default, { componentId: appearanceOutput.componentId, properties: appearanceOutput.componentProps, props: {
+                                    renderType: 'result',
+                                } }) }) })] }) }) }));
+});
+function SuggestedQuestionsView({ message }) {
+    const { aid } = (0, CurrentAgent_1.useCurrentAgent)({ agentId: message.assistantId });
+    const { execute } = (0, runtime_1.useRuntimeState)();
+    const suggestedQuestions = (0, react_1.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[types_1.RuntimeOutputVariable.suggestedQuestions];
+    }, [message]);
+    return ((0, jsx_runtime_1.jsx)(material_1.Box, { ml: 6.5, mr: 2.5, children: (suggestedQuestions === null || suggestedQuestions === void 0 ? void 0 : suggestedQuestions.length) ? ((0, jsx_runtime_1.jsx)(MessageSuggestedQuestions_1.default, { dataSource: suggestedQuestions, onClick: (item) => {
+                execute({ aid, parameters: Object.assign(Object.assign({}, message.parameters), { question: item.question }) });
+            } })) : null }));
+}
+const OpeningMessageView = (0, react_1.memo)(() => {
+    var _a;
+    const opening = (0, use_appearances_1.useOpeningMessage)();
+    if (!opening)
+        return null;
+    return ((0, jsx_runtime_1.jsx)(material_1.Box, { children: (0, jsx_runtime_1.jsx)(UserInfo_1.default, { name: opening.profile.name, did: (_a = globalThis.blocklet) === null || _a === void 0 ? void 0 : _a.appId, avatar: opening.profile.avatar, alignItems: "flex-start", children: (0, jsx_runtime_1.jsx)(material_1.Box, { sx: {
+                    bgcolor: 'rgba(229, 231, 235, 1)',
+                    borderRadius: 1,
+                    borderTopLeftRadius: 2,
+                    px: 2,
+                    py: 1,
+                    mt: 0.5,
+                    mr: 5,
+                }, children: (0, jsx_runtime_1.jsx)(MarkdownRenderer_1.default, { children: opening.message }) }) }) }));
+});
+function OpeningQuestionsView() {
+    const { execute } = (0, runtime_1.useRuntimeState)();
+    const { aid } = (0, CurrentAgent_1.useCurrentAgent)();
+    const opening = (0, use_appearances_1.useOpeningQuestions)({ aid });
+    if (!(opening === null || opening === void 0 ? void 0 : opening.questions.length))
+        return null;
+    return ((0, jsx_runtime_1.jsx)(material_1.Box, { ml: 6.5, mr: 2.5, children: (0, jsx_runtime_1.jsx)(material_1.Stack, { gap: 1, children: opening.questions.map((item) => {
+                return ((0, jsx_runtime_1.jsx)(MessageSuggestedQuestions_1.MessageSuggestedQuestion, { onClick: () => execute({ aid, parameters: Object.assign(Object.assign({}, item.parameters), { question: item.parameters.question || item.title }) }), children: item.title }, item.id));
+            }) }) }));
+}