http-request-manager 18.5.16 → 18.5.17

package/fesm2022/http-request-manager.mjs

@@ -2870,9 +2870,11 @@ class HTTPManagerStateService extends ComponentStore {
         this.wsConnection = false;
         this.wsOptions = WSOptions.adapt();
         // WebSocket
-        this.initWS = this.effect((wsOptions$) => wsOptions$.pipe(tap((wsOptions) => {
-            this.wsOptions = wsOptions;
-        }), switchMap((wsOptions) => merge(this.httpManagerService.connectionStatus$.pipe(tap((isConnected) => {
+        this.initWS = this.effect((wsOptions$) => wsOptions$.pipe(
+        // tap((wsOptions) => { debugger
+        //   this.wsOptions = wsOptions
+        // }),
+        switchMap((wsOptions) => merge(this.httpManagerService.connectionStatus$.pipe(tap((isConnected) => {
             this.wsConnection = isConnected;
         })), this.httpManagerService.messages$.pipe(tap((message) => {
             if (!message)
@@ -3228,7 +3230,6 @@ class HTTPManagerStateService extends ComponentStore {
         this.wsNextRetry = new BehaviorSubject(this.retryDelay);
         this.wsNextRetry$ = this.wsNextRetry.asObservable();
         this.setApiRequestOptions(apiOptions, dataType, database);
-        this.connectionStatus$ = this.setupConnectionStatus();
         if (this.databaseOptions && this.databaseOptions.table) {
             this.localStorageManagerService.createStore({
                 name: this.databaseOptions.table,
@@ -3238,6 +3239,7 @@ class HTTPManagerStateService extends ComponentStore {
                     encrypted: false,
                 })
             });
+            this.initDBStorage();
         }
     }
     setApiRequestOptions(apiOptions, dataType, database) {
@@ -3248,16 +3250,29 @@ class HTTPManagerStateService extends ComponentStore {
             this.hasDatabase = (database?.table) ? true : false;
             this.databaseOptions = (this.hasDatabase) ? DatabaseStorage.adapt(database) : undefined;
         }
-        // Update WebSocket retry settings when options change
-        if (this.apiOptions.ws?.retry) {
-            this.maxRetries = this.apiOptions.ws.retry.times || 3;
-            this.retryDelay = (this.apiOptions.ws.retry.delay && this.apiOptions.ws.retry.delay * 1000) || 5 * 1000;
-            this.wsNextRetry.next(this.retryDelay);
-        }
-        if (this.databaseOptions)
-            this.initDBStorage();
-        if (this.apiOptions.ws)
+        if (this.apiOptions.ws && this.apiOptions.ws.id !== '') {
+            // Update WebSocket retry settings when options change
+            if (this.apiOptions.ws?.retry) {
+                this.maxRetries = this.apiOptions.ws.retry.times || 3;
+                this.retryDelay = (this.apiOptions.ws.retry.delay && this.apiOptions.ws.retry.delay * 1000) || 5 * 1000;
+                this.wsNextRetry.next(this.retryDelay);
+            }
+            // Validate wsServer before attempting connection
+            if (!this.apiOptions.ws.wsServer || this.apiOptions.ws.wsServer === '') {
+                console.error('WSOptions invalid: wsServer is missing or empty');
+                return;
+            }
+            // Setup connection status monitoring
+            this.connectionStatus$ = this.setupConnectionStatus();
+            // Make initial connection attempt
+            console.log('🔄 Initial WebSocket connection attempt...');
+            this.httpManagerService.connect(this.apiOptions.ws, this.apiOptions.ws.jwtToken || '');
+            // Initialize WS effect to handle messages
             this.initWS(this.apiOptions.ws);
+        }
+        else {
+            console.warn('WSOptions invalid Id: empty');
+        }
     }
     // WebSocket
     setupConnectionStatus() {
@@ -3283,11 +3298,16 @@ class HTTPManagerStateService extends ComponentStore {
                 const attempt = i + 1;
                 this.wsRetryAttempts.next(attempt);
                 countdownEnder$.next();
-                // Attempt connection on each retry
-                if (this.apiOptions.ws?.wsServer) {
-                    console.log(`🔄 Retry attempt #${attempt}/${this.maxRetries}`);
-                    this.httpManagerService.connect(this.apiOptions.ws, this.apiOptions.ws.jwtToken || '');
+                // Validate WS options; abort retries if invalid
+                const hasValidWS = !!(this.apiOptions.ws && this.apiOptions.ws.wsServer && this.apiOptions.ws.wsServer !== '');
+                if (!hasValidWS) {
+                    this.shouldRetry = false;
+                    this.wsNextRetry.next(0);
+                    this.wsRetryAttempts.next(0);
+                    return; // Skip connect and countdown
                 }
+                console.log(`🔄 Retry attempt #${attempt}/${this.maxRetries}`);
+                this.httpManagerService.connect(this.apiOptions.ws, this.apiOptions.ws.jwtToken || '');
                 if (attempt === this.maxRetries) {
                     this.wsNextRetry.next(0);
                     //   console.error(`🚨 FAILED CONNECTION: Tried #${attempt} times`);
@@ -3382,7 +3402,6 @@ class HTTPManagerStateService extends ComponentStore {
         const messageInfo = ChannelMessage.adapt({ ...message, fromUser: user });
         if (this.wsConnection && this.apiOptions.ws) {
             const wsServer = (channels) ? channels : this.apiOptions.ws.id;
-            debugger;
             // if(messageInfo.toUser === 'allChannels') {
             //   this.httpManagerService.sendBroadcast(messageInfo)
             // } else if(messageInfo.toUser === 'allInChannel') {
@@ -4031,18 +4050,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                     args: [CONFIG_SETTINGS_TOKEN]
                 }] }] });
 
-class UserData {
-    constructor(ldap = '', name = '', email = '') {
-        this.ldap = ldap;
-        this.name = name;
-        this.email = email;
-    }
-    static adapt(item) {
-        const userName = `${item?.first_name} ${item?.last_name}`;
-        return new UserData(item?.ldap, userName, item?.email);
-    }
-}
-
 class OIDCClient {
     constructor(spiffe = '', id = 0, first_name = '', last_name = '', email = '') {
         this.spiffe = spiffe;
@@ -4065,18 +4072,6 @@ class StateRequestServiceDemo extends HTTPManagerStateService {
                 delay: 1,
             }),
             adapter: OIDCClient.adapt,
-            ws: {
-                id: ``,
-                // wsChannels: ['allChannels'],
-                // access: ['read,write,delete,update'],
-                wsServer: '',
-                jwtToken: '',
-                user: UserData.adapt(),
-                retry: RetryOptions.adapt({
-                    times: 3,
-                    delay: 10,
-                }),
-            }
         }), DataType.ARRAY, DatabaseStorage.adapt({
             table: 'ws_demo_data',
             expiresIn: '5mn',
@@ -4093,7 +4088,7 @@ class StateRequestServiceDemo extends HTTPManagerStateService {
             }),
             adapter: OIDCClient.adapt,
             ws: {
-                id: 'WS-USERS',
+                id: 'WS-USERS123',
                 wsServer,
                 jwtToken,
                 user, // user object
@@ -4126,6 +4121,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                 }]
         }], ctorParameters: () => [] });
 
+class UserData {
+    constructor(ldap = '', name = '', email = '') {
+        this.ldap = ldap;
+        this.name = name;
+        this.email = email;
+    }
+    static adapt(item) {
+        const userName = `${item?.first_name} ${item?.last_name}`;
+        return new UserData(item?.ldap, userName, item?.email);
+    }
+}
+
 class StateDataRequestService extends HTTPManagerStateService {
     constructor() {
         super(ApiRequest.adapt({
@@ -4154,9 +4161,8 @@ class StateDataRequestService extends HTTPManagerStateService {
         this.attempts$ = this.wsRetryAttempts$;
         this.nextRetry$ = this.wsNextRetry$;
         this.path = ['ai', 'tests'];
-        this.wsChannel = 'WS-USERS';
     }
-    updateConnection(server, wsServer, jwtToken, user, path = ['ai', 'tests'], wsChannel = '') {
+    updateConnection(server, wsServer, jwtToken, user, path = [], wsChannel = '') {
         this.path = path;
         this.setApiRequestOptions({
             server,
@@ -4274,115 +4280,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                 type: Input
             }] } });
 
-class WsMessagingComponent {
-    constructor() {
-        this.fb = inject(FormBuilder);
-        this.stateRequestServiceDemo = inject(StateRequestServiceDemo);
-        this.channels$ = this.stateRequestServiceDemo.channels$;
-        this.user$ = this.stateRequestServiceDemo.user$;
-        this.users$ = this.stateRequestServiceDemo.userList$;
-        this.data$ = this.stateRequestServiceDemo.data$;
-        this.connectionStatus$ = this.stateRequestServiceDemo.connectionStatus$;
-        this.messages = this.fb.group({
-            channels: this.fb.control(null, Validators.required),
-            toUsers: this.fb.control(null, Validators.required),
-            content: this.fb.control(null, Validators.required),
-        });
-        this.communicationMessages$ = this.stateRequestServiceDemo.communicationMessages$;
-        this.latestCommunicationMessages$ = this.stateRequestServiceDemo.latestCommunicationMessages$;
-        this.chat$ = combineLatest([this.user$, this.communicationMessages$])
-            .pipe(map$1(([user, messages]) => ({ user, messages })), map$1(obj => {
-            if (!obj.user)
-                return EMPTY;
-            // const mainUser = UserName.adapt({
-            //     id: obj.user.username,
-            //     first: obj.user?.name?.first,
-            //     last: obj.user?.name?.last,
-            // })
-            const mainUser = '';
-            const messages = obj.messages.map((item) => {
-                if (item.toUser === 'allChannels') {
-                    // item.toUser = UserName.adapt({
-                    //     id: '',
-                    //     first: 'All Users',
-                    //     last: '',
-                    // })
-                }
-                // return Message.adapt({
-                //     fromUser: {
-                //       id: item.fromUser.username,
-                //       first: item.fromUser?.name?.first,
-                //       last: item.fromUser?.name?.last,
-                //     },
-                //     toUser: {
-                //       id: item.toUser.username,
-                //       first: item.toUser?.name?.first,
-                //       last: item.toUser?.name?.last,
-                //     },
-                //     content: item.content,
-                //     date: item.issued,
-                // })
-            });
-            return { user: mainUser, messages };
-        }));
-    }
-    get channels() {
-        return this.messages.get('channels');
-    }
-    get toUsers() {
-        return this.messages.get('toUsers');
-    }
-    get content() {
-        return this.messages.get('content');
-    }
-    get isValid() {
-        return this.toUsers.valid;
-    }
-    ngOnInit() {
-        this.stateRequestServiceDemo.updateConnection(this.server, this.wsServer, this.jwtToken, this.user);
-        // this.stateRequestServiceDemo.getData()
-        this.connectionStatus$
-            .subscribe(status => {
-            this.stateRequestServiceDemo.getAllChannels();
-        });
-    }
-    onSendMessage(user) {
-        this.messages.markAllAsTouched();
-        if (this.messages.invalid)
-            return;
-        const message = ChannelMessage.adapt({
-            message: this.messages.value.content,
-            ...user,
-            users: this.toUsers.value,
-        });
-        this.stateRequestServiceDemo.sendMessage(message);
-        this.content.reset();
-    }
-    onSendAlert() {
-        debugger;
-        this.messages.markAllAsTouched();
-        if (this.messages.invalid)
-            return;
-        const message = ChannelMessage.adapt({ ...this.messages.value, type: CommunicationType.ALERT });
-        this.stateRequestServiceDemo.sendMessage(message);
-        this.content.reset();
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: WsMessagingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: WsMessagingComponent, selector: "app-ws-messaging", inputs: { server: "server", wsServer: "wsServer", jwtToken: "jwtToken", user: "user" }, ngImport: i0, template: "\n  @if ((data$ | async); as data) {\n    <div style=\"margin: 1rem; display: flex; gap: 1rem; flex-direction: column;\">\n        <div>\n\n          <div>\n            <div style=\"display: flex; gap: 1rem\">\n              <div style=\"flex:1\" [formGroup]=\"messages\">\n\n                <div style=\"display:flex; gap: 1rem\">\n                  @if ((channels$ | async); as channels) {\n                    <mat-form-field style=\"flex:1\" appearance=\"outline\">\n                    <mat-label>Channels</mat-label>\n                    <mat-select formControlName=\"channels\" multiple #channelsSelect>\n                      <mat-select-trigger>\n                      {{ (channelsSelect.value?.[0] === 'allChannels' ? 'All Channels' : channelsSelect.value?.[0]?.content?.name) || '' }}\n                      @if ((channelsSelect.value?.length || 0) > 1) {\n                        <span>\n                        (+{{(channelsSelect.value?.length || 0) - 1}} {{channelsSelect.value?.length === 2 ? 'other' : 'others'}})\n                        </span>\n                      }\n                      </mat-select-trigger>\n                      <mat-option value=\"allChannels\">\n                      All Channels\n                      </mat-option>\n                      @for (channel of channels; track channel) {\n                      <mat-option [value]=\"channel\">\n                        {{ channel }}\n                      </mat-option>\n                      }\n                    </mat-select>\n                    </mat-form-field>\n                  }\n                  @if ((users$ | async); as users) {\n                    <mat-form-field style=\"flex:1\" appearance=\"outline\">\n                    <mat-label>Users</mat-label>\n                    <mat-select formControlName=\"toUsers\" multiple #userSelect>\n                      <mat-select-trigger>\n                      {{ (userSelect.value?.[0] === 'allUsers' ? 'All Users' : userSelect.value?.[0]?.content?.name) || '' }}\n                      @if ((userSelect.value?.length || 0) > 1) {\n                        <span>\n                        (+{{(userSelect.value?.length || 0) - 1}} {{userSelect.value?.length === 2 ? 'other' : 'others'}})\n                        </span>\n                      }\n                      </mat-select-trigger>\n                      <mat-option value=\"allChannels\">\n                      All Users\n                      </mat-option>\n                      @for (user of users; track user) {\n                        <mat-option [value]=\"user\">\n                          {{ user.content.name }}\n                        </mat-option>\n                      }\n                    </mat-select>\n                    </mat-form-field>\n                  }\n                </div>\n\n                @if ((users$ | async); as users) {\n                  <div style=\"display:flex\">\n                    <mat-form-field style=\"flex:1\" appearance=\"outline\">\n                      <mat-label>Send a Message</mat-label>\n                      <textarea\n                        matInput placeholder=\"Ex. It makes me feel...\"\n                        formControlName=\"content\"\n                        (keydown.enter)=\"onSendMessage(user); $event.preventDefault()\"\n                        [disabled]=\"!isValid\"\n                      ></textarea>\n                    </mat-form-field>\n                  </div>\n                }\n\n                <div style=\"display:flex; gap: .5rem;\">\n                  <div style=\"flex:1\"></div>\n                  <button mat-stroked-button (click)=\"onSendAlert()\" color=\"warn\">\n                    Send Alert\n                  </button>\n                  <button mat-stroked-button (click)=\"onSendMessage(user)\">\n                    Send Message\n                  </button>\n                </div>\n              </div>\n            </div>\n            @if ((chat$ | async); as chat) {\n              <div style=\"border: thin gray solid; padding: 1rem; margin-top: 1rem;\">\n                  <!-- <app-messenger-chat\n                  [user]=\"chat.user\"\n                  [messages]=\"chat.messages\"\n                ></app-messenger-chat> -->\n              </div>\n            }\n          </div>\n\n      </div>\n  </div>\n  }\n\n\n  {{ channels$ | async | json }}\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.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: "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: "directive", type: i4.MatSelectTrigger, selector: "mat-select-trigger" }, { kind: "component", type: i5.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { 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: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$1.JsonPipe, name: "json" }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: WsMessagingComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'app-ws-messaging', standalone: false, template: "\n  @if ((data$ | async); as data) {\n    <div style=\"margin: 1rem; display: flex; gap: 1rem; flex-direction: column;\">\n        <div>\n\n          <div>\n            <div style=\"display: flex; gap: 1rem\">\n              <div style=\"flex:1\" [formGroup]=\"messages\">\n\n                <div style=\"display:flex; gap: 1rem\">\n                  @if ((channels$ | async); as channels) {\n                    <mat-form-field style=\"flex:1\" appearance=\"outline\">\n                    <mat-label>Channels</mat-label>\n                    <mat-select formControlName=\"channels\" multiple #channelsSelect>\n                      <mat-select-trigger>\n                      {{ (channelsSelect.value?.[0] === 'allChannels' ? 'All Channels' : channelsSelect.value?.[0]?.content?.name) || '' }}\n                      @if ((channelsSelect.value?.length || 0) > 1) {\n                        <span>\n                        (+{{(channelsSelect.value?.length || 0) - 1}} {{channelsSelect.value?.length === 2 ? 'other' : 'others'}})\n                        </span>\n                      }\n                      </mat-select-trigger>\n                      <mat-option value=\"allChannels\">\n                      All Channels\n                      </mat-option>\n                      @for (channel of channels; track channel) {\n                      <mat-option [value]=\"channel\">\n                        {{ channel }}\n                      </mat-option>\n                      }\n                    </mat-select>\n                    </mat-form-field>\n                  }\n                  @if ((users$ | async); as users) {\n                    <mat-form-field style=\"flex:1\" appearance=\"outline\">\n                    <mat-label>Users</mat-label>\n                    <mat-select formControlName=\"toUsers\" multiple #userSelect>\n                      <mat-select-trigger>\n                      {{ (userSelect.value?.[0] === 'allUsers' ? 'All Users' : userSelect.value?.[0]?.content?.name) || '' }}\n                      @if ((userSelect.value?.length || 0) > 1) {\n                        <span>\n                        (+{{(userSelect.value?.length || 0) - 1}} {{userSelect.value?.length === 2 ? 'other' : 'others'}})\n                        </span>\n                      }\n                      </mat-select-trigger>\n                      <mat-option value=\"allChannels\">\n                      All Users\n                      </mat-option>\n                      @for (user of users; track user) {\n                        <mat-option [value]=\"user\">\n                          {{ user.content.name }}\n                        </mat-option>\n                      }\n                    </mat-select>\n                    </mat-form-field>\n                  }\n                </div>\n\n                @if ((users$ | async); as users) {\n                  <div style=\"display:flex\">\n                    <mat-form-field style=\"flex:1\" appearance=\"outline\">\n                      <mat-label>Send a Message</mat-label>\n                      <textarea\n                        matInput placeholder=\"Ex. It makes me feel...\"\n                        formControlName=\"content\"\n                        (keydown.enter)=\"onSendMessage(user); $event.preventDefault()\"\n                        [disabled]=\"!isValid\"\n                      ></textarea>\n                    </mat-form-field>\n                  </div>\n                }\n\n                <div style=\"display:flex; gap: .5rem;\">\n                  <div style=\"flex:1\"></div>\n                  <button mat-stroked-button (click)=\"onSendAlert()\" color=\"warn\">\n                    Send Alert\n                  </button>\n                  <button mat-stroked-button (click)=\"onSendMessage(user)\">\n                    Send Message\n                  </button>\n                </div>\n              </div>\n            </div>\n            @if ((chat$ | async); as chat) {\n              <div style=\"border: thin gray solid; padding: 1rem; margin-top: 1rem;\">\n                  <!-- <app-messenger-chat\n                  [user]=\"chat.user\"\n                  [messages]=\"chat.messages\"\n                ></app-messenger-chat> -->\n              </div>\n            }\n          </div>\n\n      </div>\n  </div>\n  }\n\n\n  {{ channels$ | async | json }}\n" }]
-        }], propDecorators: { server: [{
-                type: Input
-            }], wsServer: [{
-                type: Input
-            }], jwtToken: [{
-                type: Input
-            }], user: [{
-                type: Input
-            }] } });
-
 class WsNotificationsComponent {
     constructor() { }
     ngOnInit() {
@@ -4481,11 +4378,11 @@ class RequestManagerWsDemoComponent {
         //   this.stateRequestServiceDemo.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.content.name }}</div>\n            <div>({{ userInfo.content.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\" [disabled]=\"true\">\n      <!-- WS - Custom Messaging -->\n      <app-ws-notifications></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.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" }, { 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.content.name }}</div>\n            <div>({{ userInfo.content.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\" [disabled]=\"true\">\n      <!-- WS - Custom Messaging -->\n      <app-ws-notifications></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.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: WsNotificationsComponent, selector: "app-ws-notifications" }, { kind: "component", type: WsAiMessagingComponent, selector: "app-ws-ai-messaging" }, { 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.content.name }}</div>\n            <div>({{ userInfo.content.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\" [disabled]=\"true\">\n      <!-- WS - Custom Messaging -->\n      <app-ws-notifications></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.content.name }}</div>\n            <div>({{ userInfo.content.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\" [disabled]=\"true\">\n      <!-- WS - Custom Messaging -->\n      <app-ws-notifications></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" }]
         }], propDecorators: { server: [{
                 type: Input
             }], wsServer: [{
@@ -4918,6 +4815,117 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
             args: [{ selector: 'app-store-state-manager-demo', providers: [SettingsStateService], standalone: false, template: "<div style=\"margin: 2rem;\">\n\n  <h2>\n    <span>Store State Manager</span>\n    <span style=\"margin-left: .5rem;\">\n      <mat-icon color=\"accent\">fiber_new</mat-icon>\n    </span>\n  </h2>\n\n  {{ dataState$ | async | json}}\n\n  <div style=\"display: flex; gap:.5rem; margin-top: 1rem; margin-bottom: 1rem;\">\n    <button mat-stroked-button (click)=\"onUpdateEnum_1()\">Update Start</button>\n    <button mat-stroked-button (click)=\"onUpdateEnum_2()\">Update End</button>\n    <button mat-stroked-button (click)=\"onGetEnum_1()\">Dump</button>\n  </div>\n\n  <div>\n    <h3 style=\"margin: 0;\">Enum 1</h3>\n    {{ dataEnum$ | async | json}}\n  </div>\n\n</div>\n" }]
         }] });
 
+class WsMessagingComponent {
+    constructor() {
+        this.fb = inject(FormBuilder);
+        this.stateRequestServiceDemo = inject(StateRequestServiceDemo);
+        this.channels$ = this.stateRequestServiceDemo.channels$;
+        this.user$ = this.stateRequestServiceDemo.user$;
+        this.users$ = this.stateRequestServiceDemo.userList$;
+        this.data$ = this.stateRequestServiceDemo.data$;
+        this.connectionStatus$ = this.stateRequestServiceDemo.connectionStatus$;
+        this.messages = this.fb.group({
+            channels: this.fb.control(null, Validators.required),
+            toUsers: this.fb.control(null, Validators.required),
+            content: this.fb.control(null, Validators.required),
+        });
+        this.communicationMessages$ = this.stateRequestServiceDemo.communicationMessages$;
+        this.latestCommunicationMessages$ = this.stateRequestServiceDemo.latestCommunicationMessages$;
+        this.chat$ = combineLatest([this.user$, this.communicationMessages$])
+            .pipe(map$1(([user, messages]) => ({ user, messages })), map$1(obj => {
+            if (!obj.user)
+                return EMPTY;
+            // const mainUser = UserName.adapt({
+            //     id: obj.user.username,
+            //     first: obj.user?.name?.first,
+            //     last: obj.user?.name?.last,
+            // })
+            const mainUser = '';
+            const messages = obj.messages.map((item) => {
+                if (item.toUser === 'allChannels') {
+                    // item.toUser = UserName.adapt({
+                    //     id: '',
+                    //     first: 'All Users',
+                    //     last: '',
+                    // })
+                }
+                // return Message.adapt({
+                //     fromUser: {
+                //       id: item.fromUser.username,
+                //       first: item.fromUser?.name?.first,
+                //       last: item.fromUser?.name?.last,
+                //     },
+                //     toUser: {
+                //       id: item.toUser.username,
+                //       first: item.toUser?.name?.first,
+                //       last: item.toUser?.name?.last,
+                //     },
+                //     content: item.content,
+                //     date: item.issued,
+                // })
+            });
+            return { user: mainUser, messages };
+        }));
+    }
+    get channels() {
+        return this.messages.get('channels');
+    }
+    get toUsers() {
+        return this.messages.get('toUsers');
+    }
+    get content() {
+        return this.messages.get('content');
+    }
+    get isValid() {
+        return this.toUsers.valid;
+    }
+    ngOnInit() {
+        this.stateRequestServiceDemo.updateConnection(this.server, this.wsServer, this.jwtToken, this.user);
+        // this.stateRequestServiceDemo.getData()
+        if (this.connectionStatus$) {
+            this.connectionStatus$
+                .subscribe(status => {
+                this.stateRequestServiceDemo.getAllChannels();
+            });
+        }
+    }
+    onSendMessage(user) {
+        this.messages.markAllAsTouched();
+        if (this.messages.invalid)
+            return;
+        const message = ChannelMessage.adapt({
+            message: this.messages.value.content,
+            ...user,
+            users: this.toUsers.value,
+        });
+        this.stateRequestServiceDemo.sendMessage(message);
+        this.content.reset();
+    }
+    onSendAlert() {
+        debugger;
+        this.messages.markAllAsTouched();
+        if (this.messages.invalid)
+            return;
+        const message = ChannelMessage.adapt({ ...this.messages.value, type: CommunicationType.ALERT });
+        this.stateRequestServiceDemo.sendMessage(message);
+        this.content.reset();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: WsMessagingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: WsMessagingComponent, selector: "app-ws-messaging", inputs: { server: "server", wsServer: "wsServer", jwtToken: "jwtToken", user: "user" }, ngImport: i0, template: "\n  @if ((data$ | async); as data) {\n    <div style=\"margin: 1rem; display: flex; gap: 1rem; flex-direction: column;\">\n        <div>\n\n          <div>\n            <div style=\"display: flex; gap: 1rem\">\n              <div style=\"flex:1\" [formGroup]=\"messages\">\n\n                <div style=\"display:flex; gap: 1rem\">\n                  @if ((channels$ | async); as channels) {\n                    <mat-form-field style=\"flex:1\" appearance=\"outline\">\n                    <mat-label>Channels</mat-label>\n                    <mat-select formControlName=\"channels\" multiple #channelsSelect>\n                      <mat-select-trigger>\n                      {{ (channelsSelect.value?.[0] === 'allChannels' ? 'All Channels' : channelsSelect.value?.[0]?.content?.name) || '' }}\n                      @if ((channelsSelect.value?.length || 0) > 1) {\n                        <span>\n                        (+{{(channelsSelect.value?.length || 0) - 1}} {{channelsSelect.value?.length === 2 ? 'other' : 'others'}})\n                        </span>\n                      }\n                      </mat-select-trigger>\n                      <mat-option value=\"allChannels\">\n                      All Channels\n                      </mat-option>\n                      @for (channel of channels; track channel) {\n                      <mat-option [value]=\"channel\">\n                        {{ channel }}\n                      </mat-option>\n                      }\n                    </mat-select>\n                    </mat-form-field>\n                  }\n                  @if ((users$ | async); as users) {\n                    <mat-form-field style=\"flex:1\" appearance=\"outline\">\n                    <mat-label>Users</mat-label>\n                    <mat-select formControlName=\"toUsers\" multiple #userSelect>\n                      <mat-select-trigger>\n                      {{ (userSelect.value?.[0] === 'allUsers' ? 'All Users' : userSelect.value?.[0]?.content?.name) || '' }}\n                      @if ((userSelect.value?.length || 0) > 1) {\n                        <span>\n                        (+{{(userSelect.value?.length || 0) - 1}} {{userSelect.value?.length === 2 ? 'other' : 'others'}})\n                        </span>\n                      }\n                      </mat-select-trigger>\n                      <mat-option value=\"allChannels\">\n                      All Users\n                      </mat-option>\n                      @for (user of users; track user) {\n                        <mat-option [value]=\"user\">\n                          {{ user.content.name }}\n                        </mat-option>\n                      }\n                    </mat-select>\n                    </mat-form-field>\n                  }\n                </div>\n\n                @if ((users$ | async); as users) {\n                  <div style=\"display:flex\">\n                    <mat-form-field style=\"flex:1\" appearance=\"outline\">\n                      <mat-label>Send a Message</mat-label>\n                      <textarea\n                        matInput placeholder=\"Ex. It makes me feel...\"\n                        formControlName=\"content\"\n                        (keydown.enter)=\"onSendMessage(user); $event.preventDefault()\"\n                        [disabled]=\"!isValid\"\n                      ></textarea>\n                    </mat-form-field>\n                  </div>\n                }\n\n                <div style=\"display:flex; gap: .5rem;\">\n                  <div style=\"flex:1\"></div>\n                  <button mat-stroked-button (click)=\"onSendAlert()\" color=\"warn\">\n                    Send Alert\n                  </button>\n                  <button mat-stroked-button (click)=\"onSendMessage(user)\">\n                    Send Message\n                  </button>\n                </div>\n              </div>\n            </div>\n            @if ((chat$ | async); as chat) {\n              <div style=\"border: thin gray solid; padding: 1rem; margin-top: 1rem;\">\n                  <!-- <app-messenger-chat\n                  [user]=\"chat.user\"\n                  [messages]=\"chat.messages\"\n                ></app-messenger-chat> -->\n              </div>\n            }\n          </div>\n\n      </div>\n  </div>\n  }\n\n\n  {{ channels$ | async | json }}\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.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: "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: "directive", type: i4.MatSelectTrigger, selector: "mat-select-trigger" }, { kind: "component", type: i5.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { 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: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$1.JsonPipe, name: "json" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: WsMessagingComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-ws-messaging', standalone: false, template: "\n  @if ((data$ | async); as data) {\n    <div style=\"margin: 1rem; display: flex; gap: 1rem; flex-direction: column;\">\n        <div>\n\n          <div>\n            <div style=\"display: flex; gap: 1rem\">\n              <div style=\"flex:1\" [formGroup]=\"messages\">\n\n                <div style=\"display:flex; gap: 1rem\">\n                  @if ((channels$ | async); as channels) {\n                    <mat-form-field style=\"flex:1\" appearance=\"outline\">\n                    <mat-label>Channels</mat-label>\n                    <mat-select formControlName=\"channels\" multiple #channelsSelect>\n                      <mat-select-trigger>\n                      {{ (channelsSelect.value?.[0] === 'allChannels' ? 'All Channels' : channelsSelect.value?.[0]?.content?.name) || '' }}\n                      @if ((channelsSelect.value?.length || 0) > 1) {\n                        <span>\n                        (+{{(channelsSelect.value?.length || 0) - 1}} {{channelsSelect.value?.length === 2 ? 'other' : 'others'}})\n                        </span>\n                      }\n                      </mat-select-trigger>\n                      <mat-option value=\"allChannels\">\n                      All Channels\n                      </mat-option>\n                      @for (channel of channels; track channel) {\n                      <mat-option [value]=\"channel\">\n                        {{ channel }}\n                      </mat-option>\n                      }\n                    </mat-select>\n                    </mat-form-field>\n                  }\n                  @if ((users$ | async); as users) {\n                    <mat-form-field style=\"flex:1\" appearance=\"outline\">\n                    <mat-label>Users</mat-label>\n                    <mat-select formControlName=\"toUsers\" multiple #userSelect>\n                      <mat-select-trigger>\n                      {{ (userSelect.value?.[0] === 'allUsers' ? 'All Users' : userSelect.value?.[0]?.content?.name) || '' }}\n                      @if ((userSelect.value?.length || 0) > 1) {\n                        <span>\n                        (+{{(userSelect.value?.length || 0) - 1}} {{userSelect.value?.length === 2 ? 'other' : 'others'}})\n                        </span>\n                      }\n                      </mat-select-trigger>\n                      <mat-option value=\"allChannels\">\n                      All Users\n                      </mat-option>\n                      @for (user of users; track user) {\n                        <mat-option [value]=\"user\">\n                          {{ user.content.name }}\n                        </mat-option>\n                      }\n                    </mat-select>\n                    </mat-form-field>\n                  }\n                </div>\n\n                @if ((users$ | async); as users) {\n                  <div style=\"display:flex\">\n                    <mat-form-field style=\"flex:1\" appearance=\"outline\">\n                      <mat-label>Send a Message</mat-label>\n                      <textarea\n                        matInput placeholder=\"Ex. It makes me feel...\"\n                        formControlName=\"content\"\n                        (keydown.enter)=\"onSendMessage(user); $event.preventDefault()\"\n                        [disabled]=\"!isValid\"\n                      ></textarea>\n                    </mat-form-field>\n                  </div>\n                }\n\n                <div style=\"display:flex; gap: .5rem;\">\n                  <div style=\"flex:1\"></div>\n                  <button mat-stroked-button (click)=\"onSendAlert()\" color=\"warn\">\n                    Send Alert\n                  </button>\n                  <button mat-stroked-button (click)=\"onSendMessage(user)\">\n                    Send Message\n                  </button>\n                </div>\n              </div>\n            </div>\n            @if ((chat$ | async); as chat) {\n              <div style=\"border: thin gray solid; padding: 1rem; margin-top: 1rem;\">\n                  <!-- <app-messenger-chat\n                  [user]=\"chat.user\"\n                  [messages]=\"chat.messages\"\n                ></app-messenger-chat> -->\n              </div>\n            }\n          </div>\n\n      </div>\n  </div>\n  }\n\n\n  {{ channels$ | async | json }}\n" }]
+        }], propDecorators: { server: [{
+                type: Input
+            }], wsServer: [{
+                type: Input
+            }], jwtToken: [{
+                type: Input
+            }], user: [{
+                type: Input
+            }] } });
+
 // import { MessengerChatModule } from 'src/app/components/messenger-chat/messenger-chat.module';
 // import { StoreStateManagerModule } from "src/app/beta_components/store-state-manager/store-state-manager.module";
 class HttpRequestManagerModule {