From 5efe6a8721ad0562aa376a85fbfdb47eadf6658b Mon Sep 17 00:00:00 2001
From: msukkari <michael.sukkarieh@mail.mcgill.ca>
Date: Tue, 29 Jul 2025 18:15:44 -0700
Subject: [PATCH] make inline citations pop

---
 packages/web/src/app/globals.css              | 37 +++++++++++++++++--
 .../chatThread/chatThreadListItem.tsx         |  7 +++-
 .../chatThread/markdownRenderer.tsx           |  2 +-
 3 files changed, 40 insertions(+), 6 deletions(-)

diff --git a/packages/web/src/app/globals.css b/packages/web/src/app/globals.css
index f2b676ba..b274fc8f 100644
--- a/packages/web/src/app/globals.css
+++ b/packages/web/src/app/globals.css
@@ -100,8 +100,12 @@
 
     --chat-reference: #02255f11;
     --chat-reference-hover: #02225f22;
-    --chat-reference-selected: #3b83f640;
-    --chat-reference-selected-border: #e052b8;
+    --chat-reference-selected: hsl(217, 91%, 78%);
+    --chat-reference-selected-border: hsl(217, 91%, 60%);
+    
+    --chat-citation: #3b83f640;
+    --chat-citation-hover: hsl(217, 91%, 70%);
+    --chat-citation-border: hsl(217, 91%, 60%);
 
     --warning: #ca8a04;
   }
@@ -187,8 +191,12 @@
 
     --chat-reference: #2c313aad;
     --chat-reference-hover: #374151;
-    --chat-reference-selected: #1e3b8a87;
-    --chat-reference-selected-border: #60a5fa;
+    --chat-reference-selected: hsl(217, 40%, 30%);
+    --chat-reference-selected-border: hsl(217, 91%, 60%);
+    
+    --chat-citation: #1e3b8a87;
+    --chat-citation-hover: hsl(217, 91%, 55%);
+    --chat-citation-border: hsl(217, 91%, 60%);
 
     --warning: #fde047;
   }
@@ -261,6 +269,27 @@
   background-color: var(--chat-reference-hover) !important;
 }
 
+/* Separate hover class for inline chat citations */
+.chat-citation--hover {
+  background-color: var(--chat-citation-hover) !important;
+}
+
+/* Chat citation styling for inline citations in chat responses */
+.bg-chat-citation {
+  background-color: var(--chat-citation);
+  border: 1px solid var(--chat-citation-border);
+  font-weight: 500;
+}
+
+.bg-chat-citation:hover,
+.hover\:bg-chat-citation-hover:hover {
+  background-color: var(--chat-citation-hover);
+}
+
+.bg-chat-citation-hover {
+  background-color: var(--chat-citation-hover);
+}
+
 .cm-editor.cm-focused {
   outline: none !important;
 }
diff --git a/packages/web/src/features/chat/components/chatThread/chatThreadListItem.tsx b/packages/web/src/features/chat/components/chatThread/chatThreadListItem.tsx
index 5d75e9c7..09197fad 100644
--- a/packages/web/src/features/chat/components/chatThread/chatThreadListItem.tsx
+++ b/packages/web/src/features/chat/components/chatThread/chatThreadListItem.tsx
@@ -259,12 +259,17 @@ export const ChatThreadListItem = forwardRef<HTMLDivElement, ChatThreadListItemP
         }
 
         referenceElements.forEach(element => {
-            element.classList.add('chat-reference--hover');
+            // Check if it's an inline chat citation or code viewer element
+            const isInlineCitation = element.classList.contains('bg-chat-citation');
+            const hoverClass = isInlineCitation ? 'chat-citation--hover' : 'chat-reference--hover';
+            element.classList.add(hoverClass);
         });
 
         return () => {
             referenceElements.forEach(element => {
+                // Remove both possible hover classes
                 element.classList.remove('chat-reference--hover');
+                element.classList.remove('chat-citation--hover');
             });
         };
     }, [hoveredReference]);
diff --git a/packages/web/src/features/chat/components/chatThread/markdownRenderer.tsx b/packages/web/src/features/chat/components/chatThread/markdownRenderer.tsx
index 71528f73..a4992aa0 100644
--- a/packages/web/src/features/chat/components/chatThread/markdownRenderer.tsx
+++ b/packages/web/src/features/chat/components/chatThread/markdownRenderer.tsx
@@ -69,7 +69,7 @@ function remarkReferencesPlugin() {
                     value: `<span
                         role="button"
                         class="${fileReference.id}"
-                        className="font-mono cursor-pointer text-xs border px-1 py-[1.5px] rounded-md transition-all duration-150 bg-chat-reference"
+                        className="font-mono cursor-pointer text-xs px-1 py-[1.5px] rounded-md transition-all duration-150 bg-chat-citation"
                         title="Click to navigate to code"
                         ${REFERENCE_PAYLOAD_ATTRIBUTE}="${encodeURIComponent(JSON.stringify(fileReference))}"
                     >${displayText}</span>`