fix: solve small pm chat ui issues

unwrap the pill
fix the fetching images in pm not auto download

toju-app/src/app/domains/attachment/application/services/attachment-manager.service.ts

@@ -6,8 +6,11 @@ import {
 import { NavigationEnd, Router } from '@angular/router';
 import { RealtimeSessionFacade } from '../../../../core/realtime';
 import { DatabaseService } from '../../../../infrastructure/persistence';
-import { ROOM_URL_PATTERN } from '../../../../core/constants';
-import { shouldAutoRequestWhenWatched } from '../../domain/logic/attachment.logic';
+import {
+  getWatchedAttachmentRoomIdFromUrl,
+  isDirectMessageAttachmentRoomId,
+  shouldAutoRequestWhenWatched
+} from '../../domain/logic/attachment.logic';
 import type { Attachment, AttachmentMeta } from '../../domain/models/attachment.model';
 import type {
   FileAnnouncePayload,
@@ -182,6 +185,11 @@ export class AttachmentManagerService {
       return;
     }
 
+    if (isDirectMessageAttachmentRoomId(roomId)) {
+      await this.requestAutoDownloadsForRuntimeRoom(roomId);
+      return;
+    }
+
     if (this.database.isReady()) {
       const messages = await this.database.getMessages(roomId, 500, 0);
 
@@ -193,6 +201,10 @@ export class AttachmentManagerService {
       return;
     }
 
+    await this.requestAutoDownloadsForRuntimeRoom(roomId);
+  }
+
+  private async requestAutoDownloadsForRuntimeRoom(roomId: string): Promise<void> {
     for (const [messageId] of this.runtimeStore.getAttachmentEntries()) {
       const attachmentRoomId = await this.persistence.resolveMessageRoomId(messageId);
 
@@ -235,9 +247,7 @@ export class AttachmentManagerService {
   }
 
   private extractWatchedRoomId(url: string): string | null {
-    const roomMatch = url.match(ROOM_URL_PATTERN);
-
-    return roomMatch ? roomMatch[1] : null;
+    return getWatchedAttachmentRoomIdFromUrl(url);
   }
 
   private isRoomWatched(roomId: string | null | undefined): boolean {