@blocklet/aigne-hub 0.2.7

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

@@ -0,0 +1,100 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = useConversation;
+const immer_1 = require("immer");
+const nanoid_1 = require("nanoid");
+const react_1 = require("react");
+const nextId = () => (0, nanoid_1.nanoid)(16);
+function useConversation({ scrollToBottom, textCompletions, imageGenerations, }) {
+    const [messages, setMessages] = (0, react_1.useState)(() => [
+        { id: nextId(), response: 'Hi, I am AIGNE Hub! How can I assist you today?' },
+    ]);
+    const add = (0, react_1.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) => (0, immer_1.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) => (0, immer_1.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) => (0, immer_1.produce)(v, (draft) => {
+                const item = draft.find((i) => i.id === id);
+                if (item)
+                    item.error = error;
+            }));
+            throw error;
+        }
+        finally {
+            setMessages((v) => (0, immer_1.produce)(v, (draft) => {
+                const item = draft.find((i) => i.id === id);
+                if (item)
+                    item.loading = false;
+            }));
+        }
+    }, [imageGenerations, scrollToBottom, textCompletions]);
+    const cancel = (0, react_1.useCallback)(({ id }) => {
+        setMessages((v) => (0, immer_1.produce)(v, (draft) => {
+            const i = draft.find((i) => i.id === id);
+            if (i)
+                i.loading = false;
+        }));
+    }, []);
+    return { messages, add, cancel, setMessages };
+}

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

@@ -0,0 +1,40 @@
+"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 context_1 = require("@arcblock/ux/lib/Locale/context");
+const material_1 = require("@mui/material");
+const error_1 = require("../../api/error");
+const withLocaleProvider_1 = __importDefault(require("../../utils/withLocaleProvider"));
+const button_1 = __importDefault(require("./button"));
+function CreditErrorAlert({ error, ...props }) {
+    const { t } = (0, context_1.useLocaleContext)();
+    const isCreditError = (error === null || error === void 0 ? void 0 : error.type) === error_1.CreditErrorType.NOT_ENOUGH;
+    if (!isCreditError) {
+        return ((0, jsx_runtime_1.jsx)(material_1.Alert, { severity: "error", ...props, children: (error === null || error === void 0 ? void 0 : error.message) || t('unknownError') }));
+    }
+    return ((0, jsx_runtime_1.jsxs)(material_1.Alert, { severity: "warning", ...props, sx: {
+            px: 1,
+            py: 0,
+            '& .MuiAlert-message': {
+                width: '100%',
+            },
+            ...props.sx,
+        }, children: [t('creditNotEnoughTip'), (0, jsx_runtime_1.jsx)(material_1.Stack, { direction: "row", sx: { justifyContent: 'flex-end' }, children: (0, jsx_runtime_1.jsx)(button_1.default, { shouldOpenInNewTab: true, size: "small", variant: "outlined", color: "warning", children: t('buyCreditsNow') }) })] }));
+}
+exports.default = (0, withLocaleProvider_1.default)(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/cjs/components/credit/balance.js

@@ -0,0 +1,95 @@
+"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 context_1 = require("@arcblock/ux/lib/Locale/context");
+const icons_material_1 = require("@mui/icons-material");
+const material_1 = require("@mui/material");
+const colors_1 = require("@mui/material/colors");
+const react_1 = require("react");
+const app_1 = require("../../api/app");
+const withLocaleProvider_1 = __importDefault(require("../../utils/withLocaleProvider"));
+function CreditBalance({ balance = undefined, currency = undefined, useAIKitService = false }) {
+    var _a, _b;
+    const { t } = (0, context_1.useLocaleContext)();
+    const [creditData, setCreditData] = (0, react_1.useState)(null);
+    const [loading, setLoading] = (0, react_1.useState)(true);
+    const [error, setError] = (0, react_1.useState)(null);
+    const fetchBalance = (0, react_1.useCallback)(async () => {
+        try {
+            setLoading(true);
+            setError(null);
+            const result = await (0, app_1.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]);
+    (0, react_1.useEffect)(() => {
+        fetchBalance();
+    }, [fetchBalance]);
+    if (loading) {
+        return ((0, jsx_runtime_1.jsx)(material_1.Card, { children: (0, jsx_runtime_1.jsx)(material_1.CardContent, { children: (0, jsx_runtime_1.jsx)(material_1.Box, { sx: {
+                        display: 'flex',
+                        justifyContent: 'center',
+                        alignItems: 'center',
+                        minHeight: '120px',
+                    }, children: (0, jsx_runtime_1.jsx)(material_1.CircularProgress, { size: 32 }) }) }) }));
+    }
+    if (error) {
+        return ((0, jsx_runtime_1.jsx)(material_1.Card, { children: (0, jsx_runtime_1.jsx)(material_1.CardContent, { children: (0, jsx_runtime_1.jsx)(material_1.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 ((0, jsx_runtime_1.jsxs)(material_1.Card, { sx: {
+            background: `linear-gradient(135deg, ${colors_1.blue[500]} 0%, ${colors_1.blue[700]} 100%)`,
+            color: 'white',
+            position: 'relative',
+            overflow: 'hidden',
+        }, children: [(0, jsx_runtime_1.jsx)(material_1.CardContent, { sx: { position: 'relative', zIndex: 1 }, children: (0, jsx_runtime_1.jsxs)(material_1.Stack, { spacing: 2, children: [(0, jsx_runtime_1.jsxs)(material_1.Stack, { direction: "row", spacing: 1, sx: {
+                                alignItems: 'center',
+                            }, children: [(0, jsx_runtime_1.jsx)(icons_material_1.AccountBalanceWalletRounded, { sx: { fontSize: 28 } }), (0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "h6", sx: { fontWeight: 'bold' }, children: t('creditBalance') })] }), (0, jsx_runtime_1.jsxs)(material_1.Box, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "h3", sx: { fontWeight: 'bold', lineHeight: 1 }, children: displayBalance }), (0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "body1", sx: { opacity: 0.9, mt: 0.5 }, children: displayCurrency })] }), (0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "body2", sx: { opacity: 0.8 }, children: t('availableForUse') })] }) }), (0, jsx_runtime_1.jsx)(material_1.Box, { sx: {
+                    position: 'absolute',
+                    top: -20,
+                    right: -20,
+                    width: 80,
+                    height: 80,
+                    borderRadius: '50%',
+                    backgroundColor: 'rgba(255, 255, 255, 0.1)',
+                    zIndex: 0,
+                } }), (0, jsx_runtime_1.jsx)(material_1.Box, { sx: {
+                    position: 'absolute',
+                    bottom: -30,
+                    left: -30,
+                    width: 100,
+                    height: 100,
+                    borderRadius: '50%',
+                    backgroundColor: 'rgba(255, 255, 255, 0.05)',
+                    zIndex: 0,
+                } })] }));
+}
+exports.default = (0, withLocaleProvider_1.default)(CreditBalance, {
+    translations: {
+        en: {
+            creditBalance: 'Credit Balance',
+            availableForUse: 'Available for use',
+            failedToLoadBalance: 'Failed to load balance',
+        },
+        zh: {
+            creditBalance: '信用额度余额',
+            availableForUse: '可用余额',
+            failedToLoadBalance: '加载余额失败',
+        },
+    },
+});

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

@@ -0,0 +1,69 @@
+"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 context_1 = require("@arcblock/ux/lib/Locale/context");
+const Toast_1 = __importDefault(require("@arcblock/ux/lib/Toast"));
+const lab_1 = require("@mui/lab");
+const material_1 = require("@mui/material");
+const react_1 = require("react");
+const ufo_1 = require("ufo");
+const app_1 = require("../../api/app");
+const withLocaleProvider_1 = __importDefault(require("../../utils/withLocaleProvider"));
+function CreditButton({ shouldOpenInNewTab = true, size = 'small', variant = 'outlined', color = 'primary', children = null, useAIKitService = false, ...props }) {
+    var _a, _b;
+    const { t } = (0, context_1.useLocaleContext)();
+    const [submitting, setSubmitting] = (0, react_1.useState)(false);
+    const buyCredits = (0, react_1.useCallback)(async () => {
+        setSubmitting(true);
+        try {
+            const link = await (0, app_1.getCreditPaymentLink)({
+                useAIKitService,
+            });
+            if (link) {
+                const { href } = window.location;
+                const payLink = (0, ufo_1.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_1.default.error(t('creditPaymentLinkNotAvailable'));
+            }
+        }
+        catch (error) {
+            Toast_1.default.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 ((0, jsx_runtime_1.jsx)(lab_1.LoadingButton, { onClick: buyCredits, size: size, variant: variant, color: color, type: "button", loading: submitting, ...props, children: children || (0, jsx_runtime_1.jsx)(material_1.Typography, { noWrap: true, children: t('buyCredits') }) }));
+}
+exports.default = (0, withLocaleProvider_1.default)(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/cjs/components/credit/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.CreditErrorAlert = exports.CreditBalance = exports.CreditButton = void 0;
+var button_1 = require("./button");
+Object.defineProperty(exports, "CreditButton", { enumerable: true, get: function () { return __importDefault(button_1).default; } });
+var balance_1 = require("./balance");
+Object.defineProperty(exports, "CreditBalance", { enumerable: true, get: function () { return __importDefault(balance_1).default; } });
+var alert_1 = require("./alert");
+Object.defineProperty(exports, "CreditErrorAlert", { enumerable: true, get: function () { return __importDefault(alert_1).default; } });

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

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = CustomFormLabel;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const icons_material_1 = require("@mui/icons-material");
+const material_1 = require("@mui/material");
+function CustomFormLabel({ children, required = false, tooltip = '', description = '', ...props }) {
+    return ((0, jsx_runtime_1.jsxs)(material_1.Box, { sx: { mb: 1, width: '100%' }, children: [(0, jsx_runtime_1.jsxs)(material_1.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 && ((0, jsx_runtime_1.jsx)(material_1.Typography, { component: "span", color: "error", children: "*" })), tooltip &&
+                        (typeof tooltip === 'string' ? ((0, jsx_runtime_1.jsx)(material_1.Tooltip, { title: tooltip, children: (0, jsx_runtime_1.jsx)(icons_material_1.InfoOutlined, { fontSize: "small", sx: { opacity: 0.7, fontSize: '1rem' } }) })) : (tooltip))] }), description && ((0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "caption", sx: {
+                    color: 'text.secondary',
+                }, children: description }))] }));
+}

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

@@ -0,0 +1,116 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = ImagePreview;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const CloudDownloadOutlined_1 = __importDefault(require("@mui/icons-material/CloudDownloadOutlined"));
+const RotateRightOutlined_1 = __importDefault(require("@mui/icons-material/RotateRightOutlined"));
+const ZoomInOutlined_1 = __importDefault(require("@mui/icons-material/ZoomInOutlined"));
+const ZoomOutOutlined_1 = __importDefault(require("@mui/icons-material/ZoomOutOutlined"));
+const material_1 = require("@mui/material");
+const ahooks_1 = require("ahooks");
+const file_saver_1 = require("file-saver");
+const react_photo_view_1 = require("react-photo-view");
+const ufo_1 = require("ufo");
+const loading_image_1 = __importDefault(require("./loading-image"));
+const renderIconButton = (children, onClick, { key, ...extraProps } = {}) => {
+    return ((0, jsx_runtime_1.jsx)(material_1.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 '';
+}
+function ImagePreview({ dataSource = [], itemWidth = undefined, itemHeight = undefined, spacing = 1, transition = 'all 0.3s', borderRadius = 0, formatDownloadSrc = (value) => value, showDownloadButton = true, }) {
+    const state = (0, ahooks_1.useReactive)({
+        downloadingIndexMap: {},
+    });
+    const getDownloadButton = (currentIndex, extraProps = {}) => renderIconButton((0, jsx_runtime_1.jsx)(CloudDownloadOutlined_1.default, { 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 (0, file_saver_1.saveAs)(formatDownloadSrc(src));
+            }
+            state.downloadingIndexMap = {
+                ...state.downloadingIndexMap,
+                [currentIndex]: false,
+            };
+        }
+    }, {
+        key: 'download',
+        disabled: !!state.downloadingIndexMap[currentIndex],
+        ...extraProps,
+    });
+    return ((0, jsx_runtime_1.jsxs)(react_photo_view_1.PhotoProvider, { toolbarRender: ({ index, scale, onScale, rotate, onRotate }) => {
+            return [
+                renderIconButton((0, jsx_runtime_1.jsx)(ZoomInOutlined_1.default, {}), () => onScale(scale + 0.25), {
+                    key: 'scale-down',
+                }),
+                renderIconButton((0, jsx_runtime_1.jsx)(ZoomOutOutlined_1.default, {}), () => onScale(scale - 0.25), {
+                    key: 'scale-up',
+                }),
+                renderIconButton((0, jsx_runtime_1.jsx)(RotateRightOutlined_1.default, {}), () => onRotate(rotate + 90), {
+                    key: 'rotate',
+                }),
+                getDownloadButton(index),
+            ];
+        }, children: [(0, jsx_runtime_1.jsx)(material_1.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}" }), (0, jsx_runtime_1.jsx)(material_1.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 ((0, jsx_runtime_1.jsx)(material_1.Grid
+                    // eslint-disable-next-line react/no-array-index-key
+                    , { className: "photo-item", sx: {
+                            transition,
+                            '&:hover': {
+                                cursor: 'pointer',
+                                '& .photo-toolbar': {
+                                    transition,
+                                    opacity: 1,
+                                },
+                            },
+                        }, children: (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: { position: 'relative' }, children: [(0, jsx_runtime_1.jsx)(react_photo_view_1.PhotoView, { ...item, children: (0, jsx_runtime_1.jsx)(loading_image_1.default, { ...item, src: (0, ufo_1.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%',
+                                        } }) }), (0, jsx_runtime_1.jsx)(material_1.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/cjs/components/index.js

@@ -0,0 +1,45 @@
+"use strict";
+/// <reference path="../env.d.ts" />
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FormLabel = exports.Table = exports.Switch = exports.CreditErrorAlert = exports.CreditBalance = exports.CreditButton = exports.SubscribeErrorAlert = exports.SubscribeButton = exports.Conversation = exports.ImagePreview = exports.LoadingImage = void 0;
+var loading_image_1 = require("./loading-image");
+Object.defineProperty(exports, "LoadingImage", { enumerable: true, get: function () { return __importDefault(loading_image_1).default; } });
+var image_preview_1 = require("./image-preview");
+Object.defineProperty(exports, "ImagePreview", { enumerable: true, get: function () { return __importDefault(image_preview_1).default; } });
+var conversation_1 = require("./conversation");
+Object.defineProperty(exports, "Conversation", { enumerable: true, get: function () { return __importDefault(conversation_1).default; } });
+__exportStar(require("./conversation"), exports);
+var button_1 = require("./subscribe/button");
+Object.defineProperty(exports, "SubscribeButton", { enumerable: true, get: function () { return __importDefault(button_1).default; } });
+var alert_1 = require("./subscribe/alert");
+Object.defineProperty(exports, "SubscribeErrorAlert", { enumerable: true, get: function () { return __importDefault(alert_1).default; } });
+// Credit components
+var button_2 = require("./credit/button");
+Object.defineProperty(exports, "CreditButton", { enumerable: true, get: function () { return __importDefault(button_2).default; } });
+var balance_1 = require("./credit/balance");
+Object.defineProperty(exports, "CreditBalance", { enumerable: true, get: function () { return __importDefault(balance_1).default; } });
+var alert_2 = require("./credit/alert");
+Object.defineProperty(exports, "CreditErrorAlert", { enumerable: true, get: function () { return __importDefault(alert_2).default; } });
+var switch_button_1 = require("./switch-button");
+Object.defineProperty(exports, "Switch", { enumerable: true, get: function () { return __importDefault(switch_button_1).default; } });
+var table_1 = require("./table");
+Object.defineProperty(exports, "Table", { enumerable: true, get: function () { return __importDefault(table_1).default; } });
+var form_label_1 = require("./form-label");
+Object.defineProperty(exports, "FormLabel", { enumerable: true, get: function () { return __importDefault(form_label_1).default; } });

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

@@ -0,0 +1,37 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+/* eslint-disable import/no-extraneous-dependencies */
+const material_1 = require("@mui/material");
+const ahooks_1 = require("ahooks");
+const react_1 = require("react");
+function LoadingImage({ ref = undefined, onLoad = () => { }, ...props }) {
+    const imageRef = (0, react_1.useRef)(null);
+    const state = (0, ahooks_1.useReactive)({
+        loading: true,
+    });
+    return ((0, jsx_runtime_1.jsxs)("div", { style: { position: 'relative' }, ref: ref || imageRef, children: [(0, jsx_runtime_1.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: (0, jsx_runtime_1.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 && ((0, jsx_runtime_1.jsx)(material_1.Skeleton, { className: "lazy-image-skeleton", animation: "wave", variant: "rectangular", style: {
+                    width: '100%',
+                    height: '100%',
+                    position: 'absolute',
+                    top: 0,
+                } }))] }));
+}
+exports.default = LoadingImage;

package/lib/cjs/components/subscribe/alert.js

@@ -0,0 +1,53 @@
+"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 context_1 = require("@arcblock/ux/lib/Locale/context");
+const material_1 = require("@mui/material");
+const error_1 = require("../../api/error");
+const withLocaleProvider_1 = __importDefault(require("../../utils/withLocaleProvider"));
+const button_1 = __importDefault(require("./button"));
+const state_1 = require("./state");
+function SubscribeErrorAlert({ error, ...props }) {
+    const { t } = (0, context_1.useLocaleContext)();
+    const isUnsubscribeError = (error === null || error === void 0 ? void 0 : error.type) === error_1.SubscriptionErrorType.UNSUBSCRIBED;
+    const loading = (0, state_1.useAIKitServiceStatus)((i) => i.loading);
+    const subscription = (0, state_1.useAIKitServiceStatus)((i) => { var _a; return (_a = i.app) === null || _a === void 0 ? void 0 : _a.subscription; });
+    const useAIKitService = (0, state_1.useAIKitServiceStatus)((i) => { var _a, _b; return (_b = (_a = i.app) === null || _a === void 0 ? void 0 : _a.config) === null || _b === void 0 ? void 0 : _b.useAIKitService; });
+    const isPastDue = (subscription === null || subscription === void 0 ? void 0 : subscription.status) === 'past_due';
+    const message = !isUnsubscribeError
+        ? error.message
+        : !subscription
+            ? t('notSubscribeTip')
+            : isPastDue
+                ? t('pastDueTip')
+                : !useAIKitService
+                    ? t('notEnableAIServiceTip')
+                    : t('successTip');
+    return ((0, jsx_runtime_1.jsxs)(material_1.Alert, { severity: isUnsubscribeError && subscription && useAIKitService ? 'info' : 'warning', ...props, sx: {
+            px: 1,
+            py: 0,
+            '& .MuiAlert-message': {
+                width: '100%',
+            },
+            ...props.sx,
+        }, children: [isUnsubscribeError && loading ? (0, jsx_runtime_1.jsx)(material_1.CircularProgress, { size: 18 }) : message, isUnsubscribeError && ((0, jsx_runtime_1.jsx)(material_1.Stack, { direction: "row", sx: { justifyContent: 'flex-end' }, children: (0, jsx_runtime_1.jsx)(button_1.default, { shouldOpenInNewTab: true, showUseAIServiceButton: true }) }))] }));
+}
+exports.default = (0, withLocaleProvider_1.default)(SubscribeErrorAlert, {
+    translations: {
+        en: {
+            notSubscribeTip: 'Hello, please subscribe to AI service first!',
+            pastDueTip: 'Your AI service has expired, please renew it first!',
+            notEnableAIServiceTip: 'You have not enabled AI service, please enable AI service first!',
+            successTip: 'Congratulations, your subscription is successful!',
+        },
+        zh: {
+            notSubscribeTip: '你好，请订阅 AI 服务后继续！',
+            pastDueTip: '您的 AI 服务已过期，请续订后继续！',
+            notEnableAIServiceTip: '您尚未启用AI服务，请启用 AI 服务后继续！',
+            successTip: '恭喜，您的订阅已生效！',
+        },
+    },
+});