eveAI/eveai_app/templates/interaction/view_chat_session.html

{% extends "base.html" %}
{% block title %}Session Overview{% endblock %}

{% block content_title %}Session Overview{% endblock %}
{% block content_description %}An overview of the chat session.{% endblock %}

{% block content %}
<div class="container mt-5">
    <h4>Chat Session Details</h4>
    <div class="card mb-4">
        <div class="card-header">
            <h5>Session Information</h5>
        </div>
        <div class="card-body">
            <p><strong>Session ID:</strong> {{ chat_session.session_id }}</p>
            <p><strong>User:</strong> {{ chat_session.user.user_name if chat_session.user else 'Anonymous' }}</p>
            <p><strong>Start:</strong> {{ chat_session.session_start | to_local_time(chat_session.timezone) }}</p>
            <p><strong>End:</strong> {{ chat_session.session_end | to_local_time(chat_session.timezone) if chat_session.session_end else 'Ongoing' }}</p>
        </div>
    </div>

    <h5>Interactions</h5>
    <div class="accordion" id="interactionsAccordion">
        {% for interaction, id, question_at, specialist_arguments, specialist_results, specialist_name, specialist_type in interactions %}
        <div class="accordion-item">
            <p class="accordion-header" id="heading{{ loop.index }}">
                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                        data-bs-target="#collapse{{ loop.index }}" aria-expanded="false"
                        aria-controls="collapse{{ loop.index }}">
                    <div class="interaction-header">
                        <div class="interaction-metadata">
                            <div class="interaction-time text-muted">
                                {{ question_at | to_local_time(chat_session.timezone) }}
                            </div>
                            <div class="specialist-info">
                                <span class="badge bg-primary">{{ specialist_name if specialist_name else 'No Specialist' }}</span>
                                <span class="badge bg-secondary">{{ specialist_type if specialist_type else '' }}</span>
                            </div>
                        </div>
                        <div class="interaction-question">
                            {{ specialist_results.detailed_query if specialist_results and specialist_results.detailed_query else specialist_arguments.query }}
                        </div>
                    </div>
                </button>
            </p>
            <div id="collapse{{ loop.index }}" class="accordion-collapse collapse" aria-labelledby="heading{{ loop.index }}"
                 data-bs-parent="#interactionsAccordion">
                <div class="accordion-body">
                    <!-- Arguments Section -->
                    {% if specialist_arguments %}
                    <div class="mb-4">
                        <h6 class="mb-3">Specialist Arguments:</h6>
                        <div id="args-viewer-{{ loop.index }}" class="json-viewer" style="height: 300px; width: 100%;"></div>
                        <div id="args-viewer-{{ loop.index }}-data" class="d-none">{{ specialist_arguments | tojson(indent=2) }}</div>
                    </div>
                    {% endif %}


                    <!-- Results Section -->
                    {% if specialist_results %}
                    <div class="mb-4">
                        <h6 class="mb-3">Specialist Results:</h6>
                        <div id="results-viewer-{{ loop.index }}" class="json-viewer" style="height: 300px; width: 100%;"></div>
                        <div id="results-viewer-{{ loop.index }}-data" class="d-none">{{ specialist_results | tojson(indent=2) }}</div>
                    </div>
                    {% endif %}

                    <!-- Related Documents Section -->
                    {% if embeddings_dict.get(id) %}
                    <div class="mt-4">
                        <h6>Related Documents:</h6>
                        <ul class="list-group">
                            {% for embedding in embeddings_dict[id] %}
                            <li class="list-group-item">
                                {% if embedding.url %}
                                <a href="{{ embedding.url }}" target="_blank" class="text-decoration-none">
                                    <i class="material-icons align-middle me-2">link</i>
                                    {{ embedding.url }}
                                </a>
                                {% else %}
                                <i class="material-icons align-middle me-2">description</i>
                                {{ embedding.object_name }}
                                {% endif %}
                            </li>
                            {% endfor %}
                        </ul>
                    </div>
                    {% endif %}
                </div>
            </div>
        </div>
        {% endfor %}
    </div>
</div>
{% endblock %}
{% block scripts %}
<script>
document.addEventListener('DOMContentLoaded', function() {
    // JSONEditor initialiseren wanneer een accordion item wordt geopend
    const accordionButtons = document.querySelectorAll('.accordion-button');

    accordionButtons.forEach(function(button, index) {
        button.addEventListener('click', function() {
            // Voeg een kleine vertraging toe om te zorgen dat de accordion volledig is geopend
            setTimeout(function() {
                const isExpanded = button.getAttribute('aria-expanded') === 'true';

                if (isExpanded) {
                    // Als de json-viewer class niet wordt gebruikt, handmatige initialisatie
                    const loopIndex = index + 1;

                    // Controleer of er elementen zijn die niet automatisch zijn geïnitialiseerd
                    // Dit is een backup voor het geval de automatische initialisatie niet werkt
                    const containers = document.querySelectorAll(`#collapse${loopIndex} .json-editor-container`);
                    containers.forEach(function(container) {
                        if (!container.classList.contains('jsoneditor-initialized')) {
                            const dataElement = document.getElementById(`${container.id}-data`);
                            if (dataElement) {
                                try {
                                    const jsonData = JSON.parse(dataElement.value || dataElement.textContent);
                                    window.EveAI.JsonEditors.initializeReadOnly(container.id, jsonData);
                                } catch (e) {
                                    console.error(`Error parsing JSON for ${container.id}:`, e);
                                }
                            }
                        }
                    });
                }
            }, 300);
        });
    });
});
</script>
{% endblock %}