@blocklet/pages-kit 0.2.310 → 0.2.311

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

@@ -14,3 +14,5 @@ export { default as AutoForm } from './runtime-components/AutoForm';
 export { default as SimpleOutput } from './runtime-components/SimpleOutput';
 export { default as ChatOutput } from './runtime-components/ChatOutput';
 export { default as PhotoGalleryItem } from './runtime-components/PhotoGalleryItem';
+// only use to debug, should be removed when PR
+export * from './runtime-components/V0';

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

@@ -6,10 +6,13 @@ import { useMemo } from 'react';
 import ReferenceLinks from './ReferenceLinks';
 export default function MessageMetadataRenderer({ object }) {
     const referenceLinks = object[RuntimeOutputVariable.referenceLinks];
-    const images = useMemo(() => {
-        const list = object[RuntimeOutputVariable.images];
-        const images = (Array.isArray(list) ? list.map((i) => ({ src: i.url })) : []).filter((i) => typeof i.src === 'string');
-        return images.length ? images : undefined;
+    // 方便后续添加 metadata
+    const formattedObject = useMemo(() => {
+        const imagesList = object[RuntimeOutputVariable.images];
+        const images = (Array.isArray(imagesList) ? imagesList.map((i) => ({ src: i.url })) : []).filter((i) => typeof i.src === 'string');
+        return {
+            images: (images === null || images === void 0 ? void 0 : images.length) ? images : undefined,
+        };
     }, [object]);
-    return (_jsxs(_Fragment, { children: [Array.isArray(referenceLinks) && referenceLinks.length ? _jsx(ReferenceLinks, { links: referenceLinks }) : undefined, images && (_jsx(Stack, { gap: 1, children: _jsx(ImagePreview, { dataSource: images, itemWidth: 100 }) }))] }));
+    return (_jsxs(_Fragment, { children: [Array.isArray(referenceLinks) && referenceLinks.length ? _jsx(ReferenceLinks, { links: referenceLinks }) : undefined, (formattedObject === null || formattedObject === void 0 ? void 0 : formattedObject.images) && (_jsx(Stack, { gap: 1, children: _jsx(ImagePreview, { dataSource: formattedObject.images, itemWidth: 100 }) }))] }));
 }

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

@@ -0,0 +1,146 @@
+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());
+    });
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cx } from '@emotion/css';
+import { Box, FormLabel, InputAdornment, Stack, ThemeProvider, createTheme, formLabelClasses, outlinedInputClasses, styled, useTheme, } from '@mui/material';
+import isEmpty from 'lodash/isEmpty';
+import omit from 'lodash/omit';
+import { useEffect, useMemo, useState } from 'react';
+import { Controller, useForm } from 'react-hook-form';
+import { useLocaleContext } from '../../../../locale';
+import AgentInputField from '../../components/AgentInputField';
+import LoadingButton from '../../components/LoadingButton';
+import { useCurrentAgent } from '../../contexts/CurrentAgent';
+import { useRuntimeState } from '../../state/runtime';
+import { useSessionState } from '../../state/session';
+import { isValidInput } from '../../utils/agent-inputs';
+export default function AutoForm({ submitText, inlineLabel, autoFillLastForm = true, submitInQuestionField, chatMode, }) {
+    const { t } = useLocaleContext();
+    const { aid, agent } = useCurrentAgent();
+    const { execute } = useRuntimeState();
+    const running = useSessionState()((s) => s.running);
+    const parameters = useMemo(() => {
+        var _a;
+        return (_a = agent.parameters) === null || _a === void 0 ? void 0 : _a.filter(isValidInput).map((i) => {
+            var _a;
+            return (Object.assign(Object.assign({}, i), { label: ((_a = i.label) === null || _a === void 0 ? void 0 : _a.trim()) || undefined }));
+        });
+    }, [agent.parameters]);
+    const defaultForm = useInitialFormValues();
+    const theme = useFormTheme();
+    const form = useForm({ defaultValues: defaultForm });
+    useEffect(() => {
+        if (autoFillLastForm && !form.formState.isSubmitted && !form.formState.isSubmitting) {
+            form.reset(chatMode ? omit(defaultForm, 'question') : defaultForm);
+        }
+    }, [defaultForm, autoFillLastForm, form, chatMode]);
+    const onSubmit = (parameters) => __awaiter(this, void 0, void 0, function* () {
+        yield execute({
+            aid,
+            parameters,
+            onResponseStart: () => {
+                if (chatMode)
+                    form.resetField('question', { defaultValue: '' });
+            },
+        });
+    });
+    return (_jsx(ThemeProvider, { theme: theme, children: _jsxs(Form, { component: "form", className: cx('form', `label-position-${inlineLabel ? 'start' : 'top'}`), onSubmit: form.handleSubmit(onSubmit), children: [parameters === null || parameters === void 0 ? void 0 : parameters.map((parameter, index) => {
+                    const { key, required } = parameter !== null && parameter !== void 0 ? parameter : {};
+                    return (_jsx(Box, { children: _jsx(Controller, { 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 (_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: 100 }, 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') }))] }) }));
+}
+function useInitialFormValues() {
+    const { agent } = useCurrentAgent();
+    const lastMessage = useSessionState()((s) => { var _a; return (_a = s.messages) === null || _a === void 0 ? void 0 : _a.at(-1); });
+    const [lastInputs, setLastInputs] = useState();
+    useEffect(() => {
+        if (!lastInputs) {
+            const lastParameters = lastMessage === null || lastMessage === void 0 ? void 0 : lastMessage.parameters;
+            if (!isEmpty(lastParameters))
+                setLastInputs(lastParameters);
+        }
+    }, [lastMessage]);
+    return useMemo(() => {
+        var _a, _b;
+        if (lastInputs) {
+            return lastInputs;
+        }
+        return Object.fromEntries((_b = (_a = agent.parameters) === null || _a === void 0 ? void 0 : _a.map((parameter) => [parameter.key, parameter.defaultValue])) !== null && _b !== void 0 ? _b : []);
+    }, [lastInputs, agent]);
+}
+function useFormTheme() {
+    const theme = useTheme();
+    return useMemo(() => {
+        const themeOptions = {
+            shape: {
+                borderRadius: 8,
+            },
+            components: {
+                MuiTextField: {
+                    styleOverrides: {
+                        root: ({ theme }) => theme.unstable_sx({
+                            [`.${outlinedInputClasses.root}`]: {
+                                [`.${outlinedInputClasses.notchedOutline}`]: {
+                                    borderWidth: 2,
+                                    borderColor: 'primary.light',
+                                },
+                                ':hover': {
+                                    [`.${outlinedInputClasses.notchedOutline}`]: {
+                                        borderColor: 'primary.main',
+                                    },
+                                },
+                            },
+                        }),
+                    },
+                },
+            },
+        };
+        return createTheme(theme, themeOptions);
+    }, [theme]);
+}
+const Form = styled(Stack)(({ theme }) => theme.unstable_sx({
+    gap: 2,
+    '.form-item': {
+        gap: 0.5,
+        [`.${formLabelClasses.root}`]: {
+            fontWeight: 500,
+            color: 'text.primary',
+        },
+    },
+    '&.label-position-start': {
+        '.form-item': {
+            display: 'flex',
+            flexDirection: 'row',
+            alignItems: 'center',
+            gap: 1,
+        },
+    },
+}));

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

@@ -0,0 +1,73 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Icon } from '@iconify/react';
+import { Box, Drawer, IconButton, Skeleton, Stack } from '@mui/material';
+import { useState } from 'react';
+import CustomComponentRenderer from '../../../../../components/CustomComponentRenderer';
+import MarkdownRenderer from '../../components/MarkdownRenderer';
+import ShareActions from '../../components/ShareActions';
+import { useCurrentMessage } from '../../contexts/CurrentMessage';
+import MessageErrorView from '../ChatOutput/MessageErrorView';
+import MessageMetadataRenderer from '../ChatOutput/MessageMetadataRenderer';
+const codeField = 'code';
+export default function V0Output() {
+    var _a, _b;
+    const { message } = useCurrentMessage();
+    const objects = (_a = message.result) === null || _a === void 0 ? void 0 : _a.objects;
+    const { error } = message;
+    const isMessageLoading = (message.loading || !message.result) && !message.error;
+    return (_jsxs(Stack, { gap: 2, sx: {
+            py: 2,
+        }, children: [error && _jsx(MessageErrorView, { error: error }), isMessageLoading && (_jsx(Stack, { sx: {
+                    flex: 1,
+                }, children: _jsx(Skeleton, { variant: "rectangular", sx: {
+                        height: 400,
+                        borderRadius: 1,
+                    } }) })), objects === null || objects === void 0 ? void 0 : objects.map((item) => {
+                // @ts-ignore
+                const code = item.data[codeField];
+                return (_jsx(Box, { flex: 1, sx: {
+                        display: 'flex',
+                        justifyContent: 'center',
+                        alignItems: 'center',
+                    }, children: _jsx(CodePreview, { code: code }) }));
+            }), objects === null || objects === void 0 ? void 0 : objects.map((item) => _jsx(MessageMetadataRenderer, { object: item.data })), !isMessageLoading && ((_b = message.result) === null || _b === void 0 ? void 0 : _b.content) && (_jsx(ShareActions, { direction: "row", justifyContent: "flex-end", sx: { mt: 2 } }))] }));
+}
+function CodePreview({ code }) {
+    const [showCode, setShowCode] = useState(false);
+    if (!code)
+        return null;
+    return (_jsxs(Stack, { sx: {
+            flex: 1,
+        }, children: [_jsx(Box, { sx: {
+                    display: 'flex',
+                    justifyContent: 'flex-end',
+                }, children: _jsx(IconButton, { onClick: () => setShowCode((prev) => !prev), sx: {
+                        color: 'textColor',
+                    }, children: _jsx(Icon, { icon: showCode ? 'tabler:layout-sidebar' : 'tabler:code' }) }) }), _jsx(Stack, { gap: 2, sx: {
+                    display: 'flex',
+                    flexDirection: 'row',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                }, children: _jsx(Box, { sx: {
+                        display: 'flex',
+                        justifyContent: 'center',
+                        alignItems: 'center',
+                    }, children: _jsx(CustomComponentRenderer, { componentId: "mock-dev-component", dev: {
+                            components: {
+                                'mock-dev-component': {
+                                    data: {
+                                        id: 'mock-dev-component',
+                                        createdAt: '',
+                                        updatedAt: '',
+                                        renderer: {
+                                            type: 'react-component',
+                                            script: code,
+                                        },
+                                    },
+                                },
+                            },
+                        } }) }) }), _jsx(Drawer, { anchor: "right", open: showCode, onClose: () => setShowCode(false), children: _jsx(Box, { sx: {
+                        p: 2,
+                        maxWidth: '40vw',
+                    }, children: _jsx(MarkdownRenderer, { children: `\`\`\`typescript\n${code}\n\`\`\`` }) }) })] }));
+}

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

@@ -0,0 +1,142 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Card, CardContent, Container, Grid, Stack, ThemeProvider, Typography, createTheme, useTheme, } from '@mui/material';
+import dayjs from 'dayjs';
+// import { useRuntimeState } from '@blocklet/pages-kit/builtin/async/ai-runtime';
+// import { Icon } from 'iconify/react';
+import { Suspense, useCallback, useEffect, useMemo, useState } from 'react';
+import CustomComponentRenderer from '../../../../../components/CustomComponentRenderer';
+import CurrentAgentProvider from '../../contexts/CurrentAgent';
+import CurrentMessageProvider from '../../contexts/CurrentMessage';
+import useAppearances from '../../hooks/use-appearances';
+import { useRuntimeState } from '../../state/runtime';
+import { useSessionState } from '../../state/session';
+const getLineClamp = (count) => {
+    return {
+        display: '-webkit-box',
+        WebkitLineClamp: count,
+        WebkitBoxOrient: 'vertical',
+        overflow: 'hidden',
+        textOverflow: 'ellipsis',
+    };
+};
+function V0Page({ textColor = '#333', primaryColor }) {
+    var _a;
+    const inheritedTheme = useTheme();
+    const theme = useMemo(() => {
+        let { primary } = inheritedTheme.palette;
+        try {
+            if (primaryColor) {
+                primary = inheritedTheme.palette.augmentColor({ color: { main: primaryColor } });
+            }
+        }
+        catch (error) {
+            console.error('augment primary color error', { error });
+        }
+        return createTheme(inheritedTheme, {
+            palette: { primary, textColor },
+            shape: {
+                borderRadius: 8,
+            },
+        });
+    }, [inheritedTheme, primaryColor, textColor]);
+    const [sessionId] = useState('1');
+    const [message, setMessage] = useState();
+    const { childAgentId } = useRuntimeState();
+    const messagesList = useSessionState({
+        autoLoad: true,
+    })((s) => s.messages);
+    useEffect(() => {
+        if (messagesList === null || messagesList === void 0 ? void 0 : messagesList.length) {
+            const lastMessage = messagesList[messagesList.length - 1];
+            // @ts-ignore
+            setMessage(lastMessage);
+        }
+    }, [messagesList]);
+    const SliderRender = useCallback(({ message }) => {
+        // if is detail, return output
+        if (sessionId && (messagesList === null || messagesList === void 0 ? void 0 : messagesList.length)) {
+            return (_jsx(Box, { sx: {
+                    width: 200,
+                    p: 2,
+                    position: 'sticky',
+                    top: 64,
+                    height: 'calc(100vh - 65px)',
+                    overflowY: 'auto',
+                }, children: _jsx(Stack, { spacing: 2, justifyContent: "center", children: messagesList === null || messagesList === void 0 ? void 0 : messagesList.map((_, i) => {
+                        var _a;
+                        const isCurrent = _.taskId === (message === null || message === void 0 ? void 0 : message.taskId);
+                        return (_jsxs(Box, { onClick: () => {
+                                // @ts-ignore
+                                setMessage(_);
+                            }, sx: {
+                                cursor: 'pointer',
+                                backgroundColor: isCurrent ? 'primary.main' : 'rgba(0, 0, 0, 0.5)',
+                                color: '#fff',
+                                borderRadius: 1,
+                                p: 1,
+                            }, children: [_jsx(Typography, { variant: "caption", display: "block", sx: Object.assign({ color: 'rgba(255, 255, 255, 0.9)' }, getLineClamp(2)), children: (_a = _.parameters) === null || _a === void 0 ? void 0 : _a.question }), _jsx(Box, { children: _jsxs(Typography, { sx: {
+                                            textAlign: 'right',
+                                            fontWeight: 600,
+                                            fontSize: 12,
+                                            mt: 0.5,
+                                            display: 'flex',
+                                            justifyContent: 'space-between',
+                                        }, children: [_jsx("span", { style: {
+                                                    color: 'rgba(255, 255, 255, 0.7)',
+                                                    fontWeight: 400,
+                                                }, children: dayjs(_.updatedAt).format('MM-DD HH:mm') }), _jsx("span", { children: `V${i}` })] }) })] }, _.assistantId));
+                    }) }) }, "slider"));
+        }
+        return null;
+    }, [JSON.stringify(messagesList)]);
+    const ContentRender = useCallback(() => {
+        // if is detail, return output
+        if (sessionId) {
+            return (_jsx(Box, { flex: 1, children: _jsx(AgentOutputRender, { message: message }) }));
+        }
+        return (_jsx(Box, { flex: 1, children: _jsx(Grid, { container: true, spacing: 2, justifyContent: "center", children: [...Array(3)].map((_, i) => (_jsx(Grid, { item: true, xs: 12, sm: 6, md: 4, children: _jsx(Card, { sx: { backgroundColor: 'rgba(0, 0, 0, 0.5)', color: '#fff' }, children: _jsxs(CardContent, { children: [_jsx(Typography, { variant: "body2", sx: { mb: 1 }, children: `Code Snippet ${i + 1}` }), _jsx(Typography, { variant: "caption", display: "block", sx: { color: 'rgba(255, 255, 255, 0.7)' }, children: `This is history requirement ${i + 1}` })] }) }) }, i))) }) }));
+    }, [JSON.stringify(message)]);
+    return (_jsx(ThemeProvider, { theme: theme, children: _jsx(CurrentAgentProvider, { agentId: childAgentId, children: _jsxs(Box, { sx: {
+                    display: 'flex',
+                    // background: 'linear-gradient(135deg, #1a237e 0%, #3c3f41 100%)',
+                }, children: [_jsx(SliderRender, { message: message }), _jsxs(Container, { sx: {
+                            minHeight: 'calc(100vh - 64px - 1px)',
+                            textAlign: 'center',
+                            py: 2,
+                            pt: 10,
+                            gap: 2,
+                            display: 'flex',
+                            flexDirection: 'column',
+                        }, children: [_jsx(Typography, { variant: "h2", color: "textColor", sx: { fontWeight: 'bold' }, children: "AIGNE V0" }), _jsx(Typography, { variant: "h5", color: "textColor", sx: Object.assign({}, getLineClamp(5)), children: ((_a = message === null || message === void 0 ? void 0 : message.parameters) === null || _a === void 0 ? void 0 : _a.question) || 'A v0 release to help you build code quickly' }), _jsx(ContentRender, {}), _jsx(Box, { sx: {
+                                    position: 'sticky',
+                                    bottom: 0,
+                                    backgroundColor: 'white',
+                                    pt: 4,
+                                }, children: _jsx(AgentInputRender, {}) })] })] }) }) }));
+}
+export default V0Page;
+function AgentInputRender(_a) {
+    var props = __rest(_a, []);
+    const { appearanceInput } = useAppearances();
+    if (!(appearanceInput === null || appearanceInput === void 0 ? void 0 : appearanceInput.componentId))
+        return null;
+    return (_jsx(Suspense, { children: _jsx(CustomComponentRenderer, Object.assign({ componentId: appearanceInput.componentId, properties: appearanceInput.componentProps }, props)) }));
+}
+function AgentOutputRender(_a) {
+    var { message } = _a, props = __rest(_a, ["message"]);
+    const { appearanceOutput } = useAppearances();
+    if (!(appearanceOutput === null || appearanceOutput === void 0 ? void 0 : appearanceOutput.componentId) || !message)
+        return null;
+    return (_jsx(CurrentAgentProvider, { agentId: message.assistantId, children: _jsx(CurrentMessageProvider, { message: message, children: _jsx(Suspense, { children: _jsx(CustomComponentRenderer, Object.assign({ componentId: appearanceOutput.componentId, properties: appearanceOutput.componentProps }, props)) }) }) }));
+}

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

@@ -0,0 +1,3 @@
+export { default as V0Page } from './Page';
+export { default as V0Output } from './Output';
+export { default as V0Input } from './Input';

package/lib/esm/builtin/mui/material.js

@@ -1 +1 @@
-export { Alert, AlertTitle, Autocomplete, Avatar, Box, Button, ButtonGroup, Card, CardActionArea, CardActions, CardContent, CardHeader, CardMedia, CircularProgress, ClickAwayListener, Collapse, Container, Dialog, DialogActions, DialogContent, DialogTitle, Divider, Fade, GlobalStyles, Grid, Grow, LinearProgress, Link, List, ListItem, ListItemAvatar, ListItemButton, ListItemIcon, ListItemSecondaryAction, ListSubheader, Menu, MenuItem, MenuList, Paper, Popper, Slide, Stack, Switch, TextField, ThemeProvider, Tooltip, Typography, Zoom, alpha, createTheme, styled, useMediaQuery, useTheme, } from '@mui/material';
+export { Alert, AlertTitle, Autocomplete, Avatar, Box, Button, IconButton, ButtonGroup, Card, CardActionArea, CardActions, CardContent, CardHeader, CardMedia, CircularProgress, ClickAwayListener, Collapse, Container, Dialog, DialogActions, DialogContent, DialogTitle, Divider, Fade, GlobalStyles, Grid, Grow, LinearProgress, Link, List, ListItem, ListItemAvatar, ListItemButton, ListItemIcon, ListItemSecondaryAction, ListSubheader, Menu, MenuItem, MenuList, Paper, Popper, Slide, Stack, Switch, TextField, ThemeProvider, Tooltip, Typography, Zoom, alpha, createTheme, styled, useMediaQuery, useTheme, } from '@mui/material';