igniteui-webcomponents 6.1.0 → 6.1.1-alpha.0

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 {};

package/components/chat/chat.js

@@ -0,0 +1,98 @@
+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 { LitElement, html } from 'lit';
+import { property } from 'lit/decorators.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 { styles } from './themes/chat.base.css.js';
+class IgcChatComponent extends EventEmitterMixin(LitElement) {
+    constructor() {
+        super(...arguments);
+        this._context = new ContextProvider(this, {
+            context: chatContext,
+            initialValue: this,
+        });
+        this.messages = [];
+    }
+    static register() {
+        registerComponent(IgcChatComponent, IgcChatInputComponent, IgcChatMessageListComponent, IgcButtonComponent);
+    }
+    contextChanged() {
+        this._context.setValue(this, true);
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.addEventListener('message-created', this.handleSendMessage);
+        this.addEventListener('attachment-click', this.handleAttachmentClick);
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.removeEventListener('message-created', this.handleSendMessage);
+        this.removeEventListener('attachment-click', this.handleAttachmentClick);
+    }
+    handleSendMessage(e) {
+        const text = e.detail.text;
+        const attachments = e.detail.attachments || [];
+        if (!text.trim() && attachments.length === 0)
+            return;
+        const newMessage = {
+            id: Date.now().toString(),
+            text,
+            sender: 'user',
+            timestamp: new Date(),
+            attachments,
+        };
+        this.messages = [...this.messages, newMessage];
+        this.emitEvent('igcMessageCreated', { detail: newMessage });
+    }
+    handleAttachmentClick(e) {
+        const attachmentArgs = e.detail.attachment;
+        this.emitEvent('igcAttachmentClick', { detail: attachmentArgs });
+    }
+    firstUpdated() {
+        this._context.setValue(this, true);
+    }
+    render() {
+        return html `
+      <div class="chat-container">
+        <div class="header" part="header">
+          <div class="info">
+            <slot name="prefix" part="prefix"></slot>
+            <slot name="title" part="title">${this.options?.headerText}</slot>
+          </div>
+          <slot name="actions" class="actions">
+            <igc-button variant="flat">⋯</igc-button>
+          </slot>
+        </div>
+        <igc-chat-message-list> </igc-chat-message-list>
+        <igc-chat-input
+          @message-created=${this.handleSendMessage}
+        ></igc-chat-input>
+      </div>
+    `;
+    }
+}
+IgcChatComponent.tagName = 'igc-chat';
+IgcChatComponent.styles = styles;
+export default IgcChatComponent;
+__decorate([
+    property({ reflect: true, attribute: false })
+], IgcChatComponent.prototype, "messages", void 0);
+__decorate([
+    property({ attribute: false })
+], IgcChatComponent.prototype, "options", void 0);
+__decorate([
+    watch('options'),
+    watch('messages')
+], 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 { LitElement, html } from 'lit';\nimport { property } from 'lit/decorators.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 { styles } from './themes/chat.base.css.js';\nimport type {\n  IgcChatOptions,\n  IgcMessage,\n  IgcMessageAttachment,\n} from './types.js';\n\nexport interface IgcChatComponentEventMap {\n  igcMessageCreated: CustomEvent<IgcMessage>;\n  igcAttachmentClick: CustomEvent<IgcMessageAttachment>;\n  igcAttachmentChange: CustomEvent<IgcMessageAttachment>;\n  igcTypingChange: CustomEvent<boolean>;\n  igcInputFocus: CustomEvent<void>;\n  igcInputBlur: CustomEvent<void>;\n  igcInputChange: CustomEvent<string>;\n  igcMessageCopied: CustomEvent<IgcMessage>;\n}\n\n/**\n *\n * @element igc-chat\n *\n */\nexport default class IgcChatComponent extends EventEmitterMixin<\n  IgcChatComponentEventMap,\n  Constructor<LitElement>\n>(LitElement) {\n  /** @private */\n  public static readonly tagName = 'igc-chat';\n\n  public static styles = styles;\n\n  /* blazorSuppress */\n  public static register() {\n    registerComponent(\n      IgcChatComponent,\n      IgcChatInputComponent,\n      IgcChatMessageListComponent,\n      IgcButtonComponent\n    );\n  }\n\n  private _context = new ContextProvider(this, {\n    context: chatContext,\n    initialValue: this,\n  });\n\n  @property({ reflect: true, attribute: false })\n  public messages: IgcMessage[] = [];\n\n  @property({ attribute: false })\n  public options?: IgcChatOptions;\n\n  @watch('options')\n  @watch('messages')\n  protected contextChanged() {\n    this._context.setValue(this, true);\n  }\n\n  public override connectedCallback() {\n    super.connectedCallback();\n    this.addEventListener(\n      'message-created',\n      this.handleSendMessage as EventListener\n    );\n    this.addEventListener(\n      'attachment-click',\n      this.handleAttachmentClick as EventListener\n    );\n  }\n\n  public override disconnectedCallback() {\n    super.disconnectedCallback();\n    this.removeEventListener(\n      'message-created',\n      this.handleSendMessage as EventListener\n    );\n    this.removeEventListener(\n      'attachment-click',\n      this.handleAttachmentClick as EventListener\n    );\n  }\n\n  private handleSendMessage(e: CustomEvent) {\n    const text = e.detail.text;\n    const attachments = e.detail.attachments || [];\n\n    if (!text.trim() && attachments.length === 0) return;\n\n    const newMessage: IgcMessage = {\n      id: Date.now().toString(),\n      text,\n      sender: 'user',\n      timestamp: new Date(),\n      attachments,\n    };\n\n    this.messages = [...this.messages, newMessage];\n    this.emitEvent('igcMessageCreated', { detail: newMessage });\n  }\n\n  private handleAttachmentClick(e: CustomEvent) {\n    const attachmentArgs = e.detail.attachment;\n    this.emitEvent('igcAttachmentClick', { detail: attachmentArgs });\n  }\n\n  protected override firstUpdated() {\n    this._context.setValue(this, true);\n  }\n\n  protected override render() {\n    return html`\n      <div class=\"chat-container\">\n        <div class=\"header\" part=\"header\">\n          <div class=\"info\">\n            <slot name=\"prefix\" part=\"prefix\"></slot>\n            <slot name=\"title\" part=\"title\">${this.options?.headerText}</slot>\n          </div>\n          <slot name=\"actions\" class=\"actions\">\n            <igc-button variant=\"flat\">⋯</igc-button>\n          </slot>\n        </div>\n        <igc-chat-message-list> </igc-chat-message-list>\n        <igc-chat-input\n          @message-created=${this.handleSendMessage}\n        ></igc-chat-input>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\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,EAAuB,IAAI,EAAE,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 { type TemplateResult, html } 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,28 @@
+import { LitElement } from 'lit';
+import { type IgcMessageAttachment } from './types.js';
+/**
+ *
+ * @element igc-message-attachments
+ *
+ */
+export default class IgcMessageAttachmentsComponent extends LitElement {
+    /** @private */
+    static readonly tagName = "igc-message-attachments";
+    static styles: import("lit").CSSResult;
+    private _chat?;
+    static register(): void;
+    attachments: IgcMessageAttachment[];
+    previewImage: string;
+    constructor();
+    private openImagePreview;
+    private closeImagePreview;
+    private handleToggle;
+    private handleAttachmentClick;
+    private getURL;
+    protected render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'igc-message-attachments': IgcMessageAttachmentsComponent;
+    }
+}

package/components/chat/message-attachments.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 { consume } from '@lit/context';
+import { html, LitElement } 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 { closeIcon, fileIcon, imageIcon, moreIcon, previewIcon, } from './types.js';
+class IgcMessageAttachmentsComponent extends LitElement {
+    static register() {
+        registerComponent(IgcMessageAttachmentsComponent, IgcIconComponent, IgcIconButtonComponent, IgcExpansionPanelComponent);
+    }
+    constructor() {
+        super();
+        this.attachments = [];
+        this.previewImage = '';
+        registerIconFromText('close', closeIcon, 'material');
+        registerIconFromText('file', fileIcon, 'material');
+        registerIconFromText('image', imageIcon, 'material');
+        registerIconFromText('preview', previewIcon, 'material');
+        registerIconFromText('more', moreIcon, 'material');
+    }
+    openImagePreview(attachment) {
+        this.previewImage = this.getURL(attachment);
+    }
+    closeImagePreview() {
+        this.previewImage = '';
+    }
+    handleToggle(e, attachment) {
+        this.handleAttachmentClick(attachment);
+        e.preventDefault();
+    }
+    handleAttachmentClick(attachment) {
+        this.dispatchEvent(new CustomEvent('attachment-click', {
+            detail: { attachment },
+            bubbles: true,
+            composed: true,
+        }));
+    }
+    getURL(attachment) {
+        if (attachment.url) {
+            return attachment.url;
+        }
+        if (attachment.file) {
+            return URL.createObjectURL(attachment.file);
+        }
+        return '';
+    }
+    render() {
+        return html `
+      <div class="attachments-container">
+        ${this._chat?.options?.templates?.attachmentTemplate
+            ? this._chat.options.templates.attachmentTemplate(this.attachments)
+            : html ` ${this.attachments.map((attachment) => html ` <igc-expansion-panel
+                  indicator-position="none"
+                  .open=${attachment.type === 'image' ||
+                attachment.file?.type.startsWith('image/') ||
+                this._chat?.options?.templates?.attachmentContentTemplate}
+                  @igcClosing=${(ev) => this.handleToggle(ev, attachment)}
+                  @igcOpening=${(ev) => this.handleToggle(ev, attachment)}
+                >
+                  <div slot="title" class="attachment">
+                    <div class="details">
+                      ${this._chat?.options?.templates?.attachmentHeaderTemplate
+                ? this._chat.options.templates.attachmentHeaderTemplate(this.attachments)
+                : html `
+                            <slot name="attachment-icon">
+                              ${attachment.type === 'image' ||
+                    attachment.file?.type.startsWith('image/')
+                    ? html `<igc-icon
+                                    name="image"
+                                    collection="material"
+                                    class="medium"
+                                  ></igc-icon>`
+                    : html `<igc-icon
+                                    name="file"
+                                    collection="material"
+                                    class="medium"
+                                  ></igc-icon>`}
+                            </slot>
+                            <slot name="attachment-name">
+                              <span class="file-name">${attachment.name}</span>
+                            </slot>
+                          `}
+                    </div>
+                    <div class="actions">
+                      ${this._chat?.options?.templates
+                ?.attachmentActionsTemplate
+                ? this._chat.options.templates.attachmentActionsTemplate(this.attachments)
+                : html `
+                            <slot name="attachment-actions">
+                              ${attachment.type === 'image' ||
+                    attachment.file?.type.startsWith('image/')
+                    ? html ` <igc-icon-button
+                                    name="preview"
+                                    collection="material"
+                                    variant="flat"
+                                    class="small"
+                                    @click=${() => this.openImagePreview(attachment)}
+                                  ></igc-icon-button>`
+                    : ''}
+                              <igc-icon-button
+                                name="more"
+                                collection="material"
+                                variant="flat"
+                                class="small"
+                              ></igc-icon-button>
+                            </slot>
+                          `}
+                    </div>
+                  </div>
+
+                  ${this._chat?.options?.templates?.attachmentContentTemplate
+                ? this._chat.options.templates.attachmentContentTemplate(this.attachments)
+                : html `
+                        <slot name="attachment-content">
+                          ${attachment.type === 'image' ||
+                    attachment.file?.type.startsWith('image/')
+                    ? html ` <img
+                                class="image-attachment"
+                                src=${this.getURL(attachment)}
+                                alt=${attachment.name}
+                              />`
+                    : ''}
+                        </slot>
+                      `}
+                </igc-expansion-panel>`)}`}
+      </div>
+
+      ${this.previewImage
+            ? html `
+            <div class="image-overlay" @click=${this.closeImagePreview}>
+              <img class="overlay-image" src=${this.previewImage} />
+              <igc-icon-button
+                name="close"
+                collection="material"
+                variant="contained"
+                class="small"
+                @click=${this.closeImagePreview}
+              ></igc-icon-button>
+            </div>
+          `
+            : ''}
+    `;
+    }
+}
+IgcMessageAttachmentsComponent.tagName = 'igc-message-attachments';
+IgcMessageAttachmentsComponent.styles = styles;
+export default IgcMessageAttachmentsComponent;
+__decorate([
+    consume({ context: chatContext, subscribe: true })
+], IgcMessageAttachmentsComponent.prototype, "_chat", void 0);
+__decorate([
+    property({ type: Array })
+], IgcMessageAttachmentsComponent.prototype, "attachments", void 0);
+__decorate([
+    property({ type: String })
+], IgcMessageAttachmentsComponent.prototype, "previewImage", 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 } 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 IgcChatComponent from './chat.js';\nimport { styles } from './themes/message-attachments.base.css.js';\nimport {\n  closeIcon,\n  fileIcon,\n  type IgcMessageAttachment,\n  imageIcon,\n  moreIcon,\n  previewIcon,\n} from './types.js';\n\n/**\n *\n * @element igc-message-attachments\n *\n */\nexport default class IgcMessageAttachmentsComponent extends LitElement {\n  /** @private */\n  public static readonly tagName = 'igc-message-attachments';\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      IgcMessageAttachmentsComponent,\n      IgcIconComponent,\n      IgcIconButtonComponent,\n      IgcExpansionPanelComponent\n    );\n  }\n  @property({ type: Array })\n  attachments: IgcMessageAttachment[] = [];\n\n  @property({ type: String })\n  previewImage = '';\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 openImagePreview(attachment: IgcMessageAttachment) {\n    this.previewImage = this.getURL(attachment);\n  }\n\n  private closeImagePreview() {\n    this.previewImage = '';\n  }\n\n  private handleToggle(e: CustomEvent, attachment: IgcMessageAttachment) {\n    this.handleAttachmentClick(attachment);\n    e.preventDefault();\n  }\n\n  private handleAttachmentClick(attachment: IgcMessageAttachment) {\n    this.dispatchEvent(\n      new CustomEvent('attachment-click', {\n        detail: { attachment },\n        bubbles: true,\n        composed: true,\n      })\n    );\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  protected override render() {\n    return html`\n      <div class=\"attachments-container\">\n        ${this._chat?.options?.templates?.attachmentTemplate\n          ? this._chat.options.templates.attachmentTemplate(this.attachments)\n          : html` ${this.attachments.map(\n              (attachment) =>\n                html` <igc-expansion-panel\n                  indicator-position=\"none\"\n                  .open=${attachment.type === 'image' ||\n                  attachment.file?.type.startsWith('image/') ||\n                  this._chat?.options?.templates?.attachmentContentTemplate}\n                  @igcClosing=${(ev: CustomEvent) =>\n                    this.handleToggle(ev, attachment)}\n                  @igcOpening=${(ev: CustomEvent) =>\n                    this.handleToggle(ev, attachment)}\n                >\n                  <div slot=\"title\" class=\"attachment\">\n                    <div class=\"details\">\n                      ${this._chat?.options?.templates?.attachmentHeaderTemplate\n                        ? this._chat.options.templates.attachmentHeaderTemplate(\n                            this.attachments\n                          )\n                        : html`\n                            <slot name=\"attachment-icon\">\n                              ${attachment.type === 'image' ||\n                              attachment.file?.type.startsWith('image/')\n                                ? html`<igc-icon\n                                    name=\"image\"\n                                    collection=\"material\"\n                                    class=\"medium\"\n                                  ></igc-icon>`\n                                : html`<igc-icon\n                                    name=\"file\"\n                                    collection=\"material\"\n                                    class=\"medium\"\n                                  ></igc-icon>`}\n                            </slot>\n                            <slot name=\"attachment-name\">\n                              <span class=\"file-name\">${attachment.name}</span>\n                            </slot>\n                          `}\n                    </div>\n                    <div class=\"actions\">\n                      ${this._chat?.options?.templates\n                        ?.attachmentActionsTemplate\n                        ? this._chat.options.templates.attachmentActionsTemplate(\n                            this.attachments\n                          )\n                        : html`\n                            <slot name=\"attachment-actions\">\n                              ${attachment.type === 'image' ||\n                              attachment.file?.type.startsWith('image/')\n                                ? html` <igc-icon-button\n                                    name=\"preview\"\n                                    collection=\"material\"\n                                    variant=\"flat\"\n                                    class=\"small\"\n                                    @click=${() =>\n                                      this.openImagePreview(attachment)}\n                                  ></igc-icon-button>`\n                                : ''}\n                              <igc-icon-button\n                                name=\"more\"\n                                collection=\"material\"\n                                variant=\"flat\"\n                                class=\"small\"\n                              ></igc-icon-button>\n                            </slot>\n                          `}\n                    </div>\n                  </div>\n\n                  ${this._chat?.options?.templates?.attachmentContentTemplate\n                    ? this._chat.options.templates.attachmentContentTemplate(\n                        this.attachments\n                      )\n                    : html`\n                        <slot name=\"attachment-content\">\n                          ${attachment.type === 'image' ||\n                          attachment.file?.type.startsWith('image/')\n                            ? html` <img\n                                class=\"image-attachment\"\n                                src=${this.getURL(attachment)}\n                                alt=${attachment.name}\n                              />`\n                            : ''}\n                        </slot>\n                      `}\n                </igc-expansion-panel>`\n            )}`}\n      </div>\n\n      ${this.previewImage\n        ? html`\n            <div class=\"image-overlay\" @click=${this.closeImagePreview}>\n              <img class=\"overlay-image\" src=${this.previewImage} />\n              <igc-icon-button\n                name=\"close\"\n                collection=\"material\"\n                variant=\"contained\"\n                class=\"small\"\n                @click=${this.closeImagePreview}\n              ></igc-icon-button>\n            </div>\n          `\n        : ''}\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;border-radius:12px;overflow:hidden;box-shadow:0 8px 24px #1f1f1f;display:flex;flex-direction:column}.chat-container{display:flex;flex-direction:column;height:100%}.header{display:flex;align-items:center;justify-content:space-between;padding:10px;background-color:#edeff0}.info{display:flex;align-items:center;gap:12px}.avatar{width:40px;height:40px;border-radius:50%;-o-object-fit:cover;object-fit:cover}.avatar-container{position:relative}.status-indicator{position:absolute;bottom:0;right:0;width:12px;height:12px;border-radius:50%;background-color:#30d158;border:2px solid #fff}.actions{display:flex;gap:16px}.action-button{background:none;border:none;color:#0a84ff;cursor:pointer;font-size:1.2rem;display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;transition:#fff .2s}.action-button:hover{background-color:#e5e5ea}`;
+//# 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,u0DAAu0D,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;border-radius:12px;overflow:hidden;box-shadow:0 8px 24px #1f1f1f;display:flex;flex-direction:column}.chat-container{display:flex;flex-direction:column;height:100%}.header{display:flex;align-items:center;justify-content:space-between;padding:10px;background-color:#edeff0}.info{display:flex;align-items:center;gap:12px}.avatar{width:40px;height:40px;border-radius:50%;-o-object-fit:cover;object-fit:cover}.avatar-container{position:relative}.status-indicator{position:absolute;bottom:0;right:0;width:12px;height:12px;border-radius:50%;background-color:#30d158;border:2px solid #fff}.actions{display:flex;gap:16px}.action-button{background:none;border:none;color:#0a84ff;cursor:pointer;font-size:1.2rem;display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;transition:#fff .2s}.action-button:hover{background-color:#e5e5ea}`;\n"]}

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

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

package/components/chat/themes/input.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{display:block;padding:12px 16px;border-top:1px solid #e5e5ea}igc-file-input{width:-moz-fit-content;width:fit-content}igc-file-input::part(file-names){display:none}.input-container{display:flex;align-items:center;gap:12px}.input-container.dragging{background-color:#000;border:2px dashed #0a84ff}.input-wrapper{flex:1;position:relative;border-radius:24px;overflow:hidden;transition:box-shadow .2s}.buttons-container{display:flex;align-items:center}.input-button{display:flex;align-items:center;justify-content:center;width:2rem;height:2rem;border-radius:50%;margin-left:.25rem;background:rgba(0,0,0,0);border:none;outline:none;cursor:pointer;color:#8e8e93;transition:all .2s ease}.input-button:hover{color:#0a84ff;background-color:#a1a1a1}.text-input{width:100%;border:none;padding:12px 16px;font-size:.95rem;line-height:1.5;outline:none;resize:none;max-height:120px;font-family:inherit}.input-wrapper:focus-within{box-shadow:0 0 0 2px #0a84ff}.attachment-button,.send-button{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;background-color:rgba(0,0,0,0);border:none;cursor:pointer;color:#0a84ff;transition:#fff .2s}.attachment-button:hover,.send-button:hover{background-color:#8e8e93}.attachment-wrapper{max-width:200px;margin-right:5px;float:left}.attachment-wrapper igc-chip{border:1px solid #e5e5ea;border-radius:5px}.attachment-name{font-size:small;font-style:italic;margin:0 5px}.send-button{background-color:#0a84ff;color:#fff}.send-button:hover{background-color:#5ac8fa}.send-button:disabled{background-color:#c7c7cc;cursor:not-allowed}`;
+//# sourceMappingURL=input.base.css.js.map