feat(chat): add initial chat implementation

Author: teodosiah

src/components/chat/chat-header.ts

@@ -0,0 +1,39 @@
+import { LitElement, html } from 'lit';
+import { property } from 'lit/decorators.js';
+import { registerComponent } from '../common/definitions/register.js';
+import { styles } from './themes/header.base.css.js';
+
+/**
+ *
+ * @element igc-chat-header
+ *
+ */
+export default class IgcChatHeaderComponent extends LitElement {
+  /** @private */
+  public static readonly tagName = 'igc-chat-header';
+
+  public static override styles = styles;
+
+  /* blazorSuppress */
+  public static register() {
+    registerComponent(IgcChatHeaderComponent);
+  }
+
+  @property({ type: String, reflect: true })
+  public text = '';
+
+  protected override render() {
+    return html`<div class="header">
+      <div class="info">${this.text}</div>
+      <div class="actions">
+        <button class="action-button">⋯</button>
+      </div>
+    </div>`;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'igc-chat-header': IgcChatHeaderComponent;
+  }
+}

src/components/chat/chat-input.ts

@@ -0,0 +1,232 @@
+import { LitElement, html } from 'lit';
+import { property, query, state } from 'lit/decorators.js';
+import IgcIconButtonComponent from '../button/icon-button.js';
+import IgcChipComponent from '../chip/chip.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 IgcEmojiPickerComponent from './emoji-picker.js';
+import { styles } from './themes/input.base.css.js';
+import {
+  type IgcMessageAttachment,
+  attachmentIcon,
+  emojiPickerIcon,
+  sendButtonIcon,
+} from './types.js';
+
+/**
+ *
+ * @element igc-chat
+ *
+ */
+export default class IgcChatInputComponent extends LitElement {
+  /** @private */
+  public static readonly tagName = 'igc-chat-input';
+
+  public static override styles = styles;
+
+  /* blazorSuppress */
+  public static register() {
+    registerComponent(
+      IgcChatInputComponent,
+      IgcTextareaComponent,
+      IgcIconButtonComponent,
+      IgcChipComponent,
+      IgcEmojiPickerComponent,
+      IgcFileInputComponent,
+      IgcIconComponent
+    );
+  }
+
+  @property({ type: Boolean, attribute: 'enable-attachments' })
+  public enableAttachments = true;
+
+  @property({ type: Boolean, attribute: 'enable-emoji-picker' })
+  public enableEmojiPicker = true;
+
+  @query('textarea')
+  private textInputElement!: HTMLTextAreaElement;
+
+  @state()
+  private inputValue = '';
+
+  @state()
+  private attachments: IgcMessageAttachment[] = [];
+
+  @state()
+  private showEmojiPicker = false;
+
+  constructor() {
+    super();
+    registerIconFromText('emoji-picker', emojiPickerIcon, 'material');
+    registerIconFromText('attachment', attachmentIcon, 'material');
+    registerIconFromText('send-message', sendButtonIcon, 'material');
+  }
+
+  private handleInput(e: Event) {
+    const target = e.target as HTMLTextAreaElement;
+    this.inputValue = target.value;
+    this.adjustTextareaHeight();
+  }
+
+  private handleKeyDown(e: KeyboardEvent) {
+    if (e.key === 'Enter' && !e.shiftKey) {
+      e.preventDefault();
+      this.sendMessage();
+    }
+  }
+
+  private adjustTextareaHeight() {
+    const textarea = this.textInputElement;
+    if (!textarea) return;
+
+    textarea.style.height = 'auto';
+    const newHeight = Math.min(textarea.scrollHeight, 120);
+    textarea.style.height = `${newHeight}px`;
+  }
+
+  private sendMessage() {
+    if (!this.inputValue.trim() && this.attachments.length === 0) return;
+
+    const messageEvent = new CustomEvent('message-send', {
+      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);
+  }
+
+  private toggleEmojiPicker() {
+    this.showEmojiPicker = !this.showEmojiPicker;
+  }
+
+  private addEmoji(e: CustomEvent) {
+    const emoji = e.detail.emoji;
+    this.inputValue += emoji;
+    this.showEmojiPicker = false;
+
+    // Focus back on input after selecting an emoji
+    this.updateComplete.then(() => {
+      const textarea = this.shadowRoot?.querySelector('textarea');
+      if (textarea) {
+        textarea.focus();
+      }
+    });
+  }
+
+  private handleFileUpload(e: Event) {
+    const input = (e.target as any).input as HTMLInputElement;
+    if (!input.files || input.files.length === 0) return;
+
+    const files = Array.from(input.files);
+    const newAttachments: IgcMessageAttachment[] = [];
+    files.forEach((file) => {
+      const isImage = file.type.startsWith('image/');
+      newAttachments.push({
+        id: `attach_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`,
+        type: isImage ? 'image' : 'file',
+        url: URL.createObjectURL(file),
+        name: file.name,
+        size: file.size,
+        thumbnail: isImage ? URL.createObjectURL(file) : undefined,
+      });
+    });
+    this.attachments = [...this.attachments, ...newAttachments];
+  }
+
+  private removeAttachment(index: number) {
+    this.attachments = this.attachments.filter((_, i) => i !== index);
+  }
+
+  protected override render() {
+    return html`
+      <div class="input-container">
+        ${this.enableAttachments
+          ? html`
+              <igc-file-input multiple @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">
+          ${this.enableEmojiPicker
+            ? html`
+                <igc-icon-button
+                  name="emoji-picker"
+                  collection="material"
+                  variant="contained"
+                  class="small"
+                  @click=${this.toggleEmojiPicker}
+                ></igc-icon-button>
+              `
+            : ''}
+
+          <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>
+
+        ${this.showEmojiPicker
+          ? html`
+                <div class="emoji-picker-container">
+                  <igc-emoji-picker @emoji-selected=${this.addEmoji}></emoji-picker>
+                </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>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'igc-chat-input': IgcChatInputComponent;
+  }
+}