✨ feat(src/avatar): Add description prop and update documentation

Added a new `description` prop to the Avatar component to provide customization options for size, shape, background color, and image source. If no image source is provided, it will display the user's initials. Updated the documentation with a more detailed description of the Avatar component's functionality.

packages/dumi-theme-lobehub/src/components/ApiHeader/index.tsx

@@ -61,12 +61,12 @@ export const ApiHeader: FC<ApiTitleProps> = memo(
 
     const items = [
       sourceUrl && {
-        icon: <Icon icon={Github} size={{ fontSize: 15 }} />,
+        icon: <Icon icon={Github} />,
         children: 'Source',
         url: sourceUrl,
       },
       docUrl && {
-        icon: <Icon icon={Edit3} size={{ fontSize: 15 }} />,
+        icon: <Icon icon={Edit3} />,
         children: 'Edit',
         url: docUrl,
       },

packages/dumi-theme-lobehub/src/slots/ContentFooter/Linker.tsx

@@ -19,15 +19,15 @@ const Linker: FC<LinkerProps> = ({ title, link, type }) => {
       case 'prev':
         return (
           <>
-            <Icon icon={ArrowLeft} size={{ fontSize: 14 }} />
-            <span style={{ lineHeight: '14px' }}>Previous</span>
+            <Icon icon={ArrowLeft} />
+            <span style={{ lineHeight: 1 }}>Previous</span>
           </>
         );
       case 'next':
         return (
           <>
-            <span style={{ lineHeight: '14px' }}>Next</span>
-            <Icon icon={ArrowRight} size={{ fontSize: 14 }} />
+            <span style={{ lineHeight: 1 }}>Next</span>
+            <Icon icon={ArrowRight} />
           </>
         );
     }

src/Avatar/index.md

@@ -2,7 +2,7 @@
 nav: Components
 group: Common
 title: Avatar
-description: Avatar
+description: Avatar is a component that displays a user's profile picture or initials. It can be customized with props like size, shape, background color, and image source. If no image source is provided, it will display the user's initials. This component is typically used in user profile pages, comment sections, or messaging applications.
 ---
 
 ## Default

src/Avatar/index.tsx

@@ -1,26 +1,30 @@
 import { Avatar as A } from 'antd';
-import { createStyles } from 'antd-style';
 import { FC } from 'react';
 import { Center } from 'react-layout-kit';
-
-const useStyles = createStyles(({ css, token }) => ({
-  container: css`
-    cursor: pointer;
-
-    > * {
-      cursor: pointer;
-    }
-  `,
-  border: css`
-    border: 1px solid ${token.colorBorder};
-  `,
-}));
+import { useStyles } from './style';
 
 export interface AvatarProps {
+  /**
+   * @description The URL or base64 data of the avatar image
+   */
   avatar?: string;
+  /**
+   * @description The title text to display if avatar is not provided
+   */
   title?: string;
+  /**
+   * @description The size of the avatar in pixels
+   * @default 40
+   */
   size?: number;
+  /**
+   * @description The shape of the avatar
+   * @default 'circle'
+   */
   shape?: 'circle' | 'square';
+  /**
+   * @description The background color of the avatar
+   */
   background?: string;
 }
 

src/Avatar/style.ts

@@ -0,0 +1,14 @@
+import { createStyles } from 'antd-style';
+
+export const useStyles = createStyles(({ css, token }) => ({
+  container: css`
+    cursor: pointer;
+
+    > * {
+      cursor: pointer;
+    }
+  `,
+  border: css`
+    border: 1px solid ${token.colorBorder};
+  `,
+}));

src/ColorScales/index.md

@@ -2,7 +2,7 @@
 nav: Components
 group: Design
 title: ColorScales
-description: An overview of all 30 Lobe Colors scales.
+description: An overview of all 13 Lobe Colors scales.
 ---
 
 ## Colors

src/ContextMenu/index.md

@@ -2,7 +2,7 @@
 nav: Components
 group: Controls
 title: ContextMenu
-description: ContextMenu
+description: The ContextMenu component is used to display a contextual menu. It is triggered by a right-click or long-press event and can contain a list of MenuItem components. The menu can be nested within other menus and will adjust its position based on available space. Users can interact with the menu using their mouse, keyboard, or touch screen. The component also supports the rendering of dividers between menu items.
 ---
 
 ## Default

src/ContextMenu/index.tsx

@@ -29,8 +29,17 @@ import { useStyles } from './style';
 import { GeneralItemType, MenuItemType } from './types';
 
 export interface ContextMenuProps {
+  /**
+   * @description Label for the context menu
+   */
   label?: string;
+  /**
+   * @description Items to be displayed in the context menu
+   */
   items: MenuItemType[];
+  /**
+   * @description Container element for the context menu
+   */
   container?: HTMLElement;
 }
 

src/Conversation/App.tsx

@@ -10,11 +10,13 @@ import { useStore } from '@/Chat/store';
 
 export interface AppProps {
   /**
-   * @title 是否只读
+   * @description Whether the component is in readonly mode.
+   * @default false
    */
   readonly?: boolean;
   /**
-   * @title 是否包含系统消息
+   * @description Whether to include system messages in the chat.
+   * @default true
    */
   includeSystem?: boolean;
 }

src/Conversation/index.md

@@ -2,7 +2,7 @@
 nav: Components
 group: Chat
 title: Conversation
-description: Conversation
+description: The Conversation component is used to display a chat interface that includes a list of messages and an input area for sending messages. It can be configured to be read-only and to include system messages.
 ---
 
 ## Default

src/Conversation/index.tsx

@@ -5,6 +5,10 @@ import ChatContainer, { AppProps } from './App';
 import StoreUpdater, { StoreUpdaterProps } from './StoreUpdater';
 
 export interface ConversationProps extends StoreUpdaterProps, AppProps {
+  /**
+   * @description Whether to enable devtools or not
+   * @default false
+   */
   devtools?: boolean;
 }
 

src/EditableMessage/index.md

@@ -2,7 +2,7 @@
 nav: Components
 group: Chat
 title: EditableMessage
-description: EditableMessage
+description: The EditableMessage component is used to display a message that can be edited by the user. It consists of a Markdown component and an optional modal for editing the message. When the user clicks on the message, it enters editing mode and displays an input field for editing the message.
 ---
 
 ## Default

src/EditableMessage/index.tsx

@@ -6,41 +6,50 @@ import useControlledState from 'use-merge-value';
 
 export interface EditableMessageProps {
   /**
-   * @title 当前文本值
+   * @title The current text value
    */
   value: string;
   /**
-   * @title 值改变时的回调函数
-   * @param value - 改变后的值
+   * @title Callback function when the value changes
+   * @param value - The new value
    */
   onChange?: (value: string) => void;
   /**
-   * @title 是否打开模态框
+   * @title Whether the modal is open or not
    * @default false
    */
   openModal?: boolean;
   /**
-   * @title 模态框打开状态变化的回调函数
-   * @param open - 模态框是否打开
+   * @title Callback function when the modal open state changes
+   * @param open - Whether the modal is open or not
    */
   onOpenChange?: (open: boolean) => void;
   /**
-   * @title 是否处于编辑状态
+   * @title Whether the component is in edit mode or not
    * @default false
    */
   editing?: boolean;
   /**
-   * @title 编辑状态变化的回调函数
-   * @param editing - 是否处于编辑状态
+   * @title Callback function when the editing state changes
+   * @param editing - Whether the component is in edit mode or not
    */
   onEditingChange?: (editing: boolean) => void;
   /**
-   * @title 当文本值为空时是否显示编辑按钮
+   * @title Whether to show the edit button when the text value is empty
    * @default false
    */
   showEditWhenEmpty?: boolean;
+  /**
+   * @title The class name for the Markdown and MessageInput component
+   */
   classNames?: {
+    /**
+     * @title The class name for the Markdown component
+     */
     markdown?: string;
+    /**
+     * @title The class name for the MessageInput component
+     */
     input?: string;
   };
 }

src/EditableMessageList/index.md

@@ -1,7 +1,7 @@
 ---
 group: Chat
 title: EditableMessageList
-description: EditableMessageList
+description: EditableMessageList is a React component that allows users to edit a list of chat messages, including their content and role. It is designed to be used in chatbot building applications.
 ---
 
 ## Default

src/EditableMessageList/index.tsx

@@ -9,8 +9,19 @@ import { memo, useEffect, useReducer } from 'react';
 import { Flexbox } from 'react-layout-kit';
 
 export interface EditableMessageListProps {
+  /**
+   * @description The data sources to be rendered
+   */
   dataSources: ChatMessage[];
+  /**
+   * @description Callback function triggered when the data sources are changed
+   * @param chatMessages - the updated data sources
+   */
   onChange?: (chatMessages: ChatMessage[]) => void;
+  /**
+   * @description Whether the component is disabled or not
+   * @default false
+   */
   disabled?: boolean;
 }
 

src/EditableText/index.md

@@ -2,7 +2,7 @@
 nav: Components
 group: Controls
 title: EditableText
-description: EditableText
+description: EditableText is a component that allows users to edit text inline. It displays the text in a non-editable state by default, but when the user clicks the edit icon, it switches to an editable input field where the user can make changes. Once the user is done editing, they can click outside the input field or press the enter key to save the changes. The component uses the ControlInput component to display the input field and passes the value and onChange props to it.
 ---
 
 ## Default

src/Icon/index.tsx

@@ -24,8 +24,8 @@ export interface IconProps extends SvgProps {
   icon: LucideIcon;
 }
 
-const Icon: FC<IconProps> = ({ icon, size = 'normal', ...props }) => {
-  let fontSize: number;
+const Icon: FC<IconProps> = ({ icon, size, ...props }) => {
+  let fontSize: number | string;
   let strokeWidth: number;
   const SvgIcon = icon;
   switch (size) {
@@ -42,8 +42,13 @@ const Icon: FC<IconProps> = ({ icon, size = 'normal', ...props }) => {
       strokeWidth = 1.5;
       break;
     default:
-      fontSize = size?.fontSize || 24;
-      strokeWidth = size?.strokeWidth || 2;
+      if (size) {
+        fontSize = size?.fontSize || 24;
+        strokeWidth = size?.strokeWidth || 2;
+      } else {
+        fontSize = '1em';
+        strokeWidth = 2;
+      }
       break;
   }
 

src/MessageModal/index.md

@@ -2,7 +2,7 @@
 nav: Components
 group: Chat
 title: MessageModal
-description: MessageModal
+description: The MessageModal component is a modal window that can display either a message in Markdown format or a message input field for editing the message.
 ---
 
 ## Default

src/MessageModal/index.tsx

@@ -1,32 +1,38 @@
+import Markdown from '@/Markdown';
+import MessageInput from '@/MessageInput';
 import { AimOutlined } from '@ant-design/icons';
 import { Modal } from 'antd';
-import { createStyles } from 'antd-style';
 import { memo } from 'react';
 import { Flexbox } from 'react-layout-kit';
 import useControlledState from 'use-merge-value';
-
-import Markdown from '@/Markdown';
-import MessageInput from '@/MessageInput';
-
-const useStyles = createStyles(({ css, prefixCls }) => ({
-  modal: css`
-    height: 70%;
-    .${prefixCls}-modal-header {
-      margin-bottom: 24px;
-    }
-  `,
-  body: css`
-    overflow-y: scroll;
-    max-height: 70vh;
-  `,
-}));
+import { useStyles } from './style';
 
 export interface MessageModalProps {
+  /**
+   * @description Whether the modal is open or not
+   * @default false
+   */
   open?: boolean;
+  /**
+   * @description Callback fired when open state is changed
+   */
   onOpenChange?: (open: boolean) => void;
+  /**
+   * @description Whether the message is being edited or not
+   * @default false
+   */
   editing?: boolean;
+  /**
+   * @description Callback fired when editing state is changed
+   */
   onEditingChange?: (editing: boolean) => void;
+  /**
+   * @description Callback fired when message content is changed
+   */
   onChange?: (text: string) => void;
+  /**
+   * @description The value of the message content
+   */
   value: string;
 }
 

src/MessageModal/style.ts

@@ -0,0 +1,14 @@
+import { createStyles } from 'antd-style';
+
+export const useStyles = createStyles(({ css, prefixCls }) => ({
+  modal: css`
+    height: 70%;
+    .${prefixCls}-modal-header {
+      margin-bottom: 24px;
+    }
+  `,
+  body: css`
+    overflow-y: scroll;
+    max-height: 70vh;
+  `,
+}));