igniteui-webcomponents 7.2.1 → 7.2.3
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.
- package/CHANGELOG.md +21 -0
- package/components/button/button-base.js.map +1 -1
- package/components/button/themes/button/dark/button.bootstrap.css.js +1 -1
- package/components/button/themes/button/dark/button.bootstrap.css.js.map +1 -1
- package/components/button/themes/button/dark/button.fluent.css.js +1 -1
- package/components/button/themes/button/dark/button.fluent.css.js.map +1 -1
- package/components/button/themes/button/dark/button.indigo.css.js +1 -1
- package/components/button/themes/button/dark/button.indigo.css.js.map +1 -1
- package/components/button/themes/button/dark/button.material.css.js +1 -1
- package/components/button/themes/button/dark/button.material.css.js.map +1 -1
- package/components/button/themes/button/light/button.bootstrap.css.js +1 -1
- package/components/button/themes/button/light/button.bootstrap.css.js.map +1 -1
- package/components/button/themes/button/light/button.fluent.css.js +1 -1
- package/components/button/themes/button/light/button.fluent.css.js.map +1 -1
- package/components/button/themes/button/light/button.indigo.css.js +1 -1
- package/components/button/themes/button/light/button.indigo.css.js.map +1 -1
- package/components/button/themes/button/light/button.material.css.js +1 -1
- package/components/button/themes/button/light/button.material.css.js.map +1 -1
- package/components/button/themes/button/light/button.shared.css.js +1 -1
- package/components/button/themes/button/light/button.shared.css.js.map +1 -1
- package/components/button-group/themes/dark/button-group.bootstrap.css.js +1 -1
- package/components/button-group/themes/dark/button-group.bootstrap.css.js.map +1 -1
- package/components/button-group/themes/light/button-group.bootstrap.css.js +1 -1
- package/components/button-group/themes/light/button-group.bootstrap.css.js.map +1 -1
- package/components/chat/chat-input.js +1 -1
- package/components/chat/chat-input.js.map +1 -1
- package/components/chat/chat-state.d.ts +2 -1
- package/components/chat/chat-state.js +2 -2
- package/components/chat/chat-state.js.map +1 -1
- package/components/chat/chat.d.ts +3 -9
- package/components/chat/chat.js.map +1 -1
- package/components/chat/message-attachments.d.ts +1 -0
- package/components/chat/message-attachments.js.map +1 -1
- package/components/chat/types.d.ts +16 -2
- package/components/chat/types.js.map +1 -1
- package/components/combo/combo.d.ts +0 -4
- package/components/combo/combo.js.map +1 -1
- package/components/combo/themes/dark/combo.indigo.css.js +1 -1
- package/components/combo/themes/dark/combo.indigo.css.js.map +1 -1
- package/components/combo/types.d.ts +4 -0
- package/components/combo/types.js.map +1 -1
- package/components/common/context.d.ts +2 -0
- package/components/common/context.js.map +1 -1
- package/components/common/controllers/drag.d.ts +10 -0
- package/components/common/controllers/drag.js +11 -0
- package/components/common/controllers/drag.js.map +1 -1
- package/components/common/mixins/alert.d.ts +2 -2
- package/components/common/mixins/alert.js.map +1 -1
- package/components/common/mixins/combo-box.js.map +1 -1
- package/components/date-range-picker/date-range-input.d.ts +9 -3
- package/components/date-range-picker/date-range-input.js +4 -7
- package/components/date-range-picker/date-range-input.js.map +1 -1
- package/components/date-range-picker/date-range-mask-parser.d.ts +11 -2
- package/components/date-range-picker/date-range-mask-parser.js.map +1 -1
- package/components/date-time-input/date-part.js.map +1 -1
- package/components/date-time-input/date-time-input.base.d.ts +1 -6
- package/components/date-time-input/date-time-input.base.js +1 -2
- package/components/date-time-input/date-time-input.base.js.map +1 -1
- package/components/date-time-input/date-time-input.d.ts +9 -3
- package/components/date-time-input/date-time-input.js +3 -2
- package/components/date-time-input/date-time-input.js.map +1 -1
- package/components/dialog/themes/dark/dialog.indigo.css.js +1 -1
- package/components/dialog/themes/dark/dialog.indigo.css.js.map +1 -1
- package/components/dropdown/themes/dark/dropdown.indigo.css.js +1 -1
- package/components/dropdown/themes/dark/dropdown.indigo.css.js.map +1 -1
- package/components/expansion-panel/themes/expansion-panel.base.css.js +1 -1
- package/components/expansion-panel/themes/expansion-panel.base.css.js.map +1 -1
- package/components/highlight/service.d.ts +2 -2
- package/components/highlight/service.js.map +1 -1
- package/components/input/input-base.js.map +1 -1
- package/components/mask-input/mask-input.js.map +1 -1
- package/components/popover/popover.d.ts +10 -1
- package/components/popover/popover.js +31 -14
- package/components/popover/popover.js.map +1 -1
- package/components/popover/themes/light/popover.base.css.js +1 -1
- package/components/popover/themes/light/popover.base.css.js.map +1 -1
- package/components/select/themes/dark/select.indigo.css.js +1 -1
- package/components/select/themes/dark/select.indigo.css.js.map +1 -1
- package/components/snackbar/themes/dark/snackbar.indigo.css.js +1 -1
- package/components/snackbar/themes/dark/snackbar.indigo.css.js.map +1 -1
- package/components/splitter/types.js.map +1 -1
- package/components/tile-manager/tile-manager.d.ts +11 -0
- package/components/tile-manager/tile-manager.js +15 -0
- package/components/tile-manager/tile-manager.js.map +1 -1
- package/components/tile-manager/tile.js +1 -1
- package/components/tile-manager/tile.js.map +1 -1
- package/components/toast/themes/dark/toast.indigo.css.js +1 -1
- package/components/toast/themes/dark/toast.indigo.css.js.map +1 -1
- package/components/tooltip/themes/dark/tooltip.indigo.css.js +1 -1
- package/components/tooltip/themes/dark/tooltip.indigo.css.js.map +1 -1
- package/components/tree/tree.js.map +1 -1
- package/components/types.d.ts +1 -0
- package/components/types.js.map +1 -1
- package/custom-elements.json +310 -582
- package/igniteui-webcomponents.css-data.json +1 -1
- package/igniteui-webcomponents.html-data.json +1 -1
- package/index.d.ts +7 -5
- package/index.js +3 -2
- package/index.js.map +1 -1
- package/package.json +1 -1
- package/skills/igniteui-wc-choose-components/SKILL.md +122 -160
- package/skills/igniteui-wc-customize-component-theme/SKILL.md +83 -311
- package/skills/igniteui-wc-customize-component-theme/references/mcp-setup.md +69 -0
- package/skills/igniteui-wc-generate-from-image-design/SKILL.md +4 -1
- package/skills/igniteui-wc-generate-from-image-design/references/component-mapping.md +60 -61
- package/skills/igniteui-wc-generate-from-image-design/references/gotchas.md +15 -11
- package/skills/igniteui-wc-migrate-grid-lite-to-premium/SKILL.md +446 -0
- package/skills/igniteui-wc-optimize-bundle-size/SKILL.md +23 -274
- package/themes/dark/bootstrap.css +1 -1
- package/themes/dark/fluent.css +1 -1
- package/themes/dark/indigo.css +1 -1
- package/themes/dark/material.css +1 -1
- package/themes/light/bootstrap.css +1 -1
- package/themes/light/fluent.css +1 -1
- package/themes/light/indigo.css +1 -1
- package/themes/light/material.css +1 -1
- package/web-types.json +2 -2
|
@@ -2,7 +2,7 @@ import { type IChatResourceStrings } from 'igniteui-i18n-core';
|
|
|
2
2
|
import { LitElement, type PropertyValues } from 'lit';
|
|
3
3
|
import type { IgcChatResourceStrings } from '../common/i18n/EN/chat.resources.js';
|
|
4
4
|
import type { Constructor } from '../common/mixins/constructor.js';
|
|
5
|
-
import type { IgcChatMessage, IgcChatMessageAttachment, IgcChatMessageReaction, IgcChatOptions } from './types.js';
|
|
5
|
+
import type { IgcChatDraftMessage, IgcChatMessage, IgcChatMessageAttachment, IgcChatMessageReaction, IgcChatOptions } from './types.js';
|
|
6
6
|
/**
|
|
7
7
|
* Defines the custom events dispatched by the `<igc-chat>` component.
|
|
8
8
|
*/
|
|
@@ -154,14 +154,8 @@ export default class IgcChatComponent extends IgcChatComponent_base {
|
|
|
154
154
|
* The chat message currently being composed but not yet sent.
|
|
155
155
|
* Includes the draft text and any attachments.
|
|
156
156
|
*/
|
|
157
|
-
set draftMessage(value:
|
|
158
|
-
|
|
159
|
-
attachments?: IgcChatMessageAttachment[];
|
|
160
|
-
});
|
|
161
|
-
get draftMessage(): {
|
|
162
|
-
text: string;
|
|
163
|
-
attachments?: IgcChatMessageAttachment[];
|
|
164
|
-
};
|
|
157
|
+
set draftMessage(value: IgcChatDraftMessage);
|
|
158
|
+
get draftMessage(): IgcChatDraftMessage;
|
|
165
159
|
/**
|
|
166
160
|
* Controls the chat behavior and appearance through a configuration object.
|
|
167
161
|
* Use this to toggle UI options, provide suggestions, templates, etc.
|
|
@@ -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 {\n ChatResourceStringsEN,\n type IChatResourceStrings,\n} from 'igniteui-i18n-core';\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 type { IgcChatResourceStrings } from '../common/i18n/EN/chat.resources.js';\nimport { addI18nController } from '../common/i18n/i18n-controller.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 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-area - Styles the main text input area.\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 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 private readonly _i18nController = addI18nController<\n IgcChatResourceStrings | IChatResourceStrings\n >(this, {\n defaultEN: ChatResourceStringsEN,\n resourceMapName: 'chat',\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 set resourceStrings(\n value: IgcChatResourceStrings | IChatResourceStrings\n ) {\n this._i18nController.resourceStrings = value;\n }\n\n public get resourceStrings(): IgcChatResourceStrings & IChatResourceStrings {\n return this._i18nController.resourceStrings;\n }\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 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._renderLoadingTemplate()}</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.chat_suggestions_header}\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,\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"]}
|
|
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 {\n ChatResourceStringsEN,\n type IChatResourceStrings,\n} from 'igniteui-i18n-core';\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 type { IgcChatResourceStrings } from '../common/i18n/EN/chat.resources.js';\nimport { addI18nController } from '../common/i18n/i18n-controller.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 IgcChatDraftMessage,\n IgcChatMessage,\n IgcChatMessageAttachment,\n IgcChatMessageReaction,\n IgcChatOptions,\n} from './types.js';\n\ntype DefaultChatRenderers = {\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 /* blazorSuppress */\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 /* blazorSuppress */\n /**\n * Dispatched when an attachment is removed by the user.\n */\n igcAttachmentRemoved: CustomEvent<IgcChatMessageAttachment>;\n\n /* blazorSuppress */\n /**\n * Dispatched during an attachment drag operation.\n */\n igcAttachmentDrag: CustomEvent<void>;\n\n /* blazorSuppress */\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/* blazorIndirectRender */\n/* blazorSupportsVisualChildren */\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-area - Styles the main text input area.\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 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 private readonly _i18nController = addI18nController<\n IgcChatResourceStrings | IChatResourceStrings\n >(this, {\n defaultEN: ChatResourceStringsEN,\n resourceMapName: 'chat',\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: IgcChatDraftMessage) {\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(): IgcChatDraftMessage {\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 /* blazorSuppress */\n /**\n * The resource strings of the chat.\n */\n @property({ attribute: false })\n public set resourceStrings(\n value: IgcChatResourceStrings | IChatResourceStrings\n ) {\n this._i18nController.resourceStrings = value;\n }\n\n /* blazorSuppress */\n public get resourceStrings(): IgcChatResourceStrings & IChatResourceStrings {\n return this._i18nController.resourceStrings;\n }\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 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._renderLoadingTemplate()}</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.chat_suggestions_header}\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,\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"]}
|
|
@@ -18,6 +18,7 @@ import type { IgcChatMessage } from './types.js';
|
|
|
18
18
|
* @csspart image-attachment - Part for the image element inside an image attachment.
|
|
19
19
|
*
|
|
20
20
|
* @fires igcAttachmentClick - Fired when an attachment header is toggled (clicked).
|
|
21
|
+
* @hidden @internal
|
|
21
22
|
*/
|
|
22
23
|
export default class IgcMessageAttachmentsComponent extends LitElement {
|
|
23
24
|
static readonly tagName = "igc-message-attachments";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"message-attachments.js","sourceRoot":"","sources":["../../../src/components/chat/message-attachments.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 { repeat } from 'lit/directives/repeat.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 { trimmedHtml } from '../common/util.js';\nimport IgcIconComponent from '../icon/icon.js';\nimport type { ChatState } from './chat-state.js';\nimport { all } from './themes/attachments.js';\nimport { styles } from './themes/message-attachments.base.css.js';\nimport { styles as shared } from './themes/shared/message-attachments/message-attachments.common.css.js';\nimport type {\n ChatAttachmentRenderContext,\n ChatTemplateRenderer,\n IgcChatMessage,\n IgcChatMessageAttachment,\n} from './types.js';\nimport {\n ChatFileTypeIcons,\n createAttachmentURL,\n getFileExtension,\n isImageAttachment,\n} from './utils.js';\n\ntype DefaultAttachmentRenderers = {\n attachment: ChatTemplateRenderer<ChatAttachmentRenderContext>;\n attachmentHeader: ChatTemplateRenderer<ChatAttachmentRenderContext>;\n attachmentContent: ChatTemplateRenderer<ChatAttachmentRenderContext>;\n};\n\n/**\n * A component that renders message attachments within a chat.\n *\n * Displays attachments such as images or files, supporting custom templates\n * and default rendering using expansion panels.\n *\n * @element igc-message-attachments\n *\n * @csspart attachments-container - Container wrapping all attachments.\n * @csspart attachment - Wrapper for a single attachment.\n * @csspart attachment-header - Wrapper for a single attachment header.\n * @csspart attachments-content - Part representing the attachment preview.\n * @csspart attachment-icon - Icon part representing the attachment type.\n * @csspart file-name - Part representing the attachment's file name.\n * @csspart actions - Container for header action buttons.\n * @csspart image-attachment - Part for the image element inside an image attachment.\n *\n * @fires igcAttachmentClick - Fired when an attachment header is toggled (clicked).\n */\nexport default class IgcMessageAttachmentsComponent extends LitElement {\n public static readonly tagName = 'igc-message-attachments';\n public static override styles = [styles, shared];\n\n /* blazorSuppress */\n public static register(): void {\n registerComponent(\n IgcMessageAttachmentsComponent,\n IgcIconComponent,\n IgcIconButtonComponent\n );\n }\n\n private readonly _defaults: Readonly<DefaultAttachmentRenderers> =\n Object.freeze<DefaultAttachmentRenderers>({\n attachment: (ctx) => this._renderAttachment(ctx.attachment),\n attachmentHeader: (ctx) => this.renderHeader(ctx.attachment),\n attachmentContent: (ctx) => this._renderContent(ctx.attachment),\n });\n\n @consume({ context: chatContext, subscribe: true })\n private readonly _state!: ChatState;\n\n /**\n * The array of attachments to render.\n */\n @property({ attribute: false })\n public message?: IgcChatMessage;\n\n constructor() {\n super();\n addThemingController(this, all);\n }\n\n private _getRenderer(name: keyof DefaultAttachmentRenderers) {\n return this._state.options?.renderers\n ? (this._state.options.renderers[name] ?? this._defaults[name])\n : this._defaults[name];\n }\n\n private _handleHeaderClick = (attachment: IgcChatMessageAttachment) => {\n this._state.emitEvent('igcAttachmentClick', { detail: attachment });\n };\n /**\n * Default attachment header template used when no custom template is provided.\n * Renders the attachment icon and name.\n * @param attachment The message attachment to render\n * @returns TemplateResult containing the rendered attachment header\n */\n private renderHeader(attachment: IgcChatMessageAttachment) {\n const isCurrentUser = this._state.isCurrentUserMessage(this.message);\n const iconName = isImageAttachment(attachment)\n ? 'attach_image'\n : 'document_thumbnail';\n\n return html`\n ${!isCurrentUser\n ? html`<igc-icon name=${iconName} part=\"attachment-icon\"></igc-icon>`\n : nothing}\n <span part=\"file-name\">${attachment.name}</span>\n `;\n }\n\n /**\n * Default attachment content template used when no custom template is provided.\n * Renders the attachment content based on its type.\n * @param attachment The message attachment to render\n * @returns TemplateResult containing the rendered attachment content\n */\n private _renderContent(attachment: IgcChatMessageAttachment) {\n const iconName =\n ChatFileTypeIcons.get(getFileExtension(attachment.name)) ??\n ChatFileTypeIcons.get('default')!;\n\n return isImageAttachment(attachment)\n ? html`\n <img\n part=\"image-attachment-icon\"\n src=${createAttachmentURL(attachment)}\n alt=${attachment.name}\n />\n `\n : html`<igc-icon\n part=\"file-attachment-icon\"\n name=${iconName}\n ></igc-icon>`;\n }\n\n private _renderAttachment(attachment: IgcChatMessageAttachment) {\n const isCurrentUser = this._state.isCurrentUserMessage(this.message);\n\n const contentParts = {\n 'attachment-content': true,\n sent: isCurrentUser,\n };\n const headerParts = {\n 'attachment-header': true,\n sent: isCurrentUser,\n };\n\n const ctx: ChatAttachmentRenderContext = {\n attachment,\n message: this.message!,\n instance: this._state.host,\n };\n\n const content = html`<div part=${partMap(contentParts)}>\n ${until(this._getRenderer('attachmentContent')(ctx))}\n </div>`;\n const header = html` <div\n part=${partMap(headerParts)}\n role=\"button\"\n @click=${() => this._handleHeaderClick(attachment)}\n >\n <div part=\"details\">\n ${until(this._getRenderer('attachmentHeader')(ctx))}\n </div>\n </div>`;\n\n return html`\n ${isCurrentUser ? content : nothing} ${header}\n ${!isCurrentUser ? content : nothing}\n `;\n }\n\n protected override render() {\n const attachments = this.message?.attachments ?? [];\n const isCurrentUser = this._state.isCurrentUserMessage(this.message);\n const attachmentParts = {\n attachment: true,\n sent: isCurrentUser,\n };\n return html`${cache(\n this.message\n ? html`\n <div part=\"attachments-container\">\n ${repeat(\n attachments,\n (attachment) => attachment.id,\n (attachment) => trimmedHtml`\n <div part=\"${partMap(attachmentParts)}\">\n ${until(\n this._getRenderer('attachment')({\n attachment,\n message: this.message!,\n instance: this._state.host,\n })\n )}\n </div>\n `\n )}\n </div>\n `\n : nothing\n )}`;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'igc-message-attachments': IgcMessageAttachmentsComponent;\n }\n}\n"]}
|
|
1
|
+
{"version":3,"file":"message-attachments.js","sourceRoot":"","sources":["../../../src/components/chat/message-attachments.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 { repeat } from 'lit/directives/repeat.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 { trimmedHtml } from '../common/util.js';\nimport IgcIconComponent from '../icon/icon.js';\nimport type { ChatState } from './chat-state.js';\nimport { all } from './themes/attachments.js';\nimport { styles } from './themes/message-attachments.base.css.js';\nimport { styles as shared } from './themes/shared/message-attachments/message-attachments.common.css.js';\nimport type {\n ChatAttachmentRenderContext,\n ChatTemplateRenderer,\n IgcChatMessage,\n IgcChatMessageAttachment,\n} from './types.js';\nimport {\n ChatFileTypeIcons,\n createAttachmentURL,\n getFileExtension,\n isImageAttachment,\n} from './utils.js';\n\ntype DefaultAttachmentRenderers = {\n attachment: ChatTemplateRenderer<ChatAttachmentRenderContext>;\n attachmentHeader: ChatTemplateRenderer<ChatAttachmentRenderContext>;\n attachmentContent: ChatTemplateRenderer<ChatAttachmentRenderContext>;\n};\n\n/**\n * A component that renders message attachments within a chat.\n *\n * Displays attachments such as images or files, supporting custom templates\n * and default rendering using expansion panels.\n *\n * @element igc-message-attachments\n *\n * @csspart attachments-container - Container wrapping all attachments.\n * @csspart attachment - Wrapper for a single attachment.\n * @csspart attachment-header - Wrapper for a single attachment header.\n * @csspart attachments-content - Part representing the attachment preview.\n * @csspart attachment-icon - Icon part representing the attachment type.\n * @csspart file-name - Part representing the attachment's file name.\n * @csspart actions - Container for header action buttons.\n * @csspart image-attachment - Part for the image element inside an image attachment.\n *\n * @fires igcAttachmentClick - Fired when an attachment header is toggled (clicked).\n * @hidden @internal\n */\nexport default class IgcMessageAttachmentsComponent extends LitElement {\n public static readonly tagName = 'igc-message-attachments';\n public static override styles = [styles, shared];\n\n /* blazorSuppress */\n public static register(): void {\n registerComponent(\n IgcMessageAttachmentsComponent,\n IgcIconComponent,\n IgcIconButtonComponent\n );\n }\n\n private readonly _defaults: Readonly<DefaultAttachmentRenderers> =\n Object.freeze<DefaultAttachmentRenderers>({\n attachment: (ctx) => this._renderAttachment(ctx.attachment),\n attachmentHeader: (ctx) => this.renderHeader(ctx.attachment),\n attachmentContent: (ctx) => this._renderContent(ctx.attachment),\n });\n\n @consume({ context: chatContext, subscribe: true })\n private readonly _state!: ChatState;\n\n /**\n * The array of attachments to render.\n */\n @property({ attribute: false })\n public message?: IgcChatMessage;\n\n constructor() {\n super();\n addThemingController(this, all);\n }\n\n private _getRenderer(name: keyof DefaultAttachmentRenderers) {\n return this._state.options?.renderers\n ? (this._state.options.renderers[name] ?? this._defaults[name])\n : this._defaults[name];\n }\n\n private _handleHeaderClick = (attachment: IgcChatMessageAttachment) => {\n this._state.emitEvent('igcAttachmentClick', { detail: attachment });\n };\n /**\n * Default attachment header template used when no custom template is provided.\n * Renders the attachment icon and name.\n * @param attachment The message attachment to render\n * @returns TemplateResult containing the rendered attachment header\n */\n private renderHeader(attachment: IgcChatMessageAttachment) {\n const isCurrentUser = this._state.isCurrentUserMessage(this.message);\n const iconName = isImageAttachment(attachment)\n ? 'attach_image'\n : 'document_thumbnail';\n\n return html`\n ${!isCurrentUser\n ? html`<igc-icon name=${iconName} part=\"attachment-icon\"></igc-icon>`\n : nothing}\n <span part=\"file-name\">${attachment.name}</span>\n `;\n }\n\n /**\n * Default attachment content template used when no custom template is provided.\n * Renders the attachment content based on its type.\n * @param attachment The message attachment to render\n * @returns TemplateResult containing the rendered attachment content\n */\n private _renderContent(attachment: IgcChatMessageAttachment) {\n const iconName =\n ChatFileTypeIcons.get(getFileExtension(attachment.name)) ??\n ChatFileTypeIcons.get('default')!;\n\n return isImageAttachment(attachment)\n ? html`\n <img\n part=\"image-attachment-icon\"\n src=${createAttachmentURL(attachment)}\n alt=${attachment.name}\n />\n `\n : html`<igc-icon\n part=\"file-attachment-icon\"\n name=${iconName}\n ></igc-icon>`;\n }\n\n private _renderAttachment(attachment: IgcChatMessageAttachment) {\n const isCurrentUser = this._state.isCurrentUserMessage(this.message);\n\n const contentParts = {\n 'attachment-content': true,\n sent: isCurrentUser,\n };\n const headerParts = {\n 'attachment-header': true,\n sent: isCurrentUser,\n };\n\n const ctx: ChatAttachmentRenderContext = {\n attachment,\n message: this.message!,\n instance: this._state.host,\n };\n\n const content = html`<div part=${partMap(contentParts)}>\n ${until(this._getRenderer('attachmentContent')(ctx))}\n </div>`;\n const header = html` <div\n part=${partMap(headerParts)}\n role=\"button\"\n @click=${() => this._handleHeaderClick(attachment)}\n >\n <div part=\"details\">\n ${until(this._getRenderer('attachmentHeader')(ctx))}\n </div>\n </div>`;\n\n return html`\n ${isCurrentUser ? content : nothing} ${header}\n ${!isCurrentUser ? content : nothing}\n `;\n }\n\n protected override render() {\n const attachments = this.message?.attachments ?? [];\n const isCurrentUser = this._state.isCurrentUserMessage(this.message);\n const attachmentParts = {\n attachment: true,\n sent: isCurrentUser,\n };\n return html`${cache(\n this.message\n ? html`\n <div part=\"attachments-container\">\n ${repeat(\n attachments,\n (attachment) => attachment.id,\n (attachment) => trimmedHtml`\n <div part=\"${partMap(attachmentParts)}\">\n ${until(\n this._getRenderer('attachment')({\n attachment,\n message: this.message!,\n instance: this._state.host,\n })\n )}\n </div>\n `\n )}\n </div>\n `\n : nothing\n )}`;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'igc-message-attachments': IgcMessageAttachmentsComponent;\n }\n}\n"]}
|
|
@@ -62,7 +62,7 @@ export interface IgcChatMessageAttachment {
|
|
|
62
62
|
/**
|
|
63
63
|
* Configuration options for customizing the behavior and appearance of the chat component.
|
|
64
64
|
*/
|
|
65
|
-
export
|
|
65
|
+
export interface IgcChatOptions {
|
|
66
66
|
/**
|
|
67
67
|
* The ID of the current user. Used to differentiate between incoming and outgoing messages.
|
|
68
68
|
*/
|
|
@@ -138,7 +138,20 @@ export type IgcChatOptions = {
|
|
|
138
138
|
* An object containing a collection of custom renderers for different parts of the chat UI.
|
|
139
139
|
*/
|
|
140
140
|
renderers?: ChatRenderers;
|
|
141
|
-
}
|
|
141
|
+
}
|
|
142
|
+
/**
|
|
143
|
+
* Represents a draft message that is being composed by the user, including the text and any attachments.
|
|
144
|
+
*/
|
|
145
|
+
export interface IgcChatDraftMessage {
|
|
146
|
+
/**
|
|
147
|
+
* The textual content of the draft message.
|
|
148
|
+
*/
|
|
149
|
+
text: string;
|
|
150
|
+
/**
|
|
151
|
+
* An array of attachments associated with the draft message.
|
|
152
|
+
*/
|
|
153
|
+
attachments?: IgcChatMessageAttachment[];
|
|
154
|
+
}
|
|
142
155
|
/**
|
|
143
156
|
* Represents a user's reaction to a specific chat message.
|
|
144
157
|
*/
|
|
@@ -153,6 +166,7 @@ export interface IgcChatMessageReaction {
|
|
|
153
166
|
reaction: string;
|
|
154
167
|
}
|
|
155
168
|
/**
|
|
169
|
+
* @ignore
|
|
156
170
|
* A collection of optional rendering functions that allow for custom UI rendering.
|
|
157
171
|
* Each property is a function that takes a context object and returns a template result.
|
|
158
172
|
*/
|
|
@@ -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 */\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 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/* jsonAPIPlainObject */\n/* marshalByValue */\n/* skipEventDetails */\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/* jsonAPIPlainObject */\n/* skipEventDetails */\n/* marshalByValue */\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 /* blazorSuppress */\n /**\n * The actual File object, if the attachment was provided locally (e.g. via upload).\n */\n file?: File;\n\n /* blazorAlternateName: attachmentType */\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/* jsonAPIPlainObject */\n/**\n * Configuration options for customizing the behavior and appearance of the chat component.\n */\nexport interface 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 /* blazorSuppress */\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 */\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/* jsonAPIPlainObject */\n/* marshalByValue */\n/**\n * Represents a draft message that is being composed by the user, including the text and any attachments.\n */\nexport interface IgcChatDraftMessage {\n /**\n * The textual content of the draft message.\n */\n text: string;\n /**\n * An array of attachments associated with the draft message.\n */\n attachments?: IgcChatMessageAttachment[];\n}\n\n/* jsonAPIPlainObject */\n/* skipEventDetails */\n/* marshalByValue */\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/* blazorSuppress */\n/**\n * @ignore\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 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/* blazorSuppress */\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/* jsonAPIPlainObject */\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/* jsonAPIPlainObject */\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 /* blazorSuppress */\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/* jsonAPIPlainObject */\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/* jsonAPIPlainObject */\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"]}
|
|
@@ -168,10 +168,6 @@ export default class IgcComboComponent<T extends object = any> extends IgcComboC
|
|
|
168
168
|
/**
|
|
169
169
|
* An object that configures the filtering of the combo.
|
|
170
170
|
* @attr filtering-options
|
|
171
|
-
* @type {FilteringOptions<T>}
|
|
172
|
-
* @param filterKey - The key in the data source used when filtering the list of options.
|
|
173
|
-
* @param caseSensitive - Determines whether the filtering operation should be case sensitive.
|
|
174
|
-
* @param matchDiacritics -If true, the filter distinguishes between accented letters and their base letters.
|
|
175
171
|
*/
|
|
176
172
|
set filteringOptions(value: Partial<FilteringOptions<T>>);
|
|
177
173
|
get filteringOptions(): FilteringOptions<T>;
|