commit c0a779d981fc57a8b4495be1be8a29a643d98d68
from: Matthias L. Jugel <leo@thinkberg.com>
date: Sun Jul 13 12:16:56 2025 UTC

show citations in a separate box

commit - 80520ada7d6b1334f5e5d216668130cbbc6326d7
commit + c0a779d981fc57a8b4495be1be8a29a643d98d68
blob - 79042af64f8f42b28088c646fc2a90feb3fbed14
blob + 1041a451519402fee46759caecdac8b6dee1ea40
--- configuration.py
+++ configuration.py
@@ -19,25 +19,11 @@ SYSTEM_PROMPT: str = r"""
 * If the question is unclear, ask clarifying questions.
 
 IMPORTANT: 
-* Please provide an answer based solely on the provided sources. 
-* When referencing information from a source, cite the appropriate source(s) using their corresponding numbers.
-* Format citations as `[n]` where `n` is the sources number.
-* Do not include any additional explanations or notes in your citation.
-* Every answer should include at least one source citation.
-* Only cite a source when you are explicitly referencing it. 
-* If none of the sources are helpful, you should indicate that.
-
-Example:
-```
-Source 1:
-The sky is red in the evening and blue in the morning.
-Source 2:
-Water is wet when the sky is red.
----
-Answer the question based on the above context and history: When is water wet?
-
-Water will be wet when the sky is red [2], which occurs in the evening [1].
-```
+- Please provide an answer based solely on the provided sources.
+- Reference citations using the source(s) number.
+- Every answer should include at least one source citation.
+- Only cite a source when you are explicitly referencing it.
+- If none of the sources are helpful, you should indicate that.
 """
 HUMAN_TEMPLATE: str = r"""
 ---
blob - 6b2eff9b049d4d8bff074861c83f528f85dae2be
blob + 5847c1a9ceefd25689698578aa054c029e6b9664
--- rag_backend.py
+++ rag_backend.py
@@ -36,7 +36,7 @@ class RagBackend:
 
         # prepare references for reply
         references = [
-            f"{':'.join(doc.metadata.get('id').split(':')[:2])}):"
+            f"{':'.join(doc.metadata.get('id').split(':')[:2])}:"
             for (doc, _score) in context_docs
         ]
 
blob - c49c1f20b0b9dbd878d2247d5404c47bd4f0fd4d
blob + 9442611fc77a5381cf224932c347a239d6f3fbf8
--- templates/page.html
+++ templates/page.html
@@ -79,6 +79,90 @@
             border-bottom-left-radius: 4px;
         }
 
+        .msg-container {
+            display: flex;
+            width: 100%;
+        }
+
+        .references-box {
+            margin-left: 16px;
+            min-width: 200px;
+            max-width: 300px;
+            background: #f5f7fa;
+            border-radius: 8px;
+            padding: 12px;
+            align-self: flex-start;
+            border: 1px solid #e0e4e8;
+        }
+
+        .references-title {
+            font-weight: bold;
+            margin-bottom: 10px;
+            color: #444;
+            font-size: 0.9em;
+            border-bottom: 1px solid #e0e4e8;
+            padding-bottom: 5px;
+        }
+
+        .references-list {
+            list-style-type: none;
+            padding-left: 0;
+            margin: 0;
+            counter-reset: refs;
+        }
+
+        .references-list li {
+            margin-bottom: 8px;
+            font-size: 0.85em;
+            counter-increment: refs;
+            margin-left: 5px;
+        }
+
+        .references-list li::before {
+            content: "[" counter(refs) "] ";
+            font-weight: bold;
+        }
+
+        .references-list a {
+            color: #4a90e2;
+            text-decoration: none;
+            display: inline-block;
+            max-width: calc(100% - 30px);
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            vertical-align: bottom;
+            position: relative;
+        }
+
+        .references-list a:hover {
+            text-decoration: underline;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+            z-index: 5;
+        }
+
+        .references-list a::after {
+            content: attr(data-fullname);
+            position: absolute;
+            top: 100%;
+            left: 0;
+            background: #fff;
+            padding: 5px 8px;
+            border-radius: 4px;
+            border: 1px solid #ddd;
+            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
+            display: none;
+            z-index: 10;
+            max-width: 250px;
+            word-break: break-all;
+        }
+
+        .references-list a:hover::after {
+            display: block;
+        }
+
         #input-area {
             display: flex;
             border-top: 1px solid #eee;
@@ -203,14 +287,65 @@
     function appendMessage(sender, text, references = []) {
         const msgDiv = document.createElement('div');
         msgDiv.className = 'msg ' + sender;
-        const bubble = document.createElement('div');
-        bubble.className = 'bubble ' + sender;
-        if (sender === 'bot') {
+
+        if (sender === 'bot' && references && references.length > 0) {
+            // Create container for message with references
+            const msgContainer = document.createElement('div');
+            msgContainer.className = 'msg-container';
+
+            // Add the message bubble
+            const bubble = document.createElement('div');
+            bubble.className = 'bubble ' + sender;
             bubble.innerHTML = marked.parse(text);
+            msgContainer.appendChild(bubble);
+
+            // Create and add references box
+            const refsBox = document.createElement('div');
+            refsBox.className = 'references-box';
+
+            // Add title
+            const refsTitle = document.createElement('div');
+            refsTitle.className = 'references-title';
+            refsTitle.textContent = 'References';
+            refsBox.appendChild(refsTitle);
+
+            // Create the reference list
+            const refsList = document.createElement('ol');
+            refsList.className = 'references-list';
+
+            // Add each reference as a list item with link
+            references.forEach((ref, index) => {
+                const refItem = document.createElement('li');
+
+                // Parse the reference ID to get filename and page number
+                const idParts = ref.split(':');
+                const filename = idParts[0];
+                const pageNumber = idParts[1] || '1';
+
+                // Create the link to the document
+                const refLink = document.createElement('a');
+                refLink.href = `/static/files/${filename}?page=${pageNumber}#page=${pageNumber}`;
+                refLink.textContent = filename;
+                refLink.setAttribute('data-fullname', filename);
+                refLink.title = `${filename} (page ${pageNumber})`;
+                refLink.target = '_blank';
+
+                refItem.appendChild(refLink);
+                refsList.appendChild(refItem);
+            });
+
+            refsBox.appendChild(refsList);
+            msgContainer.appendChild(refsBox);
+
+            msgDiv.appendChild(msgContainer);
         } else {
+            // Regular message without references
+            const bubble = document.createElement('div');
+            bubble.className = 'bubble ' + sender;
             bubble.innerHTML = marked.parse(text);
+            msgDiv.appendChild(bubble);
         }
-        msgDiv.appendChild(bubble);
+
         chat.appendChild(msgDiv);
         chat.scrollTop = chat.scrollHeight;
     }
@@ -264,9 +399,9 @@
 
         try {
             const result = await sendMCPMessage(text, context_prompt);
-            console.log(result.ref);
-            appendMessage('bot', result.text);
-            history.push({question: text, answer: result.text});
+            const references = result.ref || [];
+            appendMessage('bot', result.text, references);
+            history.push({question: text, answer: result.text, references: references});
         } catch (error) {
             appendMessage('bot', `Error: ${error.message}`);
         } finally {