http-request-manager 18.7.8 → 18.7.10

package/fesm2022/http-request-manager.mjs

@@ -4690,6 +4690,24 @@ class StateServiceDemo extends HTTPManagerStateService {
     getTodaysNotificationChannels() {
         super.getTodaysNotificationChannels();
     }
+    /**
+     * Define and load previous day's notification channels from database
+     * Creates channels in memory and broadcasts updated list
+     */
+    definePreviousNotificationChannels() {
+        const options = ApiRequest.adapt({
+            path: ['notifications', 'channels', 'define-previous']
+        });
+        this.httpManagerService.postRequest({}, options).subscribe({
+            next: (response) => {
+                console.log('📋 Previous day channels loaded:', response);
+                // The server will broadcast updated channel list to all WebSocket clients
+            },
+            error: (error) => {
+                console.error('❌ Failed to load previous day channels:', error);
+            }
+        });
+    }
     /**
      * Subscribe to notification channel with optional date filters
      */
@@ -4843,6 +4861,14 @@ class NotificationServiceDemo {
         console.log('📢 getTodaysNotificationChannels (from DB)');
         this.stateService.getTodaysNotificationChannels();
     }
+    /**
+     * Define and load previous day's notification channels from database
+     * Creates channels in memory and broadcasts updated list
+     */
+    definePreviousNotificationChannels() {
+        console.log('📢 definePreviousNotificationChannels');
+        this.stateService.definePreviousNotificationChannels();
+    }
     /**
      * Subscribe to a notification channel with optional date filter
      * NOTE: MES- prefix is added automatically by HTTPManagerStateService
@@ -5330,6 +5356,12 @@ class WsNotificationsComponent {
             this.newChannelName.reset();
         }
     }
+    /**
+     * Define and load previous channels
+     */
+    onDefinePreviousChannels() {
+        this.notificationService.definePreviousNotificationChannels();
+    }
     /**
      * Subscribe to a notification channel with optional date filter
      */
@@ -5404,11 +5436,11 @@ class WsNotificationsComponent {
         return new Date().toISOString().split('T')[0];
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: WsNotificationsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: WsNotificationsComponent, selector: "app-ws-notifications", inputs: { server: "server", wsServer: "wsServer", jwtToken: "jwtToken", user: "user" }, ngImport: i0, template: "<div style=\"display: flex; gap: 1rem; flex-direction: column; margin-top: 1rem;\">\n\n  <!-- Channel Creation Section -->\n  <div style=\"padding: 1rem; background: #e8f5e9; border-radius: 4px;\">\n    <strong>Create Notification Channel</strong>\n    <div style=\"display: flex; flex-direction: column; margin-top: 0.5rem;\">\n      <mat-form-field appearance=\"outline\" style=\"width: 100%;\">\n        <mat-label>Channel Name</mat-label>\n        <input\n          matInput\n          [formControl]=\"newChannelName\"\n          placeholder=\"Enter notification channel name\"\n          (keydown.enter)=\"onCreateChannel()\"\n        >\n      </mat-form-field>\n      <div style=\"display: flex; justify-content: flex-end;\">\n        <button mat-raised-button color=\"primary\" (click)=\"onCreateChannel()\"\n                [disabled]=\"newChannelName.invalid\">\n          Create Channel\n        </button>\n      </div>\n    </div>\n  </div>\n\n  <!-- Channel Connection Section - Only shown when NOT connected -->\n  @if ((subscribedNotificationChannels$ | async); as subscribedChannels) {\n    @if (!isChannelConnected(subscribedChannels)) {\n      <div style=\"padding: 1rem; background: #e3f2fd; border-radius: 4px;\">\n        <strong>Connect to Channel</strong>\n        <div style=\"display: flex; gap: 1rem; margin-top: 0.5rem; flex-wrap: wrap; align-items: flex-start;\">\n          <!-- Channel Selection (from today's DB data) -->\n          <mat-form-field appearance=\"outline\" style=\"flex: 1; min-width: 200px;\">\n            <mat-label>Select Channel</mat-label>\n            <mat-select [formControl]=\"selectedConnectionChannel\" placeholder=\"Select a notification channel\">\n              @for (channel of (todaysNotificationChannels$ | async) || []; track channel) {\n                <mat-option [value]=\"channel\">{{ channel }}</mat-option>\n              }\n              @empty {\n                <mat-option disabled>No channels with data for today</mat-option>\n              }\n            </mat-select>\n          </mat-form-field>\n\n          <!-- Date Filter -->\n          <mat-form-field appearance=\"outline\" style=\"flex: 1; min-width: 200px;\" [formGroup]=\"dateFilter\">\n            <mat-label>Start Date</mat-label>\n            <input matInput [matDatepicker]=\"startPicker\" formControlName=\"startDate\">\n            <mat-datepicker-toggle matIconSuffix [for]=\"startPicker\"></mat-datepicker-toggle>\n            <mat-datepicker #startPicker></mat-datepicker>\n          </mat-form-field>\n\n          <mat-form-field appearance=\"outline\" style=\"flex: 1; min-width: 200px;\" [formGroup]=\"dateFilter\">\n            <mat-label>End Date</mat-label>\n            <input matInput [matDatepicker]=\"endPicker\" formControlName=\"endDate\">\n            <mat-datepicker-toggle matIconSuffix [for]=\"endPicker\"></mat-datepicker-toggle>\n            <mat-datepicker #endPicker></mat-datepicker>\n          </mat-form-field>\n        </div>\n\n        <div style=\"display: flex; gap: 0.5rem;\">\n          <span style=\"flex:1\"></span>\n          <button\n            mat-raised-button color=\"primary\"\n            (click)=\"onConnectToChannel()\"\n            [disabled]=\"!selectedConnectionChannel.value\"\n          >\n            Connect\n          </button>\n        </div>\n      </div>\n    }\n  }\n\n  <!-- Send Notification Section -->\n  @if ((subscribedNotificationChannels$ | async); as subscribedChannels) {\n    @if (subscribedChannels.length > 0) {\n      <div\n        style=\"padding: 1rem; background: #fff8e1; border-radius: 4px;\"\n        [formGroup]=\"notificationForm\"\n      >\n        <strong>Send Notification</strong>\n\n        <!-- Notification Content -->\n        <div style=\"display: flex; flex-direction: column; margin-top: 0.5rem;\">\n          <mat-form-field style=\"width: 100%;\" appearance=\"outline\">\n            <mat-label>Notification Message</mat-label>\n            <textarea\n              matInput placeholder=\"Type your notification...\"\n              formControlName=\"content\"\n              rows=\"2\"\n              (keydown.enter)=\"onSendNotification(); $event.preventDefault()\"\n            ></textarea>\n          </mat-form-field>\n          <div style=\"display: flex; justify-content: flex-end; margin-top: -0.5rem;\">\n            <button\n              mat-raised-button color=\"accent\"\n              (click)=\"onSendNotification()\"\n              [disabled]=\"notificationForm.invalid\"\n            >\n              Send Notification\n            </button>\n          </div>\n        </div>\n      </div>\n    }\n  }\n\n  <!-- Notifications Table - Only shown when connected -->\n  @if ((subscribedNotificationChannels$ | async); as subscribedChannels) {\n    @if (isChannelConnected(subscribedChannels)) {\n      @if ((notificationMessages$ | async); as notifications) {\n        <div>\n          <div style=\"display: flex; justify-content: space-between; align-items: center;\">\n            <strong>Notifications ({{ notifications.length }})</strong>\n          </div>\n\n          @if (notifications.length > 0) {\n            <div style=\"margin-top: 0.5rem; height: 400px; overflow: auto; border: 1px solid #888; border-radius: 4px;\">\n              <table mat-table [dataSource]=\"notifications\" style=\"width: 100%;\">\n\n                <!-- Date Column -->\n                <ng-container matColumnDef=\"date\">\n                  <th mat-header-cell *matHeaderCellDef style=\"width: 180px;\">Date</th>\n                  <td mat-cell *matCellDef=\"let notification\">\n                    {{ formatTimestamp(notification.created) | date }}\n                  </td>\n                </ng-container>\n\n                <!-- User Column -->\n                <ng-container matColumnDef=\"user\">\n                  <th mat-header-cell *matHeaderCellDef style=\"width: 150px;\">User</th>\n                  <td mat-cell *matCellDef=\"let notification\">\n                    <strong>{{ notification.user_name }}</strong>\n                  </td>\n                </ng-container>\n\n                <!-- Message Column -->\n                <ng-container matColumnDef=\"message\">\n                  <th mat-header-cell *matHeaderCellDef>Message</th>\n                  <td mat-cell *matCellDef=\"let notification\">\n                    {{ notification.content?.message || notification.content }}\n                  </td>\n                </ng-container>\n\n                <tr mat-header-row *matHeaderRowDef=\"displayedColumns; sticky: true\"></tr>\n                <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\"></tr>\n              </table>\n            </div>\n          } @else {\n            <div style=\"text-align: center; color: #666; padding: 2rem;\">\n              <mat-icon style=\"font-size: 48px; height: 48px; width: 48px; opacity: 0.5;\">notifications_none</mat-icon>\n              <p>No notifications yet. Waiting for notifications on this channel...</p>\n            </div>\n          }\n        </div>\n\n        <!-- Disconnect Button - Below the table -->\n        <div style=\"display: flex; justify-content: right; padding: 1rem;\">\n          <button mat-raised-button color=\"warn\" (click)=\"onDisconnectFromChannel()\">\n            Disconnect from Channel\n          </button>\n        </div>\n      }\n    }\n  }\n\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i2$1.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: i4.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i5.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i6.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i7.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i7.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i7.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i7.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i7.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i7.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i7.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i7.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i7.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i7.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: i12.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i9.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i9.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i9.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$1.DatePipe, name: "date" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: WsNotificationsComponent, selector: "app-ws-notifications", inputs: { server: "server", wsServer: "wsServer", jwtToken: "jwtToken", user: "user" }, ngImport: i0, template: "<div style=\"display: flex; gap: 1rem; flex-direction: column; margin-top: 1rem;\">\n\n  <!-- Channel Creation Section -->\n  <div style=\"padding: 1rem; background: #e8f5e9; border-radius: 4px;\">\n    <strong>Create Notification Channel</strong>\n    <div style=\"display: flex; flex-direction: column; margin-top: 0.5rem;\">\n      <mat-form-field appearance=\"outline\" style=\"width: 100%;\">\n        <mat-label>Channel Name</mat-label>\n        <input\n          matInput\n          [formControl]=\"newChannelName\"\n          placeholder=\"Enter notification channel name\"\n          (keydown.enter)=\"onCreateChannel()\"\n        >\n      </mat-form-field>\n      <div style=\"display: flex; justify-content: flex-end; gap: 0.5rem;\">\n        <button mat-raised-button color=\"accent\" (click)=\"onDefinePreviousChannels()\">\n          Define Previous Channels\n        </button>\n        <button mat-raised-button color=\"primary\" (click)=\"onCreateChannel()\"\n                [disabled]=\"newChannelName.invalid\">\n          Create Channel\n        </button>\n      </div>\n    </div>\n  </div>\n\n  <!-- Channel Connection Section - Only shown when NOT connected -->\n  @if ((subscribedNotificationChannels$ | async); as subscribedChannels) {\n    @if (!isChannelConnected(subscribedChannels)) {\n      <div style=\"padding: 1rem; background: #e3f2fd; border-radius: 4px;\">\n        <strong>Connect to Channel</strong>\n        <div style=\"display: flex; gap: 1rem; margin-top: 0.5rem; flex-wrap: wrap; align-items: flex-start;\">\n          <!-- Channel Selection (from today's DB data) -->\n          <mat-form-field appearance=\"outline\" style=\"flex: 1; min-width: 200px;\">\n            <mat-label>Select Channel</mat-label>\n            <mat-select [formControl]=\"selectedConnectionChannel\" placeholder=\"Select a notification channel\">\n              @for (channel of (todaysNotificationChannels$ | async) || []; track channel) {\n                <mat-option [value]=\"channel\">{{ channel }}</mat-option>\n              }\n              @empty {\n                <mat-option disabled>No channels with data for today</mat-option>\n              }\n            </mat-select>\n          </mat-form-field>\n\n          <!-- Date Filter -->\n          <mat-form-field appearance=\"outline\" style=\"flex: 1; min-width: 200px;\" [formGroup]=\"dateFilter\">\n            <mat-label>Start Date</mat-label>\n            <input matInput [matDatepicker]=\"startPicker\" formControlName=\"startDate\">\n            <mat-datepicker-toggle matIconSuffix [for]=\"startPicker\"></mat-datepicker-toggle>\n            <mat-datepicker #startPicker></mat-datepicker>\n          </mat-form-field>\n\n          <mat-form-field appearance=\"outline\" style=\"flex: 1; min-width: 200px;\" [formGroup]=\"dateFilter\">\n            <mat-label>End Date</mat-label>\n            <input matInput [matDatepicker]=\"endPicker\" formControlName=\"endDate\">\n            <mat-datepicker-toggle matIconSuffix [for]=\"endPicker\"></mat-datepicker-toggle>\n            <mat-datepicker #endPicker></mat-datepicker>\n          </mat-form-field>\n        </div>\n\n        <div style=\"display: flex; gap: 0.5rem;\">\n          <span style=\"flex:1\"></span>\n          <button\n            mat-raised-button color=\"primary\"\n            (click)=\"onConnectToChannel()\"\n            [disabled]=\"!selectedConnectionChannel.value\"\n          >\n            Connect\n          </button>\n        </div>\n      </div>\n    }\n  }\n\n  <!-- Send Notification Section -->\n  @if ((subscribedNotificationChannels$ | async); as subscribedChannels) {\n    @if (subscribedChannels.length > 0) {\n      <div\n        style=\"padding: 1rem; background: #fff8e1; border-radius: 4px;\"\n        [formGroup]=\"notificationForm\"\n      >\n        <strong>Send Notification</strong>\n\n        <!-- Notification Content -->\n        <div style=\"display: flex; flex-direction: column; margin-top: 0.5rem;\">\n          <mat-form-field style=\"width: 100%;\" appearance=\"outline\">\n            <mat-label>Notification Message</mat-label>\n            <textarea\n              matInput placeholder=\"Type your notification...\"\n              formControlName=\"content\"\n              rows=\"2\"\n              (keydown.enter)=\"onSendNotification(); $event.preventDefault()\"\n            ></textarea>\n          </mat-form-field>\n          <div style=\"display: flex; justify-content: flex-end; margin-top: -0.5rem;\">\n            <button\n              mat-raised-button color=\"accent\"\n              (click)=\"onSendNotification()\"\n              [disabled]=\"notificationForm.invalid\"\n            >\n              Send Notification\n            </button>\n          </div>\n        </div>\n      </div>\n    }\n  }\n\n  <!-- Notifications Table - Only shown when connected -->\n  @if ((subscribedNotificationChannels$ | async); as subscribedChannels) {\n    @if (isChannelConnected(subscribedChannels)) {\n      @if ((notificationMessages$ | async); as notifications) {\n        <div>\n          <div style=\"display: flex; justify-content: space-between; align-items: center;\">\n            <strong>Notifications ({{ notifications.length }})</strong>\n          </div>\n\n          @if (notifications.length > 0) {\n            <div style=\"margin-top: 0.5rem; height: 400px; overflow: auto; border: 1px solid #888; border-radius: 4px;\">\n              <table mat-table [dataSource]=\"notifications\" style=\"width: 100%;\">\n\n                <!-- Date Column -->\n                <ng-container matColumnDef=\"date\">\n                  <th mat-header-cell *matHeaderCellDef style=\"width: 180px;\">Date</th>\n                  <td mat-cell *matCellDef=\"let notification\">\n                    {{ formatTimestamp(notification.created) | date }}\n                  </td>\n                </ng-container>\n\n                <!-- User Column -->\n                <ng-container matColumnDef=\"user\">\n                  <th mat-header-cell *matHeaderCellDef style=\"width: 150px;\">User</th>\n                  <td mat-cell *matCellDef=\"let notification\">\n                    <strong>{{ notification.user_name }}</strong>\n                  </td>\n                </ng-container>\n\n                <!-- Message Column -->\n                <ng-container matColumnDef=\"message\">\n                  <th mat-header-cell *matHeaderCellDef>Message</th>\n                  <td mat-cell *matCellDef=\"let notification\">\n                    {{ notification.content?.message || notification.content }}\n                  </td>\n                </ng-container>\n\n                <tr mat-header-row *matHeaderRowDef=\"displayedColumns; sticky: true\"></tr>\n                <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\"></tr>\n              </table>\n            </div>\n          } @else {\n            <div style=\"text-align: center; color: #666; padding: 2rem;\">\n              <mat-icon style=\"font-size: 48px; height: 48px; width: 48px; opacity: 0.5;\">notifications_none</mat-icon>\n              <p>No notifications yet. Waiting for notifications on this channel...</p>\n            </div>\n          }\n        </div>\n\n        <!-- Disconnect Button - Below the table -->\n        <div style=\"display: flex; justify-content: right; padding: 1rem;\">\n          <button mat-raised-button color=\"warn\" (click)=\"onDisconnectFromChannel()\">\n            Disconnect from Channel\n          </button>\n        </div>\n      }\n    }\n  }\n\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i2$1.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: i4.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i5.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i6.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i7.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i7.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i7.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i7.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i7.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i7.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i7.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i7.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i7.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i7.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: i12.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i9.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i9.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i9.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$1.DatePipe, name: "date" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: WsNotificationsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-ws-notifications', standalone: false, template: "<div style=\"display: flex; gap: 1rem; flex-direction: column; margin-top: 1rem;\">\n\n  <!-- Channel Creation Section -->\n  <div style=\"padding: 1rem; background: #e8f5e9; border-radius: 4px;\">\n    <strong>Create Notification Channel</strong>\n    <div style=\"display: flex; flex-direction: column; margin-top: 0.5rem;\">\n      <mat-form-field appearance=\"outline\" style=\"width: 100%;\">\n        <mat-label>Channel Name</mat-label>\n        <input\n          matInput\n          [formControl]=\"newChannelName\"\n          placeholder=\"Enter notification channel name\"\n          (keydown.enter)=\"onCreateChannel()\"\n        >\n      </mat-form-field>\n      <div style=\"display: flex; justify-content: flex-end;\">\n        <button mat-raised-button color=\"primary\" (click)=\"onCreateChannel()\"\n                [disabled]=\"newChannelName.invalid\">\n          Create Channel\n        </button>\n      </div>\n    </div>\n  </div>\n\n  <!-- Channel Connection Section - Only shown when NOT connected -->\n  @if ((subscribedNotificationChannels$ | async); as subscribedChannels) {\n    @if (!isChannelConnected(subscribedChannels)) {\n      <div style=\"padding: 1rem; background: #e3f2fd; border-radius: 4px;\">\n        <strong>Connect to Channel</strong>\n        <div style=\"display: flex; gap: 1rem; margin-top: 0.5rem; flex-wrap: wrap; align-items: flex-start;\">\n          <!-- Channel Selection (from today's DB data) -->\n          <mat-form-field appearance=\"outline\" style=\"flex: 1; min-width: 200px;\">\n            <mat-label>Select Channel</mat-label>\n            <mat-select [formControl]=\"selectedConnectionChannel\" placeholder=\"Select a notification channel\">\n              @for (channel of (todaysNotificationChannels$ | async) || []; track channel) {\n                <mat-option [value]=\"channel\">{{ channel }}</mat-option>\n              }\n              @empty {\n                <mat-option disabled>No channels with data for today</mat-option>\n              }\n            </mat-select>\n          </mat-form-field>\n\n          <!-- Date Filter -->\n          <mat-form-field appearance=\"outline\" style=\"flex: 1; min-width: 200px;\" [formGroup]=\"dateFilter\">\n            <mat-label>Start Date</mat-label>\n            <input matInput [matDatepicker]=\"startPicker\" formControlName=\"startDate\">\n            <mat-datepicker-toggle matIconSuffix [for]=\"startPicker\"></mat-datepicker-toggle>\n            <mat-datepicker #startPicker></mat-datepicker>\n          </mat-form-field>\n\n          <mat-form-field appearance=\"outline\" style=\"flex: 1; min-width: 200px;\" [formGroup]=\"dateFilter\">\n            <mat-label>End Date</mat-label>\n            <input matInput [matDatepicker]=\"endPicker\" formControlName=\"endDate\">\n            <mat-datepicker-toggle matIconSuffix [for]=\"endPicker\"></mat-datepicker-toggle>\n            <mat-datepicker #endPicker></mat-datepicker>\n          </mat-form-field>\n        </div>\n\n        <div style=\"display: flex; gap: 0.5rem;\">\n          <span style=\"flex:1\"></span>\n          <button\n            mat-raised-button color=\"primary\"\n            (click)=\"onConnectToChannel()\"\n            [disabled]=\"!selectedConnectionChannel.value\"\n          >\n            Connect\n          </button>\n        </div>\n      </div>\n    }\n  }\n\n  <!-- Send Notification Section -->\n  @if ((subscribedNotificationChannels$ | async); as subscribedChannels) {\n    @if (subscribedChannels.length > 0) {\n      <div\n        style=\"padding: 1rem; background: #fff8e1; border-radius: 4px;\"\n        [formGroup]=\"notificationForm\"\n      >\n        <strong>Send Notification</strong>\n\n        <!-- Notification Content -->\n        <div style=\"display: flex; flex-direction: column; margin-top: 0.5rem;\">\n          <mat-form-field style=\"width: 100%;\" appearance=\"outline\">\n            <mat-label>Notification Message</mat-label>\n            <textarea\n              matInput placeholder=\"Type your notification...\"\n              formControlName=\"content\"\n              rows=\"2\"\n              (keydown.enter)=\"onSendNotification(); $event.preventDefault()\"\n            ></textarea>\n          </mat-form-field>\n          <div style=\"display: flex; justify-content: flex-end; margin-top: -0.5rem;\">\n            <button\n              mat-raised-button color=\"accent\"\n              (click)=\"onSendNotification()\"\n              [disabled]=\"notificationForm.invalid\"\n            >\n              Send Notification\n            </button>\n          </div>\n        </div>\n      </div>\n    }\n  }\n\n  <!-- Notifications Table - Only shown when connected -->\n  @if ((subscribedNotificationChannels$ | async); as subscribedChannels) {\n    @if (isChannelConnected(subscribedChannels)) {\n      @if ((notificationMessages$ | async); as notifications) {\n        <div>\n          <div style=\"display: flex; justify-content: space-between; align-items: center;\">\n            <strong>Notifications ({{ notifications.length }})</strong>\n          </div>\n\n          @if (notifications.length > 0) {\n            <div style=\"margin-top: 0.5rem; height: 400px; overflow: auto; border: 1px solid #888; border-radius: 4px;\">\n              <table mat-table [dataSource]=\"notifications\" style=\"width: 100%;\">\n\n                <!-- Date Column -->\n                <ng-container matColumnDef=\"date\">\n                  <th mat-header-cell *matHeaderCellDef style=\"width: 180px;\">Date</th>\n                  <td mat-cell *matCellDef=\"let notification\">\n                    {{ formatTimestamp(notification.created) | date }}\n                  </td>\n                </ng-container>\n\n                <!-- User Column -->\n                <ng-container matColumnDef=\"user\">\n                  <th mat-header-cell *matHeaderCellDef style=\"width: 150px;\">User</th>\n                  <td mat-cell *matCellDef=\"let notification\">\n                    <strong>{{ notification.user_name }}</strong>\n                  </td>\n                </ng-container>\n\n                <!-- Message Column -->\n                <ng-container matColumnDef=\"message\">\n                  <th mat-header-cell *matHeaderCellDef>Message</th>\n                  <td mat-cell *matCellDef=\"let notification\">\n                    {{ notification.content?.message || notification.content }}\n                  </td>\n                </ng-container>\n\n                <tr mat-header-row *matHeaderRowDef=\"displayedColumns; sticky: true\"></tr>\n                <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\"></tr>\n              </table>\n            </div>\n          } @else {\n            <div style=\"text-align: center; color: #666; padding: 2rem;\">\n              <mat-icon style=\"font-size: 48px; height: 48px; width: 48px; opacity: 0.5;\">notifications_none</mat-icon>\n              <p>No notifications yet. Waiting for notifications on this channel...</p>\n            </div>\n          }\n        </div>\n\n        <!-- Disconnect Button - Below the table -->\n        <div style=\"display: flex; justify-content: right; padding: 1rem;\">\n          <button mat-raised-button color=\"warn\" (click)=\"onDisconnectFromChannel()\">\n            Disconnect from Channel\n          </button>\n        </div>\n      }\n    }\n  }\n\n</div>\n" }]
+            args: [{ selector: 'app-ws-notifications', standalone: false, template: "<div style=\"display: flex; gap: 1rem; flex-direction: column; margin-top: 1rem;\">\n\n  <!-- Channel Creation Section -->\n  <div style=\"padding: 1rem; background: #e8f5e9; border-radius: 4px;\">\n    <strong>Create Notification Channel</strong>\n    <div style=\"display: flex; flex-direction: column; margin-top: 0.5rem;\">\n      <mat-form-field appearance=\"outline\" style=\"width: 100%;\">\n        <mat-label>Channel Name</mat-label>\n        <input\n          matInput\n          [formControl]=\"newChannelName\"\n          placeholder=\"Enter notification channel name\"\n          (keydown.enter)=\"onCreateChannel()\"\n        >\n      </mat-form-field>\n      <div style=\"display: flex; justify-content: flex-end; gap: 0.5rem;\">\n        <button mat-raised-button color=\"accent\" (click)=\"onDefinePreviousChannels()\">\n          Define Previous Channels\n        </button>\n        <button mat-raised-button color=\"primary\" (click)=\"onCreateChannel()\"\n                [disabled]=\"newChannelName.invalid\">\n          Create Channel\n        </button>\n      </div>\n    </div>\n  </div>\n\n  <!-- Channel Connection Section - Only shown when NOT connected -->\n  @if ((subscribedNotificationChannels$ | async); as subscribedChannels) {\n    @if (!isChannelConnected(subscribedChannels)) {\n      <div style=\"padding: 1rem; background: #e3f2fd; border-radius: 4px;\">\n        <strong>Connect to Channel</strong>\n        <div style=\"display: flex; gap: 1rem; margin-top: 0.5rem; flex-wrap: wrap; align-items: flex-start;\">\n          <!-- Channel Selection (from today's DB data) -->\n          <mat-form-field appearance=\"outline\" style=\"flex: 1; min-width: 200px;\">\n            <mat-label>Select Channel</mat-label>\n            <mat-select [formControl]=\"selectedConnectionChannel\" placeholder=\"Select a notification channel\">\n              @for (channel of (todaysNotificationChannels$ | async) || []; track channel) {\n                <mat-option [value]=\"channel\">{{ channel }}</mat-option>\n              }\n              @empty {\n                <mat-option disabled>No channels with data for today</mat-option>\n              }\n            </mat-select>\n          </mat-form-field>\n\n          <!-- Date Filter -->\n          <mat-form-field appearance=\"outline\" style=\"flex: 1; min-width: 200px;\" [formGroup]=\"dateFilter\">\n            <mat-label>Start Date</mat-label>\n            <input matInput [matDatepicker]=\"startPicker\" formControlName=\"startDate\">\n            <mat-datepicker-toggle matIconSuffix [for]=\"startPicker\"></mat-datepicker-toggle>\n            <mat-datepicker #startPicker></mat-datepicker>\n          </mat-form-field>\n\n          <mat-form-field appearance=\"outline\" style=\"flex: 1; min-width: 200px;\" [formGroup]=\"dateFilter\">\n            <mat-label>End Date</mat-label>\n            <input matInput [matDatepicker]=\"endPicker\" formControlName=\"endDate\">\n            <mat-datepicker-toggle matIconSuffix [for]=\"endPicker\"></mat-datepicker-toggle>\n            <mat-datepicker #endPicker></mat-datepicker>\n          </mat-form-field>\n        </div>\n\n        <div style=\"display: flex; gap: 0.5rem;\">\n          <span style=\"flex:1\"></span>\n          <button\n            mat-raised-button color=\"primary\"\n            (click)=\"onConnectToChannel()\"\n            [disabled]=\"!selectedConnectionChannel.value\"\n          >\n            Connect\n          </button>\n        </div>\n      </div>\n    }\n  }\n\n  <!-- Send Notification Section -->\n  @if ((subscribedNotificationChannels$ | async); as subscribedChannels) {\n    @if (subscribedChannels.length > 0) {\n      <div\n        style=\"padding: 1rem; background: #fff8e1; border-radius: 4px;\"\n        [formGroup]=\"notificationForm\"\n      >\n        <strong>Send Notification</strong>\n\n        <!-- Notification Content -->\n        <div style=\"display: flex; flex-direction: column; margin-top: 0.5rem;\">\n          <mat-form-field style=\"width: 100%;\" appearance=\"outline\">\n            <mat-label>Notification Message</mat-label>\n            <textarea\n              matInput placeholder=\"Type your notification...\"\n              formControlName=\"content\"\n              rows=\"2\"\n              (keydown.enter)=\"onSendNotification(); $event.preventDefault()\"\n            ></textarea>\n          </mat-form-field>\n          <div style=\"display: flex; justify-content: flex-end; margin-top: -0.5rem;\">\n            <button\n              mat-raised-button color=\"accent\"\n              (click)=\"onSendNotification()\"\n              [disabled]=\"notificationForm.invalid\"\n            >\n              Send Notification\n            </button>\n          </div>\n        </div>\n      </div>\n    }\n  }\n\n  <!-- Notifications Table - Only shown when connected -->\n  @if ((subscribedNotificationChannels$ | async); as subscribedChannels) {\n    @if (isChannelConnected(subscribedChannels)) {\n      @if ((notificationMessages$ | async); as notifications) {\n        <div>\n          <div style=\"display: flex; justify-content: space-between; align-items: center;\">\n            <strong>Notifications ({{ notifications.length }})</strong>\n          </div>\n\n          @if (notifications.length > 0) {\n            <div style=\"margin-top: 0.5rem; height: 400px; overflow: auto; border: 1px solid #888; border-radius: 4px;\">\n              <table mat-table [dataSource]=\"notifications\" style=\"width: 100%;\">\n\n                <!-- Date Column -->\n                <ng-container matColumnDef=\"date\">\n                  <th mat-header-cell *matHeaderCellDef style=\"width: 180px;\">Date</th>\n                  <td mat-cell *matCellDef=\"let notification\">\n                    {{ formatTimestamp(notification.created) | date }}\n                  </td>\n                </ng-container>\n\n                <!-- User Column -->\n                <ng-container matColumnDef=\"user\">\n                  <th mat-header-cell *matHeaderCellDef style=\"width: 150px;\">User</th>\n                  <td mat-cell *matCellDef=\"let notification\">\n                    <strong>{{ notification.user_name }}</strong>\n                  </td>\n                </ng-container>\n\n                <!-- Message Column -->\n                <ng-container matColumnDef=\"message\">\n                  <th mat-header-cell *matHeaderCellDef>Message</th>\n                  <td mat-cell *matCellDef=\"let notification\">\n                    {{ notification.content?.message || notification.content }}\n                  </td>\n                </ng-container>\n\n                <tr mat-header-row *matHeaderRowDef=\"displayedColumns; sticky: true\"></tr>\n                <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\"></tr>\n              </table>\n            </div>\n          } @else {\n            <div style=\"text-align: center; color: #666; padding: 2rem;\">\n              <mat-icon style=\"font-size: 48px; height: 48px; width: 48px; opacity: 0.5;\">notifications_none</mat-icon>\n              <p>No notifications yet. Waiting for notifications on this channel...</p>\n            </div>\n          }\n        </div>\n\n        <!-- Disconnect Button - Below the table -->\n        <div style=\"display: flex; justify-content: right; padding: 1rem;\">\n          <button mat-raised-button color=\"warn\" (click)=\"onDisconnectFromChannel()\">\n            Disconnect from Channel\n          </button>\n        </div>\n      }\n    }\n  }\n\n</div>\n" }]
         }], propDecorators: { server: [{
                 type: Input
             }], wsServer: [{
@@ -5431,6 +5463,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
             args: [{ selector: 'app-ws-ai-messaging', standalone: false, template: "<p>\n  ws-ai-messaging coming soon!\n</p>\n" }]
         }], ctorParameters: () => [] });
 
+class WsChatsComponent {
+    constructor() { }
+    ngOnInit() {
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: WsChatsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: WsChatsComponent, selector: "app-ws-chats", ngImport: i0, template: "<p>\n  ws-chats coming soon!\n</p>\n", styles: [""] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: WsChatsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-ws-chats', standalone: false, template: "<p>\n  ws-chats coming soon!\n</p>\n" }]
+        }], ctorParameters: () => [] });
+
 class RequestManagerWsDemoComponent {
     constructor() {
         this.httpManagerService = inject(HTTPManagerService);
@@ -5506,11 +5550,11 @@ class RequestManagerWsDemoComponent {
         this.stateService.updateConnection(this.server, this.wsServer, this.jwtToken, this.user);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: RequestManagerWsDemoComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: RequestManagerWsDemoComponent, selector: "app-request-manager-ws-demo", inputs: { server: "server", wsServer: "wsServer", jwtToken: "jwtToken", user: "user", path: "path", wsChannel: "wsChannel" }, ngImport: i0, template: "<div style=\"margin: 2rem;\">\n\n  <h2 style=\"display: flex;\">\n    <span style=\"flex:1\">HTTP Request State Manager - Websockets</span>\n    @if ((connectionStatus$ | async); as connected) {\n      <span>\n        WS -\n        <span style=\"color: green;\">Connected</span>\n      </span>\n    } @else {\n      <span style=\"color: red;\">Disconnected {{ attempts$ | async }} - {{ nextRetry$ |async }}</span>\n    }\n  </h2>\n\n  <div>\n\n    @if ((user$ | async); as userInfo) {\n      <div>\n        <mat-toolbar>\n          <div style=\"display: flex; flex:1\">\n            <div style=\"flex:1\">{{ userInfo.name }}</div>\n            <div>({{ userInfo.ldap }})</div>\n          </div>\n        </mat-toolbar>\n      </div>\n    }\n\n    @if ((isPending$ | async)) {\n      <div>\n        <mat-progress-bar mode=\"indeterminate\"></mat-progress-bar>\n      </div>\n    }\n\n    <mat-tab-group animationDuration=\"0ms\" [selectedIndex]=\"1\">\n\n      <mat-tab label=\"WS - Data Control\">\n        <!-- DATA CONTROL -->\n        <app-ws-data-control\n          [server]=\"server\"\n          [wsServer]=\"wsServer\"\n          [jwtToken]=\"jwtToken\"\n          [user]=\"user\"\n          [path]=\"path\"\n          [wsChannel]=\"wsChannel\"\n        ></app-ws-data-control>\n\n      </mat-tab>\n\n      <mat-tab label=\"WS - Messaging\">\n        <!-- MESSAGING -->\n        <app-ws-messaging\n          [server]=\"server\"\n          [wsServer]=\"wsServer\"\n          [jwtToken]=\"jwtToken\"\n          [user]=\"user\"\n        ></app-ws-messaging>\n\n    </mat-tab>\n\n    <mat-tab label=\"WS - Notifications\">\n      <!-- WS - Notifications -->\n      <app-ws-notifications\n        [server]=\"server\"\n        [wsServer]=\"wsServer\"\n        [jwtToken]=\"jwtToken\"\n        [user]=\"user\"\n      ></app-ws-notifications>\n    </mat-tab>\n\n    <mat-tab label=\"WS - AI Messaging\" [disabled]=\"true\">\n      <!-- WS - AI Messaging -->\n      <app-ws-ai-messaging></app-ws-ai-messaging>\n    </mat-tab>\n\n  </mat-tab-group>\n</div>\n\n</div>\n\n", styles: [""], dependencies: [{ kind: "component", type: i1$3.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass"], exportAs: ["matTab"] }, { kind: "component", type: i1$3.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "fitInkBarToContent", "mat-stretch-tabs", "dynamicHeight", "selectedIndex", "headerPosition", "animationDuration", "contentTabIndex", "disablePagination", "disableRipple", "preserveContent", "backgroundColor", "aria-label", "aria-labelledby"], outputs: ["selectedIndexChange", "focusChange", "animationDone", "selectedTabChange"], exportAs: ["matTabGroup"] }, { kind: "component", type: i9$1.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "component", type: i3$2.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "component", type: WsDataControlComponent, selector: "app-ws-data-control", inputs: ["server", "wsServer", "jwtToken", "user", "path", "wsChannel"] }, { kind: "component", type: WsMessagingComponent, selector: "app-ws-messaging", inputs: ["server", "wsServer", "jwtToken", "user"] }, { kind: "component", type: WsNotificationsComponent, selector: "app-ws-notifications", inputs: ["server", "wsServer", "jwtToken", "user"] }, { kind: "component", type: WsAiMessagingComponent, selector: "app-ws-ai-messaging" }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: RequestManagerWsDemoComponent, selector: "app-request-manager-ws-demo", inputs: { server: "server", wsServer: "wsServer", jwtToken: "jwtToken", user: "user", path: "path", wsChannel: "wsChannel" }, ngImport: i0, template: "<div style=\"margin: 2rem;\">\n\n  <h2 style=\"display: flex;\">\n    <span style=\"flex:1\">HTTP Request State Manager - Websockets</span>\n    @if ((connectionStatus$ | async); as connected) {\n      <span>\n        WS -\n        <span style=\"color: green;\">Connected</span>\n      </span>\n    } @else {\n      <span style=\"color: red;\">Disconnected {{ attempts$ | async }} - {{ nextRetry$ |async }}</span>\n    }\n  </h2>\n\n  <div>\n\n    @if ((user$ | async); as userInfo) {\n      <div>\n        <mat-toolbar>\n          <div style=\"display: flex; flex:1\">\n            <div style=\"flex:1\">{{ userInfo.name }}</div>\n            <div>({{ userInfo.ldap }})</div>\n          </div>\n        </mat-toolbar>\n      </div>\n    }\n\n    @if ((isPending$ | async)) {\n      <div>\n        <mat-progress-bar mode=\"indeterminate\"></mat-progress-bar>\n      </div>\n    }\n\n    <mat-tab-group animationDuration=\"0ms\" [selectedIndex]=\"1\">\n\n      <mat-tab label=\"WS - Data Control\">\n        <!-- DATA CONTROL -->\n        <app-ws-data-control\n          [server]=\"server\"\n          [wsServer]=\"wsServer\"\n          [jwtToken]=\"jwtToken\"\n          [user]=\"user\"\n          [path]=\"path\"\n          [wsChannel]=\"wsChannel\"\n        ></app-ws-data-control>\n\n      </mat-tab>\n\n      <mat-tab label=\"WS - Messaging\">\n        <!-- MESSAGING -->\n        <app-ws-messaging\n          [server]=\"server\"\n          [wsServer]=\"wsServer\"\n          [jwtToken]=\"jwtToken\"\n          [user]=\"user\"\n        ></app-ws-messaging>\n\n    </mat-tab>\n\n    <mat-tab label=\"WS - Notifications\">\n      <!-- WS - Notifications -->\n      <app-ws-notifications\n        [server]=\"server\"\n        [wsServer]=\"wsServer\"\n        [jwtToken]=\"jwtToken\"\n        [user]=\"user\"\n      ></app-ws-notifications>\n    </mat-tab>\n\n    <mat-tab label=\"WS - Chats\" [disabled]=\"true\">\n      <!-- WS - Chats -->\n      <app-ws-chats></app-ws-chats>\n    </mat-tab>\n\n    <mat-tab label=\"WS - AI Messaging\" [disabled]=\"true\">\n      <!-- WS - AI Messaging -->\n      <app-ws-ai-messaging></app-ws-ai-messaging>\n    </mat-tab>\n\n  </mat-tab-group>\n</div>\n\n</div>\n\n", styles: [""], dependencies: [{ kind: "component", type: i1$3.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass"], exportAs: ["matTab"] }, { kind: "component", type: i1$3.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "fitInkBarToContent", "mat-stretch-tabs", "dynamicHeight", "selectedIndex", "headerPosition", "animationDuration", "contentTabIndex", "disablePagination", "disableRipple", "preserveContent", "backgroundColor", "aria-label", "aria-labelledby"], outputs: ["selectedIndexChange", "focusChange", "animationDone", "selectedTabChange"], exportAs: ["matTabGroup"] }, { kind: "component", type: i9$1.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "component", type: i3$2.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "component", type: WsDataControlComponent, selector: "app-ws-data-control", inputs: ["server", "wsServer", "jwtToken", "user", "path", "wsChannel"] }, { kind: "component", type: WsMessagingComponent, selector: "app-ws-messaging", inputs: ["server", "wsServer", "jwtToken", "user"] }, { kind: "component", type: WsNotificationsComponent, selector: "app-ws-notifications", inputs: ["server", "wsServer", "jwtToken", "user"] }, { kind: "component", type: WsAiMessagingComponent, selector: "app-ws-ai-messaging" }, { kind: "component", type: WsChatsComponent, selector: "app-ws-chats" }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: RequestManagerWsDemoComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-request-manager-ws-demo', standalone: false, template: "<div style=\"margin: 2rem;\">\n\n  <h2 style=\"display: flex;\">\n    <span style=\"flex:1\">HTTP Request State Manager - Websockets</span>\n    @if ((connectionStatus$ | async); as connected) {\n      <span>\n        WS -\n        <span style=\"color: green;\">Connected</span>\n      </span>\n    } @else {\n      <span style=\"color: red;\">Disconnected {{ attempts$ | async }} - {{ nextRetry$ |async }}</span>\n    }\n  </h2>\n\n  <div>\n\n    @if ((user$ | async); as userInfo) {\n      <div>\n        <mat-toolbar>\n          <div style=\"display: flex; flex:1\">\n            <div style=\"flex:1\">{{ userInfo.name }}</div>\n            <div>({{ userInfo.ldap }})</div>\n          </div>\n        </mat-toolbar>\n      </div>\n    }\n\n    @if ((isPending$ | async)) {\n      <div>\n        <mat-progress-bar mode=\"indeterminate\"></mat-progress-bar>\n      </div>\n    }\n\n    <mat-tab-group animationDuration=\"0ms\" [selectedIndex]=\"1\">\n\n      <mat-tab label=\"WS - Data Control\">\n        <!-- DATA CONTROL -->\n        <app-ws-data-control\n          [server]=\"server\"\n          [wsServer]=\"wsServer\"\n          [jwtToken]=\"jwtToken\"\n          [user]=\"user\"\n          [path]=\"path\"\n          [wsChannel]=\"wsChannel\"\n        ></app-ws-data-control>\n\n      </mat-tab>\n\n      <mat-tab label=\"WS - Messaging\">\n        <!-- MESSAGING -->\n        <app-ws-messaging\n          [server]=\"server\"\n          [wsServer]=\"wsServer\"\n          [jwtToken]=\"jwtToken\"\n          [user]=\"user\"\n        ></app-ws-messaging>\n\n    </mat-tab>\n\n    <mat-tab label=\"WS - Notifications\">\n      <!-- WS - Notifications -->\n      <app-ws-notifications\n        [server]=\"server\"\n        [wsServer]=\"wsServer\"\n        [jwtToken]=\"jwtToken\"\n        [user]=\"user\"\n      ></app-ws-notifications>\n    </mat-tab>\n\n    <mat-tab label=\"WS - AI Messaging\" [disabled]=\"true\">\n      <!-- WS - AI Messaging -->\n      <app-ws-ai-messaging></app-ws-ai-messaging>\n    </mat-tab>\n\n  </mat-tab-group>\n</div>\n\n</div>\n\n" }]
+            args: [{ selector: 'app-request-manager-ws-demo', standalone: false, template: "<div style=\"margin: 2rem;\">\n\n  <h2 style=\"display: flex;\">\n    <span style=\"flex:1\">HTTP Request State Manager - Websockets</span>\n    @if ((connectionStatus$ | async); as connected) {\n      <span>\n        WS -\n        <span style=\"color: green;\">Connected</span>\n      </span>\n    } @else {\n      <span style=\"color: red;\">Disconnected {{ attempts$ | async }} - {{ nextRetry$ |async }}</span>\n    }\n  </h2>\n\n  <div>\n\n    @if ((user$ | async); as userInfo) {\n      <div>\n        <mat-toolbar>\n          <div style=\"display: flex; flex:1\">\n            <div style=\"flex:1\">{{ userInfo.name }}</div>\n            <div>({{ userInfo.ldap }})</div>\n          </div>\n        </mat-toolbar>\n      </div>\n    }\n\n    @if ((isPending$ | async)) {\n      <div>\n        <mat-progress-bar mode=\"indeterminate\"></mat-progress-bar>\n      </div>\n    }\n\n    <mat-tab-group animationDuration=\"0ms\" [selectedIndex]=\"1\">\n\n      <mat-tab label=\"WS - Data Control\">\n        <!-- DATA CONTROL -->\n        <app-ws-data-control\n          [server]=\"server\"\n          [wsServer]=\"wsServer\"\n          [jwtToken]=\"jwtToken\"\n          [user]=\"user\"\n          [path]=\"path\"\n          [wsChannel]=\"wsChannel\"\n        ></app-ws-data-control>\n\n      </mat-tab>\n\n      <mat-tab label=\"WS - Messaging\">\n        <!-- MESSAGING -->\n        <app-ws-messaging\n          [server]=\"server\"\n          [wsServer]=\"wsServer\"\n          [jwtToken]=\"jwtToken\"\n          [user]=\"user\"\n        ></app-ws-messaging>\n\n    </mat-tab>\n\n    <mat-tab label=\"WS - Notifications\">\n      <!-- WS - Notifications -->\n      <app-ws-notifications\n        [server]=\"server\"\n        [wsServer]=\"wsServer\"\n        [jwtToken]=\"jwtToken\"\n        [user]=\"user\"\n      ></app-ws-notifications>\n    </mat-tab>\n\n    <mat-tab label=\"WS - Chats\" [disabled]=\"true\">\n      <!-- WS - Chats -->\n      <app-ws-chats></app-ws-chats>\n    </mat-tab>\n\n    <mat-tab label=\"WS - AI Messaging\" [disabled]=\"true\">\n      <!-- WS - AI Messaging -->\n      <app-ws-ai-messaging></app-ws-ai-messaging>\n    </mat-tab>\n\n  </mat-tab-group>\n</div>\n\n</div>\n\n" }]
         }], propDecorators: { server: [{
                 type: Input
             }], wsServer: [{
@@ -5968,7 +6012,8 @@ class HttpRequestManagerModule {
             WsDataControlComponent,
             WsMessagingComponent,
             WsNotificationsComponent,
-            WsAiMessagingComponent], imports: [CommonModule,
+            WsAiMessagingComponent,
+            WsChatsComponent], imports: [CommonModule,
             ToastMessageDisplayModule,
             FormsModule,
             ReactiveFormsModule,
@@ -6069,6 +6114,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                         WsMessagingComponent,
                         WsNotificationsComponent,
                         WsAiMessagingComponent,
+                        WsChatsComponent,
                     ],
                     exports: [
                         HttpRequestServicesDemoComponent,