@blocklet/pages-kit 0.2.291 → 0.2.293

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

@@ -0,0 +1,153 @@
+"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 });
+exports.SUPPORTED_PARAMETER_TYPES = void 0;
+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 LoadingButton_1 = __importDefault(require("../../../LoadingButton"));
+const parameters_1 = __importDefault(require("../../../parameters"));
+const CurrentAgent_1 = require("../../contexts/CurrentAgent");
+const runtime_1 = require("../../state/runtime");
+exports.SUPPORTED_PARAMETER_TYPES = ['string', 'number', 'select', 'language'];
+function AutoForm({ submitText, inlineLabel, autoFillLastForm = true, submitInQuestionField, chatMode, }) {
+    const { t } = (0, locale_1.useLocaleContext)();
+    const { aid, agent } = (0, CurrentAgent_1.useCurrentAgent)();
+    const { sessionState, execute } = (0, runtime_1.useRuntimeState)();
+    const parameters = (0, react_1.useMemo)(() => {
+        var _a;
+        return (_a = agent.parameters) === null || _a === void 0 ? void 0 : _a.filter((i) => !!i.key && exports.SUPPORTED_PARAMETER_TYPES.includes(i.type || 'string')).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]);
+    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)(parameters_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 }, children: (0, jsx_runtime_1.jsx)(LoadingButton_1.default, { type: "submit", variant: "contained", loading: sessionState.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: sessionState.running, sx: { height: 40 }, children: submitText || t('generate') }))] }) }));
+}
+exports.default = AutoForm;
+function useInitialFormValues() {
+    var _a;
+    const [lastMessage, setLastMessage] = (0, react_1.useState)();
+    const { agent } = (0, CurrentAgent_1.useCurrentAgent)();
+    const { sessionState } = (0, runtime_1.useRuntimeState)();
+    (0, react_1.useEffect)(() => {
+        var _a;
+        if (!lastMessage) {
+            setLastMessage((_a = sessionState.messages) === null || _a === void 0 ? void 0 : _a.slice(-1)[0]);
+        }
+    }, [(_a = sessionState.messages) === null || _a === void 0 ? void 0 : _a.length]);
+    return (0, react_1.useMemo)(() => {
+        var _a, _b;
+        if (lastMessage) {
+            const lastParameters = lastMessage === null || lastMessage === void 0 ? void 0 : lastMessage.parameters;
+            if (!(0, isEmpty_1.default)(lastParameters))
+                return lastParameters;
+        }
+        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 : []);
+    }, [lastMessage, 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/components/runtime/components/ChatOutput/MessageErrorView.js

@@ -0,0 +1,19 @@
+"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 material_1 = require("@mui/material");
+const locale_1 = require("../../../../../../locale");
+const MarkdownRenderer_1 = __importDefault(require("../../../MarkdownRenderer"));
+function MessageErrorView({ error }) {
+    const { t } = (0, locale_1.useLocaleContext)();
+    if (!error)
+        return null;
+    if (error.status === 401) {
+        return ((0, jsx_runtime_1.jsx)(material_1.Box, { className: "ai-chat-message-error", children: (0, jsx_runtime_1.jsx)(material_1.Box, { className: "message-response", children: (0, jsx_runtime_1.jsx)(MarkdownRenderer_1.default, { children: t('requireLogin') }) }) }));
+    }
+    return ((0, jsx_runtime_1.jsx)(material_1.Alert, { className: "ai-chat-message-error", severity: "error", sx: { mr: 5 }, children: error.message }));
+}
+exports.default = MessageErrorView;

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

@@ -0,0 +1,179 @@
+"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 });
+exports.MessageItemWrapper = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const image_preview_1 = __importDefault(require("@blocklet/ai-kit/components/image-preview"));
+const css_1 = require("@emotion/css");
+const material_1 = require("@mui/material");
+const dayjs_1 = __importDefault(require("dayjs"));
+const react_1 = __importStar(require("react"));
+const ux_1 = require("../../../../../../arcblock/ux");
+const session_1 = require("../../../../../../session");
+const common_1 = require("../../../common");
+const MarkdownRenderer_1 = __importDefault(require("../../../MarkdownRenderer"));
+const MessageActions_1 = __importDefault(require("../../../message/MessageActions"));
+const runtime_1 = require("../../state/runtime");
+const MessageErrorView_1 = __importDefault(require("./MessageErrorView"));
+const MessageItemView = (0, react_1.memo)((_a) => {
+    var _b;
+    var { message, hideAvatar } = _a, props = __rest(_a, ["message", "hideAvatar"]);
+    const showUserMessage = !!((_b = message.parameters) === null || _b === void 0 ? void 0 : _b.question);
+    return ((0, jsx_runtime_1.jsxs)(MessageItemContainer, Object.assign({}, props, { className: (0, css_1.cx)('ai-chat-message-item', hideAvatar && 'hide-avatar', props.className), children: [showUserMessage && (0, jsx_runtime_1.jsx)(UserMessage, { message: message }), (0, jsx_runtime_1.jsx)(AgentMessage, { message: message, hideAvatar: hideAvatar })] })));
+});
+exports.default = MessageItemView;
+const MessageItemContainer = (0, material_1.styled)(material_1.Stack) `
+  gap: ${({ theme }) => theme.spacing(2.5)};
+  overflow: hidden;
+
+  .message-question {
+    position: relative;
+    border-radius: ${({ theme }) => theme.shape.borderRadius}px;
+    border-top-right-radius: 2px;
+    padding: ${({ theme }) => theme.spacing(1, 2)};
+    margin-top: ${({ theme }) => theme.spacing(0.5)};
+    // without logo width
+    max-width: calc(100% - 40px);
+    background-color: rgba(239, 246, 255, 1);
+
+    &.hide-avatar {
+      border-top-right-radius: ${({ theme }) => theme.shape.borderRadius}px;
+    }
+  }
+
+  .message-response {
+    position: relative;
+    border-radius: ${({ theme }) => theme.shape.borderRadius}px;
+    border-top-left-radius: 2px;
+    padding: ${({ theme }) => theme.spacing(1, 2)};
+    margin-top: ${({ theme }) => theme.spacing(0.5)};
+    // without logo width
+    max-width: calc(100% - 40px);
+    background-color: rgba(229, 231, 235, 1);
+
+    &.hide-avatar {
+      border-top-left-radius: ${({ theme }) => theme.shape.borderRadius}px;
+    }
+  }
+`;
+function UserMessage({ message }) {
+    var _a, _b, _c, _d;
+    const { session: authSession } = (0, session_1.useSessionContext)();
+    return ((0, jsx_runtime_1.jsxs)(material_1.Stack, { className: "ai-chat-message-user", direction: "row", gap: 1.5, sx: {
+            display: 'flex',
+            flexDirection: 'row-reverse',
+            textAlign: 'right',
+            justifyContent: 'flex-end',
+        }, children: [(0, jsx_runtime_1.jsx)(material_1.Box, { children: (0, jsx_runtime_1.jsx)(ux_1.Avatar, { size: 40, src: (_a = authSession.user) === null || _a === void 0 ? void 0 : _a.avatar, did: (_b = authSession.user) === null || _b === void 0 ? void 0 : _b.did, variant: "circle", shape: "circle" }) }), (0, jsx_runtime_1.jsxs)(material_1.Stack, { flex: 1, overflow: "hidden", sx: {
+                    display: 'flex',
+                    flexDirection: 'column',
+                    alignItems: 'flex-end',
+                }, children: [(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)();
+    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: {
+                                    popper: {
+                                        modifiers: [
+                                            {
+                                                name: 'offset',
+                                                options: {
+                                                    offset: [-3, isMobile ? (!hideAvatar ? -18 : -8) : -6],
+                                                },
+                                            },
+                                        ],
+                                    },
+                                    tooltip: {
+                                        sx: {
+                                            bgcolor: 'white',
+                                            boxShadow: '0px 4px 8px 0px rgba(3, 7, 18, 0.08)',
+                                            border: '1px solid rgba(229, 231, 235, 1)',
+                                            p: 0.5,
+                                        },
+                                    },
+                                }, title: !isMessageLoading && ((_f = message.result) === null || _f === void 0 ? void 0 : _f.content) && (0, jsx_runtime_1.jsx)(MessageActions_1.default, { content: message.result.content }), 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) => {
+                                            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) &&
+                                                    !((_d = (_c = message.result) === null || _c === void 0 ? void 0 : _c.images) === null || _d === void 0 ? void 0 : _d.length) &&
+                                                    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, 
+                                // 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)(common_1.MessageMetadataRenderer, { 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 { hideAvatar, agentMessage } = _a, props = __rest(_a, ["hideAvatar", "agentMessage"]);
+    const { appearancePage } = (0, runtime_1.useRuntimeState)();
+    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] })] })) })));
+}
+exports.MessageItemWrapper = MessageItemWrapper;
+function MessageUserName({ children }) {
+    return ((0, jsx_runtime_1.jsx)(material_1.Typography, { component: "div", noWrap: true, sx: {
+            fontSize: 14,
+            lineHeight: '24px',
+            fontWeight: 500,
+            display: 'flex',
+            alignItems: 'center',
+            gap: 1,
+        }, children: children }));
+}
+function MessageTime({ time }) {
+    const t = (0, react_1.useMemo)(() => {
+        const date = (0, dayjs_1.default)(time);
+        if (!date.isValid())
+            return undefined;
+        return date.isSame((0, dayjs_1.default)(), 'date') ? date.format('HH:mm') : date.format('YYYY-MM-DD HH:mm');
+    }, [time]);
+    if (!t)
+        return null;
+    return ((0, jsx_runtime_1.jsx)(material_1.Typography, { sx: {
+            fontSize: 12,
+            lineHeight: '24px',
+            color: 'text.secondary',
+        }, children: t }, "user-time"));
+}

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

@@ -0,0 +1,13 @@
+"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 CurrentMessage_1 = require("../../contexts/CurrentMessage");
+const MessageItemView_1 = __importDefault(require("./MessageItemView"));
+function ChatOutput() {
+    const { message } = (0, CurrentMessage_1.useCurrentMessage)();
+    return (0, jsx_runtime_1.jsx)(MessageItemView_1.default, { message: message });
+}
+exports.default = ChatOutput;

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

@@ -0,0 +1,129 @@
+"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 };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const types_1 = require("@blocklet/ai-runtime/types");
+const lab_1 = require("@mui/lab");
+const material_1 = require("@mui/material");
+const react_1 = require("react");
+const react_wrap_balancer_1 = __importStar(require("react-wrap-balancer"));
+const CustomComponentRenderer_1 = __importDefault(require("../../../../../../../components/CustomComponentRenderer"));
+const locale_1 = require("../../../../../../locale");
+const LoadingButton_1 = __importDefault(require("../../../LoadingButton"));
+const CurrentAgent_1 = __importStar(require("../../contexts/CurrentAgent"));
+const CurrentMessage_1 = __importDefault(require("../../contexts/CurrentMessage"));
+const runtime_1 = require("../../state/runtime");
+const map_right_1 = __importDefault(require("../../utils/map-right"));
+function PhotoGallery({ resultTitle, background, primaryColor, }) {
+    var _a;
+    const { appearancePage, agent } = (0, runtime_1.useRuntimeState)();
+    const children = (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.children)) === null || _b === void 0 ? void 0 : _b.initialValue;
+    }, [agent]);
+    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)(material_1.ThemeProvider, { theme: theme, children: (0, jsx_runtime_1.jsxs)(Root, { className: "photo-wall-root", sx: { backgroundImage: `url(${background})` }, children: [(0, jsx_runtime_1.jsx)(material_1.Stack, { className: "photo-wall-header", children: (0, jsx_runtime_1.jsxs)(react_wrap_balancer_1.Provider, { children: [(appearancePage === null || appearancePage === void 0 ? void 0 : appearancePage.name) && ((0, jsx_runtime_1.jsx)(material_1.Typography, { component: "h2", fontSize: 48, fontWeight: 700, textAlign: "center", children: (0, jsx_runtime_1.jsx)(react_wrap_balancer_1.default, { children: appearancePage.name }) })), (appearancePage === null || appearancePage === void 0 ? void 0 : appearancePage.description) && ((0, jsx_runtime_1.jsx)(material_1.Typography, { fontSize: 20, textAlign: "center", children: (0, jsx_runtime_1.jsx)(react_wrap_balancer_1.default, { children: appearancePage.description }) }))] }) }), (0, jsx_runtime_1.jsx)(material_1.Stack, { className: "photo-wall-input", children: (_a = children === null || children === void 0 ? void 0 : children.agents) === null || _a === void 0 ? void 0 : _a.map((i) => ((0, jsx_runtime_1.jsx)(CurrentAgent_1.default, { agentId: i.id, children: (0, jsx_runtime_1.jsx)(AgentInputRender, {}) }, i.id))) }), (0, jsx_runtime_1.jsxs)(material_1.Stack, { className: "photo-wall-output", gap: 2, children: [resultTitle && ((0, jsx_runtime_1.jsx)(material_1.Typography, { component: "h2", fontSize: 48, fontWeight: 700, textAlign: "center", children: (0, jsx_runtime_1.jsx)(react_wrap_balancer_1.default, { children: resultTitle }) })), (0, jsx_runtime_1.jsx)(OutputView, {})] })] }) }));
+}
+exports.default = PhotoGallery;
+const Root = (0, material_1.styled)(material_1.Stack)(({ theme }) => theme.unstable_sx({
+    gap: { xs: 3, sm: 4, md: 5 },
+    width: '100%',
+    backgroundSize: '100% auto',
+    backgroundRepeat: 'no-repeat',
+    backgroundPosition: 'top',
+    mt: 4,
+    '.photo-wall-header': {
+        maxWidth: 'md',
+        mx: 'auto',
+        width: '100%',
+        px: { xs: 2, sm: 3 },
+        gap: { xs: 2, sm: 3 },
+    },
+    '.photo-wall-input': {
+        maxWidth: 'md',
+        mx: 'auto',
+        width: '100%',
+        px: { xs: 2, sm: 3 },
+    },
+    '.photo-wall-output': {
+        width: '100%',
+        alignItems: 'center',
+        px: { xs: 2, sm: 3 },
+        '.photo-wall-item': {
+            borderRadius: 1,
+            img: {
+                borderRadius: 1,
+            },
+        },
+    },
+}));
+function AgentInputRender() {
+    var _a, _b;
+    const { agent } = (0, CurrentAgent_1.useCurrentAgent)();
+    const input = (_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;
+    if (!(input === null || input === void 0 ? void 0 : input.componentId))
+        return null;
+    return ((0, jsx_runtime_1.jsx)(material_1.Stack, { children: (0, jsx_runtime_1.jsx)(CustomComponentRenderer_1.default, { componentId: input.componentId, properties: input.componentProps }) }));
+}
+function NoOutputs() {
+    return ((0, jsx_runtime_1.jsx)(material_1.Stack, { mt: 10, children: (0, jsx_runtime_1.jsx)(material_1.Typography, { color: "text.disabled", children: "You haven't generated any pictures yet." }) }));
+}
+function OutputView() {
+    var _a, _b, _c, _d, _e;
+    const { t } = (0, locale_1.useLocaleContext)();
+    const { sessionState } = (0, runtime_1.useRuntimeState)();
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [sessionState.loaded && !((_a = sessionState.messages) === null || _a === void 0 ? void 0 : _a.length) && (0, jsx_runtime_1.jsx)(NoOutputs, {}), (0, jsx_runtime_1.jsxs)(lab_1.Masonry, { columns: { xs: 2, sm: 3, md: 4, lg: 5 }, spacing: 1, sequential: true, sx: { width: '100%', overflow: 'hidden' }, children: [sessionState.running && ((0, jsx_runtime_1.jsx)(material_1.Skeleton, { className: "photo-wall-item", variant: "rectangular", sx: {
+                            // FIXME: default using history height
+                            height: (_c = (_b = document.getElementsByClassName('photo-wall-item')[0]) === null || _b === void 0 ? void 0 : _b.clientHeight) !== null && _c !== void 0 ? _c : 200,
+                        } })), (0, map_right_1.default)((_d = sessionState.messages) !== null && _d !== void 0 ? _d : [], (message) => ((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)(OutputItemView, {}) }) }) }, message.taskId)))] }), (0, jsx_runtime_1.jsx)(material_1.Box, { my: 4, children: !!((_e = sessionState.messages) === null || _e === void 0 ? void 0 : _e.length) && !sessionState.noMoreMessage && ((0, jsx_runtime_1.jsx)(LoadingButton_1.default, { variant: "outlined", onClick: sessionState.loadMoreMessages, children: t('loadMore') })) })] }));
+}
+function OutputItemView() {
+    var _a, _b;
+    const { agent } = (0, CurrentAgent_1.useCurrentAgent)();
+    const input = (_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;
+    if (!(input === null || input === void 0 ? void 0 : input.componentId))
+        return null;
+    return (0, jsx_runtime_1.jsx)(CustomComponentRenderer_1.default, { componentId: input.componentId, properties: input.componentProps });
+}

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

@@ -0,0 +1,117 @@
+"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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const types_1 = require("@blocklet/ai-runtime/types");
+const react_1 = require("@iconify/react");
+const material_1 = require("@mui/material");
+const react_2 = require("react");
+const locale_1 = require("../../../../../../locale");
+const ActionButton_1 = require("../../../ActionButton");
+const CurrentMessage_1 = require("../../contexts/CurrentMessage");
+const getLineClamp = (line) => ({
+    display: '-webkit-box',
+    WebkitLineClamp: line,
+    WebkitBoxOrient: 'vertical',
+    overflow: 'hidden',
+    overflowWrap: 'break-word',
+    textOverflow: 'ellipsis',
+    whiteSpace: 'wrap',
+});
+function PhotoGalleryItem() {
+    var _a, _b;
+    const { message } = (0, CurrentMessage_1.useCurrentMessage)();
+    const [openDialog, setOpenDialog] = (0, react_2.useState)(false);
+    const objects = (_b = (_a = message.result) === null || _a === void 0 ? void 0 : _a.objects) !== null && _b !== void 0 ? _b : [];
+    const images = objects.flatMap((i) => { var _a; return (_a = i.data[types_1.RuntimeOutputVariable.images]) !== null && _a !== void 0 ? _a : []; });
+    return images.map(({ url }, index) => {
+        var _a;
+        return ((0, jsx_runtime_1.jsxs)(material_1.Box, { className: "photo-wall-item", sx: {
+                position: 'relative',
+                overflow: 'hidden',
+                cursor: 'pointer',
+                '&:hover': {
+                    '.photo-wall-item-alt': {
+                        opacity: 1,
+                    },
+                },
+            }, onClick: () => setOpenDialog(true), children: [(0, jsx_runtime_1.jsx)(material_1.Box, { component: "img", src: url, alt: "", width: "100%", height: "100%", 
+                    // 首屏 image 不能用 lazy，会闪烁乱序
+                    loading: index < 12 ? 'eager' : 'lazy' }), (0, jsx_runtime_1.jsx)(material_1.Box, { className: "photo-wall-item-alt", sx: {
+                        position: 'absolute',
+                        top: 0,
+                        bottom: 0,
+                        left: 0,
+                        right: 0,
+                        width: '100%',
+                        height: '100%',
+                        px: 1.5,
+                        py: 1,
+                        display: 'flex',
+                        alignItems: 'flex-end',
+                        fontWeight: 500,
+                        fontSize: 13,
+                        color: 'white',
+                        background: 'linear-gradient(to bottom, rgba(2, 7, 19, 0) 0%, rgba(2, 7, 19, 0.8) 100%)',
+                        opacity: 0,
+                        transition: 'opacity 0.3s',
+                    }, children: (0, jsx_runtime_1.jsx)(material_1.Box, { sx: Object.assign({ lineHeight: 1.5 }, getLineClamp(3)), children: (_a = message.parameters) === null || _a === void 0 ? void 0 : _a.question }) }), openDialog && ((0, jsx_runtime_1.jsx)(PromptDialog, { open: true, url: url, onClose: (e) => {
+                        e.stopPropagation();
+                        e.preventDefault();
+                        setOpenDialog(false);
+                    } }))] }, url));
+    });
+}
+exports.default = PhotoGalleryItem;
+function PromptDialog(_a) {
+    var { url } = _a, props = __rest(_a, ["url"]);
+    const { message } = (0, CurrentMessage_1.useCurrentMessage)();
+    const { parameters } = message;
+    const theme = (0, material_1.useTheme)();
+    const { t } = (0, locale_1.useLocaleContext)();
+    return ((0, jsx_runtime_1.jsxs)(material_1.Dialog, Object.assign({ fullWidth: true, maxWidth: false, scroll: "paper", slotProps: {
+            backdrop: {
+                sx: {
+                    bgcolor: 'rgba(255, 255, 255, 0.4)',
+                    backdropFilter: 'blur(12px)',
+                },
+            },
+        } }, props, { children: [(0, jsx_runtime_1.jsx)(material_1.Box, { sx: { position: 'absolute', right: 0, top: 0, p: 0.5 }, children: (0, jsx_runtime_1.jsx)(material_1.Button, { onClick: (e) => { var _a; return (_a = props.onClose) === null || _a === void 0 ? void 0 : _a.call(props, e, 'backdropClick'); }, variant: "contained", disableElevation: true, sx: {
+                        bgcolor: (theme) => (0, material_1.alpha)(theme.palette.primary.light, 0.2),
+                        minWidth: 32,
+                        minHeight: 32,
+                        p: 0,
+                        fontSize: 22,
+                        color: 'primary.main',
+                        ':hover': {
+                            bgcolor: (theme) => (0, material_1.alpha)(theme.palette.primary.light, 0.3),
+                        },
+                    }, children: (0, jsx_runtime_1.jsx)(react_1.Icon, { icon: "tabler:x" }) }) }), (0, jsx_runtime_1.jsx)(material_1.DialogContent, { children: (0, jsx_runtime_1.jsxs)(material_1.Stack, { gap: 4, sx: { flexDirection: { md: 'row' } }, children: [(0, jsx_runtime_1.jsxs)(material_1.Stack, { sx: { flex: 3, width: { xs: '100%', md: 0 }, gap: 1 }, children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { component: "h5", sx: { fontSize: 24, fontWeight: 700, color: 'primary.main' }, children: t('photoWall.dialog.title') }), (0, jsx_runtime_1.jsx)(material_1.Box, { component: "img", src: url, alt: "", loading: "lazy", sx: {
+                                        display: 'block',
+                                        width: '100%',
+                                        borderRadius: 1,
+                                    } })] }), (0, jsx_runtime_1.jsxs)(material_1.Stack, { sx: { flex: 2, width: { xs: '100%', md: 0 }, gap: 1 }, children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { component: "h5", sx: { fontSize: 24, fontWeight: 700, color: 'primary.main' }, children: t('photoWall.dialog.prompt') }), (0, jsx_runtime_1.jsx)(material_1.Box, { sx: {
+                                        p: 2,
+                                        borderRadius: 1,
+                                        background: (theme) => `linear-gradient(to top, ${(0, material_1.alpha)(theme.palette.primary.light, 0.5)}, ${(0, material_1.alpha)(theme.palette.primary.light, 0.1)})`,
+                                    }, children: (0, jsx_runtime_1.jsx)(material_1.Box, { sx: {
+                                            backgroundColor: 'rgba(255,255,255,0.2)',
+                                            borderRadius: 1,
+                                            p: 1,
+                                            fontSize: 16,
+                                        }, children: parameters === null || parameters === void 0 ? void 0 : parameters.question }) }), (0, jsx_runtime_1.jsx)(material_1.Box, { children: (0, jsx_runtime_1.jsx)(ActionButton_1.ActionButton, { autoReset: true, size: "small", variant: "contained", placement: "right", tip: t('copyToClipboard'), title: t('copy'), titleSucceed: t('copied'), icon: "tabler:copy", iconSucceed: "tabler:copy-check-filled", onClick: () => {
+                                            window.navigator.clipboard.writeText(parameters === null || parameters === void 0 ? void 0 : parameters.question);
+                                        }, sx: {
+                                            borderRadius: theme.shape.borderRadius,
+                                        } }) })] })] }) })] })));
+}