http-request-manager 18.15.32 → 18.15.34

package/src/lib/http-request-services-demo/request-manager-ws-demo/components/ws-messaging/ws-messaging.component.css

@@ -0,0 +1,11 @@
+button[mat-raised-button],
+button[mat-stroked-button] {
+  min-width: 120px;
+}
+
+mat-chip-option {
+  min-width: 120px;
+  justify-content: center;
+  border-radius: 4px !important;
+  padding: 0.25rem !important;
+}

package/src/lib/http-request-services-demo/request-manager-ws-demo/components/ws-messaging/ws-messaging.component.html

@@ -0,0 +1,102 @@
+
+  @if ((data$ | async); as data) {
+  @if ((user$ | async); as user) {
+    <div style="display: flex; gap: 1rem; flex-direction: column; margin-top: 1rem;">
+
+        <!-- Channel Creation Section -->
+        <div style="padding: 1rem; background: #e3f2fd; border-radius: 4px;">
+          <strong>Create New Channel</strong>
+          <div style="display: flex; flex-direction: column; margin-top: 0.5rem;">
+            <mat-form-field appearance="outline" style="width: 100%;">
+              <mat-label>Channel Name</mat-label>
+              <input matInput [formControl]="newChannelName" placeholder="Enter channel name"
+                     (keydown.enter)="onCreateChannel()">
+            </mat-form-field>
+            <div style="display: flex; justify-content: flex-end; margin-top: -0.5rem;">
+              <button mat-raised-button color="primary" (click)="onCreateChannel()"
+                      [disabled]="newChannelName.invalid">
+                Create Channel
+              </button>
+            </div>
+          </div>
+        </div>
+
+        <!-- Messaging Section - only show when subscribed to channels -->
+        @if ((subscribedChannels$ | async); as subscribedChannels) {
+          @if (subscribedChannels.length > 0) {
+            <div style="padding: 1rem; background: #fff3e0; border-radius: 4px;" [formGroup]="messages">
+              <strong>Send Message</strong>
+              <!-- Debug: Show subscribed channels count -->
+              <div style="font-size: 0.8rem; color: #666; margin-bottom: 0.5rem;">
+                Subscribed to {{ subscribedChannels.length }} channel(s): {{ subscribedChannels | json }}
+              </div>
+
+              <!-- Channel Selection with Checkboxes -->
+              <div style="margin-top: 0.5rem;">
+                <mat-form-field appearance="outline" style="width: 100%;">
+                  <mat-label>Select Channels</mat-label>
+                  <mat-select formControlName="selectedChannels" multiple>
+                    <mat-select-trigger>
+                      @if (selectedChannels.value?.length === 1) {
+                        {{ selectedChannels.value[0] }}
+                      } @else if (selectedChannels.value?.length > 1) {
+                        {{ selectedChannels.value[0] }} (+{{ selectedChannels.value.length - 1 }} {{ selectedChannels.value.length === 2 ? 'other' : 'others' }})
+                      }
+                    </mat-select-trigger>
+                    @for (channel of subscribedChannels; track channel; let i = $index) {
+                      <mat-option [value]="channel">{{ channel }}</mat-option>
+                    }
+                  </mat-select>
+                </mat-form-field>
+              </div>
+
+              <!-- Message Input -->
+              <div style="display: flex; flex-direction: column;">
+                <mat-form-field style="width: 100%;" appearance="outline">
+                  <mat-label>Message</mat-label>
+                  <textarea
+                    matInput placeholder="Type your message..."
+                    formControlName="content"
+                    (keydown.enter)="onSendMessage(); $event.preventDefault()"
+                  ></textarea>
+                </mat-form-field>
+                <div style="display: flex; justify-content: flex-end; margin-top: -0.5rem;">
+                  <button mat-raised-button color="primary" (click)="onSendMessage()"
+                          [disabled]="messages.invalid">
+                    Send
+                  </button>
+                </div>
+              </div>
+            </div>
+          }
+        }
+
+    </div>
+  }
+  }
+
+  <!-- Channel List with Subscription Controls using Chips -->
+  @if ((channels$ | async); as channels) {
+    @if ((subscribedChannels$ | async); as subscribedChannels) {
+      <div style="padding: 1rem; background: #f5f5f5; border-radius: 4px; margin-top: 1rem;">
+        <strong>Subscribe to Channel(s)</strong>
+        <div style="margin-top: 0.5rem;">
+          @if (channels.length === 0) {
+            <div style="color: #666; font-style: italic;">No channels available. Create one above.</div>
+          } @else {
+            <mat-chip-listbox
+              aria-label="Channel selection"
+              [multiple]="true">
+              @for (channel of channels; track channel; let i = $index) {
+                <mat-chip-option
+                  [selected]="isSubscribed(channel, subscribedChannels)"
+                  (selectionChange)="onChipToggle($event, channel)">
+                  {{ channel }}
+                </mat-chip-option>
+              }
+            </mat-chip-listbox>
+          }
+        </div>
+      </div>
+    }
+  }

package/src/lib/http-request-services-demo/request-manager-ws-demo/components/ws-messaging/ws-messaging.component.spec.ts

@@ -0,0 +1,40 @@
+/* tslint:disable:no-unused-variable */
+import { waitForAsync, ComponentFixture, TestBed } from '@angular/core/testing';
+import { HttpClientTestingModule } from '@angular/common/http/testing';
+import { By } from '@angular/platform-browser';
+import { DebugElement, NO_ERRORS_SCHEMA } from '@angular/core';
+import { ToastMessageDisplayService } from 'toast-message-display';
+import { SnackbarStrategy } from '../../../../message-display/strategies/snackbar.strategy';
+
+import { WsMessagingComponent } from './ws-messaging.component';
+
+describe('WsMessagingComponent', () => {
+  let component: WsMessagingComponent;
+  let fixture: ComponentFixture<WsMessagingComponent>;
+  let toastMessageServiceSpy: jasmine.SpyObj<ToastMessageDisplayService>;
+
+  beforeEach(waitForAsync(() => {
+    toastMessageServiceSpy = jasmine.createSpyObj('ToastMessageDisplayService', ['toastMessage']);
+
+    TestBed.configureTestingModule({
+      imports: [ HttpClientTestingModule ],
+      declarations: [ WsMessagingComponent ],
+      schemas: [ NO_ERRORS_SCHEMA ],
+      providers: [
+        SnackbarStrategy,
+        { provide: ToastMessageDisplayService, useValue: toastMessageServiceSpy }
+      ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(WsMessagingComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/src/lib/http-request-services-demo/request-manager-ws-demo/components/ws-messaging/ws-messaging.component.ts

@@ -0,0 +1,230 @@
+import { Component, inject, Input, OnInit, OnDestroy } from '@angular/core';
+import { MessageServiceDemo } from '../../services/message-service-demo.service';
+import { StateServiceDemo } from '../../services/state-service-demo.service';
+import { FormBuilder, FormControl, Validators } from '@angular/forms';
+import { Observable, combineLatest, map, EMPTY, Subject, takeUntil, filter, take, startWith, distinctUntilChanged } from 'rxjs';
+
+import { ChannelMessage } from '../../../../services/ws-manager-service/models/channel-message.model';
+import { MessageDisplayRouterService } from '../../../../message-display/services/message-display-router.service';
+
+@Component({
+    selector: 'app-ws-messaging',
+    templateUrl: './ws-messaging.component.html',
+    styleUrls: ['./ws-messaging.component.css'],
+    standalone: false
+})
+export class WsMessagingComponent implements OnInit, OnDestroy {
+
+  @Input() server!: string;
+  @Input() wsServer!: string;
+  @Input() jwtToken!: string;
+  @Input() user!: any;
+  @Input() path: (string|number)[] = ['ai','tests'];  // Default path for channel name
+
+  private destroy$ = new Subject<void>();
+
+  fb = inject(FormBuilder);
+  messageService = inject(MessageServiceDemo);
+  stateService = inject(StateServiceDemo);
+  messageDisplayService = inject(MessageDisplayRouterService);
+
+  // Only show public channels (starting with "PUB-"), strip prefix for display
+  // SYS- channels are private/internal and hidden from users
+  channels$ = this.messageService.channels$.pipe(
+    map(channels => channels
+      ?.filter(channel => channel.startsWith('PUB-'))
+      .map(channel => channel.replace('PUB-', '')) || []
+    ),
+    startWith([] as string[]),
+    distinctUntilChanged((prev, curr) => prev.length === curr.length && prev.every((v, i) => v === curr[i]))
+  );
+
+  // Track subscribed public channels only, strip prefix for display
+  subscribedChannels$ = this.messageService.subscribedChannels$.pipe(
+    map(set => Array.from(set)
+      .filter(channel => channel.startsWith('PUB-'))
+      .map(channel => channel.replace('PUB-', ''))
+    ),
+    startWith([] as string[]),
+    distinctUntilChanged((prev, curr) => prev.length === curr.length && prev.every((v, i) => v === curr[i]))
+  );
+
+  user$ = this.stateService.user$;
+
+  data$ = this.stateService.data$;
+
+  connectionStatus$ = this.stateService.connectionStatus$;
+
+  // Form for creating new channels
+  newChannelName = this.fb.control<string>('', [Validators.required, Validators.minLength(2)])
+
+  // Form for selecting channels to send to and message content
+  messages = this.fb.group({
+    selectedChannels: this.fb.control<string[]>([], Validators.required),
+    content: this.fb.control<string|null>(null, Validators.required),
+  })
+
+  get selectedChannels() {
+    return this.messages.get('selectedChannels') as FormControl
+  }
+
+  get content() {
+    return this.messages.get('content') as FormControl
+  }
+
+  communicationMessages$ = this.messageService.communicationMessages$;
+  latestCommunicationMessages$ = this.messageService.latestCommunicationMessages$;
+
+  chat$: Observable<{ user: any, messages: any[]}|any> = combineLatest([this.user$, this.communicationMessages$])
+  .pipe(
+    map(([user, messages]: any) => ({ user, messages })),
+    map(obj => {
+
+      if(!obj.user) return EMPTY
+
+      const mainUser = ''
+
+      const messages = obj.messages.map((item: any) => {
+        // Message transformation logic
+      })
+
+      return { user: mainUser, messages }
+
+    })
+  );
+
+  ngOnInit() {
+
+    this.stateService.updateConnection(this.server, this.wsServer, this.jwtToken, this.user, this.path);
+
+    // Only trigger once when connection becomes true
+    this.connectionStatus$.pipe(
+      filter(status => status === true),
+      take(1),
+      takeUntil(this.destroy$)
+    ).subscribe(() => {
+      console.log('📋 Fetching channels after connection...');
+      this.messageService.getAllChannels();
+    });
+
+    // Subscribe to latest messages and display using rule-based routing
+    this.latestCommunicationMessages$.pipe(
+      filter(message => !!message),
+      takeUntil(this.destroy$)
+    ).subscribe((message: any) => {
+      console.log('🔔 Message received, routing to display:', message);
+
+      // NEW: Delegate to MessageDisplayRouterService
+      // The message payload determines the display type via rules
+      this.messageDisplayService.display(message);
+
+      // OLD: Hardcoded snackbar (removed)
+      // const messageContent = message.content?.content?.message || message.content?.message || '';
+      // this.toastService.toastMessage(...);
+    });
+
+  }
+
+  ngOnDestroy() {
+    this.destroy$.next();
+    this.destroy$.complete();
+  }
+
+  /**
+   * Create a new public channel without auto-subscribing
+   * NOTE: PUB- prefix is added by messageService.createChannel
+   */
+  onCreateChannel() {
+    if (this.newChannelName.invalid) return;
+
+    const channelName = this.newChannelName.value?.trim();
+    if (channelName) {
+      // Pass base channel name - service adds PUB- prefix
+      this.messageService.createChannel(channelName);
+      this.newChannelName.reset();
+      // Server will broadcast updated channel list to all clients automatically
+    }
+  }
+
+  /**
+   * Subscribe to a channel to receive messages
+   * NOTE: PUB- prefix is added by messageService.subscribeToChannel
+   */
+  onSubscribeToChannel(channel: string) {
+    // Pass base channel name - service adds PUB- prefix
+    this.messageService.subscribeToChannel(channel);
+    // Reset channel selection when subscriptions change
+    this.selectedChannels.reset([]);
+  }
+
+  /**
+   * Unsubscribe from a channel
+   * NOTE: PUB- prefix is added by messageService.unsubscribeFromChannel
+   */
+  onUnsubscribeFromChannel(channel: string) {
+    // Pass base channel name - service adds PUB- prefix
+    this.messageService.unsubscribeFromChannel(channel);
+    // Reset channel selection when subscriptions change
+    this.selectedChannels.reset([]);
+  }
+
+  /**
+   * Handle chip toggle for subscribe/unsubscribe
+   */
+  onChipToggle(event: any, channel: string) {
+    const isSelected = event.selected;
+
+    console.log('🎯 Chip toggle event:', {
+      channel,
+      isSelected,
+      option: event.source
+    });
+
+    if (isSelected) {
+      this.onSubscribeToChannel(channel);
+    } else {
+      this.onUnsubscribeFromChannel(channel);
+    }
+  }
+
+  /**
+   * Check if currently subscribed to a channel
+   * Compares display names (without PUB- prefix)
+   */
+  isSubscribed(channel: string, subscribedChannels: string[]): boolean {
+    return subscribedChannels.includes(channel);
+  }
+
+  onSendMessage() {
+    this.messages.markAllAsTouched()
+
+    if (this.messages.invalid) return
+
+    const channelsToSend = this.selectedChannels.value as string[]
+    if (channelsToSend.length === 0) return
+
+    // Get user from observable - subscribe once
+    this.user$.pipe(take(1)).subscribe(user => {
+      if (!user) {
+        console.error('❌ No user found');
+        return;
+      }
+
+      // Pass base channel names - service adds PUB- prefix
+      const message = ChannelMessage.adapt({
+        sessionId: {  // user object with 'id' as the ID field
+          id: user.id,
+          ldap: user.ldap,
+          name: user.name,
+          email: user.email,
+        },
+        content: { message: this.messages.value.content },
+      })
+
+      this.messageService.sendMessage(message, channelsToSend);
+      this.content.reset();
+    });
+
+  }
+
+}

package/src/lib/http-request-services-demo/request-manager-ws-demo/components/ws-notifications/ws-notifications.component.css

@@ -0,0 +1,30 @@
+/* Style for colored notification messages */
+.colored-message {
+  font-weight: 500;
+  padding: 4px 8px;
+  border-radius: 4px;
+  display: inline-block;
+  max-width: 100%;
+  word-wrap: break-word;
+}
+
+/* Ensure good contrast for colored text */
+.colored-message.black-text {
+  color: #000000 !important;
+}
+
+.colored-message.white-text {
+  color: #ffffff !important;
+  text-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
+}
+
+/* Table cell styling */
+td.mat-mdc-cell {
+  padding: 8px 12px;
+}
+
+.pill {
+  border-radius: 1rem;
+  padding: .5rem 1rem;
+  color: #ffffff;
+}

package/src/lib/http-request-services-demo/request-manager-ws-demo/components/ws-notifications/ws-notifications.component.html

@@ -0,0 +1,172 @@
+<div style="display: flex; gap: 1rem; flex-direction: column; margin-top: 1rem;">
+
+  <!-- Channel Creation Section -->
+  <div style="padding: 1rem; background: #e8f5e9; border-radius: 4px;">
+    <strong>Create Notification Channel</strong>
+    <div style="display: flex; flex-direction: column; margin-top: 0.5rem;">
+      <mat-form-field appearance="outline" style="width: 100%;">
+        <mat-label>Channel Name</mat-label>
+        <input
+          matInput
+          [formControl]="newChannelName"
+          placeholder="Enter notification channel name"
+          (keydown.enter)="onCreateChannel()"
+        >
+      </mat-form-field>
+      <div style="display: flex; justify-content: flex-end; gap: 0.5rem;">
+        <!-- <button mat-raised-button color="accent" (click)="onDefinePreviousChannels()">
+          Define Previous Channels
+        </button> -->
+        <button mat-raised-button color="primary" (click)="onCreateChannel()"
+                [disabled]="newChannelName.invalid">
+          Create Channel 1
+        </button>
+      </div>
+    </div>
+  </div>
+
+  <!-- Channel Connection Section - Only shown when NOT connected -->
+  @if ((subscribedNotificationChannels$ | async); as subscribedChannels) {
+    @if (!isChannelConnected(subscribedChannels)) {
+      <div style="padding: 1rem; background: #e3f2fd; border-radius: 4px;">
+        <strong>Connect to Channel</strong>
+        <div style="display: flex; gap: 1rem; margin-top: 0.5rem; flex-wrap: wrap; align-items: flex-start;">
+          <!-- Channel Selection (from today's DB data) -->
+          <mat-form-field appearance="outline" style="flex: 1; min-width: 200px;">
+            <mat-label>Select Channel</mat-label>
+            <mat-select [formControl]="selectedConnectionChannel" placeholder="Select a notification channel">
+              @for (channel of (todaysNotificationChannels$ | async) || []; track channel) {
+                <mat-option [value]="channel">{{ channel }}</mat-option>
+              }
+              @empty {
+                <mat-option disabled>No channels with data for today</mat-option>
+              }
+            </mat-select>
+          </mat-form-field>
+
+          <!-- Date Filter -->
+          <mat-form-field appearance="outline" style="flex: 1; min-width: 200px;" [formGroup]="dateFilter">
+            <mat-label>Start Date</mat-label>
+            <input matInput [matDatepicker]="startPicker" formControlName="startDate">
+            <mat-datepicker-toggle matIconSuffix [for]="startPicker"></mat-datepicker-toggle>
+            <mat-datepicker #startPicker></mat-datepicker>
+          </mat-form-field>
+
+          <mat-form-field appearance="outline" style="flex: 1; min-width: 200px;" [formGroup]="dateFilter">
+            <mat-label>End Date</mat-label>
+            <input matInput [matDatepicker]="endPicker" formControlName="endDate">
+            <mat-datepicker-toggle matIconSuffix [for]="endPicker"></mat-datepicker-toggle>
+            <mat-datepicker #endPicker></mat-datepicker>
+          </mat-form-field>
+        </div>
+
+        <div style="display: flex; gap: 0.5rem;">
+          <span style="flex:1"></span>
+          <button
+            mat-raised-button color="primary"
+            (click)="onConnectToChannel()"
+            [disabled]="!selectedConnectionChannel.value"
+          >
+            Connect
+          </button>
+        </div>
+      </div>
+    }
+  }
+
+  <!-- Send Notification Section -->
+  @if ((subscribedNotificationChannels$ | async); as subscribedChannels) {
+    @if (subscribedChannels.length > 0) {
+      <div
+        style="padding: 1rem; background: #fff8e1; border-radius: 4px;"
+        [formGroup]="notificationForm"
+      >
+        <strong>Send Notification</strong>
+
+        <!-- Notification Content -->
+        <div style="display: flex; flex-direction: column; margin-top: 0.5rem;">
+          <mat-form-field style="width: 100%;" appearance="outline">
+            <mat-label>Notification Message</mat-label>
+            <textarea
+              matInput placeholder="Type your notification..."
+              formControlName="content"
+              rows="2"
+              (keydown.enter)="onSendNotification(); $event.preventDefault()"
+            ></textarea>
+          </mat-form-field>
+          <div style="display: flex; justify-content: flex-end; margin-top: -0.5rem;">
+            <button
+              mat-raised-button color="accent"
+              (click)="onSendNotification()"
+              [disabled]="notificationForm.invalid"
+            >
+              Send Notification
+            </button>
+          </div>
+        </div>
+      </div>
+    }
+  }
+
+  <!-- Notifications Table - Only shown when connected -->
+  @if ((subscribedNotificationChannels$ | async); as subscribedChannels) {
+    @if (isChannelConnected(subscribedChannels)) {
+      @if ((notificationMessages$ | async); as notifications) {
+        <div>
+          <div style="display: flex; justify-content: space-between; align-items: center;">
+            <strong>Notifications ({{ notifications.length }})</strong>
+          </div>
+
+          @if (notifications.length > 0) {
+            <div style="margin-top: 0.5rem; height: 400px; overflow: auto; border: 1px solid #888; border-radius: 4px;">
+              <table mat-table [dataSource]="notifications" style="width: 100%;">
+
+                <!-- Date Column -->
+                <ng-container matColumnDef="date">
+                  <th mat-header-cell *matHeaderCellDef style="width: 180px;">Date</th>
+                  <td mat-cell *matCellDef="let notification">
+                    {{ formatTimestamp(notification.created) | date }}
+                  </td>
+                </ng-container>
+
+                <!-- User Column -->
+                <ng-container matColumnDef="user">
+                  <th mat-header-cell *matHeaderCellDef style="width: 150px;">User</th>
+                  <td mat-cell *matCellDef="let notification">
+                    <strong>{{ notification.user_name }}</strong>
+                  </td>
+                </ng-container>
+
+                <!-- Message Column -->
+                <ng-container matColumnDef="message">
+                  <th mat-header-cell *matHeaderCellDef>Message</th>
+                  <td mat-cell *matCellDef="let notification">
+                  <div class="pill" [style.background-color]="notification.content.sessionId.color || '#000000'">
+                    {{ notification.content?.message || notification.content }}
+                  </div>
+                  </td>
+                </ng-container>
+
+                <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>
+                <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
+              </table>
+            </div>
+          } @else {
+            <div style="text-align: center; color: #666; padding: 2rem;">
+              <mat-icon style="font-size: 48px; height: 48px; width: 48px; opacity: 0.5;">notifications_none</mat-icon>
+              <p>No notifications yet. Waiting for notifications on this channel...</p>
+            </div>
+          }
+        </div>
+
+        <!-- Disconnect Button - Below the table -->
+        <div style="display: flex; justify-content: right; padding: 1rem;">
+          <button mat-raised-button color="warn" (click)="onDisconnectFromChannel()">
+            Disconnect from Channel
+          </button>
+        </div>
+      }
+    }
+  }
+
+</div>

package/src/lib/http-request-services-demo/request-manager-ws-demo/components/ws-notifications/ws-notifications.component.spec.ts

@@ -0,0 +1,31 @@
+/* tslint:disable:no-unused-variable */
+import { waitForAsync, ComponentFixture, TestBed } from '@angular/core/testing';
+import { HttpClientTestingModule } from '@angular/common/http/testing';
+import { By } from '@angular/platform-browser';
+import { DebugElement, NO_ERRORS_SCHEMA } from '@angular/core';
+
+import { WsNotificationsComponent } from './ws-notifications.component';
+
+describe('WsNotificationsComponent', () => {
+  let component: WsNotificationsComponent;
+  let fixture: ComponentFixture<WsNotificationsComponent>;
+
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      imports: [ HttpClientTestingModule ],
+      declarations: [ WsNotificationsComponent ],
+      schemas: [ NO_ERRORS_SCHEMA ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(WsNotificationsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});