From 2e4433a6b3b82cc1944483325589a4c221a2f30c Mon Sep 17 00:00:00 2001
From: singleparadox <glennmatthew_perez@hotmail.com>
Date: Sat, 5 Apr 2025 15:24:45 +0000
Subject: [PATCH 1/2] feat(message-box): support [1,2,3,4] citation format
 instead of just [1][2][3]

---
 src/components/MessageBox.tsx | 46 ++++++++++++++++++++++++++++++-----
 1 file changed, 40 insertions(+), 6 deletions(-)

diff --git a/src/components/MessageBox.tsx b/src/components/MessageBox.tsx
index 4473c3b..2b2144a 100644
--- a/src/components/MessageBox.tsx
+++ b/src/components/MessageBox.tsx
@@ -48,6 +48,7 @@ const MessageBox = ({
   const [speechMessage, setSpeechMessage] = useState(message.content);
 
   useEffect(() => {
+    const citationRegex = /\[([^\]]+)\]/g;
     const regex = /\[(\d+)\]/g;
     let processedMessage = message.content;
 
@@ -67,12 +68,45 @@ const MessageBox = ({
     ) {
       setParsedMessage(
         processedMessage.replace(
-          regex,
-          (_, number) =>
-            `<a href="${
-              message.sources?.[number - 1]?.metadata?.url
-            }" target="_blank" className="bg-light-secondary dark:bg-dark-secondary px-1 rounded ml-1 no-underline text-xs text-black/70 dark:text-white/70 relative">${number}</a>`,
-        ),
+          citationRegex, // Use the updated regex
+          (match, capturedContent) => { // match is the full "[1,2,3]", capturedContent is "1,2,3"
+            // Split the captured content by comma, trim whitespace, and filter out non-digits
+            const numbers = capturedContent
+              .split(',')
+              .map(numStr => numStr.trim())
+              .filter(numStr => /^\d+$/.test(numStr)); // Ensure it's only digits
+
+            // If no valid numbers found after split/filter (e.g., "[]" or "[abc]"), return original match
+            if (numbers.length === 0) {
+              return match;
+            }
+
+            // Generate an HTML link for each valid number found
+            const linksHtml = numbers.map(numStr => {
+              const number = parseInt(numStr, 10); // Convert string to integer for array indexing
+
+              // Basic validation: Ensure it's a positive number
+              if (isNaN(number) || number <= 0) {
+                // Return the original number part as text if invalid for lookup
+                return `[${numStr}]`;
+              }
+
+              // Get the corresponding source, adjusting for 0-based index
+              const source = message.sources?.[number - 1];
+              const url = source?.metadata?.url;
+
+              // If URL exists, create the link
+              if (url) {
+                return `<a href="${url}" target="_blank" className="bg-light-secondary dark:bg-dark-secondary px-1 rounded ml-1 no-underline text-xs text-black/70 dark:text-white/70 relative">${numStr}</a>`;
+              } else {
+                // If no URL found for this number, return the number styled similarly but red
+                return `<span className="bg-light-secondary dark:bg-dark-secondary px-1 rounded ml-1 text-xs relative font-medium text-red-600 dark:text-red-400">${numStr}</span>`;
+              }
+            }).join(''); // Join the generated links (or fallback text) together without separators
+
+            return linksHtml;
+          }
+        )
       );
       return;
     }

From bf705afc216bb7e0193b1771c0f5527c969fad37 Mon Sep 17 00:00:00 2001
From: ItzCrazyKns <95534749+ItzCrazyKns@users.noreply.github.com>
Date: Sat, 5 Apr 2025 22:32:56 +0530
Subject: [PATCH 2/2] feat(message-box): change styles, lint & beautify

---
 src/components/MessageBox.tsx | 51 ++++++++++++++---------------------
 1 file changed, 20 insertions(+), 31 deletions(-)

diff --git a/src/components/MessageBox.tsx b/src/components/MessageBox.tsx
index 2b2144a..4617103 100644
--- a/src/components/MessageBox.tsx
+++ b/src/components/MessageBox.tsx
@@ -68,45 +68,34 @@ const MessageBox = ({
     ) {
       setParsedMessage(
         processedMessage.replace(
-          citationRegex, // Use the updated regex
-          (match, capturedContent) => { // match is the full "[1,2,3]", capturedContent is "1,2,3"
-            // Split the captured content by comma, trim whitespace, and filter out non-digits
+          citationRegex,
+          (_, capturedContent: string) => {
             const numbers = capturedContent
               .split(',')
-              .map(numStr => numStr.trim())
-              .filter(numStr => /^\d+$/.test(numStr)); // Ensure it's only digits
+              .map((numStr) => numStr.trim())
 
-            // If no valid numbers found after split/filter (e.g., "[]" or "[abc]"), return original match
-            if (numbers.length === 0) {
-              return match;
-            }
+            const linksHtml = numbers
+              .map((numStr) => {
+                const number = parseInt(numStr);
 
-            // Generate an HTML link for each valid number found
-            const linksHtml = numbers.map(numStr => {
-              const number = parseInt(numStr, 10); // Convert string to integer for array indexing
+                if (isNaN(number) || number <= 0) {
+                  return `[${numStr}]`;
+                }
 
-              // Basic validation: Ensure it's a positive number
-              if (isNaN(number) || number <= 0) {
-                // Return the original number part as text if invalid for lookup
-                return `[${numStr}]`;
-              }
+                const source = message.sources?.[number - 1];
+                const url = source?.metadata?.url;
 
-              // Get the corresponding source, adjusting for 0-based index
-              const source = message.sources?.[number - 1];
-              const url = source?.metadata?.url;
-
-              // If URL exists, create the link
-              if (url) {
-                return `<a href="${url}" target="_blank" className="bg-light-secondary dark:bg-dark-secondary px-1 rounded ml-1 no-underline text-xs text-black/70 dark:text-white/70 relative">${numStr}</a>`;
-              } else {
-                // If no URL found for this number, return the number styled similarly but red
-                return `<span className="bg-light-secondary dark:bg-dark-secondary px-1 rounded ml-1 text-xs relative font-medium text-red-600 dark:text-red-400">${numStr}</span>`;
-              }
-            }).join(''); // Join the generated links (or fallback text) together without separators
+                if (url) {
+                  return `<a href="${url}" target="_blank" className="bg-light-secondary dark:bg-dark-secondary px-1 rounded ml-1 no-underline text-xs text-black/70 dark:text-white/70 relative">${numStr}</a>`;
+                } else {
+                  return `[${numStr}]`;
+                }
+              })
+              .join('');
 
             return linksHtml;
-          }
-        )
+          },
+        ),
       );
       return;
     }