@propbinder/mobile-design 0.2.47 → 0.2.50

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

@@ -0,0 +1,918 @@
+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,
+      };
+    });
+  }
+}