Buddypress

Hello everyone,
i have an idea and want to achieve it but my knowledge isn’t good enough
i want to build sidebar for inbox or chats like facebook but with different CSS like: https://ibb.co/vh5ZFGY
i want to make a HTML code dynamic and connect with buddypress functions, i want a functions or way to show who’s online, title name, messages.
screenshot: https://ibb.co/mDcS0rP
i’m using buddypress and bp better messages plugins
it’s an example HTML code:

<p class=”user-status-title”><span class=”bold”>Nick Grissom</span></p>
<!– /USER STATUS TITLE –>

<!– USER STATUS TEXT –>
<p class=”user-status-text small”>Can you stream the new game?</p>
<!– /USER STATUS TEXT –>

<!– USER STATUS TIMESTAMP –>
<p class=”user-status-timestamp floaty”>2hrs</p>
<!– /USER STATUS TIMESTAMP –>
</div>
<!– /USER STATUS –>
</div>
<!– /CHAT WIDGET MESSAGE –>

<!– CHAT WIDGET MESSAGE –>
<div class=”chat-widget-message”>
<!– USER STATUS –>
<div class=”user-status”>
<!– USER STATUS AVATAR –>
<div class=”user-status-avatar”>
<!– USER AVATAR –>
<div class=”user-avatar small no-outline online”>
<!– USER AVATAR CONTENT –>
<div class=”user-avatar-content”>
<!– HEXAGON –>
<div class=”hexagon-image-30-32″ data-src=”img/avatar/20.jpg”></div>
<!– /HEXAGON –>
</div>

الصفحة التي أريد المساعدة بشأنها: [تسجيل الدخول لرؤية الرابط]