ail-framework/var/www/templates/chats_explorer/block_message.html

<style>
    .chat-message-left,
    .chat-message-right {
        display: flex;
        flex-shrink: 0;
    }
    .chat-message-right {
        flex-direction: row-reverse;
        margin-left: auto
        }
    .divider:after,
    .divider:before {
        content: "";
        flex: 1;
        height: 2px;
        background: #eee;
    }
    .object_image {
        max-width: 50%;
        filter: blur(5px);
    }
</style>

<div class="chat-message-left pb-1">
    <div>
        <a href="{{ url_for('chats_explorer.objects_user_account')}}?subtype={{ message['user-account']['subtype'] }}&id={{ message['user-account']['id'] }}">
            <img src="{% if message['user-account']['icon'] %}{{ url_for('objects_image.image', filename=message['user-account']['icon'])}}{% else %}{{ url_for('static', filename='image/ail-icon.png') }}{% endif %}"
                 class="rounded-circle mr-1" alt="{{ message['user-account']['id'] }}" width="60" height="60"  loading="lazy">
        </a>
        <div class="text-center">
            <div class="text-muted small text-nowrap">{{ message['date'] }}</div>
            <div class="text-muted small text-nowrap" style="font-size: 90%">{{ message['hour'] }}</div>
        </div>
    </div>
    <div class="flex-shrink-1 bg-light rounded py-2 px-3 ml-4 pb-4" style="overflow-x: auto">
        {% if 'forwarded_from' in message %}
            <div>
                <small class="text-secondary"><i>forwarded from:</i></small>
                <div class="card">
                    <div class="card-header">
                        <h4 class="text-secondary mb-0">
                            {% if message['forwarded_from']['icon'] %}
                                <a href="{{ url_for('chats_explorer.objects_user_account')}}?subtype={{ message['user-account']['subtype'] }}&id={{ message['user-account']['id'] }}">
                                    <img src="{{ url_for('objects_image.image', filename=message['forwarded_from']['icon'])}}" class="rounded-circle mr-1" alt="{{ message['forwarded_from']['id'] }}" width="40" height="40" loading="lazy">
                                </a>
{#                            {% else %}#}
{#                                <svg height="30" width="30">#}
{#                                    <g class="nodes">#}
{#                                        <circle cx="15" cy="15" r="15" fill="{{ message['forwarded_from']["svg_icon"]["color"] }}"></circle>#}
{#                                        <text x="15" y="15" text-anchor="middle" dominant-baseline="central" class="{{ message['forwarded_from']["svg_icon"]["style"] }}" font-size="16px">{{ message['forwarded_from']["svg_icon"]["icon"] }}</text>#}
{#                                    </g>#}
{#                                </svg>#}
                            {% endif %}
                            {% if message['forwarded_from']['name'] %}{{ message['forwarded_from']['name'] }}{% endif %} :  <small><a href="{{ url_for('chats_explorer.chats_explorer_chat') }}?subtype={{ message['forwarded_from']['subtype'] }}&id={{ message['forwarded_from']['id'] }}">{{ message['forwarded_from']['id'] }}</a></small>
                        </h4>
                    </div>
                </div>
            </div>
        {% endif %}
        <div class="font-weight-bold mb-1">
            {% if message['user-account']['username'] %}
                {{ message['user-account']['username']['id'] }}
            {% else %}
                {{ message['user-account']['id'] }}
            {% endif %}
        </div>
        {% if message['reply_to'] %}
            <div class="flex-shrink-1 bg-white border rounded py-2 px-3 ml-4 mb-3" style="overflow-x: auto">
                <div class="font-weight-bold mb-1">
                    {% if message['reply_to']['user-account']['username'] %}
                        {{ message['reply_to']['user-account']['username']['id'] }}
                    {% else %}
                        {{ message['reply_to']['user-account']['id'] }}
                    {% endif %}
                </div>
                <pre class="my-0">{{ message['reply_to']['content'] }}</pre>
                {% if message['reply_to']['translation'] %}
                    <hr class="m-1">
                    <div class="my-0 text-secondary">{{ message['reply_to']['translation'] }}</div>
                {% endif %}
                {% for tag in message['reply_to']['tags'] %}
                    <span class="badge badge-{{ bootstrap_label[loop.index0 % 5] }}">{{ tag }}</span>
                {%  endfor %}
                <div class="text-muted small text-nowrap">{{ message['reply_to']['full_date'] }}</div>
    {#              <div class="">#}
    {#                  <a class="btn btn-light btn-sm text-secondary py-0" href="{{ url_for('correlation.show_correlation')}}?type={{ message['reply_to']['type'] }}&subtype={{ message['reply_to']['subtype'] }}&id={{ message['reply_to']['id'] }}"><i class="fas fa-project-diagram"></i></a>#}
    {#                  <a class="btn btn-light btn-sm text-secondary py-0" href="{{ message['reply_to']['link'] }}"><i class="fas fa-eye"></i></a>#}
    {#              </div>#}
            </div>
        {% endif %}
        {% if message['images'] %}
            {% for message_image in message['images'] %}
                <img class="object_image mb-1" src="{{ url_for('objects_image.image', filename=message_image['id'])}}"  loading="lazy">
                {% if message_image['ocr'] %}
                    <span>
                        <a class="btn btn-info" target="_blank" href="{{ url_for('objects_ocr.object_ocr', id=message_image['id'])}}"><i class="fas fa-expand"></i> OCR</a>
                    </span>
                {% endif %}
                {% if message['qrcodes'] %}
                    {% for qrcode in message['qrcodes'] %}
                        <span>
                            <a class="btn btn-info" target="_blank" href="{{ url_for('correlation.show_correlation', type='qrcode', id=qrcode['id'])}}" style="max-width: 49%">
                                <i class="fas fa-qrcode fa-lg"></i> {{ qrcode['content'] }}
                                <div>
                                    {% for tag in qrcode['tags'] %}
                                        <span class="badge badge-{{ bootstrap_label[loop.index0 % 5] }}">{{ tag }}</span>
                                    {%  endfor %}
                                </div>
                            </a>
                        </span>

                    {% endfor %}
                {% endif %}
            {%  endfor %}
        {% endif %}
        {% if message['files-names'] %}
            {% for file_name in message['files-names'] %}
                <div class="flex-shrink-1 bg-white border-primary text-secondary rounded py-2 px-3 ml-4 mb-3" style="overflow-x: auto">
                    <i class="far fa-file fa-3x"></i> {{ file_name }}
                </div>
            {%  endfor %}
        {% endif %}
        {% if not message['extracted'] %}
            <pre class="my-0" style="white-space: pre-wrap;">{{ message['content'] }}</pre>
        {% else %}
            <pre class="my-0" style="white-space: pre-wrap;">{{ message['content'][:message['extracted'][0][0]] }}{% for row in message['extracted'] %}<span class="hg-text" data-toggle="popover" data-trigger="hover" data-html="true" title="Extracted:" data-content="<ul class=&quot;list-group&quot;>{% for r in row[3] %}<li class=&quot;list-group-item&quot;><div><svg height=&quot;26&quot; width=&quot;26&quot;><g class=&quot;nodes&quot;><circle cx=&quot;13&quot; cy=&quot;13&quot; r=&quot;13&quot; fill=&quot;{{ message['extracted_matches'][r[0]]['icon']['color'] }}&quot;></circle><text x=&quot;13&quot; y=&quot;13&quot; text-anchor=&quot;middle&quot; dominant-baseline=&quot;central&quot; class=&quot;{{ message['extracted_matches'][r[0]]['icon']['style'] }}&quot; font-size=&quot;16px&quot;>{{ message['extracted_matches'][r[0]]['icon']['icon'] }}</text></g></svg> {{ message['extracted_matches'][r[0]]['subtype'] }}</div>{{ message['extracted_matches'][r[0]]['id'] }} <div><b>{{ r[1] }}</b></div></li>{% endfor %}</ul>" id="{{ row[0] }}:{{ row[1] }}">{{ message['content'][row[0]:row[1]] }}</span>{% if loop.index + 1 > message['extracted']|length %}{{ message['content'][message['extracted'][-1][1]:] }}{% else %}{{ message['content'][row[1]:message['extracted'][loop.index][0]] }}{% endif %}{% endfor %}</pre>
        {% endif %}
        {% if message['translation'] %}
            <hr class="m-1">
            <pre class="my-0 text-secondary" style="white-space: pre-wrap;">{{ message['translation'] }}</pre>

        {% endif %}
        {% for reaction in message['reactions'] %}
            <span class="border rounded px-1">{{ reaction }} {{ message['reactions'][reaction] }}</span>
        {%  endfor %}
        {% if message['thread'] %}
            <hr class="mb-1">
            <div class="my-2 text-center">
                <a href="{{ url_for('chats_explorer.objects_thread_messages')}}?subtype={{ message['thread']['subtype'] }}&id={{ message['thread']['id'] }}"><i class="far fa-comment"></i> {{ message['thread']['nb'] }} Messages</a>
            </div>
        {% endif %}
        {% for tag in message['tags'] %}
            <span class="badge badge-{{ bootstrap_label[loop.index0 % 5] }}">{{ tag }}</span>
        {%  endfor %}
        <div class="">

            {% set mess_id_escape= message['id'] | replace("/", "_") %}
            <span class="btn btn-outline-dark p-0 px-1" type="button" data-toggle="collapse" data-target="#collapseTrans{{ mess_id_escape }}" aria-expanded="false" aria-controls="collapseTrans{{ mess_id_escape }}">
                <i class="fas fa-language"></i> {% if message['language'] %}{{ message['language'] }}{% endif %}
            </span>
            <div class="collapse" id="collapseTrans{{ mess_id_escape }}">
                <div class="card card-body">
                    <form method="post" action="{{ url_for('chats_explorer.objects_message_translate') }}">
                        <input type="text" id="id" name="id" value="{{message['id']}}" hidden>
                        <span class="badge badge-primary">Source:</span>
                        <span class="">
                            <select id="language_target" name="language_target" class="form-select" aria-label="Message Language" onchange="$('#translation').val('');">
                                    <option selected value="{{ message['language'] }}">{{ message['language'] }}</option>
                                {% for language in translation_languages %}
                                    <option value="{{ language }}">{{ translation_languages[language] }}</option>
                                {% endfor %}
                            </select>
                        </span>
                        {% if translation_target %}
                            <input type="text" id="target" name="target" value="{{translation_target}}" hidden>
                            &nbsp;&nbsp;&nbsp;&nbsp;<span class="badge badge-primary">Target:</span><span>{{translation_target}}</span>
                            <textarea class="form-control" id="translation" name="translation">{{ message['translation'] }}</textarea>
                            <button class="btn btn-dark" type="submit">
                                <i class="fas fa-pen-alt"> Update Language or Translation</i>
                            </button>
                        {% else %}
                            <button class="btn btn-dark" type="submit">
                                <i class="fas fa-pen-alt"> Update Language</i>
                            </button>
                        {% endif %}
                    </form>
                    <div>
                        <a class="btn btn-primary" href="{{ url_for('chats_explorer.objects_message_detect_language')}}?id={{ message['id'] }}">
                            <i class="fas fa-redo"></i> Detect Language
                        </a>
                    </div>
                </div>
            </div>

            <a class="btn btn-light btn-sm text-secondary px-1" href="{{ url_for('correlation.show_correlation')}}?type={{ message['type'] }}&subtype={{ message['subtype'] }}&id={{ message['id'] }}"><i class="fas fa-project-diagram"></i></a>
            <a class="btn btn-light btn-sm text-secondary px-1" href="{{ message['link'] }}"><i class="fas fa-eye"></i></a>
        </div>
    </div>
</div>