The ChatMessages component takes a history list and handles layout, styling, system-role filtering, empty states, and auto-scrolling to the bottom as new content streams in.
| Prop | Type | Description | Default |
|---|---|---|---|
messages | ChatMessage[] | A list of user, system, and assistant messages. | (Required) |
isLoading | boolean | If true, displays a typing indicator at the end of the conversation. | false |
isSupported | boolean | Determines whether to show the emptyState component. | false |
messagesEndRef | RefObject<HTMLDivElement> | React ref attached to the auto-scroll target element at the base of the list. | (Required) |
emptyState | ReactNode | The UI view to display when the message list is empty. | undefined |
Hi! How does Chrome local AI work?
It uses Gemini Nano built directly into the Google Chrome browser, running queries directly on your device.
Awesome, can it render markdown?