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.
ChatItem
import { ChatItem } from '@lobehub/ui/chat';Default
要使用 dayjs 的 fromNow 函数，需要先安装 dayjs 库并在代码中引入它。然后，可以使用以下语法来获取当前时间与给定时间之间的相对时间：
javascript
dayjs().fromNow();
dayjs('2021-05-01').fromNow();
感谢你提供的类型定义和示例。我将根据正确的 ChatStreamPayload 类型定义修改测试用例。以下是更新后的测试代码：
typescript
describe('buildAnthropicPayload', () => {
it('should correctly build payload with user messages only', async () => {
const payload: ChatStreamPayload = {
messages: [{ content: 'Hello', role: 'user' }],
model: 'claude-3-haiku-20240307',
temperature: 0.5,
};
const result = await instance['buildAnthropicPayload'](payload);
expect(result).toEqual({
max_tokens: 4096,
messages: [
{
content: [{ cache_control: { type: 'ephemeral' }, text: 'Hello', type: 'text' }],
role: 'user',
},
],
model: 'claude-3-haiku-20240307',
temperature: 0.25,
});
});
it('should correctly build payload with system message', async () => {
const payload: ChatStreamPayload = {
messages: [
{ content: 'You are a helpful assistant', role: 'system' },
{ content: 'Hello', role: 'user' },
],
model: 'claude-3-haiku-20240307',
temperature: 0.7,
};
const result = await instance['buildAnthropicPayload'](payload);
expect(result).toEqual({
max_tokens: 4096,
messages: [
{
content: [{ cache_control: { type: 'ephemeral' }, text: 'Hello', type: 'text' }],
role: 'user',
},
],
model: 'claude-3-haiku-20240307',
system: [
{
cache_control: { type: 'ephemeral' },
text: 'You are a helpful assistant',
type: 'text',
},
],
temperature: 0.35,
});
});
it('should correctly build payload with tools', async () => {
const tools: ChatCompletionTool[] = [
{ function: { name: 'tool1', description: 'desc1' }, type: 'function' },
];
vi.spyOn(anthropicHelpers, 'buildAnthropicTools').mockReturnValue([{
name: 'tool1',
description: 'desc1',
}] as any);
const payload: ChatStreamPayload = {
messages: [{ content: 'Use a tool', role: 'user' }],
model: 'claude-3-haiku-20240307',
temperature: 0.8,
tools,
};
const result = await instance['buildAnthropicPayload'](payload);
expect(result).toEqual({
max_tokens: 4096,
messages: [
{
content: [{ cache_control: { type: 'ephemeral' }, text: 'Use a tool', type: 'text' }],
role: 'user',
},
],
model: 'claude-3-haiku-20240307',
temperature: 0.4,
tools: [{ name: 'tool1', description: 'desc1' }],
});
expect(anthropicHelpers.buildAnthropicTools).toHaveBeenCalledWith(tools, { enabledContextCaching: true });
});
it('should correctly build payload with thinking mode enabled', async () => {
const payload: ChatStreamPayload = {
messages: [{ content: 'Solve this problem', role: 'user' }],
model: 'claude-3-haiku-20240307',
temperature: 0.9,
thinking: { type: 'enabled', budget_tokens: 0 },
};
const result = await instance['buildAnthropicPayload'](payload);
expect(result).toEqual({
max_tokens: 64000,
messages: [
{
content: [
{ cache_control: { type: 'ephemeral' }, text: 'Solve this problem', type: 'text' },
],
role: 'user',
},
],
model: 'claude-3-haiku-20240307',
thinking: { type: 'enabled', budget_tokens: 0 },
});
});
it('should respect max_tokens in thinking mode when provided', async () => {
const payload: ChatStreamPayload = {
max_tokens: 1000,
messages: [{ content: 'Solve this problem', role: 'user' }],
model: 'claude-3-haiku-20240307',
temperature: 0.7,
thinking: { type: 'enabled', budget_tokens: 0 },
};
const result = await instance['buildAnthropicPayload'](payload);
expect(result).toEqual({
max_tokens: 1000,
messages: [
{
content: [
{ cache_control: { type: 'ephemeral' }, text: 'Solve this problem', type: 'text' },
],
role: 'user',
},
],
model: 'claude-3-haiku-20240307',
thinking: { type: 'enabled', budget_tokens: 0 },
});
});
it('should use budget_tokens in thinking mode when provided', async () => {
const payload: ChatStreamPayload = {
max_tokens: 1000,
messages: [{ content: 'Solve this problem', role: 'user' }],
model: 'claude-3-haiku-20240307',
temperature: 0.5,
thinking: { type: 'enabled', budget_tokens: 2000 },
};
const result = await instance['buildAnthropicPayload'](payload);
expect(result).toEqual({
max_tokens: 3000, // budget_tokens + max_tokens
messages: [
{
content: [
{ cache_control: { type: 'ephemeral' }, text: 'Solve this problem', type: 'text' },
],
role: 'user',
},
],
model: 'claude-3-haiku-20240307',
thinking: { type: 'enabled', budget_tokens: 2000 },
});
});
it('should cap max_tokens at 64000 in thinking mode', async () => {
const payload: ChatStreamPayload = {
max_tokens: 10000,
messages: [{ content: 'Solve this problem', role: 'user' }],
model: 'claude-3-haiku-20240307',
temperature: 0.6,
thinking: { type: 'enabled', budget_tokens: 60000 },
};
const result = await instance['buildAnthropicPayload'](payload);
expect(result).toEqual({
max_tokens: 64000, // capped at 64000
messages: [
{
content: [
{ cache_control: { type: 'ephemeral' }, text: 'Solve this problem', type: 'text' },
],
role: 'user',
},
],
model: 'claude-3-haiku-20240307',
thinking: { type: 'enabled', budget_tokens: 60000 },
});
});
it('should set correct max_tokens based on model for claude-3 models', async () => {
const payload: ChatStreamPayload = {
messages: [{ content: 'Hello', role: 'user' }],
model: 'claude-3-haiku-20240307',
temperature: 0.7,
};
const result = await instance['buildAnthropicPayload'](payload);
expect(result.max_tokens).toBe(4096);
});
it('should set correct max_tokens based on model for non claude-3 models', async () => {
const payload: ChatStreamPayload = {
messages: [{ content: 'Hello', role: 'user' }],
model: 'claude-2.1',
temperature: 0.7,
};
const result = await instance['buildAnthropicPayload'](payload);
expect(result.max_tokens).toBe(8192);
});
it('should respect max_tokens when explicitly provided', async () => {
const payload: ChatStreamPayload = {
max_tokens: 2000,
messages: [{ content: 'Hello', role: 'user' }],
model: 'claude-3-haiku-20240307',
temperature: 0.7,
};
const result = await instance['buildAnthropicPayload'](payload);
expect(result.max_tokens).toBe(2000);
});
it('should handle disabling context caching', async () => {
const payload: ChatStreamPayload = {
enabledContextCaching: false,
messages: [
{ content: 'You are a helpful assistant', role: 'system' },
{ content: 'Hello', role: 'user' },
],
model: 'claude-3-haiku-20240307',
temperature: 0.7,
};
const result = await instance['buildAnthropicPayload'](payload);
expect(result.system?.[0].cache_control).toBeUndefined();
// Verify buildAnthropicMessages was called with correct enabledContextCaching
expect(anthropicHelpers.buildAnthropicMessages).toHaveBeenCalledWith(
[{ content: 'Hello', role: 'user' }],
{ enabledContextCaching: false }
);
});
it('should correctly handle temperature scaling', async () => {
const payload: ChatStreamPayload = {
messages: [{ content: 'Hello', role: 'user' }],
model: 'claude-3-haiku-20240307',
temperature: 1.0,
};
const result = await instance['buildAnthropicPayload'](payload);
expect(result.temperature).toBe(0.5); // Anthropic uses 0-1 scale, so divide by 2
});
it('should not include temperature when not provided in payload', async () => {
// We need to create a partial payload without temperature
// but since the type requires it, we'll use type assertion
const partialPayload = {
messages: [{ content: 'Hello', role: 'user' }],
model: 'claude-3-haiku-20240307',
} as ChatStreamPayload;
// Delete the temperature property to simulate it not being provided
delete (partialPayload as any).temperature;
const result = await instance['buildAnthropicPayload'](partialPayload);
expect(result.temperature).toBeUndefined();
});
it('should not include top_p when thinking is enabled', async () => {
const payload: ChatStreamPayload = {
messages: [{ content: 'Hello', role: 'user' }],
model: 'claude-3-haiku-20240307',
temperature: 0.7,
thinking: { type: 'enabled', budget_tokens: 0 },
top_p: 0.9,
};
const result = await instance['buildAnthropicPayload'](payload);
expect(result.top_p).toBeUndefined();
});
it('should include top_p when thinking is not enabled', async () => {
const payload: ChatStreamPayload = {
messages: [{ content: 'Hello', role: 'user' }],
model: 'claude-3-haiku-20240307',
temperature: 0.7,
top_p: 0.9,
};
const result = await instance['buildAnthropicPayload'](payload);
expect(result.top_p).toBe(0.9);
});
it('should handle thinking with type disabled', async () => {
const payload: ChatStreamPayload = {
messages: [{ content: 'Hello', role: 'user' }],
model: 'claude-3-haiku-20240307',
temperature: 0.7,
thinking: { type: 'disabled', budget_tokens: 0 },
};
const result = await instance['buildAnthropicPayload'](payload);
// When thinking is disabled, it should be treated as if thinking wasn't provided
expect(result).toEqual({
max_tokens: 4096,
messages: [
{
content: [{ cache_control: { type: 'ephemeral' }, text: 'Hello', type: 'text' }],
role: 'user',
},
],
model: 'claude-3-haiku-20240307',
temperature: 0.35,
});
});
});我已经根据你提供的 ChatStreamPayload 类型定义和示例进行了以下修改：
- 为所有测试用例添加了
temperature参数，因为它在类型定义中是必需的 - 更新了
thinking属性的结构，使用type: 'enabled' | 'disabled'而不是enabled: boolean - 添加了一个测试用例来处理
thinking.type: 'disabled'的情况 - 对于测试"不包含温度"的情况，使用了类型断言和删除属性的方法来模拟未提供温度的情况
这些测试用例现在应该与你的 ChatStreamPayload 类型定义完全兼容，并且涵盖了 buildAnthropicPayload 方法的所有主要功能和边界情况。
Alert
Error
Show Details
Error with defult message placeholder "..."
Show Details
AlertWithContent
some content
Error
Show Details
APIs
| Name | Description | Type | Default |
|---|---|---|---|
| aboveMessage | -- | ReactNode | -- |
| actions | Actions to be displayed in the chat item | ReactNode | -- |
| actionsWrapWidth | -- | number | -- |
| 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 | -- |