@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