@propbinder/mobile-design 0.2.50 → 0.2.53

package/src/components/chat-modal/ds-mobile-chat-modal.ts

@@ -1,918 +0,0 @@
-import { Component, signal, Input, Output, EventEmitter, OnInit, AfterViewInit, CUSTOM_ELEMENTS_SCHEMA, computed } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { Keyboard } from '@capacitor/keyboard';
-import { DsMobileMessageComposerComponent } from '../message-composer';
-import { DsMobileMessageBubbleComponent, ChatAttachment } from '../message-bubble';
-import { DsAvatarWithBadgeComponent } from '../avatar-with-badge';
-import { DsMobileModalBaseComponent } from '../modal-base/ds-mobile-modal-base';
-import { DsMobileCardInlineFileComponent } from '../card-inline-file';
-import { type AttachmentData } from '../attachment-preview';
-import { DsMobileLightboxService, LightboxAuthor, LightboxImage } from '../lightbox';
-import { DsMobileSystemMessageBannerComponent } from '../system-message-banner';
-
-import { DsIconComponent } from '@propbinder/design-system';
-import { DsMobileSectionComponent } from '../section';
-
-/**
- * Chat message data interface
- */
-export interface ChatMessage {
-  id: string;
-  content: string;
-  senderId: string;
-  senderName: string;
-  senderRole?: string;
-  timestamp: Date;
-  avatarInitials?: string;
-  avatarType?: 'initials' | 'photo' | 'icon';
-  avatarSrc?: string;
-  isOwnMessage: boolean;
-  attachments?: ChatAttachment[];
-  fileAttachments?: AttachmentData[];
-  isNewMessage?: boolean;
-}
-
-/**
- * Message group interface for grouped timestamp display
- */
-interface MessageGroup {
-  timestamp: Date;
-  displayTimestamp: string;
-  messages: ChatMessage[];
-}
-
-/**
- * Extended message interface with display metadata
- */
-interface MessageDisplay extends ChatMessage {
-  showAvatar: boolean;
-  clusterPosition: 'single' | 'first' | 'middle' | 'last';
-  isNewMessage?: boolean;
-}
-
-/**
- * Chat participant interface
- */
-export interface ChatParticipant {
-  id: string;
-  name: string;
-  role?: string;
-  avatarInitials?: string;
-  avatarType?: 'initials' | 'photo' | 'icon';
-  avatarSrc?: string;
-  badge?: string;
-  verified?: boolean;
-  lastActive?: string;
-}
-
-/**
- * Chat modal data interface
- *
- * Represents the data needed to display a chat conversation.
- *
- * @example
- * ```typescript
- * const chatData: ChatModalData = {
- *   participant: {
- *     id: 'u-123',
- *     name: 'Ricki Meihlen',
- *     role: 'Inquiry assignee',
- *     avatarInitials: 'RM',
- *     avatarType: 'initials'
- *   },
- *   currentUserId: 'u-456',
- *   currentUserInitials: 'SD',
- *   currentUserAvatarType: 'initials',
- *   autoFocus: true,
- *   messages: [
- *     {
- *       id: 'm-1',
- *       content: 'We have received your case. Please see the attached photo.',
- *       senderId: 'u-123',
- *       senderName: 'Ricki Meihlen',
- *       senderRole: 'Case worker',
- *       timestamp: '12:34',
- *       isOwnMessage: false,
- *       avatarInitials: 'RM',
- *       avatarType: 'initials',
- *       attachments: [
- *         {
- *           id: 'a-1',
- *           type: 'image',
- *           url: 'https://example.com/photo.jpg',
- *           name: 'photo.jpg',
- *           thumbnail: 'https://example.com/photo_thumb.jpg'
- *         },
- *         {
- *           id: 'a-2',
- *           type: 'pdf',
- *           url: 'https://example.com/report.pdf',
- *           name: 'report.pdf'
- *         }
- *       ]
- *     },
- *     {
- *       id: 'm-2',
- *       content: 'Thanks — I will take a look.',
- *       senderId: 'u-456',
- *       senderName: 'You',
- *       timestamp: '12:36',
- *       isOwnMessage: true,
- *       avatarInitials: 'SD',
- *       avatarType: 'initials'
- *     }
- *   ]
- * };
- * ```
- */
-export interface ChatModalData {
-  /** The other participant in the conversation */
-  participant: ChatParticipant;
-  /** Array of messages in the conversation */
-  messages: ChatMessage[];
-  /** Current user's ID */
-  currentUserId: string;
-  /** Current user's avatar initials */
-  currentUserInitials?: string;
-  /** Current user's avatar type */
-  currentUserAvatarType?: 'initials' | 'photo' | 'icon';
-  /** Current user's avatar source */
-  currentUserAvatarSrc?: string;
-  /** Auto-focus input when modal opens */
-  autoFocus?: boolean;
-  /**
-   * Callback executed when a message is sent from the chat.
-   * Use this to handle API calls to your backend.
-   */
-  onSend?: (message: string, attachments: AttachmentData[]) => void | Promise<void>;
-  /**
-   * Optional callback for when a file attachment is clicked.
-   * If not provided, the default behavior will try to open/download the file.
-   */
-  onFileClick?: (file: AttachmentData) => void;
-}
-
-/**
- * DsMobileChatModalComponent
- *
- * Modal component for displaying and managing chat conversations.
- * Follows the same pattern as post-detail-modal for consistent behavior.
- *
- * Features:
- * - Header with participant info and close button
- * - Scrollable message thread
- * - Fixed message composer at bottom
- * - Keyboard handling
- * - Safe area support
- *
- * This component is typically not used directly - use DsMobileChatModalService instead.
- *
- * @example
- * ```typescript
- * // Don't instantiate directly - use the service:
- * constructor(private chatModal: DsMobileChatModalService) {}
- *
- * openChat() {
- *   this.chatModal.open({
- *     participant: { id: '123', name: 'Ricki Meihlen' },
- *     messages: [...],
- *     currentUserId: '456'
- *   });
- * }
- * ```
- */
-@Component({
-  selector: 'ds-mobile-chat-modal',
-  standalone: true,
-  imports: [
-    CommonModule,
-    DsAvatarWithBadgeComponent,
-    DsMobileMessageComposerComponent,
-    DsMobileMessageBubbleComponent,
-    DsMobileModalBaseComponent,
-    DsMobileCardInlineFileComponent,
-    DsMobileSystemMessageBannerComponent,
-    DsIconComponent,
-    DsMobileSectionComponent,
-  ],
-  styleUrls: ['../shared/mobile-common.css', './ds-mobile-chat-modal.css'],
-  schemas: [CUSTOM_ELEMENTS_SCHEMA],
-  template: `
-    <ds-mobile-modal-base
-      [loading]="loading"
-      [error]="error"
-      [headerTitle]="participant().name"
-      [headerMeta]="participant().role || ''"
-      [hasFixedBottom]="true"
-      [isAutoHeight]="false"
-      [enableKeyboardHandling]="true"
-      (keyboardWillShow)="handleKeyboardShow($event)"
-      closeButtonLabel="Luk chat"
-    >
-      <!-- Header Avatar -->
-      <ds-avatar-with-badge
-        header-leading
-        [initials]="participant().avatarInitials || ''"
-        [type]="participant().avatarType || 'initials'"
-        [src]="participant().avatarSrc || ''"
-        size="md"
-      />
-
-      <!-- Messages Section -->
-      <ds-mobile-section>
-        <div class="chat-messages-container" (click)="handleContentClick()">
-          <!-- Centered avatar section at top of messages -->
-          <div class="chat-avatar-section">
-            <ds-avatar-with-badge
-              [initials]="participant().avatarInitials || ''"
-              [type]="participant().avatarType || 'initials'"
-              [src]="participant().avatarSrc || ''"
-              [badge]="participant().badge"
-              size="xl"
-            />
-            <div class="chat-avatar-info">
-              <div class="chat-avatar-name">
-                {{ participant().name }}
-                @if (participant().verified) {
-                  <ds-icon name="remixCheckboxCircleFill" size="24px" [style.color]="'var(--color-primary-base)'"></ds-icon>
-                }
-              </div>
-              @if (participant().role) {
-                <div class="chat-avatar-role">{{ participant().role }}</div>
-              }
-              @if (participant().lastActive) {
-                <div class="chat-avatar-meta">{{ participant().lastActive }}</div>
-              }
-            </div>
-          </div>
-
-          <div class="messages-list">
-            @if (messages().length === 0) {
-              <!-- Empty State - Timestamp and System Message -->
-              <div class="timestamp-header">
-                <span class="timestamp-text">{{ getInitialTimestamp() }}</span>
-              </div>
-
-              <ds-mobile-system-message-banner [message]="participant().name + ' har overtaget din henvendelse og vil kontakte dig snart.'" [afterTimestamp]="true">
-              </ds-mobile-system-message-banner>
-            } @else {
-              @for (group of messagesWithDisplay(); track group.timestamp) {
-                <!-- Timestamp Header -->
-                <div class="timestamp-header">
-                  <span class="timestamp-text">{{ group.displayTimestamp }}</span>
-                </div>
-
-                <!-- System message example (shown after first timestamp) -->
-                @if ($first) {
-                  <ds-mobile-system-message-banner [message]="participant().name + ' har overtaget din henvendelse og vil kontakte dig snart.'" [afterTimestamp]="true">
-                  </ds-mobile-system-message-banner>
-                }
-                @for (message of group.messages; track message.id) {
-                  <!-- Only show bubble if has content -->
-                  @if (message.content.trim()) {
-                    <ds-mobile-message-bubble
-                      [content]="message.content"
-                      [isOwnMessage]="message.isOwnMessage"
-                      [timestamp]="formatMessageTimestamp(message.timestamp)"
-                      [showTimestamp]="selectedMessageId() === message.id"
-                      [avatarInitials]="message.avatarInitials || ''"
-                      [avatarType]="message.avatarType || 'initials'"
-                      [avatarSrc]="message.avatarSrc || ''"
-                      [showAvatar]="message.showAvatar"
-                      [clusterPosition]="message.clusterPosition"
-                      [attachments]="message.attachments"
-                      [clickable]="true"
-                      [isNewMessage]="message.isNewMessage || false"
-                      (messageClick)="handleMessageClick(message.id)"
-                      (attachmentClick)="handleAttachmentClick($event)"
-                      (longPress)="handleMessageLongPress(message)"
-                    >
-                    </ds-mobile-message-bubble>
-                  }
-
-                  <!-- File attachments displayed below message bubble -->
-                  @if (message.fileAttachments && message.fileAttachments.length > 0) {
-                    <div class="message-file-attachments" [class.own-message]="message.isOwnMessage">
-                      @for (fileAttachment of message.fileAttachments; track fileAttachment.id) {
-                        <!-- Show inline image preview for image attachments -->
-                        @if (fileAttachment.type === 'image') {
-                          <div class="message-image-attachment" (click)="handleImageClick(fileAttachment, message)">
-                            <img [src]="fileAttachment.src" [alt]="fileAttachment.name || 'Image'" class="inline-image" />
-                          </div>
-                        } @else {
-                          <!-- Show file card for non-image attachments -->
-                          <ds-mobile-card-inline-file
-                            [fileName]="fileAttachment.name || 'Unknown file'"
-                            [fileSize]="fileAttachment.size || ''"
-                            [variant]="getFileVariant(fileAttachment.type)"
-                            [layout]="'compact'"
-                            (fileClick)="handleFileAttachmentClick(fileAttachment)"
-                          >
-                          </ds-mobile-card-inline-file>
-                        }
-                      }
-                    </div>
-                  }
-                }
-              }
-            }
-          </div>
-        </div>
-      </ds-mobile-section>
-
-      <!-- Fixed message composer -->
-      <div fixed-bottom>
-        <ds-mobile-message-composer
-          [avatarInitials]="currentUserInitials()"
-          [avatarType]="currentUserAvatarType()"
-          [avatarSrc]="currentUserAvatarSrc()"
-          [placeholder]="'Skriv en besked...'"
-          [autoFocus]="autoFocus()"
-          [showAttachmentButton]="true"
-          (messageSent)="handleMessageSent($event)"
-          (attachmentClicked)="handleComposerAttachmentClick()"
-          (attachmentsChanged)="handleAttachmentsChanged()"
-        >
-        </ds-mobile-message-composer>
-      </div>
-    </ds-mobile-modal-base>
-  `,
-})
-export class DsMobileChatModalComponent implements OnInit, AfterViewInit {
-  // Chat data passed from service
-  @Input() chatData!: ChatModalData;
-
-  /**
-   * Loading state - when true, shows loading indicator
-   */
-  @Input() loading: boolean = false;
-
-  /**
-   * Error state - when set, shows error message
-   */
-  @Input() error?: string;
-
-  /**
-   * Back button click event
-   */
-  @Output() back = new EventEmitter<void>();
-
-  // Signal for reactive chat data
-  participant = signal<ChatParticipant>({
-    id: '',
-    name: '',
-    avatarInitials: '',
-  });
-
-  messages = signal<ChatMessage[]>([]);
-  currentUserInitials = signal<string>('');
-  currentUserAvatarType = signal<'initials' | 'photo' | 'icon'>('initials');
-  currentUserAvatarSrc = signal<string>('');
-  autoFocus = signal<boolean>(false);
-
-  /**
-   * Selected message ID for showing timestamp
-   */
-  selectedMessageId = signal<string | null>(null);
-
-  /**
-   * Track if keyboard is currently visible
-   */
-  private isKeyboardVisible = false;
-
-  /**
-   * Timeout for auto-hiding timestamp
-   */
-  private timestampTimeout?: ReturnType<typeof setTimeout>;
-
-  /**
-   * Computed signal for grouped messages with timestamp headers
-   */
-  messageGroups = computed(() => {
-    return this.groupMessagesByTime(this.messages(), 5);
-  });
-
-  /**
-   * Computed signal for messages with display metadata (avatar visibility)
-   */
-  messagesWithDisplay = computed(() => {
-    return this.addDisplayMetadata(this.messageGroups());
-  });
-
-  constructor(private lightboxService: DsMobileLightboxService) {}
-
-  ngOnInit(): void {
-    // Initialize chat data from input
-    if (this.chatData) {
-      this.participant.set(this.chatData.participant);
-      this.messages.set(this.chatData.messages || []);
-      this.currentUserInitials.set(this.chatData.currentUserInitials || '');
-      this.currentUserAvatarType.set(this.chatData.currentUserAvatarType || 'initials');
-      this.currentUserAvatarSrc.set(this.chatData.currentUserAvatarSrc || '');
-      this.autoFocus.set(this.chatData.autoFocus || false);
-    }
-  }
-
-  ngAfterViewInit(): void {
-    // Scroll to bottom when messages load
-    if (this.messages().length > 0) {
-      setTimeout(() => {
-        this.scrollToBottom();
-      }, 500);
-    }
-  }
-
-  /**
-   * Handle back button click
-   */
-  handleBack(): void {
-    this.back.emit();
-  }
-
-  /**
-   * Handle keyboard show event from base modal
-   * Only scrolls to bottom if user is already near the bottom, otherwise lets
-   * the natural padding expansion push content up (like Messenger/Signal/Telegram)
-   */
-  handleKeyboardShow(keyboardHeight: number): void {
-    // Track keyboard state
-    this.isKeyboardVisible = true;
-
-    // Check if user is near bottom before auto-scrolling
-    this.isNearBottom().then((isNear) => {
-      if (isNear) {
-        // User is already viewing latest messages, maintain that position
-        // Small delay to synchronize with keyboard animation
-        setTimeout(() => {
-          this.scrollToBottom();
-        }, 50);
-      }
-      // Otherwise, let the natural padding expansion push content up smoothly
-    });
-  }
-
-  /**
-   * Check if scroll position is near the bottom
-   * Used to determine if we should auto-scroll when keyboard appears
-   */
-  private async isNearBottom(): Promise<boolean> {
-    const ionContent = document.querySelector('ds-mobile-chat-modal ion-content');
-    if (ionContent) {
-      try {
-        const scrollElement = await (ionContent as any).getScrollElement();
-        const scrollTop = scrollElement.scrollTop;
-        const scrollHeight = scrollElement.scrollHeight;
-        const clientHeight = scrollElement.clientHeight;
-        const threshold = 150; // pixels - consider "near bottom" within 150px
-
-        const distanceFromBottom = scrollHeight - scrollTop - clientHeight;
-        return distanceFromBottom <= threshold;
-      } catch (e) {
-        console.log('[ChatModal] Could not check scroll position:', e);
-        // The provided snippet was syntactically incorrect for this location.
-        // Assuming the intent was to add `auto-height` to the modal's CSS class,
-        // this change should be applied where the modal is opened or in its template.
-        // As per the instruction, the `isAutoHeight` property is added to the component.
-      }
-    }
-    return true;
-  }
-
-  /**
-   * Scroll to bottom of messages
-   */
-  private async scrollToBottom(): Promise<void> {
-    const ionContent = document.querySelector('ds-mobile-chat-modal ion-content');
-    if (ionContent) {
-      // Scroll with smooth animation (400ms) and add a small offset to ensure visibility
-      await (ionContent as any).scrollToBottom(400);
-    }
-  }
-
-  /**
-   * Handle message sent from composer
-   */
-  handleMessageSent(event: { content: string; isReply?: boolean; replyTo?: string; isEdit?: boolean; attachments?: AttachmentData[] }): void {
-    const newMessage: ChatMessage = {
-      id: Date.now().toString(),
-      content: event.content,
-      senderId: this.chatData.currentUserId,
-      senderName: 'You',
-      timestamp: new Date(),
-      isOwnMessage: true,
-      avatarInitials: this.currentUserInitials(),
-      avatarType: this.currentUserAvatarType(),
-      avatarSrc: this.currentUserAvatarSrc(),
-      fileAttachments: event.attachments || [],
-      isNewMessage: true, // Mark as new message to trigger animation
-    };
-
-    // Add message to list
-    const updatedMessages = [...this.messages(), newMessage];
-    this.messages.set(updatedMessages);
-
-    // Remove the isNewMessage flag after animation completes (using spring-bouncy duration ~600ms)
-    setTimeout(() => {
-      const msgs = this.messages();
-      const msgIndex = msgs.findIndex((m) => m.id === newMessage.id);
-      if (msgIndex !== -1) {
-        msgs[msgIndex].isNewMessage = false;
-        this.messages.set([...msgs]);
-      }
-    }, 700);
-
-    // Scroll to bottom after message is added and DOM updates
-    // Multiple delays to ensure:
-    // 1. DOM update from new message
-    // 2. Composer height change (clears text/attachments)
-    // 3. ResizeObserver updates padding
-    requestAnimationFrame(() => {
-      requestAnimationFrame(() => {
-        setTimeout(() => {
-          this.scrollToBottom();
-          console.log('[ChatModal] Scrolled to bottom after message sent');
-        }, 150);
-      });
-    });
-
-    // Executing the onSend callback if provided
-    if (this.chatData.onSend) {
-      this.chatData.onSend(event.content, event.attachments || []);
-    }
-  }
-
-  /**
-   * Handle attachment click
-   */
-  handleAttachmentClick(attachment: ChatAttachment): void {
-    if (attachment.type !== 'image') {
-      if (attachment.url) {
-        window.open(attachment.url, '_blank', 'noopener,noreferrer');
-      }
-      return;
-    }
-
-    const msgs = this.messages();
-
-    const allImages: Array<{ msg: ChatMessage; att: ChatAttachment }> = [];
-    for (const m of msgs) {
-      for (const att of m.attachments ?? []) {
-        if (att.type === 'image') {
-          allImages.push({ msg: m, att });
-        }
-      }
-    }
-
-    const initialIndex = Math.max(
-      0,
-      allImages.findIndex((x) => x.att.id === attachment.id),
-    );
-
-    const images: LightboxImage[] = allImages.map((x) => ({
-      type: 'image',
-      src: x.att.url,
-      title: x.att.name,
-      alt: x.att.name,
-      thumbnail: x.att.thumbnail,
-    }));
-
-    const ownerMessage = allImages[initialIndex]?.msg;
-
-    const author: LightboxAuthor | undefined = ownerMessage
-      ? {
-          name: ownerMessage.senderName,
-          role: ownerMessage.senderRole,
-          timestamp: this.formatMessageTimestamp(ownerMessage.timestamp),
-          avatarInitials: ownerMessage.avatarInitials,
-          avatarSrc: ownerMessage.avatarSrc,
-          avatarType: ownerMessage.avatarType === 'photo' || ownerMessage.avatarType === 'initials' ? ownerMessage.avatarType : undefined,
-        }
-      : undefined;
-
-    this.lightboxService.openImages({
-      images,
-      author,
-      initialIndex,
-      enableZoom: true,
-      enableSwipe: true,
-      showControls: true,
-      showInfo: true,
-      animation: 'fade',
-    });
-  }
-
-  /**
-   * Handle composer attachment button click
-   */
-  handleComposerAttachmentClick(): void {
-    console.log('[ChatModal] Composer attachment button clicked');
-    // In a real app, you would open a file picker or show attachment options
-  }
-
-  /**
-   * Handle attachments changed (added or removed)
-   * ResizeObserver automatically updates padding, which naturally pushes content up.
-   * Only scroll to bottom if user is already viewing the latest messages.
-   */
-  handleAttachmentsChanged(): void {
-    console.log('[ChatModal] Attachments changed - ResizeObserver will handle padding naturally');
-    // ResizeObserver automatically:
-    // 1. Detects composer height change
-    // 2. Updates --fixed-bottom-height CSS variable
-    // 3. Updates scroll element padding
-    // 4. Smoothly pushes content up
-
-    // Only scroll if user is already at bottom (optional - can be removed entirely)
-    requestAnimationFrame(() => {
-      requestAnimationFrame(() => {
-        setTimeout(() => {
-          this.isNearBottom().then((isNear) => {
-            if (isNear) {
-              // User is at bottom, maintain that position as composer expands
-              this.scrollToBottom();
-            }
-            // Otherwise, let natural padding expansion push content up
-          });
-        }, 100);
-      });
-    });
-  }
-
-  /**
-   * Handle content area click - dismiss keyboard when tapping messages
-   */
-  handleContentClick(): void {
-    // Hide keyboard when tapping outside the composer
-    Keyboard.hide()
-      .then(() => {
-        this.isKeyboardVisible = false;
-      })
-      .catch((e) => console.log('[ChatModal] Keyboard.hide() not available:', e));
-  }
-
-  /**
-   * Get file variant for card-inline-file component
-   */
-  getFileVariant(type: string): 'pdf' | 'doc' {
-    return type === 'pdf' ? 'pdf' : 'doc';
-  }
-
-  /**
-   * Handle file attachment click
-   */
-  handleFileAttachmentClick(fileAttachment: AttachmentData): void {
-    // If a custom handler is provided, use it
-    if (this.chatData.onFileClick) {
-      this.chatData.onFileClick(fileAttachment);
-      return;
-    }
-
-    // Default behavior: Try to open/download the file
-    const url = fileAttachment.src || (fileAttachment as any).url;
-    if (url) {
-      const link = document.createElement('a');
-      link.href = url;
-      link.target = '_blank';
-      // If it has a name, setting download attribute suggests downloading
-      if (fileAttachment.name) {
-        link.download = fileAttachment.name;
-      }
-
-      document.body.appendChild(link);
-      link.click();
-      document.body.removeChild(link);
-    } else {
-      console.warn('[ChatModal] No URL or source for file attachment:', fileAttachment);
-    }
-  }
-
-  /**
-   * Handle image attachment click - opens lightbox
-   */
-  async handleImageClick(attachment: AttachmentData, message: ChatMessage): Promise<void> {
-    await this.lightboxService.openImages({
-      images: [
-        {
-          type: 'image',
-          src: attachment.src,
-          title: attachment.name || 'Image',
-          alt: attachment.name || 'Chat image',
-        },
-      ],
-      author: {
-        name: message.senderName,
-        role: message.senderRole,
-        avatarInitials: message.avatarInitials,
-        avatarType: message.avatarType === 'initials' ? 'initials' : 'photo',
-        avatarSrc: message.avatarSrc,
-        timestamp: this.formatMessageTimestamp(message.timestamp),
-      },
-      initialIndex: 0,
-      enableZoom: true,
-      showControls: false,
-      enableSwipe: false,
-      showInfo: false,
-      showActions: false,
-    });
-  }
-
-  /**
-   * Handle message long press
-   */
-  handleMessageLongPress(message: ChatMessage): void {
-    console.log('[ChatModal] Message long pressed:', message);
-    // In a real app, you would show an action sheet with options (copy, delete, etc.)
-  }
-
-  /**
-   * Handle message click to show/hide timestamp
-   * Only shows timestamp if keyboard is already hidden
-   */
-  handleMessageClick(messageId: string): void {
-    // If keyboard is visible, dismiss it and don't show timestamp
-    if (this.isKeyboardVisible) {
-      Keyboard.hide()
-        .then(() => {
-          this.isKeyboardVisible = false;
-        })
-        .catch((e) => console.log('[ChatModal] Keyboard.hide() not available:', e));
-      return; // Exit early, don't toggle timestamp
-    }
-
-    // Keyboard is hidden, proceed with timestamp toggle
-    // Clear existing timeout
-    if (this.timestampTimeout) {
-      clearTimeout(this.timestampTimeout);
-    }
-
-    // Toggle timestamp - if clicking same message, hide it; otherwise show new one
-    this.selectedMessageId.update((current) => (current === messageId ? null : messageId));
-
-    // Auto-hide after 3 seconds if showing
-    if (this.selectedMessageId() === messageId) {
-      this.timestampTimeout = setTimeout(() => {
-        this.selectedMessageId.set(null);
-      }, 3000);
-    }
-  }
-
-  /**
-   * Format message timestamp for display (EU 24-hour format, Danish)
-   */
-  formatMessageTimestamp(date: Date): string {
-    return date.toLocaleTimeString('da-DK', {
-      hour: '2-digit',
-      minute: '2-digit',
-      hour12: false,
-    });
-  }
-
-  /**
-   * Get initial timestamp for empty chat state
-   * Returns current time formatted with smart date display
-   */
-  getInitialTimestamp(): string {
-    return this.formatGroupTimestamp(new Date());
-  }
-
-  /**
-   * Group messages by time threshold
-   * Messages within the threshold and on the same day are grouped together
-   */
-  private groupMessagesByTime(messages: ChatMessage[], thresholdMinutes: number): MessageGroup[] {
-    const groups: MessageGroup[] = [];
-    let currentGroup: MessageGroup | null = null;
-
-    messages.forEach((message) => {
-      const messageDate = message.timestamp;
-
-      // Start a new group if:
-      // 1. It's the first message
-      // 2. More than threshold minutes have passed since last message
-      // 3. Date changed (new day)
-      if (!currentGroup || this.shouldStartNewGroup(currentGroup.timestamp, messageDate, thresholdMinutes)) {
-        currentGroup = {
-          timestamp: messageDate,
-          displayTimestamp: this.formatGroupTimestamp(messageDate),
-          messages: [],
-        };
-        groups.push(currentGroup);
-      }
-
-      currentGroup.messages.push(message);
-    });
-
-    return groups;
-  }
-
-  /**
-   * Determine if a new message group should be started
-   */
-  private shouldStartNewGroup(lastTime: Date, currentTime: Date, thresholdMinutes: number): boolean {
-    const diffMinutes = (currentTime.getTime() - lastTime.getTime()) / (1000 * 60);
-
-    // New group if different day
-    if (lastTime.toDateString() !== currentTime.toDateString()) {
-      return true;
-    }
-
-    // New group if threshold exceeded
-    return diffMinutes > thresholdMinutes;
-  }
-
-  /**
-   * Format group timestamp header with smart date display
-   * Uses 24-hour EU time format with Danish locale
-   */
-  private formatGroupTimestamp(date: Date): string {
-    const now = new Date();
-    const today = new Date(now.getFullYear(), now.getMonth(), now.getDate());
-    const yesterday = new Date(today);
-    yesterday.setDate(yesterday.getDate() - 1);
-
-    const messageDate = new Date(date.getFullYear(), date.getMonth(), date.getDate());
-
-    // Format time in 24-hour EU format
-    const timeStr = date.toLocaleTimeString('da-DK', {
-      hour: '2-digit',
-      minute: '2-digit',
-      hour12: false,
-    });
-
-    // Today: "14:34"
-    if (messageDate.getTime() === today.getTime()) {
-      return timeStr;
-    }
-
-    // Yesterday: "I går, 14:34"
-    if (messageDate.getTime() === yesterday.getTime()) {
-      return `I går, ${timeStr}`;
-    }
-
-    // This week: "Mandag, 14:34"
-    const daysAgo = Math.floor((today.getTime() - messageDate.getTime()) / (1000 * 60 * 60 * 24));
-    if (daysAgo < 7) {
-      return date.toLocaleDateString('da-DK', { weekday: 'long' }) + `, ${timeStr}`;
-    }
-
-    // Older: "15. jan, 14:34" or "20. dec. 2024, 14:34" if different year
-    const dateFormat: Intl.DateTimeFormatOptions = {
-      month: 'short',
-      day: 'numeric',
-    };
-
-    if (date.getFullYear() !== now.getFullYear()) {
-      dateFormat.year = 'numeric';
-    }
-
-    return date.toLocaleDateString('da-DK', dateFormat) + `, ${timeStr}`;
-  }
-
-  /**
-   * Add display metadata to message groups
-   * Determines which messages should show avatars (only last in cluster)
-   * and calculates cluster positions for border radius styling
-   */
-  private addDisplayMetadata(groups: MessageGroup[]): Array<MessageGroup & { messages: MessageDisplay[] }> {
-    return groups.map((group) => {
-      const messagesWithDisplay: MessageDisplay[] = [];
-
-      for (let i = 0; i < group.messages.length; i++) {
-        const currentMsg = group.messages[i];
-        const prevMsg = group.messages[i - 1];
-        const nextMsg = group.messages[i + 1];
-
-        // Determine if this message starts a new cluster
-        const startsCluster = !prevMsg || prevMsg.senderId !== currentMsg.senderId;
-        // Determine if this message ends the cluster
-        const endsCluster = !nextMsg || nextMsg.senderId !== currentMsg.senderId;
-
-        // Show avatar only at the end of a cluster
-        const showAvatar = endsCluster;
-
-        // Determine cluster position for border radius
-        let clusterPosition: 'single' | 'first' | 'middle' | 'last';
-        if (startsCluster && endsCluster) {
-          clusterPosition = 'single';
-        } else if (startsCluster) {
-          clusterPosition = 'first';
-        } else if (endsCluster) {
-          clusterPosition = 'last';
-        } else {
-          clusterPosition = 'middle';
-        }
-
-        messagesWithDisplay.push({
-          ...currentMsg,
-          showAvatar,
-          clusterPosition,
-        });
-      }
-
-      return {
-        ...group,
-        messages: messagesWithDisplay,
-      };
-    });
-  }
-}