@blocklet/pages-kit 0.2.299 → 0.2.301

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

@@ -16,7 +16,6 @@ import { useCallback } from 'react';
 import { FacebookIcon, FacebookShareButton, LinkedinIcon, LinkedinShareButton, RedditIcon, RedditShareButton, TelegramIcon, TelegramShareButton, WeiboIcon, WeiboShareButton, XIcon, TwitterShareButton as XShareButton, } from 'react-share';
 import { LocaleProvider, useLocaleContext } from '../../../locale';
 import { translations } from '../locales';
-import { mergeSx } from '../utils';
 import MenuButton from './MenuButton';
 const getFormattedUrl = (url) => {
     // remove page & sessionId query params
@@ -80,8 +79,14 @@ export function SocialShareMenu(_a) {
 }
 export function SocialShareButtons(_a) {
     var { url = getFormattedUrl(window.location.href), content, sx, itemSx, onClick, bgFill, iconFill } = _a, rest = __rest(_a, ["url", "content", "sx", "itemSx", "onClick", "bgFill", "iconFill"]);
-    const mergedSx = mergeSx({ display: 'flex', alignItems: 'center', gap: 0.5, lineHeight: 1 }, sx);
-    const mergedItemSx = mergeSx({ width: { xs: 24, sm: 28 }, height: { xs: 24, sm: 28 }, borderRadius: 1 }, itemSx);
+    const mergedSx = [
+        { display: 'flex', alignItems: 'center', gap: 0.5, lineHeight: 1 },
+        ...(Array.isArray(sx) ? sx : [sx]),
+    ];
+    const mergedItemSx = [
+        { width: { xs: 24, sm: 28 }, height: { xs: 24, sm: 28 }, borderRadius: 1 },
+        ...(Array.isArray(itemSx) ? itemSx : [itemSx]),
+    ];
     const iconProps = {
         bgStyle: { fill: bgFill || '#bbb' },
         iconFillColor: iconFill || '#fff',

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

@@ -96,27 +96,6 @@ export default function ThemeProvider({ children, template, transparentHeaderBg,
                         },
                     ],
                 },
-                MuiDialog: {
-                    variants: [
-                        {
-                            props: {},
-                            style: ({ theme }) => theme.unstable_sx({
-                                '.MuiDialogTitle-root': {
-                                    px: 2.5,
-                                    py: 2,
-                                },
-                                '.MuiDialogContent-root': {
-                                    px: 2.5,
-                                    py: 2,
-                                },
-                                '.MuiDialogActions-root': {
-                                    px: 2.5,
-                                    py: 2,
-                                },
-                            }),
-                        },
-                    ],
-                },
             },
         };
         const paletteTheme = createTheme({

package/lib/esm/builtin/async/ai-runtime/components/{common/UserInfo.js → UserInfo.js}

@@ -14,7 +14,7 @@ import DID from '@arcblock/ux/lib/DID';
 import { Box, Stack, Typography } from '@mui/material';
 import dayjs from 'dayjs';
 import { useMemo } from 'react';
-import { Avatar } from '../../../../arcblock/ux';
+import { Avatar } from '../../../arcblock/ux';
 export default function UserInfo(_a) {
     var { avatar, showDID, did, name, time, children, reverse } = _a, restProps = __rest(_a, ["avatar", "showDID", "did", "name", "time", "children", "reverse"]);
     return (_jsxs(Stack, Object.assign({ className: "user-info", alignItems: "center", direction: reverse ? 'row-reverse' : 'row', gap: 1.5 }, restProps, { children: [(avatar || did) && (_jsx(Box, { sx: {

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

@@ -1,2 +1,5 @@
 export const AI_STUDIO_DID = 'z8iZpog7mcgcgBZzTiXJCWESvmnRrQmnd3XBB';
 export const PAYMENT_KIT_DID = 'z2qaCNvKMv5GjouKdcDWexv6WqtHbpNPQDnAk';
+export const DEFAULT_PAGE_COMPONENT_ID = 'ctnxha29uu8cx4xv';
+export const DEFAULT_INPUT_COMPONENT_ID = '1wwtemqcdio6nqf0';
+export const DEFAULT_OUTPUT_COMPONENT_ID = 'q0ckknkxph4hfwas';

package/lib/esm/builtin/async/ai-runtime/{components/runtime/contexts → contexts}/CurrentAgent.js

@@ -1,9 +1,9 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import { parseIdentity, stringifyIdentity } from '@blocklet/ai-runtime/common/aid';
 import { RuntimeOutputVariable } from '@blocklet/ai-runtime/types';
 import { createContext, useContext, useMemo } from 'react';
-import { parseIdentity, stringifyIdentity } from '../../../utils';
 import { DEFAULT_INPUT_COMPONENT_ID, DEFAULT_OUTPUT_COMPONENT_ID } from '../constants';
-import { useAssistantState } from '../state/assistant';
+import { useAgentState } from '../state/agent';
 import { useRuntimeState } from '../state/runtime';
 const context = createContext(undefined);
 export default function CurrentAgentProvider({ agentId, children }) {
@@ -19,7 +19,7 @@ export function useCurrentAgent() {
     if (!current) {
         throw new Error('No such current agent state. You should use `useCurrentAgent` within the `CurrentAgentProvider`');
     }
-    const [agent] = useAssistantState({ aid: current.aid, working });
+    const [agent] = useAgentState({ aid: current.aid, working });
     const appearanceInput = useMemo(() => {
         var _a, _b, _c;
         return (_c = (_b = (_a = agent.outputVariables) === null || _a === void 0 ? void 0 : _a.find((i) => i.name === RuntimeOutputVariable.appearanceInput)) === null || _b === void 0 ? void 0 : _b.initialValue) !== null && _c !== void 0 ? _c : { componentId: DEFAULT_INPUT_COMPONENT_ID };

package/lib/esm/builtin/async/ai-runtime/contexts/Runtime.js

@@ -0,0 +1,26 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useContext, useMemo } from 'react';
+import { useSearchParams } from 'react-router-dom';
+import { CustomError } from '../error';
+const runtimeContext = createContext(undefined);
+export function useRuntimeContext() {
+    const context = useContext(runtimeContext);
+    if (!context) {
+        throw new Error('No such runtime context. You should use `useRuntimeContext` within the `RuntimeProvider`');
+    }
+    return context;
+}
+export default function RuntimeProvider({ aid, working, children, }) {
+    if (!aid)
+        throw new Error('Missing required props `aid`');
+    const value = useMemo(() => ({ aid, working }), [aid, working]);
+    return _jsx(runtimeContext.Provider, { value: value, children: children });
+}
+export function RuntimeProviderFromUrl({ children }) {
+    const [query] = useSearchParams();
+    const aid = query.get('aid');
+    const working = query.get('working') === 'true';
+    if (!aid)
+        throw new CustomError(404, 'Missing required query parameters `aid`');
+    return (_jsx(RuntimeProvider, { aid: aid, working: working, children: children }));
+}

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

@@ -1,58 +1,13 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Stack } from '@mui/material';
-import { Suspense, useCallback, useEffect, useId, useState } from 'react';
-import { ErrorBoundary } from 'react-error-boundary';
-import { Toast } from '../../arcblock/ux';
-import { ChatBot as ChatBotWrapper } from './components/common';
-import RuntimeChat from './components/runtime-chat';
-import RuntimeForm from './components/runtime-form';
-import RuntimeProvider from './components/RuntimeProvider';
-import ScrollView from './components/ScrollView';
-import CheckSession from './components/session/CheckSession';
-import { useSetHeader } from './hooks/header';
-import { useCurrentPage } from './hooks/navigate';
-import { useAssistantState } from './state/assistant';
-export * from './components/runtime/contexts/CurrentAgent';
-export * from './components/runtime/contexts/CurrentMessage';
-export * from './components/runtime/state/runtime';
-export * from './components/runtime/state/session';
-export { default as Runtime } from './components/runtime';
-export { default as SimplePage } from './components/runtime/components/SimplePage';
-export { default as SimpleChat } from './components/runtime/components/SimpleChat';
-export { default as PhotoGallery } from './components/runtime/components/PhotoGallery';
-export { default as AutoForm } from './components/runtime/components/AutoForm';
-export { default as SimpleOutput } from './components/runtime/components/SimpleOutput';
-export { default as ChatOutput } from './components/runtime/components/ChatOutput';
-export { default as PhotoGalleryItem } from './components/runtime/components/PhotoGalleryItem';
-export default function App(props) {
-    const cacheId = useId();
-    return (_jsx(RuntimeProvider, { children: _jsx(AIRuntime, Object.assign({}, props, { cacheId: cacheId })) }));
-}
-export function AIRuntime({ cacheId }) {
-    var _a;
-    const page = useCurrentPage();
-    const { assistantId } = page;
-    const [assistant] = useAssistantState({ assistantId });
-    useSetHeader({ assistant, assistantId });
-    return (_jsx(CheckSession, { cacheId: cacheId, page: page, children: _jsx(ScrollView, { scroller: "window", initialScrollBehavior: "auto", children: _jsx(Stack, { flexGrow: 1, height: "100%", className: "ai-runtime-root", children: ((_a = assistant.release) === null || _a === void 0 ? void 0 : _a.template) === 'form' ? _jsx(RuntimeForm, { page: page }) : _jsx(RuntimeChat, { page: page }) }) }) }));
-}
-export function ChatBot(props) {
-    if (!props.assistantId)
-        throw new Error('Missing required parameter assistantId');
-    const navigate = useCallback((page) => {
-        setPage((state) => (Object.assign(Object.assign({}, state), page)));
-    }, []);
-    const [page, setPage] = useState({
-        page: 'assistant',
-        assistantId: props.assistantId,
-        navigate,
-    });
-    const cacheId = useId();
-    return (_jsx(RuntimeProvider, { children: _jsx(ErrorBoundary, { FallbackComponent: ChatBotErrorView, children: _jsx(Suspense, { children: _jsx(ChatBotWrapper, Object.assign({}, props, { children: _jsx(CheckSession, { cacheId: cacheId, autoCreateSession: true, page: page, children: _jsx(RuntimeChat, { page: page }) }) })) }) }) }));
-}
-function ChatBotErrorView({ error }) {
-    useEffect(() => {
-        Toast.error(error.message);
-    }, [error]);
-    return null;
-}
+export * from './contexts/CurrentAgent';
+export * from './contexts/CurrentMessage';
+export * from './state/runtime';
+export * from './state/session';
+export { default as Runtime } from './runtime/Runtime';
+export { default as ChatBotButton } from './runtime/ChatBotButton';
+export { default as SimplePage } from './runtime-components/SimplePage';
+export { default as SimpleChat } from './runtime-components/SimpleChat';
+export { default as PhotoGallery } from './runtime-components/PhotoGallery';
+export { default as AutoForm } from './runtime-components/AutoForm';
+export { default as SimpleOutput } from './runtime-components/SimpleOutput';
+export { default as ChatOutput } from './runtime-components/ChatOutput';
+export { default as PhotoGalleryItem } from './runtime-components/PhotoGalleryItem';

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

@@ -0,0 +1,66 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Icon } from '@iconify/react';
+import { ArrowBackIosNewRounded } from '@mui/icons-material';
+import { Box, Button, CircularProgress, ClickAwayListener, Dialog, DialogContent, DialogTitle, Fab, IconButton, Popper, Stack, Typography, useMediaQuery, useTheme, } from '@mui/material';
+import { Suspense, useEffect, useRef, useState } from 'react';
+import CustomComponentRenderer from '../../../../../components/CustomComponentRenderer';
+import { Avatar } from '../../../../arcblock/ux';
+import RuntimeCommonProvider from '../../components/RuntimeCommonProvider';
+import ScrollView from '../../components/ScrollView';
+import { DEFAULT_PAGE_COMPONENT_ID } from '../../constants';
+import RuntimeProvider from '../../contexts/Runtime';
+import { useRuntimeState } from '../../state/runtime';
+export default function ChatBotButton({ aid, working }) {
+    return (_jsx(RuntimeProvider, { aid: aid, working: working, children: _jsx(RuntimeCommonProvider, { children: _jsx(ChatBotContent, {}) }) }));
+}
+function ChatBotContent() {
+    var _a, _b, _c;
+    const anchorEl = useRef(null);
+    const { appearancePage, sessionState } = useRuntimeState();
+    const [open, setOpen] = useState(false);
+    useEffect(() => {
+        sessionState.load();
+    }, []);
+    const componentId = (_a = appearancePage === null || appearancePage === void 0 ? void 0 : appearancePage.componentId) !== null && _a !== void 0 ? _a : DEFAULT_PAGE_COMPONENT_ID;
+    return (_jsxs(Box, { sx: { position: 'fixed', bottom: 32, right: 16, zIndex: 'fab' }, children: [_jsx(Fab, { sx: { width: 44, height: 44, boxShadow: open ? 0 : undefined }, onClick: () => setOpen(true), children: _jsx(Avatar, { size: 44, did: (_b = globalThis.blocklet) === null || _b === void 0 ? void 0 : _b.appId, variant: "circle", shape: "circle", src: (_c = appearancePage === null || appearancePage === void 0 ? void 0 : appearancePage.logo) === null || _c === void 0 ? void 0 : _c.url }) }), _jsx(Stack, { width: "100%", ref: anchorEl }), anchorEl.current && (_jsx(ResponsiveChatBotContainer, { anchorEl: anchorEl.current, open: open, onClose: () => setOpen(false), children: _jsx(ScrollView, { initialScrollBehavior: "auto", component: Stack, sx: {
+                        overscrollBehavior: 'contain',
+                        height: '100%',
+                        width: '100%',
+                        overflow: 'auto',
+                        '.aigne-layout': {
+                            px: 2,
+                        },
+                    }, children: _jsx(Suspense, { fallback: _jsx(Stack, { flexGrow: 1, alignItems: "center", justifyContent: "center", children: _jsx(CircularProgress, { size: 24 }) }), children: _jsx(CustomComponentRenderer, { componentId: componentId, properties: appearancePage === null || appearancePage === void 0 ? void 0 : appearancePage.componentProps, props: { scrollViewProps: { disabled: true } } }) }) }) }))] }));
+}
+function ResponsiveChatBotContainer({ open, anchorEl, children, onClose, }) {
+    const theme = useTheme();
+    const isMobile = useMediaQuery(theme.breakpoints.down('sm'));
+    const { agent, appearancePage } = useRuntimeState();
+    const title = (appearancePage === null || appearancePage === void 0 ? void 0 : appearancePage.name) || agent.name;
+    if (isMobile) {
+        return (_jsx(ChatBotDialog, { title: title, open: open, onClose: onClose, children: children }));
+    }
+    return (_jsx(ChatBotPopper, { anchorEl: anchorEl, title: title, open: open, onClose: onClose, children: children }));
+}
+function ChatBotPopper({ title, anchorEl, open, children, onClose, }) {
+    return (_jsx(Popper, { anchorEl: anchorEl, open: open, placement: "top-end", sx: {
+            zIndex: 'modal',
+            maxWidth: 500,
+            maxHeight: '80vh',
+            width: '100%',
+            height: '100%',
+        }, children: _jsx(ClickAwayListener, { onClickAway: (e) => {
+                e.preventDefault();
+                e.stopPropagation();
+                onClose === null || onClose === void 0 ? void 0 : onClose();
+            }, children: _jsxs(Stack, { sx: {
+                    height: '100%',
+                    boxShadow: 1,
+                    position: 'relative',
+                    background: 'white',
+                    borderRadius: 1,
+                }, children: [_jsxs(Stack, { direction: "row", alignItems: "center", justifyContent: "space-between", borderBottom: 1, borderColor: "divider", p: 2, gap: 2, children: [_jsx(Typography, { variant: "h6", noWrap: true, children: title }), _jsx(Button, { sx: { minWidth: 28, minHeight: 28, p: 0 }, onClick: onClose, children: _jsx(Icon, { icon: "tabler:x", fontSize: 24, color: "rgba(75, 85, 99, 1)" }) })] }), children] }) }) }));
+}
+function ChatBotDialog({ title, open, children, onClose, }) {
+    return (_jsxs(Dialog, { open: open, onClose: onClose, fullScreen: true, children: [_jsx(DialogTitle, { sx: { pl: 0 }, children: _jsxs(Stack, { direction: "row", alignItems: "center", gap: 2, children: [_jsx(IconButton, { size: "small", onClick: onClose, children: _jsx(ArrowBackIosNewRounded, { fontSize: "inherit" }) }), _jsx(Typography, { variant: "h6", noWrap: true, children: title })] }) }), _jsx(DialogContent, { sx: { p: 0 }, dividers: true, children: children })] }));
+}

package/lib/esm/builtin/async/ai-runtime/{components/runtime → runtime/Runtime}/index.js

@@ -6,16 +6,20 @@ import CustomComponentRenderer from '../../../../../components/CustomComponentRe
 import { Avatar, DID } from '../../../../arcblock/ux';
 import { useLocaleContext } from '../../../../locale';
 import { useHeaderState } from '../../../../page/header';
-import RuntimeProvider, { RuntimeLocaleProvider } from '../RuntimeProvider';
-import SocialShare from '../SocialShare';
-import { DEFAULT_PAGE_COMPONENT_ID } from './constants';
-import { useRuntimeState } from './state/runtime';
+import RuntimeCommonProvider, { RuntimeLocaleProvider } from '../../components/RuntimeCommonProvider';
+import SocialShare from '../../components/SocialShare';
+import { DEFAULT_PAGE_COMPONENT_ID } from '../../constants';
+import { RuntimeProviderFromUrl } from '../../contexts/Runtime';
+import { useRuntimeState } from '../../state/runtime';
 const logoSize = 44;
 function AgentCreatedBy({ agent }) {
     const { t } = useLocaleContext();
     return (_jsxs(_Fragment, { children: [t('by'), " ", _jsx(Box, { component: DID, did: agent.createdBy, copyable: false, responsive: true })] }));
 }
 export default function Runtime() {
+    return (_jsx(RuntimeProviderFromUrl, { children: _jsx(RuntimeView, {}) }));
+}
+function RuntimeView() {
     var _a;
     const { agent, appearancePage, sessionState } = useRuntimeState();
     const theme = useTheme();
@@ -62,5 +66,5 @@ export default function Runtime() {
         sessionState.load();
     }, []);
     const componentId = (_a = appearancePage === null || appearancePage === void 0 ? void 0 : appearancePage.componentId) !== null && _a !== void 0 ? _a : DEFAULT_PAGE_COMPONENT_ID;
-    return (_jsxs(RuntimeProvider, { children: [appearancePage && (_jsxs(Helmet, { children: [appearancePage.name && _jsx("title", { children: appearancePage.name }), appearancePage.description && _jsx("meta", { name: "description", content: appearancePage.description })] })), _jsx(CustomComponentRenderer, { componentId: componentId, properties: appearancePage === null || appearancePage === void 0 ? void 0 : appearancePage.componentProps })] }));
+    return (_jsxs(RuntimeCommonProvider, { children: [appearancePage && (_jsxs(Helmet, { children: [appearancePage.name && _jsx("title", { children: appearancePage.name }), appearancePage.description && _jsx("meta", { name: "description", content: appearancePage.description })] })), _jsx(CustomComponentRenderer, { componentId: componentId, properties: appearancePage === null || appearancePage === void 0 ? void 0 : appearancePage.componentProps })] }));
 }

package/lib/esm/builtin/async/ai-runtime/{components/runtime/components → runtime-components}/AutoForm/index.js

@@ -14,9 +14,9 @@ import isEmpty from 'lodash/isEmpty';
 import omit from 'lodash/omit';
 import { useEffect, useMemo, useState } from 'react';
 import { Controller, useForm } from 'react-hook-form';
-import { useLocaleContext } from '../../../../../../locale';
-import LoadingButton from '../../../LoadingButton';
-import ParameterField from '../../../parameters';
+import { useLocaleContext } from '../../../../locale';
+import AgentInputField from '../../components/AgentInputField';
+import LoadingButton from '../../components/LoadingButton';
 import { useCurrentAgent } from '../../contexts/CurrentAgent';
 import { useRuntimeState } from '../../state/runtime';
 export const SUPPORTED_PARAMETER_TYPES = ['string', 'number', 'select', 'language'];
@@ -67,7 +67,7 @@ export default function AutoForm({ submitText, inlineLabel, autoFillLastForm = t
                                     : undefined,
                             }, render: ({ field, fieldState }) => {
                                 var _a;
-                                return (_jsxs(Stack, { className: "form-item", children: [parameter.label && _jsx(FormLabel, { children: parameter.label }), _jsx(ParameterField, { 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
+                                return (_jsxs(Stack, { className: "form-item", children: [parameter.label && _jsx(FormLabel, { children: parameter.label }), _jsx(AgentInputField, { 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: (_jsx(InputAdornment, { position: "end", sx: { py: 3, mr: -0.75 }, children: _jsx(LoadingButton, { type: "submit", variant: "contained", loading: sessionState.running, sx: { borderRadius: 100 }, children: submitText }) })),
                                                 }

package/lib/esm/builtin/async/ai-runtime/{components/message → runtime-components/ChatOutput}/MessageActions.js

@@ -12,8 +12,8 @@ var __rest = (this && this.__rest) || function (s, e) {
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Stack } from '@mui/material';
 import { useLocaleContext } from '../../../../locale';
-import { ActionButton } from '../ActionButton';
-import { SocialShareMenu } from '../SocialShare';
+import ActionButton from '../../components/ActionButton';
+import { SocialShareMenu } from '../../components/SocialShare';
 export default function MessageActions(_a) {
     var { content } = _a, props = __rest(_a, ["content"]);
     const { t } = useLocaleContext();

package/lib/esm/builtin/async/ai-runtime/{components/runtime/components → runtime-components}/ChatOutput/MessageErrorView.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Alert, Box } from '@mui/material';
-import { useLocaleContext } from '../../../../../../locale';
-import MarkdownRenderer from '../../../MarkdownRenderer';
+import { useLocaleContext } from '../../../../locale';
+import MarkdownRenderer from '../../components/MarkdownRenderer';
 export default function MessageErrorView({ error }) {
     const { t } = useLocaleContext();
     if (!error)

package/lib/esm/builtin/async/ai-runtime/{components/runtime/components → runtime-components}/ChatOutput/MessageItemView.js

@@ -16,13 +16,13 @@ import { Box, Skeleton, Stack, Tooltip, Typography, styled, useMediaQuery, useTh
 import dayjs from 'dayjs';
 import isEmpty from 'lodash/isEmpty';
 import React, { memo, useMemo, useState } from 'react';
-import { Avatar } from '../../../../../../arcblock/ux';
-import { useSessionContext } from '../../../../../../session';
-import { MessageMetadataRenderer } from '../../../common';
-import MarkdownRenderer from '../../../MarkdownRenderer';
-import MessageActions from '../../../message/MessageActions';
+import { Avatar } from '../../../../arcblock/ux';
+import { useSessionContext } from '../../../../session';
+import MarkdownRenderer from '../../components/MarkdownRenderer';
 import { useRuntimeState } from '../../state/runtime';
+import MessageActions from './MessageActions';
 import MessageErrorView from './MessageErrorView';
+import MessageMetadataRenderer from './MessageMetadataRenderer';
 const MessageItemView = memo((_a) => {
     var _b;
     var { message, hideAvatar } = _a, props = __rest(_a, ["message", "hideAvatar"]);

package/lib/esm/builtin/async/ai-runtime/{components/common → runtime-components/ChatOutput}/MessageMetadataRenderer.js

@@ -3,7 +3,7 @@ import ImagePreview from '@blocklet/ai-kit/components/image-preview';
 import { RuntimeOutputVariable } from '@blocklet/ai-runtime/types';
 import { Stack } from '@mui/material';
 import { useMemo } from 'react';
-import ReferenceLinks from '../message/ReferenceLinks';
+import ReferenceLinks from './ReferenceLinks';
 export default function MessageMetadataRenderer({ object }) {
     const referenceLinks = object[RuntimeOutputVariable.referenceLinks];
     const images = useMemo(() => {

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

@@ -0,0 +1,73 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Masonry } from '@mui/lab';
+import { Box, Skeleton, Stack, ThemeProvider, Typography, createTheme, useTheme } from '@mui/material';
+import { Suspense, useMemo, useRef } from 'react';
+import Balancer from 'react-wrap-balancer';
+import CustomComponentRenderer from '../../../../../components/CustomComponentRenderer';
+import { useLocaleContext } from '../../../../locale';
+import SimpleHeader from '../../components/Header/SimpleHeader';
+import LoadingButton from '../../components/LoadingButton';
+import CurrentAgentProvider, { useCurrentAgent } from '../../contexts/CurrentAgent';
+import CurrentMessageProvider from '../../contexts/CurrentMessage';
+import { useRuntimeState } from '../../state/runtime';
+import mapRight from '../../utils/map-right';
+export default function PhotoGallery({ resultTitle, primaryColor }) {
+    const { childAgentId } = useRuntimeState();
+    const inheritedTheme = useTheme();
+    const theme = useMemo(() => {
+        let { primary } = inheritedTheme.palette;
+        try {
+            if (primaryColor) {
+                primary = inheritedTheme.palette.augmentColor({ color: { main: primaryColor } });
+            }
+        }
+        catch (error) {
+            console.error('augment primary color error', { error });
+        }
+        return createTheme(inheritedTheme, {
+            palette: { primary },
+            shape: {
+                borderRadius: 8,
+            },
+        });
+    }, [inheritedTheme, primaryColor]);
+    return (_jsx(ThemeProvider, { theme: theme, children: _jsxs(Stack, { className: "aigne-layout aigne-photo-wall-layout", children: [_jsx(SimpleHeader, { TitleProps: { fontSize: 48 }, DescriptionProps: { fontSize: 20 }, maxWidth: "md", mx: "auto", width: "100%", px: { xs: 2, sm: 3 } }), _jsx(CurrentAgentProvider, { agentId: childAgentId, children: _jsx(AgentInputRender, { className: "aigne-inputs aigne-photo-wall-inputs", maxWidth: "md", mx: "auto", width: "100%", px: { xs: 2, sm: 3 } }) }), _jsx(OutputView, { resultTitle: resultTitle, className: "aigne-outputs aigne-photo-wall-outputs", gap: 2 })] }) }));
+}
+function AgentInputRender(_a) {
+    var props = __rest(_a, []);
+    const { appearanceInput } = useCurrentAgent();
+    if (!(appearanceInput === null || appearanceInput === void 0 ? void 0 : appearanceInput.componentId))
+        return null;
+    return (_jsx(Stack, Object.assign({}, props, { children: _jsx(CustomComponentRenderer, { componentId: appearanceInput.componentId, properties: appearanceInput.componentProps }) })));
+}
+function NoOutputs() {
+    return (_jsx(Stack, { mt: 10, children: _jsx(Typography, { color: "text.disabled", children: "You haven't generated any pictures yet." }) }));
+}
+function OutputView(_a) {
+    var _b, _c, _d, _e, _f, _g;
+    var { resultTitle } = _a, props = __rest(_a, ["resultTitle"]);
+    const { t } = useLocaleContext();
+    const { sessionState } = useRuntimeState();
+    const ref = useRef(null);
+    return (_jsxs(Stack, Object.assign({ width: "100%", alignItems: "center", px: { xs: 2, sm: 3 }, mt: { xs: 2, sm: 3 } }, props, { children: [resultTitle && (_jsx(Typography, { width: "100%", component: "h2", fontSize: 36, fontWeight: 700, textAlign: "center", children: _jsx(Balancer, { children: resultTitle }) })), sessionState.loaded && !((_b = sessionState.messages) === null || _b === void 0 ? void 0 : _b.length) && _jsx(NoOutputs, {}), _jsxs(Masonry, { ref: ref, columns: { xs: 2, sm: 3, md: 4, lg: 5 }, spacing: 1, sequential: true, sx: { width: '100%', overflow: 'hidden', '> *': { borderRadius: 1 } }, children: [sessionState.running && (_jsx(Skeleton, { variant: "rectangular", sx: {
+                            // FIXME: default using history height
+                            height: (_e = (_d = (_c = ref.current) === null || _c === void 0 ? void 0 : _c.querySelector('*')) === null || _d === void 0 ? void 0 : _d.clientHeight) !== null && _e !== void 0 ? _e : 200,
+                        } })), mapRight((_f = sessionState.messages) !== null && _f !== void 0 ? _f : [], (message) => (_jsx(CurrentAgentProvider, { agentId: message.assistantId, children: _jsx(CurrentMessageProvider, { message: message, children: _jsx(Suspense, { children: _jsx(OutputItemView, {}) }) }) }, message.taskId)))] }), _jsx(Box, { my: 4, children: !!((_g = sessionState.messages) === null || _g === void 0 ? void 0 : _g.length) && !sessionState.noMoreMessage && (_jsx(LoadingButton, { variant: "outlined", onClick: sessionState.loadMoreMessages, children: t('loadMore') })) })] })));
+}
+function OutputItemView() {
+    const { appearanceOutput } = useCurrentAgent();
+    if (!(appearanceOutput === null || appearanceOutput === void 0 ? void 0 : appearanceOutput.componentId))
+        return null;
+    return (_jsx(CustomComponentRenderer, { componentId: appearanceOutput.componentId, properties: appearanceOutput.componentProps }));
+}

package/lib/esm/builtin/async/ai-runtime/{components/runtime/components → runtime-components}/PhotoGalleryItem/index.js

@@ -12,13 +12,13 @@ var __rest = (this && this.__rest) || function (s, e) {
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { RuntimeOutputVariable } from '@blocklet/ai-runtime/types';
 import { Icon } from '@iconify/react';
-import { Box, Button, Dialog, DialogContent, DialogTitle, Stack, Typography, alpha } from '@mui/material';
+import { Alert, Box, Button, Dialog, DialogContent, DialogTitle, Stack, Typography, alpha, } from '@mui/material';
 import { useState } from 'react';
-import { RelativeTime } from '../../../../../../arcblock/ux';
-import { useLocaleContext } from '../../../../../../locale';
-import { useSessionContext } from '../../../../../../session';
-import { ActionButton } from '../../../ActionButton';
-import UserInfo from '../../../common/UserInfo';
+import { RelativeTime } from '../../../../arcblock/ux';
+import { useLocaleContext } from '../../../../locale';
+import { useSessionContext } from '../../../../session';
+import ActionButton from '../../components/ActionButton';
+import UserInfo from '../../components/UserInfo';
 import { useCurrentMessage } from '../../contexts/CurrentMessage';
 const getLineClamp = (line) => ({
     display: '-webkit-box',
@@ -35,9 +35,18 @@ export default function PhotoGalleryItem() {
     const [openDialog, setOpenDialog] = 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[RuntimeOutputVariable.images]) !== null && _a !== void 0 ? _a : []; });
+    if (!images.length && message.error) {
+        return (_jsx(Stack, { alignItems: "center", justifyContent: "center", sx: {
+                aspectRatio: 1,
+                bgcolor: 'grey.50',
+                borderRadius: 1,
+                overflow: 'hidden',
+                wordBreak: 'break-word',
+            }, children: _jsx(Alert, { severity: "error", sx: { bgcolor: 'transparent' }, children: message.error.message }) }));
+    }
     return images.map(({ url }, index) => {
         var _a;
-        return (_jsxs(Box, { className: "photo-wall-item", sx: {
+        return (_jsxs(Box, { sx: {
                 position: 'relative',
                 overflow: 'hidden',
                 cursor: 'pointer',
@@ -84,7 +93,7 @@ function PromptDialog(_a) {
     const { t } = useLocaleContext();
     const { session: authSession } = useSessionContext();
     const borderRadius = 1;
-    return (_jsxs(Dialog, Object.assign({ fullWidth: true, maxWidth: false, scroll: "paper", slotProps: {
+    return (_jsxs(Dialog, Object.assign({ fullWidth: true, maxWidth: "xl", scroll: "paper", slotProps: {
             backdrop: {
                 sx: {
                     bgcolor: 'rgba(255, 255, 255, 0.4)',

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

@@ -1,17 +1,30 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { RuntimeOutputVariable } from '@blocklet/ai-runtime/types';
-import { Box, Stack, ThemeProvider, Typography, createTheme, useTheme } from '@mui/material';
+import { Box, Stack, ThemeProvider, createTheme, useTheme } from '@mui/material';
 import { Suspense, useEffect, useMemo } from 'react';
-import Balancer, { Provider } from 'react-wrap-balancer';
-import CustomComponentRenderer from '../../../../../../../components/CustomComponentRenderer';
-import { useSessionContext } from '../../../../../../session';
-import { MessageSuggestedQuestions } from '../../../common';
-import UserInfo from '../../../common/UserInfo';
-import ScrollView, { useScrollToBottomModule } from '../../../ScrollView';
+import { useScrollToBottom } from 'react-scroll-to-bottom';
+import CustomComponentRenderer from '../../../../../components/CustomComponentRenderer';
+import { useSessionContext } from '../../../../session';
+import SimpleHeader from '../../components/Header/SimpleHeader';
+import SimpleLayout from '../../components/Layout/SimpleLayout';
+import ScrollView from '../../components/ScrollView';
+import UserInfo from '../../components/UserInfo';
 import CurrentAgentProvider, { useCurrentAgent } from '../../contexts/CurrentAgent';
 import CurrentMessageProvider, { useCurrentMessage } from '../../contexts/CurrentMessage';
 import { useRuntimeState } from '../../state/runtime';
-export default function SimpleChat({ primaryColor }) {
+import MessageSuggestedQuestions from '../ChatOutput/MessageSuggestedQuestions';
+export default function SimpleChat({ primaryColor, scrollViewProps = { scroll: 'window', initialScrollBehavior: 'auto' }, }) {
     const inheritedTheme = useTheme();
     const theme = useMemo(() => {
         let { primary } = inheritedTheme.palette;
@@ -30,30 +43,30 @@ export default function SimpleChat({ primaryColor }) {
             },
         });
     }, [inheritedTheme, primaryColor]);
-    return (_jsx(ThemeProvider, { theme: theme, children: _jsx(ScrollView, { scroller: "window", initialScrollBehavior: "auto", children: _jsx(SimpleChatView, {}) }) }));
+    return (_jsx(ScrollView, Object.assign({}, scrollViewProps, { children: _jsx(ThemeProvider, { theme: theme, children: _jsx(SimpleChatView, {}) }) })));
 }
 function SimpleChatView() {
-    const { agent, childAgentId, appearancePage, sessionState } = useRuntimeState();
-    const scrollToBottom = useScrollToBottomModule().useScrollToBottom();
+    const { childAgentId, sessionState } = useRuntimeState();
+    const scrollToBottom = useScrollToBottom();
     useEffect(() => {
         if (sessionState.running)
-            scrollToBottom();
+            scrollToBottom({ behavior: 'smooth' });
     }, [scrollToBottom, sessionState.running]);
-    const title = (appearancePage === null || appearancePage === void 0 ? void 0 : appearancePage.name) || agent.name;
-    const description = (appearancePage === null || appearancePage === void 0 ? void 0 : appearancePage.description) || agent.description;
-    return (_jsxs(Stack, { flexGrow: 1, maxWidth: "md", width: "100%", mx: "auto", px: { xs: 2, sm: 3 }, children: [_jsx(Stack, { gap: 2, mt: 8, mb: 4, children: _jsxs(Provider, { children: [title && (_jsx(Typography, { component: "h5", fontSize: 30, fontWeight: 700, textAlign: "center", children: _jsx(Balancer, { children: title }) })), description && (_jsx(Typography, { textAlign: "center", children: _jsx(Balancer, { children: description }) }))] }) }), _jsx(Stack, { children: _jsx(OutputView, {}) }), _jsx(Box, { flexGrow: 1, minHeight: 200 }), _jsx(Stack, { sx: { position: 'sticky', bottom: 0, py: 1, bgcolor: 'background.paper', zIndex: 10 }, children: _jsx(CurrentAgentProvider, { agentId: childAgentId, children: _jsx(AgentInputRender, {}) }) })] }));
+    return (_jsxs(SimpleLayout, { children: [_jsx(SimpleHeader, {}), _jsx(OutputView, { className: "aigne-outputs aigne-simple-chat-outputs", flexGrow: 1, pb: 10 }), _jsx(CurrentAgentProvider, { agentId: childAgentId, children: _jsx(AgentInputRender, { className: "aigne-inputs aigne-simple-chat-inputs", sx: { position: 'sticky', bottom: 0, pt: 1, pb: 2, bgcolor: 'background.paper', zIndex: 10 } }) })] }));
 }
-function AgentInputRender() {
+function AgentInputRender(_a) {
+    var props = __rest(_a, []);
     const { appearanceInput } = useCurrentAgent();
     if (!(appearanceInput === null || appearanceInput === void 0 ? void 0 : appearanceInput.componentId))
         return null;
-    return (_jsx(Stack, { children: _jsx(CustomComponentRenderer, { componentId: appearanceInput.componentId, properties: appearanceInput.componentProps }) }));
+    return (_jsx(Stack, Object.assign({}, props, { children: _jsx(CustomComponentRenderer, { componentId: appearanceInput.componentId, properties: appearanceInput.componentProps }) })));
 }
-function OutputView() {
-    var _a, _b;
+function OutputView(_a) {
+    var _b, _c;
+    var props = __rest(_a, []);
     const { sessionState } = useRuntimeState();
-    const lastMessage = (_a = sessionState.messages) === null || _a === void 0 ? void 0 : _a.slice(-1)[0];
-    return (_jsxs(Stack, { gap: 2, children: [(_b = sessionState.messages) === null || _b === void 0 ? void 0 : _b.map((message) => (_jsx(Stack, { children: _jsx(CurrentAgentProvider, { agentId: message.assistantId, children: _jsx(CurrentMessageProvider, { message: message, children: _jsx(Suspense, { children: _jsx(OutputItemView, {}) }) }) }) }))), lastMessage && (_jsx(CurrentAgentProvider, { agentId: lastMessage.assistantId, children: _jsx(CurrentMessageProvider, { message: lastMessage, children: _jsx(SuggestedQuestionsView, {}) }) }))] }));
+    const lastMessage = (_b = sessionState.messages) === null || _b === void 0 ? void 0 : _b.slice(-1)[0];
+    return (_jsxs(Stack, Object.assign({ gap: 2 }, props, { children: [(_c = sessionState.messages) === null || _c === void 0 ? void 0 : _c.map((message) => (_jsx(Stack, { children: _jsx(CurrentAgentProvider, { agentId: message.assistantId, children: _jsx(CurrentMessageProvider, { message: message, children: _jsx(Suspense, { children: _jsx(OutputItemView, {}) }) }) }) }))), lastMessage && (_jsx(CurrentAgentProvider, { agentId: lastMessage.assistantId, children: _jsx(CurrentMessageProvider, { message: lastMessage, children: _jsx(SuggestedQuestionsView, {}) }) }))] })));
 }
 function OutputItemView() {
     var _a, _b, _c, _d, _e;
@@ -63,7 +76,6 @@ function OutputItemView() {
     const { session: authSession } = useSessionContext();
     if (!(appearanceOutput === null || appearanceOutput === void 0 ? void 0 : appearanceOutput.componentId))
         return null;
-    // return <CustomComponentRenderer componentId={input.componentId} properties={input.componentProps} props={{hideAvatar: false}} />;
     return (_jsxs(Stack, { gap: 2, children: [_jsx(Box, { children: _jsx(UserInfo, { name: (_a = authSession.user) === null || _a === void 0 ? void 0 : _a.fullName, did: (_b = authSession.user) === null || _b === void 0 ? void 0 : _b.did, avatar: (_c = authSession.user) === null || _c === void 0 ? void 0 : _c.avatar, time: message.createdAt, reverse: true, alignItems: "flex-start", children: _jsx(CustomComponentRenderer, { componentId: appearanceOutput.componentId, properties: appearanceOutput.componentProps, props: {
                             renderType: 'parameters',
                         } }) }) }), _jsx(Box, { children: _jsx(UserInfo, { name: appearancePage === null || appearancePage === void 0 ? void 0 : appearancePage.name, did: (_d = globalThis.blocklet) === null || _d === void 0 ? void 0 : _d.appId, avatar: (_e = appearancePage === null || appearancePage === void 0 ? void 0 : appearancePage.logo) === null || _e === void 0 ? void 0 : _e.url, time: message.createdAt, alignItems: "flex-start", children: _jsx(CustomComponentRenderer, { componentId: appearanceOutput.componentId, properties: appearanceOutput.componentProps, props: {