Troubleshooting

// ✅ Correct
new CometChatMessageComposerAction({
  id: 'action1',
  title: 'Action Title',
  iconURL: 'path/to/icon.svg'
})

// ❌ Missing required properties
new CometChatMessageComposerAction({
  id: 'action1'
  // Missing title and iconURL
})

// ✅ Correct
async handleConfirm(): Promise<void> {
  await this.performAction();
  this.dialog.setSuccess();
  this.showDialog = false; // Hide the dialog
}

// ❌ Incorrect - dialog stays visible
async handleConfirm(): Promise<void> {
  await this.performAction();
  this.dialog.setSuccess();
  // Missing: this.showDialog = false;
}

// ✅ Correct
async handleConfirm(): Promise<void> {
  try {
    await this.performAction();
    this.dialog.setSuccess();
  } catch (error) {
    this.dialog.setError(); // Clears loading state
  }
}

// ❌ Incorrect - loading persists on error
async handleConfirm(): Promise<void> {
  try {
    await this.performAction();
    this.dialog.setSuccess();
  } catch (error) {
    // Missing: this.dialog.setError();
  }
}

// ✅ Correct
@ViewChild(CometChatConfirmDialogComponent) 
dialog!: CometChatConfirmDialogComponent;

async handleConfirm(): Promise<void> {
  if (!this.dialog) {
    console.error('Dialog not initialized');
    return;
  }
  // ... rest of logic
}

// Or use optional chaining
this.dialog?.setSuccess();

// For viewport-based positioning (default)
<cometchat-context-menu [data]="items" />

// For parent container positioning
<cometchat-context-menu 
  [data]="items"
  [useParentContainer]="true" />

// For static positioning without adjustments
<cometchat-context-menu 
  [data]="items"
  [forceStaticPlacement]="true" />

// ✅ Correct - will show submenu
<cometchat-context-menu 
  [data]="fiveItems"
  [topMenuSize]="3" />
// Shows 2 items + more button, submenu has 3 items

// ❌ Won't show submenu
<cometchat-context-menu 
  [data]="twoItems"
  [topMenuSize]="3" />
// Only 2 items, no need for submenu

// Check attachment structure
console.log('Attachments:', attachments);

// Each attachment must have:
// - url: string (required)
// - type: 'image' | 'video' (required)
// - name: string (optional)

// Correct structure
const attachments: MediaAttachment[] = [
  { url: 'https://example.com/image.jpg', type: 'image' },
  { url: 'https://example.com/video.mp4', type: 'video' }
];

// Gallery mode (navigation works)
<cometchat-fullscreen-viewer
  [attachments]="multipleAttachments"
></cometchat-fullscreen-viewer>

// Single mode (no navigation)
<cometchat-fullscreen-viewer
  [url]="singleUrl"
  [mediaType]="'image'"
></cometchat-fullscreen-viewer>

// Correct implementation
closeViewer(): void {
  this.isViewerOpen = false; // This triggers body scroll restoration
}

// In template
<cometchat-fullscreen-viewer
  [isOpen]="isViewerOpen"
  (closeClick)="closeViewer()"
></cometchat-fullscreen-viewer>

// Method 1: Explicit properties
<cometchat-fullscreen-viewer
  [senderName]="'John Doe'"
  [senderAvatarUrl]="'https://example.com/avatar.jpg'"
></cometchat-fullscreen-viewer>

// Method 2: Via message object
<cometchat-fullscreen-viewer
  [message]="cometChatMessage"
></cometchat-fullscreen-viewer>

// Method 3: Both (explicit properties take precedence)
<cometchat-fullscreen-viewer
  [message]="cometChatMessage"
  [senderName]="'Custom Name'"
></cometchat-fullscreen-viewer>

// Correct options function
getCustomOptions = (conversation: CometChat.Conversation): CometChatOption[] => {
  return [
    {
      id: 'delete',
      title: 'Delete',
      iconURL: 'assets/delete.svg',
      onClick: () => this.deleteConversation(conversation) // Properly bound
    }
  ];
};

import { CometChatUIKit, UIKitSettingsBuilder } from '@cometchat/chat-uikit-angular';

const UIKitSettings = new UIKitSettingsBuilder()
  .setAppId('YOUR_APP_ID')
  .setRegion('YOUR_REGION')
  .setAuthKey('YOUR_AUTH_KEY')
  .subscribePresenceForAllUsers()
  .build();

CometChatUIKit.init(UIKitSettings).then(() => {
  CometChatUIKit.login('UID').then(user => {
    // Now real-time updates will work
  });
});

// Verify CometChat initialization
import { Component, OnInit } from '@angular/core';
import { CometChatUIKit } from '@cometchat/chat-uikit-angular';
import { CometChat } from '@cometchat/chat-sdk-javascript';

@Component({
  selector: 'app-debug-init',
  template: `<cometchat-message-list [user]="user"></cometchat-message-list>`
})
export class DebugInitComponent implements OnInit {
  user?: CometChat.User;

  async ngOnInit(): Promise<void> {
    try {
      // Step 1: Check if CometChat is initialized
      const isInitialized = CometChat.isInitialized();
      console.log('CometChat initialized:', isInitialized);
      
      if (!isInitialized) {
        console.error('CometChat not initialized. Call CometChatUIKit.init() first.');
        return;
      }

      // Step 2: Check if user is logged in
      const loggedInUser = await CometChatUIKit.getLoggedinUser();
      console.log('Logged in user:', loggedInUser);
      
      if (!loggedInUser) {
        console.error('No user logged in. Call CometChatUIKit.login() first.');
        return;
      }

      // Step 3: Fetch the conversation user/group
      this.user = await CometChat.getUser('RECEIVER_UID');
      console.log('Fetched user:', this.user);
      
    } catch (error) {
      console.error('Initialization error:', error);
    }
  }
}

// Verify WebSocket connection and app settings
const UIKitSettings = new UIKitSettingsBuilder()
  .setAppId('YOUR_APP_ID')
  .setRegion('YOUR_REGION')
  .setAuthKey('YOUR_AUTH_KEY')
  .subscribePresenceForAllUsers()
  .build();

await CometChatUIKit.init(UIKitSettings);

// Check WebSocket connection status
const connectionStatus = CometChat.getConnectionStatus();
console.log('WebSocket status:', connectionStatus);
// Should be 'connected' for real-time updates to work

// Fix scroll jumping with image dimensions
@Component({
  template: `
    <ng-template #customImageContent let-context>
      <!-- Always specify dimensions to prevent layout shift -->
      <img 
        [src]="context.message.getAttachment()?.getUrl()"
        [style.width.px]="getImageWidth(context.message)"
        [style.height.px]="getImageHeight(context.message)"
        loading="lazy"
      />
    </ng-template>
  `,
  styles: [`
    /* Or use aspect-ratio for responsive images */
    .message-image {
      width: 100%;
      max-width: 300px;
      aspect-ratio: 16 / 9;
      object-fit: cover;
    }
  `]
})
export class FixScrollJumpComponent {
  getImageWidth(message: any): number {
    return message.getAttachment()?.getExtension()?.width || 200;
  }
  
  getImageHeight(message: any): number {
    return message.getAttachment()?.getExtension()?.height || 150;
  }
}

/* Method 1: Use ::ng-deep (deprecated but works) */
:host ::ng-deep .cometchat-message-bubble {
  background: var(--cometchat-background-color-02);
}

/* Method 2: Global styles in styles.css */
.cometchat-message-list {
  --cometchat-primary-color: #6366f1;
}

/* Method 3: Override CSS variables at root level */
:root {
  --cometchat-primary-color: #6366f1;
  --cometchat-background-color-01: #ffffff;
}

/* For dark theme */
[data-theme="dark"] {
  --cometchat-primary-color: #818cf8;
  --cometchat-background-color-01: #1f2937;
}

@Component({
  template: `
    <cometchat-message-list
      [user]="user"
      [hideReplyInThreadOption]="false"
      (threadRepliesClick)="onThreadClick($event)"
    ></cometchat-message-list>
    
    <!-- Thread panel -->
    @if (activeThreadMessage) {
      <div class="thread-panel">
        <cometchat-message-list
          [user]="user"
          [parentMessageId]="activeThreadMessage.getId()"
        ></cometchat-message-list>
      </div>
    }
  `
})
export class ThreadDebugComponent {
  activeThreadMessage?: CometChat.BaseMessage;

  onThreadClick(message: CometChat.BaseMessage): void {
    console.log('Thread clicked for message:', message.getId());
    console.log('Reply count:', message.getReplyCount());
    this.activeThreadMessage = message;
  }
}

@Component({
  template: `
    <cometchat-message-list
      [user]="user"
      [hideReactionOption]="false"
      (reactionClick)="onReactionClick($event)"
    ></cometchat-message-list>
  `
})
export class ReactionDebugComponent {
  async onReactionClick(event: { 
    reaction: CometChat.ReactionCount; 
    message: CometChat.BaseMessage 
  }): Promise<void> {
    const { reaction, message } = event;
    console.log('Reaction clicked:', reaction.getReaction());
    console.log('On message:', message.getId());
    console.log('Already reacted:', reaction.getReactedByMe());
    
    // The component handles toggle automatically
    // Add custom logic here if needed
  }
}

import { Component, ChangeDetectionStrategy, OnDestroy } from '@angular/core';
import { Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';

@Component({
  selector: 'app-optimized-chat',
  changeDetection: ChangeDetectionStrategy.OnPush,  // Optimize change detection
  template: `
    <cometchat-message-list
      [user]="user"
      [messagesRequestBuilder]="optimizedBuilder"
    ></cometchat-message-list>
  `
})
export class OptimizedChatComponent implements OnDestroy {
  private destroy$ = new Subject<void>();
  
  // Reduce messages per page for better performance
  optimizedBuilder = new CometChat.MessagesRequestBuilder()
    .setLimit(20)  // Smaller page size
    .hideReplies(true);

  ngOnDestroy(): void {
    // Clean up to prevent memory leaks
    this.destroy$.next();
    this.destroy$.complete();
  }
}

// Handle authentication errors
async function handleAuthError(error: CometChat.CometChatException): Promise<void> {
  const code = error.getCode();
  
  switch (code) {
    case 'ERR_UID_NOT_FOUND':
      console.error('User not found. Check if the UID is correct.');
      // Redirect to user selection or show error UI
      break;
      
    case 'ERR_AUTH_TOKEN_NOT_FOUND':
      console.error('Session expired. Please log in again.');
      // Redirect to login page
      await CometChat.logout();
      break;
      
    case 'ERR_INVALID_AUTH_KEY':
      console.error('Invalid credentials. Contact administrator.');
      break;
      
    default:
      console.error('Authentication error:', error.getMessage());
  }
}

// Handle network errors with retry logic
import { Component } from '@angular/core';
import { CometChat } from '@cometchat/chat-sdk-javascript';

@Component({
  selector: 'app-network-error-handler',
  template: `
    <cometchat-message-list
      [user]="user"
      [errorView]="networkErrorView"
      (error)="onError($event)"
    ></cometchat-message-list>

    <ng-template #networkErrorView>
      <div class="network-error">
        <img src="assets/no-connection.svg" alt="" aria-hidden="true" />
        <h3>Connection Lost</h3>
        <p>Please check your internet connection</p>
        <button (click)="retryConnection()">Retry</button>
      </div>
    </ng-template>
  `
})
export class NetworkErrorHandlerComponent {
  user?: CometChat.User;
  private retryCount = 0;
  private maxRetries = 3;

  onError(error: CometChat.CometChatException): void {
    if (error.getCode() === 'ERR_NETWORK') {
      this.handleNetworkError();
    }
  }

  async retryConnection(): Promise<void> {
    if (this.retryCount < this.maxRetries) {
      this.retryCount++;
      const delay = Math.pow(2, this.retryCount) * 1000; // Exponential backoff
      
      await new Promise(resolve => setTimeout(resolve, delay));
      
      // Attempt to reconnect
      try {
        await CometChat.connect();
        this.retryCount = 0;
      } catch (error) {
        console.error('Retry failed:', error);
      }
    }
  }

  private handleNetworkError(): void {
    console.error('Network error detected. Will retry automatically.');
  }
}

// Handle permission errors
onError(error: CometChat.CometChatException): void {
  const code = error.getCode();
  
  switch (code) {
    case 'ERR_NOT_A_MEMBER':
      this.showNotification('You are not a member of this group.');
      break;
      
    case 'ERR_BLOCKED':
      this.showNotification('You cannot message this user.');
      break;
      
    case 'ERR_GROUP_NOT_JOINED':
      this.promptJoinGroup();
      break;
      
    case 'ERR_PERMISSION_DENIED':
      this.showNotification('You do not have permission to perform this action.');
      break;
  }
}

async promptJoinGroup(): Promise<void> {
  // Show join group dialog
  const confirmed = await this.showConfirmDialog('Join this group to send messages?');
  if (confirmed && this.group) {
    await CometChat.joinGroup(this.group.getGuid(), CometChat.GROUP_TYPE.PUBLIC, '');
  }
}

// Proper initialization pattern
import { CometChatUIKit, UIKitSettingsBuilder } from '@cometchat/chat-uikit-angular';
import { CometChat } from '@cometchat/chat-sdk-javascript';

// In main.ts or app initialization
async function initializeCometChat(): Promise<boolean> {
  try {
    // Check if already initialized
    if (CometChat.isInitialized()) {
      console.log('CometChat already initialized');
      return true;
    }

    const UIKitSettings = new UIKitSettingsBuilder()
      .setAppId('YOUR_APP_ID')
      .setRegion('us') // Valid: 'us', 'eu', 'in', 'ap-south', 'ap-southeast'
      .setAuthKey('YOUR_AUTH_KEY')
      .subscribePresenceForAllUsers()
      .build();

    await CometChatUIKit.init(UIKitSettings);
    console.log('CometChat initialized successfully');
    return true;

  } catch (error: any) {
    console.error('CometChat initialization failed:', error);
    
    if (error.code === 'ERR_INVALID_REGION') {
      console.error('Check your region setting. Valid regions: us, eu, in, ap-south, ap-southeast');
    }
    
    return false;
  }
}

// Validate parameters before API calls
function validateUser(uid: string): boolean {
  if (!uid || uid.trim() === '') {
    console.error('Invalid UID: UID cannot be empty');
    return false;
  }
  
  // UID should be alphanumeric with underscores/hyphens
  const uidPattern = /^[a-zA-Z0-9_-]+$/;
  if (!uidPattern.test(uid)) {
    console.error('Invalid UID: UID contains invalid characters');
    return false;
  }
  
  return true;
}

function validateGroup(guid: string): boolean {
  if (!guid || guid.trim() === '') {
    console.error('Invalid GUID: GUID cannot be empty');
    return false;
  }
  return true;
}

// Usage
async function fetchUser(uid: string): Promise<CometChat.User | null> {
  if (!validateUser(uid)) {
    return null;
  }
  
  try {
    return await CometChat.getUser(uid);
  } catch (error: any) {
    console.error('Error fetching user:', error.getMessage());
    return null;
  }
}

import { Component } from '@angular/core';
import { CometChat } from '@cometchat/chat-sdk-javascript';

@Component({
  selector: 'app-error-handler',
  template: `
    <cometchat-message-list
      [user]="user"
      (error)="handleError($event)"
    ></cometchat-message-list>
  `
})
export class ErrorHandlerComponent {
  user?: CometChat.User;

  handleError(error: CometChat.CometChatException): void {
    const code = error.getCode();
    const message = error.getMessage();
    const details = error.getDetails();

    console.error(`CometChat Error [${code}]: ${message}`, details);

    // Categorize and handle errors
    if (this.isAuthError(code)) {
      this.handleAuthError(code);
    } else if (this.isNetworkError(code)) {
      this.handleNetworkError(code);
    } else if (this.isPermissionError(code)) {
      this.handlePermissionError(code);
    } else {
      this.handleGenericError(code, message);
    }
  }

  private isAuthError(code: string): boolean {
    return ['ERR_UID_NOT_FOUND', 'ERR_AUTH_TOKEN_NOT_FOUND', 
            'ERR_INVALID_AUTH_KEY', 'ERR_APP_NOT_FOUND'].includes(code);
  }

  private isNetworkError(code: string): boolean {
    return ['ERR_NETWORK', 'ERR_TIMEOUT', 
            'ERR_CONNECTION_REFUSED', 'ERR_WEBSOCKET_DISCONNECTED'].includes(code);
  }

  private isPermissionError(code: string): boolean {
    return ['ERR_NOT_A_MEMBER', 'ERR_BLOCKED', 
            'ERR_GROUP_NOT_JOINED', 'ERR_PERMISSION_DENIED'].includes(code);
  }

  private handleAuthError(code: string): void {
    // Redirect to login or show auth error UI
    console.log('Authentication required');
  }

  private handleNetworkError(code: string): void {
    // Show offline indicator and retry option
    console.log('Network issue detected');
  }

  private handlePermissionError(code: string): void {
    // Show permission denied message
    console.log('Permission denied');
  }

  private handleGenericError(code: string, message: string): void {
    // Show generic error message
    console.log('An error occurred:', message);
  }
}

// Enable verbose logging for debugging
// Add this before CometChatUIKit.init()
CometChat.setSource('ui-kit', 'web', 'angular');

// Log component state
@Component({
  template: `<cometchat-message-list [user]="user"></cometchat-message-list>`
})
export class DebugComponent implements OnInit {
  user?: CometChat.User;

  async ngOnInit(): Promise<void> {
    // Log initialization state
    console.group('CometChat Debug Info');
    console.log('Initialized:', CometChat.isInitialized());
    console.log('Logged in user:', await CometChatUIKit.getLoggedinUser());
    console.log('Connection status:', CometChat.getConnectionStatus());
    console.groupEnd();
  }
}

import { Component, ViewChild, AfterViewInit } from '@angular/core';
import { CometChatMessageListComponent } from '@cometchat/chat-uikit-angular';

@Component({
  template: `
    <cometchat-message-list
      #messageList
      [user]="user"
    ></cometchat-message-list>
    
    <button (click)="debugState()">Debug State</button>
  `
})
export class InspectStateComponent implements AfterViewInit {
  @ViewChild('messageList') messageList!: CometChatMessageListComponent;

  debugState(): void {
    // Access component for debugging (development only)
    console.group('Message List State');
    console.log('Component instance:', this.messageList);
    console.log('User input:', this.messageList.user);
    console.log('Group input:', this.messageList.group);
    console.groupEnd();
  }
}

// Create a debug service for development
import { Injectable, isDevMode } from '@angular/core';

@Injectable({ providedIn: 'root' })
export class CometChatDebugService {
  
  /**
   * Log message list events for debugging
   */
  logEvent(eventName: string, data: any): void {
    if (isDevMode()) {
      console.log(`[CometChat Event] ${eventName}:`, data);
    }
  }

  /**
   * Log error with full details
   */
  logError(context: string, error: any): void {
    if (isDevMode()) {
      console.group(`[CometChat Error] ${context}`);
      console.error('Code:', error.code || error.getCode?.());
      console.error('Message:', error.message || error.getMessage?.());
      console.error('Details:', error.details || error.getDetails?.());
      console.error('Stack:', error.stack);
      console.groupEnd();
    }
  }

  /**
   * Check CometChat connection health
   */
  async checkHealth(): Promise<void> {
    console.group('[CometChat Health Check]');
    
    try {
      // Check initialization
      const isInit = CometChat.isInitialized();
      console.log('✓ Initialized:', isInit);
      
      // Check logged in user
      const user = await CometChatUIKit.getLoggedinUser();
      console.log('✓ Logged in user:', user?.getUid() || 'None');
      
      // Check connection
      const status = CometChat.getConnectionStatus();
      console.log('✓ Connection status:', status);
      
      // Check WebSocket
      console.log('✓ WebSocket:', status === 'connected' ? 'Connected' : 'Disconnected');
      
    } catch (error) {
      console.error('✗ Health check failed:', error);
    }
    
    console.groupEnd();
  }
}

// Debug checklist for messages not loading
async function debugMessagesNotLoading(): Promise<void> {
  console.group('Debug: Messages Not Loading');
  
  // 1. Check initialization
  if (!CometChat.isInitialized()) {
    console.error('❌ CometChat not initialized');
    console.groupEnd();
    return;
  }
  console.log('✓ CometChat initialized');
  
  // 2. Check login
  const loggedInUser = await CometChatUIKit.getLoggedinUser();
  if (!loggedInUser) {
    console.error('❌ No user logged in');
    console.groupEnd();
    return;
  }
  console.log('✓ User logged in:', loggedInUser.getUid());
  
  // 3. Check conversation exists
  const uid = 'TARGET_USER_UID';
  try {
    const user = await CometChat.getUser(uid);
    console.log('✓ Target user exists:', user.getName());
  } catch (error) {
    console.error('❌ Target user not found:', uid);
  }
  
  // 4. Try fetching messages directly
  try {
    const messagesRequest = new CometChat.MessagesRequestBuilder()
      .setUID(uid)
      .setLimit(10)
      .build();
    
    const messages = await messagesRequest.fetchPrevious();
    console.log('✓ Messages fetched:', messages.length);
    console.log('Messages:', messages);
  } catch (error) {
    console.error('❌ Failed to fetch messages:', error);
  }
  
  console.groupEnd();
}

// Debug real-time connection
async function debugRealTimeUpdates(): Promise<void> {
  console.group('Debug: Real-time Updates');
  
  // Check WebSocket status
  const status = CometChat.getConnectionStatus();
  console.log('Connection status:', status);
  
  if (status !== 'connected') {
    console.error('❌ WebSocket not connected');
    console.log('Attempting to reconnect...');
    
    try {
      await CometChat.connect();
      console.log('✓ Reconnected successfully');
    } catch (error) {
      console.error('❌ Reconnection failed:', error);
    }
  } else {
    console.log('✓ WebSocket connected');
  }
  
  // Add a test message listener
  const listenerID = 'debug-listener-' + Date.now();
  CometChat.addMessageListener(
    listenerID,
    new CometChat.MessageListener({
      onTextMessageReceived: (message) => {
        console.log('✓ Real-time message received:', message);
      }
    })
  );
  
  console.log('Test listener added. Send a message to verify real-time updates.');
  console.log('Remove listener with: CometChat.removeMessageListener("' + listenerID + '")');
  
  console.groupEnd();
}

// Get version information for support tickets
function getVersionInfo(): void {
  console.log('CometChat Debug Info for Support:');
  console.log('================================');
  console.log('SDK Version:', CometChat.getVersion?.() || 'Check package.json');
  console.log('UIKit Version:', 'Check @cometchat/chat-uikit-angular in package.json');
  console.log('Angular Version:', VERSION.full);  // Import from @angular/core
  console.log('Browser:', navigator.userAgent);
  console.log('Initialized:', CometChat.isInitialized());
  console.log('Connection:', CometChat.getConnectionStatus());
}