@lobehub/ui 1.50.0 → 1.51.0

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 declare type MessageRoleType = 'user' | 'system' | 'assistant' | 'function';
 /**
  * 聊天消息错误对象
  */

package/es/ChatInputArea/Action.d.ts

@@ -0,0 +1,11 @@
+import { ReactNode } from 'react';
+export interface ActionProps {
+    /**
+     * @description Actions to be displayed in the input area
+     */
+    actions?: ReactNode;
+    expand?: boolean;
+    onExpandChange?: (expand: boolean) => void;
+}
+declare const Action: import("react").NamedExoticComponent<ActionProps>;
+export default Action;

package/es/ChatInputArea/Action.js

@@ -0,0 +1,40 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
+var _templateObject, _templateObject2, _templateObject3;
+import { createStyles } from 'antd-style';
+import { Maximize2, Minimize2 } from 'lucide-react';
+import { memo, useCallback } from 'react';
+import ActionIcon from "../ActionIcon";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var useStyles = createStyles(function (_ref) {
+  var css = _ref.css;
+  return {
+    actionLeft: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n      display: flex;\n      flex: 1;\n      gap: 4px;\n      align-items: center;\n      justify-content: flex-start;\n    "]))),
+    actionsBar: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n      display: flex;\n      flex: none;\n      align-items: center;\n      justify-content: space-between;\n\n      padding: 0 16px;\n    "]))),
+    actionsRight: css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n      display: flex;\n      flex: 0;\n      gap: 4px;\n      align-items: center;\n      justify-content: flex-end;\n    "])))
+  };
+});
+var Action = /*#__PURE__*/memo(function (_ref2) {
+  var actions = _ref2.actions,
+    expand = _ref2.expand,
+    onExpandChange = _ref2.onExpandChange;
+  var _useStyles = useStyles(),
+    styles = _useStyles.styles;
+  var handleExpandClick = useCallback(function () {
+    if (onExpandChange) onExpandChange(!expand);
+  }, [expand]);
+  return /*#__PURE__*/_jsxs("div", {
+    className: styles.actionsBar,
+    children: [/*#__PURE__*/_jsx("div", {
+      className: styles.actionLeft,
+      children: actions
+    }), /*#__PURE__*/_jsx("div", {
+      className: styles.actionsRight,
+      children: /*#__PURE__*/_jsx(ActionIcon, {
+        icon: expand ? Minimize2 : Maximize2,
+        onClick: handleExpandClick
+      })
+    })]
+  });
+});
+export default Action;

package/es/ChatInputArea/index.d.ts

@@ -1,11 +1,8 @@
 import { type InputRef } from 'antd';
 import { CSSProperties, ReactNode } from 'react';
 import { type TextAreaProps } from "../Input";
-export interface ChatInputAreaProps extends TextAreaProps {
-    /**
-     * @description Actions to be displayed in the input area
-     */
-    actions?: ReactNode;
+import { ActionProps } from './Action';
+export interface ChatInputAreaProps extends ActionProps, TextAreaProps {
     /**
      * @description Additional class name for the component
      */
@@ -19,11 +16,6 @@ export interface ChatInputAreaProps extends TextAreaProps {
      * @default false
      */
     disabled?: boolean;
-    /**
-     * @description Whether the input area is expanded
-     * @default false
-     */
-    expand?: boolean;
     /**
      * @description Footer content to be displayed below the input area
      */
@@ -38,11 +30,6 @@ export interface ChatInputAreaProps extends TextAreaProps {
      * @default 200
      */
     minHeight?: number;
-    /**
-     * @description Callback function when the expand state changes
-     * @param expand - Whether the input area is expanded
-     */
-    onExpandChange?: (expand: boolean) => void;
     /**
      * @description Callback function when the input value changes
      * @param value - The current value of the input area

package/es/ChatInputArea/index.js

@@ -5,10 +5,9 @@ var _excluded = ["text", "textareaClassName", "style", "textareaStyle", "minHeig
 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 { Button } from 'antd';
-import { Maximize2, Minimize2 } from 'lucide-react';
 import { forwardRef, useCallback, useEffect, useRef, useState } from 'react';
-import ActionIcon from "../ActionIcon";
 import { TextArea } from "../Input";
+import Action from "./Action";
 import InputHighlight from "./InputHighlight";
 import { useStyles } from "./style";
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -41,17 +40,14 @@ var ChatInputArea = /*#__PURE__*/forwardRef(function (_ref, ref) {
     _ref$textareaId = _ref.textareaId,
     textareaId = _ref$textareaId === void 0 ? 'lobe-chat-input-area' : _ref$textareaId,
     props = _objectWithoutProperties(_ref, _excluded);
+  var _useStyles = useStyles(),
+    cx = _useStyles.cx,
+    styles = _useStyles.styles;
   var isChineseInput = useRef(false);
   var _useState = useState(defaultValue),
     _useState2 = _slicedToArray(_useState, 2),
     value = _useState2[0],
     setValue = _useState2[1];
-  var _useStyles = useStyles(),
-    cx = _useStyles.cx,
-    styles = _useStyles.styles;
-  var handleExpandClick = useCallback(function () {
-    if (onExpandChange) onExpandChange(!expand);
-  }, [expand]);
   var handleSend = useCallback(function () {
     if (disabled) return;
     if (onSend) onSend(value);
@@ -65,18 +61,10 @@ var ChatInputArea = /*#__PURE__*/forwardRef(function (_ref, ref) {
     style: _objectSpread({
       minHeight: minHeight
     }, style),
-    children: [/*#__PURE__*/_jsxs("div", {
-      className: styles.actionsBar,
-      children: [/*#__PURE__*/_jsx("div", {
-        className: styles.actionLeft,
-        children: actions
-      }), /*#__PURE__*/_jsx("div", {
-        className: styles.actionsRight,
-        children: /*#__PURE__*/_jsx(ActionIcon, {
-          icon: expand ? Minimize2 : Maximize2,
-          onClick: handleExpandClick
-        })
-      })]
+    children: [/*#__PURE__*/_jsx(Action, {
+      actions: actions,
+      expand: expand,
+      onExpandChange: onExpandChange
     }), /*#__PURE__*/_jsxs("div", {
       className: styles.textareaContainer,
       children: [/*#__PURE__*/_jsx(InputHighlight, {

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 declare type MessageExtra = (props: ChatMessage) => ReactNode;
+export declare 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/EditableMessage/index.js

@@ -50,16 +50,7 @@ var EditableMessage = /*#__PURE__*/memo(function (_ref) {
     placeholder: placeholder,
     style: styles === null || styles === void 0 ? void 0 : styles.input
   }) : /*#__PURE__*/_jsxs(_Fragment, {
-    children: [/*#__PURE__*/_jsx(MessageModal, {
-      editing: isEdit,
-      onChange: function onChange(text) {
-        _onChange === null || _onChange === void 0 ? void 0 : _onChange(text);
-      },
-      onEditingChange: setTyping,
-      onOpenChange: setExpand,
-      open: expand,
-      value: value
-    }), !expand && isEdit ? /*#__PURE__*/_jsx(MessageInput, {
+    children: [!expand && isEdit ? /*#__PURE__*/_jsx(MessageInput, {
       className: classNames === null || classNames === void 0 ? void 0 : classNames.input,
       defaultValue: value,
       editButtonSize: editButtonSize,
@@ -76,6 +67,15 @@ var EditableMessage = /*#__PURE__*/memo(function (_ref) {
       className: classNames === null || classNames === void 0 ? void 0 : classNames.markdown,
       style: styles === null || styles === void 0 ? void 0 : styles.markdown,
       children: value
+    }), /*#__PURE__*/_jsx(MessageModal, {
+      editing: isEdit,
+      onChange: function onChange(text) {
+        _onChange === null || _onChange === void 0 ? void 0 : _onChange(text);
+      },
+      onEditingChange: setTyping,
+      onOpenChange: setExpand,
+      open: expand,
+      value: value
     })]
   });
 });

package/es/types/llm.d.ts

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

package/package.json

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