@blocklet/pages-kit 0.2.360 → 0.2.362

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

@@ -58,7 +58,7 @@ export default function ThemeProvider({ children }) {
                             props: {},
                             style: ({ theme }) => theme.unstable_sx({
                                 '.MuiInputBase-root': {
-                                    fieldset: { borderColor: 'rgba(229, 231, 235, 1)' },
+                                    fieldset: { borderColor: 'grey.400' },
                                     [`&.Mui-focused, :not(.${inputBaseClasses.disabled}):hover`]: {
                                         fieldset: {
                                             border: 'none',

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

@@ -12,7 +12,7 @@ import { cx } from '@emotion/css';
 import { Box, FormLabel, InputAdornment, Stack, formLabelClasses, styled } from '@mui/material';
 import isEmpty from 'lodash/isEmpty';
 import omit from 'lodash/omit';
-import { useEffect, useMemo, useState } from 'react';
+import { useEffect, useMemo, useRef, useState } from 'react';
 import { Controller, useForm } from 'react-hook-form';
 import { useLocaleContext } from '../../../../locale';
 import AgentInputField from '../../components/AgentInputField';
@@ -22,6 +22,7 @@ import { useRuntimeState } from '../../state/runtime';
 import { useCurrentSessionState } from '../../state/session';
 import { isValidInput } from '../../utils/agent-inputs';
 export default function AutoForm({ submitText, inlineLabel, autoFillLastForm = true, submitInQuestionField, chatMode, }) {
+    const submitRef = useRef(null);
     const { t } = useLocaleContext();
     const { aid, agent } = useCurrentAgent();
     const { execute } = useRuntimeState();
@@ -41,6 +42,8 @@ export default function AutoForm({ submitText, inlineLabel, autoFillLastForm = t
         }
     }, [defaultForm, autoFillLastForm, form, chatMode]);
     const onSubmit = (parameters) => __awaiter(this, void 0, void 0, function* () {
+        var _a;
+        (_a = submitRef.current) === null || _a === void 0 ? void 0 : _a.scrollIntoView({ block: 'center' });
         yield execute({
             aid,
             parameters,
@@ -70,11 +73,11 @@ export default function AutoForm({ submitText, inlineLabel, autoFillLastForm = t
                             var _a;
                             return (_jsxs(Stack, { className: "form-item", children: [parameter.label && _jsx(FormLabel, { children: parameter.label }), _jsx(AgentInputField, { inputRef: field.ref, autoFocus: index === 0, size: "small", hiddenLabel: true, fullWidth: true, label: undefined, parameter: parameter, maxRows: !(parameter === null || parameter === void 0 ? void 0 : parameter.type) || (parameter === null || parameter === void 0 ? void 0 : parameter.type) === 'string' ? 5 : undefined, value: field.value || '', onChange: (value) => field.onChange({ target: { value } }), error: Boolean(fieldState.error), helperText: ((_a = fieldState.error) === null || _a === void 0 ? void 0 : _a.message) || (parameter === null || parameter === void 0 ? void 0 : parameter.helper), InputProps: parameter.key === 'question' && submitInQuestionField
                                             ? {
-                                                endAdornment: (_jsx(InputAdornment, { position: "end", sx: { py: 3, mr: -0.75, alignSelf: 'flex-end' }, children: _jsx(LoadingButton, { type: "submit", variant: "contained", loading: running, sx: { borderRadius: 1.5 }, children: submitText }) })),
+                                                endAdornment: (_jsx(InputAdornment, { position: "end", sx: { py: 3, mr: -0.75, alignSelf: 'flex-end' }, children: _jsx(LoadingButton, { ref: submitRef, type: "submit", variant: "contained", loading: running, sx: { borderRadius: 1.5 }, children: submitText }) })),
                                             }
                                             : undefined })] }));
                         } }) }, parameter.id));
-            }), !(submitInQuestionField && (parameters === null || parameters === void 0 ? void 0 : parameters.some((i) => i.key === 'question'))) && (_jsx(LoadingButton, { type: "submit", variant: "contained", loading: running, sx: { height: 40 }, children: submitText || t('generate') }))] }));
+            }), !(submitInQuestionField && (parameters === null || parameters === void 0 ? void 0 : parameters.some((i) => i.key === 'question'))) && (_jsx(LoadingButton, { ref: submitRef, type: "submit", variant: "contained", loading: running, sx: { height: 40 }, children: submitText || t('generate') }))] }));
 }
 function useInitialFormValues() {
     const { agent } = useCurrentAgent();

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

@@ -0,0 +1,39 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cx } from '@emotion/css';
+import { Stack } from '@mui/material';
+export default function DrawerOpenCloseIcon(_a) {
+    var { arrowDirection } = _a, props = __rest(_a, ["arrowDirection"]);
+    return (_jsx(Stack, Object.assign({ direction: "row", position: "relative" }, props, { className: cx(props.className, `drawer-open-close-icon-${arrowDirection || 'up'}`), sx: Object.assign({ p: 1, cursor: 'pointer', ':hover': {
+                opacity: 0.7,
+            }, ':before,:after': {
+                content: '""',
+                display: 'block',
+                bgcolor: 'currentColor',
+                width: 22,
+                height: 6,
+                borderRadius: 100,
+                position: 'relative',
+            }, ':before': {
+                transform: 'translateX(2px) rotateZ(-8deg)',
+            }, ':after': {
+                transform: 'translateX(-2px) rotateZ(8deg)',
+            }, '&.drawer-open-close-icon-down': {
+                ':before': {
+                    transform: 'translateX(2px) rotateZ(8deg)',
+                },
+                ':after': {
+                    transform: 'translateX(-2px) rotateZ(-8deg)',
+                },
+            } }, props.sx) })));
+}

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

@@ -11,22 +11,41 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { RuntimeOutputVariable } from '@blocklet/ai-runtime/types';
-import { Avatar, IconButton, Stack } from '@mui/material';
-import { useMemo } from 'react';
+import { Avatar, Collapse, IconButton, Stack } from '@mui/material';
+import { memo, useMemo, useState } from 'react';
 import CustomComponentRenderer from '../../../../../components/CustomComponentRenderer';
 import { getAssetUrl } from '../../api/asset';
 import { useActiveAgent } from '../../contexts/ActiveAgent';
 import CurrentAgentProvider, { useCurrentAgent } from '../../contexts/CurrentAgent';
 import useAppearances, { useProfile } from '../../hooks/use-appearances';
 import { useRuntimeState } from '../../state/runtime';
+import { isValidInput } from '../../utils/agent-inputs';
 import { getOutputVariableInitialValue } from '../../utils/runtime-output-schema';
+import DrawerOpenCloseIcon from './DrawerOpenCloseIcon';
+const COLLAPSED_SIZE = 80;
 export default function InputsView(_a) {
     var props = __rest(_a, []);
-    const { activeAgentId, setActiveAgentId } = useActiveAgent();
-    const { agent } = useRuntimeState();
-    const children = useMemo(() => { var _a, _b; return (_b = (_a = getOutputVariableInitialValue(agent, RuntimeOutputVariable.children)) === null || _a === void 0 ? void 0 : _a.agents) === null || _b === void 0 ? void 0 : _b.filter((i) => !!i.id); }, [agent]);
-    return (_jsxs(Stack, Object.assign({ gap: 2 }, props, { children: [children && children.length > 1 && (_jsx(Stack, { direction: "row", gap: 2, children: children === null || children === void 0 ? void 0 : children.map((child) => (_jsx(CurrentAgentProvider, { agentId: child.id, children: _jsx(AgentAvatar, { selected: activeAgentId === child.id, onClick: () => setActiveAgentId(child.id) }) }))) })), _jsx(Stack, { children: _jsx(CurrentAgentProvider, { agentId: activeAgentId, children: _jsx(AgentInput, {}) }) })] })));
+    const { activeAgentId } = useActiveAgent();
+    const { agent } = useCurrentAgent({ agentId: activeAgentId });
+    const inputs = useMemo(() => { var _a; return (_a = agent.parameters) === null || _a === void 0 ? void 0 : _a.filter(isValidInput); }, [agent]);
+    const enableCollapse = !!inputs && inputs.length > 1;
+    const [open, setOpen] = useState(true);
+    return (_jsxs(Stack, Object.assign({ gap: 1, py: 1 }, props, { children: [enableCollapse && (_jsx(Stack, { direction: "row", justifyContent: "center", onClick: () => setOpen(!open), mb: -1, children: _jsx(DrawerOpenCloseIcon, { color: "grey.500", arrowDirection: open ? 'down' : 'up' }) })), _jsx(AgentList, { sx: { px: { xs: 2, sm: 3 } } }), _jsx(Collapse, { in: !enableCollapse || open, orientation: "vertical", collapsedSize: enableCollapse ? COLLAPSED_SIZE : 0, sx: {
+                    py: 1,
+                    maxHeight: '40vh',
+                    px: { xs: 2, sm: 3 },
+                    overflow: 'auto',
+                }, children: _jsx(CurrentAgentProvider, { agentId: activeAgentId, children: _jsx(AgentInput, {}) }) }, inputs === null || inputs === void 0 ? void 0 : inputs.length)] })));
 }
+const AgentList = memo((_a) => {
+    var props = __rest(_a, []);
+    const { activeAgentId, setActiveAgentId } = useActiveAgent();
+    const { agent: runtimeAgent } = useRuntimeState();
+    const children = useMemo(() => { var _a, _b; return (_b = (_a = getOutputVariableInitialValue(runtimeAgent, RuntimeOutputVariable.children)) === null || _a === void 0 ? void 0 : _a.agents) === null || _b === void 0 ? void 0 : _b.filter((i) => !!i.id); }, [runtimeAgent]);
+    if (!(children === null || children === void 0 ? void 0 : children.length) || children.length <= 1)
+        return null;
+    return (_jsx(Stack, Object.assign({ direction: "row", gap: 2, py: 1, overflow: "auto" }, props, { children: children === null || children === void 0 ? void 0 : children.map((child) => (_jsx(CurrentAgentProvider, { agentId: child.id, children: _jsx(AgentAvatar, { selected: activeAgentId === child.id, onClick: () => setActiveAgentId(child.id) }) }))) })));
+});
 function AgentAvatar(_a) {
     var _b;
     var { selected } = _a, props = __rest(_a, ["selected"]);

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

@@ -45,11 +45,9 @@ function SimpleChatView() {
     return (_jsxs(SimpleLayout, { px: 0, children: [_jsx(SimpleHeader, { px: 4, sx: { color: hasBg ? 'white' : undefined } }), loading ? (_jsx(Box, { textAlign: "center", my: 10, children: _jsx(CircularProgress, { size: 24 }) })) : (_jsxs(_Fragment, { children: [_jsx(CurrentAgentProvider, { agentId: activeAgentId, children: _jsx(MessagesView, { className: "aigne-outputs aigne-simple-chat-outputs", flexGrow: 1, pb: 10, px: { xs: 2, sm: 3 } }) }), _jsx(CurrentAgentProvider, { agentId: activeAgentId, children: _jsx(InputsView, { className: "aigne-inputs aigne-simple-chat-inputs", sx: {
                                 position: 'sticky',
                                 bottom: 0,
-                                py: 2,
-                                px: { xs: 2, sm: 3 },
                                 zIndex: 10,
                                 borderRadius: 1,
-                                bgcolor: (theme) => alpha(theme.palette.background.paper, 0.7),
-                                backdropFilter: 'blur(10px)',
+                                bgcolor: (theme) => alpha(theme.palette.background.paper, 0.8),
+                                backdropFilter: 'blur(16px)',
                             } }) })] }))] }));
 }