@lobehub/ui 1.94.7 → 1.95.0

package/README.md

@@ -10,20 +10,24 @@
 
 Lobe UI is an open-source UI component library for building _AIGC_ web apps
 
-[Changelog](./CHANGELOG.md) · [Report Bug][issues-url] · [Request Feature][issues-url]
+[Changelog](./CHANGELOG.md) · [Report Bug][github-issues-link] · [Request Feature][github-issues-link]
 
 <!-- SHIELD GROUP -->
 
-[![release][release-shield]][release-url]
-[![releaseDate][release-date-shield]][release-date-url]
-[![ciTest][ci-test-shield]][ci-test-url]
-[![ciRelease][ci-release-shield]][ci-release-url] <br/>
-[![contributors][contributors-shield]][contributors-url]
-[![forks][forks-shield]][forks-url]
-[![stargazers][stargazers-shield]][stargazers-url]
-[![issues][issues-shield]][issues-url]
-
-![](https://raw.githubusercontent.com/andreasbm/readme/master/assets/lines/rainbow.png)
+[![][npm-release-shield]][npm-release-link]
+[![][vercel-shield]][vercel-link]
+[![][discord-shield]][discord-link]
+[![][npm-downloads-shield]][npm-downloads-link]
+[![][github-releasedate-shield]][github-releasedate-link]
+[![][github-action-test-shield]][github-action-test-link]
+[![][github-action-release-shield]][github-action-release-link]<br/>
+[![][github-contributors-shield]][github-contributors-link]
+[![][github-forks-shield]][github-forks-link]
+[![][github-stars-shield]][github-stars-link]
+[![][github-issues-shield]][github-issues-link]
+[![][github-license-shield]][github-license-link]
+
+![](https://github-production-user-asset-6210df.s3.amazonaws.com/17870709/268452017-960ab8a1-e4b7-4648-beb1-77daf4b6034a.png)
 
 </div>
 
@@ -34,8 +38,6 @@ Lobe UI is an open-source UI component library for building _AIGC_ web apps
 
 - [📦 Installation](#-installation)
 
-- [🤯 Usage](#-usage)
-
   - [Compile with NextJS](#compile-with-nextjs)
 
 - [⌨️ Local Development](#️-local-development)
@@ -54,21 +56,16 @@ This package is [ESM only](https://gist.github.com/sindresorhus/a39789f98801d908
 
 To install Lobe UI, run the following command:
 
+[![][bun-shield]][bun-link]
+
 ```bash
-pnpm i -S @lobehub/ui
+$ bun add @lobehub/ui
 ```
 
-<div align="right">
-
-[![][back-to-top]](#readme-top)
-
-</div>
-
-## 🤯 Usage
-
 ### Compile with NextJS
 
-by work correct with nextjs ssr, add `transpilePackages: ['@lobehub/ui']` to `next.config.js`. For example:
+> **Note**\
+> By work correct with nextjs ssr, add `transpilePackages: ['@lobehub/ui']` to `next.config.js`. For example:
 
 ```js
 // next.config.js
@@ -87,17 +84,17 @@ const nextConfig = {
 
 ## ⌨️ Local Development
 
-You can use Gitpod for online development:
+You can use Github Codespaces for online development:
 
-[![Open in Gitpod](https://gitpod.io/button/open-in-gitpod.svg)][gitpod-url]
+[![][codespaces-shield]][codespaces-link]
 
 Or clone it for local development:
 
 ```bash
 $ git clone https://github.com/lobehub/lobe-ui.git
 $ cd lobe-ui
-$ pnpm install
-$ pnpm start
+$ bun install
+$ bun start
 ```
 
 <div align="right">
@@ -108,6 +105,10 @@ $ pnpm start
 
 ## 🤝 Contributing
 
+Contributions of all types are more than welcome, if you are interested in contributing code, feel free to check out our GitHub [Issues][github-issues-link] to get stuck in to show us what you’re made of.
+
+[![][pr-welcome-shield]][pr-welcome-link]
+
 [![][contributors-contrib]][contributors-url]
 
 <div align="right">
@@ -131,7 +132,11 @@ $ pnpm start
 
 ---
 
-#### 📝 License
+<details><summary><h4>📝 License</h4></summary>
+
+[![][fossa-license-shield]][fossa-license-link]
+
+</details>
 
 Copyright © 2023 [LobeHub][profile-url]. <br />
 This project is [MIT](./LICENSE) licensed.
@@ -139,26 +144,42 @@ This project is [MIT](./LICENSE) licensed.
 <!-- LINK GROUP -->
 
 [back-to-top]: https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square
-[ci-release-shield]: https://github.com/lobehub/lobe-ui/workflows/Release%20CI/badge.svg
-[ci-release-url]: https://github.com/lobehub/lobe-ui/actions?query=workflow%3ARelease%20CI
-[ci-test-shield]: https://github.com/lobehub/lobe-ui/workflows/Test%20CI/badge.svg
-[ci-test-url]: https://github.com/lobehub/lobe-ui/actions?query=workflow%3ATest%20CI
+[bun-link]: https://bun.sh
+[bun-shield]: https://img.shields.io/badge/-speedup%20with%20bun-black?logo=bun&style=for-the-badge
+[codespaces-link]: https://codespaces.new/lobehub/lobe-ui
+[codespaces-shield]: https://github.com/codespaces/badge.svg
 [contributors-contrib]: https://contrib.rocks/image?repo=lobehub/lobe-ui
-[contributors-shield]: https://img.shields.io/github/contributors/lobehub/lobe-ui.svg?style=flat
 [contributors-url]: https://github.com/lobehub/lobe-ui/graphs/contributors
-[forks-shield]: https://img.shields.io/github/forks/lobehub/lobe-ui.svg?style=flat
-[forks-url]: https://github.com/lobehub/lobe-ui/network/members
-[gitpod-url]: https://gitpod.io/#https://github.com/lobehub/lobe-ui
-[issues-shield]: https://img.shields.io/github/issues/lobehub/lobe-ui.svg?style=flat
-[issues-url]: https://github.com/lobehub/lobe-ui/issues/new/choose
+[discord-link]: https://discord.gg/AYFPHvv2jT
+[discord-shield]: https://img.shields.io/discord/1127171173982154893?color=5865F2&label=discord&labelColor=black&logo=discord&logoColor=white&style=flat-square
+[fossa-license-link]: https://app.fossa.com/projects/git%2Bgithub.com%2Flobehub%2Flobe-ui
+[fossa-license-shield]: https://app.fossa.com/api/projects/git%2Bgithub.com%2Flobehub%2Flobe-ui.svg?type=large
+[github-action-release-link]: https://github.com/actions/workflows/lobehub/lobe-ui/release.yml
+[github-action-release-shield]: https://img.shields.io/github/actions/workflow/status/lobehub/lobe-ui/release.yml?label=release&labelColor=black&logo=githubactions&logoColor=white&style=flat-square
+[github-action-test-link]: https://github.com/actions/workflows/lobehub/lobe-ui/test.yml
+[github-action-test-shield]: https://img.shields.io/github/actions/workflow/status/lobehub/lobe-ui/test.yml?label=test&labelColor=black&logo=githubactions&logoColor=white&style=flat-square
+[github-contributors-link]: https://github.com/lobehub/lobe-ui/graphs/contributors
+[github-contributors-shield]: https://img.shields.io/github/contributors/lobehub/lobe-ui?color=c4f042&labelColor=black&style=flat-square
+[github-forks-link]: https://github.com/lobehub/lobe-ui/network/members
+[github-forks-shield]: https://img.shields.io/github/forks/lobehub/lobe-ui?color=8ae8ff&labelColor=black&style=flat-square
+[github-issues-link]: https://github.com/lobehub/lobe-ui/issues
+[github-issues-shield]: https://img.shields.io/github/issues/lobehub/lobe-ui?color=ff80eb&labelColor=black&style=flat-square
+[github-license-link]: https://github.com/lobehub/lobe-ui/blob/master/LICENSE
+[github-license-shield]: https://img.shields.io/github/license/lobehub/lobe-ui?color=white&labelColor=black&style=flat-square
+[github-releasedate-link]: https://github.com/lobehub/lobe-ui/releases
+[github-releasedate-shield]: https://img.shields.io/github/release-date/lobehub/lobe-ui?labelColor=black&style=flat-square
+[github-stars-link]: https://github.com/lobehub/lobe-ui/network/stargazers
+[github-stars-shield]: https://img.shields.io/github/stars/lobehub/lobe-ui?color=ffcb47&labelColor=black&style=flat-square
 [lobe-chat]: https://github.com/lobehub/lobe-chat
 [lobe-commit]: https://github.com/lobehub/lobe-commit/tree/master/packages/lobe-commit
 [lobe-i18n]: https://github.com/lobehub/lobe-commit/tree/master/packages/lobe-i18n
 [lobe-theme]: https://github.com/lobehub/sd-webui-lobe-theme
+[npm-downloads-link]: https://www.npmjs.com/package/@lobehub/ui
+[npm-downloads-shield]: https://img.shields.io/npm/dt/@lobehub/ui?labelColor=black&style=flat-square
+[npm-release-link]: https://www.npmjs.com/package/@lobehub/ui
+[npm-release-shield]: https://img.shields.io/npm/v/@lobehub/ui?color=369eff&labelColor=black&logo=npm&logoColor=white&style=flat-square
+[pr-welcome-link]: https://github.com/lobehub/lobe-chat/pulls
+[pr-welcome-shield]: https://img.shields.io/badge/🤯_pr_welcome-%E2%86%92-ffcb47?labelColor=black&style=for-the-badge
 [profile-url]: https://github.com/lobehub
-[release-date-shield]: https://img.shields.io/github/release-date/lobehub/lobe-ui?style=flat
-[release-date-url]: https://github.com/lobehub/lobe-ui/releases
-[release-shield]: https://img.shields.io/npm/v/@lobehub/ui?label=%F0%9F%A4%AF%20NPM
-[release-url]: https://www.npmjs.com/package/@lobehub/ui
-[stargazers-shield]: https://img.shields.io/github/stars/lobehub/lobe-ui.svg?style=flat
-[stargazers-url]: https://github.com/lobehub/lobe-ui/stargazers
+[vercel-link]: https://ui.lobehub.com
+[vercel-shield]: https://img.shields.io/website?down_message=offline&label=vercel&labelColor=black&logo=vercel&style=flat-square&up_message=online&url=https%3A%2F%2Fui.lobehub.com

package/es/ConfigProvider/index.d.ts

@@ -0,0 +1,13 @@
+import { ReactNode } from 'react';
+import { CDN, CdnApi } from "../utils/genCdnUrl";
+type CdnFn = ({ pkg, version, path }: CdnApi) => string;
+export interface Config {
+    customCdnFn?: CdnFn;
+    proxy: CDN | 'custom';
+}
+declare const ConfigProvider: import("react").NamedExoticComponent<{
+    children: ReactNode;
+    config: Config;
+}>;
+export declare const useCdnFn: () => CdnFn;
+export default ConfigProvider;

package/es/ConfigProvider/index.js

@@ -0,0 +1,40 @@
+import { createContext, memo, useContext } from 'react';
+import { genCdnUrl } from "../utils/genCdnUrl";
+import { jsx as _jsx } from "react/jsx-runtime";
+var ConfigContext = /*#__PURE__*/createContext(null);
+var ConfigProvider = /*#__PURE__*/memo(function (_ref) {
+  var children = _ref.children,
+    config = _ref.config;
+  return /*#__PURE__*/_jsx(ConfigContext.Provider, {
+    value: config,
+    children: children
+  });
+});
+var fallback = function fallback(_ref2) {
+  var pkg = _ref2.pkg,
+    version = _ref2.version,
+    path = _ref2.path;
+  return genCdnUrl({
+    path: path,
+    pkg: pkg,
+    proxy: 'aliyun',
+    version: version
+  });
+};
+export var useCdnFn = function useCdnFn() {
+  var config = useContext(ConfigContext);
+  if (!config) return fallback;
+  if (config.proxy !== 'custom') return function (_ref3) {
+    var pkg = _ref3.pkg,
+      version = _ref3.version,
+      path = _ref3.path;
+    return genCdnUrl({
+      path: path,
+      pkg: pkg,
+      proxy: config.proxy,
+      version: version
+    });
+  };
+  return (config === null || config === void 0 ? void 0 : config.customCdnFn) || fallback;
+};
+export default ConfigProvider;

package/es/FluentEmoji/index.js

@@ -4,7 +4,7 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 import { kebabCase } from 'lodash-es';
 import { memo, useMemo, useState } from 'react';
-import { genCdnUrl } from "../utils/genCdnUrl";
+import { useCdnFn } from "../ConfigProvider";
 import { getEmojiNameByCharacter } from "../utils/getEmojiByCharacter";
 import { useStyles } from "./style";
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -16,6 +16,7 @@ var FluentEmoji = /*#__PURE__*/memo(function (_ref) {
     type = _ref$type === void 0 ? '3d' : _ref$type,
     _ref$size = _ref.size,
     size = _ref$size === void 0 ? 40 : _ref$size;
+  var genCdnUrl = useCdnFn();
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     loadingFail = _useState2[0],

package/es/Logo/index.js

@@ -6,6 +6,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 import { useTheme } from 'antd-style';
 import { memo } from 'react';
 import { Flexbox } from 'react-layout-kit';
+import { useCdnFn } from "../ConfigProvider";
 import Divider from "./Divider";
 import LogoHighContrast from "./LogoHighContrast";
 import LogoText from "./LogoText";
@@ -22,6 +23,7 @@ var Logo = /*#__PURE__*/memo(function (_ref) {
     extra = _ref.extra,
     className = _ref.className,
     props = _objectWithoutProperties(_ref, _excluded);
+  var genCdnUrl = useCdnFn();
   var theme = useTheme();
   var _useStyles = useStyles(),
     styles = _useStyles.styles;
@@ -31,7 +33,7 @@ var Logo = /*#__PURE__*/memo(function (_ref) {
       {
         logoComponent = /*#__PURE__*/_jsx("img", _objectSpread({
           alt: "lobehub",
-          src: LOGO_3D,
+          src: genCdnUrl(LOGO_3D),
           style: _objectSpread({
             height: size,
             width: size
@@ -43,7 +45,7 @@ var Logo = /*#__PURE__*/memo(function (_ref) {
       {
         logoComponent = /*#__PURE__*/_jsx("img", {
           alt: "lobehub",
-          src: LOGO_FLAT,
+          src: genCdnUrl(LOGO_FLAT),
           style: _objectSpread({
             height: size,
             width: size
@@ -77,7 +79,7 @@ var Logo = /*#__PURE__*/memo(function (_ref) {
         logoComponent = /*#__PURE__*/_jsxs(_Fragment, {
           children: [/*#__PURE__*/_jsx("img", {
             alt: "lobehub",
-            src: LOGO_3D,
+            src: genCdnUrl(LOGO_3D),
             style: {
               height: size,
               width: size

package/es/Logo/style.d.ts

@@ -1,5 +1,13 @@
-export declare const LOGO_3D: string;
-export declare const LOGO_FLAT: string;
+export declare const LOGO_3D: {
+    path: string;
+    pkg: string;
+    version: string;
+};
+export declare const LOGO_FLAT: {
+    path: string;
+    pkg: string;
+    version: string;
+};
 export declare const useStyles: (props?: unknown) => import("antd-style").ReturnStyles<{
     extraTitle: import("antd-style").SerializedStyles;
 }>;

package/es/Logo/style.js

@@ -1,17 +1,16 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
 var _templateObject;
 import { createStyles } from 'antd-style';
-import { genCdnUrl } from "../utils/genCdnUrl";
-export var LOGO_3D = genCdnUrl({
+export var LOGO_3D = {
   path: 'assets/logo-3d.webp',
   pkg: '@lobehub/assets-logo',
   version: '1.1.0'
-});
-export var LOGO_FLAT = genCdnUrl({
+};
+export var LOGO_FLAT = {
   path: 'assets/logo-flat.svg',
   pkg: '@lobehub/assets-logo',
   version: '1.1.0'
-});
+};
 export var useStyles = createStyles(function (_ref) {
   var css = _ref.css;
   return {

package/es/ThemeProvider/Meta.js

@@ -1,5 +1,5 @@
 import { memo, useCallback } from 'react';
-import { genCdnUrl } from "../utils/genCdnUrl";
+import { useCdnFn } from "../ConfigProvider";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -7,6 +7,7 @@ var Meta = /*#__PURE__*/memo(function (_ref) {
   var _ref$title = _ref.title,
     title = _ref$title === void 0 ? 'LobeHub' : _ref$title,
     withManifest = _ref.withManifest;
+  var genCdnUrl = useCdnFn();
   var genAssets = useCallback(function (path) {
     return genCdnUrl({
       path: path,

package/es/ThemeProvider/index.js

@@ -5,9 +5,9 @@ import { App } from 'antd';
 import { ThemeProvider as AntdThemeProvider, StyleProvider, setupStyled } from 'antd-style';
 import { memo, useCallback, useEffect } from 'react';
 import { ThemeContext } from 'styled-components';
+import { useCdnFn } from "../ConfigProvider";
 import FontLoader from "../FontLoader";
 import { lobeCustomStylish, lobeCustomToken, lobeTheme } from "../styles";
-import { genCdnUrl } from "../utils/genCdnUrl";
 import GlobalStyle from "./GlobalStyle";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -19,24 +19,25 @@ var ThemeProvider = /*#__PURE__*/memo(function (_ref) {
     customToken = _ref.customToken,
     _ref$enableWebfonts = _ref.enableWebfonts,
     enableWebfonts = _ref$enableWebfonts === void 0 ? true : _ref$enableWebfonts,
-    _ref$webfonts = _ref.webfonts,
-    webfonts = _ref$webfonts === void 0 ? [genCdnUrl({
-      path: 'css/index.css',
-      pkg: '@lobehub/webfont-mono',
-      version: '1.0.0'
-    }), genCdnUrl({
-      path: 'css/index.css',
-      pkg: '@lobehub/webfont-harmony-sans',
-      version: '1.0.0'
-    }), genCdnUrl({
-      path: 'css/index.css',
-      pkg: '@lobehub/webfont-harmony-sans-sc',
-      version: '1.0.0'
-    }), genCdnUrl({
-      path: 'dist/katex.min.css',
-      pkg: 'katex',
-      version: '0.16.8'
-    })] : _ref$webfonts;
+    webfonts = _ref.webfonts;
+  var genCdnUrl = useCdnFn();
+  var webfontUrls = webfonts || [genCdnUrl({
+    path: 'css/index.css',
+    pkg: '@lobehub/webfont-mono',
+    version: '1.0.0'
+  }), genCdnUrl({
+    path: 'css/index.css',
+    pkg: '@lobehub/webfont-harmony-sans',
+    version: '1.0.0'
+  }), genCdnUrl({
+    path: 'css/index.css',
+    pkg: '@lobehub/webfont-harmony-sans-sc',
+    version: '1.0.0'
+  }), genCdnUrl({
+    path: 'dist/katex.min.css',
+    pkg: 'katex',
+    version: '0.16.8'
+  })];
   useEffect(function () {
     setupStyled({
       ThemeContext: ThemeContext
@@ -49,7 +50,7 @@ var ThemeProvider = /*#__PURE__*/memo(function (_ref) {
     return _objectSpread(_objectSpread({}, lobeCustomToken(theme)), customToken === null || customToken === void 0 ? void 0 : customToken(theme));
   }, [customToken]);
   return /*#__PURE__*/_jsxs(_Fragment, {
-    children: [enableWebfonts && (webfonts === null || webfonts === void 0 ? void 0 : webfonts.length) > 0 && webfonts.map(function (webfont, index) {
+    children: [enableWebfonts && (webfontUrls === null || webfontUrls === void 0 ? void 0 : webfontUrls.length) > 0 && webfontUrls.map(function (webfont, index) {
       return /*#__PURE__*/_jsx(FontLoader, {
         url: webfont
       }, index);

package/es/index.d.ts

@@ -11,6 +11,7 @@ export type { ChatListProps, OnActionClick, OnMessageChange, RenderErrorMessage,
 export { default as ChatList } from './ChatList';
 export { default as CodeEditor, type CodeEditorProps } from './CodeEditor';
 export { default as ColorScales, type ColorScalesProps } from './ColorScales';
+export { type Config, default as ConfigProvider, useCdnFn } from './ConfigProvider';
 export { default as ContextMenu, type ContextMenuProps } from './ContextMenu';
 export { default as CopyButton, type CopyButtonProps } from './CopyButton';
 export { default as DraggablePanel, type DraggablePanelProps } from './DraggablePanel';

package/es/index.js

@@ -10,6 +10,7 @@ export { default as ChatItem } from "./ChatItem";
 export { default as ChatList } from "./ChatList";
 export { default as CodeEditor } from "./CodeEditor";
 export { default as ColorScales } from "./ColorScales";
+export { default as ConfigProvider, useCdnFn } from "./ConfigProvider";
 export { default as ContextMenu } from "./ContextMenu";
 export { default as CopyButton } from "./CopyButton";
 export { default as DraggablePanel } from "./DraggablePanel";

package/es/utils/genCdnUrl.d.ts

@@ -1,9 +1,8 @@
 export type CDN = 'aliyun' | 'unpkg';
-interface CdnApi {
+export interface CdnApi {
     path: string;
     pkg: string;
     proxy?: CDN;
     version: string;
 }
 export declare const genCdnUrl: ({ pkg, version, path, proxy }: CdnApi) => string;
-export {};

package/es/utils/genCdnUrl.js

@@ -1,3 +1,4 @@
+import urlJoin from 'url-join';
 var UNPKG_API = 'https://unpkg.com';
 var ALIYUN_API = 'https://registry.npmmirror.com';
 export var genCdnUrl = function genCdnUrl(_ref) {
@@ -5,6 +6,14 @@ export var genCdnUrl = function genCdnUrl(_ref) {
     version = _ref.version,
     path = _ref.path,
     proxy = _ref.proxy;
-  var api = proxy === 'unpkg' ? UNPKG_API : ALIYUN_API;
-  return "".concat(api.replaceAll(/^\//g, ''), "/").concat(pkg, "/").concat(version, "/files/").concat(path.replaceAll(/^\//g, ''));
+  switch (proxy) {
+    case 'unpkg':
+      {
+        return urlJoin(UNPKG_API, "".concat(pkg, "@").concat(version), path);
+      }
+    default:
+      {
+        return urlJoin(ALIYUN_API, pkg, version, 'files', path);
+      }
+  }
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/ui",
-  "version": "1.94.7",
+  "version": "1.95.0",
   "description": "Lobe UI is an open-source UI component library for building AIGC web apps",
   "keywords": [
     "lobehub",
@@ -44,7 +44,7 @@
     "pull": "git pull",
     "release": "semantic-release",
     "setup": "dumi setup",
-    "start": "dumi dev",
+    "start": "npm run docs:dev",
     "test": "vitest --passWithNoTests",
     "test:coverage": "vitest run --coverage  --passWithNoTests",
     "test:update": "vitest -u",
@@ -109,6 +109,7 @@
     "swr": "^2",
     "three": "^0.150",
     "ts-md5": "^1",
+    "url-join": "^5",
     "use-merge-value": "^1",
     "zustand": "^4.4.1",
     "zustand-utils": "^1.3.1"