@propbinder/mobile-design 0.2.48 → 0.2.50

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

@@ -0,0 +1,159 @@
+/**
+ * Chat Modal Styles
+ *
+ * Component-specific styles for the chat modal.
+ * Base modal styles are inherited from ds-mobile-modal-base.
+ */
+
+/* ============================================
+   OVERRIDE BASE MODAL STYLES
+   ============================================ */
+
+/* Remove top padding from base modal for chat - we want the background to start immediately after header */
+:host ::ng-deep .modal-content-container {
+  padding-top: 0;
+}
+
+/* ============================================
+   MESSAGES CONTAINER
+   ============================================ */
+
+/* Old container no longer needed - section provides structure */
+.chat-messages-container {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+}
+
+/* ============================================
+   CENTERED AVATAR SECTION (inside chat wrapper)
+   ============================================ */
+
+/* Old padding removed - section provides padding */
+.chat-avatar-section {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 12px;
+  padding: 48px 0 0 0;
+  background: var(--color-background-neutral-primary, #ffffff);
+}
+
+.chat-avatar-info {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
+}
+
+.chat-avatar-name {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-family: 'Brockmann', sans-serif;
+  font-size: var(--font-size-base);
+  font-weight: 600;
+  line-height: 1.3;
+  color: var(--color-text-primary, #1a1a1a);
+}
+
+.chat-avatar-role {
+  font-family: 'Brockmann', sans-serif;
+  font-size: var(--font-size-xs);
+  font-weight: 400;
+  line-height: 1.2;
+  color: var(--color-text-secondary, #666666);
+}
+
+.chat-avatar-meta {
+  font-family: 'Brockmann', sans-serif;
+  font-size: var(--font-size-xs);
+  font-weight: 400;
+  line-height: 1.2;
+  color: var(--color-text-tertiary, #737373);
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+/* Old padding removed - section provides padding */
+.messages-list {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  padding: 16px 0 0 0;
+  align-items: stretch; /* Ensure messages take full width for proper alignment */
+}
+
+/* Ensure message bubbles can align properly */
+.messages-list ds-mobile-message-bubble {
+  width: 100%;
+  display: flex;
+}
+
+/* ============================================
+   TIMESTAMP HEADER
+   ============================================ */
+
+.timestamp-header {
+  display: flex;
+  justify-content: center;
+  margin: 16px 0 8px 0;
+}
+
+.timestamp-text {
+  font-family: 'Brockmann', sans-serif;
+  font-size: 12px;
+  font-weight: 400;
+  color: var(--color-text-secondary);
+  padding: 4px 12px;
+}
+
+/* ============================================
+   FILE ATTACHMENTS
+   ============================================ */
+
+.message-file-attachments {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  margin-bottom: 12px;
+  padding: 0 20px 0 60px; /* Left padding to align with message bubble (20px + 32px avatar + 8px gap) */
+  max-width: 100%;
+}
+
+.message-file-attachments.own-message {
+  padding: 0 0px 0 96px; /* No avatar on right, so just right padding like normal content */
+  align-items: flex-end;
+}
+
+.message-file-attachments ds-mobile-card-inline-file {
+  max-width: 280px;
+  width: 100%;
+}
+
+/* Inline image preview */
+.message-image-attachment {
+  width: 96px;
+  height: 96px;
+  cursor: pointer;
+  border-radius: 12px;
+  overflow: hidden;
+  position: relative;
+  transition: transform 0.2s ease;
+  border: 1px solid var(--border-color-default, #e5e5e5);
+}
+
+.message-image-attachment:active {
+  transform: scale(0.98);
+}
+
+.message-image-attachment .inline-image {
+  width: 100%;
+  height: 100%;
+  display: block;
+  -o-object-fit: cover;
+     object-fit: cover; /* Crop to fit the square */
+}
+
+

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

@@ -0,0 +1,105 @@
+import { Injectable } from '@angular/core';
+import { ModalController } from '@ionic/angular/standalone';
+import { DsMobileChatModalComponent, ChatModalData } from './ds-mobile-chat-modal';
+import { BaseModalService } from '../../services/base-modal.service';
+
+/**
+ * DsMobileChatModalService
+ *
+ * Service for displaying chat conversations in a full-screen modal.
+ * Built on Ionic's modal system with native gestures and animations.
+ * Follows the same pattern as DsMobilePostDetailModalService for consistent behavior.
+ *
+ * Features:
+ * - Full conversation display
+ * - Message thread with bubbles
+ * - Message composer
+ * - Native modal animations
+ * - Safe area support
+ * - Keyboard handling
+ *
+ * @example
+ * ```typescript
+ * constructor(private chatModal: DsMobileChatModalService) {}
+ *
+ * async openChat() {
+ *   await this.chatModal.open({
+ *     participant: {
+ *       id: '123',
+ *       name: 'Ricki Meihlen',
+ *       role: 'Inquiry assignee',
+ *       avatarInitials: 'RM'
+ *     },
+ *     messages: [
+ *       {
+ *         id: '1',
+ *         content: 'We have received your case...',
+ *         senderId: '123',
+ *         senderName: 'Ricki Meihlen',
+ *         timestamp: '12:34',
+ *         isOwnMessage: false,
+ *         avatarInitials: 'RM'
+ *       },
+ *       {
+ *         id: '2',
+ *         content: 'Thank you!',
+ *         senderId: '456',
+ *         senderName: 'You',
+ *         timestamp: '12:35',
+ *         isOwnMessage: true,
+ *         avatarInitials: 'JD',
+ *         readStatus: true
+ *       }
+ *     ],
+ *     currentUserId: '456',
+ *     currentUserInitials: 'JD',
+ *     currentUserInitials: 'JD',
+ *     autoFocus: true,
+ *     onSend: async (message, attachments) => {
+ *       console.log('Sending message:', message);
+ *       // await this.chatService.sendMessage(participant.id, message, attachments);
+ *     },
+ *     onFileClick: (file) => {
+ *       console.log('File clicked:', file);
+ *       // window.open(file.url, '_blank');
+ *     }
+ *   });
+ * }
+ * ```
+ */
+@Injectable({
+  providedIn: 'root',
+})
+export class DsMobileChatModalService extends BaseModalService {
+  constructor(modalController: ModalController) {
+    super(modalController);
+  }
+
+  /**
+   * Open the chat modal
+   *
+   * @param chatData Chat data to display
+   * @param options Optional loading and error states
+   * @returns Promise that resolves when the modal is presented
+   */
+  async open(chatData: ChatModalData, options?: { loading?: boolean; error?: string }): Promise<void> {
+    // console.log('[ChatModal] Opening with data:', chatData);
+
+    const modal = await this.createModal(
+      DsMobileChatModalComponent,
+      {
+        chatData: chatData,
+        loading: options?.loading ?? false,
+        error: options?.error,
+      },
+      {
+        keyboardClose: true, // Keep keyboard close behavior for this modal
+        cssClass: 'ds-modal-base',
+      },
+    );
+
+    // console.log('[ChatModal] Modal created, presenting...');
+    await modal.present();
+    // console.log('[ChatModal] Modal presented');
+  }
+}