http-request-manager 18.15.34 → 18.16.1

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

@@ -1,56 +0,0 @@
-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

@@ -1,509 +0,0 @@
-# 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

@@ -1,4 +0,0 @@
-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

@@ -1,27 +0,0 @@
-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

@@ -1,77 +0,0 @@
-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

@@ -1,35 +0,0 @@
-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
-    );
-  }
-}