@blocklet/aigne-hub 0.2.14 → 0.2.16

package/lib/cjs/api/call/index.js

@@ -17,3 +17,4 @@ Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("./v1"), exports);
 __exportStar(require("./v2"), exports);
 __exportStar(require("./proxy"), exports);
+__exportStar(require("../user"), exports);

package/lib/cjs/api/user.js

@@ -0,0 +1,32 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getUserInfo = getUserInfo;
+const error_1 = require("@blocklet/error");
+const axios_1 = __importDefault(require("axios"));
+const ufo_1 = require("ufo");
+const util_1 = require("./utils/util");
+async function getUserInfo({ baseUrl, accessKey, }) {
+    let finalBaseUrl = (0, util_1.getPrefix)();
+    try {
+        if (baseUrl) {
+            const tmp = new URL(baseUrl);
+            if (tmp.origin !== window.location.origin) {
+                finalBaseUrl = await (0, util_1.getRemoteBaseUrl)(baseUrl);
+            }
+        }
+    }
+    catch (err) {
+        console.warn('Failed to parse baseUrl:', err);
+        throw new Error(`Failed to parse baseUrl: ${(0, error_1.formatError)(err)}`);
+    }
+    return axios_1.default
+        .get((0, ufo_1.joinURL)(finalBaseUrl, '/api/user/info'), {
+        headers: {
+            Authorization: `Bearer ${accessKey}`,
+        },
+    })
+        .then((res) => res.data);
+}

package/lib/cjs/api/utils/util.js

@@ -0,0 +1,39 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getPrefix = exports.getRemoteBaseUrl = void 0;
+const axios_1 = __importDefault(require("axios"));
+const ufo_1 = require("ufo");
+const AIGNE_HUB_DID = 'z8ia3xzq2tMq8CRHfaXj1BTYJyYnEcHbqP8cJ';
+const getRemoteBaseUrl = async (url) => {
+    const tmp = new URL(url);
+    if (tmp.origin === window.location.origin) {
+        return (0, exports.getPrefix)();
+    }
+    const scriptUrl = (0, ufo_1.joinURL)(tmp.origin, '__blocklet__.js?type=json');
+    const blockletInfo = await axios_1.default.get(scriptUrl).then((res) => res.data);
+    const componentId = ((blockletInfo === null || blockletInfo === void 0 ? void 0 : blockletInfo.componentId) || '').split('/').pop();
+    if (componentId === AIGNE_HUB_DID) {
+        return (0, ufo_1.joinURL)(tmp.origin, blockletInfo.prefix || '/');
+    }
+    const component = ((blockletInfo === null || blockletInfo === void 0 ? void 0 : blockletInfo.componentMountPoints) || []).find((x) => (x === null || x === void 0 ? void 0 : x.did) === AIGNE_HUB_DID);
+    return component ? (0, ufo_1.joinURL)(tmp.origin, component.mountPoint) : url;
+};
+exports.getRemoteBaseUrl = getRemoteBaseUrl;
+const getPrefix = () => {
+    var _a, _b, _c, _d;
+    const prefix = ((_a = window.blocklet) === null || _a === void 0 ? void 0 : _a.prefix) || '/';
+    const baseUrl = (_b = window.location) === null || _b === void 0 ? void 0 : _b.origin; // required when use payment feature cross origin
+    const componentId = (((_c = window.blocklet) === null || _c === void 0 ? void 0 : _c.componentId) || '').split('/').pop();
+    if (componentId === AIGNE_HUB_DID) {
+        return (0, ufo_1.joinURL)(baseUrl, prefix);
+    }
+    const component = (((_d = window.blocklet) === null || _d === void 0 ? void 0 : _d.componentMountPoints) || []).find((x) => (x === null || x === void 0 ? void 0 : x.did) === AIGNE_HUB_DID);
+    if (component) {
+        return (0, ufo_1.joinURL)(baseUrl, component.mountPoint);
+    }
+    return (0, ufo_1.joinURL)(baseUrl, prefix);
+};
+exports.getPrefix = getPrefix;

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

@@ -5,15 +5,16 @@ var __importDefault = (this && this.__importDefault) || function (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 error_1 = require("@blocklet/error");
 const material_1 = require("@mui/material");
-const error_1 = require("../../api/error");
+const error_2 = 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;
+    const isCreditError = (error === null || error === void 0 ? void 0 : error.type) === error_2.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.jsx)(material_1.Alert, { severity: "error", ...props, children: (0, error_1.formatError)(error) || t('unknownError') }));
     }
     return ((0, jsx_runtime_1.jsxs)(material_1.Alert, { severity: "warning", ...props, sx: {
             px: 1,

package/lib/cjs/components/index.js

@@ -18,7 +18,7 @@ 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;
+exports.FormLabel = exports.UserCreditCard = 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");
@@ -41,5 +41,7 @@ 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 user_credit_card_1 = require("./user-credit-card");
+Object.defineProperty(exports, "UserCreditCard", { enumerable: true, get: function () { return __importDefault(user_credit_card_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/user-credit-card.js

@@ -0,0 +1,97 @@
+"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 UserCard_1 = __importDefault(require("@arcblock/ux/lib/UserCard"));
+const error_1 = require("@blocklet/error");
+const material_1 = require("@mui/material");
+const ahooks_1 = require("ahooks");
+const user_1 = require("../api/user");
+const util_1 = require("../utils/util");
+const withLocaleProvider_1 = __importDefault(require("../utils/withLocaleProvider"));
+function UserCreditCard({ baseUrl, accessKey, onSuccess = () => { }, onError = () => { }, mode = 'default', render = () => null, }) {
+    var _a, _b, _c, _d, _e, _f;
+    const { t } = (0, context_1.useLocaleContext)();
+    const { data: userInfoData, loading } = (0, ahooks_1.useRequest)(() => (0, user_1.getUserInfo)({ baseUrl, accessKey }), {
+        refreshDeps: [baseUrl, accessKey],
+        onError: (err) => {
+            Toast_1.default.error((0, error_1.formatError)(err));
+            onError === null || onError === void 0 ? void 0 : onError(err);
+        },
+        onSuccess: (data) => {
+            onSuccess === null || onSuccess === void 0 ? void 0 : onSuccess(data);
+        },
+    });
+    if (loading) {
+        return ((0, jsx_runtime_1.jsxs)(material_1.Box, { sx: { p: 2, textAlign: 'center' }, children: [(0, jsx_runtime_1.jsx)(material_1.CircularProgress, { size: 24 }), (0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "body2", color: "text.secondary", sx: { mt: 1 }, children: t('loadingUserInfo') })] }));
+    }
+    if (!userInfoData) {
+        return ((0, jsx_runtime_1.jsx)(material_1.Box, { sx: { p: 2 }, children: (0, jsx_runtime_1.jsx)(material_1.Alert, { severity: "info", sx: { fontSize: '0.875rem' }, children: t('noUserData') }) }));
+    }
+    if (mode === 'custom') {
+        return render(userInfoData);
+    }
+    return ((0, jsx_runtime_1.jsxs)(material_1.Stack, { sx: { p: 2, border: '1px solid', borderColor: 'divider', borderRadius: 2, width: '100%' }, spacing: 2, className: "user-credit-card", children: [(0, jsx_runtime_1.jsxs)(material_1.Stack, { direction: "row", justifyContent: "space-between", alignItems: "center", children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "body2", color: "text.secondary", children: t('username') }), (0, jsx_runtime_1.jsx)(UserCard_1.default, { user: userInfoData.user, showHoverCard: true, popupShowDid: true, sx: {
+                            border: 'none',
+                            p: 0,
+                            minWidth: 0,
+                        }, avatarProps: {
+                            size: 24,
+                        } })] }), (userInfoData === null || userInfoData === void 0 ? void 0 : userInfoData.enableCredit) ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(material_1.Stack, { direction: "row", justifyContent: "space-between", alignItems: "center", children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "body2", color: "text.secondary", children: t('creditBalance') }), (0, jsx_runtime_1.jsxs)(material_1.Typography, { variant: "h6", fontWeight: "bold", children: [(0, util_1.formatNumber)(((_a = userInfoData === null || userInfoData === void 0 ? void 0 : userInfoData.creditBalance) === null || _a === void 0 ? void 0 : _a.balance) || '0'), " ", (_c = (_b = userInfoData.currency) === null || _b === void 0 ? void 0 : _b.symbol) !== null && _c !== void 0 ? _c : 'AHC'] })] }), ((_d = userInfoData.creditBalance) === null || _d === void 0 ? void 0 : _d.pendingCredit) && Number(userInfoData.creditBalance.pendingCredit) > 0 && ((0, jsx_runtime_1.jsxs)(material_1.Stack, { direction: "row", justifyContent: "space-between", alignItems: "center", children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "body2", color: "text.secondary", children: t('pendingCredit') }), (0, jsx_runtime_1.jsxs)(material_1.Typography, { variant: "h6", fontWeight: "bold", sx: { color: 'error.main' }, children: [(0, util_1.formatNumber)(userInfoData.creditBalance.pendingCredit), " ", (_f = (_e = userInfoData.currency) === null || _e === void 0 ? void 0 : _e.symbol) !== null && _f !== void 0 ? _f : 'AHC'] })] })), (0, jsx_runtime_1.jsxs)(material_1.Stack, { direction: "row", spacing: 1.5, sx: { mt: 1 }, children: [(userInfoData === null || userInfoData === void 0 ? void 0 : userInfoData.paymentLink) && ((0, jsx_runtime_1.jsx)(material_1.Button, { variant: "outlined", onClick: () => {
+                                    window.open((userInfoData === null || userInfoData === void 0 ? void 0 : userInfoData.paymentLink) || '', '_blank');
+                                }, sx: {
+                                    flex: 1,
+                                }, children: t('recharge') })), (0, jsx_runtime_1.jsx)(material_1.Button, { variant: "text", onClick: () => {
+                                    window.open((userInfoData === null || userInfoData === void 0 ? void 0 : userInfoData.profileLink) || '', '_blank');
+                                }, sx: {
+                                    borderColor: 'primary.main',
+                                    color: 'primary.main',
+                                }, children: t('manage') })] })] })) : ((0, jsx_runtime_1.jsxs)(material_1.Alert, { severity: "info", sx: {
+                    textAlign: 'left',
+                }, children: [t('creditNotEnabled'), (0, jsx_runtime_1.jsx)(material_1.Typography, { sx: {
+                            display: 'inline-block',
+                            fontSize: 'inherit',
+                            lineHeight: 'inherit',
+                            ml: 1,
+                            a: {
+                                textDecoration: 'none',
+                            },
+                            '& .MuiButtonBase-root': { p: 0, minWidth: 'auto' },
+                        }, children: (0, jsx_runtime_1.jsx)(material_1.Link, { href: (userInfoData === null || userInfoData === void 0 ? void 0 : userInfoData.profileLink) || '', target: "_blank", children: t('viewProfile') }) })] }))] }));
+}
+exports.default = (0, withLocaleProvider_1.default)(UserCreditCard, {
+    translations: {
+        en: {
+            username: 'User',
+            creditBalance: 'Credit Balance',
+            pendingCredit: 'Outstanding Charges',
+            recharge: 'Buy Credits',
+            manage: 'Manage',
+            creditNotEnabled: 'AIGNE Hub Credit billing is not enabled. You can use AI services directly.',
+            loadingUserInfo: 'Loading user information...',
+            fetchUserInfoFailed: 'Failed to fetch user information',
+            unknownUser: 'Unknown User',
+            noUserData: 'No user data available',
+            retry: 'Retry',
+            viewProfile: 'View Profile',
+        },
+        zh: {
+            username: '用户',
+            creditBalance: '信用额度',
+            pendingCredit: '待结清额度',
+            recharge: '购买额度',
+            manage: '管理额度',
+            creditNotEnabled: 'AIGNE Hub 未启用 Credit 计费功能，您可以直接使用AI服务。',
+            loadingUserInfo: '正在加载用户信息...',
+            fetchUserInfoFailed: '获取用户信息失败',
+            unknownUser: '未知用户',
+            noUserData: '暂无用户数据',
+            retry: '重试',
+            viewProfile: '查看用户信息',
+        },
+    },
+});

package/lib/cjs/utils/util.js

@@ -0,0 +1,24 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.formatNumber = formatNumber;
+const trimEnd_1 = __importDefault(require("lodash/trimEnd"));
+const numbro_1 = __importDefault(require("numbro"));
+function formatNumber(n, precision = 6, trim = true, thousandSeparated = true) {
+    if (!n || n === '0') {
+        return '0';
+    }
+    const num = (0, numbro_1.default)(n);
+    const options = {
+        thousandSeparated,
+        ...((precision || precision === 0) && { mantissa: precision }),
+    };
+    const result = num.format(options);
+    if (!trim) {
+        return result;
+    }
+    const [left, right] = result.split('.');
+    return right ? [left, (0, trimEnd_1.default)(right, '0')].filter(Boolean).join('.') : left;
+}

package/lib/esm/api/call/index.js

@@ -1,3 +1,4 @@
 export * from './v1';
 export * from './v2';
 export * from './proxy';
+export * from '../user';

package/lib/esm/api/user.js

@@ -0,0 +1,26 @@
+import { formatError } from '@blocklet/error';
+import axios from 'axios';
+import { joinURL } from 'ufo';
+import { getPrefix, getRemoteBaseUrl } from './utils/util';
+export async function getUserInfo({ baseUrl, accessKey, }) {
+    let finalBaseUrl = getPrefix();
+    try {
+        if (baseUrl) {
+            const tmp = new URL(baseUrl);
+            if (tmp.origin !== window.location.origin) {
+                finalBaseUrl = await getRemoteBaseUrl(baseUrl);
+            }
+        }
+    }
+    catch (err) {
+        console.warn('Failed to parse baseUrl:', err);
+        throw new Error(`Failed to parse baseUrl: ${formatError(err)}`);
+    }
+    return axios
+        .get(joinURL(finalBaseUrl, '/api/user/info'), {
+        headers: {
+            Authorization: `Bearer ${accessKey}`,
+        },
+    })
+        .then((res) => res.data);
+}

package/lib/esm/api/utils/util.js

@@ -0,0 +1,31 @@
+import axios from 'axios';
+import { joinURL } from 'ufo';
+const AIGNE_HUB_DID = 'z8ia3xzq2tMq8CRHfaXj1BTYJyYnEcHbqP8cJ';
+export const getRemoteBaseUrl = async (url) => {
+    const tmp = new URL(url);
+    if (tmp.origin === window.location.origin) {
+        return getPrefix();
+    }
+    const scriptUrl = joinURL(tmp.origin, '__blocklet__.js?type=json');
+    const blockletInfo = await axios.get(scriptUrl).then((res) => res.data);
+    const componentId = ((blockletInfo === null || blockletInfo === void 0 ? void 0 : blockletInfo.componentId) || '').split('/').pop();
+    if (componentId === AIGNE_HUB_DID) {
+        return joinURL(tmp.origin, blockletInfo.prefix || '/');
+    }
+    const component = ((blockletInfo === null || blockletInfo === void 0 ? void 0 : blockletInfo.componentMountPoints) || []).find((x) => (x === null || x === void 0 ? void 0 : x.did) === AIGNE_HUB_DID);
+    return component ? joinURL(tmp.origin, component.mountPoint) : url;
+};
+export const getPrefix = () => {
+    var _a, _b, _c, _d;
+    const prefix = ((_a = window.blocklet) === null || _a === void 0 ? void 0 : _a.prefix) || '/';
+    const baseUrl = (_b = window.location) === null || _b === void 0 ? void 0 : _b.origin; // required when use payment feature cross origin
+    const componentId = (((_c = window.blocklet) === null || _c === void 0 ? void 0 : _c.componentId) || '').split('/').pop();
+    if (componentId === AIGNE_HUB_DID) {
+        return joinURL(baseUrl, prefix);
+    }
+    const component = (((_d = window.blocklet) === null || _d === void 0 ? void 0 : _d.componentMountPoints) || []).find((x) => (x === null || x === void 0 ? void 0 : x.did) === AIGNE_HUB_DID);
+    if (component) {
+        return joinURL(baseUrl, component.mountPoint);
+    }
+    return joinURL(baseUrl, prefix);
+};

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

@@ -1,5 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import { formatError } from '@blocklet/error';
 import { Alert, Stack } from '@mui/material';
 import { CreditErrorType } from '../../api/error';
 import withLocaleProvider from '../../utils/withLocaleProvider';
@@ -8,7 +9,7 @@ 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 (_jsx(Alert, { severity: "error", ...props, children: formatError(error) || t('unknownError') }));
     }
     return (_jsxs(Alert, { severity: "warning", ...props, sx: {
             px: 1,

package/lib/esm/components/index.js

@@ -11,4 +11,5 @@ 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 UserCreditCard } from './user-credit-card';
 export { default as FormLabel } from './form-label';

package/lib/esm/components/user-credit-card.js

@@ -0,0 +1,92 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import Toast from '@arcblock/ux/lib/Toast';
+import UserCard from '@arcblock/ux/lib/UserCard';
+import { formatError } from '@blocklet/error';
+import { Alert, Box, Button, CircularProgress, Link, Stack, Typography } from '@mui/material';
+import { useRequest } from 'ahooks';
+import { getUserInfo } from '../api/user';
+import { formatNumber } from '../utils/util';
+import withLocaleProvider from '../utils/withLocaleProvider';
+function UserCreditCard({ baseUrl, accessKey, onSuccess = () => { }, onError = () => { }, mode = 'default', render = () => null, }) {
+    var _a, _b, _c, _d, _e, _f;
+    const { t } = useLocaleContext();
+    const { data: userInfoData, loading } = useRequest(() => getUserInfo({ baseUrl, accessKey }), {
+        refreshDeps: [baseUrl, accessKey],
+        onError: (err) => {
+            Toast.error(formatError(err));
+            onError === null || onError === void 0 ? void 0 : onError(err);
+        },
+        onSuccess: (data) => {
+            onSuccess === null || onSuccess === void 0 ? void 0 : onSuccess(data);
+        },
+    });
+    if (loading) {
+        return (_jsxs(Box, { sx: { p: 2, textAlign: 'center' }, children: [_jsx(CircularProgress, { size: 24 }), _jsx(Typography, { variant: "body2", color: "text.secondary", sx: { mt: 1 }, children: t('loadingUserInfo') })] }));
+    }
+    if (!userInfoData) {
+        return (_jsx(Box, { sx: { p: 2 }, children: _jsx(Alert, { severity: "info", sx: { fontSize: '0.875rem' }, children: t('noUserData') }) }));
+    }
+    if (mode === 'custom') {
+        return render(userInfoData);
+    }
+    return (_jsxs(Stack, { sx: { p: 2, border: '1px solid', borderColor: 'divider', borderRadius: 2, width: '100%' }, spacing: 2, className: "user-credit-card", children: [_jsxs(Stack, { direction: "row", justifyContent: "space-between", alignItems: "center", children: [_jsx(Typography, { variant: "body2", color: "text.secondary", children: t('username') }), _jsx(UserCard, { user: userInfoData.user, showHoverCard: true, popupShowDid: true, sx: {
+                            border: 'none',
+                            p: 0,
+                            minWidth: 0,
+                        }, avatarProps: {
+                            size: 24,
+                        } })] }), (userInfoData === null || userInfoData === void 0 ? void 0 : userInfoData.enableCredit) ? (_jsxs(_Fragment, { children: [_jsxs(Stack, { direction: "row", justifyContent: "space-between", alignItems: "center", children: [_jsx(Typography, { variant: "body2", color: "text.secondary", children: t('creditBalance') }), _jsxs(Typography, { variant: "h6", fontWeight: "bold", children: [formatNumber(((_a = userInfoData === null || userInfoData === void 0 ? void 0 : userInfoData.creditBalance) === null || _a === void 0 ? void 0 : _a.balance) || '0'), " ", (_c = (_b = userInfoData.currency) === null || _b === void 0 ? void 0 : _b.symbol) !== null && _c !== void 0 ? _c : 'AHC'] })] }), ((_d = userInfoData.creditBalance) === null || _d === void 0 ? void 0 : _d.pendingCredit) && Number(userInfoData.creditBalance.pendingCredit) > 0 && (_jsxs(Stack, { direction: "row", justifyContent: "space-between", alignItems: "center", children: [_jsx(Typography, { variant: "body2", color: "text.secondary", children: t('pendingCredit') }), _jsxs(Typography, { variant: "h6", fontWeight: "bold", sx: { color: 'error.main' }, children: [formatNumber(userInfoData.creditBalance.pendingCredit), " ", (_f = (_e = userInfoData.currency) === null || _e === void 0 ? void 0 : _e.symbol) !== null && _f !== void 0 ? _f : 'AHC'] })] })), _jsxs(Stack, { direction: "row", spacing: 1.5, sx: { mt: 1 }, children: [(userInfoData === null || userInfoData === void 0 ? void 0 : userInfoData.paymentLink) && (_jsx(Button, { variant: "outlined", onClick: () => {
+                                    window.open((userInfoData === null || userInfoData === void 0 ? void 0 : userInfoData.paymentLink) || '', '_blank');
+                                }, sx: {
+                                    flex: 1,
+                                }, children: t('recharge') })), _jsx(Button, { variant: "text", onClick: () => {
+                                    window.open((userInfoData === null || userInfoData === void 0 ? void 0 : userInfoData.profileLink) || '', '_blank');
+                                }, sx: {
+                                    borderColor: 'primary.main',
+                                    color: 'primary.main',
+                                }, children: t('manage') })] })] })) : (_jsxs(Alert, { severity: "info", sx: {
+                    textAlign: 'left',
+                }, children: [t('creditNotEnabled'), _jsx(Typography, { sx: {
+                            display: 'inline-block',
+                            fontSize: 'inherit',
+                            lineHeight: 'inherit',
+                            ml: 1,
+                            a: {
+                                textDecoration: 'none',
+                            },
+                            '& .MuiButtonBase-root': { p: 0, minWidth: 'auto' },
+                        }, children: _jsx(Link, { href: (userInfoData === null || userInfoData === void 0 ? void 0 : userInfoData.profileLink) || '', target: "_blank", children: t('viewProfile') }) })] }))] }));
+}
+export default withLocaleProvider(UserCreditCard, {
+    translations: {
+        en: {
+            username: 'User',
+            creditBalance: 'Credit Balance',
+            pendingCredit: 'Outstanding Charges',
+            recharge: 'Buy Credits',
+            manage: 'Manage',
+            creditNotEnabled: 'AIGNE Hub Credit billing is not enabled. You can use AI services directly.',
+            loadingUserInfo: 'Loading user information...',
+            fetchUserInfoFailed: 'Failed to fetch user information',
+            unknownUser: 'Unknown User',
+            noUserData: 'No user data available',
+            retry: 'Retry',
+            viewProfile: 'View Profile',
+        },
+        zh: {
+            username: '用户',
+            creditBalance: '信用额度',
+            pendingCredit: '待结清额度',
+            recharge: '购买额度',
+            manage: '管理额度',
+            creditNotEnabled: 'AIGNE Hub 未启用 Credit 计费功能，您可以直接使用AI服务。',
+            loadingUserInfo: '正在加载用户信息...',
+            fetchUserInfoFailed: '获取用户信息失败',
+            unknownUser: '未知用户',
+            noUserData: '暂无用户数据',
+            retry: '重试',
+            viewProfile: '查看用户信息',
+        },
+    },
+});

package/lib/esm/utils/util.js

@@ -0,0 +1,18 @@
+import trimEnd from 'lodash/trimEnd';
+import numbro from 'numbro';
+export function formatNumber(n, precision = 6, trim = true, thousandSeparated = true) {
+    if (!n || n === '0') {
+        return '0';
+    }
+    const num = numbro(n);
+    const options = {
+        thousandSeparated,
+        ...((precision || precision === 0) && { mantissa: precision }),
+    };
+    const result = num.format(options);
+    if (!trim) {
+        return result;
+    }
+    const [left, right] = result.split('.');
+    return right ? [left, trimEnd(right, '0')].filter(Boolean).join('.') : left;
+}

package/lib/types/api/call/index.d.ts

@@ -1,3 +1,4 @@
 export * from './v1';
 export * from './v2';
 export * from './proxy';
+export * from '../user';

package/lib/types/api/user.d.ts

@@ -0,0 +1,19 @@
+import { User } from '@arcblock/ux/lib/type';
+import type { TPaymentCurrency } from '@blocklet/payment-js';
+export interface UserInfoResult {
+    user: User;
+    enableCredit: boolean;
+    creditBalance: {
+        balance: string;
+        total: string;
+        grantCount: number;
+        pendingCredit: string;
+    } | null;
+    paymentLink: string | null;
+    currency?: TPaymentCurrency;
+    profileLink: string;
+}
+export declare function getUserInfo({ baseUrl, accessKey, }: {
+    baseUrl: string;
+    accessKey: string;
+}): Promise<UserInfoResult>;

package/lib/types/api/utils/util.d.ts

@@ -0,0 +1,2 @@
+export declare const getRemoteBaseUrl: (url: string) => Promise<string>;
+export declare const getPrefix: () => string;

package/lib/types/components/index.d.ts

@@ -9,4 +9,5 @@ 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 UserCreditCard } from './user-credit-card';
 export { default as FormLabel } from './form-label';

package/lib/types/components/user-credit-card.d.ts

@@ -0,0 +1,11 @@
+import { UserInfoResult } from '../api/user';
+interface UserCreditCardProps {
+    baseUrl: string;
+    accessKey: string;
+    onSuccess?: (userInfo: UserInfoResult) => void;
+    onError?: (error: Error) => void;
+    mode?: 'default' | 'custom';
+    render?: (userInfo: UserInfoResult) => React.ReactNode | null;
+}
+declare const _default: import("react").ComponentType<UserCreditCardProps>;
+export default _default;

package/lib/types/utils/util.d.ts

@@ -0,0 +1 @@
+export declare function formatNumber(n: number | string, precision?: number, trim?: boolean, thousandSeparated?: boolean): string | undefined;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/aigne-hub",
-  "version": "0.2.14",
+  "version": "0.2.16",
   "description": "The react.js component library for AIGNE Hub",
   "publishConfig": {
     "access": "public"
@@ -46,6 +46,16 @@
       "types": "./lib/types/components/*.d.ts",
       "import": "./lib/esm/components/*.js",
       "require": "./lib/cjs/components/*.js"
+    },
+    "./utils": {
+      "types": "./lib/types/utils/index.d.ts",
+      "import": "./lib/esm/utils/index.js",
+      "require": "./lib/cjs/utils/index.js"
+    },
+    "./utils/*": {
+      "types": "./lib/types/utils/*.d.ts",
+      "import": "./lib/esm/utils/*.js",
+      "require": "./lib/cjs/utils/*.js"
     }
   },
   "typesVersions": {
@@ -85,8 +95,9 @@
   "dependencies": {
     "@arcblock/did": "^1.21.0",
     "@arcblock/ux": "^3.0.33",
+    "@blocklet/error": "0.2.5",
     "@blocklet/logger": "^1.16.46",
-    "@blocklet/payment-js": "^1.19.6",
+    "@blocklet/payment-js": "^1.19.8",
     "@blocklet/sdk": "^1.16.46",
     "@emotion/css": "^11.13.5",
     "@emotion/react": "^11.14.0",
@@ -109,6 +120,7 @@
     "json-stable-stringify": "^1.1.1",
     "lodash": "^4.17.21",
     "nanoid": "^5.0.7",
+    "numbro": "^2.5.0",
     "openai": "^4.56.0",
     "react-markdown": "^9.0.1",
     "react-photo-view": "^1.2.6",