@memberjunction/ng-chat

A reusable Angular chat component for building AI-assisted conversations, chatbots, or peer-to-peer chat interfaces in MemberJunction applications.

Overview

The @memberjunction/ng-chat package provides a feature-rich chat component with markdown rendering, customizable welcome screens with suggested prompts, real-time message handling, auto-scrolling, loading indicators, and keyboard shortcuts. It can be used for AI conversations, customer support interfaces, or any messaging scenario.

graph TD
    A[ChatModule] --> B[ChatComponent]

    B --> C[Welcome Screen]
    B --> D[Message List]
    B --> E[Input Area]

    C --> C1["AI Avatar
    (large)"]
    C --> C2["Suggested Questions
    (up to 4)"]

    D --> D1["User Messages"]
    D --> D2["AI Messages
    (with markdown)"]
    D --> D3["Loading Indicator"]

    E --> E1["Auto-Resize TextArea"]
    E --> E2["Send Button"]
    E --> E3["Clear Chat"]

    style A fill:#2d6a9f,stroke:#1a4971,color:#fff
    style B fill:#7c5295,stroke:#563a6b,color:#fff
    style C fill:#2d8659,stroke:#1a5c3a,color:#fff
    style D fill:#b8762f,stroke:#8a5722,color:#fff

Installation

npm install @memberjunction/ng-chat

Usage

Import the Module

import { ChatModule } from '@memberjunction/ng-chat';

@NgModule({
  imports: [ChatModule]
})
export class YourModule { }

Basic Usage

<mj-chat
  [AIImageURL]="'assets/bot-avatar.png'"
  [InitialMessage]="'How can I help you today?'"
  (MessageAdded)="handleNewMessage($event)"
  (ClearChatRequested)="handleClearChat()">
</mj-chat>

Complete Example with AI Integration

import { Component, ViewChild } from '@angular/core';
import { ChatComponent, ChatMessage, ChatWelcomeQuestion } from '@memberjunction/ng-chat';

@Component({
  selector: 'app-ai-assistant',
  template: `
    <mj-chat
      #chatComponent
      [AIImageURL]="'assets/bot-avatar.png'"
      [AILargeImageURL]="'assets/bot-large.png'"
      [InitialMessage]="'Hi! How can I help you today?'"
      [WelcomeQuestions]="welcomeQuestions"
      [Placeholder]="'Ask me anything...'"
      (MessageAdded)="handleNewMessage($event)"
      (ClearChatRequested)="handleClearChat()">
    </mj-chat>
  `
})
export class AIAssistantComponent {
  @ViewChild('chatComponent') chatComponent!: ChatComponent;

  welcomeQuestions: ChatWelcomeQuestion[] = [
    { topLine: 'Generate a report', bottomLine: 'Create a sales summary', prompt: 'Generate a sales report for Q2' },
    { topLine: 'Find information', bottomLine: 'Search customer details', prompt: 'Find customer XYZ' },
    { topLine: 'Summarize data', bottomLine: 'Key metrics overview', prompt: 'Summarize dashboard metrics' },
    { topLine: 'Help with a task', bottomLine: 'Step-by-step guidance', prompt: 'Help me create a new entity' }
  ];

  async handleNewMessage(message: ChatMessage) {
    if (message.senderType === 'user') {
      this.chatComponent.ShowWaitingIndicator = true;
      try {
        const response = await this.aiService.getResponse(message.message);
        this.chatComponent.SendMessage(response, 'Assistant', 'ai', null);
      } finally {
        this.chatComponent.ShowWaitingIndicator = false;
      }
    }
  }

  handleClearChat() {
    this.chatComponent.ClearAllMessages();
  }
}

API Reference

Component Selector

<mj-chat></mj-chat>

Inputs

| Property | Type | Default | Description | |----------|------|---------|-------------| | InitialMessage | string | '' | Initial message shown when chat is empty | | Messages | ChatMessage[] | [] | Array of messages to display | | AIImageURL | string | '' | URL for the AI's avatar image (24px max width) | | AILargeImageURL | string | '' | URL for the AI's large avatar on welcome screen | | WelcomeQuestions | ChatWelcomeQuestion[] | [] | Array of up to 4 welcome prompts | | ClearAllMessagesPrompt | string | 'Are you sure you want to clear all messages?' | Confirmation dialog text | | AllowSend | boolean | true | Enable/disable message sending | | Placeholder | string | 'Type a message...' | Input field placeholder text | | ShowWaitingIndicator | boolean | false | Show/hide loading spinner |

Outputs

| Event | Type | Description | |-------|------|-------------| | MessageAdded | EventEmitter<ChatMessage> | Emitted when a new message is added | | ClearChatRequested | EventEmitter<void> | Emitted when user confirms clearing |

Public Methods

| Method | Parameters | Description | |--------|------------|-------------| | SendCurrentMessage() | none | Sends the current input field content | | SendMessage() | message, senderName, senderType, id, fireEvent? | Adds a message programmatically | | SendUserMessage() | message: string | Convenience method for user messages | | ClearAllMessages() | none | Clears all messages and resets to initial state | | HandleClearChat() | none | Shows clear confirmation dialog |

Classes

class ChatMessage {
  message: string;
  senderName: string;
  senderType: 'user' | 'ai';
  id?: unknown;
}

class ChatWelcomeQuestion {
  topLine: string;
  bottomLine: string;
  prompt: string;
}

Styling

Key CSS classes for customization:

• .chat-message-wrap -- Container for each message
• .chat-message / .chat-message-ai -- Message content styling
• .chat-message-image -- Avatar container
• .chat-input-container -- Input area container
• .chat-welcome-container -- Welcome screen container

Dependencies

| Package | Description | |---------|-------------| | @memberjunction/core | Core utilities | | @memberjunction/ng-container-directives | Container directives | | @memberjunction/ng-shared-generic | Shared generic components | | @memberjunction/ng-markdown | Markdown rendering | | @progress/kendo-angular-indicators | Loading spinner | | @progress/kendo-angular-buttons | Button components | | @progress/kendo-angular-dialog | Dialog for confirmations |

Peer Dependencies

• @angular/common ^21.x
• @angular/core ^21.x
• @angular/forms ^21.x

Build

cd packages/Angular/Generic/chat
npm run build

License

ISC