add support for group chats

src/views/friends/common/GroupType.ts

@@ -0,0 +1,5 @@
+export class GroupType
+{
+    public static readonly GROUP_CHAT = 0;
+    public static readonly PRIVATE_CHAT = 1;
+}

src/views/friends/common/MessengerThread.ts

@@ -1,7 +1,9 @@
 import { LocalizeText } from '../../../api';
+import { GroupType } from './GroupType';
 import { MessengerFriend } from './MessengerFriend';
 import { MessengerThreadChat } from './MessengerThreadChat';
 import { MessengerThreadChatGroup } from './MessengerThreadChatGroup';
+import { getGroupChatData } from './Utils';
 
 export class MessengerThread
 {
@@ -21,7 +23,7 @@ export class MessengerThread
 
         if(isNew)
         {
-            this.addMessage(-1, LocalizeText('messenger.moderationinfo'), 0, null, MessengerThreadChat.SECURITY_NOTIFICATION);
+            this.addMessage(null, LocalizeText('messenger.moderationinfo'), 0, null, MessengerThreadChat.SECURITY_NOTIFICATION);
 
             this._unread = false;
         }
@@ -29,10 +31,15 @@ export class MessengerThread
 
     public addMessage(senderId: number, message: string, secondsSinceSent: number = 0, extraData: string = null, type: number = 0): MessengerThreadChat
     {
-        const group = this.getLastGroup(senderId);
+        const isGroupChat = (senderId < 0 && extraData);
+        const userId = isGroupChat ? getGroupChatData(extraData).userId : senderId;
+
+        const group = this.getLastGroup(userId);
 
         if(!group) return;
 
+        if(isGroupChat) group.type = GroupType.GROUP_CHAT;
+
         const chat = new MessengerThreadChat(senderId, message, secondsSinceSent, extraData, type);
 
         group.addChat(chat);

src/views/friends/common/MessengerThreadChatGroup.ts

@@ -1,14 +1,17 @@
+import { GroupType } from './GroupType';
 import { MessengerThreadChat } from './MessengerThreadChat';
 
 export class MessengerThreadChatGroup
 {
     private _userId: number;
     private _chats: MessengerThreadChat[];
+    private _type: number;
 
-    constructor(userId: number)
+    constructor(userId: number, type = GroupType.PRIVATE_CHAT)
     {
         this._userId = userId;
         this._chats = [];
+        this._type = type;
     }
 
     public addChat(message: MessengerThreadChat): void
@@ -25,4 +28,14 @@ export class MessengerThreadChatGroup
     {
         return this._chats;
     }
+
+    public get type(): number
+    {
+        return this._type;
+    }
+
+    public set type(type: number)
+    {
+        this._type = type;
+    }
 }

src/views/friends/common/Utils.ts

@@ -0,0 +1,18 @@
+export const getGroupChatData = (extraData: string) =>
+{
+    const splitData = extraData.split('/');
+
+    const username = splitData[0];
+    const figure = splitData[1];
+    const userId = parseInt(splitData[2]);
+
+    const result: IGroupChatData = { username: username, figure: figure, userId: userId }
+    return  result;
+}
+
+export interface IGroupChatData
+{
+    username: string;
+    figure: string;
+    userId: number;
+} 

src/views/friends/views/friend-bar-item/FriendBarItemView.scss

@@ -11,8 +11,15 @@
     }
 
     .friend-bar-item-head {
+        &.avatar {
             top: -30px;
             left: -30px;
+        }
+        &.group {
+            top: -5px;
+            left: -5px;
+        }
+
         pointer-events: none;
     }
 

src/views/friends/views/friend-bar-item/FriendBarItemView.tsx

@@ -4,6 +4,7 @@ import { GetUserProfile, LocalizeText, OpenMessengerChat } from '../../../../api
 import { SendMessageHook } from '../../../../hooks/messages';
 import { NitroLayoutBase } from '../../../../layout/base';
 import { AvatarImageView } from '../../../shared/avatar-image/AvatarImageView';
+import { BadgeImageView } from '../../../shared/badge-image/BadgeImageView';
 import { FriendBarItemViewProps } from './FriendBarItemView.types';
 
 export const FriendBarItemView: FC<FriendBarItemViewProps> = props =>
@@ -58,8 +59,9 @@ export const FriendBarItemView: FC<FriendBarItemViewProps> = props =>
 
     return (
         <div ref={ elementRef } className={'btn btn-success friend-bar-item ' + (isVisible ? 'friend-bar-item-active' : '')} onClick={ event => setVisible(prevValue => !prevValue) }>
-            <div className="friend-bar-item-head position-absolute">
+            <div className={`friend-bar-item-head position-absolute ${friend.id > 0 ? 'avatar': 'group'}`}>
-                <AvatarImageView headOnly={ true } figure={ friend.figure } direction={ 2 } />
+                { friend.id > 0 && <AvatarImageView headOnly={ true } figure={ friend.figure } direction={ 2 } /> }
+                { friend.id <= 0 && <BadgeImageView isGroup={ true } badgeCode={ friend.figure} />} 
             </div>
             <div className="text-truncate">{ friend.name }</div>
             { isVisible &&

src/views/friends/views/messenger-thread-group/FriendsMessengerThreadGroup.tsx

@@ -1,18 +1,31 @@
-import { FC } from 'react';
+import { FC, useMemo } from 'react';
 import { GetSessionDataManager } from '../../../../api';
 import { NitroLayoutFlex } from '../../../../layout';
 import { NitroLayoutBase } from '../../../../layout/base';
 import { AvatarImageView } from '../../../shared/avatar-image/AvatarImageView';
+import { GroupType } from '../../common/GroupType';
 import { MessengerThreadChat } from '../../common/MessengerThreadChat';
+import { getGroupChatData } from '../../common/Utils';
 import { FriendsMessengerThreadGroupProps } from './FriendsMessengerThreadGroup.types';
 
 export const FriendsMessengerThreadGroup: FC<FriendsMessengerThreadGroupProps> = props =>
 {
     const { thread = null, group = null } = props;
 
+    const isOwnChat = useMemo(() =>
+    {
+        if(!thread || !group) return false;
+        
+        if(group.type === GroupType.PRIVATE_CHAT && (group.userId === GetSessionDataManager().userId)) return true;
+
+        if( (group.type === GroupType.GROUP_CHAT) && (group.chats.length && getGroupChatData(group.chats[0].extraData).userId === GetSessionDataManager().userId)) return true;
+
+        return false;
+    }, [group, thread]);
+
     if(!thread || !group) return null;
     
-    if(group.userId === -1)
+    if(!group.userId)
     {
         return (
             <div className="d-flex gap-2 w-100 justify-content-start">
@@ -33,15 +46,19 @@ export const FriendsMessengerThreadGroup: FC<FriendsMessengerThreadGroupProps> =
     }
     
     return (
-        <NitroLayoutFlex className={ 'w-100 justify-content-' + (group.userId === 0 ? 'end' : 'start') } gap={ 2 }>
+        <NitroLayoutFlex className={ 'w-100 justify-content-' + (isOwnChat ? 'end' : 'start') } gap={ 2 }>
-            { (group.userId > 0) &&
                 <NitroLayoutBase className="message-avatar flex-shrink-0">
+                { (group.type === GroupType.PRIVATE_CHAT && !isOwnChat) &&
                     <AvatarImageView figure={ thread.participant.figure } direction={ 2 } />
-                </NitroLayoutBase> }
+                }
-            <NitroLayoutBase className={ 'bg-light text-black border-radius mb-2 rounded py-1 px-2 messages-group-' + (group.userId === 0 ? 'right' : 'left') }>
+                { (group.type === GroupType.GROUP_CHAT && !isOwnChat) &&
+                    <AvatarImageView figure={ getGroupChatData(group.chats[0].extraData).figure } direction={ 2} />
+                }
+                </NitroLayoutBase>
+            <NitroLayoutBase className={ 'bg-light text-black border-radius mb-2 rounded py-1 px-2 messages-group-' + (isOwnChat ? 'right' : 'left') }>
                 { group.chats.map((chat, index) =><NitroLayoutBase key={ index } className="text-break">{ chat.message }</NitroLayoutBase>) }
             </NitroLayoutBase>
-            { (group.userId === 0) &&
+            { (isOwnChat) &&
                 <NitroLayoutBase className="message-avatar flex-shrink-0">
                     <AvatarImageView figure={ GetSessionDataManager().figure } direction={ 4 } />
                 </NitroLayoutBase> }

src/views/friends/views/messenger/FriendsMessengerView.tsx

@@ -1,12 +1,13 @@
 import { FollowFriendMessageComposer, ILinkEventTracker, NewConsoleMessageEvent, SendMessageComposer } from '@nitrots/nitro-renderer';
 import { FC, KeyboardEvent, useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { AddEventLinkTracker, GetUserProfile, LocalizeText, RemoveLinkEventTracker } from '../../../../api';
+import { AddEventLinkTracker, GetSessionDataManager, GetUserProfile, LocalizeText, RemoveLinkEventTracker } from '../../../../api';
 import { MESSENGER_MESSAGE_RECEIVED, MESSENGER_NEW_THREAD, PlaySound } from '../../../../api/utils/PlaySound';
 import { FriendsMessengerIconEvent } from '../../../../events';
 import { BatchUpdates, CreateMessageHook, dispatchUiEvent, SendMessageHook } from '../../../../hooks';
 import { NitroCardContentView, NitroCardHeaderView, NitroCardView, NitroLayoutButton, NitroLayoutButtonGroup, NitroLayoutFlex, NitroLayoutFlexColumn } from '../../../../layout';
 import { NitroLayoutBase } from '../../../../layout/base';
 import { AvatarImageView } from '../../../shared/avatar-image/AvatarImageView';
+import { BadgeImageView } from '../../../shared/badge-image/BadgeImageView';
 import { MessengerThread } from '../../common/MessengerThread';
 import { MessengerThreadChat } from '../../common/MessengerThreadChat';
 import { useFriendsContext } from '../../context/FriendsContext';
@@ -117,7 +118,7 @@ export const FriendsMessengerView: FC<{}> = props =>
 
         if(messageThreads.length === 1 && thread.groups.length === 1) PlaySound(MESSENGER_NEW_THREAD);
 
-        thread.addMessage(0, messageText, 0, null, MessengerThreadChat.CHAT);
+        thread.addMessage(GetSessionDataManager().userId, messageText, 0, null, MessengerThreadChat.CHAT);
 
         BatchUpdates(() =>
         {
@@ -250,7 +251,9 @@ export const FriendsMessengerView: FC<{}> = props =>
                                 <div key={ index } className="position-relative friend-head rounded flex-shrink-0 cursor-pointer bg-muted" onClick={ event => setActiveThreadIndex(messageThreadIndex) }>
                                     { thread.unread &&
                                         <NitroLayoutBase className="position-absolute nitro-friends-spritesheet icon-new-message top-1 end-1 z-index-1" /> }
-                                    <AvatarImageView figure={ thread.participant.figure } headOnly={ true } direction={ 3 } />
+                                        { thread.participant.id > 0 && <AvatarImageView figure={ thread.participant.figure } headOnly={ true } direction={ 3 } />}
+                                        { thread.participant.id <= 0 && <BadgeImageView isGroup={ true } badgeCode={thread.participant.figure } /> }
+                                    
                                 </div>
                             );
                         }) }