igniteui-webcomponents 6.2.0 → 6.3.0-alpha.0

package/components/chat/chat.d.ts

@@ -0,0 +1,164 @@
+import { LitElement, type TemplateResult } from 'lit';
+import type { Constructor } from '../common/mixins/constructor.js';
+import type { IgcChatOptions, IgcMessage, IgcMessageAttachment } from './types.js';
+/**
+ * Defines the custom events dispatched by the `<igc-chat>` component.
+ */
+export interface IgcChatComponentEventMap {
+    /**
+     * Dispatched when a new chat message is created (sent).
+     *
+     * @event igcMessageCreated
+     * @type {CustomEvent<IgcMessage>}
+     * @detail The message that was created.
+     */
+    igcMessageCreated: CustomEvent<IgcMessage>;
+    /**
+     * Dispatched when a chat message attachment is clicked.
+     *
+     * @event igcAttachmentClick
+     * @type {CustomEvent<IgcMessageAttachment>}
+     * @detail The attachment that was clicked.
+     */
+    igcAttachmentClick: CustomEvent<IgcMessageAttachment>;
+    /**
+     * Dispatched when an attachment is changed (e.g., updated or removed).
+     *
+     * @event igcAttachmentChange
+     * @type {CustomEvent<IgcMessageAttachment>}
+     * @detail The attachment that was changed.
+     */
+    igcAttachmentChange: CustomEvent<IgcMessageAttachment>;
+    /**
+     * Dispatched during an attachment drag operation.
+     *
+     * @event igcAttachmentDrag
+     * @type {CustomEvent<any>}
+     * @detail The drag event payload.
+     */
+    igcAttachmentDrag: CustomEvent<any>;
+    /**
+     * Dispatched when an attachment is dropped (e.g., in a drag-and-drop operation).
+     *
+     * @event igcAttachmentDrop
+     * @type {CustomEvent<any>}
+     * @detail The drop event payload.
+     */
+    igcAttachmentDrop: CustomEvent<any>;
+    /**
+     * Dispatched when the typing status changes (e.g., user starts or stops typing).
+     *
+     * @event igcTypingChange
+     * @type {CustomEvent<boolean>}
+     * @detail `true` if typing started, `false` if stopped.
+     */
+    igcTypingChange: CustomEvent<boolean>;
+    /**
+     * Dispatched when the chat input field gains focus.
+     *
+     * @event igcInputFocus
+     * @type {CustomEvent<any>}
+     * @detail Focus event payload.
+     */
+    igcInputFocus: CustomEvent<any>;
+    /**
+     * Dispatched when the chat input field loses focus.
+     *
+     * @event igcInputBlur
+     * @type {CustomEvent<any>}
+     * @detail Blur event payload.
+     */
+    igcInputBlur: CustomEvent<any>;
+    /**
+     * Dispatched when the content of the chat input changes.
+     *
+     * @event igcInputChange
+     * @type {CustomEvent<string>}
+     * @detail The current text value of the input.
+     */
+    igcInputChange: CustomEvent<string>;
+}
+declare const IgcChatComponent_base: Constructor<import("../common/mixins/event-emitter.js").EventEmitterInterface<IgcChatComponentEventMap>> & Constructor<LitElement>;
+/**
+ * A chat UI component for displaying messages, attachments, and input interaction.
+ *
+ * This component is part of the Ignite UI Web Components suite.
+ *
+ * @element igc-chat
+ * @slot prefix - Slot for injecting content (e.g., avatar or icon) before the chat title.
+ * @slot title - Slot for overriding the chat title content.
+ * @slot actions - Slot for injecting header actions (e.g., buttons, menus).
+ * @slot suggestions-header - Slot for rendering a custom header for the suggestions list.
+ * @slot suggestions - Slot for rendering a custom list of quick reply suggestions.
+ * @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.
+ *
+ * @csspart header - Styles the header container.
+ * @csspart prefix - Styles the element before the title (e.g., avatar).
+ * @csspart title - Styles the chat header title.
+ * @csspart suggestions - Styles the suggestion container.
+ * @csspart suggestion - Styles each suggestion item.
+ */
+export default class IgcChatComponent extends IgcChatComponent_base {
+    static readonly tagName = "igc-chat";
+    static styles: import("lit").CSSResult[];
+    /**
+     * Registers the chat component and its child components.
+     * Should be called once before using the component.
+     *
+     * @example
+     * IgcChatComponent.register();
+     */
+    static register(): void;
+    private readonly _chatState;
+    private _context;
+    private _hasContent;
+    private _chatInput;
+    constructor();
+    /**
+     * The list of chat messages currently displayed.
+     * Use this property to set or update the message history.
+     */
+    set messages(value: IgcMessage[]);
+    get messages(): IgcMessage[];
+    /**
+     * The chat message currently being composed but not yet sent.
+     * Includes the draft text and any attachments.
+     */
+    set draftMessage(value: {
+        text: string;
+        attachments?: IgcMessageAttachment[];
+    });
+    get draftMessage(): {
+        text: string;
+        attachments?: IgcMessageAttachment[];
+    };
+    /**
+     * Controls the chat behavior and appearance through a configuration object.
+     * Use this to toggle UI options, provide suggestions, templates, etc.
+     */
+    set options(value: IgcChatOptions);
+    get options(): IgcChatOptions | undefined;
+    /** Returns the default attachments element. */
+    get defaultAttachments(): TemplateResult;
+    /** Returns the default textarea element. */
+    get defaultTextArea(): TemplateResult;
+    /** Returns the default file upload button element. */
+    get defaultFileUploadButton(): TemplateResult;
+    /** Returns the default send message button element. */
+    get defaultSendButton(): TemplateResult;
+    protected contextChanged(): void;
+    private renderHeader;
+    private renderSuggestions;
+    protected firstUpdated(): void;
+    protected createRenderRoot(): HTMLElement | DocumentFragment;
+    protected render(): TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        /** The `<igc-chat>` custom element. */
+        'igc-chat': IgcChatComponent;
+    }
+}
+export {};

package/components/chat/chat.js

@@ -0,0 +1,168 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { ContextProvider } from '@lit/context';
+import { html, LitElement, nothing } from 'lit';
+import { property, query, state } from 'lit/decorators.js';
+import { addThemingController } from '../../theming/theming-controller.js';
+import IgcButtonComponent from '../button/button.js';
+import { chatContext } from '../common/context.js';
+import { watch } from '../common/decorators/watch.js';
+import { registerComponent } from '../common/definitions/register.js';
+import { EventEmitterMixin } from '../common/mixins/event-emitter.js';
+import IgcChatInputComponent from './chat-input.js';
+import IgcChatMessageListComponent from './chat-message-list.js';
+import { createChatState } 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';
+class IgcChatComponent extends EventEmitterMixin(LitElement) {
+    static register() {
+        registerComponent(IgcChatComponent, IgcChatInputComponent, IgcChatMessageListComponent, IgcButtonComponent);
+    }
+    constructor() {
+        super();
+        this._chatState = createChatState(this);
+        this._context = new ContextProvider(this, {
+            context: chatContext,
+            initialValue: this._chatState,
+        });
+        this._hasContent = false;
+        addThemingController(this, all);
+    }
+    set messages(value) {
+        this._chatState.messages = value;
+    }
+    get messages() {
+        return this._chatState.messages;
+    }
+    set draftMessage(value) {
+        if (this._chatState) {
+            this._chatState.inputValue = value.text;
+            this._chatState.inputAttachments = value.attachments || [];
+            this.requestUpdate();
+        }
+    }
+    get draftMessage() {
+        return {
+            text: this._chatState?.inputValue,
+            attachments: this._chatState?.inputAttachments,
+        };
+    }
+    set options(value) {
+        this._chatState.options = value;
+    }
+    get options() {
+        return this._chatState.options;
+    }
+    get defaultAttachments() {
+        return this._chatInput.defaultAttachmentsArea;
+    }
+    get defaultTextArea() {
+        return this._chatInput.defaultTextArea;
+    }
+    get defaultFileUploadButton() {
+        return this._chatInput.defaultFileUploadButton;
+    }
+    get defaultSendButton() {
+        return this._chatInput.defaultSendButton;
+    }
+    contextChanged() {
+        this._context.setValue(this._chatState, true);
+    }
+    renderHeader() {
+        return html ` <div part="header">
+      <slot name="prefix" part="prefix"></slot>
+      <slot name="title" part="title"
+        >${this._chatState.options?.headerText}</slot
+      >
+      <slot name="actions" part="actions"></slot>
+    </div>`;
+    }
+    renderSuggestions() {
+        return html ` <div
+      part="suggestions-container"
+      role="list"
+      aria-label="Suggestions"
+    >
+      <slot name="suggestions-header" part="suggestions-header"></slot>
+      <slot name="suggestions" part="suggestions">
+        ${this._chatState.options?.suggestions?.map((suggestion) => html `
+            <slot name="suggestion" part="suggestion" role="listitem">
+              <igc-chip
+                @click=${() => this._chatState?.handleSuggestionClick(suggestion)}
+              >
+                <span>${suggestion}</span>
+              </igc-chip>
+            </slot>
+          `)}
+      </slot>
+      <slot name="suggestions-actions" part="suggestions-actions"></slot>
+    </div>`;
+    }
+    firstUpdated() {
+        this._context.setValue(this._chatState, true);
+    }
+    createRenderRoot() {
+        const root = super.createRenderRoot();
+        root.addEventListener('slotchange', () => {
+            this._hasContent =
+                this._chatState?.hasSlotContent('prefix') ||
+                    this._chatState?.hasSlotContent('title') ||
+                    this._chatState?.hasSlotContent('actions');
+        });
+        return root;
+    }
+    render() {
+        const hasSuggestions = this._chatState.options?.suggestions &&
+            this._chatState.options.suggestions.length > 0;
+        return html `
+      <div part="chat-container">
+        ${this._hasContent || this._chatState.options?.headerText
+            ? this.renderHeader()
+            : nothing}
+        ${this.messages.length === 0
+            ? html `<div part="empty-state">
+              <slot name="empty-state"> </slot>
+            </div>`
+            : html `<igc-chat-message-list> </igc-chat-message-list>`}
+        ${hasSuggestions &&
+            this._chatState.suggestionsPosition === 'below-messages'
+            ? this.renderSuggestions()
+            : nothing}
+        <igc-chat-input> </igc-chat-input>
+        ${hasSuggestions &&
+            this._chatState.suggestionsPosition === 'below-input'
+            ? this.renderSuggestions()
+            : nothing}
+      </div>
+    `;
+    }
+}
+IgcChatComponent.tagName = 'igc-chat';
+IgcChatComponent.styles = [styles, shared];
+export default IgcChatComponent;
+__decorate([
+    state()
+], IgcChatComponent.prototype, "_hasContent", void 0);
+__decorate([
+    query(IgcChatInputComponent.tagName)
+], IgcChatComponent.prototype, "_chatInput", void 0);
+__decorate([
+    property({ reflect: true, attribute: false })
+], IgcChatComponent.prototype, "messages", null);
+__decorate([
+    property({ reflect: true, attribute: false })
+], IgcChatComponent.prototype, "draftMessage", null);
+__decorate([
+    property({ attribute: false })
+], IgcChatComponent.prototype, "options", null);
+__decorate([
+    watch('messages'),
+    watch('draftMessage'),
+    watch('options')
+], IgcChatComponent.prototype, "contextChanged", null);
+//# sourceMappingURL=chat.js.map

package/components/chat/chat.js.map

@@ -0,0 +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 TemplateResult } from 'lit';\nimport { property, query, state } from 'lit/decorators.js';\nimport { addThemingController } from '../../theming/theming-controller.js';\nimport IgcButtonComponent from '../button/button.js';\nimport { chatContext } from '../common/context.js';\nimport { watch } from '../common/decorators/watch.js';\nimport { registerComponent } from '../common/definitions/register.js';\nimport type { Constructor } from '../common/mixins/constructor.js';\nimport { EventEmitterMixin } from '../common/mixins/event-emitter.js';\nimport IgcChatInputComponent from './chat-input.js';\nimport IgcChatMessageListComponent from './chat-message-list.js';\nimport { createChatState } 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  IgcChatOptions,\n  IgcMessage,\n  IgcMessageAttachment,\n} from './types.js';\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   * @event igcMessageCreated\n   * @type {CustomEvent<IgcMessage>}\n   * @detail The message that was created.\n   */\n  igcMessageCreated: CustomEvent<IgcMessage>;\n\n  /**\n   * Dispatched when a chat message attachment is clicked.\n   *\n   * @event igcAttachmentClick\n   * @type {CustomEvent<IgcMessageAttachment>}\n   * @detail The attachment that was clicked.\n   */\n  igcAttachmentClick: CustomEvent<IgcMessageAttachment>;\n\n  /**\n   * Dispatched when an attachment is changed (e.g., updated or removed).\n   *\n   * @event igcAttachmentChange\n   * @type {CustomEvent<IgcMessageAttachment>}\n   * @detail The attachment that was changed.\n   */\n  igcAttachmentChange: CustomEvent<IgcMessageAttachment>;\n\n  /**\n   * Dispatched during an attachment drag operation.\n   *\n   * @event igcAttachmentDrag\n   * @type {CustomEvent<any>}\n   * @detail The drag event payload.\n   */\n  igcAttachmentDrag: CustomEvent<any>;\n\n  /**\n   * Dispatched when an attachment is dropped (e.g., in a drag-and-drop operation).\n   *\n   * @event igcAttachmentDrop\n   * @type {CustomEvent<any>}\n   * @detail The drop event payload.\n   */\n  igcAttachmentDrop: CustomEvent<any>;\n\n  /**\n   * Dispatched when the typing status changes (e.g., user starts or stops typing).\n   *\n   * @event igcTypingChange\n   * @type {CustomEvent<boolean>}\n   * @detail `true` if typing started, `false` if stopped.\n   */\n  igcTypingChange: CustomEvent<boolean>;\n\n  /**\n   * Dispatched when the chat input field gains focus.\n   *\n   * @event igcInputFocus\n   * @type {CustomEvent<any>}\n   * @detail Focus event payload.\n   */\n  igcInputFocus: CustomEvent<any>;\n\n  /**\n   * Dispatched when the chat input field loses focus.\n   *\n   * @event igcInputBlur\n   * @type {CustomEvent<any>}\n   * @detail Blur event payload.\n   */\n  igcInputBlur: CustomEvent<any>;\n\n  /**\n   * Dispatched when the content of the chat input changes.\n   *\n   * @event igcInputChange\n   * @type {CustomEvent<string>}\n   * @detail The current text value of the input.\n   */\n  igcInputChange: CustomEvent<string>;\n}\n\n/**\n * A chat UI component for displaying messages, attachments, and input interaction.\n *\n * This component is part of the Ignite UI Web Components suite.\n *\n * @element igc-chat\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 header - Styles the header container.\n * @csspart prefix - Styles the element before the title (e.g., avatar).\n * @csspart title - Styles the chat header title.\n * @csspart suggestions - Styles the suggestion container.\n * @csspart suggestion - Styles each suggestion item.\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  /**\n   * Registers the chat component and its child components.\n   * Should be called once before using the component.\n   *\n   * @example\n   * IgcChatComponent.register();\n   */\n  public static register() {\n    registerComponent(\n      IgcChatComponent,\n      IgcChatInputComponent,\n      IgcChatMessageListComponent,\n      IgcButtonComponent\n    );\n  }\n\n  private readonly _chatState = createChatState(this);\n\n  private _context = new ContextProvider(this, {\n    context: chatContext,\n    initialValue: this._chatState,\n  });\n\n  @state()\n  private _hasContent = false;\n\n  @query(IgcChatInputComponent.tagName)\n  private _chatInput!: IgcChatInputComponent;\n\n  constructor() {\n    super();\n    addThemingController(this, all);\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({ reflect: true, attribute: false })\n  public set messages(value: IgcMessage[]) {\n    this._chatState.messages = value;\n  }\n\n  public get messages(): IgcMessage[] {\n    return this._chatState.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({ reflect: true, attribute: false })\n  public set draftMessage(value: {\n    text: string;\n    attachments?: IgcMessageAttachment[];\n  }) {\n    if (this._chatState) {\n      this._chatState.inputValue = value.text;\n      this._chatState.inputAttachments = value.attachments || [];\n      this.requestUpdate();\n    }\n  }\n\n  public get draftMessage(): {\n    text: string;\n    attachments?: IgcMessageAttachment[];\n  } {\n    return {\n      text: this._chatState?.inputValue,\n      attachments: this._chatState?.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._chatState.options = value;\n  }\n\n  public get options(): IgcChatOptions | undefined {\n    return this._chatState.options;\n  }\n\n  /** Returns the default attachments element. */\n  public get defaultAttachments(): TemplateResult {\n    return this._chatInput.defaultAttachmentsArea;\n  }\n\n  /** Returns the default textarea element. */\n  public get defaultTextArea(): TemplateResult {\n    return this._chatInput.defaultTextArea;\n  }\n\n  /** Returns the default file upload button element. */\n  public get defaultFileUploadButton(): TemplateResult {\n    return this._chatInput.defaultFileUploadButton;\n  }\n\n  /** Returns the default send message button element. */\n  public get defaultSendButton(): TemplateResult {\n    return this._chatInput.defaultSendButton;\n  }\n\n  @watch('messages')\n  @watch('draftMessage')\n  @watch('options')\n  protected contextChanged() {\n    this._context.setValue(this._chatState, true);\n  }\n\n  private renderHeader() {\n    return html` <div part=\"header\">\n      <slot name=\"prefix\" part=\"prefix\"></slot>\n      <slot name=\"title\" part=\"title\"\n        >${this._chatState.options?.headerText}</slot\n      >\n      <slot name=\"actions\" part=\"actions\"></slot>\n    </div>`;\n  }\n\n  private renderSuggestions() {\n    return html` <div\n      part=\"suggestions-container\"\n      role=\"list\"\n      aria-label=\"Suggestions\"\n    >\n      <slot name=\"suggestions-header\" part=\"suggestions-header\"></slot>\n      <slot name=\"suggestions\" part=\"suggestions\">\n        ${this._chatState.options?.suggestions?.map(\n          (suggestion) => html`\n            <slot name=\"suggestion\" part=\"suggestion\" role=\"listitem\">\n              <igc-chip\n                @click=${() =>\n                  this._chatState?.handleSuggestionClick(suggestion)}\n              >\n                <span>${suggestion}</span>\n              </igc-chip>\n            </slot>\n          `\n        )}\n      </slot>\n      <slot name=\"suggestions-actions\" part=\"suggestions-actions\"></slot>\n    </div>`;\n  }\n\n  protected override firstUpdated() {\n    this._context.setValue(this._chatState, true);\n  }\n\n  protected override createRenderRoot(): HTMLElement | DocumentFragment {\n    const root = super.createRenderRoot();\n    root.addEventListener('slotchange', () => {\n      this._hasContent =\n        this._chatState?.hasSlotContent('prefix') ||\n        this._chatState?.hasSlotContent('title') ||\n        this._chatState?.hasSlotContent('actions');\n    });\n    return root;\n  }\n\n  protected override render() {\n    const hasSuggestions =\n      this._chatState.options?.suggestions &&\n      this._chatState.options.suggestions.length > 0;\n    return html`\n      <div part=\"chat-container\">\n        ${this._hasContent || this._chatState.options?.headerText\n          ? this.renderHeader()\n          : nothing}\n        ${this.messages.length === 0\n          ? html`<div part=\"empty-state\">\n              <slot name=\"empty-state\"> </slot>\n            </div>`\n          : html`<igc-chat-message-list> </igc-chat-message-list>`}\n        ${hasSuggestions &&\n        this._chatState.suggestionsPosition === 'below-messages'\n          ? this.renderSuggestions()\n          : nothing}\n        <igc-chat-input> </igc-chat-input>\n        ${hasSuggestions &&\n        this._chatState.suggestionsPosition === 'below-input'\n          ? this.renderSuggestions()\n          : nothing}\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    /** The `<igc-chat>` custom element. */\n    'igc-chat': IgcChatComponent;\n  }\n}\n"]}

package/components/chat/markdown-util.d.ts

@@ -0,0 +1,2 @@
+import { type TemplateResult } from 'lit';
+export declare function renderMarkdown(text: string): TemplateResult;

package/components/chat/markdown-util.js

@@ -0,0 +1,22 @@
+import { html } from 'lit';
+import { marked } from 'marked';
+marked.setOptions({
+    gfm: true,
+    breaks: true,
+});
+const renderer = new marked.Renderer();
+renderer.code = (code, language) => {
+    return `<pre><code class="language-${language}">${code}</code></pre>`;
+};
+renderer.link = (href, title, text) => {
+    return `<a href="${href}" target="_blank" rel="noopener noreferrer" ${title ? `title="${title}"` : ''}>${text}</a>`;
+};
+export function renderMarkdown(text) {
+    if (!text)
+        return html ``;
+    const rendered = marked(text, { renderer }).toString();
+    const template = document.createElement('template');
+    template.innerHTML = rendered;
+    return html `${template.content}`;
+}
+//# sourceMappingURL=markdown-util.js.map

package/components/chat/markdown-util.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"markdown-util.js","sourceRoot":"","sources":["../../../src/components/chat/markdown-util.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAuB,MAAM,KAAK,CAAC;AAChD,OAAO,EAAE,MAAM,EAAE,MAAM,QAAQ,CAAC;AAEhC,MAAM,CAAC,UAAU,CAAC;IAChB,GAAG,EAAE,IAAI;IACT,MAAM,EAAE,IAAI;CACb,CAAC,CAAC;AAEH,MAAM,QAAQ,GAAG,IAAI,MAAM,CAAC,QAAQ,EAAE,CAAC;AAGvC,QAAQ,CAAC,IAAI,GAAG,CAAC,IAAI,EAAE,QAAQ,EAAE,EAAE;IACjC,OAAO,8BAA8B,QAAQ,KAAK,IAAI,eAAe,CAAC;AACxE,CAAC,CAAC;AAGF,QAAQ,CAAC,IAAI,GAAG,CAAC,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE,EAAE;IACpC,OAAO,YAAY,IAAI,+CAA+C,KAAK,CAAC,CAAC,CAAC,UAAU,KAAK,GAAG,CAAC,CAAC,CAAC,EAAE,IAAI,IAAI,MAAM,CAAC;AACtH,CAAC,CAAC;AAEF,MAAM,UAAU,cAAc,CAAC,IAAY;IACzC,IAAI,CAAC,IAAI;QAAE,OAAO,IAAI,CAAA,EAAE,CAAC;IAEzB,MAAM,QAAQ,GAAG,MAAM,CAAC,IAAI,EAAE,EAAE,QAAQ,EAAE,CAAC,CAAC,QAAQ,EAAE,CAAC;IACvD,MAAM,QAAQ,GAAG,QAAQ,CAAC,aAAa,CAAC,UAAU,CAAC,CAAC;IACpD,QAAQ,CAAC,SAAS,GAAG,QAAQ,CAAC;IAE9B,OAAO,IAAI,CAAA,GAAG,QAAQ,CAAC,OAAO,EAAE,CAAC;AACnC,CAAC","sourcesContent":["import { html, type TemplateResult } from 'lit';\nimport { marked } from 'marked';\n\nmarked.setOptions({\n  gfm: true,\n  breaks: true,\n});\n\nconst renderer = new marked.Renderer();\n\n// Customize code rendering\nrenderer.code = (code, language) => {\n  return `<pre><code class=\"language-${language}\">${code}</code></pre>`;\n};\n\n// Customize link rendering\nrenderer.link = (href, title, text) => {\n  return `<a href=\"${href}\" target=\"_blank\" rel=\"noopener noreferrer\" ${title ? `title=\"${title}\"` : ''}>${text}</a>`;\n};\n\nexport function renderMarkdown(text: string): TemplateResult {\n  if (!text) return html``;\n\n  const rendered = marked(text, { renderer }).toString();\n  const template = document.createElement('template');\n  template.innerHTML = rendered;\n\n  return html`${template.content}`;\n}\n"]}

package/components/chat/message-attachments.d.ts

@@ -0,0 +1,45 @@
+import { LitElement } from 'lit';
+import { type IgcMessage } from './types.js';
+/**
+ * A component that renders message attachments within a chat.
+ *
+ * Displays attachments such as images or files, supporting custom templates
+ * and default rendering using expansion panels.
+ *
+ * @element igc-message-attachments
+ *
+ * @csspart attachments-container - Container wrapping all attachments.
+ * @csspart attachment - Wrapper for a single attachment.
+ * @csspart attachment-header - Wrapper for a single attachment header.
+ * @csspart attachments-content - Part representing the attachment preview.
+ * @csspart attachment-icon - Icon part representing the attachment type.
+ * @csspart file-name - Part representing the attachment's file name.
+ * @csspart actions - Container for header action buttons.
+ * @csspart image-attachment - Part for the image element inside an image attachment.
+ *
+ * @fires igcAttachmentClick - Fired when an attachment header is toggled (clicked).
+ */
+export default class IgcMessageAttachmentsComponent extends LitElement {
+    static readonly tagName = "igc-message-attachments";
+    static styles: import("lit").CSSResult[];
+    private _chatState?;
+    static register(): void;
+    /**
+     * The array of attachments to render.
+     */
+    message: IgcMessage | undefined;
+    constructor();
+    private handleHeaderClick;
+    private getURL;
+    private defaulAttachmentContent;
+    private renderAttachmentHeaderText;
+    private renderAttachmentHeaderActions;
+    private renderAttachmentContent;
+    private renderDefaultAttachmentsTemplate;
+    protected render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'igc-message-attachments': IgcMessageAttachmentsComponent;
+    }
+}

package/components/chat/message-attachments.js

@@ -0,0 +1,127 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { consume } from '@lit/context';
+import { html, LitElement, nothing } from 'lit';
+import { property } from 'lit/decorators.js';
+import IgcIconButtonComponent from '../button/icon-button.js';
+import { chatContext } from '../common/context.js';
+import { registerComponent } from '../common/definitions/register.js';
+import IgcExpansionPanelComponent from '../expansion-panel/expansion-panel.js';
+import IgcIconComponent from '../icon/icon.js';
+import { registerIconFromText } from '../icon/icon.registry.js';
+import { styles } from './themes/message-attachments.base.css.js';
+import { styles as shared } from './themes/shared/message-attachments.common.css.js';
+import { closeIcon, fileIcon, imageIcon, moreIcon, previewIcon, } from './types.js';
+class IgcMessageAttachmentsComponent extends LitElement {
+    static register() {
+        registerComponent(IgcMessageAttachmentsComponent, IgcIconComponent, IgcIconButtonComponent, IgcExpansionPanelComponent);
+    }
+    constructor() {
+        super();
+        registerIconFromText('close', closeIcon, 'material');
+        registerIconFromText('file', fileIcon, 'material');
+        registerIconFromText('image', imageIcon, 'material');
+        registerIconFromText('preview', previewIcon, 'material');
+        registerIconFromText('more', moreIcon, 'material');
+    }
+    handleHeaderClick(attachment) {
+        this._chatState?.emitEvent('igcAttachmentClick', { detail: attachment });
+    }
+    getURL(attachment) {
+        if (attachment.url) {
+            return attachment.url;
+        }
+        if (attachment.file) {
+            return URL.createObjectURL(attachment.file);
+        }
+        return '';
+    }
+    defaulAttachmentContent(attachment) {
+        return html `${attachment.type === 'image' ||
+            attachment.file?.type.startsWith('image/')
+            ? html `<img
+          part="image-attachment"
+          src=${this.getURL(attachment)}
+          alt=${attachment.name}
+        />`
+            : nothing}`;
+    }
+    renderAttachmentHeaderText(attachment) {
+        return html `<div part="details">
+      ${this._chatState?.options?.templates?.attachmentHeaderTemplate &&
+            this.message
+            ? this._chatState.options.templates.attachmentHeaderTemplate(this.message)
+            : html `${attachment.type === 'image' ||
+                attachment.file?.type.startsWith('image/')
+                ? html `<igc-icon
+                  name="image"
+                  collection="material"
+                  part="attachment-icon"
+                ></igc-icon>`
+                : html `<igc-icon
+                  name="file"
+                  collection="material"
+                  part="attachment-icon"
+                ></igc-icon>`}
+            <span part="file-name">${attachment.name}</span> `}
+    </div>`;
+    }
+    renderAttachmentHeaderActions() {
+        return html `<div part="actions">
+      ${this._chatState?.options?.templates?.attachmentActionsTemplate &&
+            this.message
+            ? this._chatState.options.templates.attachmentActionsTemplate(this.message)
+            : nothing}
+    </div>`;
+    }
+    renderAttachmentContent(attachment) {
+        return html `<div part="attachment-content">
+      ${this._chatState?.options?.templates?.attachmentContentTemplate &&
+            this.message
+            ? this._chatState.options.templates.attachmentContentTemplate(this.message)
+            : this.defaulAttachmentContent(attachment)}
+    </div>`;
+    }
+    renderDefaultAttachmentsTemplate() {
+        return html `${this.message?.attachments?.map((attachment) => html `<div part="attachment">
+          <div
+            part="attachment-header"
+            role="button"
+            @click=${() => this.handleHeaderClick(attachment)}
+          >
+            ${this.renderAttachmentHeaderText(attachment)}
+            ${this.renderAttachmentHeaderActions()}
+          </div>
+
+          ${attachment.type === 'image' ||
+            attachment.file?.type.startsWith('image/') ||
+            this._chatState?.options?.templates?.attachmentContentTemplate
+            ? this.renderAttachmentContent(attachment)
+            : nothing}
+        </div>`)}`;
+    }
+    render() {
+        return html `
+      <div part="attachments-container">
+        ${this._chatState?.options?.templates?.attachmentTemplate &&
+            this.message
+            ? this._chatState.options.templates.attachmentTemplate(this.message)
+            : this.renderDefaultAttachmentsTemplate()}
+      </div>
+    `;
+    }
+}
+IgcMessageAttachmentsComponent.tagName = 'igc-message-attachments';
+IgcMessageAttachmentsComponent.styles = [styles, shared];
+export default IgcMessageAttachmentsComponent;
+__decorate([
+    consume({ context: chatContext, subscribe: true })
+], IgcMessageAttachmentsComponent.prototype, "_chatState", void 0);
+__decorate([
+    property({ attribute: false })
+], IgcMessageAttachmentsComponent.prototype, "message", void 0);
+//# sourceMappingURL=message-attachments.js.map

package/components/chat/message-attachments.js.map

@@ -0,0 +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 IgcIconButtonComponent from '../button/icon-button.js';\nimport { chatContext } from '../common/context.js';\nimport { registerComponent } from '../common/definitions/register.js';\nimport IgcExpansionPanelComponent from '../expansion-panel/expansion-panel.js';\nimport IgcIconComponent from '../icon/icon.js';\nimport { registerIconFromText } from '../icon/icon.registry.js';\nimport type { ChatState } from './chat-state.js';\nimport { styles } from './themes/message-attachments.base.css.js';\nimport { styles as shared } from './themes/shared/message-attachments.common.css.js';\nimport {\n  closeIcon,\n  fileIcon,\n  type IgcMessage,\n  type IgcMessageAttachment,\n  imageIcon,\n  moreIcon,\n  previewIcon,\n} from './types.js';\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\n  public static override styles = [styles, shared];\n\n  @consume({ context: chatContext, subscribe: true })\n  private _chatState?: ChatState;\n\n  /* blazorSuppress */\n  public static register() {\n    registerComponent(\n      IgcMessageAttachmentsComponent,\n      IgcIconComponent,\n      IgcIconButtonComponent,\n      IgcExpansionPanelComponent\n    );\n  }\n\n  /**\n   * The array of attachments to render.\n   */\n  @property({ attribute: false })\n  message: IgcMessage | undefined;\n\n  constructor() {\n    super();\n    registerIconFromText('close', closeIcon, 'material');\n    registerIconFromText('file', fileIcon, 'material');\n    registerIconFromText('image', imageIcon, 'material');\n    registerIconFromText('preview', previewIcon, 'material');\n    registerIconFromText('more', moreIcon, 'material');\n  }\n\n  private handleHeaderClick(attachment: IgcMessageAttachment) {\n    this._chatState?.emitEvent('igcAttachmentClick', { detail: attachment });\n  }\n\n  private getURL(attachment: IgcMessageAttachment): string {\n    if (attachment.url) {\n      return attachment.url;\n    }\n    if (attachment.file) {\n      return URL.createObjectURL(attachment.file);\n    }\n    return '';\n  }\n\n  private defaulAttachmentContent(attachment: IgcMessageAttachment) {\n    return html`${attachment.type === 'image' ||\n    attachment.file?.type.startsWith('image/')\n      ? html`<img\n          part=\"image-attachment\"\n          src=${this.getURL(attachment)}\n          alt=${attachment.name}\n        />`\n      : nothing}`;\n  }\n\n  private renderAttachmentHeaderText(attachment: IgcMessageAttachment) {\n    return html`<div part=\"details\">\n      ${this._chatState?.options?.templates?.attachmentHeaderTemplate &&\n      this.message\n        ? this._chatState.options.templates.attachmentHeaderTemplate(\n            this.message\n          )\n        : html`${attachment.type === 'image' ||\n            attachment.file?.type.startsWith('image/')\n              ? html`<igc-icon\n                  name=\"image\"\n                  collection=\"material\"\n                  part=\"attachment-icon\"\n                ></igc-icon>`\n              : html`<igc-icon\n                  name=\"file\"\n                  collection=\"material\"\n                  part=\"attachment-icon\"\n                ></igc-icon>`}\n            <span part=\"file-name\">${attachment.name}</span> `}\n    </div>`;\n  }\n\n  private renderAttachmentHeaderActions() {\n    return html`<div part=\"actions\">\n      ${this._chatState?.options?.templates?.attachmentActionsTemplate &&\n      this.message\n        ? this._chatState.options.templates.attachmentActionsTemplate(\n            this.message\n          )\n        : nothing}\n    </div>`;\n  }\n\n  private renderAttachmentContent(attachment: IgcMessageAttachment) {\n    return html`<div part=\"attachment-content\">\n      ${this._chatState?.options?.templates?.attachmentContentTemplate &&\n      this.message\n        ? this._chatState.options.templates.attachmentContentTemplate(\n            this.message\n          )\n        : this.defaulAttachmentContent(attachment)}\n    </div>`;\n  }\n\n  private renderDefaultAttachmentsTemplate() {\n    return html`${this.message?.attachments?.map(\n      (attachment) =>\n        html`<div part=\"attachment\">\n          <div\n            part=\"attachment-header\"\n            role=\"button\"\n            @click=${() => this.handleHeaderClick(attachment)}\n          >\n            ${this.renderAttachmentHeaderText(attachment)}\n            ${this.renderAttachmentHeaderActions()}\n          </div>\n\n          ${attachment.type === 'image' ||\n          attachment.file?.type.startsWith('image/') ||\n          this._chatState?.options?.templates?.attachmentContentTemplate\n            ? this.renderAttachmentContent(attachment)\n            : nothing}\n        </div>`\n    )}`;\n  }\n\n  protected override render() {\n    return html`\n      <div part=\"attachments-container\">\n        ${this._chatState?.options?.templates?.attachmentTemplate &&\n        this.message\n          ? this._chatState.options.templates.attachmentTemplate(this.message)\n          : this.renderDefaultAttachmentsTemplate()}\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'igc-message-attachments': IgcMessageAttachmentsComponent;\n  }\n}\n"]}

package/components/chat/themes/chat.base.css.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;

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

@@ -0,0 +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{width:100%;height:600px;overflow:hidden;box-shadow:var(--ig-elevation-4);display:flex;flex-direction:column}[part=chat-container]{display:flex;flex-direction:column;align-items:center;height:100%;gap:2.5rem}igc-chat-message-list,[part=empty-state],[part=suggestions-container]{max-width:47.5rem;width:100%}[part=suggestions-header]{font-family:var(--ig-subtitle-2-font-family, var(--ig-font-family));font-size:var(--ig-subtitle-2-font-size);font-weight:var(--ig-subtitle-2-font-weight);font-style:var(--ig-subtitle-2-font-style);line-height:var(--ig-subtitle-2-line-height);letter-spacing:var(--ig-subtitle-2-letter-spacing);text-transform:var(--ig-subtitle-2-text-transform);margin-top:var(--ig-subtitle-2-margin-top);margin-bottom:var(--ig-subtitle-2-margin-bottom);margin:0}[part=empty-state]{height:100%}[part=header]{display:flex;align-items:center;justify-content:space-between;padding:1rem .8125rem;gap:1rem;box-shadow:var(--ig-elevation-4);width:100%}[part=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}[part=suggestions-container]{display:flex;flex-direction:column;gap:.75rem}[part=suggestions-container] igc-chip{--ig-size: 3;width:-moz-fit-content;width:fit-content}`;
+//# sourceMappingURL=chat.base.css.js.map

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

@@ -0,0 +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,w7EAAw7E,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{width:100%;height:600px;overflow:hidden;box-shadow:var(--ig-elevation-4);display:flex;flex-direction:column}[part=chat-container]{display:flex;flex-direction:column;align-items:center;height:100%;gap:2.5rem}igc-chat-message-list,[part=empty-state],[part=suggestions-container]{max-width:47.5rem;width:100%}[part=suggestions-header]{font-family:var(--ig-subtitle-2-font-family, var(--ig-font-family));font-size:var(--ig-subtitle-2-font-size);font-weight:var(--ig-subtitle-2-font-weight);font-style:var(--ig-subtitle-2-font-style);line-height:var(--ig-subtitle-2-line-height);letter-spacing:var(--ig-subtitle-2-letter-spacing);text-transform:var(--ig-subtitle-2-text-transform);margin-top:var(--ig-subtitle-2-margin-top);margin-bottom:var(--ig-subtitle-2-margin-bottom);margin:0}[part=empty-state]{height:100%}[part=header]{display:flex;align-items:center;justify-content:space-between;padding:1rem .8125rem;gap:1rem;box-shadow:var(--ig-elevation-4);width:100%}[part=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}[part=suggestions-container]{display:flex;flex-direction:column;gap:.75rem}[part=suggestions-container] igc-chip{--ig-size: 3;width:-moz-fit-content;width:fit-content}`;\n"]}

package/components/chat/themes/dark/chat.bootstrap.css.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;

package/components/chat/themes/dark/chat.bootstrap.css.js

@@ -0,0 +1,3 @@
+import { css } from 'lit';
+export const styles = css `:host{--ig-theme: bootstrap}`;
+//# sourceMappingURL=chat.bootstrap.css.js.map

package/components/chat/themes/dark/chat.bootstrap.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"chat.bootstrap.css.js","sourceRoot":"","sources":["../../../../../src/components/chat/themes/dark/chat.bootstrap.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA,8BAA8B,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`:host{--ig-theme: bootstrap}`;\n"]}

package/components/chat/themes/dark/chat.fluent.css.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;

package/components/chat/themes/dark/chat.fluent.css.js

@@ -0,0 +1,3 @@
+import { css } from 'lit';
+export const styles = css `:host{--ig-theme: fluent}`;
+//# sourceMappingURL=chat.fluent.css.js.map

package/components/chat/themes/dark/chat.fluent.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"chat.fluent.css.js","sourceRoot":"","sources":["../../../../../src/components/chat/themes/dark/chat.fluent.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA,2BAA2B,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`:host{--ig-theme: fluent}`;\n"]}

package/components/chat/themes/dark/chat.indigo.css.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;