@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
Copy

Installation

npm install @memberjunction/ng-chat
Copy

Usage

Import the Module

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

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

Basic Usage

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

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();
  }
}
Copy

API Reference

Component Selector

<mj-chat></mj-chat>

Inputs

Outputs

Public Methods

Classes

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

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

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

Peer Dependencies

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

Build

cd packages/Angular/Generic/chat
npm run build
Copy

License

ISC