From 06a47ee457c727a4db0419274b309a83fbad1095 Mon Sep 17 00:00:00 2001
From: sabaimran <65192171+sabaimran@users.noreply.github.com>
Date: Sat, 8 Jun 2024 15:17:09 +0530
Subject: [PATCH] Add language-specific syntax highlighting via highlight.js
 (#802)

* Add language-specific syntax highlighting via highlight.js

- Add highlight.js to our assets CDN for fast load and compliance with the CSP
- See other stylesheets options here: https://cdnjs.com/libraries/highlight.js

* Bonus: set min-height to prevent increasing length of the sessions pane

* Fix references rendering and add highlight.js in public conversation
---
 src/interface/desktop/chat.html                 | 12 +++++++++++-
 src/khoj/interface/web/chat.html                |  9 +++++++++
 src/khoj/interface/web/public_conversation.html | 17 +++++++++++++++--
 3 files changed, 35 insertions(+), 3 deletions(-)

diff --git a/src/interface/desktop/chat.html b/src/interface/desktop/chat.html
index fe48c79b..c8d02545 100644
--- a/src/interface/desktop/chat.html
+++ b/src/interface/desktop/chat.html
@@ -10,6 +10,8 @@
     </head>
     <script type="text/javascript" src="./assets/purify.min.js?v={{ khoj_version }}"></script>
     <script type="text/javascript" src="./assets/markdown-it.min.js"></script>
+    <link rel="stylesheet" href="https://assets.khoj.dev/higlightjs/solarized-dark.min.css">
+    <script src="https://assets.khoj.dev/higlightjs/highlight.min.js"></script>
     <script src="./utils.js"></script>
 
     <script>
@@ -314,6 +316,13 @@
                 codeElement.parentNode.insertBefore(parentDiv, codeElement);
                 // Move the code element into the parent div
                 parentDiv.appendChild(codeElement);
+
+                // Check if hijs has been loaded
+                if (typeof hljs !== 'undefined') {
+                    // Highlight the code block
+                    hljs.highlightBlock(codeElement);
+                }
+
                 // Add a copy button to each element
                 if (willReplace === true) {
                     let copyButton = document.createElement('button');
@@ -1353,7 +1362,8 @@
         }
 
         div#side-panel-wrapper {
-            display: flex
+            display: flex;
+            min-height: 0;
         }
 
 
diff --git a/src/khoj/interface/web/chat.html b/src/khoj/interface/web/chat.html
index ced34ca7..572ab9db 100644
--- a/src/khoj/interface/web/chat.html
+++ b/src/khoj/interface/web/chat.html
@@ -30,6 +30,8 @@
     <script type="text/javascript" src="/static/assets/purify.min.js?v={{ khoj_version }}"></script>
     <script type="text/javascript" src="/static/assets/utils.js?v={{ khoj_version }}"></script>
     <script type="text/javascript" src="/static/assets/markdown-it.min.js?v={{ khoj_version }}"></script>
+    <link rel="stylesheet" href="https://assets.khoj.dev/higlightjs/solarized-dark.min.css">
+    <script src="https://assets.khoj.dev/higlightjs/highlight.min.js"></script>
     <script>
         let welcome_message = `
 Hi, I am Khoj, your open, personal AI 👋🏽. I can:
@@ -447,6 +449,13 @@ To get started, just start typing below. You can also type / to see a list of co
                 codeElement.parentNode.insertBefore(parentDiv, codeElement);
                 // Move the code element into the parent div
                 parentDiv.appendChild(codeElement);
+
+                // Check if hijs has been loaded
+                if (typeof hljs !== 'undefined') {
+                    // Highlight the code block
+                    hljs.highlightBlock(codeElement);
+                }
+
                 // Add a copy button to each code block, if it doesn't already exist
                 if (willReplace === true) {
                     let copyButton = document.createElement('button');
diff --git a/src/khoj/interface/web/public_conversation.html b/src/khoj/interface/web/public_conversation.html
index afade059..86dba693 100644
--- a/src/khoj/interface/web/public_conversation.html
+++ b/src/khoj/interface/web/public_conversation.html
@@ -16,6 +16,9 @@
 
         <!-- To automatically render math in text elements, include the auto-render extension: -->
         <script defer src="https://assets.khoj.dev/katex/auto-render.min.js" onload="renderMathInElement(document.body);"></script>
+
+        <link rel="stylesheet" href="https://assets.khoj.dev/higlightjs/solarized-dark.min.css">
+        <script src="https://assets.khoj.dev/higlightjs/highlight.min.js"></script>
     </head>
     <script type="text/javascript" src="/static/assets/utils.js?v={{ khoj_version }}"></script>
     <script type="text/javascript" src="/static/assets/markdown-it.min.js?v={{ khoj_version }}"></script>
@@ -69,12 +72,15 @@ To get started, just start typing below. You can also type / to see a list of co
             return `${time_string}, ${date_string}`;
         }
 
-        function generateReference(reference, index) {
+        function generateReference(referenceJson, index) {
+            let reference = referenceJson.hasOwnProperty("compiled") ? referenceJson.compiled : referenceJson;
+            let referenceFile = referenceJson.hasOwnProperty("file") ? referenceJson.file : null;
+
             // Escape reference for HTML rendering
             let escaped_ref = reference.replaceAll('"', '&quot;');
 
             // Generate HTML for Chat Reference
-            let short_ref = escaped_ref.slice(0, 140);
+            let short_ref = escaped_ref.slice(0, 100);
             short_ref = short_ref.length < escaped_ref.length ? short_ref + "..." : short_ref;
             let referenceButton = document.createElement('button');
             referenceButton.textContent = short_ref;
@@ -383,6 +389,13 @@ To get started, just start typing below. You can also type / to see a list of co
                 codeElement.parentNode.insertBefore(parentDiv, codeElement);
                 // Move the code element into the parent div
                 parentDiv.appendChild(codeElement);
+
+                // Check if hijs has been loaded
+                if (typeof hljs !== 'undefined') {
+                    // Highlight the code block
+                    hljs.highlightBlock(codeElement);
+                }
+
                 // Add a copy button to each code block, if it doesn't already exist
                 if (willReplace === true) {
                     let copyButton = document.createElement('button');