Merge pull request #1 from SolaceLabs/rohan/AI-492/more-fixes

AI-492: More UI/UX improvements

Author: RohanSreelesh

src/solace_ai_connector_web/frontend/app/components/CustomMarkdown.tsx

@@ -7,7 +7,31 @@ interface CustomMarkdownProps {
 }
 
 export const CustomMarkdown = ({ children, className = '' }: CustomMarkdownProps) => {
-  const processedContent = children.replace(/\n\s*\n/g, '\n');
+  // Check if content appears to be HTML
+  const containsHtml = (content: string) => {
+    // Look for HTML document patterns or HTML tags
+    const htmlPatterns = [
+      /<!DOCTYPE\s+html>/i,
+      /<html[\s>]/i,
+      /<head[\s>]/i,
+      /<body[\s>]/i,
+      /<\/[a-z]+>/i,
+    ];
+    
+    return htmlPatterns.some(pattern => pattern.test(content));
+  };
+
+  let processedContent = children.replace(/\n\s*\n/g, '\n');
+  
+  // If content seems to be HTML and not already in a code block
+  if (containsHtml(processedContent) && !processedContent.includes('```')) {
+    // Escape < and > characters to prevent HTML rendering
+    processedContent = processedContent
+      .replace(/</g, '&lt;')
+      .replace(/>/g, '&gt;');
+      
+  }
+
   const htmlContent = marked(processedContent) as string;
 
   return (

src/solace_ai_connector_web/frontend/app/components/PreviewFileContent/CsvPreview.tsx

@@ -24,30 +24,30 @@ export const CsvPreview: React.FC<CsvPreviewProps> = ({ content, isExpanded }) =
     }
 
     return (
-        <div className="overflow-x-auto">
-<table className="min-w-full text-xs md:text-sm dark:text-gray-200">
-    <tbody>
-        {rows.map((row, i) => (
-            <tr 
-                key={i} 
-                className={`
-                    ${i === 0 ? 'bg-gray-100 dark:bg-gray-700 font-medium' : ''}
-                    ${i % 2 === 1 ? 'bg-gray-50 dark:bg-gray-800' : ''}
-                `}
-            >
-                {row.map((cell, j) => (
-                    <td 
-                        key={j} 
-                        className="border border-gray-200 dark:border-gray-600 p-2 truncate max-w-[200px] dark:text-white"
-                        title={cell}
-                    >
-                        {cell}
-                    </td>
-                ))}
-            </tr>
-        ))}
-    </tbody>
-</table>
+        <div className="overflow-x-auto scrollbar-themed">
+            <table className="min-w-full text-xs md:text-sm dark:text-gray-200">
+                <tbody>
+                    {rows.map((row, i) => (
+                        <tr 
+                            key={i} 
+                            className={`
+                                ${i === 0 ? 'bg-gray-100 dark:bg-gray-700 font-medium' : ''}
+                                ${i % 2 === 1 ? 'bg-gray-50 dark:bg-gray-800' : ''}
+                            `}
+                        >
+                            {row.map((cell, j) => (
+                                <td 
+                                    key={j} 
+                                    className="border border-gray-200 dark:border-gray-600 p-2 truncate max-w-[200px] dark:text-white"
+                                    title={cell}
+                                >
+                                    {cell}
+                                </td>
+                            ))}
+                        </tr>
+                    ))}
+                </tbody>
+            </table>
         </div>
     );
 };

src/solace_ai_connector_web/frontend/app/components/PreviewFileContent/PreviewContent.tsx

@@ -121,7 +121,7 @@ export const PreviewContent: React.FC<PreviewContentProps> = ({ file, className,
                     </div>
 
                     {/* Content container */}
-                    <div className={`p-3 ${
+                    <div className={`p-3 scrollbar-themed ${
                         isExpanded ? 'overflow-auto max-h-[500px]' : 'overflow-hidden'
                     }`}>
                         {isCsv ? (

src/solace_ai_connector_web/frontend/app/routes/auth-callback.tsx

@@ -6,8 +6,17 @@ export default function AuthCallback() {
   const [searchParams] = useSearchParams();
   const [token, setToken] = useState<string | null>(null);
   const [error, setError] = useState<string | null>(null);
+  const [isDarkMode, setIsDarkMode] = useState(false);
   const { configServerUrl } = useConfig();
 
+  useEffect(() => {
+    // Check if dark mode is enabled
+    const isDark = document.documentElement.classList.contains('dark') || 
+                   localStorage.getItem('theme') === 'dark' ||
+                   (!localStorage.getItem('theme') && window.matchMedia('(prefers-color-scheme: dark)').matches);
+    setIsDarkMode(isDark);
+  }, []);
+
   useEffect(() => {
     const exchangeCode = async () => {
       const tempCode = searchParams.get('temp_code');
@@ -45,16 +54,15 @@ export default function AuthCallback() {
     if (error) {
       return (
         <div className="text-red-500">
-          <h2>Error</h2>
-          <p>{error}</p>
+          <h2 className={isDarkMode ? "text-white" : "text-black"}>Error</h2>
+          <p className={isDarkMode ? "text-red-400" : "text-red-500"}>{error}</p>
         </div>
       );
     }
-
     if (token) {
       return (
         <div className="space-y-4">
-          <h2 className="text-2xl">Successfully Authenticated!</h2>
+          <h2 className={`text-2xl ${isDarkMode ? "text-white" : "text-black"}`}>Successfully Authenticated!</h2>
           <button 
             onClick={() => window.location.href = '/'}
             className="bg-solace-green text-white px-6 py-2 rounded shadow hover:bg-solace-dark-green"
@@ -64,12 +72,11 @@ export default function AuthCallback() {
         </div>
       );
     }
-
-    return <div>Processing authentication...</div>;
+    return <div className={isDarkMode ? "text-white" : "text-black"}>Processing authentication...</div>;
   };
 
   return (
-    <div className="min-h-screen bg-white dark:bg-gray-900 flex items-center justify-center">
+    <div className={`min-h-screen flex items-center justify-center ${isDarkMode ? "bg-gray-900" : "bg-white"}`}>
       <div className="text-center p-8 max-w-lg">
         {renderContent()}
       </div>

src/solace_ai_connector_web/frontend/app/tailwind.css

@@ -55,3 +55,47 @@
   opacity: 0;
   transition: opacity 300ms ease-in-out;
 }
+
+/* Custom scrollbar styling */
+.scrollbar-themed {
+  &::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
+  }
+  
+  &::-webkit-scrollbar-track {
+    background: #f1f1f1;
+  }
+  
+  &::-webkit-scrollbar-thumb {
+    background: #888;
+    border-radius: 4px;
+  }
+  
+  &::-webkit-scrollbar-thumb:hover {
+    background: #555;
+  }
+  
+  /* For dark mode */
+  .dark & {
+    &::-webkit-scrollbar-track {
+      background: #2d3748;
+    }
+    
+    &::-webkit-scrollbar-thumb {
+      background: #4a5568;
+    }
+    
+    &::-webkit-scrollbar-thumb:hover {
+      background: #718096;
+    }
+  }
+  
+  /* For Firefox */
+  scrollbar-width: thin;
+  scrollbar-color: #888 #f1f1f1;
+  
+  .dark & {
+    scrollbar-color: #4a5568 #2d3748;
+  }
+}