templates/template_html.j2

<h2>Prompt</h2>
Below is the prompt that is given to the model. <hr>
<h2>Instructions</h2>
<span style="color: #FF00FF;">Use the following pieces of context to answer the question at the end.<br>If you don't know the answer, just say that you don't know, <span style="color: #FF00FF; font-weight: bold;">don't try to make up an answer.</span></span><br>
<h2>Context</h2>
{% for doc in documents %}
    <details class="doc-box">
        <summary>
            <b>Doc {{ loop.index }}:</b> <span class="doc-short">{{ doc.content[:100] }}...</span>
        </summary>
        <div class="doc-full">{{ doc.content }}</div>
    </details>
{% endfor %}

<h2>Query</h2> <span style="color: #801616;">{{ query }}</span>

<style>
    .doc-box {
        padding: 10px;
        margin-top: 10px;
        background-color: #48a3ff;
        border: none;
    }
    .doc-short, .doc-full {
        color: white;
    }
    summary::-webkit-details-marker {
        color: white;
    }
</style>

<script>
document.addEventListener("DOMContentLoaded", function() {
    const detailsElements = document.querySelectorAll('.doc-box');

    detailsElements.forEach(detail => {
        detail.addEventListener('toggle', function() {
            const docShort = this.querySelector('.doc-short');
            if (this.open) {
                docShort.style.display = 'none';
            } else {
                docShort.style.display = 'inline';
            }
        });
    });
});
</script>