Improve Train of Thought icons spacing and loading circle

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);
 }

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>

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>
     )
 }