Installation

To install the library, use the following npm command: npm i cat-interact-ng

CatInteractLib

This project was generated using Angular CLI version 19.0.0.

How to Integrate

To use the lib-interact-container component in your Angular project, follow the steps below:

Step 1: Import the InteractContainerModule into your module.

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app/app.component';
import { InteractContainerModule } from 'cat-interact-ng';

@NgModule({
  imports: [BrowserModule, InteractContainerModule],
  declarations: [AppComponent],
  bootstrap: [AppComponent],
})
class AppModule {}

Step 2: Use the lib-interact-container component in your template.

Use the lib-interact-container component in your template.

<lib-interact-container [contextData]="contextData"></lib-interact-container>

Define the contextData Object in your component class as shown below:

import { Component } from '@angular/core';

@Component({
  selector: 'app-example',
  templateUrl: './example.component.html',
})
export class ExampleComponent {
  // Static data for demonstration purposes.
  // Replace this with your actual data based on your application's requirements.
  contextData = {
    contextId: '10101',
    listenerEmail: '[email protected]',
    listenerPhoneNumber: '+11234567890',
    listenerName: 'John Doe',
  };
}

InteractContainer Overview

The InteractContainerModule is a comprehensive Angular module that provides functionality for managing and displaying interactive chat containers. It includes several components and services designed to handle chat-related tasks such as displaying messages, sending messages, managing file uploads, and maintaining real-time chat connections. This module integrates with various PrimeNG components for UI elements like buttons, file uploads, checkboxes, and more.

Features

Real-Time Messaging: Seamless real-time messaging capabilities powered by WebSocket.

Multi-Channel Communication: Support for Email, SMS, and WhatsApp messaging channels for flexible and diverse communication options.

Rich UI Components: Pre-built UI components for chat, including input fields, message lists, and file attachments.

Message Bookmarking: Mark important messages for quick reference later.

Message Reply: Directly reply to messages within the conversation.

Reply in Thread: Maintain organized discussions with threaded replies for specific messages.

File Attachment Support: Attach and send files (images, PDFs, etc.) with preview functionality.

Search Functionality: In-chat search for messages with highlight and navigation support.

Customization: Easily customize styles and configurations to match your application's requirements.

Error Handling: Built-in error handling and detailed logs for troubleshooting

Methods:

ngOnChanges(): It checks for changes in the contextData and triggers the update in the ChatApiService whenever the contextData changes.

ChatBoxComponent Overview

The ChatBoxComponent is a dynamic Angular component responsible for managing and displaying a chat interface. It supports various features such as real-time message handling, message filtering, search functionality, file previews, and message group management. The component is designed for use in contexts where chat history, message sending, and receiving, along with file interactions, are key requirements.

Features

Real-time Chat: It supports real-time message reception through WebSocket integration via the ChatSocketService.

Message History: Fetches and displays chat history from the server on initialization.

Search and Filter: Offers search functionality to filter messages and navigate search results.

Message Attachments: Handles document preview and downloading from messages.

Bookmark Filtering: Allows users to filter messages based on their "favourite" status.

Sidebar and Search Toggle: Provides dynamic control for hiding or displaying the sidebar and search bar.

Responsive UI: Integrates an adaptive chat interface for different screen sizes.

Methods:

ngOnInit(): Initializes the component by fetching chat history and subscribing to real-time messages from the socket. Also sets the context ID.

getMessages(): Subscribes to WebSocket messages, normalizes the data, and adds new messages to the message list.

toggleContent(index: number): Toggles the expanded state of the message group at the specified index.

handleAttachmentClick(event: any): Opens the modal for document preview when an attachment is clicked.

onDialogClose(): Closes the document preview dialog and resets the selected document.

onOptionChange(event: any): Handles changes in the selected menu option (e.g., filtering messages based on bookmarks).

updateChatHistoryMessages(fetchedMessages: any[]): Updates the chat history with fetched and normalized messages.

handleSearchToggle(event: boolean): Toggles the visibility of the search bar.

handleFilterMessages(): Filters the messages based on the current search query and updates the results.

handleGoToPreviousResult(): Navigates to the previous search result and scrolls to the corresponding message.

handleGoToNextResult(): Navigates to the next search result and scrolls to the corresponding message.

handleClearSearch(): Clears the search query and resets the search state.

handleOptionChange(): Handles actions like "Reply", "Reply in Thread", and "Add Bookmark" on messages.

ChatMessageInputComponent Overview

The ChatMessageInputComponent is an Angular component designed to handle user input in a chat interface. It allows users to type and send messages, manage attachments, and interact with various chat-related features. The component integrates with services such as the ChatApiService, ChatUtilsService, and ChatFileService to handle message sending, file uploads, and dynamic content management. It provides a user-friendly interface for composing and sending messages, with real-time feedback on the message-sending state, dynamic adjustments for the text area, and support for file attachments.

Features

Message Input: Allows users to type messages and send them through various communication channels (e.g., email, SMS, Whatsapp).

File Upload: Supports the upload of files in the chat interface, with dynamic updates to file size and name.

Dynamic Text Area: Adjusts the height of the message input area based on the content, ensuring a smooth user experience.

Message Sending State: Displays a loading indicator when the message is being sent, providing feedback to the user.

Contextual Data: Uses contextData for message contextualization, allowing users to send messages with relevant data.

Reply Management: Allows users to cancel or reset replies to messages, enabling a cleaner interface.

Search Toggle: Provides the option to toggle the search functionality, allowing users to search through past messages.

Administrator Information: Retrieves and displays the administrator's email and phone number for system notifications.

Multiple Message Types: Supports sending messages through different channels such as email, Whatsapp or SMS.

Input Reset: Resets the input fields after a message is successfully sent, preparing the component for new input.

Methods:

ngOnInit: Subscribes to context updates and message sending states to update the component accordingly. Ensures proper cleanup of subscriptions using the takeUntil operator.

sendMessage: Initiates the process of sending a message with the provided content and attachment. Creates the appropriate payload and executes the message-sending API requests.

executeMessageRequests: Executes multiple API requests concurrently using forkJoin. Handles successful responses and errors through handleMessageResponses and handleErrorSendingMessages.

handleMessageResponses: Processes responses from successful message-sending requests, ensuring unique responses are handled and updating the UI.

handleErrorSendingMessages: Handles errors that occur during the message-sending process, logging them and updating the UI.

resetInputFields: Resets the input fields (text content, file upload) and adjusts the height of the text area to its default state.

handleUpload: Handles the file upload event, updating the selected file’s name and size in the component.

handleAdjustHeight: Adjusts the height of the text area dynamically based on the content input by the user.

clearSelectedFile: Clears the selected file from the file upload component and resets the associated state.

cancelReply: Cancels the current reply action, resetting the selected message and notifying the parent component.

handleSearchToggle: Toggles the search functionality in the parent component by emitting an event.

get selectedFileIcon: Returns the file icon for the selected file based on its name.

ngOnDestroy: Cleans up subscriptions and other resources, ensuring there are no memory leaks when the component is destroyed.

ChatThreadComponent Overview

The ChatThreadComponent is responsible for displaying the thread of messages in a chat interface. It allows users to view past messages, including any media files shared, and interact with the thread by sending and replying to messages. The component manages the flow of messages in the chat, provides a user-friendly interface, and handles real-time updates of the conversation.

Features:

Message Display: Displays a list of messages in the chat thread, including user messages and system notifications.

Reply Functionality: Allows users to reply to specific messages in the chat thread by selecting a message to reply to.

Real-Time Updates: Listens for new messages or updates to the chat thread, ensuring that the thread remains up-to-date without needing to refresh the page.

File Uploads: Supports file uploads within the chat thread, where users can send and receive files as part of the message.

Methods: ngOnInit(): Initializes the component by subscribing to relevant observables for message and context updates.

Additional Resources

For more information on using the Angular CLI, including detailed command references, visit the Angular CLI Overview and Command Reference page.