We have created a user panel for our users in our site. Now we want to make a new part in the toolbar of the user panel to send private messages to every user we need.
For that, we created a post type as private_message and created a meta box for choosing the username (some body should read the message) and then we created a part in toolbar of user panel to show the private_message to user.

for display the private_message to user, we use the following query:

<?php 
    $user_id = get_current_user_id();

    $the_query = new WP_Query (array(
    'post_status'=> 'publish',
    'post_type' => 'private_message',
    'meta_key'   => 'Private_for',
    'meta_value' => $user_id,
    ));
?>

<div class="private_message_list">
    <ul>
    
    <?php if ( $the_query->have_posts() ) : ?>
    <?php while ( $the_query->have_posts() ) : $the_query->the_post(); ?>

        <li class="private_message"><?php the_title(); ?></li>

    <?php endwhile; ?>
    <?php wp_reset_postdata(); ?>
    <?php else : ?>
        <p><?php esc_html_e( 'Sorry, there is no message to you.' ); ?></p>
    <?php endif; ?>

    </ul>
</div>

but the issue is:

we want to display a label on that part (in toolbar) when user has received the new private_message and then by clicking, never see the label again unless that user receives another private_message. Wow can we do that?

we mean some thing like this:
.png
.png

please help us