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.spec.ts

@@ -4,6 +4,7 @@ import {
   createGroupConversation,
   directMessageEventIncludesUser,
   directMessageSyncIncludesUser,
+  createDirectCallStartedMessage,
   getDirectConversationId,
   isGroupDirectConversation,
   updateMessageStatusInConversation,
@@ -88,6 +89,36 @@ describe('DirectMessageService domain flow', () => {
     expect(updatedConversation.messages[0].recipientIds).toEqual(recipientIds);
   });
 
+  it('does not increment unread when an existing message is upserted again', () => {
+    const conversation = createDirectConversation(alice, bob, 10);
+    const message = createMessage('message-1', 'SENT');
+    const withUnreadMessage = upsertDirectMessage(conversation, message, true);
+    const withDuplicateMessage = upsertDirectMessage(withUnreadMessage, { ...message, status: 'DELIVERED' }, true);
+
+    expect(withDuplicateMessage.messages).toHaveLength(1);
+    expect(withDuplicateMessage.unreadCount).toBe(1);
+    expect(withDuplicateMessage.messages[0].status).toBe('DELIVERED');
+  });
+
+  it('does not increment unread for call-started system messages', () => {
+    const conversation = createDirectConversation(alice, bob, 0);
+    const message = createDirectCallStartedMessage(conversation.id, alice, ['bob'], 123);
+    const withSystemMessage = upsertDirectMessage(conversation, message, true);
+
+    expect(withSystemMessage.unreadCount).toBe(0);
+    expect(withSystemMessage.messages).toHaveLength(1);
+  });
+
+  it('creates call-started system messages that do not read like normal text', () => {
+    const message = createDirectCallStartedMessage(getDirectConversationId('alice', 'bob'), alice, ['bob'], 123);
+
+    expect(message.id).toBe(`dm-call-started-${getDirectConversationId('alice', 'bob')}-123`);
+    expect(message.kind).toBe('system');
+    expect(message.systemEvent).toBe('call-started');
+    expect(message.content).toBe('Alice started a call');
+    expect(message.status).toBe('DELIVERED');
+  });
+
   it('should update status correctly', () => {
     expect(advanceDirectMessageStatus('QUEUED', 'SENT')).toBe('SENT');
     expect(advanceDirectMessageStatus('SENT', 'DELIVERED')).toBe('DELIVERED');