@blocklet/pages-kit 0.2.285 → 0.2.287

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

@@ -0,0 +1,135 @@
+"use strict";
+// import { Icon } from '@iconify/react';
+// import { Alert, Button, CircularProgress, Divider, Stack, TextField } from '@mui/material';
+// import { useEffect, useRef, useState } from 'react';
+// import { useForm } from 'react-hook-form';
+// import { Result, Toast } from '../../../../arcblock/ux';
+// import { useLocaleContext } from '../../../../locale';
+// import { getDocument } from '../../api/dataset';
+// import { useCurrentPage, useNavigateTo, useNavigateWithQuery } from '../../hooks/navigate';
+// import { createDatasetDetailState } from '../../state';
+// import Layout from '../layout';
+// import LoadingButton from '../LoadingButton';
+// export default function DocumentView() {
+//   const { t } = useLocaleContext();
+//   const to = useNavigateTo();
+//   const navigate = useNavigateWithQuery();
+//   const [loading, setLoading] = useState(false);
+//   const [error, setError] = useState();
+//   const { datasetId, documentId } = useCurrentPage();
+//   const datasetDetailState = createDatasetDetailState({ datasetId })();
+//   const form = useForm({});
+//   const hiddenSubmit = useRef();
+//   useEffect(() => {
+//     if (!documentId) {
+//       form.reset();
+//       return;
+//     }
+//     (async () => {
+//       setLoading(true);
+//       try {
+//         const { document } = await getDocument(datasetId, documentId);
+//         form.reset({
+//           name: document.name,
+//           content: document.content,
+//         });
+//       } catch (error) {
+//         setError(error);
+//       } finally {
+//         setLoading(false);
+//       }
+//     })();
+//   }, [documentId]);
+//   const onSubmit = async (input) => {
+//     try {
+//       if (documentId) {
+//         await datasetDetailState.updateDocument(documentId, 'text', input);
+//       } else {
+//         await datasetDetailState.createDocument('text', input);
+//       }
+//       navigate({ page: 'collection', datasetId });
+//     } catch (error) {
+//       Toast.error(error.message);
+//       console.error(error);
+//     }
+//   };
+//   if (error) {
+//     return <Result status="error" title={error.message} sx={{ bgcolor: 'transparent', my: 10 }} />;
+//   }
+//   return (
+//     <>
+//       <Stack
+//         direction="row"
+//         height={64}
+//         alignItems="center"
+//         justifyContent="space-between"
+//         sx={{
+//           position: 'sticky',
+//           top: 64,
+//           bgcolor: 'background.default',
+//           zIndex: 10,
+//           borderBottom: 1,
+//           borderColor: 'divider',
+//           px: 2.5,
+//         }}>
+//         <Button
+//           sx={{ minWidth: 32, minHeight: 32, px: 1, ml: -1 }}
+//           component={RouterLink}
+//           startIcon={<Icon icon="tabler:chevron-left" />}
+//           to={to({ page: 'collection', datasetId })}>
+//           {t('back')}
+//         </Button>
+//         <LoadingButton
+//           disabled={loading}
+//           size="small"
+//           variant="contained"
+//           color="secondary"
+//           startIcon={<Icon icon="tabler:book-2" />}
+//           loading={form.formState.isSubmitting}
+//           loadingPosition="start"
+//           onClick={() => hiddenSubmit.current.click()}>
+//           {t('save')}
+//         </LoadingButton>
+//       </Stack>
+//       <Layout>
+//         {loading || error ? (
+//           <Stack alignItems="center" gap={0.5} mt="10vh" mx={3}>
+//             {loading ? <CircularProgress size={24} /> : error ? <Alert severity="error">{error.message}</Alert> : null}
+//           </Stack>
+//         ) : (
+//           <Stack
+//             component="form"
+//             onSubmit={form.handleSubmit(onSubmit)}
+//             sx={{ bgcolor: 'background.paper', mt: 2.5, borderRadius: 1.5, border: 1, borderColor: 'divider' }}>
+//             <TextField
+//               multiline
+//               variant="standard"
+//               InputProps={{
+//                 disableUnderline: true,
+//                 sx: { fontSize: 32, fontWeight: 700, lineHeight: '44px', px: 2.5, pt: 2.5 },
+//               }}
+//               hiddenLabel
+//               placeholder={t('titlePlaceholder')}
+//               {...form.register('name')}
+//             />
+//             <Divider sx={{ my: 1.5, mx: 2.5 }} />
+//             <TextField
+//               variant="standard"
+//               InputProps={{
+//                 disableUnderline: true,
+//                 sx: { px: 2.5, pb: 2.5 },
+//               }}
+//               multiline
+//               minRows={20}
+//               hiddenLabel
+//               size="small"
+//               placeholder={t('contentPlaceholder')}
+//               {...form.register('content')}
+//             />
+//             <Button ref={hiddenSubmit} sx={{ display: 'none' }} type="submit" />
+//           </Stack>
+//         )}
+//       </Layout>
+//     </>
+//   );
+// }

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

@@ -0,0 +1,105 @@
+"use strict";
+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 Dialog_1 = __importDefault(require("@arcblock/ux/lib/Dialog"));
+const react_1 = require("@iconify/react");
+const ArrowBackIosNew_1 = __importDefault(require("@mui/icons-material/ArrowBackIosNew"));
+const material_1 = require("@mui/material");
+const react_2 = require("react");
+const ux_1 = require("../../../../arcblock/ux");
+const assistant_1 = require("../../state/assistant");
+const ScrollView_1 = __importDefault(require("../ScrollView"));
+function ChatBot({ assistantId, size, bottom, right, children, popperWidth, popperHeight, }) {
+    var _a, _b, _c;
+    const anchorEl = (0, react_2.useRef)(null);
+    const [assistant] = (0, assistant_1.useAssistantState)({ assistantId });
+    const [openPopper, setOpenPopper] = (0, react_2.useState)(false);
+    const theme = (0, material_1.useTheme)();
+    const isMobile = (0, material_1.useMediaQuery)(theme.breakpoints.down('sm'));
+    const chatViewSizeSx = isMobile
+        ? { width: '100vw', height: 'calc(100vh - 72px)' }
+        : { width: '40vw', height: '70vh' };
+    if (popperWidth) {
+        chatViewSizeSx.width = popperWidth;
+    }
+    if (popperHeight) {
+        chatViewSizeSx.height = popperHeight;
+    }
+    const title = ((_a = assistant.release) === null || _a === void 0 ? void 0 : _a.title) || (assistant === null || assistant === void 0 ? void 0 : assistant.name);
+    const WrapperComponent = (0, react_2.useCallback)(({ children }) => {
+        if (isMobile) {
+            return ((0, jsx_runtime_1.jsx)(Dialog_1.default, { showCloseButton: false, sx: {
+                    '.ux-dialog_header': {
+                        borderBottom: '1px solid rgba(229, 231, 235, 1)',
+                    },
+                    '.MuiDialogContent-root': {
+                        p: 0,
+                        display: 'flex',
+                    },
+                }, open: openPopper, title: (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: {
+                        display: 'flex',
+                        alignItems: 'center',
+                        gap: 1,
+                        ml: -1,
+                    }, children: [(0, jsx_runtime_1.jsx)(material_1.IconButton, { size: "small", onClick: () => setOpenPopper(false), children: (0, jsx_runtime_1.jsx)(ArrowBackIosNew_1.default, { fontSize: "inherit" }) }), (0, jsx_runtime_1.jsx)(material_1.Box, { children: title })] }), onClose: () => {
+                    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) => {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    setOpenPopper(false);
+                }, children: (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: {
+                        boxShadow: '0px 8px 16px 0px rgba(2, 7, 19, 0.08), 0px 0px 0px 1px rgba(2, 7, 19, 0.08)',
+                        position: 'relative',
+                        background: 'white',
+                        borderRadius: 1,
+                    }, children: [(0, jsx_runtime_1.jsxs)(material_1.Box, { sx: {
+                                zIndex: 1200,
+                                display: 'flex',
+                                alignItems: 'center',
+                                justifyContent: 'space-between',
+                                borderBottom: '1px solid rgba(229, 231, 235, 1)',
+                                px: 2,
+                                py: 2,
+                                height: 70,
+                            }, children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { component: "p", sx: {
+                                        fontSize: 18,
+                                        fontWeight: 600,
+                                        lineHeight: '28px',
+                                    }, children: title }), (0, jsx_runtime_1.jsx)(material_1.Button, { sx: { minWidth: 28, minHeight: 28 }, onClick: () => setOpenPopper(false), children: (0, jsx_runtime_1.jsx)(react_1.Icon, { icon: "ic:round-close", fontSize: 24, color: "rgba(75, 85, 99, 1)" }) })] }), children] }) }) }));
+    }, [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: {
+                    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',
+                    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: {
+                        overscrollBehavior: 'contain',
+                        height: isMobile ? '100%' : `calc(${chatViewSizeSx.height} - 70px)`,
+                        width: '100%',
+                        overflowY: 'auto',
+                        display: 'flex',
+                        '.ai-chat-header': {
+                            pt: 4,
+                        },
+                    }, children: children }) }))] }));
+}
+exports.default = ChatBot;

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

@@ -0,0 +1,21 @@
+"use strict";
+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 image_preview_1 = __importDefault(require("@blocklet/ai-kit/components/image-preview"));
+const types_1 = require("@blocklet/ai-runtime/types");
+const material_1 = require("@mui/material");
+const react_1 = require("react");
+const ReferenceLinks_1 = __importDefault(require("../message/ReferenceLinks"));
+function MessageMetadataRenderer({ object }) {
+    const referenceLinks = object[types_1.RuntimeOutputVariable.referenceLinks];
+    const images = (0, react_1.useMemo)(() => {
+        const list = object[types_1.RuntimeOutputVariable.images];
+        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 })] }))] }));
+}
+exports.default = MessageMetadataRenderer;

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

@@ -0,0 +1,35 @@
+"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 });
+exports.MessageSuggestedQuestion = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const material_1 = require("@mui/material");
+function MessageSuggestedQuestions({ dataSource, onClick, }) {
+    const suggestedQuestions = dataSource;
+    if (suggestedQuestions === null || suggestedQuestions === void 0 ? void 0 : suggestedQuestions.length) {
+        return ((0, jsx_runtime_1.jsx)(material_1.Stack, { gap: 1, children: suggestedQuestions.map((item) => {
+                return ((0, jsx_runtime_1.jsx)(MessageSuggestedQuestion, { onClick: () => onClick === null || onClick === void 0 ? void 0 : onClick(item), children: item.question }, item.question));
+            }) }));
+    }
+    return null;
+}
+exports.default = MessageSuggestedQuestions;
+function MessageSuggestedQuestion(_a) {
+    var props = __rest(_a, []);
+    return ((0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "subtitle2" }, props, { sx: Object.assign({ display: 'inline-block', border: 1, borderColor: 'rgba(229, 231, 235, 1)', borderRadius: 1, py: 1, px: 2, 
+            // without logo width
+            maxWidth: 'calc(100% - 20px)', cursor: 'pointer', '&:hover': {
+                backgroundColor: 'rgba(239, 246, 255, 1)',
+            } }, props.sx) })));
+}
+exports.MessageSuggestedQuestion = MessageSuggestedQuestion;

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

@@ -0,0 +1,12 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ChatBot = exports.MessageSuggestedQuestions = exports.MessageMetadataRenderer = void 0;
+var MessageMetadataRenderer_1 = require("./MessageMetadataRenderer");
+Object.defineProperty(exports, "MessageMetadataRenderer", { enumerable: true, get: function () { return __importDefault(MessageMetadataRenderer_1).default; } });
+var MessageSuggestedQuestions_1 = require("./MessageSuggestedQuestions");
+Object.defineProperty(exports, "MessageSuggestedQuestions", { enumerable: true, get: function () { return __importDefault(MessageSuggestedQuestions_1).default; } });
+var ChatBot_1 = require("./ChatBot");
+Object.defineProperty(exports, "ChatBot", { enumerable: true, get: function () { return __importDefault(ChatBot_1).default; } });

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

@@ -0,0 +1,48 @@
+"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 __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 material_1 = require("@mui/material");
+const omit_1 = __importDefault(require("lodash/omit"));
+const react_1 = 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 QuestionField_1 = __importDefault(require("./QuestionField"));
+const SettingButton_1 = __importDefault(require("./SettingButton"));
+function ParameterForm(_a) {
+    var _b, _c, _d, _e;
+    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)(() => {
+        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 : []);
+    }, [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'));
+    }, [defaultForm]);
+    const handleSubmit = (parameters) => __awaiter(this, void 0, void 0, function* () {
+        if (onSubmit) {
+            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') }) }) })] })))] }));
+}
+exports.default = ParameterForm;

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

@@ -0,0 +1,66 @@
+"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 __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.parameterFormDialogState = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("@iconify/react");
+const material_1 = require("@mui/material");
+const react_hook_form_1 = require("react-hook-form");
+const zustand_1 = require("zustand");
+const immer_1 = require("zustand/middleware/immer");
+const locale_1 = require("../../../../locale");
+const assistant_1 = require("../../state/assistant");
+const session_1 = require("../../state/session");
+const LoadingButton_1 = __importDefault(require("../LoadingButton"));
+const ParameterFormFields_1 = __importDefault(require("./ParameterFormFields"));
+function ParameterFormDialog({ assistantId, sessionId, DialogProps, }) {
+    const { t } = (0, locale_1.useLocaleContext)();
+    const theme = (0, material_1.useTheme)();
+    const fullScreen = (0, material_1.useMediaQuery)(theme.breakpoints.down('sm'));
+    const dialogState = (0, exports.parameterFormDialogState)();
+    const [assistant] = (0, assistant_1.useAssistantState)({ assistantId });
+    const { parameters } = assistant;
+    const [session, sessionState] = (0, session_1.useSessionState)({ sessionId, required: true });
+    const form = (0, react_hook_form_1.useForm)({ defaultValues: Object.assign({}, session.parameters) });
+    const onSubmit = (parameters) => __awaiter(this, void 0, void 0, function* () {
+        yield sessionState.updateSession({ parameters });
+        dialogState.close();
+    });
+    return ((0, jsx_runtime_1.jsxs)(material_1.Dialog, Object.assign({}, DialogProps, { open: dialogState.isOpen, onClose: dialogState.close, fullScreen: fullScreen, maxWidth: "sm", fullWidth: true, component: "form", onSubmit: form.handleSubmit(onSubmit), sx: {
+            zIndex: (theme) => theme.zIndex.modal + 1,
+        }, children: [(0, jsx_runtime_1.jsxs)(material_1.DialogTitle, { sx: { display: 'flex', alignItems: 'center', gap: 1 }, children: [(0, jsx_runtime_1.jsx)(material_1.Box, { flex: 1, children: t('parameters') }), (0, jsx_runtime_1.jsx)(material_1.Button, { sx: { minWidth: 28, minHeight: 28 }, onClick: dialogState.close, children: (0, jsx_runtime_1.jsx)(react_1.Icon, { icon: "ic:round-close", fontSize: 24, color: "rgba(75, 85, 99, 1)" }) })] }), (0, jsx_runtime_1.jsx)(material_1.DialogContent, { dividers: true, children: (0, jsx_runtime_1.jsx)(ParameterFormFields_1.default, { parameters: parameters, form: form }) }), (0, jsx_runtime_1.jsxs)(material_1.DialogActions, { children: [(0, jsx_runtime_1.jsx)(material_1.Button, { variant: "outlined", 
+                        // @ts-ignore
+                        color: "black", size: "small", onClick: dialogState.close, children: t('cancel') }), (0, jsx_runtime_1.jsx)(LoadingButton_1.default, { variant: "contained", color: "black", type: "submit", size: "small", loading: form.formState.isSubmitting, children: t('save') })] })] })));
+}
+exports.default = ParameterFormDialog;
+exports.parameterFormDialogState = (0, zustand_1.create)()((0, immer_1.immer)((set, get) => ({
+    isOpen: false,
+    callback: undefined,
+    open() {
+        return new Promise((resolve) => {
+            set((state) => {
+                state.isOpen = true;
+                state.callback = resolve;
+            });
+        });
+    },
+    close() {
+        var _a, _b;
+        (_b = (_a = get()).callback) === null || _b === void 0 ? void 0 : _b.call(_a);
+        set((state) => {
+            state.isOpen = false;
+            state.callback = undefined;
+        });
+    },
+})));

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

@@ -0,0 +1,43 @@
+"use strict";
+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 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, }) {
+    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) => {
+            const { key, required } = parameter !== null && parameter !== void 0 ? parameter : {};
+            if (!key)
+                return null;
+            const isFirstParameter = !isFirstParameterRendered;
+            isFirstParameterRendered = true;
+            return ((0, jsx_runtime_1.jsx)(material_1.Box, { children: (0, jsx_runtime_1.jsx)(react_hook_form_1.Controller, { disabled: disabled, control: form.control, name: key, rules: {
+                        required,
+                        min: parameter.type === 'number' && typeof parameter.min === 'number'
+                            ? { value: parameter.min, message: '' }
+                            : undefined,
+                        max: parameter.type === 'number' && typeof parameter.max === 'number'
+                            ? { value: parameter.max, message: '' }
+                            : undefined,
+                        minLength: parameter.type === 'string' && typeof parameter.minLength === 'number'
+                            ? { value: parameter.minLength, message: '' }
+                            : undefined,
+                        maxLength: parameter.type === 'string' && typeof parameter.maxLength === 'number'
+                            ? { value: parameter.maxLength, message: '' }
+                            : undefined,
+                    }, render: ({ field, fieldState }) => {
+                        var _a;
+                        return ((0, jsx_runtime_1.jsxs)(material_1.Box, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { component: "div", sx: {
+                                        lineHeight: '24px',
+                                        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' } })] }));
+                    } }) }, parameter.id));
+        }) }));
+}
+exports.default = ParameterFormFields;

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

@@ -0,0 +1,44 @@
+"use strict";
+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");
+const material_1 = require("@mui/material");
+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 SettingButton_1 = __importDefault(require("./SettingButton"));
+function QuestionField({ sessionId, 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]);
+    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) => {
+                var _a;
+                // NOTE: Pressing Enter in the IME will trigger the 229 event
+                if (e.keyCode === 229)
+                    return;
+                if (e.key === 'Enter' && !e.shiftKey) {
+                    e.preventDefault();
+                    (_a = submitRef.current) === null || _a === void 0 ? void 0 : _a.click();
+                }
+            }, 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 })),
+                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
+                            color: "black", sx: {
+                                alignSelf: 'flex-end',
+                                ml: 1,
+                                p: 0.25,
+                                minWidth: 32,
+                                minHeight: 32,
+                            }, loading: form.formState.isSubmitting || isSubmitting, children: (0, jsx_runtime_1.jsx)(react_1.Icon, { icon: "tabler:arrow-up", fontSize: 26 }) }) }) })),
+            } })) }));
+}
+exports.default = QuestionField;

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

@@ -0,0 +1,76 @@
+"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)
+        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 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");
+function SettingButton(_a) {
+    var { sessionId } = _a, props = __rest(_a, ["sessionId"]);
+    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 = [
+        // {
+        //   key: 'parametersSetting',
+        //   label: t('parametersSetting'),
+        //   onClick: () => parametersDialogOpen(),
+        //   icon: 'tabler:adjustments-horizontal',
+        //   sx: {
+        //     color: 'rgba(3, 7, 18, 1)',
+        //   },
+        // },
+        {
+            key: 'clearSession',
+            label: t('clearSession'),
+            onClick: () => __awaiter(this, void 0, void 0, function* () {
+                yield state.clearSession({
+                    sessionId,
+                });
+            }),
+            icon: 'tabler:eraser',
+            sx: {
+                color: 'rgba(225, 29, 72, 1)',
+            },
+        },
+    ];
+    return [
+        (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ id: "setting-button", onClick: () => setOpenSetting(!openSetting) }, props, { sx: Object.assign({ minWidth: 40, minHeight: 40, p: 0, mr: 1, alignSelf: 'flex-end' }, props.sx), children: (0, jsx_runtime_1.jsx)(material_1.Box, { component: react_1.Icon, icon: "tabler:menu-2", sx: { fontSize: 24, color: 'black.main' } }) }), "setting-button"),
+        (0, jsx_runtime_1.jsx)(material_1.Popper, { anchorEl: document.getElementById('setting-button'), open: openSetting, placement: "top-start", sx: { zIndex: (theme) => theme.zIndex.modal + 1 }, children: (0, jsx_runtime_1.jsx)(material_1.ClickAwayListener, { onClickAway: (e) => {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    setOpenSetting(false);
+                }, children: (0, jsx_runtime_1.jsx)(material_1.Paper, { sx: {
+                        py: 0.5,
+                        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: () => {
+                                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));
+                    }) }) }) }, "setting-popper"),
+    ];
+}
+exports.default = SettingButton;

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

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const material_1 = require("@mui/material");
+const utils_1 = require("../../utils");
+function Layout({ children, disableBottomPadding, containerProps, }) {
+    return ((0, jsx_runtime_1.jsx)(material_1.Stack, { className: "ai-chat-wrapper", mx: 2, flexGrow: 1, children: (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: "ai-chat-container" }, containerProps, { sx: (0, utils_1.mergeSx)({
+                flexGrow: 1,
+                maxWidth: 720,
+                width: '100%',
+                mx: 'auto',
+                pb: disableBottomPadding ? 0 : 10,
+            }, containerProps === null || containerProps === void 0 ? void 0 : containerProps.sx), children: children })) }));
+}
+exports.default = Layout;