http-request-manager 18.15.32 → 18.15.34

package/src/lib/interceptors/request-header.interceptor.ts

@@ -0,0 +1,56 @@
+import { Injectable } from '@angular/core';
+import { HttpRequest, HttpHandler, HttpEvent, HttpInterceptor } from '@angular/common/http';
+import { Observable, Subscription } from 'rxjs';
+import { LangChangeEvent, TranslateService } from '@ngx-translate/core';
+
+@Injectable()
+export class RequestHeadersInterceptor implements HttpInterceptor {
+
+  subscriptions = new Subscription()
+  language = 'en-CA'
+
+  get currentDate() {
+
+    const date = new Date()
+
+    const year = date.getFullYear()
+    const month = String(date.getMonth() + 1).padStart(2, '0')
+    const day = String(date.getDate()).padStart(2, '0')
+
+    return `${year}-${month}-${day}`
+
+  }
+
+  constructor(
+    private translate: TranslateService
+  ) {
+    this.subscriptions.add(
+      this.translate.onLangChange
+      .subscribe((params: LangChangeEvent) => {
+          this.language = `${params.lang}-CA`
+      })
+    )
+  }
+
+  intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
+
+    // Don't override Content-Type for FormData (file uploads) — let browser set multipart/form-data
+    const skipContentType = request.body instanceof FormData;
+
+    request = request.clone({
+      setHeaders: {
+        ...(skipContentType ? {} : { 'Content-Type': 'application/json' }),
+        'Accept-Language': this.language || 'en-CA',
+        'Current-Date': this.currentDate
+      }
+    })
+
+    return next.handle(request)
+
+  }
+
+  ngOnDestroy() {
+    this.subscriptions.unsubscribe()
+  }
+}
+

package/src/lib/message-display/README.md

@@ -0,0 +1,509 @@
+# Message Display System
+
+A flexible, client-side message display system for WebSocket messages that determines presentation based on message content using rule-based routing.
+
+## Overview
+
+The Message Display System provides a pluggable architecture for displaying WebSocket messages in different formats (snackbar, dialog, carousel, banner) based on configurable rules. The system is **fully client-side** - no server changes are required.
+
+## Features
+
+✅ **Rule-based routing** - First-match-wins rule evaluation  
+✅ **Multiple display types** - Snackbar, Dialog, Carousel, Banner (extensible)  
+✅ **Markdown support** - Optional markdown rendering for rich content  
+✅ **Backward compatible** - Existing messages work without changes  
+✅ **Zero server changes** - All logic is client-side  
+✅ **Configurable** - Customize rules and strategies  
+
+## Architecture
+
+```
+WebSocket Message
+      │
+      ▼
+MessageDisplayRouterService
+      │
+      ├─→ Evaluates rules (first match wins)
+      ├─→ Selects strategy
+      │
+      ▼
+Strategy (Snackbar / Dialog / Carousel / Banner)
+      │
+      ▼
+Display Component (MatSnackBar / MatDialog / Custom)
+```
+
+## Usage
+
+### Basic Usage (Automatic)
+
+Messages are automatically routed based on rules. No code changes needed in components:
+
+```typescript
+// In ws-messaging.component.ts (already configured)
+this.latestCommunicationMessages$.subscribe((message) => {
+  this.messageDisplayService.display(message);
+});
+```
+
+### Message Payload Structure
+
+```typescript
+{
+  type: "channelMessage",
+  content: {
+    // Optional: Explicit display configuration
+    displayConfig?: {
+      type: 'snackbar' | 'dialog' | 'carousel' | 'banner',
+      supportsMarkdown?: boolean,
+      stackable?: boolean,
+      autoDismiss?: number
+    },
+    
+    // Content
+    title?: string,
+    message: string,
+    
+    // Rich media
+    slides?: Slide[],
+    image?: string,
+    
+    // Metadata for rule matching
+    severity?: 'low' | 'medium' | 'high' | 'critical',
+    category?: string,
+    messageType?: string,
+    
+    // Actions
+    actions?: Action[]
+  }
+}
+```
+
+### Examples
+
+#### 1. Simple Message (Default - Snackbar)
+
+```typescript
+{
+  type: "channelMessage",
+  content: {
+    message: "Hello world"
+  }
+}
+// → Displays as snackbar (default rule)
+```
+
+#### 2. Dialog with Markdown
+
+```typescript
+{
+  type: "channelMessage",
+  content: {
+    displayConfig: {
+      type: 'dialog',
+      supportsMarkdown: true
+    },
+    title: 'Update',
+    message: '# Heading\n\n**Bold text** and *italics*'
+  }
+}
+// → Displays as dialog with rendered markdown
+```
+
+#### 3. Carousel
+
+```typescript
+{
+  type: "channelMessage",
+  content: {
+    displayConfig: {
+      type: 'carousel',
+      supportsMarkdown: true
+    },
+    slides: [
+      { title: 'Slide 1', message: 'Content 1' },
+      { title: 'Slide 2', message: 'Content 2' }
+    ]
+  }
+}
+// → Displays as carousel with navigation
+```
+
+#### 4. Error Message (Semantic Rule)
+
+```typescript
+{
+  type: "channelMessage",
+  content: {
+    severity: 'error',
+    message: 'Something went wrong'
+  }
+}
+// → Displays as dialog (error severity rule)
+```
+
+## Default Rules
+
+Rules are evaluated in order - first match wins:
+
+1. **Explicit displayConfig.type** - `carousel`, `dialog`, `banner`
+2. **Content-based** - Has slides → carousel, Has images → dialog
+3. **Semantic** - Error severity → dialog, System category → banner, Chat → snackbar
+4. **Default** - Fallback to snackbar
+
+## Customizing Rules
+
+You can override the default rules:
+
+```typescript
+// In your app module or component
+const customRules: DisplayRule[] = [
+  {
+    id: 'urgent-messages',
+    match: (msg) => msg.content?.severity === 'critical',
+    display: { type: 'dialog', stackable: false }
+  },
+  // ... more custom rules
+  // Default MUST be last
+  {
+    id: 'default',
+    match: () => true,
+    display: { type: 'snackbar' }
+  }
+];
+
+// Inject and set rules
+const routerService = inject(MessageDisplayRouterService);
+routerService.setRules(customRules);
+```
+
+## Adding Custom Strategies
+
+```typescript
+@Injectable()
+export class CustomStrategy implements IDisplayStrategy {
+  name = 'custom';
+  
+  canHandle(message: CommunicationMessage): boolean {
+    return message.content?.messageType === 'special';
+  }
+  
+  display(message: CommunicationMessage, config: DisplayConfig): void {
+    // Your custom display logic
+  }
+}
+
+// Register the strategy
+const routerService = inject(MessageDisplayRouterService);
+routerService.registerStrategies([inject(CustomStrategy)]);
+```
+
+---
+
+## How to Add New Display Types (Step-by-Step Guide)
+
+To add a new display type (e.g., Dialog, Carousel, Banner), follow these steps:
+
+### Step 1: Add Display Type to the Type Union
+
+**File:** `models/display-config.model.ts`
+
+```typescript
+export type DisplayType = 'snackbar' | 'dialog' | 'carousel' | 'banner' | 'inline' | 'YOUR_TYPE';
+```
+
+### Step 2: Create the Display Component (if needed)
+
+For complex display types (like dialogs, carousels), create an Angular component:
+
+**File:** `components/your-component/your-component.component.ts`
+
+```typescript
+import { Component, Inject, Input } from '@angular/core';
+import { MAT_DIALOG_DATA } from '@angular/material/dialog';
+import { CommunicationMessage } from '../models/communication-message.model';
+
+@Component({
+  selector: 'app-your-component',
+  templateUrl: './your-component.component.html',
+  styleUrls: ['./your-component.component.scss'],
+  standalone: false
+})
+export class YourComponent {
+  @Input() message: CommunicationMessage;
+  
+  constructor(@Inject(MAT_DIALOG_DATA) public data: any) {}
+}
+```
+
+**File:** `components/your-component/your-component.component.html`
+
+```html
+<h2>{{ data.content?.title }}</h2>
+<p>{{ data.content?.message }}</p>
+```
+
+### Step 3: Create the Strategy
+
+**File:** `strategies/your.strategy.ts`
+
+```typescript
+import { Injectable, inject } from '@angular/core';
+import { IDisplayStrategy } from '../models/display-strategy.interface';
+import { CommunicationMessage } from '../models/communication-message.model';
+import { DisplayConfig } from '../models/display-config.model';
+import { YourComponent } from '../components/your-component/your-component.component';
+import { MatDialog } from '@angular/material/dialog';
+
+@Injectable()
+export class YourStrategy implements IDisplayStrategy {
+  name = 'your_type';
+  
+  private dialog = inject(MatDialog);
+
+  canHandle(message: CommunicationMessage): boolean {
+    return message.content?.displayConfig?.type === 'your_type';
+  }
+
+  display(message: CommunicationMessage, config: DisplayConfig): void {
+    this.dialog.open(YourComponent, {
+      data: message,
+      width: config.width || '600px',
+      disableClose: false,
+      panelClass: 'your-dialog-class'
+    });
+  }
+}
+```
+
+### Step 4: Add Default Rules
+
+**File:** `rules/default-display-rules.ts`
+
+Add your rule in the appropriate position (order matters!):
+
+```typescript
+export const defaultDisplayRules: DisplayRule[] = [
+  // 1. Explicit display types (highest priority)
+  {
+    id: 'your-type',
+    name: 'Your Display Type',
+    match: (message) => message.content?.displayConfig?.type === 'your_type',
+    display: {
+      type: 'your_type',
+      supportsMarkdown: true,
+      stackable: false,
+      width: '600px'
+    }
+  },
+  
+  // 2. Content-based rules
+  // ... existing rules ...
+  
+  // 3. Default (must be last)
+  {
+    id: 'default',
+    name: 'Default (Snackbar)',
+    match: () => true,
+    display: {
+      type: 'snackbar',
+      supportsMarkdown: false,
+      stackable: true,
+      autoDismiss: 3000
+    }
+  }
+];
+```
+
+### Step 5: Register the Strategy
+
+**File:** `services/message-display-router.service.ts`
+
+```typescript
+import { Injectable, inject } from '@angular/core';
+import { IDisplayStrategy } from '../models/display-strategy.interface';
+import { DisplayRule } from '../models/display-rule.interface';
+import { CommunicationMessage } from '../models/communication-message.model';
+import { defaultDisplayRules } from '../rules/default-display-rules';
+import { SnackbarStrategy } from '../strategies/snackbar.strategy';
+import { YourStrategy } from '../strategies/your.strategy'; // NEW
+
+@Injectable({ providedIn: 'root' })
+export class MessageDisplayRouterService {
+
+  private snackbarStrategy = inject(SnackbarStrategy);
+  private yourStrategy = inject(YourStrategy); // NEW
+
+  // All available strategies
+  private strategies: IDisplayStrategy[] = [
+    this.snackbarStrategy,
+    this.yourStrategy // NEW - add your strategy here
+  ];
+
+  // Rules are evaluated in order - first match wins
+  private rules: DisplayRule[] = defaultDisplayRules;
+
+  display(message: CommunicationMessage): void {
+    console.log('📨 MessageDisplayRouterService: Processing message:', message);
+
+    // Find FIRST matching rule (order matters!)
+    const matchingRule = this.rules.find(rule => rule.match(message));
+
+    // Get the rule (will be 'default' if nothing else matches)
+    const rule = matchingRule || this.rules[this.rules.length - 1];
+
+    console.log(`🎯 MessageDisplayRouterService: Matched rule '${rule.id}' (${rule.name})`);
+    console.log(`   → Display type: ${rule.display.type}`);
+
+    // Get strategy for the display type
+    const strategy = this.strategies.find(s => s.name === rule.display.type);
+
+    if (!strategy) {
+      console.warn(`⚠️ MessageDisplayRouterService: No strategy found for type '${rule.display.type}', falling back to snackbar`);
+      this.snackbarStrategy.display(message, rule.display);
+      return;
+    }
+
+    // Execute display
+    console.log(`🚀 MessageDisplayRouterService: Executing ${strategy.name} strategy`);
+    strategy.display(message, rule.display);
+  }
+
+  registerStrategies(strategies: IDisplayStrategy[]): void {
+    this.strategies.push(...strategies);
+  }
+
+  setRules(rules: DisplayRule[]): void {
+    this.rules = rules;
+  }
+}
+```
+
+### Step 6: Update Module Imports (if needed)
+
+**File:** `http-request-manager.module.ts`
+
+Add any required module imports:
+
+```typescript
+import { NgModule } from '@angular/core';
+import { MatDialogModule } from '@angular/material/dialog';
+import { MarkdownModule } from 'ngx-markdown';
+// ... other imports
+
+@NgModule({
+  imports: [
+    CommonModule,
+    MatDialogModule, // For dialogs
+    MarkdownModule.forChild(), // For markdown support
+    // ... other modules
+  ]
+})
+export class HttpRequestManagerModule {}
+```
+
+### Step 7: Test Your Display Type
+
+Create a test message:
+
+```typescript
+{
+  type: "channelMessage",
+  content: {
+    displayConfig: {
+      type: 'your_type',
+      supportsMarkdown: true
+    },
+    title: 'Test Title',
+    message: 'Test message content'
+  }
+}
+```
+
+Send it via WebSocket and verify it displays correctly.
+
+---
+
+## Quick Reference: Strategy Implementation Checklist
+
+- [ ] Add display type to `DisplayType` union
+- [ ] Create component (if needed for complex UI)
+- [ ] Create strategy class implementing `IDisplayStrategy`
+- [ ] Add rule to `default-display-rules.ts`
+- [ ] Register strategy in `MessageDisplayRouterService`
+- [ ] Add required module imports
+- [ ] Test with sample message
+
+---
+
+## Current Implementation Status
+
+### ✅ Phase 1: Core Infrastructure (COMPLETE)
+- [x] Models and interfaces
+- [x] Default display rules
+- [x] MessageDisplayRouterService
+- [x] SnackbarStrategy
+- [x] Integration with ws-messaging.component
+
+### 🚧 Phase 2: Dialog Support (TODO)
+- [ ] RichContentDialogComponent
+- [ ] DialogStrategy
+- [ ] MarkdownModule integration
+
+### 🚧 Phase 3: Carousel & Banner (TODO)
+- [ ] CarouselDialogComponent
+- [ ] CarouselStrategy
+- [ ] BannerComponent
+- [ ] BannerStrategy
+
+### 🚧 Phase 4: Configuration API (TODO)
+- [ ] forRoot() configuration
+- [ ] Injection tokens for customization
+
+## Files
+
+```
+message-display/
+├── models/
+│   ├── display-config.model.ts
+│   ├── display-rule.interface.ts
+│   ├── display-strategy.interface.ts
+│   ├── communication-message.model.ts
+│   ├── slide.model.ts
+│   ├── action.model.ts
+│   └── index.ts
+├── services/
+│   └── message-display-router.service.ts
+├── strategies/
+│   └── snackbar.strategy.ts
+├── rules/
+│   └── default-display-rules.ts
+└── index.ts
+```
+
+## Dependencies
+
+- `toast-message-display` - For snackbar display
+- `@angular/material` - For dialog components (future)
+- `ngx-markdown` - For markdown rendering (future)
+
+## Testing
+
+```bash
+# Run tests for http-request-manager
+ng test http-request-manager
+
+# Test specific component
+ng test --include='**/message-display/**/*.spec.ts'
+```
+
+## Future Enhancements
+
+- Dialog strategy with markdown support
+- Carousel strategy with slide navigation
+- Banner strategy for persistent notifications
+- Custom component registration
+- Action callback handling
+- Link click handling in markdown
+- Stacking behavior configuration
+- Animation configuration

package/src/lib/message-display/index.ts

@@ -0,0 +1,4 @@
+export * from './models';
+export * from './services/message-display-router.service';
+export * from './strategies/snackbar.strategy';
+export * from './rules/default-display-rules';

package/src/lib/message-display/models/action.model.ts

@@ -0,0 +1,27 @@
+export interface ActionInterface {
+  label: string;
+  action: 'close' | 'navigate' | 'callback' | 'custom';
+  target?: string;
+  callback?: string;
+  primary?: boolean;
+}
+
+export class Action implements ActionInterface {
+  constructor(
+    public label: string = '',
+    public action: 'close' | 'navigate' | 'callback' | 'custom' = 'close',
+    public target?: string,
+    public callback?: string,
+    public primary?: boolean
+  ) {}
+
+  static adapt(item?: any): Action {
+    return new Action(
+      item?.label,
+      item?.action,
+      item?.target,
+      item?.callback,
+      item?.primary
+    );
+  }
+}

package/src/lib/message-display/models/communication-message.model.ts

@@ -0,0 +1,77 @@
+import { Slide } from './slide.model';
+import { Action } from './action.model';
+import { DisplayConfig } from './display-config.model';
+
+export interface MessageContentInterface {
+  displayConfig?: DisplayConfig;
+  title?: string;
+  message: string;
+  slides?: Slide[];
+  image?: string;
+  images?: string[];
+  actions?: Action[];
+  messageType?: string;
+  icon?: string;
+  data?: any;
+}
+
+export class MessageContent implements MessageContentInterface {
+  constructor(
+    public displayConfig?: DisplayConfig,
+    public title?: string,
+    public message: string = '',
+    public slides?: Slide[],
+    public image?: string,
+    public images?: string[],
+    public actions?: Action[],
+    public messageType?: string,
+    public icon?: string,
+    public data?: any
+  ) {}
+
+  static adapt(item?: any): MessageContent {
+    return new MessageContent(
+      item?.displayConfig ? DisplayConfig.adapt(item.displayConfig) : undefined,
+      item?.title,
+      item?.message,
+      item?.slides ? item.slides.map((slideItem: any) => Slide.adapt(slideItem)) : [],
+      item?.image,
+      item?.images,
+      item?.actions ? item.actions.map((actionItem: any) => Action.adapt(actionItem)) : [],
+      item?.messageType,
+      item?.icon,
+      item?.data
+    );
+  }
+}
+
+export interface CommunicationMessageInterface {
+  type: string;
+  messageId?: number;
+  channel?: string;
+  sessionId?: { id: string };
+  timestamp?: string;
+  content: MessageContent;
+}
+
+export class CommunicationMessage implements CommunicationMessageInterface {
+  constructor(
+    public type: string = '',
+    public messageId?: number,
+    public channel?: string,
+    public sessionId?: { id: string },
+    public timestamp?: string,
+    public content: MessageContent = MessageContent.adapt()
+  ) {}
+
+  static adapt(item?: any): CommunicationMessage {
+    return new CommunicationMessage(
+      item?.type,
+      item?.messageId,
+      item?.channel,
+      item?.sessionId,
+      item?.timestamp,
+      item?.content ? MessageContent.adapt(item.content) : MessageContent.adapt()
+    );
+  }
+}

package/src/lib/message-display/models/display-config.model.ts

@@ -0,0 +1,35 @@
+export type DisplayType = 'snackbar' | 'dialog' | 'carousel' | 'banner' | 'inline';
+
+export interface DisplayConfigInterface {
+  type: DisplayType;
+  supportsMarkdown?: boolean;
+  stackable?: boolean;
+  queueBehavior?: 'replace' | 'queue' | 'ignore';
+  autoDismiss?: number;
+  width?: string;
+  height?: string;
+}
+
+export class DisplayConfig implements DisplayConfigInterface {
+  constructor(
+    public type: DisplayType = 'snackbar',
+    public supportsMarkdown?: boolean,
+    public stackable?: boolean,
+    public queueBehavior?: 'replace' | 'queue' | 'ignore',
+    public autoDismiss?: number,
+    public width?: string,
+    public height?: string
+  ) {}
+
+  static adapt(item?: any): DisplayConfig {
+    return new DisplayConfig(
+      item?.type,
+      item?.supportsMarkdown,
+      item?.stackable,
+      item?.queueBehavior,
+      item?.autoDismiss,
+      item?.width,
+      item?.height
+    );
+  }
+}