@rtsee/ngx 0.0.56 → 0.0.57

package/projects/ngx/src/lib/components/rtsee-container/rtsee-sidenav/rtsee-sidenav.component.html

@@ -0,0 +1,32 @@
+<div class="rtsee-sidenav"
+     [ngClass]="{'rtsee-sidenav-expanded': isExpanded}">
+  <div class="rtsee-sidenav-header">
+    <div class="rtsee-site-logo">
+      <a [routerLink]="['/']" class="rtsee-home-link">
+        <span class="rtsee-site-logo-wrapper" *ngIf="config.siteLogo">
+          <img [src]="config.siteLogo.src" [ngClass]="config.siteLogo.classNames" [alt]="config.siteLogo.alt">
+        </span>
+        <span class="rtsee-site-name">{{config.siteName}}</span>
+      </a>
+    </div>
+  </div>
+  <div class="rtsee-sidenav-body">
+    <div id="rtsee-nav-items-container">
+      <ul class="rtsee-nav-items">
+        <li *ngFor="let route of config.routes"
+            [ngClass]="{'rtsee-nav-item-hidden': !route.isEnabled}">
+          <a [routerLink]="route.link"
+             routerLinkActive="active"
+             class="rtsee-nav-item">
+            <span class="rtsee-nav-item-icon" [ngClass]="route.iconClassName"></span>
+            <span class="rtsee-nav-item-name">{{route.name}}</span>
+          </a>
+        </li>
+      </ul>
+    </div>
+  </div>
+  <div class="rtsee-sidenav-toggle" (click)="toggleButtonClicked()">
+    <i class="fa fa-angle-right sidenav-toggle-button" *ngIf="!isExpanded"></i>
+    <i class="fa fa-angle-left sidenav-toggle-button" *ngIf="isExpanded"></i>
+  </div>
+</div>

package/projects/ngx/src/lib/components/rtsee-container/rtsee-sidenav/rtsee-sidenav.component.ts

@@ -0,0 +1,26 @@
+import {Component, EventEmitter, Input, Output} from '@angular/core';
+import {INavigationConfig} from "@rtsee/factory";
+import {NgClass, NgForOf, NgIf} from "@angular/common";
+import {RouterLink} from "@angular/router";
+
+
+@Component({
+  selector: 'rtsee-sidenav',
+  templateUrl: './rtsee-sidenav.component.html',
+  imports: [
+    NgClass,
+    RouterLink,
+    NgIf,
+    NgForOf
+  ],
+  standalone: true
+})
+export class RtseeSidenavComponent {
+  @Input() public config!: INavigationConfig;
+  @Input() isExpanded!: boolean;
+  @Output() toggleClicked = new EventEmitter<boolean>();
+
+  toggleButtonClicked() {
+    this.toggleClicked.emit(true);
+  }
+}

package/projects/ngx/src/lib/components/rtsee-events-dashboard/components/event-thumbnail/event-thumbnail.component.html

@@ -0,0 +1,20 @@
+<div class="rtsee-events-dashboard-event-thumbnail">
+  <ng-template *ngIf="event.widget" widgetHost></ng-template>
+  <div *ngIf="!event.widget" class="rtsee-events-dashboard-default-event-thumbnail"
+       [ngClass]="{'rtsee-events-dashboard-default-event-thumbnail-with-data': event.data}"
+  >
+    <div class="rtsee-events-dashboard-default-event-thumbnail-name">{{event.name}}</div>
+    <div class="rtsee-events-dashboard-default-event-thumbnail-info">
+      <div *ngIf="event.data" class="rtsee-events-dashboard-default-event-thumbnail-details"
+           [title]="tooltip"
+      >
+      <span class="rtsee-events-dashboard-default-event-thumbnail-details-icon material-icons-outlined"
+      >info</span>
+      </div>
+      <div class="rtsee-events-dashboard-default-event-thumbnail-time">
+        <span>{{ timeFormatService.toAgo(event.createdAt) }}</span>
+      </div>
+    </div>
+
+  </div>
+</div>

package/projects/ngx/src/lib/components/rtsee-events-dashboard/components/event-thumbnail/event-thumbnail.component.ts

@@ -0,0 +1,89 @@
+import {
+  AfterViewInit,
+  ChangeDetectorRef,
+  Component,
+  ComponentFactoryResolver,
+  ComponentRef,
+  Input,
+  OnInit,
+  ViewChild,
+} from '@angular/core';
+import { RTSeeDashboardEvent } from '@rtsee/events-dashboard';
+import { WidgetDirective } from '../../../../directives/widget.directive';
+import { EventsWidgetsService } from '../../../../services/events-widgets.service';
+import { TimeFormatHelperService } from '../../../../services/time-format-helper.service';
+import {NgClass, NgIf} from "@angular/common";
+
+@Component({
+  selector: 'rtsee-event-thumbnail',
+  templateUrl: './event-thumbnail.component.html',
+  imports: [
+    WidgetDirective,
+    NgIf,
+    NgClass
+  ],
+  standalone: true
+})
+export class EventThumbnailComponent implements OnInit, AfterViewInit {
+  tooltip?: string;
+
+  @Input() event!: RTSeeDashboardEvent;
+  @ViewChild(WidgetDirective, { static: false }) widgetHost!: WidgetDirective;
+  constructor(
+    private widgetsService: EventsWidgetsService,
+    private componentFactoryResolver: ComponentFactoryResolver,
+    public timeFormatService: TimeFormatHelperService,
+    private cd: ChangeDetectorRef,
+  ) {}
+
+  ngOnInit(): void {
+    if (this.event.data) {
+      this.generateTooltip();
+    }
+  }
+
+  generateTooltip() {
+    /* eslint-disable */
+    let tooltip = '';
+    if (typeof this.event.data !== 'object') {
+      return;
+    }
+    try {
+      for (const key in this.event.data) {
+        if (this.event.data.hasOwnProperty(key)) {
+          if (tooltip) {
+            tooltip += '
';
+          }
+          tooltip += key + ' -> ' + this.event.data[key];
+        }
+      }
+      this.tooltip = tooltip;
+    } catch (e) {
+      console.log('Failed to generate a tooltip');
+    }
+    /* eslint-enable */
+  }
+
+  ngAfterViewInit() {
+    this.cd.detectChanges();
+    /* eslint-disable */
+    if (this.event.widget) {
+      const widget = this.widgetsService.getWidgetComponentByName(
+        this.event.widget,
+      );
+      if (!widget) {
+        return;
+      }
+      const viewContainerRef = this.widgetHost.viewContainerRef;
+      viewContainerRef.clear();
+      const componentToShow =
+        this.componentFactoryResolver.resolveComponentFactory(widget);
+      const componentRef: ComponentRef<typeof widget> =
+        viewContainerRef.createComponent(componentToShow);
+      componentRef.instance.event = this.event;
+      componentRef.instance.event = this.event;
+      componentRef.changeDetectorRef.detectChanges();
+    }
+    /* eslint-enable */
+  }
+}

package/projects/ngx/src/lib/components/rtsee-events-dashboard/components/rtsee-events-dashboard-client/rtsee-events-dashboard-client.component.html

@@ -0,0 +1 @@
+<p>rtsee-events-dashboard-client works!</p>

package/projects/ngx/src/lib/components/rtsee-events-dashboard/components/rtsee-events-dashboard-client/rtsee-events-dashboard-client.component.ts

@@ -0,0 +1,8 @@
+import { Component } from '@angular/core';
+
+@Component({
+    selector: 'ngx-rtsee-events-dashboard-client',
+    templateUrl: './rtsee-events-dashboard-client.component.html',
+    standalone: true
+})
+export class RtseeEventsDashboardClientComponent {}

package/projects/ngx/src/lib/components/rtsee-events-dashboard/components/rtsee-events-dashboard-client-thumbnail/rtsee-events-dashboard-client-thumbnail.component.html

@@ -0,0 +1,25 @@
+<div class="rtsee-dashboard-client-thumbnail">
+  <div class="rtsee-dashboard-client-header">
+    <div class="rtsee-dashboard-client-header-photo">
+      <div class="rtsee-dashboard-client-header-image"
+           [style.background-image]="'url(' + client.imageUrl || defaultImagesService.PROFILE + ')'"
+      ></div>
+      @if(client.isConnected) {
+        <div class="rtsee-dashboard-client-live-indicator"></div>
+      }
+    </div>
+    <p class="rtsee-dashboard-client-name">
+      <span class="rtsee-dashboard-client-name-text">{{ client.name || client.id }}</span>
+      <button (click)="openChat()" class="rtsee-dashboard-client-engage">
+        <span class="rtsee-dashboard-client-engage-icon material-icons-outlined">chat_bubble</span>
+      </button>
+    </p>
+  </div>
+  <div class="rtsee-dashboard-sessions">
+    @for(session of client.sessions; track session.id) {
+      <div class="rtsee-dashboard-sessions-container">
+        <rtsee-rtsee-events-dashboard-session [session]="session"></rtsee-rtsee-events-dashboard-session>
+      </div>
+    }
+  </div>
+</div>

package/projects/ngx/src/lib/components/rtsee-events-dashboard/components/rtsee-events-dashboard-client-thumbnail/rtsee-events-dashboard-client-thumbnail.component.ts

@@ -0,0 +1,40 @@
+import { Component, Input, OnInit } from '@angular/core';
+import { TimeFormatHelperService } from '../../../../services/time-format-helper.service';
+import { DefaultImagesService } from '../../../../services/default-images.service';
+import {
+  RTSeeEventsDashboard,
+  RTSeeDashboardClient,
+} from '@rtsee/events-dashboard';
+import {
+  RtseeEventsDashboardSessionComponent
+} from "../rtsee-events-dashboard-session/rtsee-events-dashboard-session.component";
+import {NgForOf, NgIf} from "@angular/common";
+
+@Component({
+  selector: 'ngx-rtsee-events-dashboard-client-thumbnail',
+  templateUrl: './rtsee-events-dashboard-client-thumbnail.component.html',
+  imports: [
+    RtseeEventsDashboardSessionComponent,
+    NgIf,
+    NgForOf
+  ],
+  standalone: true
+})
+export class RtseeEventsDashboardClientThumbnailComponent implements OnInit {
+  @Input() dashboard!: RTSeeEventsDashboard;
+  @Input() client!: RTSeeDashboardClient;
+
+  constructor(
+    public timeFormatService: TimeFormatHelperService,
+    public defaultImagesService: DefaultImagesService,
+  ) {}
+
+  ngOnInit(): void {
+    console.log('client id', this.client.id);
+  }
+
+  openChat() {
+    console.log('Open Chat Clicked! Client ID #', this.client.id);
+    this.dashboard.openChat(this.client);
+  }
+}

package/projects/ngx/src/lib/components/rtsee-events-dashboard/components/rtsee-events-dashboard-session/rtsee-events-dashboard-session.component.html

@@ -0,0 +1,32 @@
+<div class="rtsee-events-dashboard-session">
+  <div class="rtsee-events-dashboard-session-header" *ngIf="session.info">
+    <p class="rtsee-events-dashboard-session-client-info">{{session.info.clientThumbnail}}</p>
+    <p class="rtsee-events-dashboard-session-os-info">{{session.info.osThumbnail}}</p>
+    <div class="rtsee-events-dashboard-session-device-info" [title]="session.info.deviceThumbnail">
+      <span *ngIf="session.info.deviceType === 'smartphone' && !session.info.botName"
+        class="material-icons-outlined rtsee-events-dashboard-session-device-info-icon"
+      >phone_iphone</span>
+      <span class="material-icons-outlined rtsee-events-dashboard-session-device-info-icon"
+            *ngIf="session.info.deviceType === 'tablet' && !session.info.botName"
+      >tablet_mac</span>
+      <span class="material-icons-outlined rtsee-events-dashboard-session-device-info-icon"
+            *ngIf="session.info.deviceType === 'desktop' && !session.info.botName"
+      >computer</span>
+      <span class="material-icons-outlined rtsee-events-dashboard-session-device-info-icon"
+            *ngIf="session.info.botName"
+      >smart_toy</span>
+    </div>
+  </div>
+  <ul *ngIf="session.events && session.events.length"
+      class="rtsee-events-dashboard-session-events-list"
+  >
+    @for (event of session.events | slice:0:5; track event.id) {
+      <li class="rtsee-events-dashboard-session-event">
+        <rtsee-event-thumbnail [event]="event"></rtsee-event-thumbnail>
+      </li>
+    }
+  </ul>
+  <div class="rtsee-events-dashboard-session-footer">
+    <button *ngIf="session.events.length > 5">{{session.events.length - 5}} more</button>
+  </div>
+</div>

package/projects/ngx/src/lib/components/rtsee-events-dashboard/components/rtsee-events-dashboard-session/rtsee-events-dashboard-session.component.ts

@@ -0,0 +1,21 @@
+import { Component, Input } from '@angular/core';
+import { TimeFormatHelperService } from '../../../../services/time-format-helper.service';
+import { RTSeeDashboardClientSession } from '@rtsee/events-dashboard';
+import { NgIf, SlicePipe } from "@angular/common";
+import {EventThumbnailComponent} from "../event-thumbnail/event-thumbnail.component";
+
+@Component({
+  selector: 'rtsee-rtsee-events-dashboard-session',
+  templateUrl: './rtsee-events-dashboard-session.component.html',
+  imports: [
+    NgIf,
+
+    EventThumbnailComponent,
+    SlicePipe
+  ],
+  standalone: true
+})
+export class RtseeEventsDashboardSessionComponent {
+  @Input() session!: RTSeeDashboardClientSession;
+  constructor(public timeFormatService: TimeFormatHelperService) {}
+}

package/projects/ngx/src/lib/components/rtsee-events-dashboard/rtsee-events-dashboard.component.html

@@ -0,0 +1,12 @@
+<div class="rtsee-events-dashboard">
+  <div class="rtsee-events-dashboard-client-thumbnails">
+    @for (client of eventsDashboard.clients; track client.id) {
+      <div class="rtsee-events-dashboard-client-thumbnail-wrapper">
+        <ngx-rtsee-events-dashboard-client-thumbnail
+          [client]="client"
+          [dashboard]="eventsDashboard"
+        ></ngx-rtsee-events-dashboard-client-thumbnail>
+      </div>
+    }
+  </div>
+</div>

package/projects/ngx/src/lib/components/rtsee-events-dashboard/rtsee-events-dashboard.component.ts

@@ -0,0 +1,19 @@
+import { Component, Input } from '@angular/core';
+import { RTSeeEventsDashboard } from '@rtsee/events-dashboard';
+
+
+import {
+  RtseeEventsDashboardClientThumbnailComponent
+} from "./components/rtsee-events-dashboard-client-thumbnail/rtsee-events-dashboard-client-thumbnail.component";
+
+@Component({
+  selector: 'rtsee-events-dashboard',
+  templateUrl: './rtsee-events-dashboard.component.html',
+  imports: [
+    RtseeEventsDashboardClientThumbnailComponent
+  ],
+  standalone: true
+})
+export class RtseeEventsDashboardComponent {
+  @Input() eventsDashboard!: RTSeeEventsDashboard;
+}

package/projects/ngx/src/lib/components/rtsee-messenger/chat/chat.component.html

@@ -0,0 +1,10 @@
+<div class="rtsee-chat">
+  <div class="rtsee-chat-body-container">
+    <rtsee-messages-list [messenger]="messenger" [chat]="chat"></rtsee-messages-list>
+  </div>
+  <div class="rtsee-chat-footer-container">
+    <div class="rtsee-chat-footer-container-inner">
+      <rtsee-chat-input [messenger]="messenger" [chat]="chat"></rtsee-chat-input>
+    </div>
+  </div>
+</div>

package/projects/ngx/src/lib/components/rtsee-messenger/chat/chat.component.ts

@@ -0,0 +1,18 @@
+import { Component, Input } from '@angular/core';
+import { RTSeeChat, RTSeeMessenger } from '@rtsee/messenger';
+import {MessagesListComponent} from "../messages-list/messages-list.component";
+import {ChatInputComponent} from "../chat-input/chat-input.component";
+
+@Component({
+  selector: 'rtsee-chat',
+  templateUrl: './chat.component.html',
+  imports: [
+    MessagesListComponent,
+    ChatInputComponent
+  ],
+  standalone: true
+})
+export class ChatComponent {
+  @Input() chat!: RTSeeChat;
+  @Input() messenger!: RTSeeMessenger;
+}

package/projects/ngx/src/lib/components/rtsee-messenger/chat-input/chat-input.component.html

@@ -0,0 +1,20 @@
+<div class="rtsee-chat-input" xmlns="http://www.w3.org/1999/html">
+  <div class="rtsee-send-message">
+    <form [formGroup]="sendMessageForm" class="rtsee-chat-input-form">
+      <textarea
+        placeholder="Type message..."
+        type="text"
+        formControlName="message"
+        class="rtsee-chat-input-field"
+        autosize
+        required
+        (keyup.enter)="sendMessage()"
+      ></textarea>
+    </form>
+  </div>
+  <button (click)="sendMessage()"
+          class="rtsee-send-message-button"
+          type="submit">
+    <span class="material-icons-outlined">send</span>
+  </button>
+</div>

package/projects/ngx/src/lib/components/rtsee-messenger/chat-input/chat-input.component.ts

@@ -0,0 +1,31 @@
+import { Component, Input } from '@angular/core';
+import {FormControl, FormGroup, ReactiveFormsModule, Validators} from '@angular/forms';
+import { RTSeeChat, RTSeeMessenger } from '@rtsee/messenger';
+
+@Component({
+  selector: 'rtsee-chat-input',
+  templateUrl: './chat-input.component.html',
+  imports: [
+    ReactiveFormsModule
+  ],
+  standalone: true
+})
+export class ChatInputComponent {
+  sendMessageForm: FormGroup = new FormGroup({
+    /* eslint-disable */
+    message: new FormControl('', Validators.required),
+    /* eslint-enable */
+  });
+
+  @Input() messenger!: RTSeeMessenger;
+  @Input() chat!: RTSeeChat;
+
+  sendMessage() {
+    const text = this.sendMessageForm.get('message')?.value as string;
+    if (!text) {
+      return;
+    }
+    this.chat.sendMessage(text);
+    this.sendMessageForm.get('message')?.setValue('');
+  }
+}

package/projects/ngx/src/lib/components/rtsee-messenger/chat-thumbnail/chat-thumbnail.component.html

@@ -0,0 +1,28 @@
+<div class="rtsee-chat-thumbnail" (click)="messenger.openChatById(chat.chatId)">
+  <div class="rtsee-chat-thumbnail-image">
+    <img [src]="chat.chatImageUrl" alt="chat-img">
+  </div>
+  <div class="rtsee-chat-thumbnail-left">
+    <div class="rtsee-chat-thumbnail-name">
+      <span>{{ chat.chatName }}</span>
+      <div class="rtsee-chat-thumbnail-status">
+        <rtsee-message-time-and-status [message]="chat"
+                                       [hideStatus]="chat && !!(chat.unreadMessagesCount)">
+        </rtsee-message-time-and-status>
+      </div>
+    </div>
+    <div class="rtsee-chat-thumbnail-last-message"
+         [ngClass]="{'rtsee-has-unread': chat.unreadMessagesCount}"
+         rtseeShave>
+      <span class="rtsee-chat-thumbnail-last-message-sender"
+            *ngIf="chat.chatType !== RTSeeChatTypes.INDIVIDUAL && chat.senderName"
+      >{{chat.senderName}}</span>
+      <span class="rtsee-chat-thumbnail-last-message-text"
+            *ngIf="chat.text"
+      >{{chat.text}}</span>
+      <div class="rtsee-messenger-thumbnail-unread" *ngIf="chat.unreadMessagesCount">
+        <span class="rtsee-messenger-thumbnail-unread-count">{{chat.unreadMessagesCount}}</span>
+      </div>
+    </div>
+  </div>
+</div>

package/projects/ngx/src/lib/components/rtsee-messenger/chat-thumbnail/chat-thumbnail.component.ts

@@ -0,0 +1,27 @@
+import { Component, Input } from '@angular/core';
+import { RTSeeMessenger } from '@rtsee/messenger';
+import { RTSeeChatTypes, IMessageThumbnail } from '@rtsee/common';
+import { TimeFormatHelperService } from '../../../services/time-format-helper.service';
+import {
+  MessageTimeAndStatusComponent
+} from "../message/components/message-time-and-status/message-time-and-status.component";
+import {NgClass, NgIf} from "@angular/common";
+
+@Component({
+  selector: 'rtsee-chat-thumbnail',
+  templateUrl: './chat-thumbnail.component.html',
+  imports: [
+    MessageTimeAndStatusComponent,
+    NgClass,
+    NgIf
+  ],
+  standalone: true
+})
+export class ChatThumbnailComponent {
+  @Input() chat!: IMessageThumbnail;
+  @Input() messenger!: RTSeeMessenger;
+
+  readonly RTSeeChatTypes = RTSeeChatTypes;
+
+  constructor(public timeFormatService: TimeFormatHelperService) {}
+}

package/projects/ngx/src/lib/components/rtsee-messenger/chats-list/chats-list.component.html

@@ -0,0 +1,6 @@
+<div class="rtsee-chats-list">
+  <div class="rtsee-chat-thumbnail-container" *ngFor="let chat of chats; let last = last;">
+    <rtsee-chat-thumbnail [chat]="chat.thumbnail" [messenger]="messenger"></rtsee-chat-thumbnail>
+<!--    <div class="rtsee-chat-thumbnail-separator" *ngIf="!last"></div>-->
+  </div>
+</div>

package/projects/ngx/src/lib/components/rtsee-messenger/chats-list/chats-list.component.ts

@@ -0,0 +1,22 @@
+import { Component, Input, OnInit } from '@angular/core';
+import { RTSeeChat, RTSeeMessenger } from '@rtsee/messenger';
+import {NgForOf} from "@angular/common";
+import {ChatThumbnailComponent} from "../chat-thumbnail/chat-thumbnail.component";
+
+@Component({
+  selector: 'rtsee-chats-list',
+  templateUrl: './chats-list.component.html',
+  imports: [
+    NgForOf,
+    ChatThumbnailComponent
+  ],
+  standalone: true
+})
+export class ChatsListComponent implements OnInit {
+  @Input() messenger!: RTSeeMessenger;
+  @Input() chats!: RTSeeChat[];
+
+  ngOnInit(): void {
+    // console.log(this.chats);
+  }
+}

package/projects/ngx/src/lib/components/rtsee-messenger/main-menu/components/contacts-multiselect/contacts-multiselect.component.html

@@ -0,0 +1,3 @@
+<div class="rtsee-messenger-contacts-multiselect">
+  <rtsee-search [search]="search"></rtsee-search>
+</div>

package/projects/ngx/src/lib/components/rtsee-messenger/main-menu/components/contacts-multiselect/contacts-multiselect.component.ts

@@ -0,0 +1,18 @@
+import { Component, Input } from '@angular/core';
+import { IMainMenuState } from '../models/MainMenuState';
+import { RTSeeMessengerSearch } from '@rtsee/messenger';
+import { SearchComponent } from "../search/search.component";
+
+@Component({
+  selector: 'rtsee-contacts-multiselect',
+  templateUrl: './contacts-multiselect.component.html',
+  styleUrls: ['./contacts-multiselect.component.scss'],
+  imports: [
+    SearchComponent
+  ],
+  standalone: true
+})
+export class ContactsMultiselectComponent {
+  @Input() menuState!: IMainMenuState;
+  @Input() search!: RTSeeMessengerSearch;
+}

package/projects/ngx/src/lib/components/rtsee-messenger/main-menu/components/manage-chat/manage-chat.component.html

@@ -0,0 +1,4 @@
+<div class="rtsee-messenger-manage-chat">
+  <p>We are going to manage chat here</p>
+  <button (click)="onInviteContactsClicked()">Invite Contacts</button>
+</div>

package/projects/ngx/src/lib/components/rtsee-messenger/main-menu/components/manage-chat/manage-chat.component.ts

@@ -0,0 +1,18 @@
+import { Component, Input } from '@angular/core';
+import { RTSeeMessenger } from '@rtsee/messenger';
+import { IMainMenuState, MainMenuPanels } from '../models/MainMenuState';
+
+@Component({
+    selector: 'rtsee-manage-chat',
+    templateUrl: './manage-chat.component.html',
+    styleUrls: ['./manage-chat.component.scss'],
+    standalone: true
+})
+export class ManageChatComponent {
+  @Input() messenger!: RTSeeMessenger;
+  @Input() menuState!: IMainMenuState;
+
+  onInviteContactsClicked() {
+    this.menuState.activePanel = MainMenuPanels.CONTACTS_SELECT;
+  }
+}

package/projects/ngx/src/lib/components/rtsee-messenger/main-menu/components/models/MainMenuState.ts

@@ -0,0 +1,11 @@
+export enum MainMenuPanels {
+  HOME = 'home',
+  CONTACTS_SELECT = 'contacts-select',
+  MANAGE_CHAT = 'manage-chat',
+}
+
+export interface IMainMenuState {
+  activePanel: MainMenuPanels;
+}
+
+export const DEFAULT_MAIN_MENU_STATE = MainMenuPanels.HOME;

package/projects/ngx/src/lib/components/rtsee-messenger/main-menu/components/search/search.component.html

@@ -0,0 +1,25 @@
+<div class="rtsee-messenger-search">
+  <input type="text"
+         [formControl]="queryControl"
+         class="rtsee-messenger-search-input"
+         placeholder="Search"/>
+</div>
+
+<div class="rtsee-messenger-search-results">
+  <rtsee-preloader [diameter]="50"
+                   *ngIf="search.searchInProgress"
+  ></rtsee-preloader>
+  <p>Chats</p>
+  <div class="rtsee-messenger-search-results-chats">
+    <div *ngFor="let chat of search.results.chats"
+         class="rtsee-messenger-search-results-chat-wrapper">
+      <p>{{chat.name}}</p>
+    </div>
+  </div>
+  <p>Messages</p>
+  <div class="rtsee-messenger-search-results-messages">
+    <div *ngFor="let message of search.results.messages" class="rtsee-messenger-search-results-message-wrapper">
+      <p>{{message.chatName || message.senderName }}</p>
+    </div>
+  </div>
+</div>

package/projects/ngx/src/lib/components/rtsee-messenger/main-menu/components/search/search.component.ts

@@ -0,0 +1,36 @@
+import { Component, Input, OnDestroy, OnInit } from '@angular/core';
+import { debounceTime } from 'rxjs/operators';
+import {FormControl, ReactiveFormsModule} from '@angular/forms';
+import { Subscription } from 'rxjs';
+import { RTSeeMessengerSearch } from '@rtsee/messenger';
+import {PreloaderComponent} from "../../../../../common/components/preloader/preloader.component";
+import {NgForOf} from "@angular/common";
+
+@Component({
+  selector: 'rtsee-search',
+  templateUrl: './search.component.html',
+  imports: [
+    ReactiveFormsModule,
+    PreloaderComponent,
+    NgForOf
+  ],
+  standalone: true
+})
+export class SearchComponent implements OnInit, OnDestroy {
+  queryControl = new FormControl();
+  queryCtrlSub?: Subscription;
+
+  @Input() search!: RTSeeMessengerSearch;
+
+  ngOnInit(): void {
+    this.queryCtrlSub = this.queryControl.valueChanges
+      .pipe(debounceTime(200))
+      .subscribe((value: string) => this.search.onQueryChange(value));
+  }
+
+  ngOnDestroy() {
+    if (this.queryCtrlSub) {
+      this.queryCtrlSub.unsubscribe();
+    }
+  }
+}