feat: enhance chat UI and functionality with new scrollbar and animation features

- Added custom scrollbar styles for sources display to improve aesthetics and usability.
- Introduced animations for reasoning steps to enhance user experience during chat interactions.
- Refactored chat page to group thinking messages, improving message handling and display.
- Updated sources display component for better favicon handling and user interaction.

components/chat/sources-compact.tsx

@@ -0,0 +1,78 @@
+'use client';
+
+import { ExternalLink } from 'lucide-react';
+import { cn } from '@/lib/utils';
+
+interface Source {
+  url: string;
+  title?: string;
+}
+
+interface SourcesCompactProps {
+  sources: Source[];
+  className?: string;
+}
+
+export function SourcesCompact({ sources, className }: SourcesCompactProps) {
+  const getFaviconUrl = (url: string): string => {
+    try {
+      const domain = new URL(url).hostname;
+      return `https://www.google.com/s2/favicons?domain=${domain}&sz=16`;
+    } catch {
+      return '';
+    }
+  };
+
+  const getDomain = (url: string): string => {
+    try {
+      return new URL(url).hostname.replace(/^www\./, '');
+    } catch {
+      return url.replace(/^https?:\/\//, '').replace(/^www\./, '').split('/')[0];
+    }
+  };
+
+  if (!sources || sources.length === 0) {
+    return null;
+  }
+
+  return (
+    <div className={cn("flex gap-3 overflow-x-auto py-2 sources-scrollbar", className)}>
+      {sources.map((source, idx) => {
+        const faviconUrl = getFaviconUrl(source.url);
+        const domain = getDomain(source.url);
+        
+        return (
+          <a
+            key={idx}
+            href={source.url}
+            target="_blank"
+            rel="noopener noreferrer"
+            className="group flex items-center gap-2 px-3 py-2 rounded-lg bg-muted/30 hover:bg-muted/50 border border-transparent hover:border-muted transition-all flex-shrink-0"
+          >
+            {faviconUrl ? (
+              <img
+                src={faviconUrl}
+                alt=""
+                className="w-4 h-4 rounded flex-shrink-0"
+                onError={(e) => {
+                  (e.target as HTMLImageElement).style.display = 'none';
+                }}
+              />
+            ) : (
+              <ExternalLink className="w-4 h-4 text-muted-foreground/60 flex-shrink-0" />
+            )}
+            <div className="min-w-0">
+              <div className="text-xs font-medium truncate max-w-[140px] text-foreground/90">
+                {source.title || domain}
+              </div>
+              <div className="text-[10px] text-muted-foreground truncate">
+                {domain}
+              </div>
+            </div>
+          </a>
+        );
+      })}
+    </div>
+  );
+}
+