Pushing details and using magenta

templates/template_html.j2

@@ -1,60 +1,30 @@
+<h2>Prompt</h2>
+Below is the prompt that is given to the model. <br><br>
 <b>Instructions</b>:
-<span style="color: green;">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: green; font-weight: bold;">don't try to make up an answer.</span></span><br>
+<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>
 
 <b>Context</b>:
 {% for doc in documents %}
-    <div id="box{{ loop.index }}" class="doc-box">
-        <div class="doc-label"><b>Doc {{ loop.index }}</b></div>
-        <span id="doc{{ loop.index }}-short" class="doc-short">{{ doc.content[:50] }}...</span>
-        <span id="doc{{ loop.index }}-full" class="doc-full">{{ doc.content }}</span>
-    </div>
+    <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 %}
 <b>Query</b>: <span style="color: yellow;">{{ query }}</span>
 
 <style>
     .doc-box {
-        border: 2px solid #aaa;
         padding: 10px;
         margin-top: 10px;
-        border-radius: 5px;
         background-color: #1E90FF;
-        position: relative;
-        cursor: pointer;
-    }
-    .doc-label {
-        font-size: 0.8em;
-        position: absolute;
-        top: 10px;
-        left: 10px;
+        border: none;
     }
     .doc-short, .doc-full {
         color: white;
-        display: block;
-        margin-top: 20px;
-    }
-    .doc-full {
-        display: none;
     }
-</style>
-
-<script>
-document.addEventListener("DOMContentLoaded", function() {
-    {% for doc in documents %}
-        document.getElementById("box{{ loop.index }}").addEventListener("click", function() {
-            toggleContent('doc{{ loop.index }}');
-        });
-    {% endfor %}
-});
-
-function toggleContent(docID) {
-    var shortContent = document.getElementById(docID + '-short');
-    var fullContent = document.getElementById(docID + '-full');
-    if (fullContent.style.display === 'none') {
-        shortContent.style.display = 'none';
-        fullContent.style.display = 'block';
-    } else {
-        shortContent.style.display = 'block';
-        fullContent.style.display = 'none';
+    summary::-webkit-details-marker {
+        color: white;
     }
-}
-</script>
+</style>