feature/3872 telegram chat edit and delete message from admin

src/app/chat/chat-icons.ts

@@ -1,3 +1,5 @@
 export const CHAT_ICONS = {
-  telegram: 'assets/img/chat/telegram-logo.svg'
+  telegram: 'assets/img/chat/telegram-logo.svg',
+  edit: './assets/img/chat/new-message.svg',
+  close: './assets/img/comments/cancel-comment-edit.png'
 };

src/app/chat/component/chat-page/chat-page.component.html

@@ -31,7 +31,12 @@
 
         <app-image-modal [imageUrl]="facade.selectedImageUrl()" (closeModal)="facade.closeImageModal()"> </app-image-modal>
 
-        <app-message-input (sendText)="facade.sendMessage($event.text, $event.file)"> </app-message-input>
+        <app-message-input
+          (sendText)="messageController($event.text, $event.file)"
+          (closeEdit)="facade.selectMessage()"
+          [editText]="facade.selectedMessage()?.text"
+        >
+        </app-message-input>
       </div>
     </ng-container>
 

src/app/chat/component/chat-page/chat-page.component.scss

@@ -145,6 +145,7 @@
 }
 
 .messages {
+  position: relative;
   flex: 1;
   overflow-y: auto;
   padding-right: 0.5rem;
@@ -195,6 +196,7 @@
 }
 
 .message-input-container {
+  position: relative;
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -260,6 +262,64 @@
   }
 }
 
+.message-icons {
+  width: 14px;
+  margin: 0 0 3px auto;
+  display: flex;
+
+  .icon {
+    max-width: 11px;
+  }
+}
+
+.edit-text-container {
+  position: absolute;
+  bottom: 6rem;
+  width: 88%;
+  padding: 7px 10px;
+  border-radius: 7px;
+  margin-left: 5px;
+  display: flex;
+  align-self: flex-start;
+  background-color: var(--primary-white);
+  color: var(--secondary-dark-grey);
+  border: 1px solid var(--after-primary-light-grey);
+  box-shadow: -2px -1px 5px #0000001a;
+
+  p {
+    margin: 0;
+    font-size: 14px;
+
+    &:first-of-type {
+      color: var(--tertiary-light-green);
+    }
+  }
+
+  .icon {
+    width: 16px;
+    margin: 0 15px;
+  }
+
+  .close {
+    margin-left: auto;
+    width: 10px;
+    height: 10px;
+  }
+}
+
+.edit-status {
+  margin: 0 15px;
+  font-size: 10px;
+
+  .edited-icon {
+    width: 13px;
+  }
+}
+
+.menu-item {
+  font-size: 14px;
+}
+
 .file-attach {
   margin-top: 6px;
   display: flex;

src/app/chat/component/chat-page/chat-page.component.ts

@@ -31,7 +31,10 @@ export class ChatComponent implements OnInit, AfterViewInit, OnDestroy {
   @ViewChild('pagingAnchor') pagingAnchor!: ElementRef<HTMLElement>;
   private io?: IntersectionObserver;
   private readonly destroy$ = new Subject<void>();
-  constructor(public facade: ChatFacade, public route: ActivatedRoute) {}
+  constructor(
+    public facade: ChatFacade,
+    public route: ActivatedRoute
+  ) {}
 
   ngOnInit(): void {
     this.facade.init(Number(this.route.snapshot.queryParams['chatId']));
@@ -73,6 +76,14 @@ export class ChatComponent implements OnInit, AfterViewInit, OnDestroy {
     this.io.observe(this.pagingAnchor.nativeElement);
   }
 
+  messageController(text: string, file?: File) {
+    if (!this.facade.selectedMessage) {
+      this.facade.sendMessage(text, file);
+    } else {
+      this.facade.editMessage(text);
+    }
+  }
+
   ngOnDestroy(): void {
     this.io?.disconnect();
     this.destroy$.next();

src/app/chat/data/chat-api.service.ts

@@ -56,6 +56,16 @@ export class ChatApiService {
     return this.http.post<string>(url, form, { headers, responseType: 'text' as 'json' });
   }
 
+  editMessage(chatInternalId: number, messageId: number, newText: string) {
+    const headers = this.authHeaders();
+    if (!headers) {
+      return new Observable<string>((o) => o.complete());
+    }
+    const url = `${this.baseUrl}/message/edit`;
+    const data = new Blob([JSON.stringify({ chatId: chatInternalId, messageId: messageId, newText })], { type: 'application/json' });
+    return this.http.put<string>(url, data, { headers, responseType: 'text' as 'json' });
+  }
+
   getLastOrder(chatInternalId: number) {
     const headers = this.authHeaders();
     if (!headers) {

src/app/chat/facade/chat.facade.ts

@@ -14,6 +14,8 @@ export class ChatFacade {
   readonly selectedChat = signal<ChatListItem | null>(null);
   readonly selectedImageUrl = signal<string | null>(null);
 
+  readonly selectedMessage = signal<ChatMessageView | null>(null);
+
   readonly clientInfoVisible = signal(false);
   readonly clientInfoData = signal<ClientInfoData>(null);
 
@@ -158,7 +160,11 @@ export class ChatFacade {
     this.location.replaceState(newPath);
   }
 
-  selectChatById(chatInternalId: number) { 
+  selectMessage(message?: ChatMessageView) {
+    this.selectedMessage.set(message);
+  }
+
+  selectChatById(chatInternalId: number) {
     const chat = this.chats().find((c) => c.chatInternalId === chatInternalId);
     if (chat) {
       this.selectChat(chat);
@@ -332,6 +338,25 @@ export class ChatFacade {
     });
   }
 
+  editMessage(newText: string) {
+    const sel = this.selectedChat();
+    const mes = this.selectedMessage();
+    if (!sel || !newText.trim() || !mes) {
+      return;
+    }
+    this.api.editMessage(sel.chatInternalId, mes.id, newText.trim()).subscribe({
+      next: () => {
+        const messageIndex = sel.messages.findIndex((m) => m.id === mes.id);
+        if (messageIndex > -1) {
+          sel.messages[messageIndex].text = newText;
+        }
+        this.selectedChat.set({ ...sel });
+        this.selectMessage(null);
+      },
+      error: (e) => console.error('Failed to edit the message:', e)
+    });
+  }
+
   toggleClientInfo() {
     this.clientInfoVisible.update((v) => !v);
     const visible = this.clientInfoVisible();

src/app/chat/ui/message-input/message-input.component.html

@@ -1,7 +1,16 @@
 <div class="message-input-container">
+  <div *ngIf="editText" class="edit-text-container">
+    <img class="icon" [src]="chatICons.edit" alt="edit" />
+    <div class="edited-message">
+      <p>{{ 'chat.edit-message' | translate }}</p>
+      <p>{{ editText }}</p>
+    </div>
+    <img class="close" [src]="chatICons.close" alt="close" (click)="onClose()" />
+  </div>
   <div class="message-input-wrapper">
     <label class="message-input-wrapper-label">
       <input
+        #textInput
         type="text"
         id="text-input-message"
         [placeholder]="'chat.active-chat-placeholder' | translate"

src/app/chat/ui/message-input/message-input.component.ts

@@ -1,28 +1,40 @@
-import { Component, EventEmitter, Output, ViewChild, ElementRef } from '@angular/core';
+import { Component, EventEmitter, Output, ViewChild, ElementRef, Input, OnInit, OnChanges, SimpleChanges } from '@angular/core';
 import { NgIf } from '@angular/common';
 import { FormsModule } from '@angular/forms';
 import { TranslateModule } from '@ngx-translate/core';
+import { CHAT_ICONS } from '../../chat-icons';
 
 @Component({
   selector: 'app-message-input',
   standalone: true,
-  imports: [NgIf, FormsModule, TranslateModule],
+  imports: [FormsModule, TranslateModule, NgIf],
   templateUrl: './message-input.component.html'
 })
-export class MessageInputComponent {
+export class MessageInputComponent implements OnChanges {
   @Output() sendText = new EventEmitter<{ text: string; file?: File }>();
+  @Output() closeEdit = new EventEmitter();
   @ViewChild('fileInput', { static: false }) fileInput!: ElementRef<HTMLInputElement>;
-
+  @ViewChild('textInput') textInput!: ElementRef<HTMLInputElement>;
+  @Input() editText?: string;
   text = '';
   file?: File;
   private readonly MAX_FILE_MB = 5;
+  readonly chatICons = CHAT_ICONS;
+
+  ngOnChanges(changes: SimpleChanges) {
+    if (changes['editText']?.currentValue) {
+      this.text = this.editText ?? '';
+      this.textInput.nativeElement.focus();
+    }
+  }
 
   send() {
     if (!this.text.trim() && !this.file) {
       return;
     }
     this.sendText.emit({ text: this.text, file: this.file });
     this.text = '';
+    this.editText = '';
     this.file = undefined;
 
     if (this.fileInput) {
@@ -46,4 +58,10 @@ export class MessageInputComponent {
     }
     this.file = file;
   }
+
+  onClose() {
+    this.closeEdit.emit();
+    this.editText = '';
+    this.text = '';
+  }
 }

src/app/chat/ui/messages-list/messages-list.component.html

@@ -1,5 +1,18 @@
 <div #scrollContainer class="messages">
-  <div *ngFor="let message of messages" [ngClass]="{ message: true, sent: message.from === 'Me', received: message.from !== 'Me' }">
+  <div
+    *ngFor="let message of messages"
+    [ngClass]="{ message: true, sent: message.from === 'Me', received: message.from !== 'Me' }"
+    (contextmenu)="onRightClick($event, menuTrigger, message)"
+    (touchstart)="onTouchStart($event, menuTrigger, message)"
+    (touchend)="onTouchEnd($event)"
+    (touchmove)="onTouchMove($event)"
+  >
+    <div
+      style="visibility: hidden; position: fixed"
+      [style.left]="matMenuPosition.x"
+      [style.top]="matMenuPosition.y"
+      [matMenuTriggerFor]="menu"
+    ></div>
     <div class="message-text" *ngIf="message.text">
       {{ message.text }}
     </div>
@@ -19,4 +32,20 @@
       <app-status-ticks *ngIf="message.from === 'Me'" [status]="message.viewingStatus || undefined"></app-status-ticks>
     </div>
   </div>
+
+  <div class="mat-menu">
+    <mat-menu #menu="matMenu" yPosition="above" (closed)="onMenuClosed()">
+      <ng-template matMenuContent>
+        <div>
+          <span class="edit-status"
+            ><img class="edited-icon" [src]="chatICons.edit" alt="edited" />
+            {{ 'chat.status.EDITED' | translate: { editDate: '11.09.2025', editTime: '16:33' } }}</span
+          >
+          <button mat-menu-item (click)="onMessageEdit()" class="edit-button">
+            <span class="menu-item">{{ 'chat.edit-option' | translate }}</span>
+          </button>
+        </div>
+      </ng-template>
+    </mat-menu>
+  </div>
 </div>

src/app/chat/ui/messages-list/messages-list.component.spec.ts

@@ -2,6 +2,7 @@ import { MessagesListComponent } from './messages-list.component';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { ChatMessageView } from '../../model/chat-page.interface';
 import { fakeAsync, tick } from '@angular/core/testing';
+import { HttpClientTestingModule } from '@angular/common/http/testing';
 
 describe('MessagesListComponent', () => {
   let fixture: ComponentFixture<MessagesListComponent>;
@@ -18,7 +19,7 @@ describe('MessagesListComponent', () => {
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [MessagesListComponent]
+      imports: [MessagesListComponent, HttpClientTestingModule]
     }).compileComponents();
 
     fixture = TestBed.createComponent(MessagesListComponent);