@blocklet/aigne-hub 0.2.7

package/lib/esm/components/conversation/message.js

@@ -0,0 +1,114 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cx } from '@emotion/css';
+import styled from '@emotion/styled';
+import { CopyAll } from '@mui/icons-material';
+import { Box, Button, Tooltip } from '@mui/material';
+import { useMemo, useState } from 'react';
+import ReactMarkdown from 'react-markdown';
+export default function Message({ avatar = undefined, message = undefined, children = undefined, loading = false, actions = undefined, ...props }) {
+    const text = useMemo(() => (typeof message === 'string' ? message : message === null || message === void 0 ? void 0 : message.map((i) => `${i.role}: ${i.content}`).join('\n\n')), [message]);
+    return (_jsxs(Root, { ...props, display: "flex", children: [_jsx(Box, { className: "avatar", sx: {
+                    mr: 1,
+                }, children: avatar }), _jsxs(Box, { className: cx('content'), children: [_jsx(Box, { component: ReactMarkdown, className: cx('message', loading && 'cursor'), children: text }), children, _jsxs(Box, { className: "actions", children: [actions, text && _jsx(CopyButton, { message: text }, "copy")] })] })] }));
+}
+function CopyButton({ message }) {
+    const [copied, setCopied] = useState(false);
+    return (_jsx(Tooltip, { title: copied === 'copied' ? 'Copied!' : 'Copy', placement: "top", open: Boolean(copied), children: _jsx(Button, { size: "small", className: cx('copy', copied && 'active'), onMouseEnter: () => setCopied(true), onMouseLeave: () => setCopied(false), onClick: () => {
+                navigator.clipboard.writeText(message);
+                setCopied('copied');
+                setTimeout(() => setCopied(false), 1500);
+            }, children: _jsx(CopyAll, { fontSize: "small" }) }) }));
+}
+const Root = styled(Box) `
+  > .avatar {
+    padding-top: 5px;
+
+    > .MuiAvatar-root {
+      width: 30px;
+      height: 30px;
+    }
+  }
+
+  > .content {
+    min-height: 40px;
+    flex: 1;
+    overflow: hidden;
+    word-break: break-word;
+    padding: 8px;
+    border-radius: 4px;
+    position: relative;
+
+    > .message {
+      > *:first-of-type {
+        margin-top: 0;
+      }
+      > *:last-child {
+        margin-bottom: 0;
+      }
+
+      pre {
+        line-height: 1.2;
+        background-color: #f6f8fa;
+        overflow: auto;
+        padding: 16px;
+        border-radius: 3px;
+      }
+
+      &.cursor {
+        > *:last-child {
+          &:after {
+            content: '';
+            display: inline-block;
+            vertical-align: middle;
+            height: 1em;
+            margin-top: -0.15em;
+            margin-left: 0.15em;
+            border-right: 0.15em solid orange;
+            animation: blink-caret 0.75s step-end infinite;
+
+            @keyframes blink-caret {
+              from,
+              to {
+                border-color: transparent;
+              }
+              50% {
+                border-color: orange;
+              }
+            }
+          }
+        }
+      }
+    }
+
+    > .actions {
+      position: absolute;
+      right: 2px;
+      top: 2px;
+      border-radius: 4px;
+      opacity: 0;
+
+      &.active {
+        display: flex;
+      }
+
+      button {
+        min-width: 0;
+        padding: 0;
+        height: 24px;
+        width: 22px;
+        color: rgba(0, 0, 0, 0.4);
+      }
+    }
+  }
+
+  &:hover {
+    > .content {
+      background-color: rgba(0, 0, 0, 0.05);
+
+      > .actions {
+        opacity: 1;
+        background-color: rgba(240, 240, 240, 0.9);
+      }
+    }
+  }
+`;

package/lib/esm/components/conversation/prompt.js

@@ -0,0 +1,40 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Send } from '@mui/icons-material';
+import { Box, IconButton, Input, InputAdornment } from '@mui/material';
+import { useHistoryTravel } from 'ahooks';
+import { useState } from 'react';
+export default function Prompt({ startAdornment = undefined, endAdornment = undefined, onSubmit, slotProps = {}, sx = {}, ...props }) {
+    const [prompt, setPrompt] = useState('');
+    const { value: historyPrompt, setValue: setHistoryPrompt, forwardLength, back, go, forward } = useHistoryTravel('');
+    const submit = () => {
+        if (!prompt.trim()) {
+            return;
+        }
+        go(forwardLength);
+        // wait for history to set before submitting
+        setTimeout(() => {
+            setHistoryPrompt(prompt);
+            onSubmit(prompt);
+            setPrompt('');
+        }, 50);
+    };
+    return (_jsxs(Box, { ...props, sx: { display: 'flex', gap: 1, alignItems: 'center', ...sx }, component: "form", onSubmit: (e) => e.preventDefault(), children: [startAdornment, _jsx(Input, { fullWidth: true, disableUnderline: true, value: prompt, multiline: true, maxRows: 10, sx: { py: 0.8, px: 1, boxShadow: 2, borderRadius: 1 }, onChange: (e) => setPrompt(e.target.value), onKeyDown: (e) => {
+                    if (e.keyCode === 229) {
+                        return;
+                    }
+                    if (!e.shiftKey && e.key === 'Enter') {
+                        e.preventDefault();
+                        submit();
+                    }
+                    else if (e.key === 'ArrowUp') {
+                        e.preventDefault();
+                        back();
+                        setPrompt(historyPrompt || '');
+                    }
+                    else if (e.key === 'ArrowDown') {
+                        e.preventDefault();
+                        forward();
+                        setPrompt(historyPrompt || '');
+                    }
+                }, endAdornment: _jsx(InputAdornment, { position: "end", children: _jsx(IconButton, { onClick: submit, size: "small", type: "submit", children: _jsx(Send, { fontSize: "small" }) }) }), ...slotProps }), endAdornment] }));
+}

package/lib/esm/components/conversation/use-conversation.js

@@ -0,0 +1,97 @@
+import { produce } from 'immer';
+import { nanoid } from 'nanoid';
+import { useCallback, useState } from 'react';
+const nextId = () => nanoid(16);
+export default function useConversation({ scrollToBottom, textCompletions, imageGenerations, }) {
+    const [messages, setMessages] = useState(() => [
+        { id: nextId(), response: 'Hi, I am AIGNE Hub! How can I assist you today?' },
+    ]);
+    const add = useCallback(async (prompt, meta) => {
+        const id = nextId();
+        setMessages((v) => v.concat({ id, prompt, loading: true, meta }));
+        scrollToBottom === null || scrollToBottom === void 0 ? void 0 : scrollToBottom({ force: true });
+        try {
+            if (imageGenerations && typeof prompt === 'string') {
+                const m = prompt.match(/^\/image(\s+(?<size>256|512|1024))?(\s+(?<n>[1-9]|10))?\s+(?<prompt>[\s\S]+)/);
+                if (m === null || m === void 0 ? void 0 : m.groups) {
+                    const { size = '256', n = '1', prompt, } = m.groups;
+                    const response = await imageGenerations({
+                        prompt,
+                        n: parseInt(n, 10),
+                        size: `${size}x${size}`,
+                    }, { meta });
+                    setMessages((v) => produce(v, (draft) => {
+                        const item = draft.find((i) => i.id === id);
+                        if (item)
+                            item.response = response;
+                    }));
+                    return { id, data: response };
+                }
+            }
+            const result = await textCompletions(prompt, { meta });
+            const isText = (i) => i.type === 'text';
+            const isImages = (i) => i.type === 'images';
+            const reader = result.getReader();
+            const decoder = new TextDecoder();
+            let response = '';
+            for (;;) {
+                // eslint-disable-next-line no-await-in-loop
+                const { value, done } = await reader.read();
+                if (value) {
+                    let delta = '';
+                    if (typeof value === 'string') {
+                        delta = value;
+                    }
+                    else if (isText(value)) {
+                        response = value.text;
+                    }
+                    else if (isImages(value)) {
+                        response = value.images;
+                    }
+                    else {
+                        delta = decoder.decode(value);
+                    }
+                    if (typeof response === 'string' && delta) {
+                        response += delta;
+                    }
+                    setMessages((v) => produce(v, (draft) => {
+                        const item = draft.find((i) => i.id === id);
+                        if (!item || item.loading === false) {
+                            return;
+                        }
+                        item.response = response;
+                        item.loading = !done;
+                    }));
+                    scrollToBottom === null || scrollToBottom === void 0 ? void 0 : scrollToBottom();
+                }
+                if (done) {
+                    break;
+                }
+            }
+            return { id, text: response };
+        }
+        catch (error) {
+            setMessages((v) => produce(v, (draft) => {
+                const item = draft.find((i) => i.id === id);
+                if (item)
+                    item.error = error;
+            }));
+            throw error;
+        }
+        finally {
+            setMessages((v) => produce(v, (draft) => {
+                const item = draft.find((i) => i.id === id);
+                if (item)
+                    item.loading = false;
+            }));
+        }
+    }, [imageGenerations, scrollToBottom, textCompletions]);
+    const cancel = useCallback(({ id }) => {
+        setMessages((v) => produce(v, (draft) => {
+            const i = draft.find((i) => i.id === id);
+            if (i)
+                i.loading = false;
+        }));
+    }, []);
+    return { messages, add, cancel, setMessages };
+}

package/lib/esm/components/credit/alert.js

@@ -0,0 +1,35 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import { Alert, Stack } from '@mui/material';
+import { CreditErrorType } from '../../api/error';
+import withLocaleProvider from '../../utils/withLocaleProvider';
+import CreditButton from './button';
+function CreditErrorAlert({ error, ...props }) {
+    const { t } = useLocaleContext();
+    const isCreditError = (error === null || error === void 0 ? void 0 : error.type) === CreditErrorType.NOT_ENOUGH;
+    if (!isCreditError) {
+        return (_jsx(Alert, { severity: "error", ...props, children: (error === null || error === void 0 ? void 0 : error.message) || t('unknownError') }));
+    }
+    return (_jsxs(Alert, { severity: "warning", ...props, sx: {
+            px: 1,
+            py: 0,
+            '& .MuiAlert-message': {
+                width: '100%',
+            },
+            ...props.sx,
+        }, children: [t('creditNotEnoughTip'), _jsx(Stack, { direction: "row", sx: { justifyContent: 'flex-end' }, children: _jsx(CreditButton, { shouldOpenInNewTab: true, size: "small", variant: "outlined", color: "warning", children: t('buyCreditsNow') }) })] }));
+}
+export default withLocaleProvider(CreditErrorAlert, {
+    translations: {
+        en: {
+            unknownError: 'An unknown error occurred',
+            creditNotEnoughTip: 'Your credit balance is insufficient. Please buy more credits to continue using AI services.',
+            buyCreditsNow: 'Buy Credits Now',
+        },
+        zh: {
+            unknownError: '发生了未知错误',
+            creditNotEnoughTip: '您的额度不足。请购买更多额度以继续使用AI服务。',
+            buyCreditsNow: '立即购买额度',
+        },
+    },
+});

package/lib/esm/components/credit/balance.js

@@ -0,0 +1,90 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import { AccountBalanceWalletRounded } from '@mui/icons-material';
+import { Box, Card, CardContent, CircularProgress, Stack, Typography } from '@mui/material';
+import { blue } from '@mui/material/colors';
+import { useCallback, useEffect, useState } from 'react';
+import { getCreditBalance } from '../../api/app';
+import withLocaleProvider from '../../utils/withLocaleProvider';
+function CreditBalance({ balance = undefined, currency = undefined, useAIKitService = false }) {
+    var _a, _b;
+    const { t } = useLocaleContext();
+    const [creditData, setCreditData] = useState(null);
+    const [loading, setLoading] = useState(true);
+    const [error, setError] = useState(null);
+    const fetchBalance = useCallback(async () => {
+        try {
+            setLoading(true);
+            setError(null);
+            const result = await getCreditBalance({ useAIKitService });
+            // Safely access response data
+            setCreditData(result);
+        }
+        catch (err) {
+            console.error('Failed to fetch balance:', err);
+            setError(err instanceof Error ? err.message : t('failedToLoadBalance'));
+        }
+        finally {
+            setLoading(false);
+        }
+    }, [t, useAIKitService]);
+    useEffect(() => {
+        fetchBalance();
+    }, [fetchBalance]);
+    if (loading) {
+        return (_jsx(Card, { children: _jsx(CardContent, { children: _jsx(Box, { sx: {
+                        display: 'flex',
+                        justifyContent: 'center',
+                        alignItems: 'center',
+                        minHeight: '120px',
+                    }, children: _jsx(CircularProgress, { size: 32 }) }) }) }));
+    }
+    if (error) {
+        return (_jsx(Card, { children: _jsx(CardContent, { children: _jsx(Typography, { color: "error", variant: "body2", sx: {
+                        textAlign: 'center',
+                    }, children: error }) }) }));
+    }
+    // Use props or API data
+    const displayBalance = (_a = balance !== null && balance !== void 0 ? balance : creditData === null || creditData === void 0 ? void 0 : creditData.balance) !== null && _a !== void 0 ? _a : '0';
+    const displayCurrency = (_b = currency !== null && currency !== void 0 ? currency : creditData === null || creditData === void 0 ? void 0 : creditData.currency) !== null && _b !== void 0 ? _b : 'USD';
+    return (_jsxs(Card, { sx: {
+            background: `linear-gradient(135deg, ${blue[500]} 0%, ${blue[700]} 100%)`,
+            color: 'white',
+            position: 'relative',
+            overflow: 'hidden',
+        }, children: [_jsx(CardContent, { sx: { position: 'relative', zIndex: 1 }, children: _jsxs(Stack, { spacing: 2, children: [_jsxs(Stack, { direction: "row", spacing: 1, sx: {
+                                alignItems: 'center',
+                            }, children: [_jsx(AccountBalanceWalletRounded, { sx: { fontSize: 28 } }), _jsx(Typography, { variant: "h6", sx: { fontWeight: 'bold' }, children: t('creditBalance') })] }), _jsxs(Box, { children: [_jsx(Typography, { variant: "h3", sx: { fontWeight: 'bold', lineHeight: 1 }, children: displayBalance }), _jsx(Typography, { variant: "body1", sx: { opacity: 0.9, mt: 0.5 }, children: displayCurrency })] }), _jsx(Typography, { variant: "body2", sx: { opacity: 0.8 }, children: t('availableForUse') })] }) }), _jsx(Box, { sx: {
+                    position: 'absolute',
+                    top: -20,
+                    right: -20,
+                    width: 80,
+                    height: 80,
+                    borderRadius: '50%',
+                    backgroundColor: 'rgba(255, 255, 255, 0.1)',
+                    zIndex: 0,
+                } }), _jsx(Box, { sx: {
+                    position: 'absolute',
+                    bottom: -30,
+                    left: -30,
+                    width: 100,
+                    height: 100,
+                    borderRadius: '50%',
+                    backgroundColor: 'rgba(255, 255, 255, 0.05)',
+                    zIndex: 0,
+                } })] }));
+}
+export default withLocaleProvider(CreditBalance, {
+    translations: {
+        en: {
+            creditBalance: 'Credit Balance',
+            availableForUse: 'Available for use',
+            failedToLoadBalance: 'Failed to load balance',
+        },
+        zh: {
+            creditBalance: '信用额度余额',
+            availableForUse: '可用余额',
+            failedToLoadBalance: '加载余额失败',
+        },
+    },
+});

package/lib/esm/components/credit/button.js

@@ -0,0 +1,64 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import Toast from '@arcblock/ux/lib/Toast';
+import { LoadingButton } from '@mui/lab';
+import { Typography } from '@mui/material';
+import { useCallback, useState } from 'react';
+import { withQuery } from 'ufo';
+import { getCreditPaymentLink } from '../../api/app';
+import withLocaleProvider from '../../utils/withLocaleProvider';
+function CreditButton({ shouldOpenInNewTab = true, size = 'small', variant = 'outlined', color = 'primary', children = null, useAIKitService = false, ...props }) {
+    var _a, _b;
+    const { t } = useLocaleContext();
+    const [submitting, setSubmitting] = useState(false);
+    const buyCredits = useCallback(async () => {
+        setSubmitting(true);
+        try {
+            const link = await getCreditPaymentLink({
+                useAIKitService,
+            });
+            if (link) {
+                const { href } = window.location;
+                const payLink = withQuery(link, {
+                    redirect: href,
+                    cancel_url: href,
+                });
+                if (shouldOpenInNewTab) {
+                    const win = window.open(payLink, '_blank');
+                    win === null || win === void 0 ? void 0 : win.focus();
+                }
+                else {
+                    window.location.href = payLink;
+                }
+            }
+            else {
+                Toast.error(t('creditPaymentLinkNotAvailable'));
+            }
+        }
+        catch (error) {
+            Toast.error(error.message || t('failedToGetCreditPaymentLink'));
+        }
+        finally {
+            setSubmitting(false);
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [shouldOpenInNewTab]);
+    if (!((_b = (_a = window.blocklet) === null || _a === void 0 ? void 0 : _a.preferences) === null || _b === void 0 ? void 0 : _b.creditBasedBillingEnabled)) {
+        return null;
+    }
+    return (_jsx(LoadingButton, { onClick: buyCredits, size: size, variant: variant, color: color, type: "button", loading: submitting, ...props, children: children || _jsx(Typography, { noWrap: true, children: t('buyCredits') }) }));
+}
+export default withLocaleProvider(CreditButton, {
+    translations: {
+        en: {
+            buyCredits: 'Buy Credits',
+            creditPaymentLinkNotAvailable: 'Credit payment link is not available',
+            failedToGetCreditPaymentLink: 'Failed to get credit payment link',
+        },
+        zh: {
+            buyCredits: '购买额度',
+            creditPaymentLinkNotAvailable: '额度付款链接不可用',
+            failedToGetCreditPaymentLink: '获取额度付款链接失败',
+        },
+    },
+});

package/lib/esm/components/credit/index.js

@@ -0,0 +1,3 @@
+export { default as CreditButton } from './button';
+export { default as CreditBalance } from './balance';
+export { default as CreditErrorAlert } from './alert';

package/lib/esm/components/form-label.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { InfoOutlined } from '@mui/icons-material';
+import { Box, FormLabel, Tooltip, Typography } from '@mui/material';
+export default function CustomFormLabel({ children, required = false, tooltip = '', description = '', ...props }) {
+    return (_jsxs(Box, { sx: { mb: 1, width: '100%' }, children: [_jsxs(FormLabel, { ...props, sx: {
+                    display: 'flex',
+                    alignItems: 'center',
+                    gap: 0.5,
+                    fontSize: '0.875rem',
+                    fontWeight: 500,
+                    color: 'text.primary',
+                    '&.MuiFormLabel-root': {
+                        display: 'flex',
+                        alignItems: 'center',
+                        gap: 0.5,
+                        fontWeight: 500,
+                        color: 'text.primary',
+                    },
+                    ...(props.sx || {}),
+                }, children: [children, required && (_jsx(Typography, { component: "span", color: "error", children: "*" })), tooltip &&
+                        (typeof tooltip === 'string' ? (_jsx(Tooltip, { title: tooltip, children: _jsx(InfoOutlined, { fontSize: "small", sx: { opacity: 0.7, fontSize: '1rem' } }) })) : (tooltip))] }), description && (_jsx(Typography, { variant: "caption", sx: {
+                    color: 'text.secondary',
+                }, children: description }))] }));
+}

package/lib/esm/components/image-preview.js

@@ -0,0 +1,110 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import CloudDownloadOutlinedIcon from '@mui/icons-material/CloudDownloadOutlined';
+import RotateRightOutlinedIcon from '@mui/icons-material/RotateRightOutlined';
+import ZoomInOutlinedIcon from '@mui/icons-material/ZoomInOutlined';
+import ZoomOutOutlinedIcon from '@mui/icons-material/ZoomOutOutlined';
+import { Box, GlobalStyles, Grid, IconButton } from '@mui/material';
+import { useReactive } from 'ahooks';
+import { saveAs } from 'file-saver';
+import { PhotoProvider, PhotoView } from 'react-photo-view';
+import { withQuery } from 'ufo';
+import LoadingImage from './loading-image';
+const renderIconButton = (children, onClick, { key, ...extraProps } = {}) => {
+    return (_jsx(IconButton, { sx: {
+            transition: 'all 0.3s',
+            color: 'rgba(255,255,255,0.75)',
+            '&:hover': {
+                color: 'rgba(255,255,255,1)',
+            },
+        }, onClick: onClick, ...extraProps, children: children }, key));
+};
+function getExtFromBase64(base64) {
+    var _a;
+    // eslint-disable-next-line prefer-regex-literals
+    const re = new RegExp('data:image/([a-z]+);base64,.+');
+    const res = re.exec(base64);
+    if ((_a = res === null || res === void 0 ? void 0 : res.groups) === null || _a === void 0 ? void 0 : _a.ext) {
+        return res.groups.ext;
+    }
+    return '';
+}
+export default function ImagePreview({ dataSource = [], itemWidth = undefined, itemHeight = undefined, spacing = 1, transition = 'all 0.3s', borderRadius = 0, formatDownloadSrc = (value) => value, showDownloadButton = true, }) {
+    const state = useReactive({
+        downloadingIndexMap: {},
+    });
+    const getDownloadButton = (currentIndex, extraProps = {}) => renderIconButton(_jsx(CloudDownloadOutlinedIcon, { fontSize: "inherit" }), async () => {
+        const { src } = (dataSource === null || dataSource === void 0 ? void 0 : dataSource[currentIndex]) || {};
+        state.downloadingIndexMap = {
+            ...state.downloadingIndexMap,
+            [currentIndex]: true,
+        };
+        if (src) {
+            // download base64 image
+            if (src === null || src === void 0 ? void 0 : src.startsWith('data:image/')) {
+                const link = document.createElement('a');
+                link.href = src;
+                link.download = `image-${currentIndex}.${getExtFromBase64(src) || 'png'}`;
+                link.click();
+            }
+            else {
+                // use file saver to download image, will slow down the performance
+                await saveAs(formatDownloadSrc(src));
+            }
+            state.downloadingIndexMap = {
+                ...state.downloadingIndexMap,
+                [currentIndex]: false,
+            };
+        }
+    }, {
+        key: 'download',
+        disabled: !!state.downloadingIndexMap[currentIndex],
+        ...extraProps,
+    });
+    return (_jsxs(PhotoProvider, { toolbarRender: ({ index, scale, onScale, rotate, onRotate }) => {
+            return [
+                renderIconButton(_jsx(ZoomInOutlinedIcon, {}), () => onScale(scale + 0.25), {
+                    key: 'scale-down',
+                }),
+                renderIconButton(_jsx(ZoomOutOutlinedIcon, {}), () => onScale(scale - 0.25), {
+                    key: 'scale-up',
+                }),
+                renderIconButton(_jsx(RotateRightOutlinedIcon, {}), () => onRotate(rotate + 90), {
+                    key: 'rotate',
+                }),
+                getDownloadButton(index),
+            ];
+        }, children: [_jsx(GlobalStyles, { styles: ".PhotoView-Portal{height:100%;left:0;overflow:hidden;position:fixed;top:0;touch-action:none;width:100%;z-index:2000}@-webkit-keyframes PhotoView__rotate{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}@keyframes PhotoView__rotate{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}@-webkit-keyframes PhotoView__delayIn{0%,50%{opacity:0}to{opacity:1}}@keyframes PhotoView__delayIn{0%,50%{opacity:0}to{opacity:1}}.PhotoView__Spinner{-webkit-animation:PhotoView__delayIn .4s linear both;animation:PhotoView__delayIn .4s linear both}.PhotoView__Spinner svg{-webkit-animation:PhotoView__rotate .6s linear infinite;animation:PhotoView__rotate .6s linear infinite}.PhotoView__Photo{cursor:-webkit-grab;cursor:grab;max-width:none}.PhotoView__Photo:active{cursor:-webkit-grabbing;cursor:grabbing}.PhotoView__icon{display:inline-block;left:0;position:absolute;top:0;transform:translate(-50%,-50%)}.PhotoView__PhotoBox,.PhotoView__PhotoWrap{bottom:0;direction:ltr;left:0;position:absolute;right:0;top:0;touch-action:none;width:100%}.PhotoView__PhotoWrap{overflow:hidden;z-index:10}.PhotoView__PhotoBox{transform-origin:left top}@-webkit-keyframes PhotoView__fade{0%{opacity:0}to{opacity:1}}@keyframes PhotoView__fade{0%{opacity:0}to{opacity:1}}.PhotoView-Slider__clean .PhotoView-Slider__ArrowLeft,.PhotoView-Slider__clean .PhotoView-Slider__ArrowRight,.PhotoView-Slider__clean .PhotoView-Slider__BannerWrap,.PhotoView-Slider__clean .PhotoView-Slider__Overlay,.PhotoView-Slider__willClose .PhotoView-Slider__BannerWrap:hover{opacity:0}.PhotoView-Slider__Backdrop{background:#000;height:100%;left:0;position:absolute;top:0;transition-property:background-color;width:100%;z-index:-1}.PhotoView-Slider__fadeIn{-webkit-animation:PhotoView__fade linear both;animation:PhotoView__fade linear both;opacity:0}.PhotoView-Slider__fadeOut{animation:PhotoView__fade linear reverse both;opacity:0}.PhotoView-Slider__BannerWrap{align-items:center;background-color:rgba(0,0,0,.5);color:#fff;display:flex;height:44px;justify-content:space-between;left:0;position:absolute;top:0;transition:opacity .2s ease-out;width:100%;z-index:20}.PhotoView-Slider__BannerWrap:hover{opacity:1}.PhotoView-Slider__Counter{font-size:14px;opacity:.75;padding:0 10px}.PhotoView-Slider__BannerRight{align-items:center;display:flex;height:100%}.PhotoView-Slider__toolbarIcon{fill:#fff;box-sizing:border-box;cursor:pointer;opacity:.75;padding:10px;transition:opacity .2s linear}.PhotoView-Slider__toolbarIcon:hover{opacity:1}.PhotoView-Slider__ArrowLeft,.PhotoView-Slider__ArrowRight{align-items:center;bottom:0;cursor:pointer;display:flex;height:100px;justify-content:center;margin:auto;opacity:.75;position:absolute;top:0;transition:opacity .2s linear;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;width:70px;z-index:20}.PhotoView-Slider__ArrowLeft:hover,.PhotoView-Slider__ArrowRight:hover{opacity:1}.PhotoView-Slider__ArrowLeft svg,.PhotoView-Slider__ArrowRight svg{fill:#fff;background:rgba(0,0,0,.3);box-sizing:content-box;height:24px;padding:10px;width:24px}.PhotoView-Slider__ArrowLeft{left:0}.PhotoView-Slider__ArrowRight{right:0}" }), _jsx(Grid, { spacing: spacing, container: true, className: "photo-wrapper", children: dataSource === null || dataSource === void 0 ? void 0 : dataSource.map((item, index) => {
+                    const { width, height } = item;
+                    return (_jsx(Grid
+                    // eslint-disable-next-line react/no-array-index-key
+                    , { className: "photo-item", sx: {
+                            transition,
+                            '&:hover': {
+                                cursor: 'pointer',
+                                '& .photo-toolbar': {
+                                    transition,
+                                    opacity: 1,
+                                },
+                            },
+                        }, children: _jsxs(Box, { sx: { position: 'relative' }, children: [_jsx(PhotoView, { ...item, children: _jsx(LoadingImage, { ...item, src: withQuery(item.src, {
+                                            imageFilter: 'resize',
+                                            f: 'webp',
+                                            w: typeof itemWidth === 'number' ? Math.min(itemWidth * 2, 1200) : undefined,
+                                        }), style: {
+                                            transition,
+                                            borderRadius,
+                                            objectFit: 'cover',
+                                            width: width || itemWidth || '100%',
+                                            height: height || itemHeight || '100%',
+                                        } }) }), _jsx(Box, { className: "photo-toolbar", sx: {
+                                        position: 'absolute',
+                                        right: 0,
+                                        top: 0,
+                                        opacity: 0,
+                                        background: 'rgba(0,0,0,0.7)',
+                                    }, children: showDownloadButton &&
+                                        getDownloadButton(index, {
+                                            size: 'small',
+                                        }) })] }) }, index));
+                }) })] }));
+}

package/lib/esm/components/index.js

@@ -0,0 +1,14 @@
+/// <reference path="../env.d.ts" />
+export { default as LoadingImage } from './loading-image';
+export { default as ImagePreview } from './image-preview';
+export { default as Conversation } from './conversation';
+export * from './conversation';
+export { default as SubscribeButton } from './subscribe/button';
+export { default as SubscribeErrorAlert } from './subscribe/alert';
+// Credit components
+export { default as CreditButton } from './credit/button';
+export { default as CreditBalance } from './credit/balance';
+export { default as CreditErrorAlert } from './credit/alert';
+export { default as Switch } from './switch-button';
+export { default as Table } from './table';
+export { default as FormLabel } from './form-label';

package/lib/esm/components/loading-image.js

@@ -0,0 +1,35 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/* eslint-disable import/no-extraneous-dependencies */
+import { Skeleton } from '@mui/material';
+import { useReactive } from 'ahooks';
+import { useRef } from 'react';
+function LoadingImage({ ref = undefined, onLoad = () => { }, ...props }) {
+    const imageRef = useRef(null);
+    const state = useReactive({
+        loading: true,
+    });
+    return (_jsxs("div", { style: { position: 'relative' }, ref: ref || imageRef, children: [_jsx("div", { className: "lazy-image-wrapper", style: {
+                    visibility: state.loading ? 'hidden' : 'visible',
+                    background: '#f4f4f4',
+                    width: '100%',
+                    height: '100%',
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                }, children: _jsx("img", { alt: "", ...props, onLoad: () => {
+                        state.loading = false;
+                        try {
+                            onLoad();
+                        }
+                        catch (error) {
+                            console.error('image onLoad error: ', error);
+                        }
+                    }, loading: "eager" // must be eager to make sure the image is loaded
+                 }) }), state.loading && (_jsx(Skeleton, { className: "lazy-image-skeleton", animation: "wave", variant: "rectangular", style: {
+                    width: '100%',
+                    height: '100%',
+                    position: 'absolute',
+                    top: 0,
+                } }))] }));
+}
+export default LoadingImage;