A chat UI component for displaying messages, attachments, and input interaction.
Element
igc-chat
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"

tagName

Section titled "tagName"

The tagName read-only property of the Element interface returns the tag name of the element on which it's called.

MDN Reference

 
tagName: "igc-chat" = 'igc-chat'

Defined in src/components/chat/chat.ts:201

Accessors

Section titled "Accessors"

draftMessage

Section titled "draftMessage" 
get draftMessage(): any

Defined in src/components/chat/chat.ts:280

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

 
set draftMessage(value: IgcChatDraftMessage): void

Defined in src/components/chat/chat.ts:280

Parameters

Returns void

messages

Section titled "messages" 
get messages(): any

Defined in src/components/chat/chat.ts:267

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

 
set messages(value: IgcChatMessage[]): void

Defined in src/components/chat/chat.ts:267

Parameters

Returns void

options

Section titled "options" 
get options(): any

Defined in src/components/chat/chat.ts:300

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

 
set options(value: IgcChatOptions): void

Defined in src/components/chat/chat.ts:300

Parameters

Returns void

resourceStrings

Section titled "resourceStrings" 
get resourceStrings(): any

Defined in src/components/chat/chat.ts:313

The resource strings of the chat.

 
set resourceStrings(value: IChatResourceStrings | IgcChatResourceStrings): void

Defined in src/components/chat/chat.ts:313

Parameters

Returns void

Methods

Section titled "Methods"

scrollToMessage

Section titled "scrollToMessage"

Scrolls the view to a specific message by id.

 
scrollToMessage(messageId: string): void

Defined in src/components/chat/chat.ts:345

Parameters

  • messageId: string

Returns void

Events

Section titled "Events"

igcAttachmentAdded

Section titled "igcAttachmentAdded"

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

 
igcAttachmentAdded: CustomEvent<IgcChatMessageAttachment[]>

Defined in src/components/chat/chat.ts:68

igcAttachmentClick

Section titled "igcAttachmentClick"

Dispatched when a chat message attachment is clicked.

 
igcAttachmentClick: CustomEvent<IgcChatMessageAttachment>

Defined in src/components/chat/chat.ts:61

igcAttachmentDrag

Section titled "igcAttachmentDrag"

Dispatched during an attachment drag operation.

 
igcAttachmentDrag: CustomEvent<void>

Defined in src/components/chat/chat.ts:80

igcAttachmentDrop

Section titled "igcAttachmentDrop"

Dispatched when an attachment is dropped (e.g., in a drag-and-drop operation).

 
igcAttachmentDrop: CustomEvent<void>

Defined in src/components/chat/chat.ts:86

igcAttachmentRemoved

Section titled "igcAttachmentRemoved"

Dispatched when an attachment is removed by the user.

 
igcAttachmentRemoved: CustomEvent<IgcChatMessageAttachment>

Defined in src/components/chat/chat.ts:74

igcInputBlur

Section titled "igcInputBlur"

Dispatched when the chat input field loses focus.

 
igcInputBlur: CustomEvent<void>

Defined in src/components/chat/chat.ts:101

igcInputChange

Section titled "igcInputChange"

Dispatched when the content of the chat input changes.

 
igcInputChange: CustomEvent<string>

Defined in src/components/chat/chat.ts:106

igcInputFocus

Section titled "igcInputFocus"

Dispatched when the chat input field gains focus.

 
igcInputFocus: CustomEvent<void>

Defined in src/components/chat/chat.ts:96

igcMessageCreated

Section titled "igcMessageCreated"

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

 
igcMessageCreated: CustomEvent<IgcChatMessage>

Defined in src/components/chat/chat.ts:51

igcMessageReact

Section titled "igcMessageReact"

Dispatched when a message is reacted to.

 
igcMessageReact: CustomEvent<IgcChatMessageReaction>

Defined in src/components/chat/chat.ts:56

igcTypingChange

Section titled "igcTypingChange"

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

 
igcTypingChange: CustomEvent<boolean>

Defined in src/components/chat/chat.ts:91