@memberjunction/ng-chat 4.0.0 → 4.2.0

package/README.md

@@ -1,29 +1,38 @@
 # @memberjunction/ng-chat
 
-A reusable Angular component library for building chat interfaces in MemberJunction applications. This package provides a flexible chat component that can be used for AI-assisted conversations, chatbots, or peer-to-peer chat applications.
+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 built-in support for:
-- User and AI message rendering with distinct styling
-- Markdown formatting in messages
-- Welcome screen with suggested prompts
-- Real-time message handling
-- Responsive design with auto-scrolling
-- Loading indicators for async operations
-
-## Features
-
-- **Flexible Message System**: Display both user and AI messages with appropriate styling and avatars
-- **Markdown Support**: Full markdown rendering support for rich text messages
-- **Welcome Screen**: Customizable welcome screen with up to 4 suggested questions/prompts
-- **Smart Scrolling**: Automatic scroll-to-bottom with manual scroll detection
-- **Loading States**: Built-in loading indicator for async operations (e.g., AI responses)
-- **Responsive Design**: Mobile-friendly design that adapts to different screen sizes
-- **Auto-Resizing Input**: Text area automatically expands as users type longer messages
-- **Clear Conversation**: Confirmation dialog for clearing conversation history
-- **Customizable Avatars**: Support for custom AI avatar images
-- **Keyboard Support**: Send messages with Enter key (Shift+Enter for new lines)
+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.
+
+```mermaid
+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
 
@@ -31,13 +40,6 @@ The `@memberjunction/ng-chat` package provides a feature-rich chat component wit
 npm install @memberjunction/ng-chat
 ```
 
-### Peer Dependencies
-
-This package requires the following peer dependencies:
-- `@angular/common`: ^18.0.2
-- `@angular/core`: ^18.0.2
-- `@angular/forms`: ^18.0.2
-
 ## Usage
 
 ### Import the Module
@@ -46,16 +48,12 @@ This package requires the following peer dependencies:
 import { ChatModule } from '@memberjunction/ng-chat';
 
 @NgModule({
-  imports: [
-    ChatModule,
-    // other imports
-  ],
-  // ...
+  imports: [ChatModule]
 })
 export class YourModule { }
 ```
 
-### Basic Component Usage
+### Basic Usage
 
 ```html
 <mj-chat
@@ -79,10 +77,9 @@ import { ChatComponent, ChatMessage, ChatWelcomeQuestion } from '@memberjunction
       #chatComponent
       [AIImageURL]="'assets/bot-avatar.png'"
       [AILargeImageURL]="'assets/bot-large.png'"
-      [InitialMessage]="'Hi! I'm your AI assistant. How can I help you today?'"
+      [InitialMessage]="'Hi! How can I help you today?'"
       [WelcomeQuestions]="welcomeQuestions"
       [Placeholder]="'Ask me anything...'"
-      [ClearAllMessagesPrompt]="'Are you sure you want to clear this conversation?'"
       (MessageAdded)="handleNewMessage($event)"
       (ClearChatRequested)="handleClearChat()">
     </mj-chat>
@@ -90,107 +87,36 @@ import { ChatComponent, ChatMessage, ChatWelcomeQuestion } from '@memberjunction
 })
 export class AIAssistantComponent {
   @ViewChild('chatComponent') chatComponent!: ChatComponent;
-  
+
   welcomeQuestions: ChatWelcomeQuestion[] = [
-    {
-      topLine: 'Generate a report',
-      bottomLine: 'Create a sales summary for Q2',
-      prompt: 'Generate a sales report for Q2'
-    },
-    {
-      topLine: 'Find information',
-      bottomLine: 'Search for customer details',
-      prompt: 'Find information about customer XYZ'
-    },
-    {
-      topLine: 'Summarize data',
-      bottomLine: 'Give me the key points from the data',
-      prompt: 'Summarize the key metrics from my dashboard'
-    },
-    {
-      topLine: 'Help with a task',
-      bottomLine: 'Walk me through creating a new entity',
-      prompt: 'Help me create a new entity in MemberJunction'
-    }
+    { 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' }
   ];
 
-  handleNewMessage(message: ChatMessage) {
-    // Process the new message
-    console.log('New message:', message);
-    
+  async handleNewMessage(message: ChatMessage) {
     if (message.senderType === 'user') {
-      // Send to AI service and handle response
-      this.processUserMessage(message.message);
+      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() {
-    // Clear any conversation state in your service
-    this.conversationHistory = [];
     this.chatComponent.ClearAllMessages();
   }
-
-  async processUserMessage(message: string) {
-    // Set loading state
-    this.chatComponent.ShowWaitingIndicator = true;
-    
-    try {
-      // Call your AI or chat service
-      const response = await this.aiService.getResponse(message);
-      
-      // Add AI response to chat
-      this.chatComponent.SendMessage(
-        response, 
-        'Assistant', 
-        'ai', 
-        null
-      );
-    } 
-    catch (error) {
-      console.error('Error getting AI response:', error);
-      // Show error message to user
-      this.chatComponent.SendMessage(
-        'Sorry, I encountered an error processing your request.', 
-        'Assistant', 
-        'ai', 
-        null
-      );
-    } 
-    finally {
-      // End loading state
-      this.chatComponent.ShowWaitingIndicator = false;
-    }
-  }
 }
 ```
 
-### Programmatic Message Sending
-
-```typescript
-// Send a user message programmatically
-this.chatComponent.SendUserMessage('Hello, AI!');
-
-// Send an AI message
-this.chatComponent.SendMessage(
-  'Hello! How can I assist you today?',
-  'Assistant',
-  'ai',
-  messageId // optional ID for tracking
-);
-
-// Send a message without triggering the MessageAdded event
-this.chatComponent.SendMessage(
-  'System message',
-  'System',
-  'ai',
-  null,
-  false // fireEvent = false
-);
-```
-
 ## API Reference
 
 ### Component Selector
+
 `<mj-chat></mj-chat>`
 
 ### Inputs
@@ -211,173 +137,71 @@ this.chatComponent.SendMessage(
 
 | Event | Type | Description |
 |-------|------|-------------|
-| `MessageAdded` | `EventEmitter<ChatMessage>` | Emitted when a new message is added to the chat |
-| `ClearChatRequested` | `EventEmitter<void>` | Emitted when user confirms clearing the chat |
+| `MessageAdded` | `EventEmitter<ChatMessage>` | Emitted when a new message is added |
+| `ClearChatRequested` | `EventEmitter<void>` | Emitted when user confirms clearing |
 
 ### Public Methods
 
-#### `SendCurrentMessage(): void`
-Sends the current message in the input field. Automatically clears the input after sending.
-
-#### `SendMessage(message: string, senderName: string, senderType: 'user' | 'ai', id: any, fireEvent: boolean = true): void`
-Adds a message to the chat programmatically.
-
-**Parameters:**
-- `message`: The message text (supports markdown)
-- `senderName`: Display name of the sender
-- `senderType`: Either 'user' or 'ai' for styling
-- `id`: Optional ID for message tracking
-- `fireEvent`: Whether to emit the MessageAdded event
-
-#### `SendUserMessage(message: string): void`
-Convenience method to send a user message. Automatically sets senderName to 'User' and senderType to 'user'.
-
-#### `ClearAllMessages(): void`
-Clears all messages from the chat and resets to initial state.
-
-#### `HandleClearChat(): void`
-Shows the confirmation dialog for clearing chat. This emits the ClearChatRequested event when confirmed.
+| 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
 
-#### ChatMessage
-
 ```typescript
-export class ChatMessage {
-  public message: string;         // The message content (supports markdown)
-  public senderName: string;      // Display name of sender
-  public senderType: 'user' | 'ai'; // Type for styling purposes
-  public id?: any;                // Optional ID for tracking
-
-  constructor(
-    message: string, 
-    senderName: string, 
-    senderType: 'user' | 'ai', 
-    id: any = null
-  );
+class ChatMessage {
+  message: string;
+  senderName: string;
+  senderType: 'user' | 'ai';
+  id?: unknown;
 }
-```
 
-#### ChatWelcomeQuestion
-
-```typescript
-export class ChatWelcomeQuestion {
-  public topLine: string = "";     // Main text of the suggestion
-  public bottomLine: string = "";  // Supporting text/description
-  public prompt: string = "";      // The actual prompt to send when clicked
+class ChatWelcomeQuestion {
+  topLine: string;
+  bottomLine: string;
+  prompt: string;
 }
 ```
 
 ## Styling
 
-The component provides several CSS classes for customization:
-
-- `.chat-message-wrap`: Container for each message
-- `.chat-message`: The message content container
-- `.chat-message-ai`: Additional class for AI messages
-- `.chat-message-image`: Avatar/icon container
-- `.chat-input-container`: Input area container
-- `.chat-welcome-container`: Welcome screen container
-
-You can override these styles in your global styles or component styles:
+Key CSS classes for customization:
 
-```css
-/* Example: Customize AI message background */
-::ng-deep .chat-message-ai {
-  background-color: #f0f4f8;
-  border-left: 3px solid #3182ce;
-}
-
-/* Example: Customize user avatar */
-::ng-deep .chat-message-wrap:has(.chat-message:not(.chat-message-ai)) .chat-message-image {
-  color: #48bb78;
-}
-```
+- `.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
 
-### Runtime Dependencies
-- `@memberjunction/core`: Core MemberJunction utilities
-- `@memberjunction/ng-container-directives`: Container directive utilities
-- `@progress/kendo-angular-indicators`: Loading spinner component
-- `@progress/kendo-angular-buttons`: Button components
-- `@progress/kendo-angular-dialog`: Dialog component for confirmations
-- `@memberjunction/ng-markdown`: Markdown rendering support
-- `tslib`: TypeScript runtime helpers
-
-### Integration with MemberJunction
+| 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 |
 
-This component integrates seamlessly with other MemberJunction packages:
-
-- Use with `@memberjunction/ai` for AI-powered conversations
-- Combine with `@memberjunction/core-entities` for entity-aware chat
-- Integrate with MemberJunction's authentication for user context
+### Peer Dependencies
 
-## Build and Development
+- `@angular/common` ^21.x
+- `@angular/core` ^21.x
+- `@angular/forms` ^21.x
 
-This package uses Angular's library build system. To build the package:
+## Build
 
 ```bash
-# From the package directory
+cd packages/Angular/Generic/chat
 npm run build
-
-# From the repository root
-turbo build --filter="@memberjunction/ng-chat"
-```
-
-The built files will be output to the `dist/` directory.
-
-## Advanced Usage
-
-### Custom Message Rendering
-
-While the component handles markdown rendering by default, you can extend functionality by processing messages before sending:
-
-```typescript
-// Pre-process messages with custom formatting
-const formattedMessage = this.formatMessage(userInput);
-this.chatComponent.SendUserMessage(formattedMessage);
-
-// Add metadata to messages using the id field
-this.chatComponent.SendMessage(
-  response,
-  'Assistant',
-  'ai',
-  { timestamp: Date.now(), tokens: 150, model: 'gpt-4' }
-);
-```
-
-### Maintaining Conversation History
-
-```typescript
-// Store conversation for persistence
-private saveConversation() {
-  const messages = this.chatComponent.Messages;
-  localStorage.setItem('chat-history', JSON.stringify(messages));
-}
-
-// Restore previous conversation
-private loadConversation() {
-  const saved = localStorage.getItem('chat-history');
-  if (saved) {
-    const messages = JSON.parse(saved) as ChatMessage[];
-    messages.forEach(msg => {
-      this.chatComponent.SendMessage(
-        msg.message,
-        msg.senderName,
-        msg.senderType,
-        msg.id,
-        false // Don't fire events when restoring
-      );
-    });
-  }
-}
 ```
 
-## Notes
+## License
 
-- The component automatically focuses the input field after operations
-- Messages support full markdown syntax including code blocks, lists, and links
-- The welcome screen is only shown when there are no messages
-- Default icons use Font Awesome (fa-robot for AI, fa-user for users)
-- The component uses Angular's ChangeDetectorRef for optimal performance
+ISC

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@memberjunction/ng-chat",
-  "version": "4.0.0",
+  "version": "4.2.0",
   "description": "MemberJunction: Reusable Chat Component - can be used for AI or peer to peer chat applications.",
   "main": "./dist/public-api.js",
   "typings": "./dist/public-api.d.ts",
@@ -24,14 +24,14 @@
     "@angular/forms": "21.1.3"
   },
   "dependencies": {
-    "@memberjunction/core": "4.0.0",
-    "@memberjunction/ng-container-directives": "4.0.0",
-    "@memberjunction/ng-shared-generic": "4.0.0",
+    "@memberjunction/core": "4.2.0",
+    "@memberjunction/ng-container-directives": "4.2.0",
+    "@memberjunction/ng-shared-generic": "4.2.0",
     "@progress/kendo-angular-indicators": "22.0.1",
     "@progress/kendo-angular-buttons": "22.0.1",
     "@progress/kendo-angular-dialog": "22.0.1",
     "tslib": "^2.8.1",
-    "@memberjunction/ng-markdown": "4.0.0"
+    "@memberjunction/ng-markdown": "4.2.0"
   },
   "sideEffects": false,
   "repository": {