@blocklet/pages-kit 0.2.309 → 0.2.311

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

@@ -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));
+            }) }) }));
+}

package/lib/cjs/builtin/async/ai-runtime/runtime-components/PhotoGallery/index.js

@@ -1,27 +1,4 @@
 "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)
@@ -46,8 +23,9 @@ const CustomComponentRenderer_1 = __importDefault(require("../../../../../compon
 const locale_1 = require("../../../../locale");
 const SimpleHeader_1 = __importDefault(require("../../components/Header/SimpleHeader"));
 const LoadingButton_1 = __importDefault(require("../../components/LoadingButton"));
-const CurrentAgent_1 = __importStar(require("../../contexts/CurrentAgent"));
+const CurrentAgent_1 = __importDefault(require("../../contexts/CurrentAgent"));
 const CurrentMessage_1 = __importDefault(require("../../contexts/CurrentMessage"));
+const use_appearances_1 = __importDefault(require("../../hooks/use-appearances"));
 const runtime_1 = require("../../state/runtime");
 const session_1 = require("../../state/session");
 const map_right_1 = __importDefault(require("../../utils/map-right"));
@@ -77,7 +55,7 @@ function PhotoGallery({ resultTitle, primaryColor }) {
 exports.default = PhotoGallery;
 function AgentInputRender(_a) {
     var props = __rest(_a, []);
-    const { appearanceInput } = (0, CurrentAgent_1.useCurrentAgent)();
+    const { appearanceInput } = (0, use_appearances_1.default)();
     if (!(appearanceInput === null || appearanceInput === void 0 ? void 0 : appearanceInput.componentId))
         return null;
     return ((0, jsx_runtime_1.jsx)(material_1.Stack, Object.assign({}, props, { children: (0, jsx_runtime_1.jsx)(CustomComponentRenderer_1.default, { componentId: appearanceInput.componentId, properties: appearanceInput.componentProps }) })));
@@ -97,7 +75,7 @@ function OutputView(_a) {
                         } })), (0, map_right_1.default)(messages, (message) => ((0, jsx_runtime_1.jsx)(OutputItemView, { message: message }, message.taskId)))] }), (0, jsx_runtime_1.jsx)(material_1.Box, { my: 4, children: !!messages.length && !noMoreMessage && ((0, jsx_runtime_1.jsx)(LoadingButton_1.default, { variant: "outlined", onClick: loadMoreMessages, children: t('loadMore') })) })] })));
 }
 const OutputItemView = (0, react_1.memo)(({ message }) => {
-    const { appearanceOutput } = (0, CurrentAgent_1.useCurrentAgent)({ agentId: message.assistantId });
+    const { appearanceOutput } = (0, use_appearances_1.default)({ agentId: message.assistantId });
     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.jsx)(react_1.Suspense, { children: (0, jsx_runtime_1.jsx)(CustomComponentRenderer_1.default, { componentId: appearanceOutput.componentId, properties: appearanceOutput.componentProps }) }) }) }, message.taskId));

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

@@ -51,6 +51,7 @@ 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 MessageSuggestedQuestions_1 = __importStar(require("../ChatOutput/MessageSuggestedQuestions"));
@@ -90,8 +91,8 @@ function SimpleChatView() {
 }
 function AgentInputRender(_a) {
     var props = __rest(_a, []);
-    const { appearanceInput } = (0, CurrentAgent_1.useCurrentAgent)();
-    if (!(appearanceInput === null || appearanceInput === void 0 ? void 0 : appearanceInput.componentId))
+    const { appearanceInput } = (0, use_appearances_1.default)();
+    if (!appearanceInput.componentId)
         return null;
     return ((0, jsx_runtime_1.jsx)(material_1.Stack, Object.assign({}, props, { children: (0, jsx_runtime_1.jsx)(CustomComponentRenderer_1.default, { componentId: appearanceInput.componentId, properties: appearanceInput.componentProps }) })));
 }
@@ -103,15 +104,15 @@ function OutputView(_a) {
     return ((0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ gap: 2 }, props, { 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 && (0, jsx_runtime_1.jsx)(SuggestedQuestionsView, { message: lastMessage }), !loading && !(messages === null || messages === void 0 ? void 0 : messages.length) && (0, jsx_runtime_1.jsx)(OpeningQuestionsView, {})] })));
 }
 const OutputItemView = (0, react_1.memo)(({ message }) => {
-    var _a, _b, _c, _d, _e;
-    const { appearanceOutput } = (0, CurrentAgent_1.useCurrentAgent)({ agentId: message.assistantId });
-    const { appearancePage } = (0, runtime_1.useRuntimeState)();
+    var _a, _b, _c, _d;
     const { session: authSession } = (0, session_1.useSessionContext)();
+    const { appearanceOutput } = (0, use_appearances_1.default)({ agentId: message.assistantId });
+    const profile = (0, use_appearances_1.useProfile)({ agentId: message.assistantId });
     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: 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: (0, jsx_runtime_1.jsx)(CustomComponentRenderer_1.default, { componentId: appearanceOutput.componentId, properties: appearanceOutput.componentProps, props: {
+                                } }) }) }), (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',
                                 } }) }) })] }) }) }));
 });
@@ -127,16 +128,12 @@ function SuggestedQuestionsView({ message }) {
             } })) : null }));
 }
 const OpeningMessageView = (0, react_1.memo)(() => {
-    var _a, _b;
-    const { childAgentId, appearancePage } = (0, runtime_1.useRuntimeState)();
-    const { agent } = (0, CurrentAgent_1.useCurrentAgent)({ agentId: childAgentId });
-    const openingMessage = (0, react_1.useMemo)(() => {
-        var _a, _b;
-        return (_b = (_a = agent.outputVariables) === null || _a === void 0 ? void 0 : _a.find((i) => i.name === types_1.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 } = (0, runtime_1.useRuntimeState)();
+    const opening = (0, use_appearances_1.useOpeningMessage)({ agentId: childAgentId });
+    if (!(opening === null || opening === void 0 ? void 0 : opening.message))
         return null;
-    return ((0, jsx_runtime_1.jsx)(material_1.Box, { children: (0, jsx_runtime_1.jsx)(UserInfo_1.default, { 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: (0, jsx_runtime_1.jsx)(material_1.Box, { sx: {
+    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,
@@ -144,19 +141,16 @@ const OpeningMessageView = (0, react_1.memo)(() => {
                     py: 1,
                     mt: 0.5,
                     mr: 5,
-                }, children: (0, jsx_runtime_1.jsx)(MarkdownRenderer_1.default, { children: openingMessage.message }) }) }) }));
+                }, children: (0, jsx_runtime_1.jsx)(MarkdownRenderer_1.default, { children: opening.message }) }) }) }));
 });
 function OpeningQuestionsView() {
-    const { childAgentId } = (0, runtime_1.useRuntimeState)();
     const { execute } = (0, runtime_1.useRuntimeState)();
-    const { aid, agent } = (0, CurrentAgent_1.useCurrentAgent)({ agentId: childAgentId });
-    const openingQuestions = (0, react_1.useMemo)(() => {
-        var _a, _b, _c, _d;
-        return (_d = (_c = (_b = (_a = agent.outputVariables) === null || _a === void 0 ? void 0 : _a.find((i) => i.name === types_1.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 } = (0, runtime_1.useRuntimeState)();
+    const { aid } = (0, CurrentAgent_1.useCurrentAgent)({ agentId: childAgentId });
+    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: openingQuestions.map((item) => {
+    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));
             }) }) }));
 }

package/lib/cjs/builtin/async/ai-runtime/runtime-components/SimplePage/index.js

@@ -1,27 +1,4 @@
 "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)
@@ -44,8 +21,9 @@ const react_wrap_balancer_1 = __importDefault(require("react-wrap-balancer"));
 const CustomComponentRenderer_1 = __importDefault(require("../../../../../components/CustomComponentRenderer"));
 const SimpleHeader_1 = __importDefault(require("../../components/Header/SimpleHeader"));
 const SimpleLayout_1 = __importDefault(require("../../components/Layout/SimpleLayout"));
-const CurrentAgent_1 = __importStar(require("../../contexts/CurrentAgent"));
+const CurrentAgent_1 = __importDefault(require("../../contexts/CurrentAgent"));
 const CurrentMessage_1 = __importDefault(require("../../contexts/CurrentMessage"));
+const use_appearances_1 = __importDefault(require("../../hooks/use-appearances"));
 const runtime_1 = require("../../state/runtime");
 const session_1 = require("../../state/session");
 function SimplePage({ resultTitle, primaryColor }) {
@@ -74,7 +52,7 @@ function SimplePage({ resultTitle, primaryColor }) {
 exports.default = SimplePage;
 function AgentInputRender(_a) {
     var props = __rest(_a, []);
-    const { appearanceInput } = (0, CurrentAgent_1.useCurrentAgent)();
+    const { appearanceInput } = (0, use_appearances_1.default)();
     if (!(appearanceInput === null || appearanceInput === void 0 ? void 0 : appearanceInput.componentId))
         return null;
     return ((0, jsx_runtime_1.jsx)(material_1.Stack, Object.assign({}, props, { children: (0, jsx_runtime_1.jsx)(CustomComponentRenderer_1.default, { componentId: appearanceInput.componentId, properties: appearanceInput.componentProps }) })));
@@ -85,7 +63,7 @@ function OutputView(_a) {
     return ((0, jsx_runtime_1.jsx)(material_1.Stack, Object.assign({ gap: 2, mt: 4 }, props, { children: lastMessage && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [resultTitle && ((0, jsx_runtime_1.jsx)(material_1.Typography, { width: "100%", component: "h5", fontSize: 36, fontWeight: 700, textAlign: "center", children: (0, jsx_runtime_1.jsx)(react_wrap_balancer_1.default, { children: resultTitle }) })), (0, jsx_runtime_1.jsx)(material_1.Stack, { children: (0, jsx_runtime_1.jsx)(OutputItemView, { message: lastMessage }) })] })) })));
 }
 const OutputItemView = (0, react_1.memo)(({ message }) => {
-    const { appearanceOutput } = (0, CurrentAgent_1.useCurrentAgent)({ agentId: message.assistantId });
+    const { appearanceOutput } = (0, use_appearances_1.default)({ agentId: message.assistantId });
     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.jsx)(react_1.Suspense, { children: (0, jsx_runtime_1.jsx)(CustomComponentRenderer_1.default, { componentId: appearanceOutput.componentId, properties: appearanceOutput.componentProps }) }) }) }));

package/lib/cjs/builtin/async/ai-runtime/runtime-components/V0/Input.js

@@ -0,0 +1,152 @@
+"use strict";
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+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 css_1 = require("@emotion/css");
+const material_1 = require("@mui/material");
+const isEmpty_1 = __importDefault(require("lodash/isEmpty"));
+const omit_1 = __importDefault(require("lodash/omit"));
+const react_1 = require("react");
+const react_hook_form_1 = require("react-hook-form");
+const locale_1 = require("../../../../locale");
+const AgentInputField_1 = __importDefault(require("../../components/AgentInputField"));
+const LoadingButton_1 = __importDefault(require("../../components/LoadingButton"));
+const CurrentAgent_1 = require("../../contexts/CurrentAgent");
+const runtime_1 = require("../../state/runtime");
+const session_1 = require("../../state/session");
+const agent_inputs_1 = require("../../utils/agent-inputs");
+function AutoForm({ submitText, inlineLabel, autoFillLastForm = true, submitInQuestionField, chatMode, }) {
+    const { t } = (0, locale_1.useLocaleContext)();
+    const { aid, agent } = (0, CurrentAgent_1.useCurrentAgent)();
+    const { execute } = (0, runtime_1.useRuntimeState)();
+    const running = (0, session_1.useSessionState)()((s) => s.running);
+    const parameters = (0, react_1.useMemo)(() => {
+        var _a;
+        return (_a = agent.parameters) === null || _a === void 0 ? void 0 : _a.filter(agent_inputs_1.isValidInput).map((i) => {
+            var _a;
+            return (Object.assign(Object.assign({}, i), { label: ((_a = i.label) === null || _a === void 0 ? void 0 : _a.trim()) || undefined }));
+        });
+    }, [agent.parameters]);
+    const defaultForm = useInitialFormValues();
+    const theme = useFormTheme();
+    const form = (0, react_hook_form_1.useForm)({ defaultValues: defaultForm });
+    (0, react_1.useEffect)(() => {
+        if (autoFillLastForm && !form.formState.isSubmitted && !form.formState.isSubmitting) {
+            form.reset(chatMode ? (0, omit_1.default)(defaultForm, 'question') : defaultForm);
+        }
+    }, [defaultForm, autoFillLastForm, form, chatMode]);
+    const onSubmit = (parameters) => __awaiter(this, void 0, void 0, function* () {
+        yield execute({
+            aid,
+            parameters,
+            onResponseStart: () => {
+                if (chatMode)
+                    form.resetField('question', { defaultValue: '' });
+            },
+        });
+    });
+    return ((0, jsx_runtime_1.jsx)(material_1.ThemeProvider, { theme: theme, children: (0, jsx_runtime_1.jsxs)(Form, { component: "form", className: (0, css_1.cx)('form', `label-position-${inlineLabel ? 'start' : 'top'}`), onSubmit: form.handleSubmit(onSubmit), children: [parameters === null || parameters === void 0 ? void 0 : parameters.map((parameter, index) => {
+                    const { key, required } = parameter !== null && parameter !== void 0 ? parameter : {};
+                    return ((0, jsx_runtime_1.jsx)(material_1.Box, { children: (0, jsx_runtime_1.jsx)(react_hook_form_1.Controller, { control: form.control, name: key, rules: {
+                                required,
+                                min: parameter.type === 'number' && typeof parameter.min === 'number'
+                                    ? { value: parameter.min, message: '' }
+                                    : undefined,
+                                max: parameter.type === 'number' && typeof parameter.max === 'number'
+                                    ? { value: parameter.max, message: '' }
+                                    : undefined,
+                                minLength: parameter.type === 'string' && typeof parameter.minLength === 'number'
+                                    ? { value: parameter.minLength, message: '' }
+                                    : undefined,
+                                maxLength: parameter.type === 'string' && typeof parameter.maxLength === 'number'
+                                    ? { value: parameter.maxLength, message: '' }
+                                    : undefined,
+                            }, render: ({ field, fieldState }) => {
+                                var _a;
+                                return ((0, jsx_runtime_1.jsxs)(material_1.Stack, { className: "form-item", children: [parameter.label && (0, jsx_runtime_1.jsx)(material_1.FormLabel, { children: parameter.label }), (0, jsx_runtime_1.jsx)(AgentInputField_1.default, { inputRef: field.ref, autoFocus: index === 0, size: "small", hiddenLabel: true, fullWidth: true, label: undefined, parameter: parameter, maxRows: !(parameter === null || parameter === void 0 ? void 0 : parameter.type) || (parameter === null || parameter === void 0 ? void 0 : parameter.type) === 'string' ? 5 : undefined, value: field.value || '', onChange: (value) => field.onChange({ target: { value } }), error: Boolean(fieldState.error), helperText: ((_a = fieldState.error) === null || _a === void 0 ? void 0 : _a.message) || (parameter === null || parameter === void 0 ? void 0 : parameter.helper), InputProps: parameter.key === 'question' && submitInQuestionField
+                                                ? {
+                                                    endAdornment: ((0, jsx_runtime_1.jsx)(material_1.InputAdornment, { position: "end", sx: { py: 3, mr: -0.75, alignSelf: 'flex-end' }, children: (0, jsx_runtime_1.jsx)(LoadingButton_1.default, { type: "submit", variant: "contained", loading: running, sx: { borderRadius: 100 }, children: submitText }) })),
+                                                }
+                                                : undefined })] }));
+                            } }) }, parameter.id));
+                }), !(submitInQuestionField && (parameters === null || parameters === void 0 ? void 0 : parameters.some((i) => i.key === 'question'))) && ((0, jsx_runtime_1.jsx)(LoadingButton_1.default, { type: "submit", variant: "contained", loading: running, sx: { height: 40 }, children: submitText || t('generate') }))] }) }));
+}
+exports.default = AutoForm;
+function useInitialFormValues() {
+    const { agent } = (0, CurrentAgent_1.useCurrentAgent)();
+    const lastMessage = (0, session_1.useSessionState)()((s) => { var _a; return (_a = s.messages) === null || _a === void 0 ? void 0 : _a.at(-1); });
+    const [lastInputs, setLastInputs] = (0, react_1.useState)();
+    (0, react_1.useEffect)(() => {
+        if (!lastInputs) {
+            const lastParameters = lastMessage === null || lastMessage === void 0 ? void 0 : lastMessage.parameters;
+            if (!(0, isEmpty_1.default)(lastParameters))
+                setLastInputs(lastParameters);
+        }
+    }, [lastMessage]);
+    return (0, react_1.useMemo)(() => {
+        var _a, _b;
+        if (lastInputs) {
+            return lastInputs;
+        }
+        return Object.fromEntries((_b = (_a = agent.parameters) === null || _a === void 0 ? void 0 : _a.map((parameter) => [parameter.key, parameter.defaultValue])) !== null && _b !== void 0 ? _b : []);
+    }, [lastInputs, agent]);
+}
+function useFormTheme() {
+    const theme = (0, material_1.useTheme)();
+    return (0, react_1.useMemo)(() => {
+        const themeOptions = {
+            shape: {
+                borderRadius: 8,
+            },
+            components: {
+                MuiTextField: {
+                    styleOverrides: {
+                        root: ({ theme }) => theme.unstable_sx({
+                            [`.${material_1.outlinedInputClasses.root}`]: {
+                                [`.${material_1.outlinedInputClasses.notchedOutline}`]: {
+                                    borderWidth: 2,
+                                    borderColor: 'primary.light',
+                                },
+                                ':hover': {
+                                    [`.${material_1.outlinedInputClasses.notchedOutline}`]: {
+                                        borderColor: 'primary.main',
+                                    },
+                                },
+                            },
+                        }),
+                    },
+                },
+            },
+        };
+        return (0, material_1.createTheme)(theme, themeOptions);
+    }, [theme]);
+}
+const Form = (0, material_1.styled)(material_1.Stack)(({ theme }) => theme.unstable_sx({
+    gap: 2,
+    '.form-item': {
+        gap: 0.5,
+        [`.${material_1.formLabelClasses.root}`]: {
+            fontWeight: 500,
+            color: 'text.primary',
+        },
+    },
+    '&.label-position-start': {
+        '.form-item': {
+            display: 'flex',
+            flexDirection: 'row',
+            alignItems: 'center',
+            gap: 1,
+        },
+    },
+}));

package/lib/cjs/builtin/async/ai-runtime/runtime-components/V0/Output.js

@@ -0,0 +1,79 @@
+"use strict";
+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 react_1 = require("@iconify/react");
+const material_1 = require("@mui/material");
+const react_2 = require("react");
+const CustomComponentRenderer_1 = __importDefault(require("../../../../../components/CustomComponentRenderer"));
+const MarkdownRenderer_1 = __importDefault(require("../../components/MarkdownRenderer"));
+const ShareActions_1 = __importDefault(require("../../components/ShareActions"));
+const CurrentMessage_1 = require("../../contexts/CurrentMessage");
+const MessageErrorView_1 = __importDefault(require("../ChatOutput/MessageErrorView"));
+const MessageMetadataRenderer_1 = __importDefault(require("../ChatOutput/MessageMetadataRenderer"));
+const codeField = 'code';
+function V0Output() {
+    var _a, _b;
+    const { message } = (0, CurrentMessage_1.useCurrentMessage)();
+    const objects = (_a = message.result) === null || _a === void 0 ? void 0 : _a.objects;
+    const { error } = message;
+    const isMessageLoading = (message.loading || !message.result) && !message.error;
+    return ((0, jsx_runtime_1.jsxs)(material_1.Stack, { gap: 2, sx: {
+            py: 2,
+        }, children: [error && (0, jsx_runtime_1.jsx)(MessageErrorView_1.default, { error: error }), isMessageLoading && ((0, jsx_runtime_1.jsx)(material_1.Stack, { sx: {
+                    flex: 1,
+                }, children: (0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "rectangular", sx: {
+                        height: 400,
+                        borderRadius: 1,
+                    } }) })), objects === null || objects === void 0 ? void 0 : objects.map((item) => {
+                // @ts-ignore
+                const code = item.data[codeField];
+                return ((0, jsx_runtime_1.jsx)(material_1.Box, { flex: 1, sx: {
+                        display: 'flex',
+                        justifyContent: 'center',
+                        alignItems: 'center',
+                    }, children: (0, jsx_runtime_1.jsx)(CodePreview, { code: code }) }));
+            }), objects === null || objects === void 0 ? void 0 : objects.map((item) => (0, jsx_runtime_1.jsx)(MessageMetadataRenderer_1.default, { object: item.data })), !isMessageLoading && ((_b = message.result) === null || _b === void 0 ? void 0 : _b.content) && ((0, jsx_runtime_1.jsx)(ShareActions_1.default, { direction: "row", justifyContent: "flex-end", sx: { mt: 2 } }))] }));
+}
+exports.default = V0Output;
+function CodePreview({ code }) {
+    const [showCode, setShowCode] = (0, react_2.useState)(false);
+    if (!code)
+        return null;
+    return ((0, jsx_runtime_1.jsxs)(material_1.Stack, { sx: {
+            flex: 1,
+        }, children: [(0, jsx_runtime_1.jsx)(material_1.Box, { sx: {
+                    display: 'flex',
+                    justifyContent: 'flex-end',
+                }, children: (0, jsx_runtime_1.jsx)(material_1.IconButton, { onClick: () => setShowCode((prev) => !prev), sx: {
+                        color: 'textColor',
+                    }, children: (0, jsx_runtime_1.jsx)(react_1.Icon, { icon: showCode ? 'tabler:layout-sidebar' : 'tabler:code' }) }) }), (0, jsx_runtime_1.jsx)(material_1.Stack, { gap: 2, sx: {
+                    display: 'flex',
+                    flexDirection: 'row',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                }, children: (0, jsx_runtime_1.jsx)(material_1.Box, { sx: {
+                        display: 'flex',
+                        justifyContent: 'center',
+                        alignItems: 'center',
+                    }, children: (0, jsx_runtime_1.jsx)(CustomComponentRenderer_1.default, { componentId: "mock-dev-component", dev: {
+                            components: {
+                                'mock-dev-component': {
+                                    data: {
+                                        id: 'mock-dev-component',
+                                        createdAt: '',
+                                        updatedAt: '',
+                                        renderer: {
+                                            type: 'react-component',
+                                            script: code,
+                                        },
+                                    },
+                                },
+                            },
+                        } }) }) }), (0, jsx_runtime_1.jsx)(material_1.Drawer, { anchor: "right", open: showCode, onClose: () => setShowCode(false), children: (0, jsx_runtime_1.jsx)(material_1.Box, { sx: {
+                        p: 2,
+                        maxWidth: '40vw',
+                    }, children: (0, jsx_runtime_1.jsx)(MarkdownRenderer_1.default, { children: `\`\`\`typescript\n${code}\n\`\`\`` }) }) })] }));
+}