@propbinder/mobile-design 0.2.47 → 0.2.50

package/src/components/message-composer/ds-mobile-message-composer.ts

@@ -0,0 +1,1146 @@
+import { Component, input, output, signal, computed, ViewChild, ElementRef, AfterViewInit, OnDestroy, ChangeDetectorRef } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { Capacitor } from '@capacitor/core';
+import { Keyboard } from '@capacitor/keyboard';
+import { FilePicker } from '@capawesome/capacitor-file-picker';
+import { DsAvatarComponent } from '@propbinder/design-system';
+import { DsIconButtonComponent } from '@propbinder/design-system';
+import { DsIconComponent } from '@propbinder/design-system';
+import { DsMobileAttachmentPreviewComponent, type AttachmentData, type AttachmentFileType } from '../attachment-preview/ds-mobile-attachment-preview';
+import { DsMobileDropdownComponent, type DsMobileDropdownItem } from '../dropdown';
+
+/**
+ * DsMobileMessageComposerComponent
+ *
+ * Reusable message composer component extracted from post-detail-modal.
+ * Can be used for both comments and chat messages.
+ *
+ * Features:
+ * - Text input with auto-resize
+ * - Avatar display
+ * - Send button (appears when text is entered)
+ * - Optional mention menu support
+ * - Optional edit/reply indicators
+ * - Keyboard handling for mobile
+ * - Safe area support
+ *
+ * @example
+ * ```html
+ * <ds-mobile-message-composer
+ *   [avatarInitials]="'JD'"
+ *   [placeholder]="'Write a message...'"
+ *   (messageSent)="handleMessage($event)">
+ * </ds-mobile-message-composer>
+ * ```
+ */
+@Component({
+  selector: 'ds-mobile-message-composer',
+  standalone: true,
+  imports: [CommonModule, FormsModule, DsAvatarComponent, DsIconButtonComponent, DsIconComponent, DsMobileAttachmentPreviewComponent, DsMobileDropdownComponent],
+  styles: [
+    `
+      :host {
+        display: block;
+      }
+
+      /* Composer Container */
+      .message-composer {
+        background: var(--color-background-neutral-primary, #ffffff);
+        border-top: 1px solid var(--border-color-default);
+        border-bottom-left-radius: 0;
+        border-bottom-right-radius: 0;
+        padding: 12px 16px;
+        width: 100%;
+        display: flex;
+        flex-direction: column;
+        gap: 8px;
+      }
+
+      /* Edit indicator (optional) */
+      .edit-indicator {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: 8px 12px;
+        background: var(--color-background-brand-subtle, #f0edfe);
+        border-radius: 8px;
+        animation: slideDown 0.2s ease-out;
+      }
+
+      .edit-indicator-content {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        color: var(--color-accent, #6b5ff5);
+        flex: 1;
+        min-width: 0;
+      }
+
+      .edit-text {
+        font-family: 'Brockmann', sans-serif;
+        font-size: var(--font-size-sm);
+        font-weight: 500;
+        line-height: 18px;
+        color: var(--color-accent, #6b5ff5);
+      }
+
+      .cancel-edit {
+        background: none;
+        border: none;
+        padding: 4px;
+        cursor: pointer;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        color: var(--color-accent, #6b5ff5);
+        border-radius: 4px;
+        transition: background 0.2s ease;
+        flex-shrink: 0;
+      }
+
+      .cancel-edit:active {
+        background: var(--color-brand-subtle, #e0dbfe);
+      }
+
+      /* Reply indicator (optional) */
+      .reply-indicator {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: 8px 12px;
+        background: var(--color-background-neutral-secondary, #f5f5f5);
+        border-radius: 8px;
+        animation: slideDown 0.2s ease-out;
+      }
+
+      .reply-indicator-content {
+        display: flex;
+        align-items: center;
+        gap: 4px;
+        color: var(--color-text-secondary, #737373);
+        flex: 1;
+        min-width: 0;
+      }
+
+      .reply-to-text {
+        font-family: 'Brockmann', sans-serif;
+        font-size: var(--font-size-sm);
+        line-height: 18px;
+        color: var(--color-text-secondary, #737373);
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+
+      .reply-author {
+        color: var(--color-accent, #6b5ff5);
+        font-weight: 600;
+      }
+
+      .cancel-reply {
+        background: none;
+        border: none;
+        padding: 4px;
+        cursor: pointer;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        color: var(--color-text-secondary, #737373);
+        border-radius: 4px;
+        transition: background 0.2s ease;
+        flex-shrink: 0;
+      }
+
+      .cancel-reply:active {
+        background: var(--color-background-neutral-secondary, #f5f5f5);
+      }
+
+      @keyframes slideDown {
+        from {
+          opacity: 0;
+          transform: translateY(-10px);
+        }
+        to {
+          opacity: 1;
+          transform: translateY(0);
+        }
+      }
+
+      /* Attachment previews section */
+      .attachment-previews-section {
+        padding: 0 0 8px 0;
+        animation: slideDown 0.2s ease-out;
+      }
+
+      .attachment-previews {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 8px;
+      }
+
+      .composer-content {
+        display: flex;
+        align-items: center;
+        gap: 12px;
+        width: 100%;
+        position: relative;
+      }
+
+      /* Attachment button replacing avatar */
+      .composer-leading-button {
+        flex-shrink: 0;
+      }
+
+      .composer-leading-button::ng-deep button {
+        width: 40px !important;
+        height: 40px !important;
+        min-width: 40px !important;
+        min-height: 40px !important;
+        padding: 0 !important;
+        border-radius: 50% !important;
+        transition: transform 0.3s ease;
+      }
+
+      .composer-leading-button--open::ng-deep button {
+        transform: rotate(45deg);
+      }
+
+      .composer-input-wrapper {
+        flex: 1;
+        display: flex;
+        align-items: flex-start;
+        gap: 8px;
+        background: var(--color-background-neutral-secondary, #f5f5f5);
+        border-radius: 24px;
+        padding: 12px 16px;
+        padding-right: 16px; /* Remove extra padding - no buttons on right anymore */
+        min-height: 44px;
+        position: relative;
+      }
+
+      /* Mention menu custom styles */
+      .mention-user-info {
+        display: flex;
+        flex-direction: column;
+        gap: 2px;
+        flex: 1;
+        min-width: 0;
+      }
+
+      .mention-user-name {
+        font-family: 'Brockmann', sans-serif;
+        font-size: var(--font-size-base);
+        font-weight: 600;
+        line-height: 20px;
+        color: var(--color-text-primary, #1a1a1a);
+      }
+
+      .mention-user-role {
+        font-family: 'Brockmann', sans-serif;
+        font-size: var(--font-size-sm);
+        line-height: 18px;
+        color: var(--color-text-secondary, #737373);
+      }
+
+      .composer-input {
+        flex: 1;
+        border: none;
+        background: transparent;
+        font-family: 'Brockmann', sans-serif;
+        font-size: var(--font-size-sm);
+        line-height: 20px;
+        color: var(--color-text-primary, #1a1a1a);
+        outline: none;
+        resize: none;
+        min-height: 20px;
+        max-height: 120px;
+        overflow-y: auto;
+        padding: 0;
+        margin: 0;
+      }
+
+      .composer-input::placeholder {
+        color: var(--color-text-tertiary, #a0a0a0);
+        font-size: var(--font-size-sm);
+      }
+
+      /* Send button - positioned absolute in top right corner like comment composer */
+      .send-button-inline {
+        position: absolute;
+        top: 6px;
+        right: 6px;
+        z-index: 10;
+        flex-shrink: 0;
+        opacity: 0;
+        transform: translateX(20px) scale(0.8);
+        pointer-events: none;
+        transition:
+          opacity 0.15s ease-in,
+          transform 0.15s ease-in;
+      }
+
+      .send-button-inline.show {
+        opacity: 1;
+        transform: translateX(0) scale(1);
+        pointer-events: auto;
+        animation: slideInFromRight var(--spring-bouncy);
+      }
+
+      .send-button-inline::ng-deep button {
+        width: 32px !important;
+        height: 32px !important;
+        min-width: 32px !important;
+        min-height: 32px !important;
+        padding: 0 !important;
+        border-radius: 50% !important;
+      }
+
+      @keyframes slideInFromRight {
+        from {
+          opacity: 0;
+          transform: translateX(20px) scale(0.8);
+        }
+        to {
+          opacity: 1;
+          transform: translateX(0) scale(1);
+        }
+      }
+    `,
+  ],
+  template: `
+    <div class="message-composer">
+      <!-- Edit indicator (optional) -->
+      @if (editingMessage()) {
+        <div class="edit-indicator">
+          <div class="edit-indicator-content">
+            <ds-icon name="remixEditLine" size="16px" />
+            <span class="edit-text">{{ editIndicatorText() }}</span>
+          </div>
+          <button class="cancel-edit" (click)="cancelEdit()" type="button">
+            <ds-icon name="remixCloseLine" size="16px" />
+          </button>
+        </div>
+      }
+
+      <!-- Reply indicator (optional) -->
+      @if (replyingTo() && !editingMessage()) {
+        <div class="reply-indicator">
+          <div class="reply-indicator-content">
+            <ds-icon name="remixReplyLine" size="16px" />
+            <span class="reply-to-text">
+              {{ replyIndicatorText() }} <span class="reply-author">{{ replyingTo()!.authorName }}</span>
+            </span>
+          </div>
+          <button class="cancel-reply" (click)="cancelReply()" type="button">
+            <ds-icon name="remixCloseLine" size="16px" />
+          </button>
+        </div>
+      }
+
+      <!-- Attachment Previews (if any) -->
+      @if (attachments().length > 0) {
+        <div class="attachment-previews-section">
+          <div class="attachment-previews">
+            @for (attachment of attachments(); track attachment.id) {
+              <ds-mobile-attachment-preview [attachment]="attachment" (remove)="removeAttachment($event)" />
+            }
+          </div>
+        </div>
+      }
+
+      <div class="composer-content">
+        <!-- Attachment button replacing avatar (left side) -->
+        @if (showAttachmentButton()) {
+          <div class="composer-leading-button" [class.composer-leading-button--open]="isAttachmentMenuOpen()">
+            <!-- Main attachment button -->
+            <ds-icon-button
+              id="attachment-trigger"
+              icon="remixAddLine"
+              variant="secondary"
+              size="lg"
+              (clicked)="toggleAttachmentMenu($event)"
+              [attr.aria-label]="attachmentButtonLabel()"
+              [attr.aria-expanded]="isAttachmentMenuOpen()"
+            >
+            </ds-icon-button>
+
+            <!-- Attachment menu using dropdown -->
+            <ds-mobile-dropdown
+              [items]="attachmentMenuItems"
+              [isOpen]="isAttachmentMenuOpen()"
+              [trigger]="'attachment-trigger'"
+              [keepFocusOn]="messageInputRef"
+              position="above"
+              align="start"
+              (itemSelected)="handleAttachmentMenuSelect($event)"
+              (closed)="closeAttachmentMenu()"
+            >
+            </ds-mobile-dropdown>
+          </div>
+        } @else {
+          <!-- Avatar (only shown when attachment button is hidden) -->
+          <ds-avatar [initials]="avatarInitials()" [type]="avatarType()" [src]="avatarSrc()" size="lg" />
+        }
+
+        <div class="composer-input-wrapper">
+          <textarea
+            #messageInputEl
+            id="message-input-trigger"
+            class="composer-input"
+            [placeholder]="placeholder()"
+            [(ngModel)]="messageText"
+            (input)="handleInput($event)"
+            (keydown)="handleKeyDown($event)"
+            (focus)="showKeyboard()"
+            (click)="showKeyboard()"
+            rows="1"
+          >
+          </textarea>
+
+          <!-- Mention menu using dropdown (only render if mentions are enabled) -->
+          @if (enableMentions()) {
+            <ds-mobile-dropdown
+              [items]="mentionDropdownItems()"
+              [isOpen]="showMentionMenu() && !editingMessage() && mentionDropdownItems().length > 0"
+              [trigger]="'message-input-trigger'"
+              position="above"
+              align="start"
+              [maxHeight]="200"
+              (itemSelected)="handleMentionSelect($event)"
+              (closed)="closeMentionMenu()"
+            >
+              <ng-template #itemTemplate let-item>
+                <ds-avatar [initials]="item.data.initials" [type]="'initials'" size="sm" />
+                <div class="mention-user-info">
+                  <span class="mention-user-name">{{ item.data.name }}</span>
+                  <span class="mention-user-role">{{ item.data.role }}</span>
+                </div>
+              </ng-template>
+            </ds-mobile-dropdown>
+          }
+
+          <!-- Send button (absolute positioned in top right, always rendered) -->
+          <ds-icon-button
+            icon="remixCheckLine"
+            variant="primary"
+            size="sm"
+            (clicked)="sendMessage()"
+            [attr.aria-label]="sendButtonLabel()"
+            [class.send-button-inline]="true"
+            [class.show]="messageText().trim().length > 0 || attachments().length > 0"
+          >
+          </ds-icon-button>
+        </div>
+      </div>
+
+      <!-- Hidden file input -->
+      <input
+        #fileInput
+        type="file"
+        accept=".pdf,.doc,.docx,.xls,.xlsx,.txt,.csv,.zip,.rar"
+        multiple
+        aria-hidden="true"
+        style="display: none;"
+        (change)="handleFileSelect($event)"
+      />
+    </div>
+  `,
+})
+export class DsMobileMessageComposerComponent implements AfterViewInit, OnDestroy {
+  constructor(private cdr: ChangeDetectorRef) {}
+
+  /**
+   * Avatar initials
+   */
+  avatarInitials = input<string>('');
+
+  /**
+   * Avatar type
+   */
+  avatarType = input<'initials' | 'photo' | 'icon'>('initials');
+
+  /**
+   * Avatar photo source (for photo type)
+   */
+  avatarSrc = input<string>('');
+
+  /**
+   * Placeholder text for the input
+   */
+  placeholder = input<string>('Write a message...');
+
+  /**
+   * Send button aria label
+   */
+  sendButtonLabel = input<string>('Send message');
+
+  /**
+   * Attachment button aria label
+   */
+  attachmentButtonLabel = input<string>('Add attachment');
+
+  /**
+   * Whether to show the attachment button
+   */
+  showAttachmentButton = input<boolean>(false);
+
+  /**
+   * Edit indicator text (when editing)
+   */
+  editIndicatorText = input<string>('Editing message');
+
+  /**
+   * Reply indicator text prefix
+   */
+  replyIndicatorText = input<string>('Replying to');
+
+  /**
+   * Whether to enable mention support
+   */
+  enableMentions = input<boolean>(false);
+
+  /**
+   * Available users for mentions (if mentions enabled)
+   */
+  mentionUsers = input<Array<{ name: string; initials: string; role: string }>>([]);
+
+  /**
+   * Auto-focus input on mount
+   */
+  autoFocus = input<boolean>(false);
+
+  /**
+   * ViewChild for message input
+   */
+  @ViewChild('messageInputEl') messageInputRef?: ElementRef<HTMLTextAreaElement>;
+
+  /**
+   * ViewChild for file input
+   */
+  @ViewChild('fileInput') fileInput?: ElementRef<HTMLInputElement>;
+
+  /**
+   * Message text signal
+   */
+  messageText = signal('');
+
+  /**
+   * Attachments signal
+   */
+  attachments = signal<AttachmentData[]>([]);
+
+  /**
+   * Attachment menu open state
+   */
+  isAttachmentMenuOpen = signal(false);
+
+  /**
+   * Editing message state (optional)
+   */
+  editingMessage = signal<{ authorName: string; originalContent: string; timestamp: string } | null>(null);
+
+  /**
+   * Replying to state (optional)
+   */
+  replyingTo = signal<{ authorName: string; content: string } | null>(null);
+
+  /**
+   * Mention menu state
+   */
+  showMentionMenu = signal(false);
+
+  /**
+   * Mention query for filtering
+   */
+  mentionQuery = signal('');
+
+  /**
+   * Filtered users based on mention query
+   */
+  filteredUsers = computed(() => {
+    if (!this.enableMentions()) return [];
+
+    const query = this.mentionQuery().toLowerCase();
+    const users = this.mentionUsers();
+
+    if (!query) return users;
+    return users.filter((user) => user.name.toLowerCase().includes(query));
+  });
+
+  /**
+   * Convert filtered users to dropdown items
+   */
+  mentionDropdownItems = computed((): DsMobileDropdownItem[] => {
+    return this.filteredUsers().map((user) => ({
+      id: user.name,
+      label: user.name,
+      data: {
+        name: user.name,
+        initials: user.initials,
+        role: user.role,
+      },
+    }));
+  });
+
+  /**
+   * Attachment menu items
+   * Static list to prevent change detection loops
+   */
+  readonly attachmentMenuItems: DsMobileDropdownItem[] = [
+    {
+      id: 'photo',
+      leadingIcon: 'remixImageLine',
+      label: 'Photo',
+      action: () => this.handleAddPhoto(),
+    },
+    {
+      id: 'file',
+      leadingIcon: 'remixFile3Line',
+      label: 'File',
+      action: () => this.handleAddFile(),
+    },
+  ];
+
+  /**
+   * Emits when a message is sent
+   */
+  messageSent = output<{
+    content: string;
+    isReply?: boolean;
+    replyTo?: string;
+    isEdit?: boolean;
+    attachments?: AttachmentData[];
+  }>();
+
+  /**
+   * Emits when edit is cancelled
+   */
+  editCancelled = output<void>();
+
+  /**
+   * Emits when reply is cancelled
+   */
+  replyCancelled = output<void>();
+
+  /**
+   * Emits when mention is selected
+   */
+  mentionSelected = output<{ userName: string }>();
+
+  /**
+   * Emits when attachment button is clicked
+   */
+  attachmentClicked = output<void>();
+
+  /**
+   * Emits when attachments array changes (added or removed)
+   * Parent components (like chat modal) can use this to scroll to bottom
+   */
+  attachmentsChanged = output<void>();
+
+  ngAfterViewInit(): void {
+    // Auto-focus input if requested
+    if (this.autoFocus()) {
+      setTimeout(() => {
+        this.messageInputRef?.nativeElement.focus();
+        this.showKeyboard();
+      }, 300);
+    }
+
+    // Set up keyboard listeners
+    this.setupKeyboardListeners();
+
+    // Explicitly trigger change detection to avoid NG0100 with ViewChild bindings
+    this.cdr.detectChanges();
+  }
+
+  ngOnDestroy(): void {
+    // Clean up keyboard listeners
+    this.cleanupKeyboardListeners();
+  }
+
+  /**
+   * Set up keyboard event listeners
+   */
+  private setupKeyboardListeners(): void {
+    Keyboard.addListener('keyboardWillShow', (info) => {
+      document.documentElement.style.setProperty('--keyboard-height', `${info.keyboardHeight}px`);
+    }).catch(() => {});
+
+    Keyboard.addListener('keyboardWillHide', () => {
+      document.documentElement.style.setProperty('--keyboard-height', '0px');
+    }).catch(() => {});
+  }
+
+  /**
+   * Clean up keyboard event listeners
+   */
+  private cleanupKeyboardListeners(): void {
+    Keyboard.removeAllListeners().catch(() => {});
+  }
+
+  /**
+   * Show the keyboard when user interacts with input
+   */
+  showKeyboard(): void {
+    Keyboard.show().catch(() => {});
+  }
+
+  /**
+   * Handle keyboard shortcuts (Shift+Enter to send)
+   */
+  handleKeyDown(event: KeyboardEvent): void {
+    // Shift+Enter sends the message
+    if (event.key === 'Enter' && event.shiftKey) {
+      event.preventDefault();
+      const hasContent = this.messageText().trim().length > 0 || this.attachments().length > 0;
+      if (hasContent) {
+        this.sendMessage();
+      }
+    }
+    // Regular Enter just creates a new line (default behavior)
+  }
+
+  /**
+   * Handle input changes and detect @ mentions
+   */
+  handleInput(event: Event): void {
+    const textarea = event.target as HTMLTextAreaElement;
+    const text = textarea.value;
+    const cursorPosition = textarea.selectionStart || 0;
+
+    // Update signal
+    this.messageText.set(text);
+
+    // Auto-resize textarea
+    textarea.style.height = 'auto';
+    textarea.style.height = textarea.scrollHeight + 'px';
+
+    // Handle mentions if enabled
+    if (this.enableMentions()) {
+      // Find the last @ before cursor
+      const textBeforeCursor = text.substring(0, cursorPosition);
+      const lastAtIndex = textBeforeCursor.lastIndexOf('@');
+
+      if (lastAtIndex !== -1) {
+        // Check if there's a space after @
+        const textAfterAt = textBeforeCursor.substring(lastAtIndex + 1);
+        const hasSpace = textAfterAt.includes(' ');
+
+        if (!hasSpace) {
+          // Show mention menu
+          this.showMentionMenu.set(true);
+          this.mentionQuery.set(textAfterAt);
+        } else {
+          this.showMentionMenu.set(false);
+        }
+      } else {
+        this.showMentionMenu.set(false);
+      }
+    }
+  }
+
+  /**
+   * Handle mention selection from dropdown
+   */
+  handleMentionSelect(item: DsMobileDropdownItem): void {
+    this.selectMention(item.data.name);
+  }
+
+  /**
+   * Close mention menu
+   */
+  closeMentionMenu(): void {
+    this.showMentionMenu.set(false);
+  }
+
+  /**
+   * Handle attachment menu selection from dropdown
+   */
+  handleAttachmentMenuSelect(item: DsMobileDropdownItem): void {
+    // Action is already called by the dropdown, just close the menu
+    this.closeAttachmentMenu();
+  }
+
+  /**
+   * Select a user from mention menu
+   */
+  selectMention(userName: string): void {
+    // Set as reply (similar to clicking Reply)
+    this.replyingTo.set({ authorName: userName, content: '' });
+
+    // Clear the @ from the input
+    const currentText = this.messageText();
+    const textWithoutMention = currentText.substring(0, currentText.lastIndexOf('@'));
+    this.messageText.set(textWithoutMention);
+
+    // Hide mention menu
+    this.showMentionMenu.set(false);
+
+    // Emit mention selected event
+    this.mentionSelected.emit({ userName });
+
+    // Focus back on input
+    setTimeout(() => {
+      this.messageInputRef?.nativeElement.focus();
+    }, 0);
+  }
+
+  /**
+   * Cancel edit
+   */
+  cancelEdit(): void {
+    this.editingMessage.set(null);
+    this.messageText.set('');
+    this.editCancelled.emit();
+  }
+
+  /**
+   * Cancel reply
+   */
+  cancelReply(): void {
+    this.replyingTo.set(null);
+    this.replyCancelled.emit();
+  }
+
+  /**
+   * Set reply state (for external use)
+   */
+  setReply(authorName: string, content: string): void {
+    this.replyingTo.set({ authorName, content });
+    // Focus the input and show keyboard
+    setTimeout(() => {
+      this.messageInputRef?.nativeElement.focus();
+      this.showKeyboard();
+    }, 100);
+  }
+
+  /**
+   * Set edit state (for external use)
+   */
+  setEdit(authorName: string, originalContent: string, timestamp: string): void {
+    // Clear reply state if active
+    this.replyingTo.set(null);
+
+    // Remove @mention from the content if it exists
+    let contentToEdit = originalContent;
+    const mentionMatch = originalContent.match(/^@([A-Za-z]+(?:\s+[A-Za-z]+)?)\s+/);
+    if (mentionMatch) {
+      contentToEdit = originalContent.substring(mentionMatch[0].length);
+    }
+
+    // Set edit state
+    this.editingMessage.set({ authorName, originalContent, timestamp });
+
+    // Populate the input with existing content
+    this.messageText.set(contentToEdit);
+
+    // Focus the input, show keyboard, and auto-resize
+    setTimeout(() => {
+      if (this.messageInputRef?.nativeElement) {
+        const textarea = this.messageInputRef.nativeElement;
+        textarea.focus();
+
+        // Auto-resize textarea to fit content
+        textarea.style.height = 'auto';
+        textarea.style.height = textarea.scrollHeight + 'px';
+
+        this.showKeyboard();
+      }
+    }, 100);
+  }
+
+  /**
+   * Clear composer state
+   */
+  clear(): void {
+    this.messageText.set('');
+    this.editingMessage.set(null);
+    this.replyingTo.set(null);
+    this.showMentionMenu.set(false);
+    this.attachments.set([]);
+
+    // Reset textarea height
+    if (this.messageInputRef?.nativeElement) {
+      this.messageInputRef.nativeElement.style.height = 'auto';
+    }
+  }
+
+  /**
+   * Focus the input
+   */
+  focus(): void {
+    this.messageInputRef?.nativeElement.focus();
+    this.showKeyboard();
+  }
+
+  /**
+   * Toggle attachment menu open/closed
+   * Uses mousedown/touchstart to prevent focus loss from textarea
+   */
+  toggleAttachmentMenu(event?: MouseEvent | TouchEvent): void {
+    if (event) {
+      event.preventDefault();
+      event.stopPropagation();
+    }
+    this.isAttachmentMenuOpen.update((open) => !open);
+  }
+
+  /**
+   * Close attachment menu
+   */
+  closeAttachmentMenu(event?: MouseEvent): void {
+    if (event) {
+      event.preventDefault();
+      event.stopPropagation();
+    }
+    this.isAttachmentMenuOpen.set(false);
+  }
+
+  /**
+   * Handle add photo button click from menu
+   * Uses Capawesome File Picker API to open photo library directly
+   * Allows multiple photo selection
+   */
+  async handleAddPhoto(event?: MouseEvent): Promise<void> {
+    if (event) {
+      event.preventDefault();
+      event.stopPropagation();
+    }
+
+    if (this.attachments().length >= 6) {
+      return;
+    }
+
+    try {
+      //console.log('[MessageComposer] Opening photo library');
+
+      // Calculate remaining slots
+      const remainingSlots = 6 - this.attachments().length;
+
+      // Open photo library with multiple selection using pickImages
+      const result = await FilePicker.pickImages({
+        limit: remainingSlots, // Limit to remaining slots
+      });
+
+      if (result.files && result.files.length > 0) {
+        //console.log(`[MessageComposer] ${result.files.length} photo(s) selected`);
+
+        // Process each selected photo
+        for (const photo of result.files) {
+          const attachmentId = `photo-${Date.now()}-${Math.random()}`;
+
+          // Add attachment with loading state
+          const loadingAttachment: AttachmentData = {
+            id: attachmentId,
+            src: photo.path ? Capacitor.convertFileSrc(photo.path) : (photo.blob ? URL.createObjectURL(photo.blob) : ''),
+            type: 'image',
+            name: photo.name,
+            size: this.formatFileSize(photo.size ?? 0),
+            isLoading: true,
+          };
+
+          this.attachments.update((attachments) => [...attachments, loadingAttachment]);
+
+          // Simulate processing time (in real app, this would be actual image processing)
+          // TODO: Reduce to 300ms or remove in production
+          setTimeout(() => {
+            this.attachments.update((attachments) => attachments.map((a) => (a.id === attachmentId ? { ...a, isLoading: false } : a)));
+          }, 1500); // 1.5s for testing - shows loading overlay clearly
+        }
+
+        //console.log('[MessageComposer] All photos added successfully');
+
+        // Notify parent that attachments changed so it can scroll
+        this.attachmentsChanged.emit();
+
+        // ResizeObserver in MobileModalBase automatically handles layout adjustments
+      }
+    } catch (error: any) {
+      if (error.message && !error.message.includes('cancel')) {
+        //console.error('[MessageComposer] Error adding photo:', error);
+      }
+      // User cancelled - that's fine
+    }
+  }
+
+  /**
+   * Handle add file button click from menu
+   * Opens file picker
+   */
+  handleAddFile(event?: MouseEvent): void {
+    if (event) {
+      event.preventDefault();
+      event.stopPropagation();
+    }
+
+    if (this.attachments().length >= 6) {
+      return;
+    }
+
+    console.log('[MessageComposer] Opening file picker');
+
+    // Trigger the hidden file input
+    if (this.fileInput) {
+      this.fileInput.nativeElement.click();
+    }
+    this.attachmentClicked.emit();
+  }
+
+  /**
+   * Detect file type from file name or mime type
+   */
+  private detectFileType(file: File): AttachmentFileType {
+    const fileName = file.name.toLowerCase();
+    const mimeType = file.type.toLowerCase();
+
+    // Check if it's an image
+    if (mimeType.startsWith('image/')) {
+      return 'image';
+    }
+
+    // Check file extension
+    if (fileName.endsWith('.pdf')) {
+      return 'pdf';
+    } else if (fileName.endsWith('.doc')) {
+      return 'doc';
+    } else if (fileName.endsWith('.docx')) {
+      return 'docx';
+    } else if (fileName.endsWith('.xls')) {
+      return 'xls';
+    } else if (fileName.endsWith('.xlsx')) {
+      return 'xlsx';
+    }
+
+    return 'other';
+  }
+
+  /**
+   * Format file size for display
+   */
+  private formatFileSize(bytes: number): string {
+    if (bytes === 0) return '0 B';
+    const k = 1024;
+    const sizes = ['B', 'KB', 'MB', 'GB'];
+    const i = Math.floor(Math.log(bytes) / Math.log(k));
+    return Math.round((bytes / Math.pow(k, i)) * 100) / 100 + ' ' + sizes[i];
+  }
+
+  /**
+   * Handle file selection from file input
+   */
+  handleFileSelect(event: Event): void {
+    const input = event.target as HTMLInputElement;
+    const files = input.files;
+
+    if (!files || files.length === 0) {
+      // User cancelled - blur handler will restore keyboard
+      return;
+    }
+
+    // Process each selected file (up to 6 total)
+    const remainingSlots = 6 - this.attachments().length;
+    const filesToProcess = Array.from(files).slice(0, remainingSlots);
+
+    filesToProcess.forEach((file) => {
+      const fileType = this.detectFileType(file);
+      const attachmentId = `file-${Date.now()}-${Math.random()}`;
+
+      // Add attachment with loading state immediately
+      const loadingAttachment: AttachmentData = {
+        id: attachmentId,
+        src: '', // Will be set after reading
+        type: fileType,
+        name: file.name,
+        size: this.formatFileSize(file.size),
+        isLoading: true,
+      };
+      this.attachments.update((attachments) => [...attachments, loadingAttachment]);
+
+      // Create a data URL for preview
+      const reader = new FileReader();
+      reader.onload = (e) => {
+        const result = e.target?.result as string;
+        if (result) {
+          // Add minimum loading time for better UX feedback
+          // TODO: Remove setTimeout in production (use actual FileReader timing)
+          setTimeout(() => {
+            // Update attachment with actual data and remove loading state
+            this.attachments.update((attachments) => attachments.map((a) => (a.id === attachmentId ? { ...a, src: result, isLoading: false } : a)));
+
+            // Notify parent that attachments changed so it can scroll
+            setTimeout(() => {
+              this.attachmentsChanged.emit();
+            }, 100);
+          }, 1000); // 1s minimum for testing - shows loading overlay clearly
+        }
+      };
+      reader.readAsDataURL(file);
+    });
+
+    // Reset the input so the same file can be selected again
+    input.value = '';
+
+    // ResizeObserver in MobileModalBase automatically handles layout adjustments
+  }
+
+  /**
+   * Remove an attachment from the list
+   * Keeps keyboard open by maintaining focus
+   */
+  removeAttachment(attachmentId: string): void {
+    this.attachments.update((attachments) => attachments.filter((a) => a.id !== attachmentId));
+
+    // Immediately refocus input to prevent keyboard from closing
+    setTimeout(() => {
+      if (this.messageInputRef?.nativeElement) {
+        this.messageInputRef.nativeElement.focus();
+        Keyboard.show().catch((e) => console.log('Keyboard.show() not available:', e));
+      }
+    }, 0);
+
+    // Notify parent that attachments changed so it can scroll
+    this.attachmentsChanged.emit();
+
+    // ResizeObserver in MobileModalBase automatically handles layout adjustments
+  }
+
+  /**
+   * Send message
+   */
+  sendMessage(): void {
+    const text = this.messageText().trim();
+    const hasAttachments = this.attachments().length > 0;
+
+    // Must have either text or attachments
+    if (!text && !hasAttachments) return;
+
+    const isEdit = !!this.editingMessage();
+    const isReply = !!this.replyingTo();
+
+    // Emit message sent event
+    this.messageSent.emit({
+      content: isReply && this.replyingTo() ? `@${this.replyingTo()!.authorName} ${text}` : text,
+      isReply,
+      replyTo: this.replyingTo()?.authorName,
+      isEdit,
+      attachments: hasAttachments ? [...this.attachments()] : undefined,
+    });
+
+    // Keep keyboard open by explicitly showing it before clearing
+    // This prevents the keyboard from starting to close during the clear operation
+    Keyboard.show().catch(() => {
+      // Keyboard.show() not available on web, that's fine
+    });
+
+    // Clear the input and states
+    this.clear();
+
+    // Ensure input stays focused for quick follow-up messages
+    // The keyboard should remain open throughout this process
+    if (this.messageInputRef?.nativeElement) {
+      this.messageInputRef.nativeElement.focus();
+    }
+  }
+}