@blocklet/pages-kit 0.2.309 → 0.2.311

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

@@ -0,0 +1,147 @@
+"use strict";
+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 material_1 = require("@mui/material");
+const dayjs_1 = __importDefault(require("dayjs"));
+// import { useRuntimeState } from '@blocklet/pages-kit/builtin/async/ai-runtime';
+// import { Icon } from 'iconify/react';
+const react_1 = require("react");
+const CustomComponentRenderer_1 = __importDefault(require("../../../../../components/CustomComponentRenderer"));
+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 getLineClamp = (count) => {
+    return {
+        display: '-webkit-box',
+        WebkitLineClamp: count,
+        WebkitBoxOrient: 'vertical',
+        overflow: 'hidden',
+        textOverflow: 'ellipsis',
+    };
+};
+function V0Page({ textColor = '#333', primaryColor }) {
+    var _a;
+    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, textColor },
+            shape: {
+                borderRadius: 8,
+            },
+        });
+    }, [inheritedTheme, primaryColor, textColor]);
+    const [sessionId] = (0, react_1.useState)('1');
+    const [message, setMessage] = (0, react_1.useState)();
+    const { childAgentId } = (0, runtime_1.useRuntimeState)();
+    const messagesList = (0, session_1.useSessionState)({
+        autoLoad: true,
+    })((s) => s.messages);
+    (0, react_1.useEffect)(() => {
+        if (messagesList === null || messagesList === void 0 ? void 0 : messagesList.length) {
+            const lastMessage = messagesList[messagesList.length - 1];
+            // @ts-ignore
+            setMessage(lastMessage);
+        }
+    }, [messagesList]);
+    const SliderRender = (0, react_1.useCallback)(({ message }) => {
+        // if is detail, return output
+        if (sessionId && (messagesList === null || messagesList === void 0 ? void 0 : messagesList.length)) {
+            return ((0, jsx_runtime_1.jsx)(material_1.Box, { sx: {
+                    width: 200,
+                    p: 2,
+                    position: 'sticky',
+                    top: 64,
+                    height: 'calc(100vh - 65px)',
+                    overflowY: 'auto',
+                }, children: (0, jsx_runtime_1.jsx)(material_1.Stack, { spacing: 2, justifyContent: "center", children: messagesList === null || messagesList === void 0 ? void 0 : messagesList.map((_, i) => {
+                        var _a;
+                        const isCurrent = _.taskId === (message === null || message === void 0 ? void 0 : message.taskId);
+                        return ((0, jsx_runtime_1.jsxs)(material_1.Box, { onClick: () => {
+                                // @ts-ignore
+                                setMessage(_);
+                            }, sx: {
+                                cursor: 'pointer',
+                                backgroundColor: isCurrent ? 'primary.main' : 'rgba(0, 0, 0, 0.5)',
+                                color: '#fff',
+                                borderRadius: 1,
+                                p: 1,
+                            }, children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "caption", display: "block", sx: Object.assign({ color: 'rgba(255, 255, 255, 0.9)' }, getLineClamp(2)), children: (_a = _.parameters) === null || _a === void 0 ? void 0 : _a.question }), (0, jsx_runtime_1.jsx)(material_1.Box, { children: (0, jsx_runtime_1.jsxs)(material_1.Typography, { sx: {
+                                            textAlign: 'right',
+                                            fontWeight: 600,
+                                            fontSize: 12,
+                                            mt: 0.5,
+                                            display: 'flex',
+                                            justifyContent: 'space-between',
+                                        }, children: [(0, jsx_runtime_1.jsx)("span", { style: {
+                                                    color: 'rgba(255, 255, 255, 0.7)',
+                                                    fontWeight: 400,
+                                                }, children: (0, dayjs_1.default)(_.updatedAt).format('MM-DD HH:mm') }), (0, jsx_runtime_1.jsx)("span", { children: `V${i}` })] }) })] }, _.assistantId));
+                    }) }) }, "slider"));
+        }
+        return null;
+    }, [JSON.stringify(messagesList)]);
+    const ContentRender = (0, react_1.useCallback)(() => {
+        // if is detail, return output
+        if (sessionId) {
+            return ((0, jsx_runtime_1.jsx)(material_1.Box, { flex: 1, children: (0, jsx_runtime_1.jsx)(AgentOutputRender, { message: message }) }));
+        }
+        return ((0, jsx_runtime_1.jsx)(material_1.Box, { flex: 1, children: (0, jsx_runtime_1.jsx)(material_1.Grid, { container: true, spacing: 2, justifyContent: "center", children: [...Array(3)].map((_, i) => ((0, jsx_runtime_1.jsx)(material_1.Grid, { item: true, xs: 12, sm: 6, md: 4, children: (0, jsx_runtime_1.jsx)(material_1.Card, { sx: { backgroundColor: 'rgba(0, 0, 0, 0.5)', color: '#fff' }, children: (0, jsx_runtime_1.jsxs)(material_1.CardContent, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "body2", sx: { mb: 1 }, children: `Code Snippet ${i + 1}` }), (0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "caption", display: "block", sx: { color: 'rgba(255, 255, 255, 0.7)' }, children: `This is history requirement ${i + 1}` })] }) }) }, i))) }) }));
+    }, [JSON.stringify(message)]);
+    return ((0, jsx_runtime_1.jsx)(material_1.ThemeProvider, { theme: theme, children: (0, jsx_runtime_1.jsx)(CurrentAgent_1.default, { agentId: childAgentId, children: (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: {
+                    display: 'flex',
+                    // background: 'linear-gradient(135deg, #1a237e 0%, #3c3f41 100%)',
+                }, children: [(0, jsx_runtime_1.jsx)(SliderRender, { message: message }), (0, jsx_runtime_1.jsxs)(material_1.Container, { sx: {
+                            minHeight: 'calc(100vh - 64px - 1px)',
+                            textAlign: 'center',
+                            py: 2,
+                            pt: 10,
+                            gap: 2,
+                            display: 'flex',
+                            flexDirection: 'column',
+                        }, children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "h2", color: "textColor", sx: { fontWeight: 'bold' }, children: "AIGNE V0" }), (0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "h5", color: "textColor", sx: Object.assign({}, getLineClamp(5)), children: ((_a = message === null || message === void 0 ? void 0 : message.parameters) === null || _a === void 0 ? void 0 : _a.question) || 'A v0 release to help you build code quickly' }), (0, jsx_runtime_1.jsx)(ContentRender, {}), (0, jsx_runtime_1.jsx)(material_1.Box, { sx: {
+                                    position: 'sticky',
+                                    bottom: 0,
+                                    backgroundColor: 'white',
+                                    pt: 4,
+                                }, children: (0, jsx_runtime_1.jsx)(AgentInputRender, {}) })] })] }) }) }));
+}
+exports.default = V0Page;
+function AgentInputRender(_a) {
+    var props = __rest(_a, []);
+    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)(react_1.Suspense, { children: (0, jsx_runtime_1.jsx)(CustomComponentRenderer_1.default, Object.assign({ componentId: appearanceInput.componentId, properties: appearanceInput.componentProps }, props)) }));
+}
+function AgentOutputRender(_a) {
+    var { message } = _a, props = __rest(_a, ["message"]);
+    const { appearanceOutput } = (0, use_appearances_1.default)();
+    if (!(appearanceOutput === null || appearanceOutput === void 0 ? void 0 : appearanceOutput.componentId) || !message)
+        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, Object.assign({ componentId: appearanceOutput.componentId, properties: appearanceOutput.componentProps }, props)) }) }) }));
+}

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

@@ -0,0 +1,12 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.V0Input = exports.V0Output = exports.V0Page = void 0;
+var Page_1 = require("./Page");
+Object.defineProperty(exports, "V0Page", { enumerable: true, get: function () { return __importDefault(Page_1).default; } });
+var Output_1 = require("./Output");
+Object.defineProperty(exports, "V0Output", { enumerable: true, get: function () { return __importDefault(Output_1).default; } });
+var Input_1 = require("./Input");
+Object.defineProperty(exports, "V0Input", { enumerable: true, get: function () { return __importDefault(Input_1).default; } });

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

@@ -42,14 +42,10 @@ function useRuntimeState() {
         }
         return exec(Object.assign(Object.assign({}, args), { working }));
     }), [authSession.user, exec, working, login]);
-    const appearancePage = (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.appearancePage)) === null || _b === void 0 ? void 0 : _b.initialValue;
-    }, [agent]);
     const childAgentId = (0, react_1.useMemo)(() => {
         var _a, _b, _c, _d, _e, _f;
         return ((_f = (_e = (_d = (_c = (_b = (_a = agent.outputVariables) === null || _a === void 0 ? void 0 : _a.find((i) => i.name === types_1.RuntimeOutputVariable.children)) === null || _b === void 0 ? void 0 : _b.initialValue) === null || _c === void 0 ? void 0 : _c.agents) === null || _d === void 0 ? void 0 : _d[0]) === null || _e === void 0 ? void 0 : _e.id) !== null && _f !== void 0 ? _f : agent.id);
     }, [agent]);
-    return { aid, working, agent, appearancePage, childAgentId, execute };
+    return { aid, working, agent, childAgentId, execute };
 }
 exports.useRuntimeState = useRuntimeState;

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

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getOutputVariableInitialValue = void 0;
+function getOutputVariableInitialValue(agent, output) {
+    var _a, _b;
+    return (_b = (_a = agent.outputVariables) === null || _a === void 0 ? void 0 : _a.find((i) => i.name === output)) === null || _b === void 0 ? void 0 : _b.initialValue;
+}
+exports.getOutputVariableInitialValue = getOutputVariableInitialValue;

package/lib/cjs/builtin/mui/material.js

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.createTheme = exports.alpha = exports.Zoom = exports.Typography = exports.Tooltip = exports.ThemeProvider = exports.TextField = exports.Switch = exports.Stack = exports.Slide = exports.Popper = exports.Paper = exports.MenuList = exports.MenuItem = exports.Menu = exports.ListSubheader = exports.ListItemSecondaryAction = exports.ListItemIcon = exports.ListItemButton = exports.ListItemAvatar = exports.ListItem = exports.List = exports.Link = exports.LinearProgress = exports.Grow = exports.Grid = exports.GlobalStyles = exports.Fade = exports.Divider = exports.DialogTitle = exports.DialogContent = exports.DialogActions = exports.Dialog = exports.Container = exports.Collapse = exports.ClickAwayListener = exports.CircularProgress = exports.CardMedia = exports.CardHeader = exports.CardContent = exports.CardActions = exports.CardActionArea = exports.Card = exports.ButtonGroup = exports.Button = exports.Box = exports.Avatar = exports.Autocomplete = exports.AlertTitle = exports.Alert = void 0;
-exports.useTheme = exports.useMediaQuery = exports.styled = void 0;
+exports.alpha = exports.Zoom = exports.Typography = exports.Tooltip = exports.ThemeProvider = exports.TextField = exports.Switch = exports.Stack = exports.Slide = exports.Popper = exports.Paper = exports.MenuList = exports.MenuItem = exports.Menu = exports.ListSubheader = exports.ListItemSecondaryAction = exports.ListItemIcon = exports.ListItemButton = exports.ListItemAvatar = exports.ListItem = exports.List = exports.Link = exports.LinearProgress = exports.Grow = exports.Grid = exports.GlobalStyles = exports.Fade = exports.Divider = exports.DialogTitle = exports.DialogContent = exports.DialogActions = exports.Dialog = exports.Container = exports.Collapse = exports.ClickAwayListener = exports.CircularProgress = exports.CardMedia = exports.CardHeader = exports.CardContent = exports.CardActions = exports.CardActionArea = exports.Card = exports.ButtonGroup = exports.IconButton = exports.Button = exports.Box = exports.Avatar = exports.Autocomplete = exports.AlertTitle = exports.Alert = void 0;
+exports.useTheme = exports.useMediaQuery = exports.styled = exports.createTheme = void 0;
 var material_1 = require("@mui/material");
 Object.defineProperty(exports, "Alert", { enumerable: true, get: function () { return material_1.Alert; } });
 Object.defineProperty(exports, "AlertTitle", { enumerable: true, get: function () { return material_1.AlertTitle; } });
@@ -9,6 +9,7 @@ Object.defineProperty(exports, "Autocomplete", { enumerable: true, get: function
 Object.defineProperty(exports, "Avatar", { enumerable: true, get: function () { return material_1.Avatar; } });
 Object.defineProperty(exports, "Box", { enumerable: true, get: function () { return material_1.Box; } });
 Object.defineProperty(exports, "Button", { enumerable: true, get: function () { return material_1.Button; } });
+Object.defineProperty(exports, "IconButton", { enumerable: true, get: function () { return material_1.IconButton; } });
 Object.defineProperty(exports, "ButtonGroup", { enumerable: true, get: function () { return material_1.ButtonGroup; } });
 Object.defineProperty(exports, "Card", { enumerable: true, get: function () { return material_1.Card; } });
 Object.defineProperty(exports, "CardActionArea", { enumerable: true, get: function () { return material_1.CardActionArea; } });