npm - igniteui-webcomponents - Versions diffs - 6.3.4 → 6.4.0-alpha.1 - Mend

igniteui-webcomponents 6.3.4 → 6.4.0-alpha.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (313) hide show

package/components/chat/chat-message.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"chat-message.js","sourceRoot":"","sources":["../../../src/components/chat/chat-message.ts"],"names":[],"mappings":"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","sourcesContent":["import { consume } from '@lit/context';\nimport { html, LitElement, nothing } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { cache } from 'lit/directives/cache.js';\nimport { until } from 'lit/directives/until.js';\nimport { addThemingController } from '../../theming/theming-controller.js';\nimport IgcIconButtonComponent from '../button/icon-button.js';\nimport { chatContext } from '../common/context.js';\nimport { registerComponent } from '../common/definitions/register.js';\nimport { partMap } from '../common/part-map.js';\nimport { isEmpty, trimmedHtml } from '../common/util.js';\nimport type { ChatState } from './chat-state.js';\nimport IgcMessageAttachmentsComponent from './message-attachments.js';\nimport { styles } from './themes/message.base.css.js';\nimport { all } from './themes/message.js';\nimport { styles as shared } from './themes/shared/chat-message/chat-message.common.css.js';\nimport type {\n ChatMessageRenderContext,\n ChatTemplateRenderer,\n IgcChatMessage,\n} from './types.js';\nimport { chatMessageAdoptPageStyles } from './utils.js';\n\nconst LIKE_INACTIVE = 'thumb_up_inactive';\nconst LIKE_ACTIVE = 'thumb_up_active';\nconst DISLIKE_INACTIVE = 'thumb_down_inactive';\nconst DISLIKE_ACTIVE = 'thumb_down_active';\nconst COPY_CONTENT = 'copy_content';\nconst REGENERATE = 'regenerate';\n\ntype DefaultMessageRenderers = {\n messageHeader: ChatTemplateRenderer<ChatMessageRenderContext>;\n messageContent: ChatTemplateRenderer<ChatMessageRenderContext>;\n messageAttachments: ChatTemplateRenderer<ChatMessageRenderContext>;\n messageActions: ChatTemplateRenderer<ChatMessageRenderContext>;\n};\n\n/* blazorSuppress /\n/\n A chat message component for displaying individual messages in `<igc-chat>`.\n \n @element igc-chat-message\n \n \n * This component renders a single chat message including:\n * - Message text (sanitized)\n * - Attachments (if any)\n * - Custom templates for message content and actions (if provided via chat options)\n \n It distinguishes sent messages from received messages by comparing\n * the message sender with the current user ID from chat state.\n \n The message text is sanitized with DOMPurify before rendering,\n * and can be rendered with a markdown renderer if provided.\n /\nexport default class IgcChatMessageComponent extends LitElement {\n public static readonly tagName = 'igc-chat-message';\n public static override styles = [styles, shared];\n\n / blazorSuppress /\n public static register(): void {\n registerComponent(\n IgcChatMessageComponent,\n IgcMessageAttachmentsComponent,\n IgcIconButtonComponent\n );\n }\n\n private readonly _defaults = Object.freeze<DefaultMessageRenderers>({\n messageHeader: () => this._renderHeader(),\n messageContent: () => this._renderContent(),\n messageAttachments: () => this._renderAttachments(),\n messageActions: () => this._renderActions(),\n });\n\n @consume({ context: chatContext, subscribe: true })\n private readonly _state!: ChatState;\n\n /\n The chat message to render.\n */\n @property({ attribute: false })\n public message!: IgcChatMessage;\n\n constructor() {\n super();\n addThemingController(this, all);\n }\n\n protected override firstUpdated(): void {\n if (this._state.options?.adoptRootStyles) {\n chatMessageAdoptPageStyles(this);\n }\n }\n\n private _getRenderer(name: keyof DefaultMessageRenderers) {\n return this._state.options?.renderers\n ? (this._state.options.renderers[name] ?? this._defaults[name])\n : this._defaults[name];\n }\n\n private async _handleCopy(): Promise<void> {\n const text = this.message.text;\n const separator = text ? '\\n\\n' : '';\n const attachments = this.message.attachments ?? [];\n const { attachmentLabel, attachmentsListLabel, messageCopied } =\n this._state.resourceStrings!;\n\n const attachmentsText = isEmpty(attachments)\n ? ''\n : attachments\n .map(({ name, url }) => `${name ?? attachmentLabel}: ${url ?? ''}`)\n .join('\\n');\n\n const payload = attachmentsText\n ? `${text}${separator}${attachmentsListLabel}:\\n${attachmentsText}`\n : text;\n\n try {\n await navigator.clipboard.writeText(payload);\n this._state.showActionToast(messageCopied);\n } catch (err) {\n throw new Error(`Failed to copy message: ${err}`);\n }\n }\n\n private _handleMessageActionClick(event: PointerEvent): void {\n const targetButton = event.target as HTMLElement;\n const button = targetButton.closest(IgcIconButtonComponent.tagName);\n\n if (!button) {\n return;\n }\n\n let reaction = button.name;\n\n switch (reaction) {\n case LIKE_INACTIVE:\n case LIKE_ACTIVE:\n reaction = this.message.reactions?.includes(LIKE_ACTIVE)\n ? LIKE_INACTIVE\n : LIKE_ACTIVE;\n break;\n case DISLIKE_INACTIVE:\n case DISLIKE_ACTIVE:\n reaction = this.message.reactions?.includes(DISLIKE_ACTIVE)\n ? DISLIKE_INACTIVE\n : DISLIKE_ACTIVE;\n break;\n case COPY_CONTENT:\n reaction = COPY_CONTENT;\n this._handleCopy();\n break;\n case REGENERATE:\n reaction = REGENERATE;\n break;\n default:\n reaction = '';\n }\n\n this.message.reactions = reaction ? [reaction] : [];\n this._state.emitMessageReaction({ message: this.message, reaction });\n this.requestUpdate();\n }\n\n private _renderHeader() {\n return nothing;\n }\n\n private _renderContent() {\n return html`${this.message.text}`;\n }\n\n private _renderActions() {\n const isSent = this.message.sender === this._state.currentUserId;\n const hasText = this.message.text.trim();\n const hasAttachments = !isEmpty(this.message.attachments ?? []);\n const isTyping = this._state.options?.isTyping;\n const isLastMessage = this.message === this._state.messages.at(-1);\n const resourceStrings = this._state.resourceStrings!;\n\n if (isSent \|\| !(hasText \|\| hasAttachments) \|\| (isLastMessage && isTyping)) {\n return nothing;\n }\n\n return html`\n ${this._renderActionButton(COPY_CONTENT, resourceStrings.reactionCopy)}\n ${this._renderActionButton(\n this.message.reactions?.includes(LIKE_ACTIVE)\n ? LIKE_ACTIVE\n : LIKE_INACTIVE,\n resourceStrings.reactionLike\n )}\n ${this._renderActionButton(\n this.message.reactions?.includes(DISLIKE_ACTIVE)\n ? DISLIKE_ACTIVE\n : DISLIKE_INACTIVE,\n resourceStrings.reactionDislike\n )}\n ${this._renderActionButton(\n REGENERATE,\n resourceStrings.reactionRegenerate\n )}\n `;\n }\n\n private _renderActionButton(name: string, tooltipMessage: string) {\n return html`\n <igc-icon-button\n id=${`${name}-button`}\n name=${name}\n variant=\"flat\"\n @pointerenter=${({ target }: PointerEvent) =>\n this._state.showActionsTooltip(target as Element, tooltipMessage)}\n @focus=${({ target }: FocusEvent) =>\n this._state.showActionsTooltip(target as Element, tooltipMessage)}\n ></igc-icon-button>\n `;\n }\n\n private _renderAttachments() {\n return isEmpty(this.message.attachments ?? [])\n ? nothing\n : html`\n <igc-message-attachments\n .message=${this.message}\n exportparts=\"\n attachment,\n attachment-header,\n attachment-icon,\n file-name,\n attachment-content\"\n ></igc-message-attachments>\n `;\n }\n\n private _renderMessage() {\n const ctx: ChatMessageRenderContext = {\n message: this.message,\n instance: this._state.host,\n };\n\n return trimmedHtml`\n <div part=\"message-header\">\n ${until(this._getRenderer('messageHeader')(ctx))}\n </div>\n <div part=\"plain-text\">\n ${until(this._getRenderer('messageContent')(ctx))}\n </div>\n <div part=\"message-attachments\">\n ${until(this._getRenderer('messageAttachments')(ctx))}\n </div>\n <div part=\"message-actions\" @click=${this._handleMessageActionClick}>\n ${until(this._getRenderer('messageActions')(ctx))}\n </div>\n `;\n }\n\n protected override render() {\n const messageRenderer = this._state.options?.renderers?.message;\n const ctx: ChatMessageRenderContext = {\n message: this.message,\n instance: this._state.host,\n };\n\n const parts = {\n 'message-container': true,\n sent: this._state.isCurrentUserMessage(this.message),\n };\n\n return html`\n ${cache(\n this.message\n ? html`\n <div part=${partMap(parts)}>\n ${cache(\n messageRenderer\n ? until(messageRenderer(ctx))\n : this._renderMessage()\n )}\n </div>\n `\n : nothing\n )}\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'igc-chat-message': IgcChatMessageComponent;\n }\n}\n"]}
1	+ {"version":3,"file":"chat-message.js","sourceRoot":"","sources":["../../../src/components/chat/chat-message.ts"],"names":[],"mappings":"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","sourcesContent":["import { consume } from '@lit/context';\nimport { html, LitElement, nothing } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { cache } from 'lit/directives/cache.js';\nimport { until } from 'lit/directives/until.js';\nimport { addThemingController } from '../../theming/theming-controller.js';\nimport IgcIconButtonComponent from '../button/icon-button.js';\nimport { chatContext } from '../common/context.js';\nimport { registerComponent } from '../common/definitions/register.js';\nimport { partMap } from '../common/part-map.js';\nimport { isEmpty, trimmedHtml } from '../common/util.js';\nimport type { ChatState } from './chat-state.js';\nimport IgcMessageAttachmentsComponent from './message-attachments.js';\nimport { styles } from './themes/message.base.css.js';\nimport { all } from './themes/message.js';\nimport { styles as shared } from './themes/shared/chat-message/chat-message.common.css.js';\nimport type {\n ChatMessageRenderContext,\n ChatTemplateRenderer,\n IgcChatMessage,\n} from './types.js';\nimport { adoptPageStyles } from './utils.js';\n\nconst LIKE_INACTIVE = 'thumb_up_inactive';\nconst LIKE_ACTIVE = 'thumb_up_active';\nconst DISLIKE_INACTIVE = 'thumb_down_inactive';\nconst DISLIKE_ACTIVE = 'thumb_down_active';\nconst COPY_CONTENT = 'copy_content';\nconst REGENERATE = 'regenerate';\n\ntype DefaultMessageRenderers = {\n messageHeader: ChatTemplateRenderer<ChatMessageRenderContext>;\n messageContent: ChatTemplateRenderer<ChatMessageRenderContext>;\n messageAttachments: ChatTemplateRenderer<ChatMessageRenderContext>;\n messageActions: ChatTemplateRenderer<ChatMessageRenderContext>;\n};\n\n/* blazorSuppress /\n/\n A chat message component for displaying individual messages in `<igc-chat>`.\n \n @element igc-chat-message\n \n \n * This component renders a single chat message including:\n * - Message text (sanitized)\n * - Attachments (if any)\n * - Custom templates for message content and actions (if provided via chat options)\n \n It distinguishes sent messages from received messages by comparing\n * the message sender with the current user ID from chat state.\n \n The message text is sanitized with DOMPurify before rendering,\n * and can be rendered with a markdown renderer if provided.\n /\nexport default class IgcChatMessageComponent extends LitElement {\n public static readonly tagName = 'igc-chat-message';\n public static override styles = [styles, shared];\n\n / blazorSuppress /\n public static register(): void {\n registerComponent(\n IgcChatMessageComponent,\n IgcMessageAttachmentsComponent,\n IgcIconButtonComponent\n );\n }\n\n private readonly _defaults = Object.freeze<DefaultMessageRenderers>({\n messageHeader: () => this._renderHeader(),\n messageContent: () => this._renderContent(),\n messageAttachments: () => this._renderAttachments(),\n messageActions: () => this._renderActions(),\n });\n\n @consume({ context: chatContext, subscribe: true })\n private readonly _state!: ChatState;\n\n /\n The chat message to render.\n */\n @property({ attribute: false })\n public message!: IgcChatMessage;\n\n constructor() {\n super();\n addThemingController(this, all);\n }\n\n protected override firstUpdated(): void {\n if (this._state.options?.adoptRootStyles) {\n adoptPageStyles(this);\n }\n }\n\n private _getRenderer(name: keyof DefaultMessageRenderers) {\n return this._state.options?.renderers\n ? (this._state.options.renderers[name] ?? this._defaults[name])\n : this._defaults[name];\n }\n\n private async _handleCopy(): Promise<void> {\n const text = this.message.text;\n const separator = text ? '\\n\\n' : '';\n const attachments = this.message.attachments ?? [];\n const { attachmentLabel, attachmentsListLabel, messageCopied } =\n this._state.resourceStrings!;\n\n const attachmentsText = isEmpty(attachments)\n ? ''\n : attachments\n .map(({ name, url }) => `${name ?? attachmentLabel}: ${url ?? ''}`)\n .join('\\n');\n\n const payload = attachmentsText\n ? `${text}${separator}${attachmentsListLabel}:\\n${attachmentsText}`\n : text;\n\n try {\n await navigator.clipboard.writeText(payload);\n this._state.showActionToast(messageCopied);\n } catch (err) {\n throw new Error(`Failed to copy message: ${err}`);\n }\n }\n\n private _handleMessageActionClick(event: PointerEvent): void {\n const targetButton = event.target as HTMLElement;\n const button = targetButton.closest(IgcIconButtonComponent.tagName);\n\n if (!button) {\n return;\n }\n\n let reaction = button.name;\n\n switch (reaction) {\n case LIKE_INACTIVE:\n case LIKE_ACTIVE:\n reaction = this.message.reactions?.includes(LIKE_ACTIVE)\n ? LIKE_INACTIVE\n : LIKE_ACTIVE;\n break;\n case DISLIKE_INACTIVE:\n case DISLIKE_ACTIVE:\n reaction = this.message.reactions?.includes(DISLIKE_ACTIVE)\n ? DISLIKE_INACTIVE\n : DISLIKE_ACTIVE;\n break;\n case COPY_CONTENT:\n reaction = COPY_CONTENT;\n this._handleCopy();\n break;\n case REGENERATE:\n reaction = REGENERATE;\n break;\n default:\n reaction = '';\n }\n\n this.message.reactions = reaction ? [reaction] : [];\n this._state.emitMessageReaction({ message: this.message, reaction });\n this.requestUpdate();\n }\n\n private _renderHeader() {\n return nothing;\n }\n\n private _renderContent() {\n return html`${this.message.text}`;\n }\n\n private _renderActions() {\n const isSent = this.message.sender === this._state.currentUserId;\n const hasText = this.message.text.trim();\n const hasAttachments = !isEmpty(this.message.attachments ?? []);\n const isTyping = this._state.options?.isTyping;\n const isLastMessage = this.message === this._state.messages.at(-1);\n const resourceStrings = this._state.resourceStrings!;\n\n if (isSent \|\| !(hasText \|\| hasAttachments) \|\| (isLastMessage && isTyping)) {\n return nothing;\n }\n\n return html`\n ${this._renderActionButton(COPY_CONTENT, resourceStrings.reactionCopy)}\n ${this._renderActionButton(\n this.message.reactions?.includes(LIKE_ACTIVE)\n ? LIKE_ACTIVE\n : LIKE_INACTIVE,\n resourceStrings.reactionLike\n )}\n ${this._renderActionButton(\n this.message.reactions?.includes(DISLIKE_ACTIVE)\n ? DISLIKE_ACTIVE\n : DISLIKE_INACTIVE,\n resourceStrings.reactionDislike\n )}\n ${this._renderActionButton(\n REGENERATE,\n resourceStrings.reactionRegenerate\n )}\n `;\n }\n\n private _renderActionButton(name: string, tooltipMessage: string) {\n return html`\n <igc-icon-button\n id=${`${name}-button`}\n name=${name}\n variant=\"flat\"\n @pointerenter=${({ target }: PointerEvent) =>\n this._state.showActionsTooltip(target as Element, tooltipMessage)}\n @focus=${({ target }: FocusEvent) =>\n this._state.showActionsTooltip(target as Element, tooltipMessage)}\n ></igc-icon-button>\n `;\n }\n\n private _renderAttachments() {\n return isEmpty(this.message.attachments ?? [])\n ? nothing\n : html`\n <igc-message-attachments\n .message=${this.message}\n exportparts=\"\n attachment,\n attachment-header,\n attachment-icon,\n file-name,\n attachment-content\"\n ></igc-message-attachments>\n `;\n }\n\n private _renderMessage() {\n const ctx: ChatMessageRenderContext = {\n message: this.message,\n instance: this._state.host,\n };\n\n return trimmedHtml`\n <div part=\"message-header\">\n ${until(this._getRenderer('messageHeader')(ctx))}\n </div>\n <div part=\"plain-text\">\n ${until(this._getRenderer('messageContent')(ctx))}\n </div>\n <div part=\"message-attachments\">\n ${until(this._getRenderer('messageAttachments')(ctx))}\n </div>\n <div part=\"message-actions\" @click=${this._handleMessageActionClick}>\n ${until(this._getRenderer('messageActions')(ctx))}\n </div>\n `;\n }\n\n protected override render() {\n const messageRenderer = this._state.options?.renderers?.message;\n const ctx: ChatMessageRenderContext = {\n message: this.message,\n instance: this._state.host,\n };\n\n const parts = {\n 'message-container': true,\n sent: this._state.isCurrentUserMessage(this.message),\n };\n\n return html`\n ${cache(\n this.message\n ? html`\n <div part=${partMap(parts)}>\n ${cache(\n messageRenderer\n ? until(messageRenderer(ctx))\n : this._renderMessage()\n )}\n </div>\n `\n : nothing\n )}\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'igc-chat-message': IgcChatMessageComponent;\n }\n}\n"]}

package/components/chat/chat-state.d.ts CHANGED Viewed

@@ -25,9 +25,7 @@ export declare class ChatState {
      * Cache of accepted file types, organized into extensions, mimeTypes, and wildcardTypes
      */
     private _acceptedTypesCache;
-    private _isTyping;
-    private _lastTyped;
-    resourceStrings: import("../common/i18n/chat.resources.js").IgcChatResourceStrings;
+    resourceStrings: import("../common/i18n/EN/chat.resources.js").IgcChatResourceStrings;
     get host(): IgcChatComponent;
     get acceptedFileTypes(): ChatAcceptedFileTypes | null;
     get disableAutoScroll(): boolean;
@@ -96,6 +94,8 @@ export declare class ChatState {
     emitAttachmentRemoved(attachment: IgcChatMessageAttachment): boolean;
     /** @internal */
     emitMessageReaction(reaction: IgcChatMessageReaction): boolean;
+    /** @internal */
+    emitUserTypingState(state: boolean): boolean;
     /**
      * @internal
      */
@@ -124,5 +124,4 @@ export declare class ChatState {
      * @internal
      */
     attachFilesWithEvent(files: File[]): void;
-    handleKeyDown: (_: KeyboardEvent) => void;
 }

package/components/chat/chat-state.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { IgcChatResourceStringEN } from '../common/i18n/chat.resources.js';
+import { IgcChatResourceStringEN } from '../common/i18n/EN/chat.resources.js';
 import { isEmpty, nanoid } from '../common/util.js';
 import IgcToastComponent from '../toast/toast.js';
 import IgcTooltipComponent from '../tooltip/tooltip.js';
@@ -61,29 +61,7 @@ export class ChatState {
         this._inputAttachments = [];
         this._inputValue = '';
         this._acceptedTypesCache = null;
-        this._isTyping = false;
-        this._lastTyped = Date.now();
         this.resourceStrings = IgcChatResourceStringEN;
-        this.handleKeyDown = (_) => {
-            this._lastTyped = Date.now();
-            if (!this._isTyping) {
-                this.emitEvent('igcTypingChange', {
-                    detail: { isTyping: true },
-                });
-                this._isTyping = true;
-                const stopTypingDelay = this.stopTypingDelay;
-                setTimeout(() => {
-                    if (this._isTyping &&
-                        stopTypingDelay &&
-                        this._lastTyped + stopTypingDelay < Date.now()) {
-                        this.emitEvent('igcTypingChange', {
-                            detail: { isTyping: false },
-                        });
-                        this._isTyping = false;
-                    }
-                }, stopTypingDelay);
-            }
-        };
         this._host = chat;
         this._contextUpdateFn = contextUpdateFn;
         this._userInputContextUpdateFn = userInputContextUpdateFn;
@@ -115,6 +93,9 @@ export class ChatState {
     emitMessageReaction(reaction) {
         return this._host.emitEvent('igcMessageReact', { detail: reaction });
     }
+    emitUserTypingState(state) {
+        return this._host.emitEvent('igcTypingChange', { detail: state });
+    }
     showActionsTooltip(target, message) {
         if (!this._actionsTooltip) {
             this._actionsTooltip = document.createElement(IgcTooltipComponent.tagName);

package/components/chat/chat-state.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"chat-state.js","sourceRoot":"","sources":["../../../src/components/chat/chat-state.ts"],"names":[],"mappings":"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","sourcesContent":["import { IgcChatResourceStringEN } from '../common/i18n/chat.resources.js';\nimport { isEmpty, nanoid } from '../common/util.js';\nimport IgcToastComponent from '../toast/toast.js';\nimport IgcTooltipComponent from '../tooltip/tooltip.js';\nimport type IgcChatComponent from './chat.js';\nimport type { IgcChatComponentEventMap } from './chat.js';\nimport type {\n ChatSuggestionsPosition,\n IgcChatMessage,\n IgcChatMessageAttachment,\n IgcChatMessageReaction,\n IgcChatOptions,\n} from './types.js';\nimport {\n type ChatAcceptedFileTypes,\n isImageAttachment,\n parseAcceptedFileTypes,\n} from './utils.js';\n\n/*\n Internal state manager for the `<igc-chat>` component.\n \n Manages messages, input value, attachments, options, and event emissions.\n /\nexport class ChatState {\n //#region Internal properties and state /* The host `<igc-chat>` component instance /\n private readonly _host: IgcChatComponent;\n\n private readonly _contextUpdateFn: () => unknown;\n private readonly _userInputContextUpdateFn: () => unknown;\n\n private _actionsTooltip?: IgcTooltipComponent;\n private _actionToast?: IgcToastComponent;\n\n /* The current list of messages /\n private _messages: IgcChatMessage[] = [];\n /* Chat options/configuration /\n private _options?: IgcChatOptions;\n\n /* List of current input attachments /\n private _inputAttachments: IgcChatMessageAttachment[] = [];\n /* Current input text /\n private _inputValue = '';\n /\n Cache of accepted file types, organized into extensions, mimeTypes, and wildcardTypes\n /\n private _acceptedTypesCache: ChatAcceptedFileTypes \| null = null;\n\n private _isTyping = false;\n private _lastTyped = Date.now();\n\n public resourceStrings = IgcChatResourceStringEN;\n\n //#endregion\n\n //#region Public properties\n\n public get host(): IgcChatComponent {\n return this._host;\n }\n\n public get acceptedFileTypes(): ChatAcceptedFileTypes \| null {\n return this._acceptedTypesCache;\n }\n\n public get disableAutoScroll(): boolean {\n return this._options?.disableAutoScroll ?? false;\n }\n\n /\n Gets the list of chat messages.\n /\n public get messages(): IgcChatMessage[] {\n return this._messages;\n }\n\n /\n Sets the list of chat messages.\n /\n public set messages(value: IgcChatMessage[]) {\n this._messages = value;\n }\n\n /\n Gets current chat options.\n /\n public get options(): IgcChatOptions \| undefined {\n return this._options;\n }\n\n /\n Sets chat options and requests host update.\n /\n public set options(value: IgcChatOptions) {\n this._options = value;\n this._setAcceptedTypesCache();\n this._contextUpdateFn.call(this._host);\n }\n\n /\n Gets the current user ID from options or returns 'user' as fallback.\n /\n public get currentUserId(): string {\n return this._options?.currentUserId ?? 'user';\n }\n\n /\n Gets the current suggestionsPosition from options or returns the default value 'below-messages'.\n /\n public get suggestionsPosition(): ChatSuggestionsPosition {\n return this._options?.suggestionsPosition ?? 'below-messages';\n }\n\n /\n Gets the current stopTypingDelay from options or returns the default value `3000`.\n /\n public get stopTypingDelay(): number {\n return this._options?.stopTypingDelay ?? 3000;\n }\n\n /\n Gets the list of attachments currently attached to input.\n /\n public get inputAttachments(): IgcChatMessageAttachment[] {\n return this._inputAttachments;\n }\n\n /\n Sets the input attachments and requests host update.\n /\n public set inputAttachments(value: IgcChatMessageAttachment[]) {\n this._inputAttachments = value;\n this._userInputContextUpdateFn.call(this._host);\n }\n\n /\n Gets the current input value.\n /\n public get inputValue(): string {\n return this._inputValue;\n }\n\n /\n Sets the current input value and requests host update.\n /\n public set inputValue(value: string) {\n this._inputValue = value;\n this._userInputContextUpdateFn.call(this._host);\n }\n\n /\n Returns whether the default chat input textarea has a trimmed value payload.\n * @internal\n /\n public get hasInputValue(): boolean {\n return !!this._inputValue.trim();\n }\n\n /\n Returns whether the default file input of the chat has any attached files.\n * @internal\n /\n public get hasInputAttachments(): boolean {\n return !isEmpty(this._inputAttachments);\n }\n\n //#endregion\n\n constructor(\n chat: IgcChatComponent,\n contextUpdateFn: () => unknown,\n userInputContextUpdateFn: () => unknown\n ) {\n this._host = chat;\n this._contextUpdateFn = contextUpdateFn;\n this._userInputContextUpdateFn = userInputContextUpdateFn;\n }\n\n public isCurrentUserMessage(message?: IgcChatMessage): boolean {\n return this.currentUserId === message?.sender;\n }\n\n //#region Event handlers\n\n public emitEvent(name: keyof IgcChatComponentEventMap, args?: any): boolean {\n return this._host.emitEvent(name, args);\n }\n\n /* @internal /\n public emitMessageCreated(message: IgcChatMessage): boolean {\n return this._host.emitEvent('igcMessageCreated', {\n detail: message,\n cancelable: true,\n });\n }\n\n /* @internal /\n public emitAttachmentsAdded(\n attachments: IgcChatMessageAttachment[]\n ): boolean {\n return this._host.emitEvent('igcAttachmentAdded', {\n detail: attachments,\n cancelable: true,\n });\n }\n\n /* @internal /\n public emitAttachmentRemoved(attachment: IgcChatMessageAttachment): boolean {\n return this._host.emitEvent('igcAttachmentRemoved', {\n detail: attachment,\n cancelable: true,\n });\n }\n\n /* @internal /\n public emitMessageReaction(reaction: IgcChatMessageReaction): boolean {\n return this._host.emitEvent('igcMessageReact', { detail: reaction });\n }\n\n /\n @internal\n /\n public showActionsTooltip(target: Element, message: string): void {\n if (!this._actionsTooltip) {\n this._actionsTooltip = document.createElement(\n IgcTooltipComponent.tagName\n );\n this._actionsTooltip.hideTriggers = 'pointerleave,click,blur';\n this._actionsTooltip.hideDelay = 100;\n this._host.renderRoot.appendChild(this._actionsTooltip);\n }\n this._actionsTooltip.message = message;\n this._actionsTooltip.show(target);\n }\n\n /\n @internal\n /\n public showActionToast(content: string): void {\n if (!this._actionToast) {\n this._actionToast = document.createElement(IgcToastComponent.tagName);\n this._actionToast.displayTime = 3000;\n this._host.renderRoot.appendChild(this._actionToast);\n }\n this._actionToast.textContent = content;\n this._actionToast.show();\n }\n\n //#endregion\n\n /\n Updates the internal cache for accepted file types.\n * Parses the acceptedFiles string option into extensions, mimeTypes, and wildcard types.\n /\n private _setAcceptedTypesCache(): void {\n this._acceptedTypesCache = this.options?.acceptedFiles\n ? parseAcceptedFileTypes(this.options.acceptedFiles)\n : null;\n }\n\n protected _createMessage(message: Partial<IgcChatMessage>): IgcChatMessage {\n return {\n id: message.id ?? nanoid(),\n text: message.text ?? '',\n sender: message.sender ?? this.currentUserId,\n timestamp: message.timestamp ?? Date.now().toString(),\n attachments: message.attachments \|\| [],\n };\n }\n\n public addMessage(message: Partial<IgcChatMessage>) {\n this.messages.push(this._createMessage(message));\n this._host.requestUpdate('messages');\n }\n\n //#region Public API\n\n /\n Adds a new chat message.\n * Emits 'igcMessageCreated' event which can be canceled to prevent adding.\n * Clears input value and attachments on success.\n * @internal\n /\n public addMessageWithEvent(message: Partial<IgcChatMessage>): void {\n const newMessage = this._createMessage(message);\n\n if (this.emitMessageCreated(newMessage)) {\n this.addMessage(newMessage);\n this.inputValue = '';\n this.inputAttachments = [];\n }\n }\n\n /\n Adds files as attachments to the input.\n * Emits 'igcAttachmentChange' event which can be canceled to prevent adding.\n * @internal\n */\n public attachFilesWithEvent(files: File[]): void {\n const newAttachments: IgcChatMessageAttachment[] = [];\n const fileNames = new Set(\n this.inputAttachments.map((attachment) => attachment.file?.name ?? '')\n );\n\n for (const file of files) {\n if (fileNames.has(file.name)) {\n continue;\n }\n\n const url = URL.createObjectURL(file);\n const attachment: IgcChatMessageAttachment = {\n id: nanoid(),\n url,\n name: file.name,\n file,\n };\n\n if (isImageAttachment(file)) {\n attachment.thumbnail = url;\n }\n newAttachments.push(attachment);\n }\n\n if (this.emitAttachmentsAdded(newAttachments)) {\n this.inputAttachments = [...this.inputAttachments, ...newAttachments];\n }\n }\n\n public handleKeyDown = (_: KeyboardEvent) => {\n this._lastTyped = Date.now();\n if (!this._isTyping) {\n this.emitEvent('igcTypingChange', {\n detail: { isTyping: true },\n });\n this._isTyping = true;\n\n const stopTypingDelay = this.stopTypingDelay;\n setTimeout(() => {\n if (\n this._isTyping &&\n stopTypingDelay &&\n this._lastTyped + stopTypingDelay < Date.now()\n ) {\n this.emitEvent('igcTypingChange', {\n detail: { isTyping: false },\n });\n this._isTyping = false;\n }\n }, stopTypingDelay);\n }\n };\n\n //#endregion\n}\n"]}
1	+ {"version":3,"file":"chat-state.js","sourceRoot":"","sources":["../../../src/components/chat/chat-state.ts"],"names":[],"mappings":"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","sourcesContent":["import { IgcChatResourceStringEN } from '../common/i18n/EN/chat.resources.js';\nimport { isEmpty, nanoid } from '../common/util.js';\nimport IgcToastComponent from '../toast/toast.js';\nimport IgcTooltipComponent from '../tooltip/tooltip.js';\nimport type IgcChatComponent from './chat.js';\nimport type { IgcChatComponentEventMap } from './chat.js';\nimport type {\n ChatSuggestionsPosition,\n IgcChatMessage,\n IgcChatMessageAttachment,\n IgcChatMessageReaction,\n IgcChatOptions,\n} from './types.js';\nimport {\n type ChatAcceptedFileTypes,\n isImageAttachment,\n parseAcceptedFileTypes,\n} from './utils.js';\n\n/*\n Internal state manager for the `<igc-chat>` component.\n \n Manages messages, input value, attachments, options, and event emissions.\n /\nexport class ChatState {\n //#region Internal properties and state /* The host `<igc-chat>` component instance /\n private readonly _host: IgcChatComponent;\n\n private readonly _contextUpdateFn: () => unknown;\n private readonly _userInputContextUpdateFn: () => unknown;\n\n private _actionsTooltip?: IgcTooltipComponent;\n private _actionToast?: IgcToastComponent;\n\n /* The current list of messages /\n private _messages: IgcChatMessage[] = [];\n /* Chat options/configuration /\n private _options?: IgcChatOptions;\n\n /* List of current input attachments /\n private _inputAttachments: IgcChatMessageAttachment[] = [];\n /* Current input text /\n private _inputValue = '';\n /\n Cache of accepted file types, organized into extensions, mimeTypes, and wildcardTypes\n /\n private _acceptedTypesCache: ChatAcceptedFileTypes \| null = null;\n\n public resourceStrings = IgcChatResourceStringEN;\n\n //#endregion\n\n //#region Public properties\n\n public get host(): IgcChatComponent {\n return this._host;\n }\n\n public get acceptedFileTypes(): ChatAcceptedFileTypes \| null {\n return this._acceptedTypesCache;\n }\n\n public get disableAutoScroll(): boolean {\n return this._options?.disableAutoScroll ?? false;\n }\n\n /\n Gets the list of chat messages.\n /\n public get messages(): IgcChatMessage[] {\n return this._messages;\n }\n\n /\n Sets the list of chat messages.\n /\n public set messages(value: IgcChatMessage[]) {\n this._messages = value;\n }\n\n /\n Gets current chat options.\n /\n public get options(): IgcChatOptions \| undefined {\n return this._options;\n }\n\n /\n Sets chat options and requests host update.\n /\n public set options(value: IgcChatOptions) {\n this._options = value;\n this._setAcceptedTypesCache();\n this._contextUpdateFn.call(this._host);\n }\n\n /\n Gets the current user ID from options or returns 'user' as fallback.\n /\n public get currentUserId(): string {\n return this._options?.currentUserId ?? 'user';\n }\n\n /\n Gets the current suggestionsPosition from options or returns the default value 'below-messages'.\n /\n public get suggestionsPosition(): ChatSuggestionsPosition {\n return this._options?.suggestionsPosition ?? 'below-messages';\n }\n\n /\n Gets the current stopTypingDelay from options or returns the default value `3000`.\n /\n public get stopTypingDelay(): number {\n return this._options?.stopTypingDelay ?? 3000;\n }\n\n /\n Gets the list of attachments currently attached to input.\n /\n public get inputAttachments(): IgcChatMessageAttachment[] {\n return this._inputAttachments;\n }\n\n /\n Sets the input attachments and requests host update.\n /\n public set inputAttachments(value: IgcChatMessageAttachment[]) {\n this._inputAttachments = value;\n this._userInputContextUpdateFn.call(this._host);\n }\n\n /\n Gets the current input value.\n /\n public get inputValue(): string {\n return this._inputValue;\n }\n\n /\n Sets the current input value and requests host update.\n /\n public set inputValue(value: string) {\n this._inputValue = value;\n this._userInputContextUpdateFn.call(this._host);\n }\n\n /\n Returns whether the default chat input textarea has a trimmed value payload.\n * @internal\n /\n public get hasInputValue(): boolean {\n return !!this._inputValue.trim();\n }\n\n /\n Returns whether the default file input of the chat has any attached files.\n * @internal\n /\n public get hasInputAttachments(): boolean {\n return !isEmpty(this._inputAttachments);\n }\n\n //#endregion\n\n constructor(\n chat: IgcChatComponent,\n contextUpdateFn: () => unknown,\n userInputContextUpdateFn: () => unknown\n ) {\n this._host = chat;\n this._contextUpdateFn = contextUpdateFn;\n this._userInputContextUpdateFn = userInputContextUpdateFn;\n }\n\n public isCurrentUserMessage(message?: IgcChatMessage): boolean {\n return this.currentUserId === message?.sender;\n }\n\n //#region Event handlers\n\n public emitEvent(name: keyof IgcChatComponentEventMap, args?: any): boolean {\n return this._host.emitEvent(name, args);\n }\n\n /* @internal /\n public emitMessageCreated(message: IgcChatMessage): boolean {\n return this._host.emitEvent('igcMessageCreated', {\n detail: message,\n cancelable: true,\n });\n }\n\n /* @internal /\n public emitAttachmentsAdded(\n attachments: IgcChatMessageAttachment[]\n ): boolean {\n return this._host.emitEvent('igcAttachmentAdded', {\n detail: attachments,\n cancelable: true,\n });\n }\n\n /* @internal /\n public emitAttachmentRemoved(attachment: IgcChatMessageAttachment): boolean {\n return this._host.emitEvent('igcAttachmentRemoved', {\n detail: attachment,\n cancelable: true,\n });\n }\n\n /* @internal /\n public emitMessageReaction(reaction: IgcChatMessageReaction): boolean {\n return this._host.emitEvent('igcMessageReact', { detail: reaction });\n }\n\n /* @internal /\n public emitUserTypingState(state: boolean): boolean {\n return this._host.emitEvent('igcTypingChange', { detail: state });\n }\n\n /\n @internal\n /\n public showActionsTooltip(target: Element, message: string): void {\n if (!this._actionsTooltip) {\n this._actionsTooltip = document.createElement(\n IgcTooltipComponent.tagName\n );\n this._actionsTooltip.hideTriggers = 'pointerleave,click,blur';\n this._actionsTooltip.hideDelay = 100;\n this._host.renderRoot.appendChild(this._actionsTooltip);\n }\n this._actionsTooltip.message = message;\n this._actionsTooltip.show(target);\n }\n\n /\n @internal\n /\n public showActionToast(content: string): void {\n if (!this._actionToast) {\n this._actionToast = document.createElement(IgcToastComponent.tagName);\n this._actionToast.displayTime = 3000;\n this._host.renderRoot.appendChild(this._actionToast);\n }\n this._actionToast.textContent = content;\n this._actionToast.show();\n }\n\n //#endregion\n\n /\n Updates the internal cache for accepted file types.\n * Parses the acceptedFiles string option into extensions, mimeTypes, and wildcard types.\n /\n private _setAcceptedTypesCache(): void {\n this._acceptedTypesCache = this.options?.acceptedFiles\n ? parseAcceptedFileTypes(this.options.acceptedFiles)\n : null;\n }\n\n protected _createMessage(message: Partial<IgcChatMessage>): IgcChatMessage {\n return {\n id: message.id ?? nanoid(),\n text: message.text ?? '',\n sender: message.sender ?? this.currentUserId,\n timestamp: message.timestamp ?? Date.now().toString(),\n attachments: message.attachments \|\| [],\n };\n }\n\n public addMessage(message: Partial<IgcChatMessage>) {\n this.messages.push(this._createMessage(message));\n this._host.requestUpdate('messages');\n }\n\n //#region Public API\n\n /\n Adds a new chat message.\n * Emits 'igcMessageCreated' event which can be canceled to prevent adding.\n * Clears input value and attachments on success.\n * @internal\n /\n public addMessageWithEvent(message: Partial<IgcChatMessage>): void {\n const newMessage = this._createMessage(message);\n\n if (this.emitMessageCreated(newMessage)) {\n this.addMessage(newMessage);\n this.inputValue = '';\n this.inputAttachments = [];\n }\n }\n\n /\n Adds files as attachments to the input.\n * Emits 'igcAttachmentChange' event which can be canceled to prevent adding.\n * @internal\n */\n public attachFilesWithEvent(files: File[]): void {\n const newAttachments: IgcChatMessageAttachment[] = [];\n const fileNames = new Set(\n this.inputAttachments.map((attachment) => attachment.file?.name ?? '')\n );\n\n for (const file of files) {\n if (fileNames.has(file.name)) {\n continue;\n }\n\n const url = URL.createObjectURL(file);\n const attachment: IgcChatMessageAttachment = {\n id: nanoid(),\n url,\n name: file.name,\n file,\n };\n\n if (isImageAttachment(file)) {\n attachment.thumbnail = url;\n }\n newAttachments.push(attachment);\n }\n\n if (this.emitAttachmentsAdded(newAttachments)) {\n this.inputAttachments = [...this.inputAttachments, ...newAttachments];\n }\n }\n\n //#endregion\n}\n"]}

package/components/chat/chat.d.ts CHANGED Viewed

@@ -77,6 +77,7 @@ declare const IgcChatComponent_base: Constructor<import("../common/mixins/event-
  * @slot suggestions-actions - Slot for rendering additional actions.
  * @slot suggestion - Slot for rendering a single suggestion item.
  * @slot empty-state - Slot shown when there are no messages.
+ * @slot typing-indicator - Slot for the "is typing" indicator.
  *
  * @csspart chat-container - Styles the main chat container.
  * @csspart header - Styles the chat header container.
@@ -167,7 +168,7 @@ export default class IgcChatComponent extends IgcChatComponent_base {
     /**
      * The resource strings of the chat.
      */
-    resourceStrings: import("../common/i18n/chat.resources.js").IgcChatResourceStrings;
+    resourceStrings: import("../common/i18n/EN/chat.resources.js").IgcChatResourceStrings;
     constructor();
     private _getRenderer;
     private _handleSuggestionClick;

package/components/chat/chat.js CHANGED Viewed

@@ -14,7 +14,7 @@ import IgcButtonComponent from '../button/button.js';
 import { chatContext, chatUserInputContext } from '../common/context.js';
 import { addSlotController, setSlots } from '../common/controllers/slot.js';
 import { registerComponent } from '../common/definitions/register.js';
-import { IgcChatResourceStringEN } from '../common/i18n/chat.resources.js';
+import { IgcChatResourceStringEN } from '../common/i18n/EN/chat.resources.js';
 import { EventEmitterMixin } from '../common/mixins/event-emitter.js';
 import { isEmpty } from '../common/util.js';
 import IgcIconComponent from '../icon/icon.js';
@@ -27,7 +27,7 @@ import { ChatState } from './chat-state.js';
 import { styles } from './themes/chat.base.css.js';
 import { styles as shared } from './themes/shared/chat.common.css.js';
 import { all } from './themes/themes.js';
-const Slots = setSlots('prefix', 'title', 'actions', 'suggestions-header', 'suggestions', 'suggestions-actions', 'suggestion', 'empty-state');
+const Slots = setSlots('prefix', 'title', 'actions', 'suggestions-header', 'suggestions', 'suggestions-actions', 'suggestion', 'empty-state', 'typing-indicator');
 export default class IgcChatComponent extends EventEmitterMixin(LitElement) {
     static { this.tagName = 'igc-chat'; }
     static { this.styles = [styles, shared]; }
@@ -167,7 +167,9 @@ export default class IgcChatComponent extends EventEmitterMixin(LitElement) {
         ${this._state.options?.isTyping
             ? html `
               <div part="typing-indicator">
-                ${this._getRenderer('typingIndicator')(ctx)}
+                <slot name="typing-indicator"
+                  >${this._getRenderer('typingIndicator')(ctx)}</slot
+                >
               </div>
             `
             : nothing}
@@ -245,27 +247,29 @@ export default class IgcChatComponent extends EventEmitterMixin(LitElement) {
             : nothing}
         </div>
-        <igc-chat-input
-          exportparts="
-              input-container: input-area-container,
-              input-wrapper: input-container,
-              attachments: input-attachments-container,
-              attachment-wrapper: input-attachment-container,
-              attachment-name: input-attachment-name,
-              attachment-icon: input-attachment-icon,
-              text-input,
-              actions-container: input-actions-container,
-              input-actions-start,
-              input-actions-end,
-              file-upload-container,
-              file-upload,
-              send-button-container,
-              send-button"
-        >
-        </igc-chat-input>
-        ${this._state.suggestionsPosition === 'below-input'
+        <div part="input-area-container">
+          <igc-chat-input
+            exportparts="
+                input-container: input-area-container,
+                input-wrapper: input-container,
+                attachments: input-attachments-container,
+                attachment-wrapper: input-attachment-container,
+                attachment-name: input-attachment-name,
+                attachment-icon: input-attachment-icon,
+                text-input,
+                actions-container: input-actions-container,
+                input-actions-start,
+                input-actions-end,
+                file-upload-container,
+                file-upload,
+                send-button-container,
+                send-button"
+          >
+          </igc-chat-input>
+          ${this._state.suggestionsPosition === 'below-input'
             ? suggestions
             : nothing}
+        </div>
       </div>
     `;
     }

package/components/chat/chat.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"chat.js","sourceRoot":"","sources":["../../../src/components/chat/chat.ts"],"names":[],"mappings":"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","sourcesContent":["import { ContextProvider } from '@lit/context';\nimport { html, LitElement, nothing, type PropertyValues } from 'lit';\nimport { property, query } from 'lit/decorators.js';\nimport { cache } from 'lit/directives/cache.js';\nimport { repeat } from 'lit/directives/repeat.js';\nimport { addThemingController } from '../../theming/theming-controller.js';\nimport IgcButtonComponent from '../button/button.js';\nimport { chatContext, chatUserInputContext } from '../common/context.js';\nimport { addSlotController, setSlots } from '../common/controllers/slot.js';\nimport { registerComponent } from '../common/definitions/register.js';\nimport { IgcChatResourceStringEN } from '../common/i18n/chat.resources.js';\nimport type { Constructor } from '../common/mixins/constructor.js';\nimport { EventEmitterMixin } from '../common/mixins/event-emitter.js';\nimport { isEmpty } from '../common/util.js';\nimport IgcIconComponent from '../icon/icon.js';\nimport IgcListComponent from '../list/list.js';\nimport IgcToastComponent from '../toast/toast.js';\nimport IgcTooltipComponent from '../tooltip/tooltip.js';\nimport IgcChatInputComponent from './chat-input.js';\nimport IgcChatMessageComponent from './chat-message.js';\nimport { ChatState } from './chat-state.js';\nimport { styles } from './themes/chat.base.css.js';\nimport { styles as shared } from './themes/shared/chat.common.css.js';\nimport { all } from './themes/themes.js';\nimport type {\n ChatRenderContext,\n ChatTemplateRenderer,\n IgcChatMessage,\n IgcChatMessageAttachment,\n IgcChatMessageReaction,\n IgcChatOptions,\n} from './types.js';\n\ntype DefaultChatRenderers = {\n typingIndicator: ChatTemplateRenderer<ChatRenderContext>;\n suggestionPrefix: ChatTemplateRenderer<ChatRenderContext>;\n};\n\n/*\n Defines the custom events dispatched by the `<igc-chat>` component.\n /\nexport interface IgcChatComponentEventMap {\n /\n Dispatched when a new chat message is created (sent).\n /\n igcMessageCreated: CustomEvent<IgcChatMessage>;\n\n /\n Dispatched when a message is reacted to.\n /\n igcMessageReact: CustomEvent<IgcChatMessageReaction>;\n\n /\n Dispatched when a chat message attachment is clicked.\n /\n igcAttachmentClick: CustomEvent<IgcChatMessageAttachment>;\n\n /\n Dispatched when attachment(s) are added either through drag & drop or through\n * the default file input.\n /\n igcAttachmentAdded: CustomEvent<IgcChatMessageAttachment[]>;\n\n /\n Dispatched when an attachment is removed by the user.\n /\n igcAttachmentRemoved: CustomEvent<IgcChatMessageAttachment>;\n\n /\n Dispatched during an attachment drag operation.\n /\n igcAttachmentDrag: CustomEvent<void>;\n\n /\n Dispatched when an attachment is dropped (e.g., in a drag-and-drop operation).\n /\n igcAttachmentDrop: CustomEvent<void>;\n\n /\n Dispatched when the typing status changes (e.g., user starts or stops typing).\n /\n igcTypingChange: CustomEvent<boolean>;\n\n /\n Dispatched when the chat input field gains focus.\n /\n igcInputFocus: CustomEvent<void>;\n\n /\n Dispatched when the chat input field loses focus.\n /\n igcInputBlur: CustomEvent<void>;\n\n /\n Dispatched when the content of the chat input changes.\n /\n igcInputChange: CustomEvent<string>;\n}\n\nconst Slots = setSlots(\n 'prefix',\n 'title',\n 'actions',\n 'suggestions-header',\n 'suggestions',\n 'suggestions-actions',\n 'suggestion',\n 'empty-state'\n);\n\n/\n A chat UI component for displaying messages, attachments, and input interaction.\n \n @element igc-chat\n \n @fires igcMessageCreated - Dispatched when a new chat message is created (sent).\n * @fires igcMessageReact - Dispatched when a message is reacted to.\n * @fires igcAttachmentClick - Dispatched when a chat message attachment is clicked.\n * @fires igcAttachmentAdded - Dispatched when attachment(s) are added either through drag & drop or through the default file input.\n * @fires igcAttachmentRemoved - Dispatched when an attachment is removed by the user.\n * @fires igcAttachmentDrag - Dispatched during an attachment drag operation.\n * @fires igcAttachmentDrop - Dispatched when an attachment is dropped (e.g., in a drag-and-drop operation).\n * @fires igcTypingChange - Dispatched when the typing status changes (e.g., user starts or stops typing).\n * @fires igcInputFocus - Dispatched when the chat input field gains focus.\n * @fires igcInputBlur - Dispatched when the chat input field loses focus.\n * @fires igcInputChange - Dispatched when the content of the chat input changes.\n \n @slot prefix - Slot for injecting content (e.g., avatar or icon) before the chat title.\n * @slot title - Slot for overriding the chat title content.\n * @slot actions - Slot for injecting header actions (e.g., buttons, menus).\n * @slot suggestions-header - Slot for rendering a custom header for the suggestions list.\n * @slot suggestions - Slot for rendering a custom list of quick reply suggestions.\n * @slot suggestions-actions - Slot for rendering additional actions.\n * @slot suggestion - Slot for rendering a single suggestion item.\n * @slot empty-state - Slot shown when there are no messages.\n \n @csspart chat-container - Styles the main chat container.\n * @csspart header - Styles the chat header container.\n * @csspart prefix - Styles the element before the chat title (e.g., avatar).\n * @csspart title - Styles the chat header title.\n \n @csspart message-area-container - Styles the container holding the messages and (optional) suggestions.\n * @csspart message-list - Styles the message list container.\n * @csspart message-item - Styles each message wrapper.\n * @csspart typing-indicator - Styles the typing indicator container.\n * @csspart typing-dot - Styles individual typing indicator dots.\n \n @csspart suggestions-container - Styles the container holding all suggestions.\n * @csspart suggestions-header - Styles the suggestions header.\n * @csspart suggestion - Styles each suggestion item.\n * @csspart suggestion-prefix - Styles the icon or prefix in a suggestion.\n * @csspart suggestion-title - Styles the text/title of a suggestion.\n \n @csspart empty-state - Styles the empty state container when there are no messages.\n \n @csspart input-area-container - Styles the wrapper around the chat input area.\n * @csspart input-container - Styles the main input container.\n * @csspart input-attachments-container - Styles the container for attachments in the input.\n * @csspart input-attachment-container - Styles a single attachment in the input area.\n * @csspart input-attachment-name - Styles the file name of an attachment.\n * @csspart input-attachment-icon - Styles the icon of an attachment.\n * @csspart text-input - Styles the text input field for typing messages.\n * @csspart input-actions-container - Styles the container for input actions.\n * @csspart input-actions-start - Styles the group of actions at the start of the input after the default file upload.\n * @csspart input-actions-end - Styles the group of actions at the end of the input.\n * @csspart file-upload-container - Styles the container for the file upload input.\n * @csspart file-upload - Styles the file upload input itself.\n * @csspart send-button-container - Styles the container around the send button.\n * @csspart send-button - Styles the send button.\n \n @csspart message-container - Styles the container of a single message.\n * @csspart message-list (forwarded) - Styles the internal list of messages.\n * @csspart message-header - Styles the header of a message (e.g., sender, timestamp).\n * @csspart message-content - Styles the text content of a message.\n * @csspart message-attachments-container - Styles the container for message attachments.\n * @csspart message-attachment - Styles a single message attachment.\n * @csspart message-actions-container - Styles the container holding message actions.\n * @csspart message-sent - Styles messages marked as sent by the current user.\n * @csspart attachment-header - Styles the header of an attachment block.\n * @csspart attachment-content - Styles the content of an attachment block.\n * @csspart attachment-icon - Styles the icon of an attachment.\n * @csspart file-name - Styles the file name shown in an attachment.\n /\nexport default class IgcChatComponent extends EventEmitterMixin<\n IgcChatComponentEventMap,\n Constructor<LitElement>\n>(LitElement) {\n public static readonly tagName = 'igc-chat';\n\n public static styles = [styles, shared];\n\n / blazorSuppress /\n public static register(): void {\n registerComponent(\n IgcChatComponent,\n IgcChatInputComponent,\n IgcChatMessageComponent,\n IgcButtonComponent,\n IgcIconComponent,\n IgcListComponent,\n IgcTooltipComponent,\n IgcToastComponent\n );\n }\n\n private readonly _state = new ChatState(\n this,\n this._updateContext,\n this._updateUserInputContext\n );\n\n private readonly _defaults = Object.freeze<DefaultChatRenderers>({\n typingIndicator: () => this._renderLoadingTemplate(),\n suggestionPrefix: () => this._renderSuggestionPrefix(),\n });\n\n private readonly _slots = addSlotController(this, {\n slots: Slots,\n });\n\n private readonly _context = new ContextProvider(this, {\n context: chatContext,\n initialValue: this._state,\n });\n\n private readonly _userInputContext = new ContextProvider(this, {\n context: chatUserInputContext,\n initialValue: this._state,\n });\n\n @query(IgcChatInputComponent.tagName)\n private readonly _input?: IgcChatInputComponent;\n\n @query('[part=\"typing-indicator\"]')\n private readonly _typingIndicator?: HTMLElement;\n\n @query('[part=\"suggestions-container\"]')\n private readonly _suggestionsContainer?: HTMLElement;\n\n @query('[part=\"message-area-container\"]', true)\n private readonly _scrollContainer!: HTMLElement;\n\n private _updateContext(): void {\n this._context.setValue(this._state, true);\n }\n\n private _updateUserInputContext(): void {\n this._userInputContext.setValue(this._state, true);\n }\n\n /\n The list of chat messages currently displayed.\n * Use this property to set or update the message history.\n /\n @property({ attribute: false })\n public set messages(value: IgcChatMessage[]) {\n this._state.messages = value;\n }\n\n public get messages(): IgcChatMessage[] {\n return this._state.messages;\n }\n\n /\n The chat message currently being composed but not yet sent.\n * Includes the draft text and any attachments.\n /\n @property({ attribute: false })\n public set draftMessage(value: {\n text: string;\n attachments?: IgcChatMessageAttachment[];\n }) {\n if (this._state && value) {\n this._state.inputValue = value.text;\n this._state.inputAttachments = value.attachments \|\| [];\n this.requestUpdate();\n }\n }\n\n public get draftMessage(): {\n text: string;\n attachments?: IgcChatMessageAttachment[];\n } {\n return {\n text: this._state.inputValue,\n attachments: this._state.inputAttachments,\n };\n }\n\n /\n Controls the chat behavior and appearance through a configuration object.\n * Use this to toggle UI options, provide suggestions, templates, etc.\n /\n @property({ attribute: false })\n public set options(value: IgcChatOptions) {\n this._state.options = value;\n }\n\n public get options(): IgcChatOptions \| undefined {\n return this._state.options;\n }\n\n /\n The resource strings of the chat.\n /\n @property({ attribute: false })\n public resourceStrings = IgcChatResourceStringEN;\n\n constructor() {\n super();\n addThemingController(this, all);\n }\n\n private _getRenderer<U extends keyof DefaultChatRenderers>(\n name: U\n ): DefaultChatRenderers[U] {\n return this._state.options?.renderers\n ? (this._state.options.renderers[name] ?? this._defaults[name])\n : this._defaults[name];\n }\n\n private _handleSuggestionClick(text: string): void {\n this._state.addMessageWithEvent({ text });\n this._input?.focusInput();\n }\n\n /\n Scrolls the view to a specific message by id.\n */\n public scrollToMessage(messageId: string): void {\n if (!isEmpty(this.messages)) {\n const message = this.renderRoot.querySelector(`#message-${messageId}`);\n message?.scrollIntoView({ block: 'end', inline: 'end' });\n }\n }\n\n protected override updated(properties: PropertyValues<this>): void {\n if (\n (properties.has('messages') \|\|\n this._typingIndicator \|\|\n this._suggestionsContainer) &&\n !this._state.disableAutoScroll\n ) {\n this._scrollToBottom();\n }\n }\n\n private _scrollToBottom(): void {\n const current = this._scrollContainer.scrollTop;\n\n requestAnimationFrame(() => {\n const scrollHeight = this._scrollContainer.scrollHeight;\n if (current < scrollHeight) {\n this._scrollContainer.scrollBy({\n top: Math.abs(scrollHeight - current),\n });\n }\n });\n }\n\n private _renderHeader() {\n const hasContent =\n this._slots.hasAssignedElements('prefix') \|\|\n this._slots.hasAssignedElements('title') \|\|\n this._slots.hasAssignedElements('actions') \|\|\n this._state.options?.headerText;\n\n return html`\n <div part=\"header\" ?hidden=${!hasContent}>\n <slot\n name=\"prefix\"\n ?hidden=${!this._slots.hasAssignedElements('prefix')}\n ></slot>\n <slot name=\"title\">${this._state.options?.headerText}</slot>\n <slot name=\"actions\"></slot>\n </div>\n `;\n }\n\n private _renderMessages() {\n const ctx = { instance: this };\n\n return html`\n <div part=\"message-list\" tabindex=\"0\">\n ${repeat(\n this._state.messages,\n (message) => message.id,\n (message) => {\n return html`\n <igc-chat-message\n id=${`message-${message.id}`}\n part=\"message-item\"\n .message=${message}\n exportparts=\"\n message-container,\n message-list,\n message-header,\n plain-text: message-content,\n message-attachments: message-attachments-container,\n attachment: message-attachment,\n message-actions: message-actions-container,\n sent: message-sent,\n attachment-header,\n attachment-content,\n attachment-icon,\n file-name,\n \"\n >\n </igc-chat-message>\n `;\n }\n )}\n ${this._state.options?.isTyping\n ? html`\n <div part=\"typing-indicator\">\n ${this._getRenderer('typingIndicator')(ctx)}\n </div>\n `\n : nothing}\n </div>\n `;\n }\n\n private _renderLoadingTemplate() {\n return html`\n <div part=\"typing-dot\"></div>\n <div part=\"typing-dot\"></div>\n <div part=\"typing-dot\"></div>\n <div part=\"typing-dot\"></div>\n `;\n }\n\n private _renderSuggestionPrefix() {\n return html`<igc-icon name=\"auto_suggest\"></igc-icon>`;\n }\n\n private _renderSuggestions() {\n const hasContent = this._slots.hasAssignedElements('suggestions-header');\n const suggestions = this._state.options?.suggestions ?? [];\n const ctx = { instance: this };\n\n return html`\n <div part=\"suggestions-container\">\n <igc-list>\n <igc-list-header part=\"suggestions-header\">\n <span ?hidden=${hasContent}>\n ${this.resourceStrings.suggestionsHeader}\n </span>\n <slot name=\"suggestions-header\"></slot>\n </igc-list-header>\n <slot name=\"suggestions\">\n ${suggestions.map(\n (suggestion) => html`\n <slot name=\"suggestion\">\n <igc-list-item\n part=\"suggestion\"\n @click=${() => this._handleSuggestionClick(suggestion)}\n >\n <span slot=\"start\" part=\"suggestion-prefix\">\n ${this._getRenderer('suggestionPrefix')(ctx)}\n </span>\n <span slot=\"title\" part=\"suggestion-title\"\n >${suggestion}</span\n >\n </igc-list-item>\n </slot>\n `\n )}\n </slot>\n <slot name=\"suggestions-actions\"></slot>\n </igc-list>\n </div>\n `;\n }\n\n private _renderEmptyState() {\n return html`\n <div part=\"empty-state\">\n <slot name=\"empty-state\"></slot>\n </div>\n `;\n }\n\n protected override render() {\n const hasMessages = !isEmpty(this.messages);\n const suggestions = isEmpty(this._state.options?.suggestions ?? [])\n ? nothing\n : this._renderSuggestions();\n\n return html`\n <div part=\"chat-container\">\n ${this._renderHeader()}\n\n <div part=\"message-area-container\">\n ${cache(\n hasMessages \|\| this._state.options?.isTyping\n ? this._renderMessages()\n : this._renderEmptyState()\n )}\n ${this._state.suggestionsPosition === 'below-messages'\n ? suggestions\n : nothing}\n </div>\n\n <igc-chat-input\n exportparts=\"\n input-container: input-area-container,\n input-wrapper: input-container,\n attachments: input-attachments-container,\n attachment-wrapper: input-attachment-container,\n attachment-name: input-attachment-name,\n attachment-icon: input-attachment-icon,\n text-input,\n actions-container: input-actions-container,\n input-actions-start,\n input-actions-end,\n file-upload-container,\n file-upload,\n send-button-container,\n send-button\"\n >\n </igc-chat-input>\n ${this._state.suggestionsPosition === 'below-input'\n ? suggestions\n : nothing}\n </div>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'igc-chat': IgcChatComponent;\n }\n}\n"]}
1	+ {"version":3,"file":"chat.js","sourceRoot":"","sources":["../../../src/components/chat/chat.ts"],"names":[],"mappings":"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","sourcesContent":["import { ContextProvider } from '@lit/context';\nimport { html, LitElement, nothing, type PropertyValues } from 'lit';\nimport { property, query } from 'lit/decorators.js';\nimport { cache } from 'lit/directives/cache.js';\nimport { repeat } from 'lit/directives/repeat.js';\nimport { addThemingController } from '../../theming/theming-controller.js';\nimport IgcButtonComponent from '../button/button.js';\nimport { chatContext, chatUserInputContext } from '../common/context.js';\nimport { addSlotController, setSlots } from '../common/controllers/slot.js';\nimport { registerComponent } from '../common/definitions/register.js';\nimport { IgcChatResourceStringEN } from '../common/i18n/EN/chat.resources.js';\nimport type { Constructor } from '../common/mixins/constructor.js';\nimport { EventEmitterMixin } from '../common/mixins/event-emitter.js';\nimport { isEmpty } from '../common/util.js';\nimport IgcIconComponent from '../icon/icon.js';\nimport IgcListComponent from '../list/list.js';\nimport IgcToastComponent from '../toast/toast.js';\nimport IgcTooltipComponent from '../tooltip/tooltip.js';\nimport IgcChatInputComponent from './chat-input.js';\nimport IgcChatMessageComponent from './chat-message.js';\nimport { ChatState } from './chat-state.js';\nimport { styles } from './themes/chat.base.css.js';\nimport { styles as shared } from './themes/shared/chat.common.css.js';\nimport { all } from './themes/themes.js';\nimport type {\n ChatRenderContext,\n ChatTemplateRenderer,\n IgcChatMessage,\n IgcChatMessageAttachment,\n IgcChatMessageReaction,\n IgcChatOptions,\n} from './types.js';\n\ntype DefaultChatRenderers = {\n typingIndicator: ChatTemplateRenderer<ChatRenderContext>;\n suggestionPrefix: ChatTemplateRenderer<ChatRenderContext>;\n};\n\n/*\n Defines the custom events dispatched by the `<igc-chat>` component.\n /\nexport interface IgcChatComponentEventMap {\n /\n Dispatched when a new chat message is created (sent).\n /\n igcMessageCreated: CustomEvent<IgcChatMessage>;\n\n /\n Dispatched when a message is reacted to.\n /\n igcMessageReact: CustomEvent<IgcChatMessageReaction>;\n\n /\n Dispatched when a chat message attachment is clicked.\n /\n igcAttachmentClick: CustomEvent<IgcChatMessageAttachment>;\n\n /\n Dispatched when attachment(s) are added either through drag & drop or through\n * the default file input.\n /\n igcAttachmentAdded: CustomEvent<IgcChatMessageAttachment[]>;\n\n /\n Dispatched when an attachment is removed by the user.\n /\n igcAttachmentRemoved: CustomEvent<IgcChatMessageAttachment>;\n\n /\n Dispatched during an attachment drag operation.\n /\n igcAttachmentDrag: CustomEvent<void>;\n\n /\n Dispatched when an attachment is dropped (e.g., in a drag-and-drop operation).\n /\n igcAttachmentDrop: CustomEvent<void>;\n\n /\n Dispatched when the typing status changes (e.g., user starts or stops typing).\n /\n igcTypingChange: CustomEvent<boolean>;\n\n /\n Dispatched when the chat input field gains focus.\n /\n igcInputFocus: CustomEvent<void>;\n\n /\n Dispatched when the chat input field loses focus.\n /\n igcInputBlur: CustomEvent<void>;\n\n /\n Dispatched when the content of the chat input changes.\n /\n igcInputChange: CustomEvent<string>;\n}\n\nconst Slots = setSlots(\n 'prefix',\n 'title',\n 'actions',\n 'suggestions-header',\n 'suggestions',\n 'suggestions-actions',\n 'suggestion',\n 'empty-state',\n 'typing-indicator'\n);\n\n/\n A chat UI component for displaying messages, attachments, and input interaction.\n \n @element igc-chat\n \n @fires igcMessageCreated - Dispatched when a new chat message is created (sent).\n * @fires igcMessageReact - Dispatched when a message is reacted to.\n * @fires igcAttachmentClick - Dispatched when a chat message attachment is clicked.\n * @fires igcAttachmentAdded - Dispatched when attachment(s) are added either through drag & drop or through the default file input.\n * @fires igcAttachmentRemoved - Dispatched when an attachment is removed by the user.\n * @fires igcAttachmentDrag - Dispatched during an attachment drag operation.\n * @fires igcAttachmentDrop - Dispatched when an attachment is dropped (e.g., in a drag-and-drop operation).\n * @fires igcTypingChange - Dispatched when the typing status changes (e.g., user starts or stops typing).\n * @fires igcInputFocus - Dispatched when the chat input field gains focus.\n * @fires igcInputBlur - Dispatched when the chat input field loses focus.\n * @fires igcInputChange - Dispatched when the content of the chat input changes.\n \n @slot prefix - Slot for injecting content (e.g., avatar or icon) before the chat title.\n * @slot title - Slot for overriding the chat title content.\n * @slot actions - Slot for injecting header actions (e.g., buttons, menus).\n * @slot suggestions-header - Slot for rendering a custom header for the suggestions list.\n * @slot suggestions - Slot for rendering a custom list of quick reply suggestions.\n * @slot suggestions-actions - Slot for rendering additional actions.\n * @slot suggestion - Slot for rendering a single suggestion item.\n * @slot empty-state - Slot shown when there are no messages.\n * @slot typing-indicator - Slot for the \"is typing\" indicator.\n \n @csspart chat-container - Styles the main chat container.\n * @csspart header - Styles the chat header container.\n * @csspart prefix - Styles the element before the chat title (e.g., avatar).\n * @csspart title - Styles the chat header title.\n \n @csspart message-area-container - Styles the container holding the messages and (optional) suggestions.\n * @csspart message-list - Styles the message list container.\n * @csspart message-item - Styles each message wrapper.\n * @csspart typing-indicator - Styles the typing indicator container.\n * @csspart typing-dot - Styles individual typing indicator dots.\n \n @csspart suggestions-container - Styles the container holding all suggestions.\n * @csspart suggestions-header - Styles the suggestions header.\n * @csspart suggestion - Styles each suggestion item.\n * @csspart suggestion-prefix - Styles the icon or prefix in a suggestion.\n * @csspart suggestion-title - Styles the text/title of a suggestion.\n \n @csspart empty-state - Styles the empty state container when there are no messages.\n \n @csspart input-area-container - Styles the wrapper around the chat input area.\n * @csspart input-container - Styles the main input container.\n * @csspart input-attachments-container - Styles the container for attachments in the input.\n * @csspart input-attachment-container - Styles a single attachment in the input area.\n * @csspart input-attachment-name - Styles the file name of an attachment.\n * @csspart input-attachment-icon - Styles the icon of an attachment.\n * @csspart text-input - Styles the text input field for typing messages.\n * @csspart input-actions-container - Styles the container for input actions.\n * @csspart input-actions-start - Styles the group of actions at the start of the input after the default file upload.\n * @csspart input-actions-end - Styles the group of actions at the end of the input.\n * @csspart file-upload-container - Styles the container for the file upload input.\n * @csspart file-upload - Styles the file upload input itself.\n * @csspart send-button-container - Styles the container around the send button.\n * @csspart send-button - Styles the send button.\n \n @csspart message-container - Styles the container of a single message.\n * @csspart message-list (forwarded) - Styles the internal list of messages.\n * @csspart message-header - Styles the header of a message (e.g., sender, timestamp).\n * @csspart message-content - Styles the text content of a message.\n * @csspart message-attachments-container - Styles the container for message attachments.\n * @csspart message-attachment - Styles a single message attachment.\n * @csspart message-actions-container - Styles the container holding message actions.\n * @csspart message-sent - Styles messages marked as sent by the current user.\n * @csspart attachment-header - Styles the header of an attachment block.\n * @csspart attachment-content - Styles the content of an attachment block.\n * @csspart attachment-icon - Styles the icon of an attachment.\n * @csspart file-name - Styles the file name shown in an attachment.\n /\nexport default class IgcChatComponent extends EventEmitterMixin<\n IgcChatComponentEventMap,\n Constructor<LitElement>\n>(LitElement) {\n public static readonly tagName = 'igc-chat';\n\n public static styles = [styles, shared];\n\n / blazorSuppress /\n public static register(): void {\n registerComponent(\n IgcChatComponent,\n IgcChatInputComponent,\n IgcChatMessageComponent,\n IgcButtonComponent,\n IgcIconComponent,\n IgcListComponent,\n IgcTooltipComponent,\n IgcToastComponent\n );\n }\n\n private readonly _state = new ChatState(\n this,\n this._updateContext,\n this._updateUserInputContext\n );\n\n private readonly _defaults = Object.freeze<DefaultChatRenderers>({\n typingIndicator: () => this._renderLoadingTemplate(),\n suggestionPrefix: () => this._renderSuggestionPrefix(),\n });\n\n private readonly _slots = addSlotController(this, {\n slots: Slots,\n });\n\n private readonly _context = new ContextProvider(this, {\n context: chatContext,\n initialValue: this._state,\n });\n\n private readonly _userInputContext = new ContextProvider(this, {\n context: chatUserInputContext,\n initialValue: this._state,\n });\n\n @query(IgcChatInputComponent.tagName)\n private readonly _input?: IgcChatInputComponent;\n\n @query('[part=\"typing-indicator\"]')\n private readonly _typingIndicator?: HTMLElement;\n\n @query('[part=\"suggestions-container\"]')\n private readonly _suggestionsContainer?: HTMLElement;\n\n @query('[part=\"message-area-container\"]', true)\n private readonly _scrollContainer!: HTMLElement;\n\n private _updateContext(): void {\n this._context.setValue(this._state, true);\n }\n\n private _updateUserInputContext(): void {\n this._userInputContext.setValue(this._state, true);\n }\n\n /\n The list of chat messages currently displayed.\n * Use this property to set or update the message history.\n /\n @property({ attribute: false })\n public set messages(value: IgcChatMessage[]) {\n this._state.messages = value;\n }\n\n public get messages(): IgcChatMessage[] {\n return this._state.messages;\n }\n\n /\n The chat message currently being composed but not yet sent.\n * Includes the draft text and any attachments.\n /\n @property({ attribute: false })\n public set draftMessage(value: {\n text: string;\n attachments?: IgcChatMessageAttachment[];\n }) {\n if (this._state && value) {\n this._state.inputValue = value.text;\n this._state.inputAttachments = value.attachments \|\| [];\n this.requestUpdate();\n }\n }\n\n public get draftMessage(): {\n text: string;\n attachments?: IgcChatMessageAttachment[];\n } {\n return {\n text: this._state.inputValue,\n attachments: this._state.inputAttachments,\n };\n }\n\n /\n Controls the chat behavior and appearance through a configuration object.\n * Use this to toggle UI options, provide suggestions, templates, etc.\n /\n @property({ attribute: false })\n public set options(value: IgcChatOptions) {\n this._state.options = value;\n }\n\n public get options(): IgcChatOptions \| undefined {\n return this._state.options;\n }\n\n /\n The resource strings of the chat.\n /\n @property({ attribute: false })\n public resourceStrings = IgcChatResourceStringEN;\n\n constructor() {\n super();\n addThemingController(this, all);\n }\n\n private _getRenderer<U extends keyof DefaultChatRenderers>(\n name: U\n ): DefaultChatRenderers[U] {\n return this._state.options?.renderers\n ? (this._state.options.renderers[name] ?? this._defaults[name])\n : this._defaults[name];\n }\n\n private _handleSuggestionClick(text: string): void {\n this._state.addMessageWithEvent({ text });\n this._input?.focusInput();\n }\n\n /\n Scrolls the view to a specific message by id.\n */\n public scrollToMessage(messageId: string): void {\n if (!isEmpty(this.messages)) {\n const message = this.renderRoot.querySelector(`#message-${messageId}`);\n message?.scrollIntoView({ block: 'end', inline: 'end' });\n }\n }\n\n protected override updated(properties: PropertyValues<this>): void {\n if (\n (properties.has('messages') \|\|\n this._typingIndicator \|\|\n this._suggestionsContainer) &&\n !this._state.disableAutoScroll\n ) {\n this._scrollToBottom();\n }\n }\n\n private _scrollToBottom(): void {\n const current = this._scrollContainer.scrollTop;\n\n requestAnimationFrame(() => {\n const scrollHeight = this._scrollContainer.scrollHeight;\n if (current < scrollHeight) {\n this._scrollContainer.scrollBy({\n top: Math.abs(scrollHeight - current),\n });\n }\n });\n }\n\n private _renderHeader() {\n const hasContent =\n this._slots.hasAssignedElements('prefix') \|\|\n this._slots.hasAssignedElements('title') \|\|\n this._slots.hasAssignedElements('actions') \|\|\n this._state.options?.headerText;\n\n return html`\n <div part=\"header\" ?hidden=${!hasContent}>\n <slot\n name=\"prefix\"\n ?hidden=${!this._slots.hasAssignedElements('prefix')}\n ></slot>\n <slot name=\"title\">${this._state.options?.headerText}</slot>\n <slot name=\"actions\"></slot>\n </div>\n `;\n }\n\n private _renderMessages() {\n const ctx = { instance: this };\n\n return html`\n <div part=\"message-list\" tabindex=\"0\">\n ${repeat(\n this._state.messages,\n (message) => message.id,\n (message) => {\n return html`\n <igc-chat-message\n id=${`message-${message.id}`}\n part=\"message-item\"\n .message=${message}\n exportparts=\"\n message-container,\n message-list,\n message-header,\n plain-text: message-content,\n message-attachments: message-attachments-container,\n attachment: message-attachment,\n message-actions: message-actions-container,\n sent: message-sent,\n attachment-header,\n attachment-content,\n attachment-icon,\n file-name,\n \"\n >\n </igc-chat-message>\n `;\n }\n )}\n ${this._state.options?.isTyping\n ? html`\n <div part=\"typing-indicator\">\n <slot name=\"typing-indicator\"\n >${this._getRenderer('typingIndicator')(ctx)}</slot\n >\n </div>\n `\n : nothing}\n </div>\n `;\n }\n\n private _renderLoadingTemplate() {\n return html`\n <div part=\"typing-dot\"></div>\n <div part=\"typing-dot\"></div>\n <div part=\"typing-dot\"></div>\n <div part=\"typing-dot\"></div>\n `;\n }\n\n private _renderSuggestionPrefix() {\n return html`<igc-icon name=\"auto_suggest\"></igc-icon>`;\n }\n\n private _renderSuggestions() {\n const hasContent = this._slots.hasAssignedElements('suggestions-header');\n const suggestions = this._state.options?.suggestions ?? [];\n const ctx = { instance: this };\n\n return html`\n <div part=\"suggestions-container\">\n <igc-list>\n <igc-list-header part=\"suggestions-header\">\n <span ?hidden=${hasContent}>\n ${this.resourceStrings.suggestionsHeader}\n </span>\n <slot name=\"suggestions-header\"></slot>\n </igc-list-header>\n <slot name=\"suggestions\">\n ${suggestions.map(\n (suggestion) => html`\n <slot name=\"suggestion\">\n <igc-list-item\n part=\"suggestion\"\n @click=${() => this._handleSuggestionClick(suggestion)}\n >\n <span slot=\"start\" part=\"suggestion-prefix\">\n ${this._getRenderer('suggestionPrefix')(ctx)}\n </span>\n <span slot=\"title\" part=\"suggestion-title\"\n >${suggestion}</span\n >\n </igc-list-item>\n </slot>\n `\n )}\n </slot>\n <slot name=\"suggestions-actions\"></slot>\n </igc-list>\n </div>\n `;\n }\n\n private _renderEmptyState() {\n return html`\n <div part=\"empty-state\">\n <slot name=\"empty-state\"></slot>\n </div>\n `;\n }\n\n protected override render() {\n const hasMessages = !isEmpty(this.messages);\n const suggestions = isEmpty(this._state.options?.suggestions ?? [])\n ? nothing\n : this._renderSuggestions();\n\n return html`\n <div part=\"chat-container\">\n ${this._renderHeader()}\n\n <div part=\"message-area-container\">\n ${cache(\n hasMessages \|\| this._state.options?.isTyping\n ? this._renderMessages()\n : this._renderEmptyState()\n )}\n ${this._state.suggestionsPosition === 'below-messages'\n ? suggestions\n : nothing}\n </div>\n\n <div part=\"input-area-container\">\n <igc-chat-input\n exportparts=\"\n input-container: input-area-container,\n input-wrapper: input-container,\n attachments: input-attachments-container,\n attachment-wrapper: input-attachment-container,\n attachment-name: input-attachment-name,\n attachment-icon: input-attachment-icon,\n text-input,\n actions-container: input-actions-container,\n input-actions-start,\n input-actions-end,\n file-upload-container,\n file-upload,\n send-button-container,\n send-button\"\n >\n </igc-chat-input>\n ${this._state.suggestionsPosition === 'below-input'\n ? suggestions\n : nothing}\n </div>\n </div>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'igc-chat': IgcChatComponent;\n }\n}\n"]}

package/components/chat/themes/chat.base.css.js CHANGED Viewed

@@ -1,3 +1,3 @@
 import { css } from 'lit';
-export const styles = css `:host{--is-large: clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-large, 3), 1);--is-medium: min( clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-medium, 2), 1), clamp(0, var(--ig-size-large, 3) - var(--component-size, 1), 1) );--is-small: clamp(0, var(--ig-size-medium) - var(--component-size, 1), 1);position:relative;box-sizing:border-box;scrollbar-width:var(--ig-scrollbar-size, var(--sb-size));scrollbar-color:var(--ig-scrollbar-thumb-background, var(--sb-thumb-bg-color)) var(--ig-scrollbar-track-background, var(--sb-track-bg-color))}:host ::-webkit-scrollbar{width:var(--ig-scrollbar-size, var(--sb-size));height:var(--ig-scrollbar-size, var(--sb-size));background:var(--ig-scrollbar-track-background, var(--sb-track-bg-color))}:host ::-webkit-scrollbar-thumb{background:var(--ig-scrollbar-thumb-background, var(--sb-thumb-bg-color))}:host *,:host *::before,:host *::after{box-sizing:border-box}:host([hidden]),[hidden]{display:none !important}:host{--igc-chat-height: 100%;width:100%;height:var(--igc-chat-height);overflow:hidden;display:flex;flex-direction:column;container-type:inline-size}:host ::part(text-input){--textarea-height: 3rem}[part=chat-container]{display:grid;grid-template-columns:1fr minmax(20rem, 50.5rem) 1fr;grid-template-rows:auto 1fr auto;height:100%}[part=message-area-container]{display:grid;grid-template-columns:subgrid;overflow:hidden auto;grid-column:1/-1;grid-template-rows:auto 1fr;align-items:start;grid-row:2}[part=message-area-container]:has([part=empty-state]){grid-template-rows:1fr auto}[part=message-list],[part=empty-state],[part=suggestions-container]{grid-column:2/3;display:grid;grid-template-columns:subgrid;width:100%;padding-inline:1.5rem}[part=message-list]{padding-block:1rem 1.5rem;gap:1.5rem}[part=empty-state]{height:100%}[part=header]{display:flex;align-items:center;min-height:3.5rem;padding-inline:1rem;box-shadow:var(--ig-elevation-4);width:100%;z-index:1;grid-column:1/-1;grid-row:1/2}[part=typing-indicator]{display:flex;align-items:center;gap:.125rem}[part=typing-dot]{display:flex;align-items:center;justify-content:center;width:.5rem;aspect-ratio:1}[part=typing-dot]::after{content:"";display:block;animation:blink 1.2s ease-in-out infinite;animation-fill-mode:both;width:.375rem;aspect-ratio:1;border-radius:50%}[part=typing-dot]:nth-child(2)::after{animation-delay:.2s;width:.25rem}[part=typing-dot]:nth-child(3)::after{animation-delay:.4s}[part=typing-dot]:nth-child(4)::after{animation-delay:.6s;width:.125rem}slot[name=title]{font-family:var(--ig-h6-font-family, var(--ig-font-family));font-size:var(--ig-h6-font-size);font-weight:var(--ig-h6-font-weight);font-style:var(--ig-h6-font-style);line-height:var(--ig-h6-line-height);letter-spacing:var(--ig-h6-letter-spacing);text-transform:var(--ig-h6-text-transform);margin-top:var(--ig-h6-margin-top);margin-bottom:var(--ig-h6-margin-bottom);margin:0}slot[name=actions]{display:flex;margin-inline-start:auto;gap:1rem}slot[name=prefix]{display:block;margin-inline-end:2rem}igc-chat-input{grid-row:3}igc-list{--ig-size: 3;padding-block-end:1.5rem;min-height:-moz-fit-content;min-height:fit-content;width:-moz-fit-content;width:fit-content;max-width:36rem}igc-list-item{cursor:pointer}igc-list,igc-list-item:not(:hover),igc-list-header{background:initial}igc-list-item::part(title){display:-webkit-inline-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}@container (max-width: 400px){[part=message-list],[part=empty-state],[part=suggestions-container]{padding-inline:1rem}[part=message-list]{padding-block:.75rem}}@keyframes blink{0%,100%{transform:scale(0.9)}25%,75%{transform:scale(1.05)}50%{transform:scale(1.1)}}`;
+export const styles = css `:host{--is-large: clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-large, 3), 1);--is-medium: min( clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-medium, 2), 1), clamp(0, var(--ig-size-large, 3) - var(--component-size, 1), 1) );--is-small: clamp(0, var(--ig-size-medium) - var(--component-size, 1), 1);position:relative;box-sizing:border-box;scrollbar-width:var(--ig-scrollbar-size, var(--sb-size));scrollbar-color:var(--ig-scrollbar-thumb-background, var(--sb-thumb-bg-color)) var(--ig-scrollbar-track-background, var(--sb-track-bg-color))}:host ::-webkit-scrollbar{width:var(--ig-scrollbar-size, var(--sb-size));height:var(--ig-scrollbar-size, var(--sb-size));background:var(--ig-scrollbar-track-background, var(--sb-track-bg-color))}:host ::-webkit-scrollbar-thumb{background:var(--ig-scrollbar-thumb-background, var(--sb-thumb-bg-color))}:host *,:host *::before,:host *::after{box-sizing:border-box}:host([hidden]),[hidden]{display:none !important}:host{--igc-chat-height: 100%;width:100%;height:var(--igc-chat-height);overflow:hidden;display:flex;flex-direction:column;container-type:inline-size}:host ::part(text-input){--textarea-height: 3rem}[part=chat-container]{display:grid;grid-template-columns:1fr minmax(20rem, 50.5rem) 1fr;grid-template-rows:auto 1fr auto;height:100%}[part=input-area-container],[part=message-area-container]{display:grid;grid-template-columns:subgrid;overflow:hidden auto;grid-column:1/-1;grid-template-rows:auto 1fr;align-items:start}[part=message-area-container]{grid-row:2}[part=message-area-container]:has([part=empty-state]){grid-template-rows:1fr auto}[part=input-area-container]{grid-row:3}[part=message-list],[part=empty-state],[part=suggestions-container]{grid-column:2/3;display:grid;grid-template-columns:subgrid;width:100%;padding-inline:1.5rem}[part=message-list]{padding-block:1rem 1.5rem;gap:1.5rem}[part=empty-state]{height:100%}[part=header]{display:flex;align-items:center;min-height:3.5rem;padding-inline:1rem;box-shadow:var(--ig-elevation-4);width:100%;z-index:1;grid-column:1/-1;grid-row:1/2}[part=typing-indicator]{display:flex;align-items:center;gap:.125rem}[part=typing-dot]{display:flex;align-items:center;justify-content:center;width:.5rem;aspect-ratio:1}[part=typing-dot]::after{content:"";display:block;animation:blink 1.2s ease-in-out infinite;animation-fill-mode:both;width:.375rem;aspect-ratio:1;border-radius:50%}[part=typing-dot]:nth-child(2)::after{animation-delay:.2s;width:.25rem}[part=typing-dot]:nth-child(3)::after{animation-delay:.4s}[part=typing-dot]:nth-child(4)::after{animation-delay:.6s;width:.125rem}slot[name=title]{font-family:var(--ig-h6-font-family, var(--ig-font-family));font-size:var(--ig-h6-font-size);font-weight:var(--ig-h6-font-weight);font-style:var(--ig-h6-font-style);line-height:var(--ig-h6-line-height);letter-spacing:var(--ig-h6-letter-spacing);text-transform:var(--ig-h6-text-transform);margin-top:var(--ig-h6-margin-top);margin-bottom:var(--ig-h6-margin-bottom);margin:0}slot[name=actions]{display:flex;margin-inline-start:auto;gap:1rem}slot[name=prefix]{display:block;margin-inline-end:2rem}igc-list{--ig-size: 3;padding-block-end:1.5rem;min-height:-moz-fit-content;min-height:fit-content;width:-moz-fit-content;width:fit-content;max-width:36rem}igc-list-item{cursor:pointer}igc-list,igc-list-item:not(:hover),igc-list-header{background:initial}igc-list-item::part(title){display:-webkit-inline-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}@container (max-width: 400px){[part=message-list],[part=empty-state],[part=suggestions-container]{padding-inline:1rem}[part=message-list]{padding-block:.75rem}}@keyframes blink{0%,100%{transform:scale(0.9)}25%,75%{transform:scale(1.05)}50%{transform:scale(1.1)}}`;
 //# sourceMappingURL=chat.base.css.js.map

package/components/chat/themes/chat.base.css.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"chat.base.css.js","sourceRoot":"","sources":["../../../../src/components/chat/themes/chat.base.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA,~~wlHAAwlH,~~CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`:host{--is-large: clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-large, 3), 1);--is-medium: min( clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-medium, 2), 1), clamp(0, var(--ig-size-large, 3) - var(--component-size, 1), 1) );--is-small: clamp(0, var(--ig-size-medium) - var(--component-size, 1), 1);position:relative;box-sizing:border-box;scrollbar-width:var(--ig-scrollbar-size, var(--sb-size));scrollbar-color:var(--ig-scrollbar-thumb-background, var(--sb-thumb-bg-color)) var(--ig-scrollbar-track-background, var(--sb-track-bg-color))}:host ::-webkit-scrollbar{width:var(--ig-scrollbar-size, var(--sb-size));height:var(--ig-scrollbar-size, var(--sb-size));background:var(--ig-scrollbar-track-background, var(--sb-track-bg-color))}:host ::-webkit-scrollbar-thumb{background:var(--ig-scrollbar-thumb-background, var(--sb-thumb-bg-color))}:host ,:host ::before,:host *::after{box-sizing:border-box}:host([hidden]),[hidden]{display:none !important}:host{--igc-chat-height: 100%;width:100%;height:var(--igc-chat-height);overflow:hidden;display:flex;flex-direction:column;container-type:inline-size}:host ::part(text-input){--textarea-height: 3rem}[part=chat-container]{display:grid;grid-template-columns:1fr minmax(20rem, 50.5rem) 1fr;grid-template-rows:auto 1fr auto;height:100%}[part=message-area-container]{display:grid;grid-template-columns:subgrid;overflow:hidden auto;grid-column:1/-1;grid-template-rows:auto 1fr;align-items:start;grid-row:2}[part=message-area-container]:has([part=empty-state]){grid-template-rows:1fr auto}[part=message-list],[part=empty-state],[part=suggestions-container]{grid-column:2/3;display:grid;grid-template-columns:subgrid;width:100%;padding-inline:1.5rem}[part=message-list]{padding-block:1rem 1.5rem;gap:1.5rem}[part=empty-state]{height:100%}[part=header]{display:flex;align-items:center;min-height:3.5rem;padding-inline:1rem;box-shadow:var(--ig-elevation-4);width:100%;z-index:1;grid-column:1/-1;grid-row:1/2}[part=typing-indicator]{display:flex;align-items:center;gap:.125rem}[part=typing-dot]{display:flex;align-items:center;justify-content:center;width:.5rem;aspect-ratio:1}[part=typing-dot]::after{content:\"\";display:block;animation:blink 1.2s ease-in-out infinite;animation-fill-mode:both;width:.375rem;aspect-ratio:1;border-radius:50%}[part=typing-dot]:nth-child(2)::after{animation-delay:.2s;width:.25rem}[part=typing-dot]:nth-child(3)::after{animation-delay:.4s}[part=typing-dot]:nth-child(4)::after{animation-delay:.6s;width:.125rem}slot[name=title]{font-family:var(--ig-h6-font-family, var(--ig-font-family));font-size:var(--ig-h6-font-size);font-weight:var(--ig-h6-font-weight);font-style:var(--ig-h6-font-style);line-height:var(--ig-h6-line-height);letter-spacing:var(--ig-h6-letter-spacing);text-transform:var(--ig-h6-text-transform);margin-top:var(--ig-h6-margin-top);margin-bottom:var(--ig-h6-margin-bottom);margin:0}slot[name=actions]{display:flex;margin-inline-start:auto;gap:1rem}slot[name=prefix]{display:block;margin-inline-end:2rem}igc-~~chat-input{grid-row:3}igc-~~list{--ig-size: 3;padding-block-end:1.5rem;min-height:-moz-fit-content;min-height:fit-content;width:-moz-fit-content;width:fit-content;max-width:36rem}igc-list-item{cursor:pointer}igc-list,igc-list-item:not(:hover),igc-list-header{background:initial}igc-list-item::part(title){display:-webkit-inline-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}@container (max-width: 400px){[part=message-list],[part=empty-state],[part=suggestions-container]{padding-inline:1rem}[part=message-list]{padding-block:.75rem}}@keyframes blink{0%,100%{transform:scale(0.9)}25%,75%{transform:scale(1.05)}50%{transform:scale(1.1)}}`;\n"]}
1	+ {"version":3,"file":"chat.base.css.js","sourceRoot":"","sources":["../../../../src/components/chat/themes/chat.base.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA,+pHAA+pH,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`:host{--is-large: clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-large, 3), 1);--is-medium: min( clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-medium, 2), 1), clamp(0, var(--ig-size-large, 3) - var(--component-size, 1), 1) );--is-small: clamp(0, var(--ig-size-medium) - var(--component-size, 1), 1);position:relative;box-sizing:border-box;scrollbar-width:var(--ig-scrollbar-size, var(--sb-size));scrollbar-color:var(--ig-scrollbar-thumb-background, var(--sb-thumb-bg-color)) var(--ig-scrollbar-track-background, var(--sb-track-bg-color))}:host ::-webkit-scrollbar{width:var(--ig-scrollbar-size, var(--sb-size));height:var(--ig-scrollbar-size, var(--sb-size));background:var(--ig-scrollbar-track-background, var(--sb-track-bg-color))}:host ::-webkit-scrollbar-thumb{background:var(--ig-scrollbar-thumb-background, var(--sb-thumb-bg-color))}:host ,:host ::before,:host *::after{box-sizing:border-box}:host([hidden]),[hidden]{display:none !important}:host{--igc-chat-height: 100%;width:100%;height:var(--igc-chat-height);overflow:hidden;display:flex;flex-direction:column;container-type:inline-size}:host ::part(text-input){--textarea-height: 3rem}[part=chat-container]{display:grid;grid-template-columns:1fr minmax(20rem, 50.5rem) 1fr;grid-template-rows:auto 1fr auto;height:100%}[part=input-area-container],[part=message-area-container]{display:grid;grid-template-columns:subgrid;overflow:hidden auto;grid-column:1/-1;grid-template-rows:auto 1fr;align-items:start}[part=message-area-container]{grid-row:2}[part=message-area-container]:has([part=empty-state]){grid-template-rows:1fr auto}[part=input-area-container]{grid-row:3}[part=message-list],[part=empty-state],[part=suggestions-container]{grid-column:2/3;display:grid;grid-template-columns:subgrid;width:100%;padding-inline:1.5rem}[part=message-list]{padding-block:1rem 1.5rem;gap:1.5rem}[part=empty-state]{height:100%}[part=header]{display:flex;align-items:center;min-height:3.5rem;padding-inline:1rem;box-shadow:var(--ig-elevation-4);width:100%;z-index:1;grid-column:1/-1;grid-row:1/2}[part=typing-indicator]{display:flex;align-items:center;gap:.125rem}[part=typing-dot]{display:flex;align-items:center;justify-content:center;width:.5rem;aspect-ratio:1}[part=typing-dot]::after{content:\"\";display:block;animation:blink 1.2s ease-in-out infinite;animation-fill-mode:both;width:.375rem;aspect-ratio:1;border-radius:50%}[part=typing-dot]:nth-child(2)::after{animation-delay:.2s;width:.25rem}[part=typing-dot]:nth-child(3)::after{animation-delay:.4s}[part=typing-dot]:nth-child(4)::after{animation-delay:.6s;width:.125rem}slot[name=title]{font-family:var(--ig-h6-font-family, var(--ig-font-family));font-size:var(--ig-h6-font-size);font-weight:var(--ig-h6-font-weight);font-style:var(--ig-h6-font-style);line-height:var(--ig-h6-line-height);letter-spacing:var(--ig-h6-letter-spacing);text-transform:var(--ig-h6-text-transform);margin-top:var(--ig-h6-margin-top);margin-bottom:var(--ig-h6-margin-bottom);margin:0}slot[name=actions]{display:flex;margin-inline-start:auto;gap:1rem}slot[name=prefix]{display:block;margin-inline-end:2rem}igc-list{--ig-size: 3;padding-block-end:1.5rem;min-height:-moz-fit-content;min-height:fit-content;width:-moz-fit-content;width:fit-content;max-width:36rem}igc-list-item{cursor:pointer}igc-list,igc-list-item:not(:hover),igc-list-header{background:initial}igc-list-item::part(title){display:-webkit-inline-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}@container (max-width: 400px){[part=message-list],[part=empty-state],[part=suggestions-container]{padding-inline:1rem}[part=message-list]{padding-block:.75rem}}@keyframes blink{0%,100%{transform:scale(0.9)}25%,75%{transform:scale(1.05)}50%{transform:scale(1.1)}}`;\n"]}

package/components/chat/types.d.ts CHANGED Viewed

@@ -217,6 +217,8 @@ export interface ChatRenderers {
     messageHeader?: ChatTemplateRenderer<ChatMessageRenderContext>;
     /**
      * Custom renderer for the "is typing" indicator.
+     *
+     * @deprecated since 6.4.0. Use the `typing-indicator` slot.
      */
     typingIndicator?: ChatTemplateRenderer<ChatRenderContext>;
     /**

package/components/chat/types.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/components/chat/types.ts"],"names":[],"mappings":"","sourcesContent":["import type IgcChatComponent from './chat.js';\n\n/*\n Represents a single chat message in the conversation.\n /\nexport interface IgcChatMessage {\n /\n A unique identifier for the message.\n /\n id: string;\n\n /\n The textual content of the message.\n /\n text: string;\n\n /\n The identifier or name of the sender of the message.\n /\n sender: string;\n\n /\n The timestamp indicating when the message was sent.\n /\n timestamp?: string;\n\n /\n Optional list of attachments associated with the message,\n * such as images, files, or links.\n /\n attachments?: IgcChatMessageAttachment[];\n\n /\n Optional list of reactions associated with the message.\n /\n reactions?: string[];\n}\n\n/\n Represents an attachment associated with a chat message.\n /\nexport interface IgcChatMessageAttachment {\n /\n A unique identifier for the attachment.\n /\n id: string;\n\n /\n The display name of the attachment (e.g. file name).\n /\n name: string;\n\n /\n The URL from which the attachment can be downloaded or viewed.\n * Typically used for attachments stored on a server or CDN.\n /\n url?: string;\n\n /\n The actual File object, if the attachment was provided locally (e.g. via upload).\n /\n file?: File;\n\n /\n The MIME type or a custom type identifier for the attachment (e.g. \"image/png\", \"pdf\", \"audio\").\n /\n type?: string;\n\n /\n Optional URL to a thumbnail preview of the attachment (e.g. for images or videos).\n /\n thumbnail?: string;\n}\n\n/\n Configuration options for customizing the behavior and appearance of the chat component.\n /\nexport type IgcChatOptions = {\n /\n The ID of the current user. Used to differentiate between incoming and outgoing messages.\n /\n currentUserId?: string;\n /\n If `true`, prevents the chat from automatically scrolling to the latest message.\n /\n disableAutoScroll?: boolean;\n /\n If `true`, disables the ability to upload and send attachments.\n * Defaults to `false`.\n /\n disableInputAttachments?: boolean;\n /\n Indicates whether the other user is currently typing a message.\n /\n isTyping?: boolean;\n /\n The accepted files that could be attached.\n * Defines the file types as a list of comma-separated values (e.g. \"image/,.pdf\") that the file input should accept.\n /\n acceptedFiles?: string;\n /*\n Optional header text to display at the top of the chat component.\n /\n headerText?: string;\n /\n Optional placeholder text for the chat input area.\n * Provides a hint to the user about what they can type (e.g. \"Type a message...\").\n /\n inputPlaceholder?: string;\n /\n Suggested text snippets or quick replies that can be shown as user-selectable options.\n /\n suggestions?: string[];\n /\n Controls the position of the chat suggestions within the component layout.\n \n - `\"below-input\"`: Renders suggestions below the chat input area.\n * - `\"below-messages\"`: Renders suggestions below the chat messages area.\n \n Default is `\"below-messages\"`.\n /\n suggestionsPosition?: ChatSuggestionsPosition;\n /\n Time in milliseconds to wait before dispatching a stop typing event.\n * Default is `3000`.\n /\n stopTypingDelay?: number;\n\n /\n A boolean flag that, when `true`, enables a quick and dirty workaround for styling\n * components rendered within the Shadow DOM, from custom message renderers, by allowing them\n * to inherit styles from the document's root. This can be useful for developers who prefer not to handle\n * Shadow DOM encapsulation, but it is not the recommended approach.\n \n It is highly advised to use standard Web Component styling methods first, in this order:\n \n 1. CSS Variables and Parts API: Use the exposed `::part` API with custom CSS variables to style\n * your content in your custom renderers.\n \n 2. `link` elements: For larger style sheets, link them directly within the Shadow DOM to maintain\n * encapsulation.\n \n 3. Inline `<style>` tags: Use these for small, self-contained styles within a template.\n \n This property should be used as a last resort as it can lead to style leakage, where\n * global styles unexpectedly bleed into the component, breaking encapsulation and causing\n * unpredictable visual issues.\n \n WARNING: This is a once time shot. Changing this property in runtime won't reflect\n * its value.\n /\n adoptRootStyles?: boolean;\n\n /\n An object containing a collection of custom renderers for different parts of the chat UI.\n /\n renderers?: ChatRenderers;\n};\n\n/\n Represents a user's reaction to a specific chat message.\n /\nexport interface IgcChatMessageReaction {\n /\n The chat message that the reaction is associated with.\n /\n message: IgcChatMessage;\n /\n The string representation of the reaction, such as an emoji or a string;\n /\n reaction: string;\n}\n\n/\n A collection of optional rendering functions that allow for custom UI rendering.\n * Each property is a function that takes a context object and returns a template result.\n /\nexport interface ChatRenderers {\n /\n Custom renderer for a single chat message attachment.\n /\n attachment?: ChatTemplateRenderer<ChatAttachmentRenderContext>;\n /\n Custom renderer for the content of an attachment.\n /\n attachmentContent?: ChatTemplateRenderer<ChatAttachmentRenderContext>;\n /\n Custom renderer for the header of an attachment.\n /\n attachmentHeader?: ChatTemplateRenderer<ChatAttachmentRenderContext>;\n /\n Custom renderer for the file upload button in the input area.\n /\n fileUploadButton?: ChatTemplateRenderer<ChatRenderContext>;\n /\n Custom renderer for the main chat input field.\n /\n input?: ChatTemplateRenderer<ChatInputRenderContext>;\n /\n Custom renderer for the actions container within the input area.\n /\n inputActions?: ChatTemplateRenderer<ChatRenderContext>;\n /\n Custom renderer for the actions at the end of the input area.\n /\n inputActionsEnd?: ChatTemplateRenderer<ChatRenderContext>;\n /\n Custom renderer for the actions at the start of the input area.\n /\n inputActionsStart?: ChatTemplateRenderer<ChatRenderContext>;\n /\n Custom renderer for the attachment previews within the input field.\n /\n inputAttachments?: ChatTemplateRenderer<ChatInputRenderContext>;\n /\n Custom renderer for an entire chat message bubble.\n /\n message?: ChatTemplateRenderer<ChatMessageRenderContext>;\n /\n Custom renderer for message-specific actions (e.g., reply or delete buttons).\n /\n messageActions?: ChatTemplateRenderer<ChatMessageRenderContext>;\n /\n Custom renderer for the attachments associated with a message.\n /\n messageAttachments?: ChatTemplateRenderer<ChatMessageRenderContext>;\n /\n Custom renderer for the main text and content of a message.\n /\n messageContent?: ChatTemplateRenderer<ChatMessageRenderContext>;\n /\n Custom renderer for the header of a message, including sender and timestamp.\n /\n messageHeader?: ChatTemplateRenderer<ChatMessageRenderContext>;\n /\n Custom renderer for the \"is typing\" indicator.\n /\n typingIndicator?: ChatTemplateRenderer<ChatRenderContext>;\n /\n Custom renderer for the message send button.\n /\n sendButton?: ChatTemplateRenderer<ChatRenderContext>;\n /\n Custom renderer for the prefix text shown before suggestions.\n /\n suggestionPrefix?: ChatTemplateRenderer<ChatRenderContext>;\n}\n\n/\n A generic type for a function that serves as a custom renderer.\n * It takes a context object of type T and returns a template result.\n /\nexport type ChatTemplateRenderer<T> = (ctx: T) => unknown;\n\n/\n A string literal type defining the two possible positions for chat suggestions.\n /\nexport type ChatSuggestionsPosition = 'below-input' \| 'below-messages';\n\n/\n The base context object passed to custom renderer functions, containing the chat component instance.\n /\nexport interface ChatRenderContext {\n /\n The instance of the IgcChatComponent.\n /\n instance: IgcChatComponent;\n}\n\n/\n The context object for renderers that deal with the chat input area.\n * It extends the base context with input-specific properties.\n /\nexport interface ChatInputRenderContext extends ChatRenderContext {\n /\n The list of attachments currently in the input area.\n /\n attachments: IgcChatMessageAttachment[];\n /\n The current value of the input field.\n /\n value: string;\n}\n\n/\n The context object for renderers that deal with a specific chat message.\n * It extends the base context with the message data.\n /\nexport interface ChatMessageRenderContext extends ChatRenderContext {\n /\n The specific chat message being rendered.\n /\n message: IgcChatMessage;\n}\n\n/\n The context object for renderers that deal with a specific attachment within a message.\n * It extends the message context with the attachment data.\n /\nexport interface ChatAttachmentRenderContext extends ChatMessageRenderContext {\n /\n The specific attachment being rendered.\n */\n attachment: IgcChatMessageAttachment;\n}\n"]}
1	+ {"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/components/chat/types.ts"],"names":[],"mappings":"","sourcesContent":["import type IgcChatComponent from './chat.js';\n\n/*\n Represents a single chat message in the conversation.\n /\nexport interface IgcChatMessage {\n /\n A unique identifier for the message.\n /\n id: string;\n\n /\n The textual content of the message.\n /\n text: string;\n\n /\n The identifier or name of the sender of the message.\n /\n sender: string;\n\n /\n The timestamp indicating when the message was sent.\n /\n timestamp?: string;\n\n /\n Optional list of attachments associated with the message,\n * such as images, files, or links.\n /\n attachments?: IgcChatMessageAttachment[];\n\n /\n Optional list of reactions associated with the message.\n /\n reactions?: string[];\n}\n\n/\n Represents an attachment associated with a chat message.\n /\nexport interface IgcChatMessageAttachment {\n /\n A unique identifier for the attachment.\n /\n id: string;\n\n /\n The display name of the attachment (e.g. file name).\n /\n name: string;\n\n /\n The URL from which the attachment can be downloaded or viewed.\n * Typically used for attachments stored on a server or CDN.\n /\n url?: string;\n\n /\n The actual File object, if the attachment was provided locally (e.g. via upload).\n /\n file?: File;\n\n /\n The MIME type or a custom type identifier for the attachment (e.g. \"image/png\", \"pdf\", \"audio\").\n /\n type?: string;\n\n /\n Optional URL to a thumbnail preview of the attachment (e.g. for images or videos).\n /\n thumbnail?: string;\n}\n\n/\n Configuration options for customizing the behavior and appearance of the chat component.\n /\nexport type IgcChatOptions = {\n /\n The ID of the current user. Used to differentiate between incoming and outgoing messages.\n /\n currentUserId?: string;\n /\n If `true`, prevents the chat from automatically scrolling to the latest message.\n /\n disableAutoScroll?: boolean;\n /\n If `true`, disables the ability to upload and send attachments.\n * Defaults to `false`.\n /\n disableInputAttachments?: boolean;\n /\n Indicates whether the other user is currently typing a message.\n /\n isTyping?: boolean;\n /\n The accepted files that could be attached.\n * Defines the file types as a list of comma-separated values (e.g. \"image/,.pdf\") that the file input should accept.\n /\n acceptedFiles?: string;\n /*\n Optional header text to display at the top of the chat component.\n /\n headerText?: string;\n /\n Optional placeholder text for the chat input area.\n * Provides a hint to the user about what they can type (e.g. \"Type a message...\").\n /\n inputPlaceholder?: string;\n /\n Suggested text snippets or quick replies that can be shown as user-selectable options.\n /\n suggestions?: string[];\n /\n Controls the position of the chat suggestions within the component layout.\n \n - `\"below-input\"`: Renders suggestions below the chat input area.\n * - `\"below-messages\"`: Renders suggestions below the chat messages area.\n \n Default is `\"below-messages\"`.\n /\n suggestionsPosition?: ChatSuggestionsPosition;\n /\n Time in milliseconds to wait before dispatching a stop typing event.\n * Default is `3000`.\n /\n stopTypingDelay?: number;\n\n /\n A boolean flag that, when `true`, enables a quick and dirty workaround for styling\n * components rendered within the Shadow DOM, from custom message renderers, by allowing them\n * to inherit styles from the document's root. This can be useful for developers who prefer not to handle\n * Shadow DOM encapsulation, but it is not the recommended approach.\n \n It is highly advised to use standard Web Component styling methods first, in this order:\n \n 1. CSS Variables and Parts API: Use the exposed `::part` API with custom CSS variables to style\n * your content in your custom renderers.\n \n 2. `link` elements: For larger style sheets, link them directly within the Shadow DOM to maintain\n * encapsulation.\n \n 3. Inline `<style>` tags: Use these for small, self-contained styles within a template.\n \n This property should be used as a last resort as it can lead to style leakage, where\n * global styles unexpectedly bleed into the component, breaking encapsulation and causing\n * unpredictable visual issues.\n \n WARNING: This is a once time shot. Changing this property in runtime won't reflect\n * its value.\n /\n adoptRootStyles?: boolean;\n\n /\n An object containing a collection of custom renderers for different parts of the chat UI.\n /\n renderers?: ChatRenderers;\n};\n\n/\n Represents a user's reaction to a specific chat message.\n /\nexport interface IgcChatMessageReaction {\n /\n The chat message that the reaction is associated with.\n /\n message: IgcChatMessage;\n /\n The string representation of the reaction, such as an emoji or a string;\n /\n reaction: string;\n}\n\n/\n A collection of optional rendering functions that allow for custom UI rendering.\n * Each property is a function that takes a context object and returns a template result.\n /\nexport interface ChatRenderers {\n /\n Custom renderer for a single chat message attachment.\n /\n attachment?: ChatTemplateRenderer<ChatAttachmentRenderContext>;\n /\n Custom renderer for the content of an attachment.\n /\n attachmentContent?: ChatTemplateRenderer<ChatAttachmentRenderContext>;\n /\n Custom renderer for the header of an attachment.\n /\n attachmentHeader?: ChatTemplateRenderer<ChatAttachmentRenderContext>;\n /\n Custom renderer for the file upload button in the input area.\n /\n fileUploadButton?: ChatTemplateRenderer<ChatRenderContext>;\n /\n Custom renderer for the main chat input field.\n /\n input?: ChatTemplateRenderer<ChatInputRenderContext>;\n /\n Custom renderer for the actions container within the input area.\n /\n inputActions?: ChatTemplateRenderer<ChatRenderContext>;\n /\n Custom renderer for the actions at the end of the input area.\n /\n inputActionsEnd?: ChatTemplateRenderer<ChatRenderContext>;\n /\n Custom renderer for the actions at the start of the input area.\n /\n inputActionsStart?: ChatTemplateRenderer<ChatRenderContext>;\n /\n Custom renderer for the attachment previews within the input field.\n /\n inputAttachments?: ChatTemplateRenderer<ChatInputRenderContext>;\n /\n Custom renderer for an entire chat message bubble.\n /\n message?: ChatTemplateRenderer<ChatMessageRenderContext>;\n /\n Custom renderer for message-specific actions (e.g., reply or delete buttons).\n /\n messageActions?: ChatTemplateRenderer<ChatMessageRenderContext>;\n /\n Custom renderer for the attachments associated with a message.\n /\n messageAttachments?: ChatTemplateRenderer<ChatMessageRenderContext>;\n /\n Custom renderer for the main text and content of a message.\n /\n messageContent?: ChatTemplateRenderer<ChatMessageRenderContext>;\n /\n Custom renderer for the header of a message, including sender and timestamp.\n /\n messageHeader?: ChatTemplateRenderer<ChatMessageRenderContext>;\n /\n Custom renderer for the \"is typing\" indicator.\n \n @deprecated since 6.4.0. Use the `typing-indicator` slot.\n /\n typingIndicator?: ChatTemplateRenderer<ChatRenderContext>;\n /\n Custom renderer for the message send button.\n /\n sendButton?: ChatTemplateRenderer<ChatRenderContext>;\n /\n Custom renderer for the prefix text shown before suggestions.\n /\n suggestionPrefix?: ChatTemplateRenderer<ChatRenderContext>;\n}\n\n/\n A generic type for a function that serves as a custom renderer.\n * It takes a context object of type T and returns a template result.\n /\nexport type ChatTemplateRenderer<T> = (ctx: T) => unknown;\n\n/\n A string literal type defining the two possible positions for chat suggestions.\n /\nexport type ChatSuggestionsPosition = 'below-input' \| 'below-messages';\n\n/\n The base context object passed to custom renderer functions, containing the chat component instance.\n /\nexport interface ChatRenderContext {\n /\n The instance of the IgcChatComponent.\n /\n instance: IgcChatComponent;\n}\n\n/\n The context object for renderers that deal with the chat input area.\n * It extends the base context with input-specific properties.\n /\nexport interface ChatInputRenderContext extends ChatRenderContext {\n /\n The list of attachments currently in the input area.\n /\n attachments: IgcChatMessageAttachment[];\n /\n The current value of the input field.\n /\n value: string;\n}\n\n/\n The context object for renderers that deal with a specific chat message.\n * It extends the base context with the message data.\n /\nexport interface ChatMessageRenderContext extends ChatRenderContext {\n /\n The specific chat message being rendered.\n /\n message: IgcChatMessage;\n}\n\n/\n The context object for renderers that deal with a specific attachment within a message.\n * It extends the message context with the attachment data.\n /\nexport interface ChatAttachmentRenderContext extends ChatMessageRenderContext {\n /\n The specific attachment being rendered.\n */\n attachment: IgcChatMessageAttachment;\n}\n"]}

package/components/chat/utils.d.ts CHANGED Viewed

@@ -1,4 +1,4 @@
-import type IgcChatMessageComponent from './chat-message.js';
+import { type LitElement } from 'lit';
 import type { IgcChatMessageAttachment } from './types.js';
 export type ChatAcceptedFileTypes = {
     extensions: Set<string>;
@@ -13,4 +13,4 @@ export declare function getIconName(fileType?: string): "attach_document" | "att
 export declare function createAttachmentURL(attachment: IgcChatMessageAttachment): string;
 export declare function getFileExtension(name: string): string;
 export declare function isImageAttachment(attachment: IgcChatMessageAttachment | File): boolean;
-export declare function chatMessageAdoptPageStyles(message: IgcChatMessageComponent): void;
+export declare function adoptPageStyles(element: LitElement): void;

package/components/chat/utils.js CHANGED Viewed

@@ -64,19 +64,22 @@ export function isImageAttachment(attachment) {
     }
     return Boolean(attachment.type === 'image' || attachment.file?.type.startsWith('image/'));
 }
-export function chatMessageAdoptPageStyles(message) {
+export function adoptPageStyles(element) {
     const sheets = [];
     for (const sheet of document.styleSheets) {
         try {
             const constructed = new CSSStyleSheet();
             for (const rule of sheet.cssRules) {
+                if (rule.cssText.startsWith('@import')) {
+                    continue;
+                }
                 constructed.insertRule(rule.cssText);
             }
             sheets.push(constructed);
         }
         catch { }
     }
-    const ctor = message.constructor;
-    adoptStyles(message.shadowRoot, [...ctor.elementStyles, ...sheets]);
+    const ctor = element.constructor;
+    adoptStyles(element.shadowRoot, [...ctor.elementStyles, ...sheets]);
 }
 //# sourceMappingURL=utils.js.map