@lobehub/ui 1.21.0 → 1.21.1

package/es/ChatItem/index.d.ts

@@ -1,15 +1,16 @@
 /// <reference types="react" />
 import { type AlertProps } from 'antd';
 import type { DivProps } from "../types";
+import { MetaData } from "../types/meta";
 export interface ChatItemProps extends DivProps {
     /**
-     * @description Weather to show alert and alert config
+     * @description Whether to show alert and alert config
      */
     alert?: AlertProps;
     /**
-     * @description URL of the avatar image
+     * @description Avatar config
      */
-    avatar?: string;
+    avatar: MetaData;
     /**
      * @description Whether to add spacing between chat items
      * @default true
@@ -24,10 +25,6 @@ export interface ChatItemProps extends DivProps {
      * @description The message to be displayed
      */
     message?: string;
-    /**
-     * @description The name of the chat item
-     */
-    name?: string;
     /**
      * @description The placement of the chat item
      * @default 'left'
@@ -38,6 +35,15 @@ export interface ChatItemProps extends DivProps {
      * @default false
      */
     primary?: boolean;
+    /**
+     * @description Whether to show name of the chat item
+     * @default false
+     */
+    showTitle?: boolean;
+    /**
+     * @description Time of chat message
+     */
+    time?: number;
     /**
      * @description The type of chat item
      * @default 'block'

package/es/ChatItem/index.js

@@ -1,19 +1,20 @@
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["className", "name", "primary", "borderSpacing", "loading", "message", "placement", "type", "avatar", "alert"];
+var _excluded = ["className", "title", "primary", "borderSpacing", "loading", "message", "placement", "type", "avatar", "alert", "showTitle", "time"];
 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';
 import { Loader2 } from 'lucide-react';
 import { memo } from 'react';
 import { Avatar, Icon, Markdown } from "./..";
+import { formatTime } from "../utils/formatTime";
 import { useStyles } from "./style";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 var AVATAR_SIZE = 40;
 var ChatItem = /*#__PURE__*/memo(function (_ref) {
   var className = _ref.className,
-    name = _ref.name,
+    title = _ref.title,
     primary = _ref.primary,
     _ref$borderSpacing = _ref.borderSpacing,
     borderSpacing = _ref$borderSpacing === void 0 ? true : _ref$borderSpacing,
@@ -25,13 +26,16 @@ var ChatItem = /*#__PURE__*/memo(function (_ref) {
     type = _ref$type === void 0 ? 'block' : _ref$type,
     avatar = _ref.avatar,
     alert = _ref.alert,
+    showTitle = _ref.showTitle,
+    time = _ref.time,
     props = _objectWithoutProperties(_ref, _excluded);
   var _useStyles = useStyles({
       placement: placement,
       type: type,
-      name: name,
+      title: title,
       primary: primary,
-      avatarSize: AVATAR_SIZE
+      avatarSize: AVATAR_SIZE,
+      showTitle: showTitle
     }),
     cx = _useStyles.cx,
     styles = _useStyles.styles;
@@ -41,8 +45,10 @@ var ChatItem = /*#__PURE__*/memo(function (_ref) {
     children: [/*#__PURE__*/_jsxs("div", {
       className: styles.avatarContainer,
       children: [/*#__PURE__*/_jsx(Avatar, {
-        avatar: avatar,
-        size: AVATAR_SIZE
+        avatar: avatar.avatar,
+        background: avatar.backgroundColor,
+        size: AVATAR_SIZE,
+        title: avatar.title
       }), loading && /*#__PURE__*/_jsx("div", {
         className: styles.loading,
         children: /*#__PURE__*/_jsx(Icon, {
@@ -56,9 +62,12 @@ var ChatItem = /*#__PURE__*/memo(function (_ref) {
       })]
     }), /*#__PURE__*/_jsxs("div", {
       className: styles.messageContainer,
-      children: [name && /*#__PURE__*/_jsx("div", {
-        className: styles.name,
-        children: name
+      children: [/*#__PURE__*/_jsxs("div", {
+        className: cx(styles.name, 'chat-item-name'),
+        children: [showTitle ? avatar.title || 'untitled' : null, time && /*#__PURE__*/_jsx("span", {
+          className: cx(type === 'pure' && !showTitle && styles.time, 'chat-item-time'),
+          children: formatTime(time)
+        })]
       }), alert ? /*#__PURE__*/_jsx(Alert, _objectSpread({
         showIcon: true
       }, alert)) : /*#__PURE__*/_jsx("div", {

package/es/ChatItem/style.d.ts

@@ -1,8 +1,9 @@
 export declare const useStyles: (props?: {
     avatarSize: number;
-    name?: string | undefined;
     placement?: "left" | "right" | undefined;
     primary?: boolean | undefined;
+    showTitle?: boolean | undefined;
+    title?: string | undefined;
     type?: "block" | "pure" | undefined;
 } | undefined) => import("antd-style").ReturnStyles<{
     container: string;
@@ -10,5 +11,6 @@ export declare const useStyles: (props?: {
     avatarContainer: import("antd-style").SerializedStyles;
     messageContainer: import("antd-style").SerializedStyles;
     name: import("antd-style").SerializedStyles;
+    time: string;
     message: string;
 }>;

package/es/ChatItem/style.js

@@ -1,25 +1,28 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10;
 import { createStyles } from 'antd-style';
 export var useStyles = createStyles(function (_ref, _ref2) {
   var cx = _ref.cx,
     css = _ref.css,
-    token = _ref.token;
+    token = _ref.token,
+    stylish = _ref.stylish;
   var placement = _ref2.placement,
     type = _ref2.type,
-    name = _ref2.name,
+    title = _ref2.title,
     primary = _ref2.primary,
-    avatarSize = _ref2.avatarSize;
+    avatarSize = _ref2.avatarSize,
+    showTitle = _ref2.showTitle;
   var blockStylish = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n      padding: 8px 12px;\n      background-color: ", ";\n      border-radius: ", "px;\n      transition: background-color 100ms ", ";\n\n      &:active {\n        background-color: ", ";\n      }\n    "])), primary ? token.colorFillSecondary : token.colorFillTertiary, token.borderRadiusLG, token.motionEaseOut, primary ? token.colorFill : token.colorFillSecondary);
-  var pureStylish = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n      padding-top: ", ";\n    "])), name ? 0 : '6px');
+  var pureStylish = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n      padding-top: ", ";\n    "])), title ? 0 : '6px');
   var pureContainerStylish = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n      border-radius: ", "px;\n      transition: background-color 100ms ", ";\n\n      &:hover {\n        background-color: ", ";\n      }\n\n      &:active {\n        background-color: ", ";\n      }\n    "])), token.borderRadiusLG, token.motionEaseOut, token.colorFillTertiary, token.colorFillSecondary);
   var typeStylish = type === 'block' ? blockStylish : pureStylish;
   return {
-    container: cx(type === 'pure' && pureContainerStylish, css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n          position: relative;\n\n          display: flex;\n          flex-direction: ", ";\n          gap: 12px;\n          align-items: flex-start;\n          justify-content: revert;\n\n          width: 100%;\n          padding: 12px;\n        "])), placement === 'left' ? 'row' : 'row-reverse')),
+    container: cx(type === 'pure' && pureContainerStylish, css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n          position: relative;\n\n          display: flex;\n          flex-direction: ", ";\n          gap: 12px;\n          align-items: flex-start;\n          justify-content: revert;\n\n          width: 100%;\n          padding: 12px;\n\n          .chat-item-time {\n            display: none;\n          }\n\n          &:hover {\n            .chat-item-time {\n              display: inline-block;\n            }\n          }\n        "])), placement === 'left' ? 'row' : 'row-reverse')),
     loading: css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n        position: absolute;\n        right: ", ";\n        bottom: 0;\n        left: ", ";\n\n        display: flex;\n        align-items: center;\n        justify-content: center;\n\n        width: 16px;\n        height: 16px;\n\n        color: ", ";\n\n        background: ", ";\n        border-radius: 50%;\n      "])), placement === 'left' ? '-4px' : 'unset', placement === 'right' ? '-4px' : 'unset', token.colorBgLayout, token.colorPrimary),
     avatarContainer: css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n        position: relative;\n        flex: none;\n        width: ", "px;\n        height: ", "px;\n      "])), avatarSize, avatarSize),
     messageContainer: css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n        position: relative;\n\n        .ant-alert-with-description {\n          padding-block: 12px;\n          padding-inline: 12px;\n        }\n      "]))),
-    name: css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n        margin-bottom: 6px;\n\n        font-size: 12px;\n        line-height: 1;\n        color: ", ";\n        text-align: ", ";\n      "])), token.colorTextDescription, placement === 'left' ? 'left' : 'right'),
-    message: cx(typeStylish, css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n          position: relative;\n        "]))))
+    name: css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n        position: ", ";\n        top: ", ";\n        right: ", ";\n        left: ", ";\n\n        display: flex;\n        flex-direction: ", ";\n        gap: 4px;\n\n        margin-bottom: 6px;\n\n        font-size: 12px;\n        line-height: 1;\n        color: ", ";\n        text-align: ", ";\n      "])), showTitle ? 'relative' : 'absolute', showTitle ? 'unset' : '-16px', placement === 'right' ? '0' : 'unset', placement === 'left' ? '0' : 'unset', placement === 'left' ? 'row' : 'row-reverse', token.colorTextDescription, placement === 'left' ? 'left' : 'right'),
+    time: cx(stylish.blur, css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n          display: flex;\n          align-items: center;\n          justify-content: center;\n\n          padding: 4px 6px;\n\n          line-height: 1;\n\n          background: ", ";\n          border-radius: ", "px;\n        "])), token.colorFillQuaternary, token.borderRadius)),
+    message: cx(typeStylish, css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n          position: relative;\n        "]))))
   };
 });

package/es/ChatList/index.d.ts

@@ -1,11 +1,17 @@
 /// <reference types="react" />
-import { ChatMessage } from "../Chat";
+import { ChatItemProps } from "../index";
 import type { DivProps } from "../types";
+import { ChatMessage } from "../types/chatMessage";
 export interface ChatListProps extends DivProps {
     /**
      * @description Data of chat messages to be displayed
      */
     data: ChatMessage[];
+    /**
+     * @description Whether to show name of the chat item
+     * @default false
+     */
+    showTitle?: ChatItemProps['showTitle'];
     /**
      * @description Type of chat list
      * @default 'chat'

package/es/ChatList/index.js

@@ -1,6 +1,6 @@
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["className", "data", "type"];
+var _excluded = ["className", "data", "type", "showTitle"];
 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 { memo } from 'react';
@@ -12,6 +12,7 @@ var ChatList = /*#__PURE__*/memo(function (_ref) {
     data = _ref.data,
     _ref$type = _ref.type,
     type = _ref$type === void 0 ? 'chat' : _ref$type,
+    showTitle = _ref.showTitle,
     props = _objectWithoutProperties(_ref, _excluded);
   var _useStyles = useStyles(),
     cx = _useStyles.cx,
@@ -19,14 +20,17 @@ var ChatList = /*#__PURE__*/memo(function (_ref) {
   return /*#__PURE__*/_jsx("div", _objectSpread(_objectSpread({
     className: cx(styles.container, className)
   }, props), {}, {
-    children: data.map(function (item, index) {
+    children: data.map(function (item) {
       return /*#__PURE__*/_jsx(ChatItem, {
+        avatar: item.meta,
         borderSpacing: type === 'chat',
         message: item.content,
         placement: type === 'chat' ? item.role === 'user' ? 'right' : 'left' : 'left',
         primary: item.role === 'user',
+        showTitle: showTitle,
+        time: item.updateAt || item.createAt,
         type: type === 'chat' ? 'block' : 'pure'
-      }, index);
+      }, item.id);
     })
   }));
 });

package/es/types/chatMessage.d.ts

@@ -0,0 +1,33 @@
+import { LLMRoleType } from './llm';
+import { BaseDataModel } from './meta';
+/**
+ * 聊天消息错误对象
+ */
+export interface ChatMessageError {
+    /**
+     * 错误信息
+     */
+    message: string;
+    status: number;
+    type: 'general' | 'llm';
+}
+export interface ChatMessage extends BaseDataModel {
+    /**
+     * @title 内容
+     * @description 消息内容
+     */
+    content: string;
+    extra?: {
+        translate: {
+            target: string;
+            to: string;
+        };
+    } & Record<string, any>;
+    parentId?: string;
+    quotaId?: string;
+    /**
+     * 角色
+     * @description 消息发送者的角色
+     */
+    role: LLMRoleType;
+}

package/es/types/chatMessage.js

@@ -0,0 +1 @@
+export {};

package/es/types/llm.d.ts

@@ -0,0 +1,42 @@
+/**
+ * LLM 模型
+ */
+export declare enum LanguageModel {
+    /**
+     * GPT 3.5 Turbo
+     */
+    GPT3_5 = "gpt-3.5-turbo",
+    /**
+     * GPT 4
+     */
+    GPT4 = "gpt-4"
+}
+export interface LLMParams {
+    /**
+     * 控制生成文本中的惩罚系数，用于减少重复性
+     */
+    frequency_penalty?: number;
+    /**
+     * 生成文本的最大长度
+     */
+    max_tokens?: number;
+    /**
+     * 控制生成文本中的惩罚系数，用于减少主题的变化
+     */
+    presence_penalty?: number;
+    /**
+     * 生成文本的随机度量，用于控制文本的创造性和多样性
+     * @default 0.8
+     */
+    temperature: number;
+    /**
+     * 控制生成文本中最高概率的单个 token
+     */
+    top_p?: number;
+}
+export declare type LLMRoleType = 'user' | 'system' | 'assistant';
+export interface LLMMessage {
+    content: string;
+    role: LLMRoleType;
+}
+export declare type LLMExample = LLMMessage[];

package/es/types/llm.js

@@ -0,0 +1,10 @@
+/**
+ * LLM 模型
+ */
+export var LanguageModel;
+
+// 语言模型的设置参数
+(function (LanguageModel) {
+  LanguageModel["GPT3_5"] = "gpt-3.5-turbo";
+  LanguageModel["GPT4"] = "gpt-4";
+})(LanguageModel || (LanguageModel = {}));

package/es/types/meta.d.ts

@@ -0,0 +1,25 @@
+export interface MetaData {
+    /**
+     * 角色头像
+     * @description 可选参数，如果不传则使用默认头像
+     */
+    avatar?: string;
+    /**
+     *  背景色
+     * @description 可选参数，如果不传则使用默认背景色
+     */
+    backgroundColor?: string;
+    description?: string;
+    tag?: string[];
+    /**
+     * 名称
+     * @description 可选参数，如果不传则使用默认名称
+     */
+    title?: string;
+}
+export interface BaseDataModel {
+    createAt?: number;
+    id: string;
+    meta: MetaData;
+    updateAt?: number;
+}

package/es/types/meta.js

@@ -0,0 +1 @@
+export {};

package/es/utils/formatTime.d.ts

@@ -0,0 +1 @@
+export declare const formatTime: (time: number) => string;

package/es/utils/formatTime.js

@@ -0,0 +1,12 @@
+import dayjs from 'dayjs';
+export var formatTime = function formatTime(time) {
+  var now = dayjs();
+  var target = dayjs(time);
+  if (target.isSame(now, 'day')) {
+    return target.format('HH:mm');
+  } else if (target.isSame(now, 'year')) {
+    return target.format('MM-DD HH:mm');
+  } else {
+    return target.format('YYYY-MM-DD HH:mm');
+  }
+};

package/package.json

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