@blocklet/pages-kit 0.2.291 → 0.2.293

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

@@ -1,41 +1,68 @@
+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 ImagePreview from '@blocklet/ai-kit/components/image-preview';
-import { Box, Skeleton, Stack, Tooltip, Typography, useMediaQuery, useTheme } from '@mui/material';
+import { cx } from '@emotion/css';
+import { Box, Skeleton, Stack, Tooltip, Typography, styled, useMediaQuery, useTheme } from '@mui/material';
 import dayjs from 'dayjs';
-import React, { useMemo } from 'react';
+import React, { useMemo, useState } from 'react';
 import { Avatar } from '../../../../arcblock/ux';
 import { useSessionContext } from '../../../../session';
+import { useAssistantState } from '../../state/assistant';
 import { MessageMetadataRenderer } from '../common';
 import MarkdownRenderer from '../MarkdownRenderer';
 import MessageActions from './MessageActions';
 import MessageErrorView from './MessageErrorView';
-export default function MessageItemView({ assistantId, assistant, message, hideAvatar, }) {
-    var _a, _b;
-    const showUserMessage = ((_a = assistant.release) === null || _a === void 0 ? void 0 : _a.template) !== 'form' && !!((_b = message.parameters) === null || _b === void 0 ? void 0 : _b.question);
-    const commonMessageSx = {
-        position: 'relative',
-        borderRadius: 1,
-        py: 1,
-        px: 2,
-        mt: 0.5,
-        // without logo width
-        maxWidth: 'calc(100% - 40px)',
-    };
-    return (_jsxs(Stack, { className: "ai-chat-message-item", gap: 2.5, overflow: "hidden", 
-        // @ts-ignore
-        sx: {
-            '.message-question': Object.assign(Object.assign(Object.assign({}, commonMessageSx), (!hideAvatar
-                ? {
-                    borderTopRightRadius: '2px',
-                }
-                : {})), { borderTopRightRadius: !hideAvatar && '2px', backgroundColor: 'rgba(239, 246, 255, 1)' }),
-            '.message-response': Object.assign(Object.assign(Object.assign({}, commonMessageSx), (!hideAvatar
-                ? {
-                    borderTopLeftRadius: '2px',
-                }
-                : {})), { backgroundColor: 'rgba(229, 231, 235, 1)' }),
-        }, children: [showUserMessage && _jsx(UserMessage, { message: message }), _jsx(AgentMessage, { assistantId: assistantId, assistant: assistant, message: message, hideAvatar: hideAvatar })] }));
+export default function MessageItemView(_a) {
+    var _b, _c;
+    var { page, message, hideAvatar } = _a, props = __rest(_a, ["page", "message", "hideAvatar"]);
+    const [assistant] = useAssistantState(page);
+    const showUserMessage = ((_b = assistant.release) === null || _b === void 0 ? void 0 : _b.template) !== 'form' && !!((_c = message.parameters) === null || _c === void 0 ? void 0 : _c.question);
+    return (_jsxs(MessageItemContainer, Object.assign({}, props, { className: cx('ai-chat-message-item', hideAvatar && 'hide-avatar', props.className), children: [showUserMessage && _jsx(UserMessage, { message: message }), _jsx(AgentMessage, { page: page, message: message, hideAvatar: hideAvatar })] })));
 }
+const MessageItemContainer = styled(Stack) `
+  gap: 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 } = useSessionContext();
@@ -50,14 +77,15 @@ function UserMessage({ message }) {
                     alignItems: 'flex-end',
                 }, children: [_jsxs(MessageUserName, { children: [(_c = authSession.user) === null || _c === void 0 ? void 0 : _c.fullName, _jsx(MessageTime, { time: message.createdAt })] }), _jsx(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({ assistantId, assistant, message, hideAvatar, }) {
+function AgentMessage({ page, message, hideAvatar }) {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
+    const [assistant] = useAssistantState(page);
     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 = useTheme();
     const isMobile = useMediaQuery(theme.breakpoints.down('sm'));
     const isFormTemplate = ((_d = assistant.release) === null || _d === void 0 ? void 0 : _d.template) === 'form';
-    return (_jsxs(Stack, { className: "ai-chat-message-ai", direction: "row", gap: 1.5, children: [!hideAvatar && (_jsx(Box, { children: _jsx(Avatar, { size: 40, did: (_e = globalThis.blocklet) === null || _e === void 0 ? void 0 : _e.appId, variant: "circle", shape: "circle", src: (_f = assistant.release) === null || _f === void 0 ? void 0 : _f.logo }) })), _jsxs(Box, { flex: 1, overflow: "hidden", children: [!hideAvatar && (_jsxs(MessageUserName, { children: [((_g = assistant.release) === null || _g === void 0 ? void 0 : _g.title) || assistant.name, _jsx(MessageTime, { time: message.createdAt })] })), _jsxs(React.Suspense, { children: [showMainMessage ? (_jsx(Tooltip, Object.assign({}, (isFormTemplate && {
+    return (_jsxs(Stack, { className: "ai-chat-message-ai", direction: "row", gap: 1.5, children: [!hideAvatar && (_jsx(Box, { children: _jsx(Avatar, { size: 40, did: (_e = globalThis.blocklet) === null || _e === void 0 ? void 0 : _e.appId, variant: "circle", shape: "circle", src: (_f = assistant.release) === null || _f === void 0 ? void 0 : _f.logo }) })), _jsxs(Box, { flex: 1, width: 0, children: [!hideAvatar && (_jsxs(MessageUserName, { children: [((_g = assistant.release) === null || _g === void 0 ? void 0 : _g.title) || assistant.name, _jsx(MessageTime, { time: message.createdAt })] })), _jsxs(React.Suspense, { children: [showMainMessage ? (_jsx(Tooltip, Object.assign({}, (isFormTemplate && {
                                 open: true,
                             }), { placement: "right-start", PopperProps: {
                                     className: 'white-tooltip',
@@ -83,7 +111,13 @@ function AgentMessage({ assistantId, assistant, message, hideAvatar, }) {
                                         }), ((_l = message.result) === null || _l === void 0 ? void 0 : _l.content) && (_jsx(MarkdownRenderer, { className: isMessageLoading ? 'writing' : '', children: message.result.content }))] }) }))) : (isMessageLoading && (_jsx(Skeleton, { variant: "rectangular", height: 24 + 8 + 8, 
                                 // only response with loading
                                 className: "message-response" }))), !!((_o = (_m = message.result) === null || _m === void 0 ? void 0 : _m.objects) === null || _o === void 0 ? void 0 : _o.length) &&
-                                ((_q = (_p = message.result) === null || _p === void 0 ? void 0 : _p.objects) === null || _q === void 0 ? void 0 : _q.map((object) => (_jsx(MessageMetadataRenderer, { object: object.data }, object.taskId)))), message.error && _jsx(MessageErrorView, { assistantId: assistantId, assistant: assistant, error: message.error })] })] })] }));
+                                ((_q = (_p = message.result) === null || _p === void 0 ? void 0 : _p.objects) === null || _q === void 0 ? void 0 : _q.map((object) => (_jsx(MessageMetadataRenderer, { object: object.data }, object.taskId)))), message.error && _jsx(MessageErrorView, { page: page, error: message.error })] })] })] }));
+}
+export function MessageItemWrapper(_a) {
+    var _b, _c, _d;
+    var { hideAvatar, assistant, agentMessage } = _a, props = __rest(_a, ["hideAvatar", "assistant", "agentMessage"]);
+    const [time] = useState(() => new Date().toISOString());
+    return (_jsx(MessageItemContainer, Object.assign({}, props, { className: cx('ai-chat-message-item', hideAvatar && 'hide-avatar', props.className), children: agentMessage && (_jsxs(Stack, { className: "ai-chat-message-ai", direction: "row", gap: 1.5, children: [!hideAvatar && (_jsx(Box, { children: _jsx(Avatar, { size: 40, did: (_b = globalThis.blocklet) === null || _b === void 0 ? void 0 : _b.appId, variant: "circle", shape: "circle", src: (_c = assistant.release) === null || _c === void 0 ? void 0 : _c.logo }) })), _jsxs(Box, { flex: 1, width: 0, children: [!hideAvatar && (_jsxs(MessageUserName, { children: [((_d = assistant.release) === null || _d === void 0 ? void 0 : _d.title) || assistant.name, _jsx(MessageTime, { time: time })] })), agentMessage] })] })) })));
 }
 function MessageUserName({ children }) {
     return (_jsx(Typography, { component: "div", noWrap: true, sx: {

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

@@ -16,15 +16,16 @@ import { useAssistantState } from '../../state/assistant';
 import { useSessionState } from '../../state/session';
 import MessageItemView from './MessageItemView';
 export default function MessageListView(_a) {
-    var { assistantId, sessionId } = _a, props = __rest(_a, ["assistantId", "sessionId"]);
-    const [assistant] = useAssistantState({ assistantId });
-    const [session, { messages = [] }] = useSessionState({ sessionId, required: true });
+    var { page } = _a, props = __rest(_a, ["page"]);
+    const [assistant] = useAssistantState(page);
+    const [session, { messages = [] }] = useSessionState({ sessionId: page.sessionId, required: true });
     const opener = useMemo(() => {
         var _a;
         const { openerMessage } = (_a = assistant.release) !== null && _a !== void 0 ? _a : {};
         if (openerMessage) {
             return {
                 taskId: '',
+                assistantId: assistant.id,
                 sessionId: session.id,
                 createdAt: session.createdAt,
                 updatedAt: session.createdAt,
@@ -35,7 +36,7 @@ export default function MessageListView(_a) {
     }, [assistant.release]);
     if (!session)
         return null;
-    return (_jsxs(Stack, Object.assign({ gap: 2.5 }, props, { children: [opener && _jsx(MessageItemView, { assistantId: assistantId, assistant: assistant, message: opener }), messages.map((message) => {
-                return (_jsx(MessageItemView, { assistantId: assistantId, assistant: assistant, message: message }, message.taskId));
+    return (_jsxs(Stack, Object.assign({ gap: 2.5 }, props, { children: [opener && _jsx(MessageItemView, { page: page, message: opener }), messages.map((message) => {
+                return _jsx(MessageItemView, { page: page, message: message }, message.taskId);
             })] })));
 }

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

@@ -0,0 +1,37 @@
+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 } from "react/jsx-runtime";
+import { FormControlLabel, Radio, RadioGroup, alpha } from '@mui/material';
+import { forwardRef } from 'react';
+const RadioField = forwardRef((_a, ref) => {
+    var _b;
+    var { readOnly, parameter, onChange } = _a, props = __rest(_a, ["readOnly", "parameter", "onChange"]);
+    return (_jsx(RadioGroup, Object.assign({ ref: ref, row: true, onChange: (e) => onChange(e.target.value) }, props, { children: (_b = parameter === null || parameter === void 0 ? void 0 : parameter.options) === null || _b === void 0 ? void 0 : _b.map((option) => {
+            const checked = option.value === props.value;
+            return (_jsx(FormControlLabel, { label: option.label, disabled: readOnly, value: option.value, checked: checked, control: _jsx(Radio, {}), sx: {
+                    transition: 'all 0.3s linear',
+                    ml: 0,
+                    mr: 1,
+                    my: 0.5,
+                    py: 0.5,
+                    px: 2.5,
+                    border: 2,
+                    borderColor: (theme) => (checked ? theme.palette.primary.main : alpha(theme.palette.primary.main, 0.3)),
+                    borderRadius: 8,
+                    '.MuiRadio-root': {
+                        // hidden radio button
+                        display: 'none',
+                    },
+                } }, option.id));
+        }) })));
+});
+export default RadioField;

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

@@ -15,7 +15,7 @@ import { forwardRef } from 'react';
 const SelectField = forwardRef((_a, ref) => {
     var _b, _c, _d, _e;
     var { readOnly, parameter, onChange } = _a, props = __rest(_a, ["readOnly", "parameter", "onChange"]);
-    return (_jsx(TextField, Object.assign({ ref: ref, select: true, onChange: (e) => onChange(e.target.value) }, props, { InputProps: Object.assign(Object.assign({}, props.InputProps), { readOnly }), SelectProps: Object.assign(Object.assign({}, props.SelectProps), { MenuProps: Object.assign(Object.assign({}, (_b = props.SelectProps) === null || _b === void 0 ? void 0 : _b.MenuProps), { sx: Object.assign(Object.assign({}, (_d = (_c = props.SelectProps) === null || _c === void 0 ? void 0 : _c.MenuProps) === null || _d === void 0 ? void 0 : _d.sx), { '.MuiMenuItem-root': {
+    return (_jsx(TextField, Object.assign({ ref: ref, select: true, onChange: (e) => onChange(e.target.value) }, props, { InputProps: Object.assign(Object.assign({}, props.InputProps), { readOnly }), SelectProps: Object.assign(Object.assign({}, props.SelectProps), { MenuProps: Object.assign(Object.assign({ disableScrollLock: true }, (_b = props.SelectProps) === null || _b === void 0 ? void 0 : _b.MenuProps), { sx: Object.assign(Object.assign({}, (_d = (_c = props.SelectProps) === null || _c === void 0 ? void 0 : _c.MenuProps) === null || _d === void 0 ? void 0 : _d.sx), { '.MuiMenuItem-root': {
                         whiteSpace: 'pre-wrap',
                     } }) }) }), children: (_e = parameter === null || parameter === void 0 ? void 0 : parameter.options) === null || _e === void 0 ? void 0 : _e.map((option) => (_jsx(MenuItem, { value: option.value, children: option.label }, option.id))) })));
 });

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

@@ -12,9 +12,11 @@ var __rest = (this && this.__rest) || function (s, e) {
 import { jsx as _jsx } from "react/jsx-runtime";
 import LanguageField from './LanguageField';
 import NumberField from './NumberField';
+import RadioField from './RadioField';
 import SelectField from './SelectField';
 import StringField from './StringField';
 export default function ParameterField(_a) {
+    var _b;
     var { parameter } = _a, props = __rest(_a, ["parameter"]);
     if (parameter.type === 'source')
         return null;
@@ -24,7 +26,9 @@ export default function ParameterField(_a) {
     const Field = {
         number: NumberField,
         string: StringField,
-        select: SelectField,
+        select: parameter.type === 'select' && ((_b = parameter.options) === null || _b === void 0 ? void 0 : _b.length) && parameter.options.length <= 8
+            ? RadioField
+            : SelectField,
         language: LanguageField,
     }[parameter.type || 'string'] || StringField;
     return (_jsx(Field, Object.assign({ label: parameter === null || parameter === void 0 ? void 0 : parameter.label, helperText: parameter === null || parameter === void 0 ? void 0 : parameter.helper, placeholder: parameter === null || parameter === void 0 ? void 0 : parameter.placeholder }, { parameter }, { size: "small" }, props)));

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

@@ -0,0 +1,146 @@
+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());
+    });
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cx } from '@emotion/css';
+import { Box, FormLabel, InputAdornment, Stack, ThemeProvider, createTheme, formLabelClasses, outlinedInputClasses, styled, useTheme, } from '@mui/material';
+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 { useCurrentAgent } from '../../contexts/CurrentAgent';
+import { useRuntimeState } from '../../state/runtime';
+export const SUPPORTED_PARAMETER_TYPES = ['string', 'number', 'select', 'language'];
+export default function AutoForm({ submitText, inlineLabel, autoFillLastForm = true, submitInQuestionField, chatMode, }) {
+    const { t } = useLocaleContext();
+    const { aid, agent } = useCurrentAgent();
+    const { sessionState, execute } = useRuntimeState();
+    const parameters = useMemo(() => {
+        var _a;
+        return (_a = agent.parameters) === null || _a === void 0 ? void 0 : _a.filter((i) => !!i.key && 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 = useForm({ defaultValues: defaultForm });
+    useEffect(() => {
+        if (autoFillLastForm && !form.formState.isSubmitted && !form.formState.isSubmitting) {
+            form.reset(chatMode ? omit(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 (_jsx(ThemeProvider, { theme: theme, children: _jsxs(Form, { component: "form", className: 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 (_jsx(Box, { children: _jsx(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 (_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
+                                                ? {
+                                                    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 }) })),
+                                                }
+                                                : undefined })] }));
+                            } }) }, parameter.id));
+                }), !(submitInQuestionField && (parameters === null || parameters === void 0 ? void 0 : parameters.some((i) => i.key === 'question'))) && (_jsx(LoadingButton, { type: "submit", variant: "contained", loading: sessionState.running, sx: { height: 40 }, children: submitText || t('generate') }))] }) }));
+}
+function useInitialFormValues() {
+    var _a;
+    const [lastMessage, setLastMessage] = useState();
+    const { agent } = useCurrentAgent();
+    const { sessionState } = useRuntimeState();
+    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 useMemo(() => {
+        var _a, _b;
+        if (lastMessage) {
+            const lastParameters = lastMessage === null || lastMessage === void 0 ? void 0 : lastMessage.parameters;
+            if (!isEmpty(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 = useTheme();
+    return useMemo(() => {
+        const themeOptions = {
+            shape: {
+                borderRadius: 8,
+            },
+            components: {
+                MuiTextField: {
+                    styleOverrides: {
+                        root: ({ theme }) => theme.unstable_sx({
+                            [`.${outlinedInputClasses.root}`]: {
+                                [`.${outlinedInputClasses.notchedOutline}`]: {
+                                    borderWidth: 2,
+                                    borderColor: 'primary.light',
+                                },
+                                ':hover': {
+                                    [`.${outlinedInputClasses.notchedOutline}`]: {
+                                        borderColor: 'primary.main',
+                                    },
+                                },
+                            },
+                        }),
+                    },
+                },
+            },
+        };
+        return createTheme(theme, themeOptions);
+    }, [theme]);
+}
+const Form = styled(Stack)(({ theme }) => theme.unstable_sx({
+    gap: 2,
+    '.form-item': {
+        gap: 0.5,
+        [`.${formLabelClasses.root}`]: {
+            fontWeight: 500,
+            color: 'text.primary',
+        },
+    },
+    '&.label-position-start': {
+        '.form-item': {
+            display: 'flex',
+            flexDirection: 'row',
+            alignItems: 'center',
+            gap: 1,
+        },
+    },
+}));

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

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Alert, Box } from '@mui/material';
+import { useLocaleContext } from '../../../../../../locale';
+import MarkdownRenderer from '../../../MarkdownRenderer';
+export default function MessageErrorView({ error }) {
+    const { t } = useLocaleContext();
+    if (!error)
+        return null;
+    if (error.status === 401) {
+        return (_jsx(Box, { className: "ai-chat-message-error", children: _jsx(Box, { className: "message-response", children: _jsx(MarkdownRenderer, { children: t('requireLogin') }) }) }));
+    }
+    return (_jsx(Alert, { className: "ai-chat-message-error", severity: "error", sx: { mr: 5 }, children: error.message }));
+}

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

@@ -0,0 +1,149 @@
+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 ImagePreview from '@blocklet/ai-kit/components/image-preview';
+import { cx } from '@emotion/css';
+import { Box, Skeleton, Stack, Tooltip, Typography, styled, useMediaQuery, useTheme } from '@mui/material';
+import dayjs from 'dayjs';
+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 { useRuntimeState } from '../../state/runtime';
+import MessageErrorView from './MessageErrorView';
+const MessageItemView = 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 (_jsxs(MessageItemContainer, Object.assign({}, props, { className: cx('ai-chat-message-item', hideAvatar && 'hide-avatar', props.className), children: [showUserMessage && _jsx(UserMessage, { message: message }), _jsx(AgentMessage, { message: message, hideAvatar: hideAvatar })] })));
+});
+export default MessageItemView;
+const MessageItemContainer = styled(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 } = useSessionContext();
+    return (_jsxs(Stack, { className: "ai-chat-message-user", direction: "row", gap: 1.5, sx: {
+            display: 'flex',
+            flexDirection: 'row-reverse',
+            textAlign: 'right',
+            justifyContent: 'flex-end',
+        }, children: [_jsx(Box, { children: _jsx(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" }) }), _jsxs(Stack, { flex: 1, overflow: "hidden", sx: {
+                    display: 'flex',
+                    flexDirection: 'column',
+                    alignItems: 'flex-end',
+                }, children: [_jsxs(MessageUserName, { children: [(_c = authSession.user) === null || _c === void 0 ? void 0 : _c.fullName, _jsx(MessageTime, { time: message.createdAt })] }), _jsx(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 } = 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 = useTheme();
+    const isMobile = useMediaQuery(theme.breakpoints.down('sm'));
+    return (_jsxs(Stack, { className: "ai-chat-message-ai", direction: "row", gap: 1.5, children: [!hideAvatar && (_jsx(Box, { children: _jsx(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 }) })), _jsxs(Box, { flex: 1, width: 0, children: [!hideAvatar && (_jsxs(MessageUserName, { children: [appearancePage === null || appearancePage === void 0 ? void 0 : appearancePage.name, _jsx(MessageTime, { time: message.createdAt })] })), _jsxs(React.Suspense, { children: [showMainMessage ? (_jsx(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) && _jsx(MessageActions, { content: message.result.content }), children: _jsxs(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) ? (_jsx(MarkdownRenderer, { 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) ? (_jsx(ImagePreview, { 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) && (_jsx(MarkdownRenderer, { className: isMessageLoading ? 'writing' : '', children: message.result.content }))] }) })) : (isMessageLoading && (_jsx(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) => (_jsx(MessageMetadataRenderer, { object: object.data }, object.taskId))), message.error && _jsx(MessageErrorView, { error: message.error })] })] })] }));
+}
+export function MessageItemWrapper(_a) {
+    var _b, _c;
+    var { hideAvatar, agentMessage } = _a, props = __rest(_a, ["hideAvatar", "agentMessage"]);
+    const { appearancePage } = useRuntimeState();
+    const [time] = useState(() => new Date().toISOString());
+    return (_jsx(MessageItemContainer, Object.assign({}, props, { className: cx('ai-chat-message-item', hideAvatar && 'hide-avatar', props.className), children: agentMessage && (_jsxs(Stack, { className: "ai-chat-message-ai", direction: "row", gap: 1.5, children: [!hideAvatar && (_jsx(Box, { children: _jsx(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 }) })), _jsxs(Box, { flex: 1, width: 0, children: [!hideAvatar && (_jsxs(MessageUserName, { children: [appearancePage === null || appearancePage === void 0 ? void 0 : appearancePage.name, _jsx(MessageTime, { time: time })] })), agentMessage] })] })) })));
+}
+function MessageUserName({ children }) {
+    return (_jsx(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 = useMemo(() => {
+        const date = dayjs(time);
+        if (!date.isValid())
+            return undefined;
+        return date.isSame(dayjs(), 'date') ? date.format('HH:mm') : date.format('YYYY-MM-DD HH:mm');
+    }, [time]);
+    if (!t)
+        return null;
+    return (_jsx(Typography, { sx: {
+            fontSize: 12,
+            lineHeight: '24px',
+            color: 'text.secondary',
+        }, children: t }, "user-time"));
+}

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

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useCurrentMessage } from '../../contexts/CurrentMessage';
+import MessageItemView from './MessageItemView';
+export default function ChatOutput() {
+    const { message } = useCurrentMessage();
+    return _jsx(MessageItemView, { message: message });
+}