The TokenTag component is used to display a token tag with a FluentEmoji icon and a text indicating the remaining tokens.
TokenTag
import { TokenTag } from '@lobehub/ui/chat';The TokenTag component is used to display a token tag with a FluentEmoji icon and a text indicating the remaining tokens.
import { TokenTag } from '@lobehub/ui/chat';The remaining tokens are calculated based on the maxValue and value props. The component has three types of visual styles: normal, low, and overload, which are determined by the percentage of remaining tokens. The component is memoized for performance optimization.
| Name | Description | Type | Default |
|---|---|---|---|
| displayMode | -- | "remained"|"used" | "left" |
| maxValue | Maximum value for the token | number | (required) |
| shape | -- | "round"|"square" | -- |
| text | -- | {overload?:string;remained?:string;used?:string} | -- |
| unoptimized | -- | boolean | -- |
| value | Current value of the token | number | (required) |
| ref | Allows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref). | |bivarianceHack|RefObject | -- |
| key | -- | Key| | -- |
Remained 4,000