// app.config.ts
import { ApplicationConfig } from '@angular/core';
import { provideChatConfig } from 'ngx-support-chat';

export const appConfig: ApplicationConfig = {
  providers: [
    provideChatConfig({
      dateFormat: 'MMM d, yyyy',
      timeFormat: 'HH:mm',
      dateSeparatorLabels: {
        today: 'Today',
        yesterday: 'Yesterday'
      }
    })
  ]
};

// app.component.ts
import { Component, signal } from '@angular/core';
import {
  ChatContainerComponent,
  ChatMessage,
  MessageSendEvent
} from 'ngx-support-chat';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [ChatContainerComponent],
  template: `
    <ngx-chat-container
      [messages]="messages()"
      [currentUserId]="currentUserId"
      [typingIndicator]="typingIndicator()"
      [quickReplies]="quickReplies()"
      [pendingAttachments]="attachments()"
      [(inputValue)]="inputValue"
      (messageSend)="onMessageSend($event)"
      (messageRetry)="onRetry($event)"
      (attachmentSelect)="onFilesSelected($event)"
      (attachmentRemove)="onAttachmentRemove($event)"
      (quickReplySubmit)="onQuickReply($event)"
      (imagePreview)="onImageClick($event)"
      (fileDownload)="onFileDownload($event)"
    >
      <div chatHeader>Support Chat</div>
      <div chatEmptyState>Start a conversation</div>
    </ngx-chat-container>
  `
})
export class AppComponent {
  messages = signal<ChatMessage[]>([]);
  typingIndicator = signal(null);
  quickReplies = signal(null);
  attachments = signal([]);
  inputValue = signal('');
  currentUserId = 'user-1';

  onMessageSend(event: MessageSendEvent) {
    // Handle message send
  }
}

interface ChatConfig {
  markdown: {
    enabled: boolean;      // Enable markdown support
    displayMode: boolean;  // Render markdown in messages
    inputMode: boolean;    // Allow markdown in input
  };
  dateFormat: string;      // e.g., 'MMMM d, yyyy'
  timeFormat: string;      // e.g., 'HH:mm'
  dateSeparatorLabels: {
    today: string;         // Label for today
    yesterday: string;     // Label for yesterday
  };
}

import { provideChatConfig } from 'ngx-support-chat';

export const appConfig: ApplicationConfig = {
  providers: [
    provideChatConfig({
      markdown: {
        enabled: true,
        displayMode: true,
        inputMode: false
      },
      dateFormat: 'dd/MM/yyyy',
      timeFormat: 'h:mm a',
      dateSeparatorLabels: {
        today: 'Aujourd\'hui',
        yesterday: 'Hier'
      }
    })
  ]
};

// app.config.ts
import { provideMarkdown, MarkdownService } from 'ngx-markdown';
import { provideChatConfig, MARKDOWN_SERVICE } from 'ngx-support-chat';

export const appConfig: ApplicationConfig = {
  providers: [
    provideMarkdown(),
    { provide: MARKDOWN_SERVICE, useExisting: MarkdownService },
    provideChatConfig({
      markdown: { enabled: true, displayMode: true }
    })
  ]
};

interface ChatMessage {
  id: string;                    // Unique identifier
  type: MessageType;             // 'text' | 'image' | 'file' | 'system'
  senderId: string;              // Sender's ID
  senderName: string;            // Display name
  senderAvatar?: string;         // Avatar URL
  timestamp: Date;               // Message time
  status: MessageStatus;         // 'sending' | 'sent' | 'delivered' | 'read' | 'failed'
  content: MessageContent;       // Type-specific content
}

// Text message
interface TextContent {
  text: string;
}

// Image message
interface ImageContent {
  thumbnailUrl: string;
  fullUrl: string;
  altText?: string;
  width?: number;
  height?: number;
}

// File message
interface FileContent {
  fileName: string;
  fileSize?: number;
  fileType: string;
  downloadUrl: string;
  icon?: string;
}

// System message
interface SystemContent {
  text: string;
}

import {
  isTextMessage,
  isImageMessage,
  isFileMessage,
  isSystemMessage
} from 'ngx-support-chat';

if (isTextMessage(message)) {
  console.log(message.content.text);
}

interface QuickReplySet {
  id: string;
  type: QuickReplyType;           // 'confirmation' | 'single-choice' | 'multiple-choice'
  prompt?: string;                // Optional prompt text
  options: QuickReplyOption[];
  submitted: boolean;
  selectedValues?: unknown[];
}

interface QuickReplyOption {
  value: unknown;
  label: string;
  disabled?: boolean;
}

interface TypingIndicator {
  userId: string;
  userName: string;
  avatar?: string;
}

interface Attachment {
  id: string;
  file: File;
  previewUrl?: string;      // For image previews
  uploadProgress?: number;  // 0-100
}

interface MessageSendEvent {
  text: string;
  attachments: Attachment[];
}

interface QuickReplySubmitEvent {
  type: QuickReplyType;
  value: unknown;
}

import {
  groupMessagesByDate,
  shouldGroupWithPrevious,
  getTotalMessageCount,
  flattenGroupedMessages,
  DEFAULT_GROUP_THRESHOLD_MS  // 5 minutes
} from 'ngx-support-chat';

// Group messages
const grouped = groupMessagesByDate(messages, currentUserId);

// Check if messages should be grouped
const shouldGroup = shouldGroupWithPrevious(currentMsg, prevMsg, 5 * 60 * 1000);

// Get total count
const count = getTotalMessageCount(grouped);

// Flatten back to array
const flat = flattenGroupedMessages(grouped);

import {
  formatDate,
  formatTime,
  isToday,
  isYesterday,
  isSameDay,
  startOfDay,
  getTimeDifferenceMs,
  getRelativeTime
} from 'ngx-support-chat';

formatDate(new Date(), 'MMMM d, yyyy');  // "December 29, 2025"
formatTime(new Date(), 'HH:mm');          // "14:30"
isToday(date);                            // true/false
isYesterday(date);                        // true/false
getRelativeTime(date);                    // "5 minutes ago"

import { ChatAnnouncerService } from 'ngx-support-chat';

// Inject the service for custom announcements
constructor(private announcer: ChatAnnouncerService) {}

// Announce a message
this.announcer.announceMessage(message);

// Announce typing
this.announcer.announceTyping(indicator);

// Announce quick reply selection
this.announcer.announceQuickReplySelection(option);

@Injectable({ providedIn: 'root' })
export class ChatService {
  private readonly messages = signal<ChatMessage[]>([]);
  private readonly typing = signal<TypingIndicator | null>(null);

  readonly messages$ = this.messages.asReadonly();
  readonly typing$ = this.typing.asReadonly();

  sendMessage(event: MessageSendEvent): void {
    const tempId = `temp-${Date.now()}`;

    // Add optimistic message
    const message: ChatMessage = {
      id: tempId,
      type: 'text',
      senderId: this.currentUserId,
      senderName: 'You',
      timestamp: new Date(),
      status: 'sending',
      content: { text: event.text }
    };

    this.messages.update(msgs => [...msgs, message]);

    // Send to API
    this.api.sendMessage(event).subscribe({
      next: (response) => {
        this.messages.update(msgs =>
          msgs.map(m => m.id === tempId
            ? { ...m, id: response.id, status: 'sent' }
            : m
          )
        );
      },
      error: () => {
        this.messages.update(msgs =>
          msgs.map(m => m.id === tempId
            ? { ...m, status: 'failed' }
            : m
          )
        );
      }
    });
  }

  setTyping(indicator: TypingIndicator | null): void {
    this.typing.set(indicator);
  }
}

// Define custom content
interface CustomContent {
  type: 'custom';
  payload: Record<string, unknown>;
}

// Create message
const message: ChatMessage = {
  id: '1',
  type: 'text', // Use 'text' as base type
  senderId: 'system',
  senderName: 'System',
  timestamp: new Date(),
  status: 'sent',
  content: {
    text: JSON.stringify(customPayload) // Encode in text
  }
};

// Render custom content in your component
@if (isCustomMessage(message)) {
  <my-custom-renderer [data]="parseCustomContent(message)" />
}

@Injectable({ providedIn: 'root' })
export class RealtimeChatService {
  private socket: WebSocket;

  connect(): void {
    this.socket = new WebSocket('wss://api.example.com/chat');

    this.socket.onmessage = (event) => {
      const data = JSON.parse(event.data);

      switch (data.type) {
        case 'message':
          this.addMessage(data.message);
          break;
        case 'typing':
          this.setTyping(data.indicator);
          break;
        case 'status':
          this.updateStatus(data.messageId, data.status);
          break;
      }
    };
  }
}