From 87d1e1341d939cdee28527447e1e89bbeb670f0b Mon Sep 17 00:00:00 2001
From: Debanjum Singh Solanky <debanjum@gmail.com>
Date: Wed, 8 Mar 2023 18:04:44 -0600
Subject: [PATCH] Show reference notes used as response context in chat
 interface

---
 src/khoj/interface/web/chat.html | 38 ++++++++++++++++++++++++++------
 src/khoj/routers/api_beta.py     |  2 +-
 2 files changed, 32 insertions(+), 8 deletions(-)

diff --git a/src/khoj/interface/web/chat.html b/src/khoj/interface/web/chat.html
index f72824b8..1e0ba5fa 100644
--- a/src/khoj/interface/web/chat.html
+++ b/src/khoj/interface/web/chat.html
@@ -16,6 +16,11 @@
             return `${time_string}, ${date_string}`;
         }
 
+        function generateReference(reference, index) {
+            // Generate HTML for Chat Reference
+            return `<sup><a title="${reference}">${index}</a></sup>`;
+        }
+
         function renderMessage(message, by, dt=null) {
             let message_time = formatDate(dt ?? new Date());
             let by_name =  by == "khoj" ? "🦅 Khoj" : "🤔 You";
@@ -31,7 +36,7 @@
 
         function chat() {
             // Extract required fields for search from form
-            query = document.getElementById("chat-input").value.trim();
+            let query = document.getElementById("chat-input").value.trim();
             console.log(`Query: ${query}`);
 
             // Short circuit on empty query
@@ -43,16 +48,25 @@
             document.getElementById("chat-input").value = "";
 
             // Generate backend API URL to execute query
-            url = `/api/beta/chat?q=${encodeURIComponent(query)}`;
+            let url = `/api/beta/chat?q=${encodeURIComponent(query)}`;
 
             // Call specified Khoj API
             fetch(url)
                 .then(response => response.json())
-                .then(data => data.response)
-                .then(response => {
+                .then(data => {
                     // Render message by Khoj to chat body
-                    console.log(response);
-                    renderMessage(response, "khoj");
+                    console.log(data.response);
+                    let references = ''
+                    if (data.context) {
+                        references = data
+                            .context
+                            .split("\n\n# ")
+                            .map((reference, index) => {
+                                return generateReference(reference, index);
+                            })
+                            .join("<sup>,</sup>");
+                    }
+                    renderMessage(data.response+references, "khoj");
                 });
         }
 
@@ -70,7 +84,17 @@
                 .then(chat_logs => {
                     // Render conversation history, if any
                     chat_logs.forEach(chat_log => {
-                        renderMessage(chat_log.message, chat_log.by, new Date(chat_log.created));
+                        let references = '';
+                        if (chat_log.context) {
+                            references = chat_log
+                                .context
+                                .split("\n\n# ")
+                                .map((reference, index) => {
+                                    return generateReference(reference, index)
+                                })
+                                .join("<sup>,</sup>");
+                        }
+                        renderMessage(chat_log.message+references, chat_log.by, new Date(chat_log.created));
                     });
                 });
 
diff --git a/src/khoj/routers/api_beta.py b/src/khoj/routers/api_beta.py
index 433d24d3..1ee6e552 100644
--- a/src/khoj/routers/api_beta.py
+++ b/src/khoj/routers/api_beta.py
@@ -104,7 +104,7 @@ def chat(q: Optional[str] = None):
         q, gpt_response, user_message_metadata={"context": collated_result}, conversation_log=meta_log.get("chat", [])
     )
 
-    return {"status": status, "response": gpt_response}
+    return {"status": status, "response": gpt_response, "context": collated_result}
 
 
 @schedule.repeat(schedule.every(5).minutes)