@blocklet/pages-kit 0.2.287 → 0.2.288

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

@@ -1,12 +1,3 @@
-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,8 +11,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import { jsx as _jsx } from "react/jsx-runtime";
 import { LinearProgress } from '@mui/material';
-import { create } from 'zustand';
-import { immer } from 'zustand/middleware/immer';
+import { globalLoadingState } from '../state/loading';
 export default function GlobalLoading(_a) {
     var props = __rest(_a, []);
     const state = globalLoadingState();
@@ -29,28 +19,3 @@ export default function GlobalLoading(_a) {
         return null;
     return _jsx(LinearProgress, Object.assign({}, props));
 }
-export const globalLoadingState = create()(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/esm/builtin/async/ai-runtime/components/LoadingListItemButton.js

@@ -19,19 +19,17 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { CircularProgress, ListItemButton } from '@mui/material';
+import { CircularProgress, ListItemButton, Stack } from '@mui/material';
 import { useState } from 'react';
-import { useLocaleContext } from '../../../locale';
 export default function LoadingListItemButton(_a) {
-    var props = __rest(_a, []);
-    const { t } = useLocaleContext();
+    var { children, confirmation } = _a, props = __rest(_a, ["children", "confirmation"]);
     const [clicked, setClicked] = useState(false);
     const [loading, setLoading] = 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;
         }
@@ -44,5 +42,5 @@ export default function LoadingListItemButton(_a) {
             setLoading(false);
         }
     });
-    return (_jsxs(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 && _jsx(CircularProgress, { size: 14 })] })));
+    return (_jsxs(ListItemButton, Object.assign({}, props, { onClick: handleClick, sx: Object.assign(Object.assign({}, props.sx), { display: 'flex', alignItems: 'center', gap: 1 }), children: [(clicked && confirmation) || children, _jsx(Stack, { direction: "row", alignItems: "center", justifyContent: "flex-end", sx: { width: 18 }, children: loading && _jsx(CircularProgress, { size: 14 }) })] })));
 }

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

@@ -1,10 +1,16 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { CircularProgress, Stack } from '@mui/material';
 import React from 'react';
+import { ErrorBoundary } from 'react-error-boundary';
+import { Result } from '../../../arcblock/ux';
 import { LocaleProvider, useLocaleContext } from '../../../locale';
 import { translations } from '../locales';
 import GlobalLoading from './GlobalLoading';
 import ThemeProvider from './ThemeProvider';
 export default function RuntimeProvider({ children }) {
     const { locale } = useLocaleContext();
-    return (_jsx(LocaleProvider, { translations: translations, locale: locale, fallbackLocale: "en", children: _jsx(ThemeProvider, { children: _jsxs(React.Suspense, { children: [_jsx(GlobalLoading, { sx: { position: 'fixed', left: 0, top: 0, width: '100%', zIndex: 'snackbar' } }), children] }) }) }));
+    return (_jsx(LocaleProvider, { translations: translations, locale: locale, fallbackLocale: "en", children: _jsx(ThemeProvider, { children: _jsxs(ErrorBoundary, { FallbackComponent: ErrorRender, children: [_jsx(GlobalLoading, { sx: { position: 'fixed', left: 0, top: 0, width: '100%', zIndex: 'snackbar' } }), _jsx(React.Suspense, { fallback: _jsx(Stack, { flexGrow: 1, alignItems: "center", justifyContent: "center", children: _jsx(CircularProgress, { size: 24 }) }), children: children })] }) }) }));
+}
+function ErrorRender({ error }) {
+    return (_jsx(Result, Object.assign({ status: error.status || 'error' }, (Number(error.status) === 404 ? { message: error.message } : {}), { sx: { bgcolor: 'transparent', mt: '20%' } })));
 }

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

@@ -1,9 +1,9 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import Dialog from '@arcblock/ux/lib/Dialog';
 import { Icon } from '@iconify/react';
 import ArrowBackIosNewIcon from '@mui/icons-material/ArrowBackIosNew';
-import { Box, Button, ClickAwayListener, IconButton, Popper, Typography, useMediaQuery, useTheme } from '@mui/material';
-import { useCallback, useRef, useState } from 'react';
+import { Box, Button, CircularProgress, ClickAwayListener, IconButton, Popper, Stack, Typography, useMediaQuery, useTheme, } from '@mui/material';
+import { Suspense, useCallback, useRef, useState } from 'react';
 import { Avatar } from '../../../../arcblock/ux';
 import { useAssistantState } from '../../state/assistant';
 import ScrollView from '../ScrollView';
@@ -16,7 +16,7 @@ export default function ChatBot({ assistantId, size, bottom, right, children, po
     const isMobile = 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;
     }
@@ -43,7 +43,7 @@ export default function ChatBot({ assistantId, size, bottom, right, children, po
                     setOpenPopper(false);
                 }, children: children }));
         }
-        return (_jsx(Popper, { anchorEl: anchorEl.current, open: openPopper, placement: "top-end", sx: Object.assign({ zIndex: 1200, minWidth: { sm: 400 } }, chatViewSizeSx), children: _jsx(ClickAwayListener, { onClickAway: (e) => {
+        return (_jsx(Popper, { anchorEl: anchorEl.current, open: openPopper, placement: "top-end", sx: Object.assign({ zIndex: 1200, minWidth: { sm: 500 }, maxWidth: 600 }, chatViewSizeSx), children: _jsx(ClickAwayListener, { onClickAway: (e) => {
                     e.preventDefault();
                     e.stopPropagation();
                     setOpenPopper(false);
@@ -69,24 +69,19 @@ export default function ChatBot({ assistantId, size, bottom, right, children, po
     }, [isMobile, openPopper]);
     if (!assistant)
         return null;
-    return (_jsxs(_Fragment, { children: [_jsxs(Box, { sx: {
+    return (_jsxs(Box, { sx: { position: 'fixed', bottom: bottom || 24, right: right || 24 }, children: [_jsxs(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: [_jsx(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 }), _jsx(Box, { width: "100%", ref: anchorEl })] }), anchorEl.current && (_jsx(WrapperComponent, { children: _jsx(ScrollView, { className: "ai-bot-scroll-container", initialScrollBehavior: "auto", component: Box, sx: {
+                }, onClick: () => setOpenPopper(!openPopper), children: [_jsx(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 }), _jsx(Box, { width: "100%", ref: anchorEl })] }), anchorEl.current && (_jsx(WrapperComponent, { children: _jsx(ScrollView, { className: "ai-bot-scroll-container", initialScrollBehavior: "auto", component: Box, sx: {
                         overscrollBehavior: 'contain',
                         height: isMobile ? '100%' : `calc(${chatViewSizeSx.height} - 70px)`,
                         width: '100%',
@@ -95,5 +90,9 @@ export default function ChatBot({ assistantId, size, bottom, right, children, po
                         '.ai-chat-header': {
                             pt: 4,
                         },
-                    }, children: children }) }))] }));
+                        '.ai-runtime-form-container': {
+                            borderBottomLeftRadius: 8,
+                            borderBottomRightRadius: 8,
+                        },
+                    }, children: _jsx(Suspense, { fallback: _jsx(Stack, { flexGrow: 1, alignItems: "center", justifyContent: "center", children: _jsx(CircularProgress, { size: 24 }) }), children: children }) }) }))] }));
 }

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

@@ -1,7 +1,7 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import ImagePreview from '@blocklet/ai-kit/components/image-preview';
 import { RuntimeOutputVariable } from '@blocklet/ai-runtime/types';
-import { Stack, Typography } from '@mui/material';
+import { Stack } from '@mui/material';
 import { useMemo } from 'react';
 import ReferenceLinks from '../message/ReferenceLinks';
 export default function MessageMetadataRenderer({ object }) {
@@ -11,5 +11,5 @@ export default 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 (_jsxs(_Fragment, { children: [Array.isArray(referenceLinks) && referenceLinks.length ? _jsx(ReferenceLinks, { links: referenceLinks }) : undefined, images && (_jsxs(Stack, { gap: 1, children: [_jsx(Typography, { variant: "subtitle2", children: "Images:" }), _jsx(ImagePreview, { dataSource: images, itemWidth: 100 })] }))] }));
+    return (_jsxs(_Fragment, { children: [Array.isArray(referenceLinks) && referenceLinks.length ? _jsx(ReferenceLinks, { links: referenceLinks }) : undefined, images && (_jsx(Stack, { gap: 1, children: _jsx(ImagePreview, { dataSource: images, itemWidth: 100 }) }))] }));
 }

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

@@ -8,35 +8,53 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
     });
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Box, Stack, Tooltip } from '@mui/material';
+import { Icon } from '@iconify/react';
+import { Box, Button, Collapse, Stack, Tooltip } from '@mui/material';
+import isEmpty from 'lodash/isEmpty';
 import omit from 'lodash/omit';
-import { useEffect, useMemo } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 import { useForm } from 'react-hook-form';
 import { useLocaleContext } from '../../../../locale';
 import LoadingButton from '../LoadingButton';
-import ParameterFormFields from './ParameterFormFields';
+import ParameterFormFields, { SUPPORTED_PARAMETER_TYPES } from './ParameterFormFields';
 import QuestionField from './QuestionField';
 import SettingButton from './SettingButton';
 export default 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 } = 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 parameters = useMemo(() => {
+        var _a;
+        return (_a = assistant.parameters) === null || _a === void 0 ? void 0 : _a.filter((i) => i.key && !['question', 'datasetId'].includes(i.key) && 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 = 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 = omit(defaultValues, 'question');
+        if (!isEmpty(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 = useForm({ defaultValues: omit(defaultForm, isChat ? ['question'] : []) });
+    const form = useForm({ defaultValues: defaultForm, shouldFocusError: true });
     useEffect(() => {
-        form.reset(omit(defaultForm, 'question'));
+        form.reset(defaultForm);
     }, [defaultForm]);
     const handleSubmit = (parameters) => __awaiter(this, void 0, void 0, function* () {
         if (onSubmit) {
+            form.setFocus('question');
             yield onSubmit(parameters);
             form.reset(omit(parameters, 'question'));
         }
     });
-    return (_jsxs(Stack, { className: "ai-chat-form", component: "form", onSubmit: form.handleSubmit(handleSubmit), gap: 2, children: [!!(parameters === null || parameters === void 0 ? void 0 : parameters.length) && (_jsx(ParameterFormFields, { disabled: disabled, readOnly: readOnly, parameters: parameters, form: form })), !hideSubmit &&
-                (isChat ? (_jsx(QuestionField, { 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) })) : (_jsxs(Stack, { className: "ai-chat-generation-bar", direction: "row", alignItems: "center", justifyContent: "flex-end", gap: 2, children: [sessionId && _jsx(SettingButton, { sessionId: sessionId }), _jsx(Box, { flex: 1 }), _jsx(Tooltip, { title: submitButtonTitle, disableInteractive: true, placement: "top", children: _jsx("span", { children: _jsx(LoadingButton, { disabled: disabled, type: "submit", variant: "contained", color: "secondary", loading: form.formState.isSubmitting || isSubmitting, children: submitButtonTitle || t('submit') }) }) })] })))] }));
+    const [expand, setExpand] = useState(false);
+    return (_jsxs(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) && (_jsxs(Box, { children: [_jsx(Stack, { direction: "row", justifyContent: "center", children: _jsx(Button, { sx: { minWidth: 0, px: 4, py: 0, opacity: 0.7, color: 'text.secondary' }, onClick: () => setExpand(!expand), children: _jsx(Box, { component: Icon, icon: "tabler:chevron-compact-up", sx: {
+                                    fontSize: 24,
+                                    transform: `rotateX(${expand ? '180deg' : '0deg'})`,
+                                    transition: 'transform .3s ease-in-out',
+                                } }) }) }), _jsx(Collapse, { in: expand, orientation: "vertical", sx: { maxHeight: '40vh', overflowY: 'auto' }, children: _jsx(ParameterFormFields, { autoFocus: !sessionId, disabled: disabled, readOnly: readOnly, parameters: parameters, form: form, sx: { pb: 2, px: 2 } }) })] })), _jsx(Box, { px: 2, children: !hideSubmit &&
+                    (isChat ? (_jsx(QuestionField, { sessionId: sessionId, showSettingButton: !!sessionId, assistant: assistant, disabled: disabled, submitButtonTitle: submitButtonTitle, readOnly: readOnly, isSubmitting: isSubmitting, form: form, autoFocus: !!sessionId })) : (_jsxs(Stack, { className: "ai-chat-generation-bar", direction: "row", alignItems: "center", justifyContent: "flex-end", gap: 2, children: [sessionId && _jsx(SettingButton, { form: form, sessionId: sessionId }), _jsx(Box, { flex: 1 }), _jsx(Tooltip, { title: submitButtonTitle, disableInteractive: true, placement: "top", children: _jsx("span", { children: _jsx(LoadingButton, { disabled: disabled, type: "submit", variant: "contained", color: "secondary", loading: form.formState.isSubmitting || isSubmitting, children: submitButtonTitle || t('submit') }) }) })] }))) })] }));
 }

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

@@ -1,12 +1,25 @@
+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 { Box, Stack, Typography } from '@mui/material';
 import { Controller } from 'react-hook-form';
 import ParameterField from '../parameters';
-export default function ParameterFormFields({ disabled, readOnly, parameters, form, }) {
+export const SUPPORTED_PARAMETER_TYPES = ['string', 'number', 'select', 'language'];
+export default function ParameterFormFields(_a) {
+    var { autoFocus, disabled, readOnly, parameters, form } = _a, props = __rest(_a, ["autoFocus", "disabled", "readOnly", "parameters", "form"]);
     let isFirstParameterRendered = false;
-    return (_jsx(Stack, { gap: 2, children: parameters === null || parameters === void 0 ? void 0 : parameters.map((parameter) => {
+    return (_jsx(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 || !SUPPORTED_PARAMETER_TYPES.includes(parameter.type || 'string'))
                 return null;
             const isFirstParameter = !isFirstParameterRendered;
             isFirstParameterRendered = true;
@@ -31,7 +44,7 @@ export default function ParameterFormFields({ disabled, readOnly, parameters, fo
                                         mb: 0.5,
                                         fontWeight: 500,
                                         color: 'rgba(18, 22, 24, 1)',
-                                    }, children: (parameter === null || parameter === void 0 ? void 0 : parameter.label) || parameter.key }), _jsx(ParameterField, { 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 }), _jsx(ParameterField, { 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));
-        }) }));
+        }) })));
 }

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

@@ -11,7 +11,7 @@ export default function QuestionField({ sessionId, assistant, showSettingButton,
     const defaultPlaceholder = t('questionPlaceholder');
     const placeholder = 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 = useRef(null);
-    return (_jsx(Controller, { control: form.control, name: "question", rules: { required: true }, render: ({ field }) => (_jsx(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 (_jsx(Controller, { control: form.control, name: "question", rules: { required: true }, render: ({ field }) => (_jsx(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)
@@ -23,7 +23,7 @@ export default function QuestionField({ sessionId, assistant, showSettingButton,
             }, InputProps: {
                 readOnly,
                 sx: { p: 1, bgcolor: 'white', borderRadius: 1 },
-                startAdornment: showSettingButton && sessionId && (_jsx(SettingButton, { sessionId: sessionId, sx: { minWidth: 32, minHeight: 32 }, tabIndex: -1 })),
+                startAdornment: showSettingButton && sessionId && (_jsx(SettingButton, { form: form, sessionId: sessionId, sx: { minWidth: 32, minHeight: 32 }, tabIndex: -1 })),
                 className: 'ai-chat-question-field',
                 endAdornment: (_jsx(Tooltip, { title: submitButtonTitle, disableInteractive: true, placement: "top", children: _jsx("span", { children: _jsx(LoadingButton, { disabled: disabled, id: "question-submit", ref: submitRef, type: "submit", variant: "contained", 
                             // @ts-ignore

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

@@ -20,12 +20,13 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Icon } from '@iconify/react';
-import { Box, Button, ClickAwayListener, MenuItem, Paper, Popper } from '@mui/material';
+import { Box, Button, ClickAwayListener, Paper, Popper } from '@mui/material';
 import { useState } from 'react';
 import { useLocaleContext } from '../../../../locale';
 import { useSessionState } from '../../state/session';
+import LoadingListItemButton from '../LoadingListItemButton';
 export default function SettingButton(_a) {
-    var { sessionId } = _a, props = __rest(_a, ["sessionId"]);
+    var { sessionId, form } = _a, props = __rest(_a, ["sessionId", "form"]);
     const { t } = useLocaleContext();
     const [, state] = useSessionState({ sessionId, required: true });
     const [openSetting, setOpenSetting] = useState(false);
@@ -43,6 +44,7 @@ export default function SettingButton(_a) {
             key: 'clearSession',
             label: t('clearSession'),
             onClick: () => __awaiter(this, void 0, void 0, function* () {
+                form.setFocus('question');
                 yield state.clearSession({
                     sessionId,
                 });
@@ -64,10 +66,10 @@ export default 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 (_jsxs(MenuItem, { onClick: () => {
+                        return (_jsxs(LoadingListItemButton, { 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: [_jsx(Box, { component: 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: [_jsx(Box, { component: Icon, icon: icon, sx: { fontSize: 16, mr: 1 } }), label] }, key));
                     }) }) }) }, "setting-popper"),
     ];
 }

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

@@ -1,68 +1,17 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import ImagePreview from '@blocklet/ai-kit/components/image-preview';
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
 import { Box, Skeleton, Stack, Typography } from '@mui/material';
 import dayjs from 'dayjs';
 import React, { useMemo } from 'react';
-import { Avatar, RelativeTime } from '../../../../arcblock/ux';
-import { useLocaleContext } from '../../../../locale';
+import { Avatar } from '../../../../arcblock/ux';
 import { useSessionContext } from '../../../../session';
 import { MessageMetadataRenderer } from '../common';
 import MarkdownRenderer from '../MarkdownRenderer';
 import MessageActions from './MessageActions';
 import MessageErrorView from './MessageErrorView';
-// if today, show time only, else show date and time
-const formatTodayTime = (time) => {
-    const today = dayjs().format('YYYY-MM-DD');
-    const date = dayjs(time).format('YYYY-MM-DD');
-    return today === date ? dayjs(time).format('HH:mm') : dayjs(time).format('YYYY-MM-DD HH:mm');
-};
-export default 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 } = useSessionContext();
-    const { locale } = 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 = useMemo(() => {
-        if (messageTimeType !== 'previous')
-            return false;
-        if (!previousMessageTime)
-            return true;
-        const p = dayjs(previousMessageTime);
-        const c = dayjs(message.createdAt);
-        return c.valueOf() - p.valueOf() >= 300e3; // 和上一条消息时间间隔不超过 5 分钟，则不显示时间
-    }, [previousMessageTime, messageTimeType]);
-    const extraUserInfo = [
-        messageTimeType === 'user' && (message === null || message === void 0 ? void 0 : message.createdAt) && (_jsx(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);
+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);
     return (_jsxs(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)' }),
@@ -71,27 +20,58 @@ export default function MessageItemView({ assistantId, assistant, message, previ
                     opacity: 1,
                 },
             },
-        }, children: [showPreviousTime && message.createdAt && (_jsx(Box, { className: "ai-chat-message-time", sx: { textAlign: 'center', fontSize: 13, color: 'text.secondary', mb: -1.5 }, children: _jsx(RelativeTime, { locale: locale, value: message.createdAt, relativeRange: 600e3 }) })), showUserMessage && (_jsxs(Stack, { className: "ai-chat-message-user", direction: "row", gap: 1.5, sx: {
+        }, children: [showUserMessage && _jsx(UserMessage, { message: message }), _jsx(AgentMessage, { assistantId: assistantId, assistant: assistant, message: message, hideAvatar: hideAvatar })] }));
+}
+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 } = 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: 'row-reverse',
-                    textAlign: 'right',
-                    justifyContent: 'flex-end',
-                }, children: [_jsx(Box, { children: _jsx(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" }) }), _jsxs(Stack, { flex: 1, overflow: "hidden", sx: {
-                            display: 'flex',
-                            flexDirection: 'column',
-                            alignItems: 'flex-end',
-                        }, children: [_jsxs(MessageUserName, { children: [(_m = authSession.user) === null || _m === void 0 ? void 0 : _m.fullName, extraUserInfo] }), _jsx(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 })] })] })), _jsxs(Stack, { className: "ai-chat-message-ai", direction: "row", gap: 1.5, children: [!hideAvatar && (_jsx(Box, { children: _jsx(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 }) })), _jsxs(Box, { flex: 1, overflow: "hidden", children: [!hideAvatar && (_jsxs(MessageUserName, { children: [((_r = assistant.release) === null || _r === void 0 ? void 0 : _r.title) || assistant.name, extraUserInfo] })), _jsxs(React.Suspense, { children: [hasResult ? (_jsxs(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) ? (_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;
-                                            }), ((_u = message.result) === null || _u === void 0 ? void 0 : _u.content) && (_jsx(MarkdownRenderer, { 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) && (_jsx(ImagePreview, { 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) && (_jsx(MessageActions, { className: "message-actions", content: message.result.content }))] })) : (isMessageLoading && (_jsx(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) => (_jsx(MessageMetadataRenderer, { object: object.data }, object.taskId)))), message.error && (_jsx(MessageErrorView, { assistantId: assistantId, assistant: assistant, error: message.error }))] })] })] })] }));
+                    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({ 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 (_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 = assistant.release) === null || _e === void 0 ? void 0 : _e.logo }) })), _jsxs(Box, { flex: 1, overflow: "hidden", children: [!hideAvatar && (_jsxs(MessageUserName, { children: [((_f = assistant.release) === null || _f === void 0 ? void 0 : _f.title) || assistant.name, _jsx(MessageTime, { time: message.createdAt })] })), _jsxs(React.Suspense, { children: [showMainMessage ? (_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 && ((_k = message.result) === null || _k === void 0 ? void 0 : _k.content) && (_jsx(MessageActions, { className: "message-actions", content: message.result.content }))] })) : (isMessageLoading && (_jsx(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) => (_jsx(MessageMetadataRenderer, { object: object.data }, object.taskId)))), message.error && _jsx(MessageErrorView, { assistantId: assistantId, assistant: assistant, error: message.error })] })] })] }));
 }
 function MessageUserName({ children }) {
     return (_jsx(Typography, { component: "div", noWrap: true, sx: {
@@ -103,3 +83,18 @@ function MessageUserName({ children }) {
             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/message/MessageListView.js

@@ -35,8 +35,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, index) => {
-                var _a, _b;
-                return (_jsx(MessageItemView, { 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 (_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));
             })] })));
 }

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

@@ -1,7 +1,7 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Link, Stack, Typography } from '@mui/material';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Link, Stack } from '@mui/material';
 export default function ReferenceLinks({ links }) {
-    return (_jsxs(Stack, { sx: { wordBreak: 'break-word' }, children: [_jsx(Typography, { variant: "subtitle2", children: "References:" }), links === null || links === void 0 ? void 0 : links.map((item, index) => _jsx(ReferenceLinkItemView, { link: item }, index))] }));
+    return (_jsx(Stack, { sx: { wordBreak: 'break-word' }, children: links === null || links === void 0 ? void 0 : links.map((item) => _jsx(ReferenceLinkItemView, { link: item }, item.url)) }));
 }
 function ReferenceLinkItemView({ link, }) {
     return (_jsx(Stack, { children: _jsx(Link, { href: link.url, children: link.title || link.url }) }));

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

@@ -27,5 +27,5 @@ export default function ParameterField(_a) {
         select: SelectField,
         language: LanguageField,
     }[parameter.type || 'string'] || StringField;
-    return (_jsx(Field, Object.assign({ required: parameter === null || parameter === void 0 ? void 0 : parameter.required, 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)));
+    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)));
 }