fixed issue with source

templates/index.html

@@ -51,7 +51,7 @@
                 Question Files
             </h2>
             <div class="flex items-center space-x-4">
-                <button class="bg-gray-200 dark:bg-gray-700 p-2 rounded-full" id="theme-toggle">
+                <button class="bg-gray-200 dark:bg-gray-700 p-2 rounded-full hidden" id="theme-toggle">
                     <i class="fas fa-moon dark:hidden">
                     </i>
                     <i class="fas fa-sun hidden dark:block">
@@ -158,6 +158,26 @@
             </div>
         </div>
     </div>
+    <div id="infoPopup" class="fixed inset-0 flex items-center justify-center hidden bg-black bg-opacity-50">
+        <div class="bg-dark rounded-lg p-6 w-96 relative" style="background-color: #0f141b;">
+            <button id="closePopup" class="absolute top-2 right-2 text-gray-600 hover:text-gray-800">
+                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24"
+                    stroke="currentColor">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+                </svg>
+            </button>
+            <h2 class="text-lg font-semibold mb-4">Source Information</h2>
+            <div id="popupContent" class="overflow-y-auto">
+                <p class="mb-2"><strong>Source:</strong> <span id="pop_up_source_name">Demonstrating Retrieval Augmented
+                        Generation for enhanced
+                        information retrieval.</span></p>
+                <p><strong>Content:</strong> <span id="pop_up_content">This project explores the implementation of RAG
+                        to improve search accuracy
+                        by combining pre-trained language models with external knowledge sources. It focuses on [mention
+                        specific aspects of your project, e.g., efficiency, specific data sources, etc.].</span></p>
+            </div>
+        </div>
+    </div>
     <script src="https://code.jquery.com/jquery-3.7.1.min.js"
         integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
     <script>
@@ -175,6 +195,10 @@
         const fileInput = document.getElementById('file-upload'); // input element
         const fileList = document.getElementById('file-list'); // div to display files uploaded
         const chat = document.getElementById('chat-messages');
+        const infoPopup = document.getElementById('infoPopup');
+        const closePopup = document.getElementById('closePopup');
+        const popUpContent = document.getElementById('pop_up_content');
+        const popUpSourceName = document.getElementById('pop_up_source_name');
 
         var file_list = [];
         var file_count = 0;
@@ -196,79 +220,28 @@
             }
         });
 
-        function add_user_message(msg) {
-            var item = document.createElement('div');
-            item.className = "flex items-start space-x-2 flex-row-reverse";
-            item.innerHTML = `<div class="bg-blue-500 text-white p-3 rounded-lg">
-                            <p>
-                                ${msg}
-                            </p>
-                        </div>`;
-            chat.appendChild(item);
-        }
-
-        function add_ai_response(resp) {
-            sources = ""
-            if (resp.is_relevant) {
-                sources += "Sources: "
-                resp.sources.forEach(function (source) {
-                    sources += '<a class="text-blue-500" href="#" style="background: #00000085;border-radius: 4px;padding: 1px 3px;margin: 2px;">'
-                    sources += source.metadata.source.split("\\")[1]
-                    if (source.metadata.page != undefined) {
-                        sources += ", Page:" + source.metadata.page
-                    }
-                    sources += '</a>,'
-                });
-
-            } else {
-                sources = "The Documents provided are not sufficient to answer the query provided, So response might not be accurate."
-            }
+        // infoLink.addEventListener('click', (event) => {
+        // event.preventDefault(); // Prevent default anchor behavior
+        // infoPopup.classList.remove('hidden');
+        // });
 
-            var item = document.createElement('div');
-            item.className = "flex items-start space-x-2";
-            item.innerHTML = `<div class="bg-gray-200 dark:bg-gray-700 p-3 rounded-lg">
-                            <p>
-                                ${resp.answer}
-                            </p>
-                            <p class="text-sm text-gray-500 dark:text-gray-400 mt-2">
-                                ${sources}
-                            </p>
-                        </div>`;
-            chat.appendChild(item);
+        function showPopUp(source, content) {
+            console.log("Showing pop up", source, content)
+            popUpSourceName.innerText = source;
+            popUpContent.innerText = content;
+            infoPopup.classList.remove('hidden');
         }
 
+        closePopup.addEventListener('click', () => {
+            infoPopup.classList.add('hidden');
+        });
 
-        // message send 
-        document.getElementById('message-form').addEventListener('submit', function (e) {
-            e.preventDefault();
-            const messageInput = document.getElementById('message-input');
-            const message = messageInput.value.trim();
-
-            messageInput.value = "";
-
-            add_user_message(message)
-
-            if (message) {
-                $.ajax({
-                    url: "/ask_query",
-                    method: "POST",
-                    data: {
-                        query: message
-                    },
-                    success: function (response) {
-                        resp = JSON.stringify(response)
-                        resp = JSON.parse(resp)
-                        console.log(resp);
-                        add_ai_response(resp);
-                    },
-                    error: function (xhr, status, error) {
-                        console.log(error);
-                    }
-                })
+        infoPopup.addEventListener('click', (event) => {
+            if (event.target === infoPopup) {
+                infoPopup.classList.add('hidden');
             }
         });
 
-
         document.addEventListener('DOMContentLoaded', () => {
             fileInput.addEventListener("change", () => {
                 const files = fileInput.files;
@@ -356,6 +329,98 @@
                 manageEmptyFileList();
             }
 
+            function add_user_message(msg) {
+                var item = document.createElement('div');
+                item.className = "flex items-start space-x-2 flex-row-reverse";
+                item.innerHTML = `<div class="bg-blue-500 text-white p-3 rounded-lg">
+                                <p>
+                                    ${msg}
+                                </p>
+                            </div>`;
+                chat.appendChild(item);
+            }
+
+            function add_ai_response(resp) {
+                var item = document.createElement('div');
+                item.className = "flex items-start space-x-2";
+
+                var responseDiv = document.createElement('div');
+                responseDiv.className = "bg-gray-200 dark:bg-gray-700 p-3 rounded-lg";
+
+                var answerPara = document.createElement('p');
+                answerPara.textContent = resp.answer;
+                responseDiv.appendChild(answerPara);
+
+                var sourcesPara = document.createElement('p');
+                sourcesPara.className = "text-sm text-gray-500 dark:text-gray-400 mt-2";
+
+                if (resp.is_relevant) {
+                    sourcesPara.textContent = "Sources: ";
+                    resp.sources.forEach(function (source) {
+                        let sourceLink = document.createElement('button');
+                        sourceLink.className = "text-blue-500 cursor-pointer hover:underline";
+                        sourceLink.style.background = "#00000085";
+                        sourceLink.style.borderRadius = "4px";
+                        sourceLink.style.padding = "1px 3px";
+                        sourceLink.style.margin = "2px";
+                        sourceLink.textContent = source.metadata.file_name.substr(0, 20) + "...";
+                        if (source.metadata.page !== undefined) {
+                            sourceLink.textContent += ", Page:" + source.metadata.page;
+                        }
+
+                        // Store data in data attributes
+                        sourceLink.dataset.sourceInfo = `${source.metadata.file_name.substr(0, 20)}... ${(source.metadata.page !== undefined) ? `(Page: ${source.metadata.page})` : ``}`;
+                        sourceLink.dataset.pageContent = source.page_content.substr(0, 300) + "...";
+
+                        console.log("Made source");
+
+                        sourceLink.addEventListener('click', function () {
+                            console.log("Clicked source");
+                            showPopUp(this.dataset.sourceInfo, this.dataset.pageContent);
+                        });
+
+                        sourcesPara.appendChild(sourceLink);
+                        sourcesPara.append(", ");  // Add comma and space after each link
+                    });
+                } else {
+                    sourcesPara.textContent = "The Documents provided are not sufficient to answer the query provided, So response might not be accurate.";
+                }
+
+                responseDiv.appendChild(sourcesPara);
+                item.appendChild(responseDiv);
+                chat.appendChild(item);
+            }
+            // message send 
+            document.getElementById('message-form').addEventListener('submit', function (e) {
+                e.preventDefault();
+                const messageInput = document.getElementById('message-input');
+                const message = messageInput.value.trim();
+
+                messageInput.value = "";
+
+                add_user_message(message)
+
+                if (message) {
+                    $.ajax({
+                        url: "/ask_query",
+                        method: "POST",
+                        data: {
+                            query: message
+                        },
+                        success: function (response) {
+                            resp = JSON.stringify(response)
+                            resp = JSON.parse(resp)
+                            console.log(resp);
+                            add_ai_response(resp);
+                        },
+                        error: function (xhr, status, error) {
+                            console.log(error);
+                        }
+                    })
+                }
+            });
+
+
         });
 
         function manageEmptyFileList() {

utils.py

@@ -77,7 +77,7 @@ def generate_query_response(query, db, llm_model, PROMPT_TEMPLATE):
         top_related = db.similarity_search_with_relevance_scores(query, k=4)
         
         # Check relevance of top result
-        is_relevant = top_related[0][1] >= 0.6 if top_related else False
+        is_relevant = top_related[0][1] >= 0.4 if top_related else False
         
         # Build context from relevant chunks
         context = "\n".join([chunk[0].page_content for chunk in top_related])