@blocklet/pages-kit 0.2.361 → 0.2.363

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

@@ -64,7 +64,7 @@ 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(.${material_1.inputBaseClasses.disabled}):hover`]: {
                                         fieldset: {
                                             border: 'none',

package/lib/cjs/builtin/async/ai-runtime/hooks/use-appearances.js

@@ -53,17 +53,17 @@ function useAppearances(args) {
     }, [agent, runtimeAgent]);
     return { appearancePage, appearanceInput, appearanceOutput };
 }
-function getProjectIconUrl(projectId) {
-    return (0, ufo_1.joinURL)(window.location.origin, (0, utils_1.getComponentMountPoint)(constants_1.AI_STUDIO_DID), '/api/projects', projectId, '/logo.png');
+function getProjectIconUrl({ blockletDid, aid }) {
+    return (0, ufo_1.withQuery)((0, ufo_1.joinURL)(window.location.origin, (0, utils_1.getComponentMountPoint)(constants_1.AI_RUNTIME_DID), '/api/agents', aid, '/logo'), { blockletDid });
 }
 function useProfile(args) {
-    const { agent: runtimeAgent } = (0, runtime_1.useRuntimeState)();
+    const { blockletDid, aid, agent: runtimeAgent } = (0, runtime_1.useRuntimeState)();
     const { agent } = (0, CurrentAgent_1.useCurrentAgent)(args);
     return (0, react_1.useMemo)(() => {
         const profile = (0, runtime_output_schema_1.getOutputVariableInitialValue)(agent, types_1.RuntimeOutputVariable.profile);
         const runtimeProfile = (0, runtime_output_schema_1.getOutputVariableInitialValue)(runtimeAgent, types_1.RuntimeOutputVariable.profile);
         return {
-            avatar: (profile === null || profile === void 0 ? void 0 : profile.avatar) || (runtimeProfile === null || runtimeProfile === void 0 ? void 0 : runtimeProfile.avatar) || getProjectIconUrl(agent.project.id),
+            avatar: (profile === null || profile === void 0 ? void 0 : profile.avatar) || (runtimeProfile === null || runtimeProfile === void 0 ? void 0 : runtimeProfile.avatar) || getProjectIconUrl({ blockletDid, aid }),
             name: (profile === null || profile === void 0 ? void 0 : profile.name) || (runtimeProfile === null || runtimeProfile === void 0 ? void 0 : runtimeProfile.name) || agent.name,
         };
     }, [agent, runtimeAgent]);

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

@@ -28,6 +28,7 @@ const runtime_1 = require("../../state/runtime");
 const session_1 = require("../../state/session");
 const agent_inputs_1 = require("../../utils/agent-inputs");
 function AutoForm({ submitText, inlineLabel, autoFillLastForm = true, submitInQuestionField, chatMode, }) {
+    const submitRef = (0, react_1.useRef)(null);
     const { t } = (0, locale_1.useLocaleContext)();
     const { aid, agent } = (0, CurrentAgent_1.useCurrentAgent)();
     const { execute } = (0, runtime_1.useRuntimeState)();
@@ -47,6 +48,8 @@ function AutoForm({ submitText, inlineLabel, autoFillLastForm = true, submitInQu
         }
     }, [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,
@@ -76,11 +79,11 @@ function AutoForm({ submitText, inlineLabel, autoFillLastForm = true, submitInQu
                             var _a;
                             return ((0, jsx_runtime_1.jsxs)(material_1.Stack, { className: "form-item", children: [parameter.label && (0, jsx_runtime_1.jsx)(material_1.FormLabel, { children: parameter.label }), (0, jsx_runtime_1.jsx)(AgentInputField_1.default, { 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: ((0, jsx_runtime_1.jsx)(material_1.InputAdornment, { position: "end", sx: { py: 3, mr: -0.75, alignSelf: 'flex-end' }, children: (0, jsx_runtime_1.jsx)(LoadingButton_1.default, { type: "submit", variant: "contained", loading: running, sx: { borderRadius: 1.5 }, children: submitText }) })),
+                                                endAdornment: ((0, jsx_runtime_1.jsx)(material_1.InputAdornment, { position: "end", sx: { py: 3, mr: -0.75, alignSelf: 'flex-end' }, children: (0, jsx_runtime_1.jsx)(LoadingButton_1.default, { 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'))) && ((0, jsx_runtime_1.jsx)(LoadingButton_1.default, { 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'))) && ((0, jsx_runtime_1.jsx)(LoadingButton_1.default, { ref: submitRef, type: "submit", variant: "contained", loading: running, sx: { height: 40 }, children: submitText || t('generate') }))] }));
 }
 function useInitialFormValues() {
     const { agent } = (0, CurrentAgent_1.useCurrentAgent)();

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

@@ -0,0 +1,42 @@
+"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.default = DrawerOpenCloseIcon;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const css_1 = require("@emotion/css");
+const material_1 = require("@mui/material");
+function DrawerOpenCloseIcon(_a) {
+    var { arrowDirection } = _a, props = __rest(_a, ["arrowDirection"]);
+    return ((0, jsx_runtime_1.jsx)(material_1.Stack, Object.assign({ direction: "row", position: "relative" }, props, { className: (0, css_1.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/cjs/builtin/async/ai-runtime/runtime-components/SimpleChat/InputsView.js

@@ -48,14 +48,33 @@ const ActiveAgent_1 = require("../../contexts/ActiveAgent");
 const CurrentAgent_1 = __importStar(require("../../contexts/CurrentAgent"));
 const use_appearances_1 = __importStar(require("../../hooks/use-appearances"));
 const runtime_1 = require("../../state/runtime");
+const agent_inputs_1 = require("../../utils/agent-inputs");
 const runtime_output_schema_1 = require("../../utils/runtime-output-schema");
+const DrawerOpenCloseIcon_1 = __importDefault(require("./DrawerOpenCloseIcon"));
+const COLLAPSED_SIZE = 80;
 function InputsView(_a) {
     var props = __rest(_a, []);
-    const { activeAgentId, setActiveAgentId } = (0, ActiveAgent_1.useActiveAgent)();
-    const { agent } = (0, runtime_1.useRuntimeState)();
-    const children = (0, react_1.useMemo)(() => { var _a, _b; return (_b = (_a = (0, runtime_output_schema_1.getOutputVariableInitialValue)(agent, types_1.RuntimeOutputVariable.children)) === null || _a === void 0 ? void 0 : _a.agents) === null || _b === void 0 ? void 0 : _b.filter((i) => !!i.id); }, [agent]);
-    return ((0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ gap: 2 }, props, { children: [children && children.length > 1 && ((0, jsx_runtime_1.jsx)(material_1.Stack, { direction: "row", gap: 2, children: children === null || children === void 0 ? void 0 : children.map((child) => ((0, jsx_runtime_1.jsx)(CurrentAgent_1.default, { agentId: child.id, children: (0, jsx_runtime_1.jsx)(AgentAvatar, { selected: activeAgentId === child.id, onClick: () => setActiveAgentId(child.id) }) }))) })), (0, jsx_runtime_1.jsx)(material_1.Stack, { children: (0, jsx_runtime_1.jsx)(CurrentAgent_1.default, { agentId: activeAgentId, children: (0, jsx_runtime_1.jsx)(AgentInput, {}) }) })] })));
+    const { activeAgentId } = (0, ActiveAgent_1.useActiveAgent)();
+    const { agent } = (0, CurrentAgent_1.useCurrentAgent)({ agentId: activeAgentId });
+    const inputs = (0, react_1.useMemo)(() => { var _a; return (_a = agent.parameters) === null || _a === void 0 ? void 0 : _a.filter(agent_inputs_1.isValidInput); }, [agent]);
+    const enableCollapse = !!inputs && inputs.length > 1;
+    const [open, setOpen] = (0, react_1.useState)(true);
+    return ((0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ gap: 1, py: 1 }, props, { children: [enableCollapse && ((0, jsx_runtime_1.jsx)(material_1.Stack, { direction: "row", justifyContent: "center", onClick: () => setOpen(!open), mb: -1, children: (0, jsx_runtime_1.jsx)(DrawerOpenCloseIcon_1.default, { color: "grey.500", arrowDirection: open ? 'down' : 'up' }) })), (0, jsx_runtime_1.jsx)(AgentList, { sx: { px: { xs: 2, sm: 3 } } }), (0, jsx_runtime_1.jsx)(material_1.Collapse, { in: !enableCollapse || open, orientation: "vertical", collapsedSize: enableCollapse ? COLLAPSED_SIZE : 0, sx: {
+                    py: 1,
+                    maxHeight: '40vh',
+                    px: { xs: 2, sm: 3 },
+                    overflow: 'auto',
+                }, children: (0, jsx_runtime_1.jsx)(CurrentAgent_1.default, { agentId: activeAgentId, children: (0, jsx_runtime_1.jsx)(AgentInput, {}) }) }, inputs === null || inputs === void 0 ? void 0 : inputs.length)] })));
 }
+const AgentList = (0, react_1.memo)((_a) => {
+    var props = __rest(_a, []);
+    const { activeAgentId, setActiveAgentId } = (0, ActiveAgent_1.useActiveAgent)();
+    const { agent: runtimeAgent } = (0, runtime_1.useRuntimeState)();
+    const children = (0, react_1.useMemo)(() => { var _a, _b; return (_b = (_a = (0, runtime_output_schema_1.getOutputVariableInitialValue)(runtimeAgent, types_1.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 ((0, jsx_runtime_1.jsx)(material_1.Stack, Object.assign({ direction: "row", gap: 2, py: 1, overflow: "auto" }, props, { children: children === null || children === void 0 ? void 0 : children.map((child) => ((0, jsx_runtime_1.jsx)(CurrentAgent_1.default, { agentId: child.id, children: (0, jsx_runtime_1.jsx)(AgentAvatar, { selected: activeAgentId === child.id, onClick: () => setActiveAgentId(child.id) }) }))) })));
+});
 function AgentAvatar(_a) {
     var _b;
     var { selected } = _a, props = __rest(_a, ["selected"]);

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

@@ -51,11 +51,9 @@ function SimpleChatView() {
     return ((0, jsx_runtime_1.jsxs)(SimpleLayout_1.default, { px: 0, children: [(0, jsx_runtime_1.jsx)(SimpleHeader_1.default, { px: 4, sx: { color: hasBg ? 'white' : undefined } }), loading ? ((0, jsx_runtime_1.jsx)(material_1.Box, { textAlign: "center", my: 10, children: (0, jsx_runtime_1.jsx)(material_1.CircularProgress, { size: 24 }) })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(CurrentAgent_1.default, { agentId: activeAgentId, children: (0, jsx_runtime_1.jsx)(MessagesView_1.default, { className: "aigne-outputs aigne-simple-chat-outputs", flexGrow: 1, pb: 10, px: { xs: 2, sm: 3 } }) }), (0, jsx_runtime_1.jsx)(CurrentAgent_1.default, { agentId: activeAgentId, children: (0, jsx_runtime_1.jsx)(InputsView_1.default, { 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) => (0, material_1.alpha)(theme.palette.background.paper, 0.7),
-                                backdropFilter: 'blur(10px)',
+                                bgcolor: (theme) => (0, material_1.alpha)(theme.palette.background.paper, 0.8),
+                                backdropFilter: 'blur(16px)',
                             } }) })] }))] }));
 }