@blocklet/pages-kit 0.2.287 → 0.2.288

package/lib/cjs/builtin/async/ai-runtime/api/request.js

@@ -22,7 +22,15 @@ var __rest = (this && this.__rest) || function (s, e) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.request = exports.fetch = void 0;
 const js_sdk_1 = require("@blocklet/js-sdk");
-exports.fetch = (0, js_sdk_1.createFetch)();
+let isDEV = false;
+try {
+    // @ts-ignore
+    isDEV = import.meta.env.DEV;
+}
+catch (_a) {
+    // ignore
+}
+exports.fetch = (0, js_sdk_1.createFetch)({}, { lazy: isDEV, lazyTime: 1000 });
 function request(_a) {
     return __awaiter(this, void 0, void 0, function* () {
         var _b, _c, _d;

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

@@ -1,13 +1,4 @@
 "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 __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)
@@ -20,41 +11,14 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.globalLoadingState = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const material_1 = require("@mui/material");
-const zustand_1 = require("zustand");
-const immer_1 = require("zustand/middleware/immer");
+const loading_1 = require("../state/loading");
 function GlobalLoading(_a) {
     var props = __rest(_a, []);
-    const state = (0, exports.globalLoadingState)();
+    const state = (0, loading_1.globalLoadingState)();
     if (!state.loading)
         return null;
     return (0, jsx_runtime_1.jsx)(material_1.LinearProgress, Object.assign({}, props));
 }
 exports.default = GlobalLoading;
-exports.globalLoadingState = (0, zustand_1.create)()((0, immer_1.immer)((set, get) => ({
-    loading: false,
-    count: 0,
-    run: (fn) => __awaiter(void 0, void 0, void 0, function* () {
-        try {
-            get().start();
-            return (yield (typeof fn === 'function' ? fn() : fn));
-        }
-        finally {
-            get().end();
-        }
-    }),
-    start: () => {
-        set((state) => {
-            state.count += 1;
-            state.loading = true;
-        });
-    },
-    end: () => {
-        set((state) => {
-            state.count = Math.max(0, state.count - 1);
-            state.loading = state.count > 0;
-        });
-    },
-})));

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

@@ -23,17 +23,15 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
 const material_1 = require("@mui/material");
 const react_1 = require("react");
-const locale_1 = require("../../../locale");
 function LoadingListItemButton(_a) {
-    var props = __rest(_a, []);
-    const { t } = (0, locale_1.useLocaleContext)();
+    var { children, confirmation } = _a, props = __rest(_a, ["children", "confirmation"]);
     const [clicked, setClicked] = (0, react_1.useState)(false);
     const [loading, setLoading] = (0, react_1.useState)(false);
     const handleClick = (e) => __awaiter(this, void 0, void 0, function* () {
         var _b;
         if (loading)
             return;
-        if (!clicked) {
+        if (!clicked && confirmation) {
             setClicked(true);
             return;
         }
@@ -46,6 +44,6 @@ function LoadingListItemButton(_a) {
             setLoading(false);
         }
     });
-    return ((0, jsx_runtime_1.jsxs)(material_1.ListItemButton, Object.assign({}, props, { onClick: handleClick, sx: Object.assign(Object.assign({}, props.sx), { minWidth: 120, display: 'flex', justifyContent: 'space-between', gap: 1 }), children: [clicked ? t('confirmDelete') : t('delete'), loading && (0, jsx_runtime_1.jsx)(material_1.CircularProgress, { size: 14 })] })));
+    return ((0, jsx_runtime_1.jsxs)(material_1.ListItemButton, Object.assign({}, props, { onClick: handleClick, sx: Object.assign(Object.assign({}, props.sx), { display: 'flex', alignItems: 'center', gap: 1 }), children: [(clicked && confirmation) || children, (0, jsx_runtime_1.jsx)(material_1.Stack, { direction: "row", alignItems: "center", justifyContent: "flex-end", sx: { width: 18 }, children: loading && (0, jsx_runtime_1.jsx)(material_1.CircularProgress, { size: 14 }) })] })));
 }
 exports.default = LoadingListItemButton;

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

@@ -4,13 +4,19 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
+const material_1 = require("@mui/material");
 const react_1 = __importDefault(require("react"));
+const react_error_boundary_1 = require("react-error-boundary");
+const ux_1 = require("../../../arcblock/ux");
 const locale_1 = require("../../../locale");
 const locales_1 = require("../locales");
 const GlobalLoading_1 = __importDefault(require("./GlobalLoading"));
 const ThemeProvider_1 = __importDefault(require("./ThemeProvider"));
 function RuntimeProvider({ children }) {
     const { locale } = (0, locale_1.useLocaleContext)();
-    return ((0, jsx_runtime_1.jsx)(locale_1.LocaleProvider, { translations: locales_1.translations, locale: locale, fallbackLocale: "en", children: (0, jsx_runtime_1.jsx)(ThemeProvider_1.default, { children: (0, jsx_runtime_1.jsxs)(react_1.default.Suspense, { children: [(0, jsx_runtime_1.jsx)(GlobalLoading_1.default, { sx: { position: 'fixed', left: 0, top: 0, width: '100%', zIndex: 'snackbar' } }), children] }) }) }));
+    return ((0, jsx_runtime_1.jsx)(locale_1.LocaleProvider, { translations: locales_1.translations, locale: locale, fallbackLocale: "en", children: (0, jsx_runtime_1.jsx)(ThemeProvider_1.default, { children: (0, jsx_runtime_1.jsxs)(react_error_boundary_1.ErrorBoundary, { FallbackComponent: ErrorRender, children: [(0, jsx_runtime_1.jsx)(GlobalLoading_1.default, { sx: { position: 'fixed', left: 0, top: 0, width: '100%', zIndex: 'snackbar' } }), (0, jsx_runtime_1.jsx)(react_1.default.Suspense, { fallback: (0, jsx_runtime_1.jsx)(material_1.Stack, { flexGrow: 1, alignItems: "center", justifyContent: "center", children: (0, jsx_runtime_1.jsx)(material_1.CircularProgress, { size: 24 }) }), children: children })] }) }) }));
 }
 exports.default = RuntimeProvider;
+function ErrorRender({ error }) {
+    return ((0, jsx_runtime_1.jsx)(ux_1.Result, Object.assign({ status: error.status || 'error' }, (Number(error.status) === 404 ? { message: error.message } : {}), { sx: { bgcolor: 'transparent', mt: '20%' } })));
+}

package/lib/cjs/builtin/async/ai-runtime/components/common/ChatBot.js

@@ -21,7 +21,7 @@ function ChatBot({ assistantId, size, bottom, right, children, popperWidth, popp
     const isMobile = (0, material_1.useMediaQuery)(theme.breakpoints.down('sm'));
     const chatViewSizeSx = isMobile
         ? { width: '100vw', height: 'calc(100vh - 72px)' }
-        : { width: '40vw', height: '70vh' };
+        : { width: '40vw', height: '80vh' };
     if (popperWidth) {
         chatViewSizeSx.width = popperWidth;
     }
@@ -48,7 +48,7 @@ function ChatBot({ assistantId, size, bottom, right, children, popperWidth, popp
                     setOpenPopper(false);
                 }, children: children }));
         }
-        return ((0, jsx_runtime_1.jsx)(material_1.Popper, { anchorEl: anchorEl.current, open: openPopper, placement: "top-end", sx: Object.assign({ zIndex: 1200, minWidth: { sm: 400 } }, chatViewSizeSx), children: (0, jsx_runtime_1.jsx)(material_1.ClickAwayListener, { onClickAway: (e) => {
+        return ((0, jsx_runtime_1.jsx)(material_1.Popper, { anchorEl: anchorEl.current, open: openPopper, placement: "top-end", sx: Object.assign({ zIndex: 1200, minWidth: { sm: 500 }, maxWidth: 600 }, chatViewSizeSx), children: (0, jsx_runtime_1.jsx)(material_1.ClickAwayListener, { onClickAway: (e) => {
                     e.preventDefault();
                     e.stopPropagation();
                     setOpenPopper(false);
@@ -74,24 +74,19 @@ function ChatBot({ assistantId, size, bottom, right, children, popperWidth, popp
     }, [isMobile, openPopper]);
     if (!assistant)
         return null;
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(material_1.Box, { sx: {
+    return ((0, jsx_runtime_1.jsxs)(material_1.Box, { sx: { position: 'fixed', bottom: bottom || 24, right: right || 24 }, children: [(0, jsx_runtime_1.jsxs)(material_1.Box, { sx: {
                     display: 'inline-flex',
                     flexDirection: 'column',
                     justifyContent: 'center',
                     alignItems: 'center',
-                    position: 'fixed',
-                    bottom: bottom || 24,
-                    right: right || 24,
                     boxShadow: '0px 2px 4px 0px rgba(3, 7, 18, 0.04)',
-                    cursor: 'pointer !important',
+                    cursor: 'pointer',
                     zIndex: 1000,
                     transition: 'transform 0.3s',
                     ':hover': {
                         transform: 'scale(1.05)',
                     },
-                }, onClick: () => {
-                    setOpenPopper(!openPopper);
-                }, children: [(0, jsx_runtime_1.jsx)(ux_1.Avatar, { className: "logo", size: size || 48, 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 }), (0, jsx_runtime_1.jsx)(material_1.Box, { width: "100%", ref: anchorEl })] }), anchorEl.current && ((0, jsx_runtime_1.jsx)(WrapperComponent, { children: (0, jsx_runtime_1.jsx)(ScrollView_1.default, { className: "ai-bot-scroll-container", initialScrollBehavior: "auto", component: material_1.Box, sx: {
+                }, onClick: () => setOpenPopper(!openPopper), children: [(0, jsx_runtime_1.jsx)(ux_1.Avatar, { className: "logo", size: size || 48, 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 }), (0, jsx_runtime_1.jsx)(material_1.Box, { width: "100%", ref: anchorEl })] }), anchorEl.current && ((0, jsx_runtime_1.jsx)(WrapperComponent, { children: (0, jsx_runtime_1.jsx)(ScrollView_1.default, { className: "ai-bot-scroll-container", initialScrollBehavior: "auto", component: material_1.Box, sx: {
                         overscrollBehavior: 'contain',
                         height: isMobile ? '100%' : `calc(${chatViewSizeSx.height} - 70px)`,
                         width: '100%',
@@ -100,6 +95,10 @@ function ChatBot({ assistantId, size, bottom, right, children, popperWidth, popp
                         '.ai-chat-header': {
                             pt: 4,
                         },
-                    }, children: children }) }))] }));
+                        '.ai-runtime-form-container': {
+                            borderBottomLeftRadius: 8,
+                            borderBottomRightRadius: 8,
+                        },
+                    }, children: (0, jsx_runtime_1.jsx)(react_2.Suspense, { fallback: (0, jsx_runtime_1.jsx)(material_1.Stack, { flexGrow: 1, alignItems: "center", justifyContent: "center", children: (0, jsx_runtime_1.jsx)(material_1.CircularProgress, { size: 24 }) }), children: children }) }) }))] }));
 }
 exports.default = ChatBot;

package/lib/cjs/builtin/async/ai-runtime/components/common/MessageMetadataRenderer.js

@@ -16,6 +16,6 @@ function MessageMetadataRenderer({ object }) {
         const images = (Array.isArray(list) ? list.map((i) => ({ src: i.url })) : []).filter((i) => typeof i.src === 'string');
         return images.length ? images : undefined;
     }, [object]);
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [Array.isArray(referenceLinks) && referenceLinks.length ? (0, jsx_runtime_1.jsx)(ReferenceLinks_1.default, { links: referenceLinks }) : undefined, images && ((0, jsx_runtime_1.jsxs)(material_1.Stack, { gap: 1, children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "subtitle2", children: "Images:" }), (0, jsx_runtime_1.jsx)(image_preview_1.default, { dataSource: images, itemWidth: 100 })] }))] }));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [Array.isArray(referenceLinks) && referenceLinks.length ? (0, jsx_runtime_1.jsx)(ReferenceLinks_1.default, { links: referenceLinks }) : undefined, images && ((0, jsx_runtime_1.jsx)(material_1.Stack, { gap: 1, children: (0, jsx_runtime_1.jsx)(image_preview_1.default, { dataSource: images, itemWidth: 100 }) }))] }));
 }
 exports.default = MessageMetadataRenderer;

package/lib/cjs/builtin/async/ai-runtime/components/form/ParameterForm.js

@@ -1,4 +1,27 @@
 "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 __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) {
@@ -13,36 +36,54 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("@iconify/react");
 const material_1 = require("@mui/material");
+const isEmpty_1 = __importDefault(require("lodash/isEmpty"));
 const omit_1 = __importDefault(require("lodash/omit"));
-const react_1 = require("react");
+const react_2 = require("react");
 const react_hook_form_1 = require("react-hook-form");
 const locale_1 = require("../../../../locale");
 const LoadingButton_1 = __importDefault(require("../LoadingButton"));
-const ParameterFormFields_1 = __importDefault(require("./ParameterFormFields"));
+const ParameterFormFields_1 = __importStar(require("./ParameterFormFields"));
 const QuestionField_1 = __importDefault(require("./QuestionField"));
 const SettingButton_1 = __importDefault(require("./SettingButton"));
 function ParameterForm(_a) {
-    var _b, _c, _d, _e;
+    var _b, _c, _d;
     var { sessionId, disabled, readOnly, onSubmit, defaultValues, hideSubmit, isSubmitting, assistant, submitButtonTitle = (_c = (_b = assistant.release) === null || _b === void 0 ? void 0 : _b.submitButton) === null || _c === void 0 ? void 0 : _c.title, } = _a;
     const { t } = (0, locale_1.useLocaleContext)();
-    const parameters = (_d = assistant.parameters) === null || _d === void 0 ? void 0 : _d.filter((i) => i.key && !['question', 'datasetId'].includes(i.key));
-    const isChat = (_e = assistant.parameters) === null || _e === void 0 ? void 0 : _e.some((i) => i.key === 'question');
-    const defaultForm = (0, react_1.useMemo)(() => {
+    const parameters = (0, react_2.useMemo)(() => {
+        var _a;
+        return (_a = assistant.parameters) === null || _a === void 0 ? void 0 : _a.filter((i) => i.key && !['question', 'datasetId'].includes(i.key) && ParameterFormFields_1.SUPPORTED_PARAMETER_TYPES.includes(i.type || 'string'));
+    }, [assistant.parameters]);
+    const isChat = (_d = assistant.parameters) === null || _d === void 0 ? void 0 : _d.some((i) => i.key === 'question');
+    const defaultForm = (0, react_2.useMemo)(() => {
         var _a;
-        return defaultValues !== null && defaultValues !== void 0 ? defaultValues : Object.fromEntries((_a = parameters === null || parameters === void 0 ? void 0 : parameters.map((parameter) => [parameter.key, parameter.defaultValue])) !== null && _a !== void 0 ? _a : []);
+        const values = (0, omit_1.default)(defaultValues, 'question');
+        if (!(0, isEmpty_1.default)(values))
+            return values;
+        return Object.fromEntries((_a = parameters === null || parameters === void 0 ? void 0 : parameters.map((parameter) => [parameter.key, parameter.defaultValue])) !== null && _a !== void 0 ? _a : []);
     }, [defaultValues]);
-    const form = (0, react_hook_form_1.useForm)({ defaultValues: (0, omit_1.default)(defaultForm, isChat ? ['question'] : []) });
-    (0, react_1.useEffect)(() => {
-        form.reset((0, omit_1.default)(defaultForm, 'question'));
+    const form = (0, react_hook_form_1.useForm)({ defaultValues: defaultForm, shouldFocusError: true });
+    (0, react_2.useEffect)(() => {
+        form.reset(defaultForm);
     }, [defaultForm]);
     const handleSubmit = (parameters) => __awaiter(this, void 0, void 0, function* () {
         if (onSubmit) {
+            form.setFocus('question');
             yield onSubmit(parameters);
             form.reset((0, omit_1.default)(parameters, 'question'));
         }
     });
-    return ((0, jsx_runtime_1.jsxs)(material_1.Stack, { className: "ai-chat-form", component: "form", onSubmit: form.handleSubmit(handleSubmit), gap: 2, children: [!!(parameters === null || parameters === void 0 ? void 0 : parameters.length) && ((0, jsx_runtime_1.jsx)(ParameterFormFields_1.default, { disabled: disabled, readOnly: readOnly, parameters: parameters, form: form })), !hideSubmit &&
-                (isChat ? ((0, jsx_runtime_1.jsx)(QuestionField_1.default, { sessionId: sessionId, showSettingButton: !!sessionId, assistant: assistant, disabled: disabled, submitButtonTitle: submitButtonTitle, readOnly: readOnly, isSubmitting: isSubmitting, form: form, autoFocus: !(parameters === null || parameters === void 0 ? void 0 : parameters.length) })) : ((0, jsx_runtime_1.jsxs)(material_1.Stack, { className: "ai-chat-generation-bar", direction: "row", alignItems: "center", justifyContent: "flex-end", gap: 2, children: [sessionId && (0, jsx_runtime_1.jsx)(SettingButton_1.default, { sessionId: sessionId }), (0, jsx_runtime_1.jsx)(material_1.Box, { flex: 1 }), (0, jsx_runtime_1.jsx)(material_1.Tooltip, { title: submitButtonTitle, disableInteractive: true, placement: "top", children: (0, jsx_runtime_1.jsx)("span", { children: (0, jsx_runtime_1.jsx)(LoadingButton_1.default, { disabled: disabled, type: "submit", variant: "contained", color: "secondary", loading: form.formState.isSubmitting || isSubmitting, children: submitButtonTitle || t('submit') }) }) })] })))] }));
+    const [expand, setExpand] = (0, react_2.useState)(false);
+    return ((0, jsx_runtime_1.jsxs)(material_1.Stack, { className: "ai-chat-form", component: "form", onSubmit: form.handleSubmit(handleSubmit, (e) => {
+            if (Object.keys(e).some((i) => i !== 'question')) {
+                setExpand(true);
+            }
+        }), children: [!!(parameters === null || parameters === void 0 ? void 0 : parameters.length) && ((0, jsx_runtime_1.jsxs)(material_1.Box, { children: [(0, jsx_runtime_1.jsx)(material_1.Stack, { direction: "row", justifyContent: "center", children: (0, jsx_runtime_1.jsx)(material_1.Button, { sx: { minWidth: 0, px: 4, py: 0, opacity: 0.7, color: 'text.secondary' }, onClick: () => setExpand(!expand), children: (0, jsx_runtime_1.jsx)(material_1.Box, { component: react_1.Icon, icon: "tabler:chevron-compact-up", sx: {
+                                    fontSize: 24,
+                                    transform: `rotateX(${expand ? '180deg' : '0deg'})`,
+                                    transition: 'transform .3s ease-in-out',
+                                } }) }) }), (0, jsx_runtime_1.jsx)(material_1.Collapse, { in: expand, orientation: "vertical", sx: { maxHeight: '40vh', overflowY: 'auto' }, children: (0, jsx_runtime_1.jsx)(ParameterFormFields_1.default, { autoFocus: !sessionId, disabled: disabled, readOnly: readOnly, parameters: parameters, form: form, sx: { pb: 2, px: 2 } }) })] })), (0, jsx_runtime_1.jsx)(material_1.Box, { px: 2, children: !hideSubmit &&
+                    (isChat ? ((0, jsx_runtime_1.jsx)(QuestionField_1.default, { sessionId: sessionId, showSettingButton: !!sessionId, assistant: assistant, disabled: disabled, submitButtonTitle: submitButtonTitle, readOnly: readOnly, isSubmitting: isSubmitting, form: form, autoFocus: !!sessionId })) : ((0, jsx_runtime_1.jsxs)(material_1.Stack, { className: "ai-chat-generation-bar", direction: "row", alignItems: "center", justifyContent: "flex-end", gap: 2, children: [sessionId && (0, jsx_runtime_1.jsx)(SettingButton_1.default, { form: form, sessionId: sessionId }), (0, jsx_runtime_1.jsx)(material_1.Box, { flex: 1 }), (0, jsx_runtime_1.jsx)(material_1.Tooltip, { title: submitButtonTitle, disableInteractive: true, placement: "top", children: (0, jsx_runtime_1.jsx)("span", { children: (0, jsx_runtime_1.jsx)(LoadingButton_1.default, { disabled: disabled, type: "submit", variant: "contained", color: "secondary", loading: form.formState.isSubmitting || isSubmitting, children: submitButtonTitle || t('submit') }) }) })] }))) })] }));
 }
 exports.default = ParameterForm;

package/lib/cjs/builtin/async/ai-runtime/components/form/ParameterFormFields.js

@@ -1,17 +1,31 @@
 "use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.SUPPORTED_PARAMETER_TYPES = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const material_1 = require("@mui/material");
 const react_hook_form_1 = require("react-hook-form");
 const parameters_1 = __importDefault(require("../parameters"));
-function ParameterFormFields({ disabled, readOnly, parameters, form, }) {
+exports.SUPPORTED_PARAMETER_TYPES = ['string', 'number', 'select', 'language'];
+function ParameterFormFields(_a) {
+    var { autoFocus, disabled, readOnly, parameters, form } = _a, props = __rest(_a, ["autoFocus", "disabled", "readOnly", "parameters", "form"]);
     let isFirstParameterRendered = false;
-    return ((0, jsx_runtime_1.jsx)(material_1.Stack, { gap: 2, children: parameters === null || parameters === void 0 ? void 0 : parameters.map((parameter) => {
+    return ((0, jsx_runtime_1.jsx)(material_1.Stack, Object.assign({ gap: 1 }, props, { children: parameters === null || parameters === void 0 ? void 0 : parameters.map((parameter) => {
             const { key, required } = parameter !== null && parameter !== void 0 ? parameter : {};
-            if (!key)
+            if (!key || !exports.SUPPORTED_PARAMETER_TYPES.includes(parameter.type || 'string'))
                 return null;
             const isFirstParameter = !isFirstParameterRendered;
             isFirstParameterRendered = true;
@@ -36,8 +50,8 @@ function ParameterFormFields({ disabled, readOnly, parameters, form, }) {
                                         mb: 0.5,
                                         fontWeight: 500,
                                         color: 'rgba(18, 22, 24, 1)',
-                                    }, children: (parameter === null || parameter === void 0 ? void 0 : parameter.label) || parameter.key }), (0, jsx_runtime_1.jsx)(parameters_1.default, { autoFocus: isFirstParameter, readOnly: readOnly, 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), sx: { bgcolor: 'background.paper' } })] }));
+                                    }, children: (parameter === null || parameter === void 0 ? void 0 : parameter.label) || parameter.key }), (0, jsx_runtime_1.jsx)(parameters_1.default, { inputRef: field.ref, autoFocus: autoFocus && isFirstParameter, readOnly: readOnly, 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), sx: { bgcolor: 'background.paper' } })] }));
                     } }) }, parameter.id));
-        }) }));
+        }) })));
 }
 exports.default = ParameterFormFields;

package/lib/cjs/builtin/async/ai-runtime/components/form/QuestionField.js

@@ -16,7 +16,7 @@ function QuestionField({ sessionId, assistant, showSettingButton, form, isSubmit
     const defaultPlaceholder = t('questionPlaceholder');
     const placeholder = (0, react_2.useMemo)(() => { var _a, _b; return ((_b = (_a = assistant.parameters) === null || _a === void 0 ? void 0 : _a.find((i) => i.key === 'question')) === null || _b === void 0 ? void 0 : _b.placeholder) || defaultPlaceholder; }, [submitButtonTitle, assistant, defaultPlaceholder]);
     const submitRef = (0, react_2.useRef)(null);
-    return ((0, jsx_runtime_1.jsx)(react_hook_form_1.Controller, { control: form.control, name: "question", rules: { required: true }, render: ({ field }) => ((0, jsx_runtime_1.jsx)(material_1.TextField, { disabled: disabled, inputRef: field.ref, id: "question-input", required: true, size: "small", multiline: true, fullWidth: true, variant: "outlined", autoFocus: autoFocus, placeholder: placeholder, value: field.value || '', onChange: (e) => field.onChange(e), onKeyDownCapture: (e) => {
+    return ((0, jsx_runtime_1.jsx)(react_hook_form_1.Controller, { control: form.control, name: "question", rules: { required: true }, render: ({ field }) => ((0, jsx_runtime_1.jsx)(material_1.TextField, { disabled: disabled, inputRef: field.ref, id: "question-input", size: "small", multiline: true, fullWidth: true, variant: "outlined", autoFocus: autoFocus, placeholder: placeholder, value: field.value || '', onChange: (e) => field.onChange(e), onKeyDownCapture: (e) => {
                 var _a;
                 // NOTE: Pressing Enter in the IME will trigger the 229 event
                 if (e.keyCode === 229)
@@ -28,7 +28,7 @@ function QuestionField({ sessionId, assistant, showSettingButton, form, isSubmit
             }, InputProps: {
                 readOnly,
                 sx: { p: 1, bgcolor: 'white', borderRadius: 1 },
-                startAdornment: showSettingButton && sessionId && ((0, jsx_runtime_1.jsx)(SettingButton_1.default, { sessionId: sessionId, sx: { minWidth: 32, minHeight: 32 }, tabIndex: -1 })),
+                startAdornment: showSettingButton && sessionId && ((0, jsx_runtime_1.jsx)(SettingButton_1.default, { form: form, sessionId: sessionId, sx: { minWidth: 32, minHeight: 32 }, tabIndex: -1 })),
                 className: 'ai-chat-question-field',
                 endAdornment: ((0, jsx_runtime_1.jsx)(material_1.Tooltip, { title: submitButtonTitle, disableInteractive: true, placement: "top", children: (0, jsx_runtime_1.jsx)("span", { children: (0, jsx_runtime_1.jsx)(LoadingButton_1.default, { disabled: disabled, id: "question-submit", ref: submitRef, type: "submit", variant: "contained", 
                             // @ts-ignore

package/lib/cjs/builtin/async/ai-runtime/components/form/SettingButton.js

@@ -19,6 +19,9 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("@iconify/react");
@@ -26,8 +29,9 @@ const material_1 = require("@mui/material");
 const react_2 = require("react");
 const locale_1 = require("../../../../locale");
 const session_1 = require("../../state/session");
+const LoadingListItemButton_1 = __importDefault(require("../LoadingListItemButton"));
 function SettingButton(_a) {
-    var { sessionId } = _a, props = __rest(_a, ["sessionId"]);
+    var { sessionId, form } = _a, props = __rest(_a, ["sessionId", "form"]);
     const { t } = (0, locale_1.useLocaleContext)();
     const [, state] = (0, session_1.useSessionState)({ sessionId, required: true });
     const [openSetting, setOpenSetting] = (0, react_2.useState)(false);
@@ -45,6 +49,7 @@ function SettingButton(_a) {
             key: 'clearSession',
             label: t('clearSession'),
             onClick: () => __awaiter(this, void 0, void 0, function* () {
+                form.setFocus('question');
                 yield state.clearSession({
                     sessionId,
                 });
@@ -66,10 +71,10 @@ function SettingButton(_a) {
                         boxShadow: '0px 8px 16px 0px rgba(2, 7, 19, 0.08), 0px 0px 0px 1px rgba(2, 7, 19, 0.08)',
                     }, children: settingOptions.map((option) => {
                         const { key, label, onClick, icon, sx } = option;
-                        return ((0, jsx_runtime_1.jsxs)(material_1.MenuItem, { onClick: () => {
+                        return ((0, jsx_runtime_1.jsxs)(LoadingListItemButton_1.default, { onClick: () => __awaiter(this, void 0, void 0, function* () {
+                                yield onClick();
                                 setOpenSetting(false);
-                                onClick();
-                            }, sx: Object.assign({ fontSize: 13, lineHeight: '22px', py: 0.75, px: 1.5, fontWeight: 400 }, sx), children: [(0, jsx_runtime_1.jsx)(material_1.Box, { component: react_1.Icon, icon: icon, sx: { fontSize: 16, mr: 1 } }), label] }, key));
+                            }), sx: Object.assign({ fontSize: 13, lineHeight: '22px', py: 0.75, px: 1.5, fontWeight: 400 }, sx), children: [(0, jsx_runtime_1.jsx)(material_1.Box, { component: react_1.Icon, icon: icon, sx: { fontSize: 16, mr: 1 } }), label] }, key));
                     }) }) }) }, "setting-popper"),
     ];
 }

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

@@ -28,69 +28,18 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
 const image_preview_1 = __importDefault(require("@blocklet/ai-kit/components/image-preview"));
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
 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 locale_1 = require("../../../../locale");
 const session_1 = require("../../../../session");
 const common_1 = require("../common");
 const MarkdownRenderer_1 = __importDefault(require("../MarkdownRenderer"));
 const MessageActions_1 = __importDefault(require("./MessageActions"));
 const MessageErrorView_1 = __importDefault(require("./MessageErrorView"));
-// if today, show time only, else show date and time
-const formatTodayTime = (time) => {
-    const today = (0, dayjs_1.default)().format('YYYY-MM-DD');
-    const date = (0, dayjs_1.default)(time).format('YYYY-MM-DD');
-    return today === date ? (0, dayjs_1.default)(time).format('HH:mm') : (0, dayjs_1.default)(time).format('YYYY-MM-DD HH:mm');
-};
-function MessageItemView({ assistantId, assistant, message, previousMessageTime, messageTimeType = 'user', hideAvatar, }) {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1;
-    const { session: authSession } = (0, session_1.useSessionContext)();
-    const { locale } = (0, locale_1.useLocaleContext)();
-    const hasResult = !!(((_a = message.result) === null || _a === void 0 ? void 0 : _a.content) ||
-        ((_c = (_b = message.result) === null || _b === void 0 ? void 0 : _b.images) === null || _c === void 0 ? void 0 : _c.length) ||
-        ((_e = (_d = message.result) === null || _d === void 0 ? void 0 : _d.messages) === null || _e === void 0 ? void 0 : _e.length) ||
-        ((_g = (_f = message.result) === null || _f === void 0 ? void 0 : _f.objects) === null || _g === void 0 ? void 0 : _g.length));
-    const showPreviousTime = (0, react_1.useMemo)(() => {
-        if (messageTimeType !== 'previous')
-            return false;
-        if (!previousMessageTime)
-            return true;
-        const p = (0, dayjs_1.default)(previousMessageTime);
-        const c = (0, dayjs_1.default)(message.createdAt);
-        return c.valueOf() - p.valueOf() >= 300e3; // 和上一条消息时间间隔不超过 5 分钟，则不显示时间
-    }, [previousMessageTime, messageTimeType]);
-    const extraUserInfo = [
-        messageTimeType === 'user' && (message === null || message === void 0 ? void 0 : message.createdAt) && ((0, jsx_runtime_1.jsx)(material_1.Typography, { sx: {
-                fontSize: 12,
-                lineHeight: '24px',
-                color: 'text.secondary',
-            }, children: formatTodayTime(message.createdAt) }, "user-time")),
-    ].filter(Boolean);
-    const commonMessageSx = {
-        position: 'relative',
-        borderRadius: 1,
-        py: 1,
-        px: 2,
-        mt: 0.5,
-        // without logo width
-        maxWidth: 'calc(100% - 40px)',
-        '.message-actions': {
-            position: 'absolute',
-            top: 0,
-            right: -40,
-            background: 'white',
-            border: 1,
-            borderRadius: 1,
-            borderColor: 'grey.300',
-            opacity: 0,
-            transition: 'opacity 0.2s',
-        },
-    };
-    const isMessageLoading = (message.loading || !message.result) && !message.error;
-    const showUserMessage = ((_h = assistant.release) === null || _h === void 0 ? void 0 : _h.template) !== 'form' && !!((_j = message.parameters) === null || _j === void 0 ? void 0 : _j.question);
+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);
     return ((0, jsx_runtime_1.jsxs)(material_1.Stack, { className: "ai-chat-message-item", gap: 2.5, overflow: "hidden", sx: {
             '.message-question': Object.assign(Object.assign({}, commonMessageSx), { borderTopRightRadius: '2px', backgroundColor: 'rgba(239, 246, 255, 1)' }),
             '.message-response': Object.assign(Object.assign({}, commonMessageSx), { borderTopLeftRadius: '2px', backgroundColor: 'rgba(229, 231, 235, 1)' }),
@@ -99,29 +48,60 @@ function MessageItemView({ assistantId, assistant, message, previousMessageTime,
                     opacity: 1,
                 },
             },
-        }, children: [showPreviousTime && message.createdAt && ((0, jsx_runtime_1.jsx)(material_1.Box, { className: "ai-chat-message-time", sx: { textAlign: 'center', fontSize: 13, color: 'text.secondary', mb: -1.5 }, children: (0, jsx_runtime_1.jsx)(ux_1.RelativeTime, { locale: locale, value: message.createdAt, relativeRange: 600e3 }) })), showUserMessage && ((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: (_k = authSession.user) === null || _k === void 0 ? void 0 : _k.avatar, did: (_l = authSession.user) === null || _l === void 0 ? void 0 : _l.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: [(_m = authSession.user) === null || _m === void 0 ? void 0 : _m.fullName, extraUserInfo] }), (0, jsx_runtime_1.jsx)(material_1.Box, { className: "message-question", sx: { whiteSpace: 'pre-wrap', wordBreak: 'break-word', textAlign: 'left' }, children: (_o = message.parameters) === null || _o === void 0 ? void 0 : _o.question })] })] })), (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: (_p = globalThis.blocklet) === null || _p === void 0 ? void 0 : _p.appId, variant: "circle", shape: "circle", src: (_q = assistant.release) === null || _q === void 0 ? void 0 : _q.logo }) })), (0, jsx_runtime_1.jsxs)(material_1.Box, { flex: 1, overflow: "hidden", children: [!hideAvatar && ((0, jsx_runtime_1.jsxs)(MessageUserName, { children: [((_r = assistant.release) === null || _r === void 0 ? void 0 : _r.title) || assistant.name, extraUserInfo] })), (0, jsx_runtime_1.jsxs)(react_1.default.Suspense, { children: [hasResult ? ((0, jsx_runtime_1.jsxs)(material_1.Stack, { gap: 1, className: "message-response", children: [(_t = (_s = message.result) === null || _s === void 0 ? void 0 : _s.messages) === null || _t === void 0 ? void 0 : _t.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;
-                                            }), ((_u = message.result) === null || _u === void 0 ? void 0 : _u.content) && ((0, jsx_runtime_1.jsx)(MarkdownRenderer_1.default, { className: isMessageLoading ? 'writing' : '', children: message.result.content })), !!((_w = (_v = message.result) === null || _v === void 0 ? void 0 : _v.images) === null || _w === void 0 ? void 0 : _w.length) && ((0, jsx_runtime_1.jsx)(image_preview_1.default, { itemWidth: 100, spacing: 1, dataSource: message.result.images.map((i) => ({ src: i.url })) })), !isMessageLoading && ((_x = message.result) === null || _x === void 0 ? void 0 : _x.content) && ((0, jsx_runtime_1.jsx)(MessageActions_1.default, { className: "message-actions", content: 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" }))), !!((_z = (_y = message.result) === null || _y === void 0 ? void 0 : _y.objects) === null || _z === void 0 ? void 0 : _z.length) &&
-                                        ((_1 = (_0 = message.result) === null || _0 === void 0 ? void 0 : _0.objects) === null || _1 === void 0 ? void 0 : _1.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, { assistantId: assistantId, assistant: assistant, error: message.error }))] })] })] })] }));
+        }, children: [showUserMessage && (0, jsx_runtime_1.jsx)(UserMessage, { message: message }), (0, jsx_runtime_1.jsx)(AgentMessage, { assistantId: assistantId, assistant: assistant, message: message, hideAvatar: hideAvatar })] }));
 }
 exports.default = MessageItemView;
+const commonMessageSx = {
+    position: 'relative',
+    borderRadius: 1,
+    py: 1,
+    px: 2,
+    mt: 0.5,
+    // without logo width
+    maxWidth: 'calc(100% - 40px)',
+    '.message-actions': {
+        position: 'absolute',
+        top: 0,
+        right: -40,
+        background: 'white',
+        border: 1,
+        borderRadius: 1,
+        borderColor: 'grey.300',
+        opacity: 0,
+        transition: 'opacity 0.2s',
+    },
+};
+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({ assistantId, assistant, message, hideAvatar, }) {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
+    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;
+    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 = assistant.release) === null || _e === void 0 ? void 0 : _e.logo }) })), (0, jsx_runtime_1.jsxs)(material_1.Box, { flex: 1, overflow: "hidden", children: [!hideAvatar && ((0, jsx_runtime_1.jsxs)(MessageUserName, { children: [((_f = assistant.release) === null || _f === void 0 ? void 0 : _f.title) || assistant.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.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 && ((_k = message.result) === null || _k === void 0 ? void 0 : _k.content) && ((0, jsx_runtime_1.jsx)(MessageActions_1.default, { className: "message-actions", content: 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" }))), !!((_m = (_l = message.result) === null || _l === void 0 ? void 0 : _l.objects) === null || _m === void 0 ? void 0 : _m.length) &&
+                                ((_p = (_o = message.result) === null || _o === void 0 ? void 0 : _o.objects) === null || _p === void 0 ? void 0 : _p.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, { assistantId: assistantId, assistant: assistant, error: message.error })] })] })] }));
+}
 function MessageUserName({ children }) {
     return ((0, jsx_runtime_1.jsx)(material_1.Typography, { component: "div", noWrap: true, sx: {
             fontSize: 14,
@@ -132,3 +112,18 @@ function MessageUserName({ children }) {
             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/message/MessageListView.js

@@ -40,9 +40,8 @@ function MessageListView(_a) {
     }, [assistant.release]);
     if (!session)
         return null;
-    return ((0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ gap: 2.5 }, props, { children: [opener && (0, jsx_runtime_1.jsx)(MessageItemView_1.default, { assistantId: assistantId, assistant: assistant, message: opener }), messages.map((message, index) => {
-                var _a, _b;
-                return ((0, jsx_runtime_1.jsx)(MessageItemView_1.default, { assistantId: assistantId, assistant: assistant, message: message, previousMessageTime: (_b = (_a = messages[index - 1]) === null || _a === void 0 ? void 0 : _a.createdAt) !== null && _b !== void 0 ? _b : session.createdAt }, message.taskId));
+    return ((0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ gap: 2.5 }, props, { children: [opener && (0, jsx_runtime_1.jsx)(MessageItemView_1.default, { assistantId: assistantId, assistant: assistant, message: opener }), messages.map((message) => {
+                return ((0, jsx_runtime_1.jsx)(MessageItemView_1.default, { assistantId: assistantId, assistant: assistant, message: message }, message.taskId));
             })] })));
 }
 exports.default = MessageListView;