@lobehub/ui 1.50.1 → 1.52.0

package/es/ActionIcon/index.d.ts

@@ -2,7 +2,7 @@
 import { LucideIcon } from 'lucide-react';
 import { type TooltipProps } from "../Tooltip";
 import { DivProps } from "../types";
-export declare type ActionIconSize = 'large' | 'normal' | 'small' | 'site' | {
+export type ActionIconSize = 'large' | 'normal' | 'small' | 'site' | {
     blockSize?: number;
     borderRadius?: number;
     fontSize?: number;

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

@@ -1,5 +1,5 @@
 import { ChatMessage, ChatMessageError, MessageRoleType } from '../types';
-export declare type MessageDispatch = {
+export type MessageDispatch = {
     message: ChatMessage;
     type: 'addMessage';
 } | {

package/es/Chat/store/store.d.ts

@@ -29,6 +29,6 @@ interface ChatAction {
      */
     sendMessage: () => Promise<void>;
 }
-export declare type ChatStore = ChatAction & ChatState;
+export type ChatStore = ChatAction & ChatState;
 export declare const createStore: StateCreator<ChatStore, [['zustand/devtools', never]]>;
 export {};

package/es/Chat/types.d.ts

@@ -1,5 +1,5 @@
-export declare type InternalChatContext = Omit<ChatContext, 'id'>;
-export declare type MessageRoleType = 'user' | 'system' | 'assistant';
+export type InternalChatContext = Omit<ChatContext, 'id'>;
+export type MessageRoleType = 'user' | 'system' | 'assistant' | 'function';
 /**
  * 聊天消息错误对象
  */
@@ -65,7 +65,7 @@ export interface ChatContext {
     title?: string;
     updateAt: number;
 }
-export declare type ChatContextMap = Record<string, Omit<ChatContext, 'systemRole'>>;
+export type ChatContextMap = Record<string, Omit<ChatContext, 'systemRole'>>;
 /**
  * 请求数据类型
  */

package/es/ChatItem/index.d.ts

@@ -33,7 +33,7 @@ export interface ChatItemProps {
     /**
      * @description The message content of the chat item
      */
-    message?: string;
+    message?: ReactNode;
     messageExtra?: ReactNode;
     /**
      * @description Callback when the message content changes
@@ -54,6 +54,7 @@ export interface ChatItemProps {
      * @description Whether the chat item is primary
      */
     primary?: boolean;
+    renderMessage?: (content: ReactNode) => ReactNode;
     /**
      * @description Whether to show the title of the chat item
      */

package/es/ChatItem/index.js

@@ -1,6 +1,6 @@
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["actions", "className", "primary", "borderSpacing", "loading", "message", "placement", "type", "avatar", "alert", "showTitle", "time", "editing", "onChange", "onEditingChange", "messageExtra"];
+var _excluded = ["actions", "className", "primary", "borderSpacing", "loading", "message", "placement", "type", "avatar", "alert", "showTitle", "time", "editing", "onChange", "onEditingChange", "messageExtra", "renderMessage"];
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 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 { Alert } from 'antd';
@@ -34,6 +34,7 @@ var ChatItem = /*#__PURE__*/memo(function (_ref) {
     onChange = _ref.onChange,
     onEditingChange = _ref.onEditingChange,
     messageExtra = _ref.messageExtra,
+    renderMessage = _ref.renderMessage,
     properties = _objectWithoutProperties(_ref, _excluded);
   var _useStyles = useStyles({
       avatarSize: AVATAR_SIZE,
@@ -45,6 +46,17 @@ var ChatItem = /*#__PURE__*/memo(function (_ref) {
     }),
     cx = _useStyles.cx,
     styles = _useStyles.styles;
+  var content = /*#__PURE__*/_jsx(EditableMessage, {
+    classNames: {
+      input: styles.editingInput
+    },
+    editButtonSize: 'small',
+    editing: editing,
+    onChange: onChange,
+    onEditingChange: onEditingChange,
+    value: String(message || '...')
+  });
+  var messageContent = renderMessage ? renderMessage(content) : content;
   return /*#__PURE__*/_jsxs("div", _objectSpread(_objectSpread({
     className: cx(styles.container, className)
   }, properties), {}, {
@@ -80,16 +92,7 @@ var ChatItem = /*#__PURE__*/memo(function (_ref) {
           showIcon: true
         }, alert)) : /*#__PURE__*/_jsxs(Flexbox, {
           className: cx(styles.message, editing && styles.editingContainer),
-          children: [/*#__PURE__*/_jsx(EditableMessage, {
-            classNames: {
-              input: styles.editingInput
-            },
-            editButtonSize: 'small',
-            editing: editing,
-            onChange: onChange,
-            onEditingChange: onEditingChange,
-            value: String(message || '...')
-          }), messageExtra && !editing ? /*#__PURE__*/_jsx("div", {
+          children: [messageContent, messageExtra && !editing ? /*#__PURE__*/_jsx("div", {
             className: styles.messageExtra,
             children: messageExtra
           }) : null]

package/es/ChatList/index.d.ts

@@ -2,7 +2,8 @@ import { ReactNode } from 'react';
 import { ChatItemProps } from "../ChatItem";
 import type { DivProps } from "../types";
 import { ChatMessage } from "../types/chatMessage";
-declare type MessageExtra = (props: ChatMessage) => ReactNode;
+export type MessageExtra = (props: ChatMessage) => ReactNode;
+export type RenderMessage = (content: ReactNode, message: ChatMessage) => ReactNode;
 export interface ChatListProps extends DivProps {
     /**
      * @description Data of chat messages to be displayed
@@ -15,6 +16,7 @@ export interface ChatListProps extends DivProps {
      */
     onActionClick?: (actionKey: string, messageId: string) => void;
     onMessageChange?: (id: string, content: string) => void;
+    renderMessage?: RenderMessage;
     renderMessageExtra?: MessageExtra;
     /**
      * @description Whether to show name of the chat item
@@ -31,6 +33,7 @@ export interface ItemProps extends ChatMessage {
     MessageExtra?: MessageExtra;
     onActionClick?: (actionKey: string, messageId: string) => void;
     onMessageChange?: (id: string, content: string) => void;
+    renderMessage?: RenderMessage;
     showTitle?: boolean;
     type: 'docs' | 'chat';
 }

package/es/ChatList/index.js

@@ -1,13 +1,13 @@
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["MessageExtra", "showTitle", "onActionClick", "onMessageChange", "type"],
-  _excluded2 = ["onActionClick", "renderMessageExtra", "className", "data", "type", "showTitle", "onMessageChange"];
+var _excluded = ["MessageExtra", "showTitle", "onActionClick", "onMessageChange", "type", "renderMessage"],
+  _excluded2 = ["onActionClick", "renderMessageExtra", "className", "data", "type", "showTitle", "onMessageChange", "renderMessage"];
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 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 { App } from 'antd';
 import copy from 'copy-to-clipboard';
-import { memo, useState } from 'react';
+import { memo, useCallback, useState } from 'react';
 import ChatItem from "../ChatItem";
 import ActionsBar from "./ActionsBar";
 import { useStyles } from "./style";
@@ -18,6 +18,7 @@ var Item = function Item(_ref) {
     _onActionClick = _ref.onActionClick,
     onMessageChange = _ref.onMessageChange,
     type = _ref.type,
+    renderMessage = _ref.renderMessage,
     item = _objectWithoutProperties(_ref, _excluded);
   var renderMessageExtra = MessageExtra ? /*#__PURE__*/_jsx(MessageExtra, _objectSpread({}, item)) : undefined;
   var _useState = useState(false),
@@ -26,6 +27,9 @@ var Item = function Item(_ref) {
     setEditing = _useState2[1];
   var _App$useApp = App.useApp(),
     message = _App$useApp.message;
+  var innerRenderMessage = useCallback(function (content) {
+    return renderMessage === null || renderMessage === void 0 ? void 0 : renderMessage(content, item);
+  }, [renderMessage]);
   return /*#__PURE__*/_jsx(ChatItem, {
     actions: /*#__PURE__*/_jsx(ActionsBar, {
       onActionClick: function onActionClick(actionKey) {
@@ -56,6 +60,7 @@ var Item = function Item(_ref) {
     onEditingChange: setEditing,
     placement: type === 'chat' ? item.role === 'user' ? 'right' : 'left' : 'left',
     primary: item.role === 'user',
+    renderMessage: renderMessage ? innerRenderMessage : undefined,
     showTitle: showTitle,
     time: item.updateAt || item.createAt,
     type: type === 'chat' ? 'block' : 'pure'
@@ -70,6 +75,7 @@ var ChatList = /*#__PURE__*/memo(function (_ref2) {
     type = _ref2$type === void 0 ? 'chat' : _ref2$type,
     showTitle = _ref2.showTitle,
     onMessageChange = _ref2.onMessageChange,
+    renderMessage = _ref2.renderMessage,
     props = _objectWithoutProperties(_ref2, _excluded2);
   var _useStyles = useStyles(),
     cx = _useStyles.cx,
@@ -82,6 +88,7 @@ var ChatList = /*#__PURE__*/memo(function (_ref2) {
         MessageExtra: MessageExtra,
         onActionClick: onActionClick,
         onMessageChange: onMessageChange,
+        renderMessage: renderMessage,
         showTitle: showTitle,
         type: type
       }, item), item.id);

package/es/ContextMenu/types/menuItem.d.ts

@@ -17,5 +17,5 @@ export interface MenuDividerType {
     dashed?: boolean;
     type: 'divider';
 }
-export declare type MenuItemType = GeneralItemType | SubMenuType | MenuDividerType;
+export type MenuItemType = GeneralItemType | SubMenuType | MenuDividerType;
 export {};

package/es/DraggablePanel/components/DraggablePanelBody.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
 import { type DivProps } from "../../types";
-export declare type DraggablePanelBodyProps = DivProps;
+export type DraggablePanelBodyProps = DivProps;
 declare const DraggablePanelBody: import("react").NamedExoticComponent<DivProps>;
 export default DraggablePanelBody;

package/es/DraggablePanel/components/DraggablePanelContainer.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
 import { type DivProps } from "../../types";
-export declare type DraggablePanelContainerProps = DivProps;
+export type DraggablePanelContainerProps = DivProps;
 declare const DraggablePanelContainer: import("react").NamedExoticComponent<DivProps>;
 export default DraggablePanelContainer;

package/es/DraggablePanel/components/DraggablePanelFooter.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
 import { type DivProps } from "../../types";
-export declare type DraggablePanelFooterProps = DivProps;
+export type DraggablePanelFooterProps = DivProps;
 declare const DraggablePanelFooter: import("react").NamedExoticComponent<DivProps>;
 export default DraggablePanelFooter;

package/es/DraggablePanel/index.d.ts

@@ -2,7 +2,7 @@ import type { NumberSize, Size } from 're-resizable';
 import { type CSSProperties } from 'react';
 import type { Props as RndProps } from 'react-rnd';
 import { DivProps } from "../types";
-export declare type placementType = 'right' | 'left' | 'top' | 'bottom';
+export type placementType = 'right' | 'left' | 'top' | 'bottom';
 export interface DraggablePanelProps extends DivProps {
     /**
      * @title The class name for the content and handle component

package/es/EditableText/index.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
 import { ControlInputProps } from "../components/ControlInput";
-export declare type EditableTextProps = ControlInputProps;
+export type EditableTextProps = ControlInputProps;
 declare const EditableText: import("react").NamedExoticComponent<ControlInputProps>;
 export default EditableText;

package/es/Form/components/FormDivider.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
 import { DividerProps } from 'antd';
-export declare type FormDividerProps = DividerProps;
+export type FormDividerProps = DividerProps;
 declare const Divider: import("react").NamedExoticComponent<DividerProps>;
 export default Divider;

package/es/Form/components/FormFooter.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
 import { DivProps } from "../../types";
-export declare type FormFooterProps = DivProps;
+export type FormFooterProps = DivProps;
 declare const FormFooter: import("react").NamedExoticComponent<DivProps>;
 export default FormFooter;

package/es/Form/components/FormGroup.d.ts

@@ -3,6 +3,7 @@ import { type CollapseProps } from 'antd';
 import { type ReactNode } from 'react';
 export interface FormGroupProps extends CollapseProps {
     children: ReactNode;
+    extra?: ReactNode;
     icon?: IconProps['icon'];
     title: string;
 }

package/es/Form/components/FormGroup.js

@@ -1,6 +1,6 @@
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["className", "icon", "title", "children"];
+var _excluded = ["className", "icon", "title", "children", "extra"];
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 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 { Icon } from "../..";
@@ -14,6 +14,7 @@ var FormGroup = /*#__PURE__*/memo(function (_ref) {
     icon = _ref.icon,
     title = _ref.title,
     children = _ref.children,
+    extra = _ref.extra,
     props = _objectWithoutProperties(_ref, _excluded);
   var _useStyles = useStyles(),
     cx = _useStyles.cx,
@@ -23,6 +24,7 @@ var FormGroup = /*#__PURE__*/memo(function (_ref) {
     defaultActiveKey: [1],
     items: [{
       children: children,
+      extra: extra,
       key: 1,
       label: /*#__PURE__*/_jsxs("div", {
         className: styles.title,

package/es/Form/index.d.ts

@@ -4,6 +4,7 @@ import { type ReactNode } from 'react';
 import { FormItemProps } from './components/FormItem';
 export interface ItemGroup {
     children: FormItemProps[];
+    extra?: ReactNode;
     icon?: LucideIcon;
     title: string;
 }

package/es/Form/index.js

@@ -29,6 +29,7 @@ var Form = /*#__PURE__*/forwardRef(function (_ref, ref) {
   }, props), {}, {
     children: [items === null || items === void 0 ? void 0 : items.map(function (group, groupIndex) {
       return /*#__PURE__*/_jsx(FormGroup, {
+        extra: group === null || group === void 0 ? void 0 : group.extra,
         icon: group === null || group === void 0 ? void 0 : group.icon,
         title: group.title,
         children: group.children.filter(function (item) {

package/es/GradientButton/index.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
 import { type ButtonProps } from 'antd';
-export declare type GradientButtonProps = ButtonProps;
+export type GradientButtonProps = ButtonProps;
 declare const GradientButton: import("react").NamedExoticComponent<ButtonProps>;
 export default GradientButton;

package/es/Icon/index.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import { LucideIcon } from 'lucide-react';
 import { DivProps } from "../types";
-export declare type IconSize = 'large' | 'normal' | 'small' | {
+export type IconSize = 'large' | 'normal' | 'small' | {
     fontSize?: number;
     strokeWidth?: number;
 };

package/es/Layout/index.d.ts

@@ -4,7 +4,7 @@ export interface LayoutHeaderProps extends DivProps {
     headerHeight?: number;
 }
 export declare const LayoutHeader: import("react").NamedExoticComponent<LayoutHeaderProps>;
-export declare type LayoutMainProps = DivProps;
+export type LayoutMainProps = DivProps;
 export declare const LayoutMain: import("react").NamedExoticComponent<DivProps>;
 export interface LayoutSidebarProps extends DivProps {
     headerHeight?: number;
@@ -18,7 +18,7 @@ export interface LayoutTocProps extends DivProps {
     tocWidth?: number;
 }
 export declare const LayoutToc: import("react").NamedExoticComponent<LayoutTocProps>;
-export declare type LayoutFooterProps = DivProps;
+export type LayoutFooterProps = DivProps;
 export declare const LayoutFooter: import("react").NamedExoticComponent<DivProps>;
 export interface LayoutProps {
     /**

package/es/Tooltip/index.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
 import { TooltipProps as AntdTooltipProps } from 'antd';
-export declare type TooltipProps = AntdTooltipProps;
+export type TooltipProps = AntdTooltipProps;
 declare const Tooltip: import("react").NamedExoticComponent<AntdTooltipProps>;
 export default Tooltip;

package/es/styles/colors.d.ts

@@ -1,4 +1,4 @@
-declare type colorStep = [
+type colorStep = [
     string,
     string,
     string,

package/es/styles/customTheme.d.ts

@@ -12,8 +12,8 @@ export declare const primaryColors: {
     volcano: string;
     yellow: string;
 };
-export declare type PrimaryColorsObj = typeof primaryColors;
-export declare type PrimaryColors = keyof PrimaryColorsObj;
+export type PrimaryColorsObj = typeof primaryColors;
+export type PrimaryColors = keyof PrimaryColorsObj;
 export declare const primaryColorsSwatches: string[];
 export declare const neutralColors: {
     mauve: string;
@@ -23,6 +23,6 @@ export declare const neutralColors: {
     slate: string;
 };
 export declare const neutralColorsSwatches: string[];
-export declare type NeutralColorsObj = typeof neutralColors;
-export declare type NeutralColors = keyof NeutralColorsObj;
+export type NeutralColorsObj = typeof neutralColors;
+export type NeutralColors = keyof NeutralColorsObj;
 export declare const findCustomThemeName: (type: 'primary' | 'neutral', value: string) => string | undefined;

package/es/types/customToken.d.ts

@@ -1,15 +1,15 @@
 declare const PresetColors: readonly ["red", "volcano", "orange", "gold", "yellow", "lime", "green", "cyan", "blue", "geekblue", "purple", "magenta", "gray"];
-export declare type PresetColorKey = (typeof PresetColors)[number];
-export declare type PresetColorType = Record<PresetColorKey, string>;
-declare type ColorPaletteKeyIndex = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11;
-declare type ColorTokenKey = 'Bg' | 'BgHover' | 'Border' | 'BorderSecondary' | 'BorderHover' | 'Hover' | '' | 'Active' | 'TextHover' | 'Text' | 'TextActive';
-export declare type ColorToken = {
+export type PresetColorKey = (typeof PresetColors)[number];
+export type PresetColorType = Record<PresetColorKey, string>;
+type ColorPaletteKeyIndex = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11;
+type ColorTokenKey = 'Bg' | 'BgHover' | 'Border' | 'BorderSecondary' | 'BorderHover' | 'Hover' | '' | 'Active' | 'TextHover' | 'Text' | 'TextActive';
+export type ColorToken = {
     [key in `${keyof PresetColorType}${ColorTokenKey}`]: string;
 };
-export declare type ColorPalettes = {
+export type ColorPalettes = {
     [key in `${keyof PresetColorType}${ColorPaletteKeyIndex}`]: string;
 };
-export declare type ColorPalettesAlpha = {
+export type ColorPalettesAlpha = {
     [key in `${keyof PresetColorType}${ColorPaletteKeyIndex}A`]: string;
 };
 export interface LobeCustomToken extends ColorToken, ColorPalettes, ColorPalettesAlpha {

package/es/types/index.d.ts

@@ -4,8 +4,8 @@ export * from './customStylish';
 export * from './customToken';
 export * from './llm';
 export * from './meta';
-export declare type DivProps = HTMLAttributes<HTMLDivElement>;
-export declare type SvgProps = HTMLAttributes<SVGSVGElement>;
-export declare type ImgProps = HTMLAttributes<HTMLImageElement>;
-export declare type InputProps = HTMLAttributes<HTMLInputElement>;
-export declare type TextAreaProps = HTMLAttributes<HTMLTextAreaElement>;
+export type DivProps = HTMLAttributes<HTMLDivElement>;
+export type SvgProps = HTMLAttributes<SVGSVGElement>;
+export type ImgProps = HTMLAttributes<HTMLImageElement>;
+export type InputProps = HTMLAttributes<HTMLInputElement>;
+export type TextAreaProps = HTMLAttributes<HTMLTextAreaElement>;

package/es/types/llm.d.ts

@@ -34,9 +34,9 @@ export interface LMParameters {
      */
     top_p?: number;
 }
-export declare type LLMRoleType = 'user' | 'system' | 'assistant';
+export type LLMRoleType = 'user' | 'system' | 'assistant' | 'function';
 export interface LLMMessage {
     content: string;
     role: LLMRoleType;
 }
-export declare type LLMExample = LLMMessage[];
+export type LLMExample = LLMMessage[];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/ui",
-  "version": "1.50.1",
+  "version": "1.52.0",
   "description": "Lobe UI is an open-source UI component library for building chatbot web apps",
   "keywords": [
     "lobehub",