_message.html.twig

{% if message.role.value == 'assistant' %}
    {{ _self.bot(message.content, latest: latest) }}
{% else %}
    {{ _self.user(message.content) }}
{% endif %}

{% macro bot(content, loading = false, latest = false) %}
    <div class="d-flex align-items-baseline mb-4">
        <div class="bot avatar rounded-3 shadow-sm">
            {{ ux_icon('fluent:bot-24-filled', { height: '45px', width: '45px' }) }}
        </div>
        <div class="ps-2">
            {% if loading %}
                <div class="bot-message loading d-inline-block p-2 px-3 m-1 border border-light-subtle shadow-sm">
                    <span class="spinner-border spinner-border-sm me-1"></span>
                    <i>{{ content }}</i>
                </div>
            {% else %}
                <div class="bot-message d-inline-block p-2 px-3 m-1 border border-light-subtle shadow-sm">
                    {% if latest and app.request.xmlHttpRequest %}
                        <span
                                data-controller="symfony--ux-typed"
                                data-symfony--ux-typed-show-cursor-value="false"
                                data-symfony--ux-typed-type-speed-value="0"
                                data-symfony--ux-typed-strings-value="{{ [content|markdown_to_html]|json_encode|e('html_attr') }}"
                        ></span>
                    {% else %}
                        {{ content|markdown_to_html }}
                    {% endif %}
                </div>
            {% endif %}
        </div>
    </div>
{% endmacro %}

{% macro user(content, loading = false) %}
    <div class="d-flex align-items-baseline text-end justify-content-end mb-4">
        <div class="pe-2">
            {% for item in content %}
                <div class="user-message d-inline-block p-2 px-3 m-1 border border-light-subtle shadow-sm">
                    {% if loading %}
                        <span class="spinner-border spinner-border-sm me-1"></span><i>{{ item.text }}</i>
                    {% else %}
                        {{ item.text }}
                    {% endif %}
                </div>
            {% endfor %}
        </div>
        <div class="user avatar rounded-3 shadow-sm">
            {{ ux_icon('solar:user-bold', { width: '45px', height: '45px' }) }}
        </div>
    </div>
{% endmacro %}