@lobehub/ui 1.11.1 → 1.11.3

package/README.md

@@ -6,10 +6,10 @@
 
 <h1>Lobe UI</h1>
 
-Lobe UI is an open-source UI component library for building chatbot web apps
-  
+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]
-  
+
 <!-- SHIELD GROUP -->
 
 [![release][release-shield]][release-url]
@@ -21,19 +21,36 @@ Lobe UI is an open-source UI component library for building chatbot web apps
 [![forks][forks-shield]][forks-url]
 [![stargazers][stargazers-shield]][stargazers-url]
 [![issues][issues-shield]][issues-url]
-  
+
 ![](https://github.com/othneildrew/Best-README-Template/raw/master/images/screenshot.png)
 
 </div>
 
 ## 📦 Installation
 
-To install Lobe Commit, run the following command:
+This package is [ESM only](https://gist.github.com/sindresorhus/a39789f98801d908bbc7ff3ecc99d99c).
+
+To install Lobe UI, run the following command:
 
 ```bash
 pnpm add @lobehub/ui
 ```
 
+## Usage
+
+### Compile with NextJS
+
+by work correct with nextjs ssr, add `transpilePackages: ['@lobehub/ui']` to `next.config.js`. For example:
+
+```js
+// next.config.js
+const nextConfig = {
+  // ...other config
+
+  transpilePackages: ['@lobehub/ui'],
+};
+```
+
 <div align="right">
 
 [![][back-to-top]](#readme-top)
@@ -61,7 +78,6 @@ $ pnpm start
 
 </div>
 
-
 ## 🤝 Contributing
 
 <!-- CONTRIBUTION GROUP -->
@@ -90,11 +106,11 @@ $ pnpm start
 </div>
 
 ---
+
 #### 📝 License
 
 Copyright © 2023 [LobeHub][profile-url]. <br />
-This project is [MIT](./LICENSE) licensed. 
-
+This project is [MIT](./LICENSE) licensed.
 
 <!-- LINK GROUP -->
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/ui",
-  "version": "1.11.1",
+  "version": "1.11.3",
   "description": "Lobe UI is an open-source UI component library for building chatbot web apps",
   "keywords": [
     "lobehub",
@@ -20,9 +20,9 @@
   "license": "MIT",
   "author": "LobeHub",
   "sideEffects": false,
-  "main": "lib/index.js",
+  "main": "es/index.js",
   "module": "es/index.js",
-  "types": "lib/index.d.ts",
+  "types": "es/index.d.ts",
   "files": [
     "lib",
     "es"

package/lib/ActionIcon/index.d.ts

@@ -1,49 +0,0 @@
-/// <reference types="react" />
-import { TooltipProps } from "../index";
-import { DivProps } from "../types";
-import { LucideIcon } from 'lucide-react';
-export declare type ActionIconSize = 'large' | 'normal' | 'small' | 'site' | {
-    blockSize?: number;
-    fontSize?: number;
-    strokeWidth?: number;
-    borderRadius?: number;
-};
-export interface ActionIconProps extends DivProps {
-    /**
-     * @description Whether the icon is active or not
-     * @default false
-     */
-    active?: boolean;
-    /**
-     * @description Size of the icon
-     * @default 'normal'
-     */
-    size?: ActionIconSize;
-    /**
-     * @description The icon element to be rendered
-     * @type LucideIcon
-     */
-    icon: LucideIcon;
-    /**
-     * @description Glass blur style
-     * @default 'false'
-     */
-    glass?: boolean;
-    /**
-     * @description The text shown in the tooltip
-     */
-    title?: string;
-    /**
-     * @description The position of the tooltip relative to the target
-     * @enum ["top","left","right","bottom","topLeft","topRight","bottomLeft","bottomRight","leftTop","leftBottom","rightTop","rightBottom"]
-     * @default "top"
-     */
-    placement?: TooltipProps['placement'];
-    /**
-     * @description Change arrow's visible state and change whether the arrow is pointed at the center of target.
-     * @default false
-     */
-    arrow?: boolean;
-}
-declare const ActionIcon: import("react").NamedExoticComponent<ActionIconProps>;
-export default ActionIcon;

package/lib/ActionIcon/index.js

@@ -1,80 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-var _ = require("./..");
-var _react = require("react");
-var _style = require("./style");
-var _jsxRuntime = require("react/jsx-runtime");
-var _excluded = ["className", "active", "icon", "size", "style", "glass", "title", "placement", "arrow"];
-var ActionIcon = /*#__PURE__*/(0, _react.memo)(function (_ref) {
-  var className = _ref.className,
-    active = _ref.active,
-    icon = _ref.icon,
-    _ref$size = _ref.size,
-    size = _ref$size === void 0 ? 'normal' : _ref$size,
-    style = _ref.style,
-    glass = _ref.glass,
-    title = _ref.title,
-    placement = _ref.placement,
-    _ref$arrow = _ref.arrow,
-    arrow = _ref$arrow === void 0 ? false : _ref$arrow,
-    props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-  var _useStyles = (0, _style.useStyles)({
-      active: Boolean(active),
-      glass: Boolean(glass)
-    }),
-    styles = _useStyles.styles,
-    cx = _useStyles.cx;
-  var blockSize;
-  var borderRadius;
-  switch (size) {
-    case 'large':
-      blockSize = 44;
-      borderRadius = 8;
-      break;
-    case 'normal':
-      blockSize = 36;
-      borderRadius = 5;
-      break;
-    case 'small':
-      blockSize = 24;
-      borderRadius = 5;
-      break;
-    case 'site':
-      blockSize = 34;
-      borderRadius = 5;
-      break;
-    default:
-      blockSize = (size === null || size === void 0 ? void 0 : size.blockSize) || 36;
-      borderRadius = (size === null || size === void 0 ? void 0 : size.borderRadius) || 5;
-      break;
-  }
-  var actionIconBlock = /*#__PURE__*/(0, _jsxRuntime.jsx)("div", (0, _objectSpread2.default)((0, _objectSpread2.default)({
-    className: cx(styles.block, className),
-    style: (0, _objectSpread2.default)({
-      width: blockSize,
-      height: blockSize,
-      borderRadius: borderRadius
-    }, style)
-  }, props), {}, {
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Icon, {
-      size: size === 'site' ? 'normal' : size,
-      icon: icon
-    })
-  }));
-  if (!title) return actionIconBlock;
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Tooltip, {
-    arrow: arrow,
-    title: title,
-    placement: placement,
-    children: actionIconBlock
-  });
-});
-var _default = ActionIcon;
-exports.default = _default;

package/lib/ActionIcon/style.d.ts

@@ -1,6 +0,0 @@
-export declare const useStyles: (props?: {
-    active: boolean;
-    glass: boolean;
-} | undefined) => import("antd-style").ReturnStyles<{
-    block: import("antd-style").SerializedStyles;
-}>;

package/lib/ActionIcon/style.js

@@ -1,20 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.useStyles = void 0;
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
-var _antdStyle = require("antd-style");
-var _templateObject, _templateObject2;
-var useStyles = (0, _antdStyle.createStyles)(function (_ref, _ref2) {
-  var css = _ref.css,
-    token = _ref.token;
-  var active = _ref2.active,
-    glass = _ref2.glass;
-  return {
-    block: css(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n        cursor: pointer;\n\n        display: flex;\n        flex: none;\n        align-items: center;\n        justify-content: center;\n\n        color: ", ";\n\n        background: ", ";\n\n        transition: color 600ms ", ",\n          background-color 100ms ", ";\n\n        ", "\n\n        &:hover {\n          color: ", ";\n          background-color: ", ";\n        }\n\n        &:active {\n          color: ", ";\n          background-color: ", ";\n        }\n      "])), active ? token.colorText : token.colorTextTertiary, active ? token.colorFillTertiary : 'transparent', token.motionEaseOut, token.motionEaseOut, glass && css(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n          backdrop-filter: saturate(180%) blur(10px);\n        "]))), token.colorText, token.colorFillSecondary, token.colorText, token.colorFill)
-  };
-});
-exports.useStyles = useStyles;

package/lib/Avatar/index.d.ts

@@ -1,10 +0,0 @@
-import { FC } from 'react';
-export interface AvatarProps {
-    avatar?: string;
-    title?: string;
-    size?: number;
-    shape?: 'circle' | 'square';
-    background?: string;
-}
-declare const Avatar: FC<AvatarProps>;
-export default Avatar;

package/lib/Avatar/index.js

@@ -1,69 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
-var _antd = require("antd");
-var _antdStyle = require("antd-style");
-var _reactLayoutKit = require("react-layout-kit");
-var _jsxRuntime = require("react/jsx-runtime");
-var _templateObject, _templateObject2;
-var useStyles = (0, _antdStyle.createStyles)(function (_ref) {
-  var css = _ref.css,
-    token = _ref.token;
-  return {
-    container: css(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n    cursor: pointer;\n\n    > * {\n      cursor: pointer;\n    }\n  "]))),
-    border: css(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n    border: 1px solid ", ";\n  "])), token.colorBorder)
-  };
-});
-var Avatar = function Avatar(_ref2) {
-  var avatar = _ref2.avatar,
-    title = _ref2.title,
-    _ref2$size = _ref2.size,
-    size = _ref2$size === void 0 ? 40 : _ref2$size,
-    _ref2$shape = _ref2.shape,
-    shape = _ref2$shape === void 0 ? 'circle' : _ref2$shape,
-    background = _ref2.background;
-  var _useStyles = useStyles(),
-    styles = _useStyles.styles,
-    theme = _useStyles.theme;
-  var backgroundColor = background !== null && background !== void 0 ? background : theme.colorBgContainer;
-  var isImage = avatar && ['/', 'http', 'data:'].some(function (i) {
-    return avatar.startsWith(i);
-  });
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactLayoutKit.Center, {
-    style: {
-      width: size,
-      height: size,
-      borderRadius: shape === 'circle' ? '50%' : 6,
-      backgroundColor: backgroundColor,
-      borderWidth: isImage ? 1 : 0
-    },
-    className: styles.container,
-    children: !avatar ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Avatar, {
-      shape: shape,
-      size: size,
-      children: title === null || title === void 0 ? void 0 : title.slice(0, 2)
-    }) : isImage ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Avatar, {
-      shape: shape,
-      size: size,
-      src: avatar,
-      className: styles.border
-    }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactLayoutKit.Center, {
-      className: styles.border,
-      style: {
-        width: size,
-        height: size,
-        fontSize: size / 2,
-        borderRadius: shape === 'circle' ? '50%' : 6,
-        backgroundColor: backgroundColor
-      },
-      children: avatar
-    })
-  });
-};
-var _default = Avatar;
-exports.default = _default;

package/lib/Chat/const.d.ts

@@ -1 +0,0 @@
-export declare const LOADING_FLAT = "...";

package/lib/Chat/const.js

@@ -1,8 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.LOADING_FLAT = void 0;
-var LOADING_FLAT = '...';
-exports.LOADING_FLAT = LOADING_FLAT;

package/lib/Chat/index.d.ts

@@ -1,2 +0,0 @@
-export { messagesReducer } from './store';
-export * from './types';

package/lib/Chat/index.js

@@ -1,27 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-var _exportNames = {
-  messagesReducer: true
-};
-Object.defineProperty(exports, "messagesReducer", {
-  enumerable: true,
-  get: function get() {
-    return _store.messagesReducer;
-  }
-});
-var _store = require("./store");
-var _types = require("./types");
-Object.keys(_types).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  if (key in exports && exports[key] === _types[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function get() {
-      return _types[key];
-    }
-  });
-});

package/lib/Chat/store/index.d.ts

@@ -1,20 +0,0 @@
-/// <reference types="react" />
-import { StoreApi } from 'zustand';
-import { ChatStore } from './store';
-export declare const createChatStore: (showDevtools?: boolean) => import("zustand").UseBoundStore<Omit<StoreApi<ChatStore>, "setState"> & {
-    setState<A extends string | {
-        type: unknown;
-    }>(partial: ChatStore | Partial<ChatStore> | ((state: ChatStore) => ChatStore | Partial<ChatStore>), replace?: boolean | undefined, action?: A | undefined): void;
-}>;
-export declare const Provider: ({ createStore, children }: {
-    createStore: () => StoreApi<ChatStore>;
-    children: any;
-}) => import("react").FunctionComponentElement<import("react").ProviderProps<StoreApi<ChatStore> | undefined>>, useStore: import("zustand-utils").UseContextStore<StoreApi<ChatStore>>, useStoreApi: () => {
-    setState: (partial: ChatStore | Partial<ChatStore> | ((state: ChatStore) => ChatStore | Partial<ChatStore>), replace?: boolean | undefined) => void;
-    getState: () => ChatStore;
-    subscribe: (listener: (state: ChatStore, prevState: ChatStore) => void) => () => void;
-    destroy: () => void;
-};
-export { messagesReducer, type MessageDispatch } from './messageReducer';
-export * from './selectors';
-export type { ChatStore } from './store';

package/lib/Chat/store/index.js

@@ -1,50 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-var _exportNames = {
-  createChatStore: true,
-  Provider: true,
-  useStore: true,
-  useStoreApi: true,
-  messagesReducer: true
-};
-exports.createChatStore = exports.Provider = void 0;
-Object.defineProperty(exports, "messagesReducer", {
-  enumerable: true,
-  get: function get() {
-    return _messageReducer.messagesReducer;
-  }
-});
-exports.useStoreApi = exports.useStore = void 0;
-var _zustand = require("zustand");
-var _zustandUtils = require("zustand-utils");
-var _store = require("./store");
-var _messageReducer = require("./messageReducer");
-var _selectors = require("./selectors");
-Object.keys(_selectors).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  if (key in exports && exports[key] === _selectors[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function get() {
-      return _selectors[key];
-    }
-  });
-});
-var createChatStore = function createChatStore() {
-  var showDevtools = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
-  return (0, _zustand.create)()((0, _zustandUtils.optionalDevtools)(showDevtools)(_store.createStore, {
-    name: 'CHAT_COMPONENT'
-  }));
-};
-exports.createChatStore = createChatStore;
-var _createContext = (0, _zustandUtils.createContext)(),
-  Provider = _createContext.Provider,
-  useStore = _createContext.useStore,
-  useStoreApi = _createContext.useStoreApi;
-exports.useStoreApi = useStoreApi;
-exports.useStore = useStore;
-exports.Provider = Provider;

package/lib/Chat/store/initialState.d.ts

@@ -1,28 +0,0 @@
-import { ChatMessage, InternalChatContext, OpenAIRequestParams } from '../types';
-export interface ChatState extends InternalChatContext {
-    /**
-     * @title 消息
-     * @type {string}
-     */
-    message: string;
-    /**
-     * @title 加载状态
-     * @type {boolean}
-     */
-    loading: boolean;
-    /**
-     * @title 改变系统角色状态
-     * @type {boolean}
-     */
-    changingSystemRole: boolean;
-    /**
-     * 编辑中的消息 id
-     */
-    editingMessageId?: number | null;
-    onMessagesChange?: (messages: ChatMessage[]) => void;
-    onResponseStart?: (messages: ChatMessage[]) => Promise<void>;
-    onResponseFinished?: (session: any) => void;
-    onAgentChange?: (agent: any, type: 'update' | 'remove') => void;
-    request?: (params: OpenAIRequestParams) => Promise<Response>;
-}
-export declare const initialState: ChatState;

package/lib/Chat/store/initialState.js

@@ -1,16 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.initialState = void 0;
-var initialState = {
-  message: '',
-  messages: [],
-  loading: false,
-  changingSystemRole: false,
-  editingMessageId: null,
-  createAt: -1,
-  updateAt: -1
-};
-exports.initialState = initialState;

package/lib/Chat/store/messageReducer.d.ts

@@ -1,37 +0,0 @@
-import { ChatMessage, ChatMessageError, MessageRoleType } from '../types';
-export declare type MessageDispatch = {
-    type: 'addMessage';
-    message: ChatMessage;
-} | {
-    type: 'insertMessage';
-    message: ChatMessage;
-    index: number;
-} | {
-    type: 'deleteMessage';
-    index: number;
-} | {
-    type: 'resetMessages';
-} | {
-    type: 'updateMessage';
-    index: number;
-    message: string;
-} | {
-    type: 'updateMessageRole';
-    index: number;
-    role: MessageRoleType;
-} | {
-    type: 'addUserMessage';
-    message: string;
-} | {
-    type: 'updateLatestBotMessage';
-    responseStream: string[];
-} | {
-    type: 'updateMessageChoice';
-    message: string;
-    index: number;
-} | {
-    type: 'setErrorMessage';
-    index: number;
-    error: ChatMessageError | undefined;
-};
-export declare const messagesReducer: (state: ChatMessage[], payload: MessageDispatch) => ChatMessage[];

package/lib/Chat/store/messageReducer.js

@@ -1,75 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.messagesReducer = void 0;
-var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
-var _immer = require("immer");
-var messagesReducer = function messagesReducer(state, payload) {
-  switch (payload.type) {
-    case 'addMessage':
-      return [].concat((0, _toConsumableArray2.default)(state), [payload.message]);
-    case 'insertMessage':
-      return (0, _immer.produce)(state, function (draftState) {
-        draftState.splice(payload.index, 0, payload.message);
-      });
-    case 'deleteMessage':
-      return state.filter(function (_, i) {
-        return i !== payload.index;
-      });
-    case 'resetMessages':
-      return [];
-    case 'updateMessage':
-      return (0, _immer.produce)(state, function (draftState) {
-        var index = payload.index,
-          message = payload.message;
-        draftState[index].content = message;
-      });
-    case 'updateMessageRole':
-      return (0, _immer.produce)(state, function (draftState) {
-        var index = payload.index,
-          role = payload.role;
-        draftState[index].role = role;
-      });
-    case 'addUserMessage':
-      return (0, _immer.produce)(state, function (draftState) {
-        draftState.push({
-          role: 'user',
-          content: payload.message
-        });
-      });
-    case 'updateLatestBotMessage':
-      return (0, _immer.produce)(state, function () {
-        var responseStream = payload.responseStream;
-        var newMessage = {
-          role: 'assistant',
-          content: responseStream.join('')
-        };
-        return [].concat((0, _toConsumableArray2.default)(state.slice(0, -1)), [newMessage]);
-      });
-    case 'setErrorMessage':
-      return (0, _immer.produce)(state, function (draftState) {
-        var index = payload.index,
-          error = payload.error;
-        draftState[index].error = error;
-      });
-    case 'updateMessageChoice':
-      return (0, _immer.produce)(state, function (draftState) {
-        var index = payload.index,
-          message = payload.message;
-        var botMessage = draftState[index];
-        var prevMsg = botMessage.content;
-        botMessage.content = message;
-        if (botMessage.choices) {
-          botMessage.choices.push(prevMsg);
-        } else {
-          botMessage.choices = [prevMsg];
-        }
-      });
-    default:
-      throw Error('暂未实现的 type，请检查 reducer');
-  }
-};
-exports.messagesReducer = messagesReducer;

package/lib/Chat/store/selectors.d.ts

@@ -1,9 +0,0 @@
-import type { ChatStore } from './store';
-export declare const chatSelectors: {
-    totalTokenCount: (s: ChatStore) => number;
-    agentTokenCount: (s: ChatStore) => number;
-    messagesTokenCount: (s: ChatStore) => number;
-    totalTokens: (s: ChatStore) => number[];
-    messagesTokens: (s: ChatStore) => number[];
-    disableInput: (s: ChatStore) => boolean;
-};

package/lib/Chat/store/selectors.js

@@ -1,51 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.chatSelectors = void 0;
-var _tiktoken = require("@dqbd/tiktoken");
-var tiktoken = (0, _tiktoken.get_encoding)('cl100k_base');
-var encode = function encode(text) {
-  if (!text) return [];
-  var tokens = tiktoken.encode(text);
-  return tokens;
-};
-var disableInputSel = function disableInputSel(s) {
-  return s.changingSystemRole;
-};
-var messagesTokens = function messagesTokens(s) {
-  return encode(s.messages.map(function (m) {
-    return m.content;
-  }).join(''));
-};
-var agentContentTokens = function agentContentTokens(s) {
-  return encode(s.messages.filter(function (s) {
-    return s.role === 'system';
-  }).map(function (c) {
-    return c.content;
-  }).join('') || '');
-};
-var totalTokens = function totalTokens(s) {
-  return encode(s.messages.map(function (m) {
-    return m.content;
-  }).join(''));
-};
-var totalTokenCount = function totalTokenCount(s) {
-  return totalTokens(s).length;
-};
-var agentTokenCount = function agentTokenCount(s) {
-  return agentContentTokens(s).length;
-};
-var messagesTokenCount = function messagesTokenCount(s) {
-  return messagesTokens(s).length;
-};
-var chatSelectors = {
-  totalTokenCount: totalTokenCount,
-  agentTokenCount: agentTokenCount,
-  messagesTokenCount: messagesTokenCount,
-  totalTokens: totalTokens,
-  messagesTokens: messagesTokens,
-  disableInput: disableInputSel
-};
-exports.chatSelectors = chatSelectors;