fix: solve small pm chat ui issues

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

toju-app/src/app/domains/direct-message/application/services/direct-message.service.ts

@@ -17,6 +17,7 @@ import {
   advanceDirectMessageStatus,
   createDirectConversation,
   createGroupConversation,
+  createDirectCallStartedMessage,
   directMessageConversationIncludesUser,
   directMessageEventIncludesUser,
   directMessageSyncIncludesUser,
@@ -244,6 +245,37 @@ export class DirectMessageService {
     return message;
   }
 
+  async recordCallStarted(
+    conversationId: string,
+    caller: DirectMessageParticipant,
+    participants: DirectMessageParticipant[],
+    timestamp = Date.now()
+  ): Promise<void> {
+    const ownerId = this.getCurrentUserIdOrThrow();
+    const currentUser = this.requireCurrentUser();
+    const currentParticipant = toDirectMessageParticipant(currentUser);
+    const allParticipants = this.uniqueParticipants([
+      currentParticipant,
+      caller,
+      ...participants
+    ]);
+
+    await this.loadForOwner(ownerId);
+
+    const existingConversation = this.conversationsSignal().find((conversation) => conversation.id === conversationId)
+      ?? await this.repository.getConversation(ownerId, conversationId)
+      ?? this.createConversationForSystemEvent(conversationId, currentParticipant, caller, allParticipants, timestamp);
+    const conversation = this.mergeConversationParticipants(existingConversation, allParticipants);
+    const message = createDirectCallStartedMessage(
+      conversation.id,
+      caller,
+      conversation.participants.filter((participantId) => participantId !== caller.userId),
+      timestamp
+    );
+
+    await this.persistConversation(ownerId, upsertDirectMessage(conversation, message, false));
+  }
+
   async editMessage(conversationId: string, messageId: string, content: string): Promise<void> {
     const normalizedContent = content.trim();
 
@@ -863,6 +895,25 @@ export class DirectMessageService {
     };
   }
 
+  private createConversationForSystemEvent(
+    conversationId: string,
+    currentParticipant: DirectMessageParticipant,
+    caller: DirectMessageParticipant,
+    participants: DirectMessageParticipant[],
+    timestamp: number
+  ): DirectMessageConversation {
+    if (participants.length > 2) {
+      return createGroupConversation(conversationId, participants, timestamp);
+    }
+
+    const peer = participants.find((participant) => participant.userId !== currentParticipant.userId) ?? caller;
+
+    return {
+      ...createDirectConversation(currentParticipant, peer, timestamp),
+      id: conversationId
+    };
+  }
+
   private recipientIdsFor(conversation: DirectMessageConversation | null | undefined, currentUserId: string | null | undefined): string[] {
     if (!conversation || !currentUserId) {
       return [];