@propbinder/mobile-design 0.2.48 → 0.2.50

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

@@ -0,0 +1,633 @@
+import { Component, input, output, computed } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { DsAvatarComponent } from '@propbinder/design-system';
+import { DsIconComponent } from '@propbinder/design-system';
+
+/**
+ * Chat attachment interface
+ */
+export interface ChatAttachment {
+  id: string;
+  type: 'image' | 'pdf' | 'file';
+  url: string;
+  name: string;
+  size?: number;
+  thumbnail?: string;
+}
+
+/**
+ * DsMobileMessageBubbleComponent
+ * 
+ * Individual message bubble component for chat conversations.
+ * Supports left-aligned (sender) and right-aligned (user) messages with different styling.
+ * 
+ * Features:
+ * - Left/right alignment based on sender
+ * - Avatar display (left for sender, right for user)
+ * - Message content with text wrapping
+ * - Timestamp display
+ * - Read receipt indicator (for user's messages)
+ * - Attachment support
+ * - Long press support for actions
+ * 
+ * @example
+ * ```html
+ * <!-- Sender's message (left-aligned) -->
+ * <ds-mobile-message-bubble
+ *   [isOwnMessage]="false"
+ *   [senderName]="'Ricki Meihlen'"
+ *   [content]="'We have received your case...'"
+ *   [timestamp]="'12:34'"
+ *   [avatarInitials]="'RM'">
+ * </ds-mobile-message-bubble>
+ * 
+ * <!-- User's message (right-aligned) -->
+ * <ds-mobile-message-bubble
+ *   [isOwnMessage]="true"
+ *   [senderName]="'You'"
+ *   [content]="'Thank you!'"
+ *   [timestamp]="'12:35'"
+ *   [readStatus]="true"
+ *   [avatarInitials]="'JD'">
+ * </ds-mobile-message-bubble>
+ * ```
+ */
+@Component({
+  selector: 'ds-mobile-message-bubble',
+  standalone: true,
+  imports: [CommonModule, DsAvatarComponent, DsIconComponent],
+  host: {
+    '[class.is-own-message]': 'isOwnMessage()',
+    '[class.has-attachments]': 'attachments() && attachments()!.length > 0',
+    '[class.cluster-single]': 'clusterPosition() === "single"',
+    '[class.cluster-first]': 'clusterPosition() === "first"',
+    '[class.cluster-middle]': 'clusterPosition() === "middle"',
+    '[class.cluster-last]': 'clusterPosition() === "last"',
+    '[class.tapped]': 'isTapped',
+    '[class.is-new-message]': 'isNewMessage()',
+    '(touchstart)': 'handleTouchStart($event)',
+    '(touchend)': 'handleTouchEnd($event)',
+    '(touchmove)': 'handleTouchMove($event)',
+    '(contextmenu)': 'handleContextMenu($event)'
+  },
+  styles: [`
+    :host {
+      display: flex;
+      gap: 8px;
+      margin-bottom: 4px;
+      width: 100%;
+      align-items: flex-end;
+      box-sizing: border-box;
+    }
+    
+    /* Adjust spacing for clustered messages */
+    :host.cluster-single {
+      margin-bottom: 12px; /* More space after standalone messages */
+    }
+    
+    :host.cluster-first {
+      margin-bottom: 2px; /* Tight spacing in cluster */
+    }
+    
+    :host.cluster-middle {
+      margin-bottom: 2px; /* Tight spacing in cluster */
+    }
+    
+    :host.cluster-last {
+      margin-bottom: 12px; /* More space after cluster ends */
+    }
+    
+    /* Left-aligned (sender's message) */
+    :host:not(.is-own-message) {
+      justify-content: flex-start !important;
+      flex-direction: row !important;
+    }
+    
+    /* Right-aligned (user's message) - MUST be right-aligned */
+    :host.is-own-message {
+      justify-content: flex-end !important;
+      flex-direction: row-reverse !important;
+      margin-left: auto !important;
+      margin-right: 0 !important;
+    }
+    
+    .avatar-wrapper {
+      flex-shrink: 0;
+      display: flex;
+      align-items: flex-end;
+      width: 32px; /* Reserve space for avatar even when hidden */
+    }
+    
+    .avatar-wrapper.hidden {
+      visibility: hidden; /* Use visibility instead of display to maintain space */
+    }
+    
+    .message-content-wrapper {
+      display: flex;
+      flex-direction: column;
+      gap: 0;
+      max-width: 75%;
+      min-width: 0;
+    }
+    
+    /* Left-aligned message bubble */
+    :host:not(.is-own-message) .message-content-wrapper {
+      align-items: flex-start;
+    }
+    
+    /* Right-aligned message bubble */
+    :host.is-own-message .message-content-wrapper {
+      align-items: flex-end !important;
+      margin-left: auto !important;
+      margin-right: 0 !important;
+    }
+    
+    .message-bubble {
+      padding: 8px 12px;
+      border-radius: 20px;
+      position: relative;
+      word-wrap: break-word;
+      white-space: pre-wrap;
+      max-width: 100%;
+      display: flex;
+      flex-direction: column;
+      /* Tap animation with spring bounce, including border-radius */
+      transition: 
+        transform var(--spring-bouncy),
+        border-radius var(--spring-bouncy);
+      will-change: transform, border-radius;
+    }
+    
+    /* Scale down on tap */
+    :host.tapped .message-bubble {
+      transform: scale(0.96);
+    }
+    
+    /* Cluster position border radius overrides */
+    /* Order: top-left, top-right, bottom-right, bottom-left */
+    
+    /* Single message in cluster - 20px all around (default) */
+    
+    /* Own messages (right side) - tight corners on the RIGHT */
+    /* First message in cluster - 20px 20px 4px 20px */
+    :host.is-own-message.cluster-first .message-bubble {
+      border-radius: 20px 20px 4px 20px;
+    }
+    
+    /* Middle message in cluster - 20px 4px 4px 20px */
+    :host.is-own-message.cluster-middle .message-bubble {
+      border-radius: 20px 4px 4px 20px;
+    }
+    
+    /* Last message in cluster - 20px 4px 20px 20px */
+    :host.is-own-message.cluster-last .message-bubble {
+      border-radius: 20px 4px 20px 20px;
+    }
+    
+    /* Sender messages (left side, grey) - tight corners on the LEFT */
+    /* First message in cluster - 20px 20px 20px 4px */
+    :host:not(.is-own-message).cluster-first .message-bubble {
+      border-radius: 20px 20px 20px 4px;
+    }
+    
+    /* Middle message in cluster - 4px 20px 20px 4px */
+    :host:not(.is-own-message).cluster-middle .message-bubble {
+      border-radius: 4px 20px 20px 4px;
+    }
+    
+    /* Last message in cluster - 4px 20px 20px 20px */
+    :host:not(.is-own-message).cluster-last .message-bubble {
+      border-radius: 4px 20px 20px 20px;
+    }
+    
+    /* Sender's message - neutral secondary background, no border */
+    :host:not(.is-own-message) .message-bubble {
+      background: var(--color-background-neutral-secondary, #f5f5f5);
+    }
+    
+    /* User's message - brand primary surface background */
+    :host.is-own-message .message-bubble {
+      background: var(--color-accent, var(--color-accent, #6B5FF5));
+      color: var(--color-on-accent, #ffffff);
+    }
+    
+    .message-text {
+      font-family: 'Brockmann', sans-serif;
+      font-size: var(--font-size-sm);
+      font-weight: 400;
+      line-height: 20px;
+      letter-spacing: -0.3px;
+      margin: 0;
+    }
+    
+    :host:not(.is-own-message) .message-text {
+      color: var(--color-text-primary, #1a1a1a);
+    }
+    
+    :host.is-own-message .message-text {
+      color: var(--color-on-accent, #ffffff);
+    }
+    
+    /* Attachments container */
+    .attachments {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 8px;
+      margin-top: 8px;
+    }
+    
+    :host:not(.is-own-message) .attachments {
+      justify-content: flex-start;
+    }
+    
+    :host.is-own-message .attachments {
+      justify-content: flex-end;
+    }
+    
+    .attachment-item {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      padding: 8px 12px;
+      background: var(--color-background-neutral-secondary, #f5f5f5);
+      border-radius: 8px;
+      border: 1px solid var(--border-color-default, #e5e5e5);
+      cursor: pointer;
+      transition: background 0.2s ease;
+    }
+    
+    :host.is-own-message .attachment-item {
+      background: rgba(255, 255, 255, 0.2);
+      border-color: rgba(255, 255, 255, 0.3);
+    }
+    
+    .attachment-item:active {
+      background: var(--color-background-neutral-secondary-hover, #ebebeb);
+    }
+    
+    :host.is-own-message .attachment-item:active {
+      background: rgba(255, 255, 255, 0.3);
+    }
+    
+    .attachment-icon {
+      flex-shrink: 0;
+      width: 24px;
+      height: 24px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      border-radius: 4px;
+      background: var(--color-background-neutral-primary, #ffffff);
+    }
+    
+    :host.is-own-message .attachment-icon {
+      background: rgba(255, 255, 255, 0.3);
+    }
+    
+    .attachment-name {
+      font-family: 'Brockmann', sans-serif;
+      font-size: var(--font-size-xs);
+      font-weight: 500;
+      line-height: 16px;
+      color: var(--color-text-primary, #1a1a1a);
+      max-width: 150px;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+    
+    :host.is-own-message .attachment-name {
+      color: var(--color-text-on-brand, #ffffff);
+    }
+    
+    /* Timestamp inside bubble */
+    .message-footer {
+      display: flex;
+      align-items: center;
+      gap: 4px;
+      align-self: flex-end; /* Always align to right within bubble */
+      height: 0;
+      margin-top: 0;
+      opacity: 0;
+      overflow: hidden;
+      transform: scale(0.95);
+      /* Spring bounce animation using design system variable */
+      transition: 
+        height var(--spring-bouncy),
+        margin-top var(--spring-bouncy),
+        opacity var(--spring-bouncy),
+        transform var(--spring-bouncy);
+    }
+    
+    /* Visible state - fade in and expand */
+    .message-footer.visible {
+      height: 14px;
+      margin-top: 4px;
+      opacity: 1;
+      transform: scale(1);
+    }
+    
+    /* Timestamp always right-aligned for both message types */
+    :host:not(.is-own-message) .message-footer {
+      align-self: flex-end; /* Right-align timestamp for sender's messages */
+    }
+    
+    .timestamp {
+      font-family: 'Brockmann', sans-serif;
+      font-size: 11px;
+      font-weight: 400;
+      line-height: 14px;
+      white-space: nowrap;
+    }
+    
+    /* Timestamp color for sender's messages (grey background) */
+    :host:not(.is-own-message) .timestamp {
+      color: var(--color-text-tertiary, #a0a0a0);
+    }
+    
+    /* Timestamp color for user's messages (brand background) */
+    :host.is-own-message .timestamp {
+      color: var(--color-on-accent, #ffffff);
+      opacity: 0.7;
+    }
+    
+    /* Long press tracking */
+    :host {
+      user-select: none;
+      -webkit-tap-highlight-color: transparent;
+    }
+    
+    /* New message animation - bouncy appearance with scale, opacity, and translateY */
+    :host.is-new-message {
+      animation: message-appear var(--spring-bouncy) forwards;
+    }
+    
+    @keyframes message-appear {
+      0% {
+        opacity: 0;
+        transform: translateY(20px) scale(0.92);
+      }
+      100% {
+        opacity: 1;
+        transform: translateY(0) scale(1);
+      }
+    }
+  `],
+  template: `
+    @if (!isOwnMessage()) {
+      <div class="avatar-wrapper" [class.hidden]="!showAvatar()">
+        <ds-avatar
+          [initials]="avatarInitials()"
+          [type]="avatarType()"
+          [src]="avatarSrc()"
+          size="sm" />
+      </div>
+    }
+    
+    <div class="message-content-wrapper" (click)="handleClick($event)">
+      <div class="message-bubble">
+        <!-- Only show text if content is not empty -->
+        @if (content().trim()) {
+          <p class="message-text">{{ content() }}</p>
+        }
+        
+        <!-- Attachments -->
+        @if (attachments() && attachments()!.length > 0) {
+          <div class="attachments">
+            @for (attachment of attachments(); track attachment.id) {
+              <div 
+                class="attachment-item"
+                (click)="handleAttachmentClick(attachment); $event.stopPropagation()">
+                <div class="attachment-icon">
+                  @if (attachment.type === 'image') {
+                    <ds-icon name="remixImageLine" size="16px" />
+                  } @else if (attachment.type === 'pdf') {
+                    <ds-icon name="remixFilePdfLine" size="16px" />
+                  } @else {
+                    <ds-icon name="remixFileLine" size="16px" />
+                  }
+                </div>
+                <span class="attachment-name">{{ attachment.name }}</span>
+              </div>
+            }
+          </div>
+        }
+        
+        <!-- Timestamp inside bubble, animated on tap -->
+        <div class="message-footer" [class.visible]="showTimestamp()">
+          <span class="timestamp">{{ timestamp() }}</span>
+        </div>
+      </div>
+    </div>
+  `
+})
+export class DsMobileMessageBubbleComponent {
+  /**
+   * Message content text
+   */
+  content = input.required<string>();
+  
+  /**
+   * Whether this is the current user's message (right-aligned)
+   */
+  isOwnMessage = input<boolean>(false);
+  
+  /**
+   * Sender's name (for display purposes)
+   */
+  senderName = input<string>('');
+  
+  /**
+   * Timestamp text (e.g., "12:34", "08-12-2025 13:18")
+   */
+  timestamp = input.required<string>();
+  
+  /**
+   * Whether to show the timestamp below the bubble
+   */
+  showTimestamp = input<boolean>(false);
+  
+  /**
+   * Avatar initials
+   */
+  avatarInitials = input<string>('');
+  
+  /**
+   * Avatar type
+   */
+  avatarType = input<'initials' | 'photo' | 'icon'>('initials');
+  
+  /**
+   * Avatar photo source (for photo type)
+   */
+  avatarSrc = input<string>('');
+  
+  /**
+   * Whether to show the avatar (for clustering logic)
+   */
+  showAvatar = input<boolean>(true);
+  
+  /**
+   * Cluster position for border radius styling
+   */
+  clusterPosition = input<'single' | 'first' | 'middle' | 'last'>('single');
+  
+  /**
+   * Whether to show read receipt (only for user's messages)
+   */
+  /**
+   * Message attachments
+   */
+  attachments = input<ChatAttachment[] | undefined>(undefined);
+  
+  /**
+   * Whether the message is clickable
+   */
+  clickable = input<boolean>(false);
+  
+  /**
+   * Whether this is a newly sent message (triggers appearance animation)
+   */
+  isNewMessage = input<boolean>(false);
+  
+  /**
+   * Emits when attachment is clicked
+   */
+  attachmentClick = output<ChatAttachment>();
+  
+  /**
+   * Emits when the message is long-pressed
+   */
+  longPress = output<void>();
+  
+  /**
+   * Emits when the message is clicked (to toggle timestamp)
+   */
+  messageClick = output<void>();
+  
+  /**
+   * Long press tracking
+   */
+  private longPressTimer: any = null;
+  private longPressTriggered = false;
+  private touchStartX = 0;
+  private touchStartY = 0;
+  private readonly LONG_PRESS_DURATION = 500; // ms
+  private readonly MOVE_THRESHOLD = 10; // px
+  private clickStartTime = 0;
+  
+  /**
+   * Tap animation state
+   */
+  isTapped = false;
+  
+  /**
+   * Handle attachment click
+   */
+  handleAttachmentClick(attachment: ChatAttachment): void {
+    this.attachmentClick.emit(attachment);
+  }
+  
+  /**
+   * Handle click (for web/mouse support)
+   */
+  handleClick(event: MouseEvent): void {
+    if (!this.clickable()) return;
+    
+    // Prevent double-firing on touch devices
+    // Touch events will be handled by handleTouchEnd
+    if ((event as any).sourceCapabilities?.firesTouchEvents) {
+      return;
+    }
+    
+    // Emit message click to toggle timestamp
+    this.messageClick.emit();
+  }
+  
+  /**
+   * Handle touch start for long press detection
+   */
+  handleTouchStart(event: TouchEvent): void {
+    if (!this.clickable()) return;
+    
+    // Add tap scale animation
+    this.isTapped = true;
+    
+    this.longPressTriggered = false;
+    this.clickStartTime = Date.now();
+    this.touchStartX = event.touches[0].clientX;
+    this.touchStartY = event.touches[0].clientY;
+    
+    // Start long press timer
+    this.longPressTimer = setTimeout(() => {
+      this.longPressTriggered = true;
+      this.longPress.emit();
+    }, this.LONG_PRESS_DURATION);
+  }
+  
+  /**
+   * Handle touch end to clear long press timer and detect short tap
+   */
+  handleTouchEnd(event: TouchEvent): void {
+    // Remove tap scale animation
+    this.isTapped = false;
+    
+    const pressDuration = Date.now() - this.clickStartTime;
+    
+    if (this.longPressTimer) {
+      clearTimeout(this.longPressTimer);
+      this.longPressTimer = null;
+    }
+    
+    // If long press was triggered, prevent other actions
+    if (this.longPressTriggered) {
+      event.preventDefault();
+      event.stopPropagation();
+      this.longPressTriggered = false;
+      return;
+    }
+    
+    // Short tap (less than long press duration) - show timestamp
+    if (this.clickable() && pressDuration < this.LONG_PRESS_DURATION) {
+      // Check if moved too much
+      const touch = event.changedTouches[0];
+      const deltaX = Math.abs(touch.clientX - this.touchStartX);
+      const deltaY = Math.abs(touch.clientY - this.touchStartY);
+      
+      if (deltaX <= this.MOVE_THRESHOLD && deltaY <= this.MOVE_THRESHOLD) {
+        this.messageClick.emit();
+        event.preventDefault();
+      }
+    }
+  }
+  
+  /**
+   * Handle touch move to cancel long press if moved too much
+   */
+  handleTouchMove(event: TouchEvent): void {
+    if (!this.longPressTimer) return;
+    
+    const touch = event.touches[0];
+    const deltaX = Math.abs(touch.clientX - this.touchStartX);
+    const deltaY = Math.abs(touch.clientY - this.touchStartY);
+    
+    // Cancel long press if moved too far
+    if (deltaX > this.MOVE_THRESHOLD || deltaY > this.MOVE_THRESHOLD) {
+      clearTimeout(this.longPressTimer);
+      this.longPressTimer = null;
+      this.longPressTriggered = false;
+      // Remove tap animation if moved too far
+      this.isTapped = false;
+    }
+  }
+  
+  /**
+   * Handle context menu (right-click on desktop) to trigger long press action
+   */
+  handleContextMenu(event: Event): void {
+    if (!this.clickable()) return;
+    event.preventDefault();
+    this.longPress.emit();
+  }
+}
+

package/src/components/message-bubble/index.ts

@@ -0,0 +1,7 @@
+export { DsMobileMessageBubbleComponent, type ChatAttachment } from './ds-mobile-message-bubble';
+
+
+
+
+
+