@blocklet/pages-kit 0.2.291 → 0.2.292

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

@@ -16,10 +16,11 @@ const constants_1 = require("../constants");
 const utils_2 = require("../utils");
 const request_1 = require("./request");
 function getAssistant(_a) {
-    return __awaiter(this, arguments, void 0, function* ({ assistantId: id }) {
+    return __awaiter(this, arguments, void 0, function* ({ assistantId: id, working, }) {
         const { projectId, projectRef, assistantId } = (0, utils_2.parseIdentity)(id, { rejectWhenError: true });
         return (0, request_1.request)({
             url: (0, ufo_1.joinURL)((0, utils_1.getComponentMountPoint)(constants_1.AI_STUDIO_DID), '/api/projects', projectId, 'refs', projectRef, 'assistants', assistantId),
+            query: { working },
         });
     });
 }

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

@@ -8,6 +8,17 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
         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)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.deleteMessages = exports.getMessages = void 0;
 const ufo_1 = require("ufo");
@@ -15,9 +26,11 @@ const utils_1 = require("../../../utils");
 const constants_1 = require("../constants");
 const request_1 = require("./request");
 function getMessages(_a) {
-    return __awaiter(this, arguments, void 0, function* ({ sessionId, }) {
+    return __awaiter(this, void 0, void 0, function* () {
+        var { sessionId } = _a, query = __rest(_a, ["sessionId"]);
         return (0, request_1.request)({
             url: (0, ufo_1.joinURL)((0, utils_1.getComponentMountPoint)(constants_1.AI_STUDIO_DID), '/api/sessions', sessionId, 'messages'),
+            query,
         });
     });
 }

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

@@ -22,6 +22,8 @@ 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");
+const ufo_1 = require("ufo");
+const error_1 = require("../error");
 let isDEV = false;
 try {
     // @ts-ignore
@@ -34,8 +36,8 @@ 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;
-        var { url, body } = _a, init = __rest(_a, ["url", "body"]);
-        const result = yield (0, exports.fetch)(url, Object.assign(Object.assign({}, init), { headers: {
+        var { url, query, body } = _a, init = __rest(_a, ["url", "query", "body"]);
+        const result = yield (0, exports.fetch)((0, ufo_1.withQuery)(url, query !== null && query !== void 0 ? query : {}), Object.assign(Object.assign({}, init), { headers: {
                 'Content-Type': 'application/json',
             }, body: typeof body === 'object' ? JSON.stringify(body) : body }));
         if (!(result.status >= 200 && result.status < 300)) {
@@ -47,7 +49,7 @@ function request(_a) {
                 console.error('parse response error', error);
             }
             const message = (_d = (_c = (_b = json === null || json === void 0 ? void 0 : json.error) === null || _b === void 0 ? void 0 : _b.message) !== null && _c !== void 0 ? _c : json === null || json === void 0 ? void 0 : json.message) !== null && _d !== void 0 ? _d : json === null || json === void 0 ? void 0 : json.error;
-            throw new Error(typeof message === 'string' ? message : `request error ${result.status}`);
+            throw new error_1.CustomError(result.status, typeof message === 'string' ? message : `request error ${result.status}`);
         }
         return result.json();
     });

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

@@ -81,7 +81,7 @@ function deleteSession(_a) {
 }
 exports.deleteSession = deleteSession;
 function runAssistant(_a) {
-    return __asyncGenerator(this, arguments, function* runAssistant_1({ sessionId, identity, parameters, }) {
+    return __asyncGenerator(this, arguments, function* runAssistant_1({ sessionId, identity, working, parameters, }) {
         var _b;
         const res = yield __await((0, request_1.fetch)((0, ufo_1.joinURL)((0, utils_1.getComponentMountPoint)(constants_1.AI_STUDIO_DID), '/api/ai/call'), {
             method: 'POST',
@@ -89,7 +89,7 @@ function runAssistant(_a) {
                 'Content-Type': 'application/json',
                 Accept: 'text/event-stream',
             },
-            body: JSON.stringify(Object.assign(Object.assign({ sessionId, parameters: Object.assign(Object.assign({}, parameters), { $clientTime: new Date().toISOString() }) }, identity), { ref: identity.projectRef, working: true })),
+            body: JSON.stringify(Object.assign(Object.assign({ sessionId, parameters: Object.assign(Object.assign({}, parameters), { $clientTime: new Date().toISOString() }) }, identity), { ref: identity.projectRef, working })),
         }));
         if (!(res.status >= 200 && res.status < 300)) {
             let json;

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

@@ -14,17 +14,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
 const material_1 = require("@mui/material");
 const locale_1 = require("../../../locale");
-const subscribe_1 = require("../hooks/subscribe");
 function PoweredBy(_a) {
     var { assistantId } = _a, props = __rest(_a, ["assistantId"]);
     const { t } = (0, locale_1.useLocaleContext)();
-    const { subscribeLink } = (0, subscribe_1.useSubscribeLink)({ assistantId });
-    return ((0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ py: 0.5 }, props, { children: [subscribeLink && ((0, jsx_runtime_1.jsxs)(material_1.Box, { className: "ai-chat-require-subscribe-footer", sx: {
-                    px: 2,
-                    fontSize: 12,
-                    lineHeight: '20px',
-                    textAlign: 'center',
-                    color: 'rgba(75, 85, 99, 1)',
-                }, children: [t('requireNewSubscriptionFooter'), (0, jsx_runtime_1.jsx)(material_1.Link, { href: subscribeLink, sx: { ml: 0.5 }, children: t('subscribeNow') })] })), (0, jsx_runtime_1.jsx)(material_1.Stack, { className: "ai-chat-powered-by", direction: "row", justifyContent: "center", children: (0, jsx_runtime_1.jsxs)(material_1.Typography, { variant: "caption", sx: { display: 'inline-flex', alignItems: 'center', a: { display: 'inline-flex', alignItems: 'center' } }, children: [(0, jsx_runtime_1.jsxs)(material_1.Typography, { component: "span", fontSize: 12, color: "text.poweredBy", children: [t('poweredBy'), ' '] }), "\u00A0", (0, jsx_runtime_1.jsxs)(material_1.Link, { href: "https://www.arcblock.io", target: "_blank", color: "text.poweredBy", children: [(0, jsx_runtime_1.jsx)(material_1.Box, { component: "img", src: "https://www.arcblock.io/.well-known/service/blocklet/logo", sx: { height: 16, verticalAlign: 'middle', mr: 0.5, borderRadius: 0.5 } }), "ArcBlock"] }), "\u00A0\u00B7\u00A0", (0, jsx_runtime_1.jsxs)(material_1.Link, { href: "https://www.aigne.io", target: "_blank", color: "text.poweredBy", children: [(0, jsx_runtime_1.jsx)(material_1.Box, { component: "img", src: "https://www.aigne.io/.well-known/service/blocklet/logo", sx: { height: 16, verticalAlign: 'middle', mr: 0.5, borderRadius: 0.5 } }), "AIGNE"] })] }) })] })));
+    return ((0, jsx_runtime_1.jsx)(material_1.Stack, Object.assign({ py: 0.5 }, props, { children: (0, jsx_runtime_1.jsx)(material_1.Stack, { className: "ai-chat-powered-by", direction: "row", justifyContent: "center", children: (0, jsx_runtime_1.jsxs)(material_1.Typography, { variant: "caption", sx: { display: 'inline-flex', alignItems: 'center', a: { display: 'inline-flex', alignItems: 'center' } }, children: [(0, jsx_runtime_1.jsxs)(material_1.Typography, { component: "span", fontSize: 12, color: "text.poweredBy", children: [t('poweredBy'), ' '] }), "\u00A0", (0, jsx_runtime_1.jsxs)(material_1.Link, { href: "https://www.arcblock.io", target: "_blank", color: "text.poweredBy", children: [(0, jsx_runtime_1.jsx)(material_1.Box, { component: "img", src: "https://www.arcblock.io/.well-known/service/blocklet/logo", sx: { height: 16, verticalAlign: 'middle', mr: 0.5, borderRadius: 0.5 } }), "ArcBlock"] }), "\u00A0\u00B7\u00A0", (0, jsx_runtime_1.jsxs)(material_1.Link, { href: "https://www.aigne.io", target: "_blank", color: "text.poweredBy", children: [(0, jsx_runtime_1.jsx)(material_1.Box, { component: "img", src: "https://www.aigne.io/.well-known/service/blocklet/logo", sx: { height: 16, verticalAlign: 'middle', mr: 0.5, borderRadius: 0.5 } }), "AIGNE"] })] }) }) })));
 }
 exports.default = PoweredBy;

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

@@ -18,5 +18,5 @@ function RuntimeProvider({ 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%' } })));
+    return ((0, jsx_runtime_1.jsx)(ux_1.Result, { status: error.status || 'error', description: error.message, sx: { bgcolor: 'transparent', mt: '20%' } }));
 }

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

@@ -54,7 +54,7 @@ function ThemeProvider({ children, template, transparentHeaderBg, }) {
                             style: ({ theme }) => theme.unstable_sx({
                                 '.MuiInputBase-root': {
                                     fieldset: { borderColor: 'rgba(229, 231, 235, 1)' },
-                                    '&:hover': {
+                                    [`:not(.${material_1.inputBaseClasses.disabled}):hover`]: {
                                         fieldset: {
                                             border: 'none',
                                             boxShadow: `0px 0px 0px 4px ${(0, material_1.alpha)(theme.palette.primary.main, 0.2)}, 0px 0px 0px 1px ${theme.palette.primary.main}`,

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

@@ -49,8 +49,9 @@ const QuestionField_1 = __importDefault(require("./QuestionField"));
 const SettingButton_1 = __importDefault(require("./SettingButton"));
 function ParameterForm(_a) {
     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;
+    var { page, 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 { sessionId } = page;
     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'));
@@ -69,9 +70,8 @@ function ParameterForm(_a) {
     }, [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'));
+            form.reset(Object.assign(Object.assign({}, parameters), { question: '' }));
         }
     });
     const [expand, setExpand] = (0, react_2.useState)(false);
@@ -84,6 +84,6 @@ function ParameterForm(_a) {
                                     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 || t('send'), 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('send') }) }) })] }))) })] }));
+                    (isChat ? ((0, jsx_runtime_1.jsx)(QuestionField_1.default, { page: page, showSettingButton: !!sessionId, assistant: assistant, disabled: disabled, submitButtonTitle: submitButtonTitle || t('send'), 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: [page.page === 'session' && (0, jsx_runtime_1.jsx)(SettingButton_1.default, { form: form, page: page }), (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('send') }) }) })] }))) })] }));
 }
 exports.default = ParameterForm;

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

@@ -50,7 +50,11 @@ function ParameterFormFields(_a) {
                                         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, { 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' } })] }));
+                                    }, 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: {
+                                        '& .MuiInputBase-root': {
+                                            bgcolor: 'background.paper',
+                                        },
+                                    } })] }));
                     } }) }, parameter.id));
         }) })));
 }

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

@@ -11,7 +11,7 @@ const react_hook_form_1 = require("react-hook-form");
 const locale_1 = require("../../../../locale");
 const LoadingButton_1 = __importDefault(require("../LoadingButton"));
 const SettingButton_1 = __importDefault(require("./SettingButton"));
-function QuestionField({ sessionId, assistant, showSettingButton, form, isSubmitting, autoFocus, readOnly, disabled, submitButtonTitle, }) {
+function QuestionField({ page, assistant, showSettingButton, form, isSubmitting, autoFocus, readOnly, disabled, submitButtonTitle, }) {
     const { t } = (0, locale_1.useLocaleContext)();
     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]);
@@ -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, { form: form, sessionId: sessionId, sx: { minWidth: 32, minHeight: 32 }, tabIndex: -1 })),
+                startAdornment: showSettingButton && page.page === 'session' && ((0, jsx_runtime_1.jsx)(SettingButton_1.default, { form: form, page: page, 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

@@ -28,12 +28,12 @@ const react_1 = require("@iconify/react");
 const material_1 = require("@mui/material");
 const react_2 = require("react");
 const locale_1 = require("../../../../locale");
-const session_1 = require("../../state/session");
+const session_1 = require("../../api/session");
+const loading_1 = require("../../state/loading");
 const LoadingListItemButton_1 = __importDefault(require("../LoadingListItemButton"));
 function SettingButton(_a) {
-    var { sessionId, form } = _a, props = __rest(_a, ["sessionId", "form"]);
+    var { page, form } = _a, props = __rest(_a, ["page", "form"]);
     const { t } = (0, locale_1.useLocaleContext)();
-    const [, state] = (0, session_1.useSessionState)({ sessionId, required: true });
     const [openSetting, setOpenSetting] = (0, react_2.useState)(false);
     const settingOptions = [
         // {
@@ -46,15 +46,22 @@ function SettingButton(_a) {
         //   },
         // },
         {
-            key: 'clearSession',
-            label: t('clearSession'),
+            key: 'newSession',
+            label: t('newObject', { object: t('session') }),
             onClick: () => __awaiter(this, void 0, void 0, function* () {
                 form.setFocus('question');
-                yield state.clearSession({
-                    sessionId,
-                });
+                yield loading_1.globalLoadingState.getState().run(() => __awaiter(this, void 0, void 0, function* () {
+                    const { created: session } = yield (0, session_1.createSession)({
+                        assistantId: page.assistantId,
+                    });
+                    page.navigate({
+                        page: 'session',
+                        assistantId: page.assistantId,
+                        sessionId: session.id,
+                    });
+                }));
             }),
-            icon: 'tabler:eraser',
+            icon: 'tabler:plus',
             sx: {
                 color: 'rgba(225, 29, 72, 1)',
             },

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

@@ -6,12 +6,18 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
 const material_1 = require("@mui/material");
 const locale_1 = require("../../../../locale");
+const auth_1 = require("../../hooks/auth");
 const subscribe_1 = require("../../hooks/subscribe");
+const assistant_1 = require("../../state/assistant");
 const MarkdownRenderer_1 = __importDefault(require("../MarkdownRenderer"));
-function MessageErrorView({ assistantId, assistant, error, }) {
+function MessageErrorView({ page, error }) {
     var _a, _b, _c;
     const { t } = (0, locale_1.useLocaleContext)();
-    const { subscribeLink } = (0, subscribe_1.useSubscribeLink)({ assistantId });
+    const [assistant] = (0, assistant_1.useAssistantState)(page);
+    const { subscribeLink } = (0, subscribe_1.useSubscribeLink)(page);
+    const login = (0, auth_1.useLogin)({ page });
+    if (!error)
+        return null;
     if (error.type === 'InvalidSubscriptionError') {
         return ((0, jsx_runtime_1.jsxs)(material_1.Box, { className: "ai-chat-message-error", children: [(0, jsx_runtime_1.jsx)(material_1.Box, { className: "message-response", children: (0, jsx_runtime_1.jsx)(MarkdownRenderer_1.default, { children: t('requireNewSubscription', {
                             price: (_b = (_a = assistant.release) === null || _a === void 0 ? void 0 : _a.payment) === null || _b === void 0 ? void 0 : _b.price,
@@ -19,6 +25,11 @@ function MessageErrorView({ assistantId, assistant, error, }) {
                     // @ts-ignore
                     (0, jsx_runtime_1.jsx)(material_1.Button, { variant: "contained", color: "black", href: subscribeLink, children: t('subscribeNow') })) : ((0, jsx_runtime_1.jsx)(material_1.Box, { className: "message-response", children: t('thanksForSubscription') })) })] }));
     }
-    return ((0, jsx_runtime_1.jsx)(material_1.Alert, { className: "ai-chat-message-error", severity: "error", children: (error.type === 'ReachMaxRoundLimitError' && ((_c = assistant === null || assistant === void 0 ? void 0 : assistant.release) === null || _c === void 0 ? void 0 : _c.reachMaxRoundLimitTip)) || error.message }));
+    if (error.status === 401) {
+        return ((0, jsx_runtime_1.jsxs)(material_1.Box, { className: "ai-chat-message-error", children: [(0, jsx_runtime_1.jsx)(material_1.Box, { className: "message-response", children: (0, jsx_runtime_1.jsx)(MarkdownRenderer_1.default, { children: t('requireLogin') }) }), (0, jsx_runtime_1.jsx)(material_1.Box, { mt: 1, children: (0, jsx_runtime_1.jsx)(material_1.Button, { variant: "contained", 
+                        // @ts-ignore
+                        color: "black", onClick: login, children: t('loginNow') }) })] }));
+    }
+    return ((0, jsx_runtime_1.jsx)(material_1.Alert, { className: "ai-chat-message-error", severity: "error", sx: { mr: 5 }, children: (error.type === 'ReachMaxRoundLimitError' && ((_c = assistant === null || assistant === void 0 ? void 0 : assistant.release) === null || _c === void 0 ? void 0 : _c.reachMaxRoundLimitTip)) || error.message }));
 }
 exports.default = MessageErrorView;

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

@@ -22,49 +22,77 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __setModuleDefault(result, mod);
     return result;
 };
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.MessageItemWrapper = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const image_preview_1 = __importDefault(require("@blocklet/ai-kit/components/image-preview"));
+const css_1 = require("@emotion/css");
 const material_1 = require("@mui/material");
 const dayjs_1 = __importDefault(require("dayjs"));
 const react_1 = __importStar(require("react"));
 const ux_1 = require("../../../../arcblock/ux");
 const session_1 = require("../../../../session");
+const assistant_1 = require("../../state/assistant");
 const common_1 = require("../common");
 const MarkdownRenderer_1 = __importDefault(require("../MarkdownRenderer"));
 const MessageActions_1 = __importDefault(require("./MessageActions"));
 const MessageErrorView_1 = __importDefault(require("./MessageErrorView"));
-function MessageItemView({ assistantId, assistant, message, hideAvatar, }) {
-    var _a, _b;
-    const showUserMessage = ((_a = assistant.release) === null || _a === void 0 ? void 0 : _a.template) !== 'form' && !!((_b = message.parameters) === null || _b === void 0 ? void 0 : _b.question);
-    const commonMessageSx = {
-        position: 'relative',
-        borderRadius: 1,
-        py: 1,
-        px: 2,
-        mt: 0.5,
-        // without logo width
-        maxWidth: 'calc(100% - 40px)',
-    };
-    return ((0, jsx_runtime_1.jsxs)(material_1.Stack, { className: "ai-chat-message-item", gap: 2.5, overflow: "hidden", 
-        // @ts-ignore
-        sx: {
-            '.message-question': Object.assign(Object.assign(Object.assign({}, commonMessageSx), (!hideAvatar
-                ? {
-                    borderTopRightRadius: '2px',
-                }
-                : {})), { borderTopRightRadius: !hideAvatar && '2px', backgroundColor: 'rgba(239, 246, 255, 1)' }),
-            '.message-response': Object.assign(Object.assign(Object.assign({}, commonMessageSx), (!hideAvatar
-                ? {
-                    borderTopLeftRadius: '2px',
-                }
-                : {})), { backgroundColor: 'rgba(229, 231, 235, 1)' }),
-        }, children: [showUserMessage && (0, jsx_runtime_1.jsx)(UserMessage, { message: message }), (0, jsx_runtime_1.jsx)(AgentMessage, { assistantId: assistantId, assistant: assistant, message: message, hideAvatar: hideAvatar })] }));
+function MessageItemView(_a) {
+    var _b, _c;
+    var { page, message, hideAvatar } = _a, props = __rest(_a, ["page", "message", "hideAvatar"]);
+    const [assistant] = (0, assistant_1.useAssistantState)(page);
+    const showUserMessage = ((_b = assistant.release) === null || _b === void 0 ? void 0 : _b.template) !== 'form' && !!((_c = message.parameters) === null || _c === void 0 ? void 0 : _c.question);
+    return ((0, jsx_runtime_1.jsxs)(MessageItemContainer, Object.assign({}, props, { className: (0, css_1.cx)('ai-chat-message-item', hideAvatar && 'hide-avatar', props.className), children: [showUserMessage && (0, jsx_runtime_1.jsx)(UserMessage, { message: message }), (0, jsx_runtime_1.jsx)(AgentMessage, { page: page, message: message, hideAvatar: hideAvatar })] })));
 }
 exports.default = MessageItemView;
+const MessageItemContainer = (0, material_1.styled)(material_1.Stack) `
+  gap: 2.5;
+  overflow: hidden;
+
+  .message-question {
+    position: relative;
+    border-radius: ${({ theme }) => theme.shape.borderRadius}px;
+    border-top-right-radius: 2px;
+    padding: ${({ theme }) => theme.spacing(1, 2)};
+    margin-top: ${({ theme }) => theme.spacing(0.5)};
+    // without logo width
+    max-width: calc(100% - 40px);
+    background-color: rgba(239, 246, 255, 1);
+
+    &.hide-avatar {
+      border-top-right-radius: ${({ theme }) => theme.shape.borderRadius}px;
+    }
+  }
+
+  .message-response {
+    position: relative;
+    border-radius: ${({ theme }) => theme.shape.borderRadius}px;
+    border-top-left-radius: 2px;
+    padding: ${({ theme }) => theme.spacing(1, 2)};
+    margin-top: ${({ theme }) => theme.spacing(0.5)};
+    // without logo width
+    max-width: calc(100% - 40px);
+    background-color: rgba(229, 231, 235, 1);
+
+    &.hide-avatar {
+      border-top-left-radius: ${({ theme }) => theme.shape.borderRadius}px;
+    }
+  }
+`;
 function UserMessage({ message }) {
     var _a, _b, _c, _d;
     const { session: authSession } = (0, session_1.useSessionContext)();
@@ -79,14 +107,15 @@ function UserMessage({ message }) {
                     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, }) {
+function AgentMessage({ page, message, hideAvatar }) {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
+    const [assistant] = (0, assistant_1.useAssistantState)(page);
     const showMainMessage = !!(((_a = message.result) === null || _a === void 0 ? void 0 : _a.content) || ((_c = (_b = message.result) === null || _b === void 0 ? void 0 : _b.messages) === null || _c === void 0 ? void 0 : _c.length));
     const isMessageLoading = (message.loading || !message.result) && !message.error;
     const theme = (0, material_1.useTheme)();
     const isMobile = (0, material_1.useMediaQuery)(theme.breakpoints.down('sm'));
     const isFormTemplate = ((_d = assistant.release) === null || _d === void 0 ? void 0 : _d.template) === 'form';
-    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: (_e = globalThis.blocklet) === null || _e === void 0 ? void 0 : _e.appId, variant: "circle", shape: "circle", src: (_f = assistant.release) === null || _f === void 0 ? void 0 : _f.logo }) })), (0, jsx_runtime_1.jsxs)(material_1.Box, { flex: 1, overflow: "hidden", children: [!hideAvatar && ((0, jsx_runtime_1.jsxs)(MessageUserName, { children: [((_g = assistant.release) === null || _g === void 0 ? void 0 : _g.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.jsx)(material_1.Tooltip, Object.assign({}, (isFormTemplate && {
+    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: (_e = globalThis.blocklet) === null || _e === void 0 ? void 0 : _e.appId, variant: "circle", shape: "circle", src: (_f = assistant.release) === null || _f === void 0 ? void 0 : _f.logo }) })), (0, jsx_runtime_1.jsxs)(material_1.Box, { flex: 1, width: 0, children: [!hideAvatar && ((0, jsx_runtime_1.jsxs)(MessageUserName, { children: [((_g = assistant.release) === null || _g === void 0 ? void 0 : _g.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.jsx)(material_1.Tooltip, Object.assign({}, (isFormTemplate && {
                                 open: true,
                             }), { placement: "right-start", PopperProps: {
                                     className: 'white-tooltip',
@@ -112,8 +141,15 @@ function AgentMessage({ assistantId, assistant, message, hideAvatar, }) {
                                         }), ((_l = message.result) === null || _l === void 0 ? void 0 : _l.content) && ((0, jsx_runtime_1.jsx)(MarkdownRenderer_1.default, { className: isMessageLoading ? 'writing' : '', children: message.result.content }))] }) }))) : (isMessageLoading && ((0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "rectangular", height: 24 + 8 + 8, 
                                 // only response with loading
                                 className: "message-response" }))), !!((_o = (_m = message.result) === null || _m === void 0 ? void 0 : _m.objects) === null || _o === void 0 ? void 0 : _o.length) &&
-                                ((_q = (_p = message.result) === null || _p === void 0 ? void 0 : _p.objects) === null || _q === void 0 ? void 0 : _q.map((object) => ((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 })] })] })] }));
+                                ((_q = (_p = message.result) === null || _p === void 0 ? void 0 : _p.objects) === null || _q === void 0 ? void 0 : _q.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, { page: page, error: message.error })] })] })] }));
+}
+function MessageItemWrapper(_a) {
+    var _b, _c, _d;
+    var { hideAvatar, assistant, agentMessage } = _a, props = __rest(_a, ["hideAvatar", "assistant", "agentMessage"]);
+    const [time] = (0, react_1.useState)(() => new Date().toISOString());
+    return ((0, jsx_runtime_1.jsx)(MessageItemContainer, Object.assign({}, props, { className: (0, css_1.cx)('ai-chat-message-item', hideAvatar && 'hide-avatar', props.className), children: agentMessage && ((0, jsx_runtime_1.jsxs)(material_1.Stack, { className: "ai-chat-message-ai", direction: "row", gap: 1.5, children: [!hideAvatar && ((0, jsx_runtime_1.jsx)(material_1.Box, { children: (0, jsx_runtime_1.jsx)(ux_1.Avatar, { size: 40, did: (_b = globalThis.blocklet) === null || _b === void 0 ? void 0 : _b.appId, variant: "circle", shape: "circle", src: (_c = assistant.release) === null || _c === void 0 ? void 0 : _c.logo }) })), (0, jsx_runtime_1.jsxs)(material_1.Box, { flex: 1, width: 0, children: [!hideAvatar && ((0, jsx_runtime_1.jsxs)(MessageUserName, { children: [((_d = assistant.release) === null || _d === void 0 ? void 0 : _d.title) || assistant.name, (0, jsx_runtime_1.jsx)(MessageTime, { time: time })] })), agentMessage] })] })) })));
 }
+exports.MessageItemWrapper = MessageItemWrapper;
 function MessageUserName({ children }) {
     return ((0, jsx_runtime_1.jsx)(material_1.Typography, { component: "div", noWrap: true, sx: {
             fontSize: 14,

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

@@ -21,15 +21,16 @@ const assistant_1 = require("../../state/assistant");
 const session_1 = require("../../state/session");
 const MessageItemView_1 = __importDefault(require("./MessageItemView"));
 function MessageListView(_a) {
-    var { assistantId, sessionId } = _a, props = __rest(_a, ["assistantId", "sessionId"]);
-    const [assistant] = (0, assistant_1.useAssistantState)({ assistantId });
-    const [session, { messages = [] }] = (0, session_1.useSessionState)({ sessionId, required: true });
+    var { page } = _a, props = __rest(_a, ["page"]);
+    const [assistant] = (0, assistant_1.useAssistantState)(page);
+    const [session, { messages = [] }] = (0, session_1.useSessionState)({ sessionId: page.sessionId, required: true });
     const opener = (0, react_1.useMemo)(() => {
         var _a;
         const { openerMessage } = (_a = assistant.release) !== null && _a !== void 0 ? _a : {};
         if (openerMessage) {
             return {
                 taskId: '',
+                assistantId: assistant.id,
                 sessionId: session.id,
                 createdAt: session.createdAt,
                 updatedAt: session.createdAt,
@@ -40,8 +41,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) => {
-                return ((0, jsx_runtime_1.jsx)(MessageItemView_1.default, { assistantId: assistantId, assistant: assistant, message: message }, 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, { page: page, message: opener }), messages.map((message) => {
+                return (0, jsx_runtime_1.jsx)(MessageItemView_1.default, { page: page, message: message }, message.taskId);
             })] })));
 }
 exports.default = MessageListView;

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

@@ -0,0 +1,39 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const material_1 = require("@mui/material");
+const react_1 = require("react");
+const RadioField = (0, react_1.forwardRef)((_a, ref) => {
+    var _b;
+    var { readOnly, parameter, onChange } = _a, props = __rest(_a, ["readOnly", "parameter", "onChange"]);
+    return ((0, jsx_runtime_1.jsx)(material_1.RadioGroup, Object.assign({ ref: ref, row: true, onChange: (e) => onChange(e.target.value) }, props, { children: (_b = parameter === null || parameter === void 0 ? void 0 : parameter.options) === null || _b === void 0 ? void 0 : _b.map((option) => {
+            const checked = option.value === props.value;
+            return ((0, jsx_runtime_1.jsx)(material_1.FormControlLabel, { label: option.label, disabled: readOnly, value: option.value, checked: checked, control: (0, jsx_runtime_1.jsx)(material_1.Radio, {}), sx: {
+                    transition: 'all 0.3s linear',
+                    ml: 0,
+                    mr: 1,
+                    my: 0.5,
+                    py: 0.5,
+                    px: 2.5,
+                    border: 2,
+                    borderColor: (theme) => (checked ? theme.palette.primary.main : (0, material_1.alpha)(theme.palette.primary.main, 0.3)),
+                    borderRadius: 8,
+                    '.MuiRadio-root': {
+                        // hidden radio button
+                        display: 'none',
+                    },
+                } }, option.id));
+        }) })));
+});
+exports.default = RadioField;

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

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

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

@@ -17,9 +17,11 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
 const LanguageField_1 = __importDefault(require("./LanguageField"));
 const NumberField_1 = __importDefault(require("./NumberField"));
+const RadioField_1 = __importDefault(require("./RadioField"));
 const SelectField_1 = __importDefault(require("./SelectField"));
 const StringField_1 = __importDefault(require("./StringField"));
 function ParameterField(_a) {
+    var _b;
     var { parameter } = _a, props = __rest(_a, ["parameter"]);
     if (parameter.type === 'source')
         return null;
@@ -29,7 +31,9 @@ function ParameterField(_a) {
     const Field = {
         number: NumberField_1.default,
         string: StringField_1.default,
-        select: SelectField_1.default,
+        select: parameter.type === 'select' && ((_b = parameter.options) === null || _b === void 0 ? void 0 : _b.length) && parameter.options.length <= 8
+            ? RadioField_1.default
+            : SelectField_1.default,
         language: LanguageField_1.default,
     }[parameter.type || 'string'] || StringField_1.default;
     return ((0, jsx_runtime_1.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)));