From a0f38e079fcd0a23cbf594f3bb16ae2605cdfc93 Mon Sep 17 00:00:00 2001
From: Debanjum Singh Solanky <debanjum@gmail.com>
Date: Sun, 14 Jul 2024 09:35:15 +0530
Subject: [PATCH] Improve Train of Thought icons spacing and loading circle

---
 .../chatHistory/chatHistory.module.css        |  2 +-
 .../components/chatMessage/chatMessage.tsx    | 19 ++++++++++---------
 .../web/app/components/loading/loading.tsx    |  2 +-
 3 files changed, 12 insertions(+), 11 deletions(-)

diff --git a/src/interface/web/app/components/chatHistory/chatHistory.module.css b/src/interface/web/app/components/chatHistory/chatHistory.module.css
index 984fb922..0e623b77 100644
--- a/src/interface/web/app/components/chatHistory/chatHistory.module.css
+++ b/src/interface/web/app/components/chatHistory/chatHistory.module.css
@@ -24,7 +24,7 @@ div.agentIndicator {
 div.trainOfThought {
     border: 1px var(--border-color) solid;
     border-radius: 16px;
-    padding: 16px;
+    padding: 0 16px;
     margin: 12px;
     box-shadow: 0 4px 10px var(--box-shadow-color);
 }
diff --git a/src/interface/web/app/components/chatMessage/chatMessage.tsx b/src/interface/web/app/components/chatMessage/chatMessage.tsx
index b7c7fdd8..3edec436 100644
--- a/src/interface/web/app/components/chatMessage/chatMessage.tsx
+++ b/src/interface/web/app/components/chatMessage/chatMessage.tsx
@@ -155,35 +155,36 @@ interface TrainOfThoughtProps {
 
 function chooseIconFromHeader(header: string, iconColor: string) {
     const compareHeader = header.toLowerCase();
+    const classNames = `inline mt-1 mr-2 ${iconColor}`;
     if (compareHeader.includes("understanding")) {
-        return <Brain className={`inline mr-2 ${iconColor}`} />
+        return <Brain className={`${classNames}`} />
     }
 
     if (compareHeader.includes("generating")) {
-        return <Cloud className={`inline mr-2 ${iconColor}`} />;
+        return <Cloud className={`${classNames}`} />;
     }
 
     if (compareHeader.includes("data sources")) {
-        return <Folder className={`inline mr-2 ${iconColor}`} />;
+        return <Folder className={`${classNames}`} />;
     }
 
     if (compareHeader.includes("notes")) {
-        return <Folder className={`inline mr-2 ${iconColor}`} />;
+        return <Folder className={`${classNames}`} />;
     }
 
     if (compareHeader.includes("read")) {
-        return <Book className={`inline mr-2 ${iconColor}`} />;
+        return <Book className={`${classNames}`} />;
     }
 
     if (compareHeader.includes("search")) {
-        return <MagnifyingGlass className={`inline mr-2 ${iconColor}`} />;
+        return <MagnifyingGlass className={`${classNames}`} />;
     }
 
     if (compareHeader.includes("summary") || compareHeader.includes("summarize")) {
-        return <Aperture className={`inline mr-2 ${iconColor}`} />;
+        return <Aperture className={`${classNames}`} />;
     }
 
-    return <Brain className={`inline mr-2 ${iconColor}`} />;
+    return <Brain className={`${classNames}`} />;
 }
 
 
@@ -195,7 +196,7 @@ export function TrainOfThought(props: TrainOfThoughtProps) {
     const icon = chooseIconFromHeader(header, iconColor);
     let markdownRendered = DomPurify.sanitize(md.render(props.message));
     return (
-        <div className={`flex items-center ${props.primary ? 'text-gray-400' : 'text-gray-300'} ${styles.trainOfThought} ${props.primary ? styles.primary : ''}`} >
+        <div className={`flex mt-1 ${props.primary ? 'text-gray-400' : 'text-gray-300'} ${styles.trainOfThought} ${props.primary ? styles.primary : ''}`} >
             {icon}
             <div dangerouslySetInnerHTML={{ __html: markdownRendered }} />
         </div>
diff --git a/src/interface/web/app/components/loading/loading.tsx b/src/interface/web/app/components/loading/loading.tsx
index 97f8ade3..650011d7 100644
--- a/src/interface/web/app/components/loading/loading.tsx
+++ b/src/interface/web/app/components/loading/loading.tsx
@@ -16,7 +16,7 @@ interface InlineLoadingProps {
 export function InlineLoading(props: InlineLoadingProps) {
     return (
         <button className={`${props.className}`}>
-            <CircleNotch className={`animate-spin h-5 w-5 mr-3`} />
+            <CircleNotch className={`animate-spin h-5 w-5 mt-3 mr-3`} />
         </button>
     )
 }