igniteui-webcomponents 6.0.1 → 6.1.1-alpha.0

package/components/chat/chat-input.d.ts

@@ -0,0 +1,41 @@
+import { LitElement } from 'lit';
+/**
+ *
+ * @element igc-chat-input
+ *
+ */
+export default class IgcChatInputComponent extends LitElement {
+    /** @private */
+    static readonly tagName = "igc-chat-input";
+    static styles: import("lit").CSSResult;
+    private _chat?;
+    static register(): void;
+    private textInputElement;
+    protected acceptedFilesChange(): void;
+    private inputValue;
+    private attachments;
+    private dragClass;
+    private _acceptedTypesCache;
+    constructor();
+    protected firstUpdated(): void;
+    private handleInput;
+    private handleKeyDown;
+    private setupDragAndDrop;
+    private handleDragEnter;
+    private handleDragOver;
+    private handleDragLeave;
+    private handleDrop;
+    private adjustTextareaHeight;
+    private sendMessage;
+    private handleFileUpload;
+    private attachFiles;
+    private updateAcceptedTypesCache;
+    private isFileTypeAccepted;
+    private removeAttachment;
+    protected render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'igc-chat-input': IgcChatInputComponent;
+    }
+}

package/components/chat/chat-input.js

@@ -0,0 +1,254 @@
+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 { LitElement, html } from 'lit';
+import { query, state } from 'lit/decorators.js';
+import IgcIconButtonComponent from '../button/icon-button.js';
+import IgcChipComponent from '../chip/chip.js';
+import { chatContext } from '../common/context.js';
+import { watch } from '../common/decorators/watch.js';
+import { registerComponent } from '../common/definitions/register.js';
+import IgcFileInputComponent from '../file-input/file-input.js';
+import IgcIconComponent from '../icon/icon.js';
+import { registerIconFromText } from '../icon/icon.registry.js';
+import IgcTextareaComponent from '../textarea/textarea.js';
+import { styles } from './themes/input.base.css.js';
+import { attachmentIcon, sendButtonIcon, } from './types.js';
+class IgcChatInputComponent extends LitElement {
+    static register() {
+        registerComponent(IgcChatInputComponent, IgcTextareaComponent, IgcIconButtonComponent, IgcChipComponent, IgcFileInputComponent, IgcIconComponent);
+    }
+    acceptedFilesChange() {
+        this.updateAcceptedTypesCache();
+    }
+    constructor() {
+        super();
+        this.inputValue = '';
+        this.attachments = [];
+        this.dragClass = '';
+        this._acceptedTypesCache = null;
+        registerIconFromText('attachment', attachmentIcon, 'material');
+        registerIconFromText('send-message', sendButtonIcon, 'material');
+    }
+    firstUpdated() {
+        this.setupDragAndDrop();
+        this.updateAcceptedTypesCache();
+    }
+    handleInput(e) {
+        const target = e.target;
+        this.inputValue = target.value;
+        this.adjustTextareaHeight();
+    }
+    handleKeyDown(e) {
+        if (e.key === 'Enter' && !e.shiftKey) {
+            e.preventDefault();
+            this.sendMessage();
+        }
+    }
+    setupDragAndDrop() {
+        const container = this.shadowRoot?.querySelector('.input-container');
+        if (container) {
+            container.addEventListener('dragenter', this.handleDragEnter.bind(this));
+            container.addEventListener('dragover', this.handleDragOver.bind(this));
+            container.addEventListener('dragleave', this.handleDragLeave.bind(this));
+            container.addEventListener('drop', this.handleDrop.bind(this));
+        }
+    }
+    handleDragEnter(e) {
+        e.preventDefault();
+        e.stopPropagation();
+        const files = Array.from(e.dataTransfer?.items || []).filter((item) => item.kind === 'file');
+        const hasValidFiles = files.some((item) => this.isFileTypeAccepted(item.getAsFile(), item.type));
+        this.dragClass = hasValidFiles ? 'dragging' : '';
+    }
+    handleDragOver(e) {
+        e.preventDefault();
+        e.stopPropagation();
+    }
+    handleDragLeave(e) {
+        e.preventDefault();
+        e.stopPropagation();
+        const rect = e.currentTarget.getBoundingClientRect();
+        const x = e.clientX;
+        const y = e.clientY;
+        if (x <= rect.left ||
+            x >= rect.right ||
+            y <= rect.top ||
+            y >= rect.bottom) {
+            this.dragClass = '';
+        }
+    }
+    handleDrop(e) {
+        e.preventDefault();
+        e.stopPropagation();
+        this.dragClass = '';
+        const files = Array.from(e.dataTransfer?.files || []);
+        if (files.length === 0)
+            return;
+        const validFiles = files.filter((file) => this.isFileTypeAccepted(file));
+        this.attachFiles(validFiles);
+    }
+    adjustTextareaHeight() {
+        const textarea = this.textInputElement;
+        if (!textarea)
+            return;
+        textarea.style.height = 'auto';
+        const newHeight = Math.min(textarea.scrollHeight, 120);
+        textarea.style.height = `${newHeight}px`;
+    }
+    sendMessage() {
+        if (!this.inputValue.trim() && this.attachments.length === 0)
+            return;
+        const messageEvent = new CustomEvent('message-created', {
+            detail: { text: this.inputValue, attachments: this.attachments },
+        });
+        this.dispatchEvent(messageEvent);
+        this.inputValue = '';
+        this.attachments = [];
+        if (this.textInputElement) {
+            this.textInputElement.style.height = 'auto';
+        }
+        setTimeout(() => {
+            this.textInputElement?.focus();
+        }, 0);
+    }
+    handleFileUpload(e) {
+        const input = e.target.input;
+        if (!input.files || input.files.length === 0)
+            return;
+        const files = Array.from(input.files);
+        this.attachFiles(files);
+    }
+    attachFiles(files) {
+        const newAttachments = [];
+        let count = this.attachments.length;
+        files.forEach((file) => {
+            const isImage = file.type.startsWith('image/');
+            newAttachments.push({
+                id: Date.now().toString() + count++,
+                url: URL.createObjectURL(file),
+                name: file.name,
+                file: file,
+                thumbnail: isImage ? URL.createObjectURL(file) : undefined,
+            });
+        });
+        this.attachments = [...this.attachments, ...newAttachments];
+    }
+    updateAcceptedTypesCache() {
+        if (!this._chat?.options?.acceptedFiles) {
+            this._acceptedTypesCache = null;
+            return;
+        }
+        const types = this._chat?.options?.acceptedFiles
+            .split(',')
+            .map((type) => type.trim().toLowerCase());
+        this._acceptedTypesCache = {
+            extensions: new Set(types.filter((t) => t.startsWith('.'))),
+            mimeTypes: new Set(types.filter((t) => !t.startsWith('.') && !t.endsWith('/*'))),
+            wildcardTypes: new Set(types.filter((t) => t.endsWith('/*')).map((t) => t.slice(0, -2))),
+        };
+    }
+    isFileTypeAccepted(file, type = '') {
+        if (!this._acceptedTypesCache)
+            return true;
+        if (file === null && type === '')
+            return false;
+        const fileType = file != null ? file.type.toLowerCase() : type.toLowerCase();
+        const fileExtension = file != null
+            ? `.${file.name.split('.').pop()?.toLowerCase()}`
+            : `.${type.split('/').pop()?.toLowerCase()}`;
+        if (this._acceptedTypesCache.extensions.has(fileExtension)) {
+            return true;
+        }
+        if (this._acceptedTypesCache.mimeTypes.has(fileType)) {
+            return true;
+        }
+        const [fileBaseType] = fileType.split('/');
+        return this._acceptedTypesCache.wildcardTypes.has(fileBaseType);
+    }
+    removeAttachment(index) {
+        this.attachments = this.attachments.filter((_, i) => i !== index);
+    }
+    render() {
+        return html `
+      <div class="input-container ${this.dragClass}">
+        ${this._chat?.options?.disableAttachments
+            ? ''
+            : html `
+              <igc-file-input
+                multiple
+                .accept=${this._chat?.options?.acceptedFiles}
+                @igcChange=${this.handleFileUpload}
+              >
+                <igc-icon
+                  slot="file-selector-text"
+                  name="attachment"
+                  collection="material"
+                ></igc-icon>
+              </igc-file-input>
+            `}
+
+        <div class="input-wrapper">
+          <igc-textarea
+            class="text-input"
+            placeholder="Type a message..."
+            rows="1"
+            .value=${this.inputValue}
+            @input=${this.handleInput}
+            @keydown=${this.handleKeyDown}
+          ></igc-textarea>
+        </div>
+
+        <div class="buttons-container">
+          <igc-icon-button
+            name="send-message"
+            collection="material"
+            variant="contained"
+            class="small"
+            ?disabled=${!this.inputValue.trim() &&
+            this.attachments.length === 0}
+            @click=${this.sendMessage}
+          ></igc-icon-button>
+        </div>
+      </div>
+      <div>
+        ${this.attachments?.map((attachment, index) => html `
+            <div class="attachment-wrapper">
+              <igc-chip
+                removable
+                @igcRemove=${() => this.removeAttachment(index)}
+              >
+                <span class="attachment-name">${attachment.name}</span>
+              </igc-chip>
+            </div>
+          `)}
+      </div>
+    `;
+    }
+}
+IgcChatInputComponent.tagName = 'igc-chat-input';
+IgcChatInputComponent.styles = styles;
+export default IgcChatInputComponent;
+__decorate([
+    consume({ context: chatContext, subscribe: true })
+], IgcChatInputComponent.prototype, "_chat", void 0);
+__decorate([
+    query('textarea')
+], IgcChatInputComponent.prototype, "textInputElement", void 0);
+__decorate([
+    watch('acceptedFiles', { waitUntilFirstUpdate: true })
+], IgcChatInputComponent.prototype, "acceptedFilesChange", null);
+__decorate([
+    state()
+], IgcChatInputComponent.prototype, "inputValue", void 0);
+__decorate([
+    state()
+], IgcChatInputComponent.prototype, "attachments", void 0);
+__decorate([
+    state()
+], IgcChatInputComponent.prototype, "dragClass", void 0);
+//# sourceMappingURL=chat-input.js.map

package/components/chat/chat-input.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"chat-input.js","sourceRoot":"","sources":["../../../src/components/chat/chat-input.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AACvC,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACjD,OAAO,sBAAsB,MAAM,0BAA0B,CAAC;AAC9D,OAAO,gBAAgB,MAAM,iBAAiB,CAAC;AAC/C,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AACnD,OAAO,EAAE,KAAK,EAAE,MAAM,+BAA+B,CAAC;AACtD,OAAO,EAAE,iBAAiB,EAAE,MAAM,mCAAmC,CAAC;AACtE,OAAO,qBAAqB,MAAM,6BAA6B,CAAC;AAChE,OAAO,gBAAgB,MAAM,iBAAiB,CAAC;AAC/C,OAAO,EAAE,oBAAoB,EAAE,MAAM,0BAA0B,CAAC;AAChE,OAAO,oBAAoB,MAAM,yBAAyB,CAAC;AAE3D,OAAO,EAAE,MAAM,EAAE,MAAM,4BAA4B,CAAC;AACpD,OAAO,EAEL,cAAc,EACd,cAAc,GACf,MAAM,YAAY,CAAC;AAOpB,MAAqB,qBAAsB,SAAQ,UAAU;IAUpD,MAAM,CAAC,QAAQ;QACpB,iBAAiB,CACf,qBAAqB,EACrB,oBAAoB,EACpB,sBAAsB,EACtB,gBAAgB,EAChB,qBAAqB,EACrB,gBAAgB,CACjB,CAAC;IACJ,CAAC;IAMS,mBAAmB;QAC3B,IAAI,CAAC,wBAAwB,EAAE,CAAC;IAClC,CAAC;IAkBD;QACE,KAAK,EAAE,CAAC;QAhBF,eAAU,GAAG,EAAE,CAAC;QAGhB,gBAAW,GAA2B,EAAE,CAAC;QAGzC,cAAS,GAAG,EAAE,CAAC;QAGf,wBAAmB,GAIhB,IAAI,CAAC;QAId,oBAAoB,CAAC,YAAY,EAAE,cAAc,EAAE,UAAU,CAAC,CAAC;QAC/D,oBAAoB,CAAC,cAAc,EAAE,cAAc,EAAE,UAAU,CAAC,CAAC;IACnE,CAAC;IAEkB,YAAY;QAC7B,IAAI,CAAC,gBAAgB,EAAE,CAAC;QACxB,IAAI,CAAC,wBAAwB,EAAE,CAAC;IAClC,CAAC;IAEO,WAAW,CAAC,CAAQ;QAC1B,MAAM,MAAM,GAAG,CAAC,CAAC,MAA6B,CAAC;QAC/C,IAAI,CAAC,UAAU,GAAG,MAAM,CAAC,KAAK,CAAC;QAC/B,IAAI,CAAC,oBAAoB,EAAE,CAAC;IAC9B,CAAC;IAEO,aAAa,CAAC,CAAgB;QACpC,IAAI,CAAC,CAAC,GAAG,KAAK,OAAO,IAAI,CAAC,CAAC,CAAC,QAAQ,EAAE,CAAC;YACrC,CAAC,CAAC,cAAc,EAAE,CAAC;YACnB,IAAI,CAAC,WAAW,EAAE,CAAC;QACrB,CAAC;IACH,CAAC;IAEO,gBAAgB;QACtB,MAAM,SAAS,GAAG,IAAI,CAAC,UAAU,EAAE,aAAa,CAC9C,kBAAkB,CACJ,CAAC;QACjB,IAAI,SAAS,EAAE,CAAC;YACd,SAAS,CAAC,gBAAgB,CAAC,WAAW,EAAE,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;YACzE,SAAS,CAAC,gBAAgB,CAAC,UAAU,EAAE,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;YACvE,SAAS,CAAC,gBAAgB,CAAC,WAAW,EAAE,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;YACzE,SAAS,CAAC,gBAAgB,CAAC,MAAM,EAAE,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;QACjE,CAAC;IACH,CAAC;IAEO,eAAe,CAAC,CAAY;QAClC,CAAC,CAAC,cAAc,EAAE,CAAC;QACnB,CAAC,CAAC,eAAe,EAAE,CAAC;QAEpB,MAAM,KAAK,GAAG,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,YAAY,EAAE,KAAK,IAAI,EAAE,CAAC,CAAC,MAAM,CAC1D,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,IAAI,KAAK,MAAM,CAC/B,CAAC;QACF,MAAM,aAAa,GAAG,KAAK,CAAC,IAAI,CAAC,CAAC,IAAI,EAAE,EAAE,CACxC,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,SAAS,EAAU,EAAE,IAAI,CAAC,IAAI,CAAC,CAC7D,CAAC;QAEF,IAAI,CAAC,SAAS,GAAG,aAAa,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,CAAC;IACnD,CAAC;IAEO,cAAc,CAAC,CAAY;QACjC,CAAC,CAAC,cAAc,EAAE,CAAC;QACnB,CAAC,CAAC,eAAe,EAAE,CAAC;IACtB,CAAC;IAEO,eAAe,CAAC,CAAY;QAClC,CAAC,CAAC,cAAc,EAAE,CAAC;QACnB,CAAC,CAAC,eAAe,EAAE,CAAC;QAGpB,MAAM,IAAI,GAAI,CAAC,CAAC,aAA6B,CAAC,qBAAqB,EAAE,CAAC;QACtE,MAAM,CAAC,GAAG,CAAC,CAAC,OAAO,CAAC;QACpB,MAAM,CAAC,GAAG,CAAC,CAAC,OAAO,CAAC;QAEpB,IACE,CAAC,IAAI,IAAI,CAAC,IAAI;YACd,CAAC,IAAI,IAAI,CAAC,KAAK;YACf,CAAC,IAAI,IAAI,CAAC,GAAG;YACb,CAAC,IAAI,IAAI,CAAC,MAAM,EAChB,CAAC;YACD,IAAI,CAAC,SAAS,GAAG,EAAE,CAAC;QACtB,CAAC;IACH,CAAC;IAEO,UAAU,CAAC,CAAY;QAC7B,CAAC,CAAC,cAAc,EAAE,CAAC;QACnB,CAAC,CAAC,eAAe,EAAE,CAAC;QACpB,IAAI,CAAC,SAAS,GAAG,EAAE,CAAC;QAEpB,MAAM,KAAK,GAAG,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,YAAY,EAAE,KAAK,IAAI,EAAE,CAAC,CAAC;QACtD,IAAI,KAAK,CAAC,MAAM,KAAK,CAAC;YAAE,OAAO;QAE/B,MAAM,UAAU,GAAG,KAAK,CAAC,MAAM,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,CAAC,CAAC;QAEzE,IAAI,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC;IAC/B,CAAC;IAEO,oBAAoB;QAC1B,MAAM,QAAQ,GAAG,IAAI,CAAC,gBAAgB,CAAC;QACvC,IAAI,CAAC,QAAQ;YAAE,OAAO;QAEtB,QAAQ,CAAC,KAAK,CAAC,MAAM,GAAG,MAAM,CAAC;QAC/B,MAAM,SAAS,GAAG,IAAI,CAAC,GAAG,CAAC,QAAQ,CAAC,YAAY,EAAE,GAAG,CAAC,CAAC;QACvD,QAAQ,CAAC,KAAK,CAAC,MAAM,GAAG,GAAG,SAAS,IAAI,CAAC;IAC3C,CAAC;IAEO,WAAW;QACjB,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,IAAI,EAAE,IAAI,IAAI,CAAC,WAAW,CAAC,MAAM,KAAK,CAAC;YAAE,OAAO;QAErE,MAAM,YAAY,GAAG,IAAI,WAAW,CAAC,iBAAiB,EAAE;YACtD,MAAM,EAAE,EAAE,IAAI,EAAE,IAAI,CAAC,UAAU,EAAE,WAAW,EAAE,IAAI,CAAC,WAAW,EAAE;SACjE,CAAC,CAAC;QAEH,IAAI,CAAC,aAAa,CAAC,YAAY,CAAC,CAAC;QACjC,IAAI,CAAC,UAAU,GAAG,EAAE,CAAC;QACrB,IAAI,CAAC,WAAW,GAAG,EAAE,CAAC;QAEtB,IAAI,IAAI,CAAC,gBAAgB,EAAE,CAAC;YAC1B,IAAI,CAAC,gBAAgB,CAAC,KAAK,CAAC,MAAM,GAAG,MAAM,CAAC;QAC9C,CAAC;QAED,UAAU,CAAC,GAAG,EAAE;YACd,IAAI,CAAC,gBAAgB,EAAE,KAAK,EAAE,CAAC;QACjC,CAAC,EAAE,CAAC,CAAC,CAAC;IACR,CAAC;IAEO,gBAAgB,CAAC,CAAQ;QAC/B,MAAM,KAAK,GAAI,CAAC,CAAC,MAAc,CAAC,KAAyB,CAAC;QAC1D,IAAI,CAAC,KAAK,CAAC,KAAK,IAAI,KAAK,CAAC,KAAK,CAAC,MAAM,KAAK,CAAC;YAAE,OAAO;QAErD,MAAM,KAAK,GAAG,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;QACtC,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;IAC1B,CAAC;IAEO,WAAW,CAAC,KAAa;QAC/B,MAAM,cAAc,GAA2B,EAAE,CAAC;QAClD,IAAI,KAAK,GAAG,IAAI,CAAC,WAAW,CAAC,MAAM,CAAC;QACpC,KAAK,CAAC,OAAO,CAAC,CAAC,IAAI,EAAE,EAAE;YACrB,MAAM,OAAO,GAAG,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC;YAC/C,cAAc,CAAC,IAAI,CAAC;gBAClB,EAAE,EAAE,IAAI,CAAC,GAAG,EAAE,CAAC,QAAQ,EAAE,GAAG,KAAK,EAAE;gBAEnC,GAAG,EAAE,GAAG,CAAC,eAAe,CAAC,IAAI,CAAC;gBAC9B,IAAI,EAAE,IAAI,CAAC,IAAI;gBACf,IAAI,EAAE,IAAI;gBACV,SAAS,EAAE,OAAO,CAAC,CAAC,CAAC,GAAG,CAAC,eAAe,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,SAAS;aAC3D,CAAC,CAAC;QACL,CAAC,CAAC,CAAC;QACH,IAAI,CAAC,WAAW,GAAG,CAAC,GAAG,IAAI,CAAC,WAAW,EAAE,GAAG,cAAc,CAAC,CAAC;IAC9D,CAAC;IAEO,wBAAwB;QAC9B,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE,OAAO,EAAE,aAAa,EAAE,CAAC;YACxC,IAAI,CAAC,mBAAmB,GAAG,IAAI,CAAC;YAChC,OAAO;QACT,CAAC;QAED,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,EAAE,OAAO,EAAE,aAAa;aAC7C,KAAK,CAAC,GAAG,CAAC;aACV,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC,WAAW,EAAE,CAAC,CAAC;QAC5C,IAAI,CAAC,mBAAmB,GAAG;YACzB,UAAU,EAAE,IAAI,GAAG,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,UAAU,CAAC,GAAG,CAAC,CAAC,CAAC;YAC3D,SAAS,EAAE,IAAI,GAAG,CAChB,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,UAAU,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC,CAC7D;YACD,aAAa,EAAE,IAAI,GAAG,CACpB,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CACjE;SACF,CAAC;IACJ,CAAC;IAEO,kBAAkB,CAAC,IAAU,EAAE,IAAI,GAAG,EAAE;QAC9C,IAAI,CAAC,IAAI,CAAC,mBAAmB;YAAE,OAAO,IAAI,CAAC;QAE3C,IAAI,IAAI,KAAK,IAAI,IAAI,IAAI,KAAK,EAAE;YAAE,OAAO,KAAK,CAAC;QAE/C,MAAM,QAAQ,GACZ,IAAI,IAAI,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,WAAW,EAAE,CAAC;QAC9D,MAAM,aAAa,GACjB,IAAI,IAAI,IAAI;YACV,CAAC,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,EAAE,WAAW,EAAE,EAAE;YACjD,CAAC,CAAC,IAAI,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,EAAE,WAAW,EAAE,EAAE,CAAC;QAGjD,IAAI,IAAI,CAAC,mBAAmB,CAAC,UAAU,CAAC,GAAG,CAAC,aAAa,CAAC,EAAE,CAAC;YAC3D,OAAO,IAAI,CAAC;QACd,CAAC;QAGD,IAAI,IAAI,CAAC,mBAAmB,CAAC,SAAS,CAAC,GAAG,CAAC,QAAQ,CAAC,EAAE,CAAC;YACrD,OAAO,IAAI,CAAC;QACd,CAAC;QAGD,MAAM,CAAC,YAAY,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;QAC3C,OAAO,IAAI,CAAC,mBAAmB,CAAC,aAAa,CAAC,GAAG,CAAC,YAAY,CAAC,CAAC;IAClE,CAAC;IAEO,gBAAgB,CAAC,KAAa;QACpC,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,WAAW,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,KAAK,KAAK,CAAC,CAAC;IACpE,CAAC;IAEkB,MAAM;QACvB,OAAO,IAAI,CAAA;oCACqB,IAAI,CAAC,SAAS;UACxC,IAAI,CAAC,KAAK,EAAE,OAAO,EAAE,kBAAkB;YACvC,CAAC,CAAC,EAAE;YACJ,CAAC,CAAC,IAAI,CAAA;;;0BAGU,IAAI,CAAC,KAAK,EAAE,OAAO,EAAE,aAAa;6BAC/B,IAAI,CAAC,gBAAgB;;;;;;;;aAQrC;;;;;;;qBAOQ,IAAI,CAAC,UAAU;qBACf,IAAI,CAAC,WAAW;uBACd,IAAI,CAAC,aAAa;;;;;;;;;;wBAUjB,CAAC,IAAI,CAAC,UAAU,CAAC,IAAI,EAAE;YACnC,IAAI,CAAC,WAAW,CAAC,MAAM,KAAK,CAAC;qBACpB,IAAI,CAAC,WAAW;;;;;UAK3B,IAAI,CAAC,WAAW,EAAE,GAAG,CACrB,CAAC,UAAU,EAAE,KAAK,EAAE,EAAE,CAAC,IAAI,CAAA;;;;6BAIR,GAAG,EAAE,CAAC,IAAI,CAAC,gBAAgB,CAAC,KAAK,CAAC;;gDAEf,UAAU,CAAC,IAAI;;;WAGpD,CACF;;KAEJ,CAAC;IACJ,CAAC;;AApSsB,6BAAO,GAAG,gBAAgB,AAAnB,CAAoB;AAE3B,4BAAM,GAAG,MAAM,AAAT,CAAU;eAJpB,qBAAqB;AAOhC;IADP,OAAO,CAAC,EAAE,OAAO,EAAE,WAAW,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC;oDAClB;AAezB;IADP,KAAK,CAAC,UAAU,CAAC;+DAC6B;AAGrC;IADT,KAAK,CAAC,eAAe,EAAE,EAAE,oBAAoB,EAAE,IAAI,EAAE,CAAC;gEAGtD;AAGO;IADP,KAAK,EAAE;yDACgB;AAGhB;IADP,KAAK,EAAE;0DACyC;AAGzC;IADP,KAAK,EAAE;wDACe","sourcesContent":["import { consume } from '@lit/context';\nimport { LitElement, html } from 'lit';\nimport { query, state } from 'lit/decorators.js';\nimport IgcIconButtonComponent from '../button/icon-button.js';\nimport IgcChipComponent from '../chip/chip.js';\nimport { chatContext } from '../common/context.js';\nimport { watch } from '../common/decorators/watch.js';\nimport { registerComponent } from '../common/definitions/register.js';\nimport IgcFileInputComponent from '../file-input/file-input.js';\nimport IgcIconComponent from '../icon/icon.js';\nimport { registerIconFromText } from '../icon/icon.registry.js';\nimport IgcTextareaComponent from '../textarea/textarea.js';\nimport type IgcChatComponent from './chat.js';\nimport { styles } from './themes/input.base.css.js';\nimport {\n  type IgcMessageAttachment,\n  attachmentIcon,\n  sendButtonIcon,\n} from './types.js';\n\n/**\n *\n * @element igc-chat-input\n *\n */\nexport default class IgcChatInputComponent extends LitElement {\n  /** @private */\n  public static readonly tagName = 'igc-chat-input';\n\n  public static override styles = styles;\n\n  @consume({ context: chatContext, subscribe: true })\n  private _chat?: IgcChatComponent;\n\n  /* blazorSuppress */\n  public static register() {\n    registerComponent(\n      IgcChatInputComponent,\n      IgcTextareaComponent,\n      IgcIconButtonComponent,\n      IgcChipComponent,\n      IgcFileInputComponent,\n      IgcIconComponent\n    );\n  }\n\n  @query('textarea')\n  private textInputElement!: HTMLTextAreaElement;\n\n  @watch('acceptedFiles', { waitUntilFirstUpdate: true })\n  protected acceptedFilesChange(): void {\n    this.updateAcceptedTypesCache();\n  }\n\n  @state()\n  private inputValue = '';\n\n  @state()\n  private attachments: IgcMessageAttachment[] = [];\n\n  @state()\n  private dragClass = '';\n\n  // Cache for accepted file types\n  private _acceptedTypesCache: {\n    extensions: Set<string>;\n    mimeTypes: Set<string>;\n    wildcardTypes: Set<string>;\n  } | null = null;\n\n  constructor() {\n    super();\n    registerIconFromText('attachment', attachmentIcon, 'material');\n    registerIconFromText('send-message', sendButtonIcon, 'material');\n  }\n\n  protected override firstUpdated() {\n    this.setupDragAndDrop();\n    this.updateAcceptedTypesCache();\n  }\n\n  private handleInput(e: Event) {\n    const target = e.target as HTMLTextAreaElement;\n    this.inputValue = target.value;\n    this.adjustTextareaHeight();\n  }\n\n  private handleKeyDown(e: KeyboardEvent) {\n    if (e.key === 'Enter' && !e.shiftKey) {\n      e.preventDefault();\n      this.sendMessage();\n    }\n  }\n\n  private setupDragAndDrop() {\n    const container = this.shadowRoot?.querySelector(\n      '.input-container'\n    ) as HTMLElement;\n    if (container) {\n      container.addEventListener('dragenter', this.handleDragEnter.bind(this));\n      container.addEventListener('dragover', this.handleDragOver.bind(this));\n      container.addEventListener('dragleave', this.handleDragLeave.bind(this));\n      container.addEventListener('drop', this.handleDrop.bind(this));\n    }\n  }\n\n  private handleDragEnter(e: DragEvent) {\n    e.preventDefault();\n    e.stopPropagation();\n\n    const files = Array.from(e.dataTransfer?.items || []).filter(\n      (item) => item.kind === 'file'\n    );\n    const hasValidFiles = files.some((item) =>\n      this.isFileTypeAccepted(item.getAsFile() as File, item.type)\n    );\n\n    this.dragClass = hasValidFiles ? 'dragging' : '';\n  }\n\n  private handleDragOver(e: DragEvent) {\n    e.preventDefault();\n    e.stopPropagation();\n  }\n\n  private handleDragLeave(e: DragEvent) {\n    e.preventDefault();\n    e.stopPropagation();\n\n    // Check if we're actually leaving the container\n    const rect = (e.currentTarget as HTMLElement).getBoundingClientRect();\n    const x = e.clientX;\n    const y = e.clientY;\n\n    if (\n      x <= rect.left ||\n      x >= rect.right ||\n      y <= rect.top ||\n      y >= rect.bottom\n    ) {\n      this.dragClass = '';\n    }\n  }\n\n  private handleDrop(e: DragEvent) {\n    e.preventDefault();\n    e.stopPropagation();\n    this.dragClass = '';\n\n    const files = Array.from(e.dataTransfer?.files || []);\n    if (files.length === 0) return;\n\n    const validFiles = files.filter((file) => this.isFileTypeAccepted(file));\n\n    this.attachFiles(validFiles);\n  }\n\n  private adjustTextareaHeight() {\n    const textarea = this.textInputElement;\n    if (!textarea) return;\n\n    textarea.style.height = 'auto';\n    const newHeight = Math.min(textarea.scrollHeight, 120);\n    textarea.style.height = `${newHeight}px`;\n  }\n\n  private sendMessage() {\n    if (!this.inputValue.trim() && this.attachments.length === 0) return;\n\n    const messageEvent = new CustomEvent('message-created', {\n      detail: { text: this.inputValue, attachments: this.attachments },\n    });\n\n    this.dispatchEvent(messageEvent);\n    this.inputValue = '';\n    this.attachments = [];\n\n    if (this.textInputElement) {\n      this.textInputElement.style.height = 'auto';\n    }\n\n    setTimeout(() => {\n      this.textInputElement?.focus();\n    }, 0);\n  }\n\n  private handleFileUpload(e: Event) {\n    const input = (e.target as any).input as HTMLInputElement;\n    if (!input.files || input.files.length === 0) return;\n\n    const files = Array.from(input.files);\n    this.attachFiles(files);\n  }\n\n  private attachFiles(files: File[]) {\n    const newAttachments: IgcMessageAttachment[] = [];\n    let count = this.attachments.length;\n    files.forEach((file) => {\n      const isImage = file.type.startsWith('image/');\n      newAttachments.push({\n        id: Date.now().toString() + count++,\n        // type: isImage ? 'image' : 'file',\n        url: URL.createObjectURL(file),\n        name: file.name,\n        file: file,\n        thumbnail: isImage ? URL.createObjectURL(file) : undefined,\n      });\n    });\n    this.attachments = [...this.attachments, ...newAttachments];\n  }\n\n  private updateAcceptedTypesCache() {\n    if (!this._chat?.options?.acceptedFiles) {\n      this._acceptedTypesCache = null;\n      return;\n    }\n\n    const types = this._chat?.options?.acceptedFiles\n      .split(',')\n      .map((type) => type.trim().toLowerCase());\n    this._acceptedTypesCache = {\n      extensions: new Set(types.filter((t) => t.startsWith('.'))),\n      mimeTypes: new Set(\n        types.filter((t) => !t.startsWith('.') && !t.endsWith('/*'))\n      ),\n      wildcardTypes: new Set(\n        types.filter((t) => t.endsWith('/*')).map((t) => t.slice(0, -2))\n      ),\n    };\n  }\n\n  private isFileTypeAccepted(file: File, type = ''): boolean {\n    if (!this._acceptedTypesCache) return true;\n\n    if (file === null && type === '') return false;\n\n    const fileType =\n      file != null ? file.type.toLowerCase() : type.toLowerCase();\n    const fileExtension =\n      file != null\n        ? `.${file.name.split('.').pop()?.toLowerCase()}`\n        : `.${type.split('/').pop()?.toLowerCase()}`;\n\n    // Check file extension\n    if (this._acceptedTypesCache.extensions.has(fileExtension)) {\n      return true;\n    }\n\n    // Check exact MIME type\n    if (this._acceptedTypesCache.mimeTypes.has(fileType)) {\n      return true;\n    }\n\n    // Check wildcard MIME types\n    const [fileBaseType] = fileType.split('/');\n    return this._acceptedTypesCache.wildcardTypes.has(fileBaseType);\n  }\n\n  private removeAttachment(index: number) {\n    this.attachments = this.attachments.filter((_, i) => i !== index);\n  }\n\n  protected override render() {\n    return html`\n      <div class=\"input-container ${this.dragClass}\">\n        ${this._chat?.options?.disableAttachments\n          ? ''\n          : html`\n              <igc-file-input\n                multiple\n                .accept=${this._chat?.options?.acceptedFiles}\n                @igcChange=${this.handleFileUpload}\n              >\n                <igc-icon\n                  slot=\"file-selector-text\"\n                  name=\"attachment\"\n                  collection=\"material\"\n                ></igc-icon>\n              </igc-file-input>\n            `}\n\n        <div class=\"input-wrapper\">\n          <igc-textarea\n            class=\"text-input\"\n            placeholder=\"Type a message...\"\n            rows=\"1\"\n            .value=${this.inputValue}\n            @input=${this.handleInput}\n            @keydown=${this.handleKeyDown}\n          ></igc-textarea>\n        </div>\n\n        <div class=\"buttons-container\">\n          <igc-icon-button\n            name=\"send-message\"\n            collection=\"material\"\n            variant=\"contained\"\n            class=\"small\"\n            ?disabled=${!this.inputValue.trim() &&\n            this.attachments.length === 0}\n            @click=${this.sendMessage}\n          ></igc-icon-button>\n        </div>\n      </div>\n      <div>\n        ${this.attachments?.map(\n          (attachment, index) => html`\n            <div class=\"attachment-wrapper\">\n              <igc-chip\n                removable\n                @igcRemove=${() => this.removeAttachment(index)}\n              >\n                <span class=\"attachment-name\">${attachment.name}</span>\n              </igc-chip>\n            </div>\n          `\n        )}\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'igc-chat-input': IgcChatInputComponent;\n  }\n}\n"]}

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

@@ -0,0 +1,24 @@
+import { LitElement } from 'lit';
+/**
+ *
+ * @element igc-chat-message-list
+ *
+ */
+export default class IgcChatMessageListComponent extends LitElement {
+    /** @private */
+    static readonly tagName = "igc-chat-message-list";
+    static styles: import("lit").CSSResult;
+    private _chat?;
+    static register(): void;
+    private formatDate;
+    private groupMessagesByDate;
+    private scrollToBottom;
+    protected updated(): void;
+    protected firstUpdated(): void;
+    protected render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'igc-chat-message-list': IgcChatMessageListComponent;
+    }
+}

package/components/chat/chat-message-list.js

@@ -0,0 +1,88 @@
+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 { LitElement, html } from 'lit';
+import { repeat } from 'lit/directives/repeat.js';
+import { chatContext } from '../common/context.js';
+import { registerComponent } from '../common/definitions/register.js';
+import IgcChatMessageComponent from './chat-message.js';
+import { styles } from './themes/message-list.base.css.js';
+class IgcChatMessageListComponent extends LitElement {
+    static register() {
+        registerComponent(IgcChatMessageListComponent, IgcChatMessageComponent);
+    }
+    formatDate(date) {
+        const today = new Date();
+        const yesterday = new Date(today);
+        yesterday.setDate(yesterday.getDate() - 1);
+        if (date.toDateString() === today.toDateString()) {
+            return 'Today';
+        }
+        if (date.toDateString() === yesterday.toDateString()) {
+            return 'Yesterday';
+        }
+        return date.toLocaleDateString('en-US', {
+            weekday: 'long',
+            month: 'short',
+            day: 'numeric',
+        });
+    }
+    groupMessagesByDate(messages) {
+        const grouped = {};
+        messages.forEach((message) => {
+            const dateStr = this.formatDate(message.timestamp);
+            if (!grouped[dateStr]) {
+                grouped[dateStr] = [];
+            }
+            grouped[dateStr].push(message);
+        });
+        return Object.keys(grouped).map((date) => ({
+            date,
+            messages: grouped[date],
+        }));
+    }
+    scrollToBottom() {
+        requestAnimationFrame(() => {
+            const container = this.shadowRoot?.host;
+            if (container) {
+                container.scrollTop = container.scrollHeight;
+            }
+        });
+    }
+    updated() {
+        if (!this._chat?.options?.disableAutoScroll) {
+            this.scrollToBottom();
+        }
+    }
+    firstUpdated() {
+        if (!this._chat?.options?.disableAutoScroll) {
+            this.scrollToBottom();
+        }
+    }
+    render() {
+        const groupedMessages = this.groupMessagesByDate(this._chat?.messages ?? []);
+        return html `
+      <div class='message-container'></div>
+        <div class="message-list">
+          ${repeat(groupedMessages, (group) => group.date, (group) => html `
+              ${repeat(group.messages, (message) => message.id, (message) => html `
+                  <igc-chat-message .message=${message}></igc-chat-message>
+                `)}
+            `)}
+          ${''}
+        </div>
+      </div>
+    `;
+    }
+}
+IgcChatMessageListComponent.tagName = 'igc-chat-message-list';
+IgcChatMessageListComponent.styles = styles;
+export default IgcChatMessageListComponent;
+__decorate([
+    consume({ context: chatContext, subscribe: true })
+], IgcChatMessageListComponent.prototype, "_chat", void 0);
+//# sourceMappingURL=chat-message-list.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"chat-message-list.js","sourceRoot":"","sources":["../../../src/components/chat/chat-message-list.ts"],"names":[],"mappings":"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","sourcesContent":["import { consume } from '@lit/context';\nimport { LitElement, html } from 'lit';\nimport { repeat } from 'lit/directives/repeat.js';\nimport { chatContext } from '../common/context.js';\nimport { registerComponent } from '../common/definitions/register.js';\nimport IgcChatMessageComponent from './chat-message.js';\nimport type IgcChatComponent from './chat.js';\nimport { styles } from './themes/message-list.base.css.js';\nimport type { IgcMessage } from './types.js';\n\n/**\n *\n * @element igc-chat-message-list\n *\n */\nexport default class IgcChatMessageListComponent extends LitElement {\n  /** @private */\n  public static readonly tagName = 'igc-chat-message-list';\n\n  public static override styles = styles;\n\n  @consume({ context: chatContext, subscribe: true })\n  private _chat?: IgcChatComponent;\n\n  /* blazorSuppress */\n  public static register() {\n    registerComponent(IgcChatMessageListComponent, IgcChatMessageComponent);\n  }\n\n  private formatDate(date: Date): string {\n    const today = new Date();\n    const yesterday = new Date(today);\n    yesterday.setDate(yesterday.getDate() - 1);\n\n    if (date.toDateString() === today.toDateString()) {\n      return 'Today';\n    }\n\n    if (date.toDateString() === yesterday.toDateString()) {\n      return 'Yesterday';\n    }\n\n    return date.toLocaleDateString('en-US', {\n      weekday: 'long',\n      month: 'short',\n      day: 'numeric',\n    });\n  }\n\n  private groupMessagesByDate(\n    messages: IgcMessage[]\n  ): { date: string; messages: IgcMessage[] }[] {\n    const grouped: { [key: string]: IgcMessage[] } = {};\n\n    messages.forEach((message) => {\n      const dateStr = this.formatDate(message.timestamp);\n      if (!grouped[dateStr]) {\n        grouped[dateStr] = [];\n      }\n      grouped[dateStr].push(message);\n    });\n\n    return Object.keys(grouped).map((date) => ({\n      date,\n      messages: grouped[date],\n    }));\n  }\n\n  private scrollToBottom() {\n    requestAnimationFrame(() => {\n      const container = this.shadowRoot?.host as HTMLElement;\n      if (container) {\n        container.scrollTop = container.scrollHeight;\n      }\n    });\n  }\n\n  protected override updated() {\n    if (!this._chat?.options?.disableAutoScroll) {\n      this.scrollToBottom();\n    }\n  }\n\n  protected override firstUpdated() {\n    if (!this._chat?.options?.disableAutoScroll) {\n      this.scrollToBottom();\n    }\n  }\n\n  protected override render() {\n    const groupedMessages = this.groupMessagesByDate(\n      this._chat?.messages ?? []\n    );\n\n    return html`\n      <div class='message-container'></div>\n        <div class=\"message-list\">\n          ${repeat(\n            groupedMessages,\n            (group) => group.date,\n            (group) => html`\n              ${repeat(\n                group.messages,\n                (message) => message.id,\n                (message) => html`\n                  <igc-chat-message .message=${message}></igc-chat-message>\n                `\n              )}\n            `\n          )}\n          ${\n            ''\n            // this.isAiResponding\n            //   ? html`\n            //       <div class=\"typing-indicator\">\n            //         <div class=\"typing-dot\"></div>\n            //         <div class=\"typing-dot\"></div>\n            //         <div class=\"typing-dot\"></div>\n            //       </div>\n            //     `\n            //   : ''\n          }\n        </div>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'igc-chat-message-list': IgcChatMessageListComponent;\n  }\n}\n"]}

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

@@ -0,0 +1,21 @@
+import { LitElement } from 'lit';
+import type { IgcMessage } from './types.js';
+/**
+ *
+ * @element igc-chat-message
+ *
+ */
+export default class IgcChatMessageComponent extends LitElement {
+    /** @private */
+    static readonly tagName = "igc-chat-message";
+    static styles: import("lit").CSSResult;
+    private _chat?;
+    static register(): void;
+    message: IgcMessage | undefined;
+    protected render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'igc-chat-message': IgcChatMessageComponent;
+    }
+}

package/components/chat/chat-message.js

@@ -0,0 +1,52 @@
+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 { LitElement, html } from 'lit';
+import { property } from 'lit/decorators.js';
+import IgcAvatarComponent from '../avatar/avatar.js';
+import { chatContext } from '../common/context.js';
+import { registerComponent } from '../common/definitions/register.js';
+import { renderMarkdown } from './markdown-util.js';
+import IgcMessageAttachmentsComponent from './message-attachments.js';
+import { styles } from './themes/message.base.css.js';
+class IgcChatMessageComponent extends LitElement {
+    static register() {
+        registerComponent(IgcChatMessageComponent, IgcMessageAttachmentsComponent, IgcAvatarComponent);
+    }
+    render() {
+        const containerClass = `message-container ${this.message?.sender === 'user' ? 'sent' : ''}`;
+        return html `
+      <div class=${containerClass}>
+        <div class="bubble">
+          ${this.message?.text.trim()
+            ? html ` <div>${renderMarkdown(this.message?.text)}</div>`
+            : ''}
+          ${this.message?.attachments && this.message?.attachments.length > 0
+            ? html `<igc-message-attachments
+                .attachments=${this.message?.attachments}
+              >
+              </igc-message-attachments>`
+            : ''}
+          ${this._chat?.options?.templates?.messageActionsTemplate &&
+            this.message
+            ? this._chat.options.templates.messageActionsTemplate(this.message)
+            : ''}
+        </div>
+      </div>
+    `;
+    }
+}
+IgcChatMessageComponent.tagName = 'igc-chat-message';
+IgcChatMessageComponent.styles = styles;
+export default IgcChatMessageComponent;
+__decorate([
+    consume({ context: chatContext, subscribe: true })
+], IgcChatMessageComponent.prototype, "_chat", void 0);
+__decorate([
+    property({ reflect: true, attribute: false })
+], IgcChatMessageComponent.prototype, "message", void 0);
+//# sourceMappingURL=chat-message.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"chat-message.js","sourceRoot":"","sources":["../../../src/components/chat/chat-message.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AACvC,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,kBAAkB,MAAM,qBAAqB,CAAC;AACrD,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AACnD,OAAO,EAAE,iBAAiB,EAAE,MAAM,mCAAmC,CAAC;AAEtE,OAAO,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AACpD,OAAO,8BAA8B,MAAM,0BAA0B,CAAC;AACtE,OAAO,EAAE,MAAM,EAAE,MAAM,8BAA8B,CAAC;AAQtD,MAAqB,uBAAwB,SAAQ,UAAU;IAUtD,MAAM,CAAC,QAAQ;QACpB,iBAAiB,CACf,uBAAuB,EACvB,8BAA8B,EAC9B,kBAAkB,CACnB,CAAC;IACJ,CAAC;IAKkB,MAAM;QACvB,MAAM,cAAc,GAAG,qBAAqB,IAAI,CAAC,OAAO,EAAE,MAAM,KAAK,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC;QAE5F,OAAO,IAAI,CAAA;mBACI,cAAc;;YAErB,IAAI,CAAC,OAAO,EAAE,IAAI,CAAC,IAAI,EAAE;YACzB,CAAC,CAAC,IAAI,CAAA,SAAS,cAAc,CAAC,IAAI,CAAC,OAAO,EAAE,IAAI,CAAC,QAAQ;YACzD,CAAC,CAAC,EAAE;YACJ,IAAI,CAAC,OAAO,EAAE,WAAW,IAAI,IAAI,CAAC,OAAO,EAAE,WAAW,CAAC,MAAM,GAAG,CAAC;YACjE,CAAC,CAAC,IAAI,CAAA;+BACa,IAAI,CAAC,OAAO,EAAE,WAAW;;yCAEf;YAC7B,CAAC,CAAC,EAAE;YACJ,IAAI,CAAC,KAAK,EAAE,OAAO,EAAE,SAAS,EAAE,sBAAsB;YACxD,IAAI,CAAC,OAAO;YACV,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,SAAS,CAAC,sBAAsB,CAAC,IAAI,CAAC,OAAO,CAAC;YACnE,CAAC,CAAC,EAAE;;;KAGX,CAAC;IACJ,CAAC;;AAzCsB,+BAAO,GAAG,kBAAkB,CAAC;AAE7B,8BAAM,GAAG,MAAM,CAAC;eAJpB,uBAAuB;AAOlC;IADP,OAAO,CAAC,EAAE,OAAO,EAAE,WAAW,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC;sDAClB;AAY1B;IADN,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC;wDACP","sourcesContent":["import { consume } from '@lit/context';\nimport { LitElement, html } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport IgcAvatarComponent from '../avatar/avatar.js';\nimport { chatContext } from '../common/context.js';\nimport { registerComponent } from '../common/definitions/register.js';\nimport type IgcChatComponent from './chat.js';\nimport { renderMarkdown } from './markdown-util.js';\nimport IgcMessageAttachmentsComponent from './message-attachments.js';\nimport { styles } from './themes/message.base.css.js';\nimport type { IgcMessage } from './types.js';\n\n/**\n *\n * @element igc-chat-message\n *\n */\nexport default class IgcChatMessageComponent extends LitElement {\n  /** @private */\n  public static readonly tagName = 'igc-chat-message';\n\n  public static override styles = styles;\n\n  @consume({ context: chatContext, subscribe: true })\n  private _chat?: IgcChatComponent;\n\n  /* blazorSuppress */\n  public static register() {\n    registerComponent(\n      IgcChatMessageComponent,\n      IgcMessageAttachmentsComponent,\n      IgcAvatarComponent\n    );\n  }\n\n  @property({ reflect: true, attribute: false })\n  public message: IgcMessage | undefined;\n\n  protected override render() {\n    const containerClass = `message-container ${this.message?.sender === 'user' ? 'sent' : ''}`;\n\n    return html`\n      <div class=${containerClass}>\n        <div class=\"bubble\">\n          ${this.message?.text.trim()\n            ? html` <div>${renderMarkdown(this.message?.text)}</div>`\n            : ''}\n          ${this.message?.attachments && this.message?.attachments.length > 0\n            ? html`<igc-message-attachments\n                .attachments=${this.message?.attachments}\n              >\n              </igc-message-attachments>`\n            : ''}\n          ${this._chat?.options?.templates?.messageActionsTemplate &&\n          this.message\n            ? this._chat.options.templates.messageActionsTemplate(this.message)\n            : ''}\n        </div>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'igc-chat-message': IgcChatMessageComponent;\n  }\n}\n"]}

package/components/chat/chat.d.ts

@@ -0,0 +1,41 @@
+import { LitElement } from 'lit';
+import type { Constructor } from '../common/mixins/constructor.js';
+import type { IgcChatOptions, IgcMessage, IgcMessageAttachment } from './types.js';
+export interface IgcChatComponentEventMap {
+    igcMessageCreated: CustomEvent<IgcMessage>;
+    igcAttachmentClick: CustomEvent<IgcMessageAttachment>;
+    igcAttachmentChange: CustomEvent<IgcMessageAttachment>;
+    igcTypingChange: CustomEvent<boolean>;
+    igcInputFocus: CustomEvent<void>;
+    igcInputBlur: CustomEvent<void>;
+    igcInputChange: CustomEvent<string>;
+    igcMessageCopied: CustomEvent<IgcMessage>;
+}
+declare const IgcChatComponent_base: Constructor<import("../common/mixins/event-emitter.js").EventEmitterInterface<IgcChatComponentEventMap>> & Constructor<LitElement>;
+/**
+ *
+ * @element igc-chat
+ *
+ */
+export default class IgcChatComponent extends IgcChatComponent_base {
+    /** @private */
+    static readonly tagName = "igc-chat";
+    static styles: import("lit").CSSResult;
+    static register(): void;
+    private _context;
+    messages: IgcMessage[];
+    options?: IgcChatOptions;
+    protected contextChanged(): void;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private handleSendMessage;
+    private handleAttachmentClick;
+    protected firstUpdated(): void;
+    protected render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'igc-chat': IgcChatComponent;
+    }
+}
+export {};