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 '@yuntijs/ui';| Name | Description | Type | Default |
|---|---|---|---|
| actions | Actions to be displayed in the chat item | ReactNode | -- |
| avatar | Metadata for the avatar | {avatar?:string|ReactNode;backgroundColor?:string;description?:string;tags?:string[];title?:string} | (required) |
| avatarAddon | -- | ReactNode | -- |
| avatarProps | -- | {animation?:boolean;avatar?:string|ReactNode;background?:string;bordered?:boolean;borderedColor?:string;loading?:boolean;ref?:|bivarianceHack|RefObject;shadow?:boolean;shape?:"circle"|"square";size?:number;sliceText?:boolean;title?:string;tooltipProps?:object;unoptimized?:boolean;variant?:"outlined"|"borderless"|"filled";gap?:number;src?:ReactNode;srcSet?:string;draggable?:boolean|true|false;icon?:ReactNode;style?:object;prefixCls?:string;className?:string;rootClassName?:string;children?:ReactNode;alt?:string;crossOrigin?:""|"anonymous"|"use-credentials";onClick?:(e?:React.MouseEvent<HTMLElement, MouseEvent>)=>void;onError?:()=>boolean} | -- |
| className | Custom CSS class name for the chat item | string | -- |
| editing | Whether the chat item is in editing mode | boolean | -- |
| error | Props for Error render | {classNames?:object;colorfulText?:boolean;extra?:ReactNode;extraDefaultExpand?:boolean;extraIsolate?:boolean;glass?:boolean;icon?:|string|number|unknown|ReactElement|unknown|ReactPortal|Promise<AwaitedReactNode>|LucideIcon|FC|boolean;iconProps?:object;ref?:|bivarianceHack|RefObject;text?:object;variant?:"outlined"|"borderless"|"filled";style?:object;prefixCls?:string;className?:string;rootClassName?:string;id?:string;banner?:boolean;type?:"warning"|"error"|"success"|"info";role?:string;onClick?:(event:E)=>void;onMouseEnter?:(event:E)=>void;onMouseLeave?:(event:E)=>void;description?:ReactNode;action?:ReactNode;closable?:any;onClose?:(event:E)=>void;closeIcon?:ReactNode;message?:ReactNode;closeText?:ReactNode;afterClose?:()=>void;showIcon?:boolean} | -- |
| errorMessage | -- | ReactNode | -- |
| fontSize | -- | number | -- |
| loading | Whether the chat item is in loading state | boolean | -- |
| message | The message content of the chat item | ReactNode | -- |
| messageExtra | -- | ReactNode | -- |
| affixation | -- | ReactNode | -- |
| onAvatarClick | -- | ()=>void | -- |
| onChange | Callback when the message content changes | (value:string)=>void | -- |
| onDoubleClick | -- | (event:E)=>void | -- |
| onEditingChange | Callback when the editing mode changes | (editing:boolean)=>void | -- |
| 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 | -- |
| variant | The variant of the chat item | "bubble"|"docs" | "bubble" |
| markdownProps | The markdownProps of the chat item | any | -- |
| markdownClassname | The markdownClassname of the chat item | string | -- |
| isLatest | Whether this message is latest | boolean | -- |
| hideAvatar | Hide avatar | boolean | -- |
要使用 dayjs 的 fromNow 函数，需要先安装 dayjs 库并在代码中引入它。然后，可以使用以下语法来获取当前时间与给定时间之间的相对时间：
要使用 dayjs 的 fromNow 函数，需要先安装 dayjs 库并在代码中引入它。然后，可以使用以下语法来获取当前时间与给定时间之间的相对时间：
The point of reference-style links is not that they’re easier to write. The point is that with reference-style links, your document source is vastly more readable. Compare the above examples: using reference-style links, the paragraph itself is only 81 characters long; with inline-style links, it’s 176 characters; and as raw HTML, it’s 234 characters. In the raw HTML, there’s more markup than there is text.
This is a blockquote with two paragraphs. Lorem ipsum dolor sit amet,
consectetuer adipiscing elit. Aliquam hendrerit mi posuere lectus.
Vestibulum enim wisi, viverra nec, fringilla in, laoreet vitae, risus.Donec sit amet nisl. Aliquam semper ipsum sit amet velit. Suspendisse
id sem consectetuer libero luctus adipiscing.
an example | an example | an example
This is an example inline link.
| title | title | title |
|---|---|---|
| content | content | content |
$ pnpm install以下是一段Markdown格式的LaTeX数学公式：
我是一个行内公式：
我是一个独立公式：
我是一个带有分式的公式：
我是一个带有上下标的公式：
我是一个带有积分符号的公式：
我是一个嵌套测试：
$1嗯，用户发来了一个查询，内容是“3+3=?”。看起来这是一个简单的数学问题。首先，我需要确认用户的需求是什么。他们可能是在测试我的计算能力，或者想确认一个简单的加法是否正确。
考虑到用户之前提到过解析文件，可能他们希望我能够处理文件相关的问题。但这次的问题明显是数学题，所以可能他们想切换到另一个主题。也有可能是他们想看看我是否能够处理不同类型的问题，包括简单的计算。
接下来，我需要评估我的能力范围。作为一个通用的AI，我能够处理基本的算术运算，包括加法、减法、乘法和除法。所以，3+3=6应该是正确的答案。不过，我应该确保我的回答准确无误，避免任何计算错误。
另外，用户可能是在测试我的反应速度和准确性。所以，我应该快速且准确地给出答案，同时保持友好和专业的语气。这样可以提升用户体验，让他们感到满意。
最后，考虑到用户可能后续还会问更多问题，我应该准备好处理各种类型的问题，包括复杂的数学题、编程问题、数据分析等，以展示我的广泛知识和能力。
3 + 3 = 6