ChatItem is a React component that represents a single item in a chat conversation. It displays the user's avatar, name, and message. It can also display a loading indicator if the message is still being sent.
import { ChatItem } from '@lobehub/ui/chat';
| Name | Description | Type | Default |
|---|---|---|---|
| aboveMessage | -- | ReactNode | -- |
| actions | Actions to be displayed in the chat item | ReactNode | -- |
| avatar | Metadata for the avatar | any | (required) |
| avatarAddon | -- | ReactNode | -- |
| avatarProps | -- | any | -- |
| belowMessage | -- | ReactNode | -- |
| editing | Whether the chat item is in editing mode | boolean | -- |
| error | Props for Error render | any | -- |
| errorMessage | -- | ReactNode | -- |
| fontSize | -- | number | -- |
| loading | Whether the chat item is in loading state | boolean | -- |
| markdownProps | -- | {} | -- |
| message | The message content of the chat item | ReactNode | -- |
| messageExtra | -- | ReactNode | -- |
| onAvatarClick | -- | ()=>void | -- |
| onChange | Callback when the message content changes | (value:string)=>void | -- |
| onDoubleClick | -- | any | -- |
| onEditingChange | Callback when the editing mode changes | (editing:boolean)=>void | -- |
| placeholderMessage | -- | string | "..." |
| placement | The placement of the chat item | "left"|"right" | "left" |
| primary | Whether the chat item is primary | boolean | -- |
| renderMessage | -- | (content:React.ReactNode)=>ReactNode | -- |
| showTitle | Whether to show the title of the chat item | boolean | -- |
| text | -- | any | -- |
| time | The timestamp of the chat item | number | -- |
| type | The type of the chat item | "block"|"pure" | "block" |
| style | -- | {} | -- |
| className | -- | string | -- |
| dangerouslySetInnerHTML | -- | {__html:string|TrustedHTML} | -- |
| onCopy | -- | (event:E)=>void | -- |
| onCopyCapture | -- | (event:E)=>void | -- |
| onCut | -- | (event:E)=>void | -- |
| onCutCapture | -- | (event:E)=>void | -- |
| onPaste | -- | (event:E)=>void | -- |
| onPasteCapture | -- | (event:E)=>void | -- |
| onCompositionEnd | -- | (event:E)=>void | -- |
| onCompositionEndCapture | -- | (event:E)=>void | -- |
| onCompositionStart | -- | (event:E)=>void | -- |
| onCompositionStartCapture | -- | (event:E)=>void | -- |
| onCompositionUpdate | -- | (event:E)=>void | -- |
| onCompositionUpdateCapture | -- | (event:E)=>void | -- |
| onFocus | -- | (event:E)=>void | -- |
| onFocusCapture | -- | (event:E)=>void | -- |
| onBlur | -- | (event:E)=>void | -- |
| onBlurCapture | -- | (event:E)=>void | -- |
| onChangeCapture | -- | (event:E)=>void | -- |
| onBeforeInput | -- | (event:E)=>void | -- |
| onBeforeInputCapture | -- | (event:E)=>void | -- |
| onInput | -- | (event:E)=>void | -- |
| onInputCapture | -- | (event:E)=>void | -- |
| onReset | -- | (event:E)=>void | -- |
| onResetCapture | -- | (event:E)=>void | -- |
| onSubmit | -- | (event:E)=>void | -- |
| onSubmitCapture | -- | (event:E)=>void | -- |
| onInvalid | -- | (event:E)=>void | -- |
| onInvalidCapture | -- | (event:E)=>void | -- |
| onLoad | -- | (event:E)=>void | -- |
| onLoadCapture | -- | (event:E)=>void | -- |
| onError | -- | (event:E)=>void | -- |
| onErrorCapture | -- | (event:E)=>void | -- |
| onKeyDown | -- | (event:E)=>void | -- |
| onKeyDownCapture | -- | (event:E)=>void | -- |
| onKeyPress | -- | (event:E)=>void | -- |
| onKeyPressCapture | -- | (event:E)=>void | -- |
| onKeyUp | -- | (event:E)=>void | -- |
| onKeyUpCapture | -- | (event:E)=>void | -- |
| onAbort | -- | (event:E)=>void | -- |
| onAbortCapture | -- | (event:E)=>void | -- |
| onCanPlay | -- | (event:E)=>void | -- |
| onCanPlayCapture | -- | (event:E)=>void | -- |
| onCanPlayThrough | -- | (event:E)=>void | -- |
| onCanPlayThroughCapture | -- | (event:E)=>void | -- |
| onDurationChange | -- | (event:E)=>void | -- |
| onDurationChangeCapture | -- | (event:E)=>void | -- |
| onEmptied | -- | (event:E)=>void | -- |
| onEmptiedCapture | -- | (event:E)=>void | -- |
| onEncrypted | -- | (event:E)=>void | -- |
| onEncryptedCapture | -- | (event:E)=>void | -- |
| onEnded | -- | (event:E)=>void | -- |
| onEndedCapture | -- | (event:E)=>void | -- |
| onLoadedData | -- | (event:E)=>void | -- |
| onLoadedDataCapture | -- | (event:E)=>void | -- |
| onLoadedMetadata | -- | (event:E)=>void | -- |
| onLoadedMetadataCapture | -- | (event:E)=>void | -- |
| onLoadStart | -- | (event:E)=>void | -- |
| onLoadStartCapture | -- | (event:E)=>void | -- |
| onPause | -- | (event:E)=>void | -- |
| onPauseCapture | -- | (event:E)=>void | -- |
| onPlay | -- | (event:E)=>void | -- |
| onPlayCapture | -- | (event:E)=>void | -- |
| onPlaying | -- | (event:E)=>void | -- |
| onPlayingCapture | -- | (event:E)=>void | -- |
| onProgress | -- | (event:E)=>void | -- |
| onProgressCapture | -- | (event:E)=>void | -- |
| onRateChange | -- | (event:E)=>void | -- |
| onRateChangeCapture | -- | (event:E)=>void | -- |
| onResize | -- | (event:E)=>void | -- |
| onResizeCapture | -- | (event:E)=>void | -- |
| onSeeked | -- | (event:E)=>void | -- |
| onSeekedCapture | -- | (event:E)=>void | -- |
| onSeeking | -- | (event:E)=>void | -- |
| onSeekingCapture | -- | (event:E)=>void | -- |
| onStalled | -- | (event:E)=>void | -- |
| onStalledCapture | -- | (event:E)=>void | -- |
| onSuspend | -- | (event:E)=>void | -- |
| onSuspendCapture | -- | (event:E)=>void | -- |
| onTimeUpdate | -- | (event:E)=>void | -- |
| onTimeUpdateCapture | -- | (event:E)=>void | -- |
| onVolumeChange | -- | (event:E)=>void | -- |
| onVolumeChangeCapture | -- | (event:E)=>void | -- |
| onWaiting | -- | (event:E)=>void | -- |
| onWaitingCapture | -- | (event:E)=>void | -- |
| onAuxClick | -- | (event:E)=>void | -- |
| onAuxClickCapture | -- | (event:E)=>void | -- |
| onClick | -- | (event:E)=>void | -- |
| onClickCapture | -- | (event:E)=>void | -- |
| onContextMenu | -- | (event:E)=>void | -- |
| onContextMenuCapture | -- | (event:E)=>void | -- |
| onDoubleClickCapture | -- | (event:E)=>void | -- |
| onDrag | -- | (event:E)=>void | -- |
| onDragCapture | -- | (event:E)=>void | -- |
| onDragEnd | -- | (event:E)=>void | -- |
| onDragEndCapture | -- | (event:E)=>void | -- |
| onDragEnter | -- | (event:E)=>void | -- |
| onDragEnterCapture | -- | (event:E)=>void | -- |
| onDragExit | -- | (event:E)=>void | -- |
| onDragExitCapture | -- | (event:E)=>void | -- |
| onDragLeave | -- | (event:E)=>void | -- |
| onDragLeaveCapture | -- | (event:E)=>void | -- |
| onDragOver | -- | (event:E)=>void | -- |
| onDragOverCapture | -- | (event:E)=>void | -- |
| onDragStart | -- | (event:E)=>void | -- |
| onDragStartCapture | -- | (event:E)=>void | -- |
| onDrop | -- | (event:E)=>void | -- |
| onDropCapture | -- | (event:E)=>void | -- |
| onMouseDown | -- | (event:E)=>void | -- |
| onMouseDownCapture | -- | (event:E)=>void | -- |
| onMouseEnter | -- | (event:E)=>void | -- |
| onMouseLeave | -- | (event:E)=>void | -- |
| onMouseMove | -- | (event:E)=>void | -- |
| onMouseMoveCapture | -- | (event:E)=>void | -- |
| onMouseOut | -- | (event:E)=>void | -- |
| onMouseOutCapture | -- | (event:E)=>void | -- |
| onMouseOver | -- | (event:E)=>void | -- |
| onMouseOverCapture | -- | (event:E)=>void | -- |
| onMouseUp | -- | (event:E)=>void | -- |
| onMouseUpCapture | -- | (event:E)=>void | -- |
| onSelect | -- | (event:E)=>void | -- |
| onSelectCapture | -- | (event:E)=>void | -- |
| onTouchCancel | -- | (event:E)=>void | -- |
| onTouchCancelCapture | -- | (event:E)=>void | -- |
| onTouchEnd | -- | (event:E)=>void | -- |
| onTouchEndCapture | -- | (event:E)=>void | -- |
| onTouchMove | -- | (event:E)=>void | -- |
| onTouchMoveCapture | -- | (event:E)=>void | -- |
| onTouchStart | -- | (event:E)=>void | -- |
| onTouchStartCapture | -- | (event:E)=>void | -- |
| onPointerDown | -- | (event:E)=>void | -- |
| onPointerDownCapture | -- | (event:E)=>void | -- |
| onPointerMove | -- | (event:E)=>void | -- |
| onPointerMoveCapture | -- | (event:E)=>void | -- |
| onPointerUp | -- | (event:E)=>void | -- |
| onPointerUpCapture | -- | (event:E)=>void | -- |
| onPointerCancel | -- | (event:E)=>void | -- |
| onPointerCancelCapture | -- | (event:E)=>void | -- |
| onPointerEnter | -- | (event:E)=>void | -- |
| onPointerLeave | -- | (event:E)=>void | -- |
| onPointerOver | -- | (event:E)=>void | -- |
| onPointerOverCapture | -- | (event:E)=>void | -- |
| onPointerOut | -- | (event:E)=>void | -- |
| onPointerOutCapture | -- | (event:E)=>void | -- |
| onGotPointerCapture | -- | (event:E)=>void | -- |
| onGotPointerCaptureCapture | -- | (event:E)=>void | -- |
| onLostPointerCapture | -- | (event:E)=>void | -- |
| onLostPointerCaptureCapture | -- | (event:E)=>void | -- |
| onScroll | -- | (event:E)=>void | -- |
| onScrollCapture | -- | (event:E)=>void | -- |
| onScrollEnd | -- | (event:E)=>void | -- |
| onScrollEndCapture | -- | (event:E)=>void | -- |
| onWheel | -- | (event:E)=>void | -- |
| onWheelCapture | -- | (event:E)=>void | -- |
| onAnimationStart | -- | (event:E)=>void | -- |
| onAnimationStartCapture | -- | (event:E)=>void | -- |
| onAnimationEnd | -- | (event:E)=>void | -- |
| onAnimationEndCapture | -- | (event:E)=>void | -- |
| onAnimationIteration | -- | (event:E)=>void | -- |
| onAnimationIterationCapture | -- | (event:E)=>void | -- |
| onToggle | -- | (event:E)=>void | -- |
| onBeforeToggle | -- | (event:E)=>void | -- |
| onTransitionCancel | -- | (event:E)=>void | -- |
| onTransitionCancelCapture | -- | (event:E)=>void | -- |
| onTransitionEnd | -- | (event:E)=>void | -- |
| onTransitionEndCapture | -- | (event:E)=>void | -- |
| onTransitionRun | -- | (event:E)=>void | -- |
| onTransitionRunCapture | -- | (event:E)=>void | -- |
| onTransitionStart | -- | (event:E)=>void | -- |
| onTransitionStartCapture | -- | (event:E)=>void | -- |
| defaultChecked | -- | boolean | -- |
| defaultValue | -- | string|number|ReadonlyArray | -- |
| suppressContentEditableWarning | -- | boolean | -- |
| suppressHydrationWarning | -- | boolean | -- |
| accessKey | -- | string | -- |
| autoCapitalize | -- | off|none|on|sentences|words|characters|string | -- |
| autoFocus | -- | boolean | -- |
| contentEditable | -- | Booleanish|inherit|plaintext-only | -- |
| contextMenu | -- | string | -- |
| dir | -- | string | -- |
| draggable | -- | true|false|boolean | -- |
| enterKeyHint | -- | "enter"|"done"|"go"|"next"|"previous"|"search"|"send" | -- |
| hidden | -- | boolean | -- |
| id | -- | string | -- |
| lang | -- | string | -- |
| nonce | -- | string | -- |
| slot | -- | string | -- |
| spellCheck | -- | true|false|boolean | -- |
| tabIndex | -- | number | -- |
| title | -- | string | -- |
| translate | -- | "yes"|"no" | -- |
| radioGroup | -- | string | -- |
| role | -- | term|none|string|search|alert|alertdialog|application|article|banner|button|cell|checkbox|columnheader|combobox|complementary|contentinfo|definition|dialog|directory|document|feed|figure|form|grid|gridcell|group|heading|img|link|list|listbox|listitem|log|main|marquee|math|menu|menubar|menuitem|menuitemcheckbox|menuitemradio|navigation|note|option|presentation|progressbar|radio|radiogroup|region|row|rowgroup|rowheader|scrollbar|searchbox|separator|slider|spinbutton|status|switch|tab|table|tablist|tabpanel|textbox|timer|toolbar|tooltip|tree|treegrid|treeitem | -- |
| about | -- | string | -- |
| content | -- | string | -- |
| datatype | -- | string | -- |
| inlist | -- | any | -- |
| prefix | -- | string | -- |
| property | -- | string | -- |
| rel | -- | string | -- |
| resource | -- | string | -- |
| rev | -- | string | -- |
| typeof | -- | string | -- |
| vocab | -- | string | -- |
| autoCorrect | -- | string | -- |
| autoSave | -- | string | -- |
| color | -- | string | -- |
| itemProp | -- | string | -- |
| itemScope | -- | boolean | -- |
| itemType | -- | string | -- |
| itemID | -- | string | -- |
| itemRef | -- | string | -- |
| results | -- | number | -- |
| security | -- | string | -- |
| unselectable | -- | "off"|"on" | -- |
| popover | -- | ""|"auto"|"manual" | -- |
| popoverTargetAction | -- | "toggle"|"show"|"hide" | -- |
| popoverTarget | -- | string | -- |
| inert | -- | boolean | -- |
| inputMode | Hints at the type of data that might be entered by the user while editing the element or its contents | "text"|"url"|"none"|"search"|"tel"|"email"|"numeric"|"decimal" | -- |
| is | Specify that a standard HTML element should behave like a defined custom built-in element | string | -- |
| exportparts | -- | string | -- |
| part | -- | string | -- |
| internalClassName | -- | string | -- |
| horizontal | -- | boolean | false |
| direction | -- | "vertical"|"vertical-reverse"|"horizontal"|"horizontal-reverse" | "horizontal" |
| distribution | -- | string|inherit|start|end|-moz-initial|initial|revert|revert-layer|unset|space-around|space-between|space-evenly|stretch|center|flex-end|flex-start|left|normal|right | -- |
| wrap | -- | "wrap"|"inherit"|"-moz-initial"|"initial"|"revert"|"revert-layer"|"unset"|"nowrap"|"wrap-reverse" | -- |
| justify | -- | string|inherit|start|end|-moz-initial|initial|revert|revert-layer|unset|space-around|space-between|space-evenly|stretch|center|flex-end|flex-start|left|normal|right | -- |
| align | -- | "start"|"end"|"center"|"baseline"|"stretch" | "stretch" |
| gap | -- | CommonSpaceNumber|number|string | 0 |
| width | -- | number|string | "auto" |
| height | -- | number|string | "auto" |
| padding | -- | string|number|CommonSpaceNumber | 0 |
| paddingInline | -- | string|number | -- |
| paddingBlock | -- | string|number | -- |
| flex | -- | number|string | "0 1 auto" |
| visible | -- | boolean | true |
| as | -- | symbol|object|ComponentClass|FunctionComponent|text|style|slot|title|th|tr|search|article|button|dialog|figure|form|img|link|main|menu|menuitem|option|switch|table|small|circle|time|center|a|abbr|address|area|aside|audio|b|base|bdi|bdo|big|blockquote|body|br|canvas|caption|cite|code|col|colgroup|data|datalist|dd|del|details|dfn|div|dl|dt|em|embed|fieldset|figcaption|footer|h1|h2|h3|h4|h5|h6|head|header|hgroup|hr|html|i|iframe|input|ins|kbd|keygen|label|legend|li|map|mark|meta|meter|nav|noindex|noscript|ol|optgroup|output|p|param|picture|pre|progress|q|rp|rt|ruby|s|samp|script|section|select|source|span|strong|sub|summary|sup|template|tbody|td|textarea|tfoot|thead|track|u|ul|var|video|wbr|webview|svg|animate|animateMotion|animateTransform|clipPath|defs|desc|ellipse|feBlend|feColorMatrix|feComponentTransfer|feComposite|feConvolveMatrix|feDiffuseLighting|feDisplacementMap|feDistantLight|feDropShadow|feFlood|feFuncA|feFuncB|feFuncG|feFuncR|feGaussianBlur|feImage|feMerge|feMergeNode|feMorphology|feOffset|fePointLight|feSpecularLighting|feSpotLight|feTile|feTurbulence|filter|foreignObject|g|image|line|linearGradient|marker|mask|metadata|mpath|path|pattern|polygon|polyline|radialGradient|rect|set|stop|textPath|tspan|use|view | "div" |
| prefixCls | -- | string | -- |
要使用 dayjs 的 fromNow 函数，需要先安装 dayjs 库并在代码中引入它。然后，可以使用以下语法来获取当前时间与给定时间之间的相对时间：
dayjs().fromNow();
dayjs('2021-05-01').fromNow();some content