IgcChatComponent | Infragistics API Docs

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

resourceStrings

The resource strings of the chat.

resourceStrings: IgcChatResourceStrings = IgcChatResourceStringEN

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

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:189

Methods

scrollToMessage

Scrolls the view to a specific message by id.

scrollToMessage(messageId: string): void

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

Parameters

messageId: string

Returns void

Events

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:61

igcAttachmentClick

Dispatched when a chat message attachment is clicked.

igcAttachmentClick: CustomEvent<IgcChatMessageAttachment>

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

igcAttachmentDrag

Dispatched during an attachment drag operation.

igcAttachmentDrag: CustomEvent<void>

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

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:76

igcAttachmentRemoved

Dispatched when an attachment is removed by the user.

igcAttachmentRemoved: CustomEvent<IgcChatMessageAttachment>

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

igcInputBlur

Dispatched when the chat input field loses focus.

igcInputBlur: CustomEvent<void>

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

igcInputChange

Dispatched when the content of the chat input changes.

igcInputChange: CustomEvent<string>

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

igcInputFocus

Dispatched when the chat input field gains focus.

igcInputFocus: CustomEvent<void>

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

igcMessageCreated

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

igcMessageCreated: CustomEvent<IgcChatMessage>

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

igcMessageReact

Dispatched when a message is reacted to.

igcMessageReact: CustomEvent<IgcChatMessageReaction>

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

igcTypingChange

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

igcTypingChange: CustomEvent<boolean>

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