A chat UI component for displaying messages, attachments, and input interaction.
Slots
prefix — Slot for injecting content (e.g., avatar or icon) before the chat title.
title — Slot for overriding the chat title content.
actions — Slot for injecting header actions (e.g., buttons, menus).
suggestions-header — Slot for rendering a custom header for the suggestions list.
suggestions — Slot for rendering a custom list of quick reply suggestions.
suggestions-actions — Slot for rendering additional actions.
suggestion — Slot for rendering a single suggestion item.
empty-state — Slot shown when there are no messages.
typing-indicator — Slot for the "is typing" indicator.
CSS Parts
chat-container — Styles the main chat container.
header — Styles the chat header container.
prefix — Styles the element before the chat title (e.g., avatar).
title — Styles the chat header title.
message-area-container — Styles the container holding the messages and (optional) suggestions.
message-list — Styles the message list container.
message-item — Styles each message wrapper.
typing-indicator — Styles the typing indicator container.
typing-dot — Styles individual typing indicator dots.
suggestions-container — Styles the container holding all suggestions.
suggestions-header — Styles the suggestions header.
suggestion — Styles each suggestion item.
suggestion-prefix — Styles the icon or prefix in a suggestion.
suggestion-title — Styles the text/title of a suggestion.
empty-state — Styles the empty state container when there are no messages.
input-area-container — Styles the wrapper around the chat input area.
input-area — Styles the main text input area.
input-attachments-container — Styles the container for attachments in the input.
input-attachment-container — Styles a single attachment in the input area.
input-attachment-name — Styles the file name of an attachment.
input-attachment-icon — Styles the icon of an attachment.
text-input — Styles the text input field for typing messages.
input-actions-container — Styles the container for input actions.
input-actions-start — Styles the group of actions at the start of the input after the default file upload.
input-actions-end — Styles the group of actions at the end of the input.
file-upload-container — Styles the container for the file upload input.
file-upload — Styles the file upload input itself.
send-button-container — Styles the container around the send button.
send-button — Styles the send button.
message-container — Styles the container of a single message.
message-list — (forwarded) - Styles the internal list of messages.
message-header — Styles the header of a message (e.g., sender, timestamp).
message-content — Styles the text content of a message.
message-attachments-container — Styles the container for message attachments.
message-attachment — Styles a single message attachment.
message-actions-container — Styles the container holding message actions.
message-sent — Styles messages marked as sent by the current user.
attachment-header — Styles the header of an attachment block.
attachment-content — Styles the content of an attachment block.
attachment-icon — Styles the icon of an attachment.
file-name — Styles the file name shown in an attachment.

Properties

Section titled "Properties"

draftMessage

Section titled "draftMessage"

The chat message currently being composed but not yet sent. Includes the draft text and any attachments.

 
draftMessage: object

messages

Section titled "messages"

The list of chat messages currently displayed. Use this property to set or update the message history.

 
messages: IgrChatMessage[]

options

Section titled "options"

Controls the chat behavior and appearance through a configuration object. Use this to toggle UI options, provide suggestions, templates, etc.

 
options: IgrChatOptions

resourceStrings

Section titled "resourceStrings"

The resource strings of the chat.

 
resourceStrings: IgrChatResourceStrings

Methods

Section titled "Methods"

scrollToMessage

Section titled "scrollToMessage"

Scrolls the view to a specific message by id.

scrollToMessage(messageId: string): void

Parameters

  • messageId: string

Returns void

Events

Section titled "Events"

onAttachmentAdded

Section titled "onAttachmentAdded"

Dispatched when attachment(s) are added either through drag & drop or through the default file input.

onAttachmentAdded(args: CustomEvent<IgrChatMessageAttachment[]>): void

Parameters

Returns void

onAttachmentClick

Section titled "onAttachmentClick"

Dispatched when a chat message attachment is clicked.

onAttachmentClick(args: CustomEvent<IgrChatMessageAttachment>): void

Parameters

Returns void

onAttachmentDrag

Section titled "onAttachmentDrag"

Dispatched during an attachment drag operation.

onAttachmentDrag(args: CustomEvent<void>): void

Parameters

Returns void

onAttachmentDrop

Section titled "onAttachmentDrop"

Dispatched when an attachment is dropped (e.g., in a drag

onAttachmentDrop(args: CustomEvent<void>): void

Parameters

Returns void

onAttachmentRemoved

Section titled "onAttachmentRemoved"

Dispatched when an attachment is removed by the user.

onAttachmentRemoved(args: CustomEvent<IgrChatMessageAttachment>): void

Parameters

Returns void

onInputBlur

Section titled "onInputBlur"

Dispatched when the chat input field loses focus.

onInputBlur(args: CustomEvent<void>): void

Parameters

Returns void

onInputChange

Section titled "onInputChange"

Dispatched when the content of the chat input changes.

onInputChange(args: CustomEvent<string>): void

Parameters

Returns void

onInputFocus

Section titled "onInputFocus"

Dispatched when the chat input field gains focus.

onInputFocus(args: CustomEvent<void>): void

Parameters

Returns void

onMessageCreated

Section titled "onMessageCreated"

Dispatched when a new chat message is created (sent).

onMessageCreated(args: CustomEvent<IgrChatMessage>): void

Parameters

Returns void

onMessageReact

Section titled "onMessageReact"

Dispatched when a message is reacted to.

onMessageReact(args: CustomEvent<IgrChatMessageReaction>): void

Parameters

Returns void

onTypingChange

Section titled "onTypingChange"

Dispatched when the typing status changes (e.g., user starts or stops typing).

onTypingChange(args: CustomEvent<boolean>): void

Parameters

Returns void