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/message-step-thinking.tsx

@@ -27,65 +27,27 @@ export function MessageStepThinking({ metadata }: MessageStepThinkingProps) {
   const [isExpanded, setIsExpanded] = useState(false);
   const [copiedIndex, setCopiedIndex] = useState<number | null>(null);
 
-  const getStepConfig = () => {
-    switch (metadata.stepType) {
-      case 'preprocessing':
-        return {
-          icon: Brain,
-          textColor: "text-blue-600 dark:text-blue-400",
-          bgColor: "bg-blue-50 dark:bg-blue-900/20",
-        };
-      case 'web-research':
-        return {
-          icon: Globe,
-          textColor: "text-green-600 dark:text-green-400",
-          bgColor: "bg-green-50 dark:bg-green-900/20",
-        };
-      case 'sources-found':
-        return {
-          icon: Package,
-          textColor: "text-purple-600 dark:text-purple-400",
-          bgColor: "bg-purple-50 dark:bg-purple-900/20",
-        };
-      case 'processing':
-        return {
-          icon: Brain,
-          textColor: "text-indigo-600 dark:text-indigo-400",
-          bgColor: "bg-indigo-50 dark:bg-indigo-900/20",
-        };
-      case 'response-generation':
-        return {
-          icon: Loader2,
-          textColor: "text-orange-600 dark:text-orange-400",
-          bgColor: "bg-orange-50 dark:bg-orange-900/20",
-        };
-      case 'fallback':
-        return {
-          icon: AlertCircle,
-          textColor: "text-yellow-600 dark:text-yellow-400",
-          bgColor: "bg-yellow-50 dark:bg-yellow-900/20",
-        };
-      case 'error':
-        return {
-          icon: XCircle,
-          textColor: "text-red-600 dark:text-red-400",
-          bgColor: "bg-red-50 dark:bg-red-900/20",
-        };
-      default:
-        return {
-          icon: Search,
-          textColor: "text-muted-foreground",
-          bgColor: "bg-muted/30",
-        };
-    }
-  };
-
   const getStepIcon = () => {
-    const config = getStepConfig();
-    const Icon = config.icon;
     const isSpinning = metadata.stepType === 'response-generation' && metadata.status === 'running';
     
-    return <Icon className={cn("w-4 h-4", config.textColor, isSpinning && "animate-spin")} />;
+    switch (metadata.stepType) {
+      case 'preprocessing':
+        return <Brain className={cn("w-4 h-4 text-muted-foreground/80", isSpinning && "animate-spin")} />;
+      case 'web-research':
+        return <Globe className={cn("w-4 h-4 text-muted-foreground/80", isSpinning && "animate-spin")} />;
+      case 'sources-found':
+        return <Package className={cn("w-4 h-4 text-muted-foreground/80", isSpinning && "animate-spin")} />;
+      case 'processing':
+        return <Brain className={cn("w-4 h-4 text-muted-foreground/80", isSpinning && "animate-spin")} />;
+      case 'response-generation':
+        return <Loader2 className={cn("w-4 h-4 text-muted-foreground/80", isSpinning && "animate-spin")} />;
+      case 'fallback':
+        return <AlertCircle className="w-4 h-4 text-muted-foreground/80" />;
+      case 'error':
+        return <XCircle className="w-4 h-4 text-destructive/80" />;
+      default:
+        return <Search className="w-4 h-4 text-muted-foreground/80" />;
+    }
   };
 
   const copyToClipboard = async (url: string, index: number) => {
@@ -98,17 +60,17 @@ export function MessageStepThinking({ metadata }: MessageStepThinkingProps) {
     }
   };
 
-  const config = getStepConfig();
-
   return (
     <div className="mb-4 ml-10 animate-in fade-in slide-in-from-bottom-2 duration-300">
-      <div className={cn(
-        "flex items-center gap-3 p-2 rounded-lg transition-all w-fit max-w-full",
-        config.bgColor
-      )}>
+      <div className="flex items-center gap-3 p-2 transition-all w-fit max-w-full">
         <div className="flex items-center gap-2">
             {getStepIcon()}
-            <span className={cn("text-sm font-medium", config.textColor)}>
+            <span className={cn(
+              "text-sm font-medium",
+              metadata.status === 'error' 
+                ? "text-destructive/80" 
+                : "text-muted-foreground/80"
+            )}>
                 {metadata.label}
             </span>
         </div>
@@ -135,7 +97,7 @@ export function MessageStepThinking({ metadata }: MessageStepThinkingProps) {
       {metadata.progress !== undefined && metadata.progress < 100 && (
          <div className="ml-1 mt-1 w-32 h-1 bg-muted/50 rounded-full overflow-hidden">
             <div 
-                className={cn("h-full transition-all duration-300", config.textColor.replace('text-', 'bg-'))} 
+                className="h-full bg-primary/50 transition-all duration-300" 
                 style={{ width: `${metadata.progress}%` }}
             />
          </div>

components/chat/reasoning-chain.tsx

@@ -0,0 +1,134 @@
+'use client';
+
+import { 
+  Loader2, 
+  CheckCircle2,
+  Circle,
+  Search,
+  Globe,
+  Brain,
+  Package,
+  BookOpen
+} from 'lucide-react';
+import { cn } from '@/lib/utils';
+import type { ThinkingMessageMetadata } from '@/hooks/use-chat';
+import { SourcesCompact } from './sources-compact';
+
+interface ReasoningChainProps {
+  steps: ThinkingMessageMetadata[];
+  searchQueries?: string[];
+  className?: string;
+}
+
+export function ReasoningChain({ steps, searchQueries = [], className }: ReasoningChainProps) {
+  const hasActiveStep = steps.some(step => step.status === 'running');
+  const allSources = steps
+    .flatMap(step => step.sources || [])
+    .filter((source, index, self) => 
+      index === self.findIndex(s => s.url === source.url)
+    );
+
+  const getStepIcon = (step: ThinkingMessageMetadata) => {
+    const isRunning = step.status === 'running';
+    const isCompleted = step.status === 'completed';
+    const isError = step.status === 'error';
+
+    if (isError) {
+      return null; // Não mostrar ícone para erros, apenas texto
+    }
+
+    if (isCompleted) {
+      return <CheckCircle2 className="w-3.5 h-3.5 text-muted-foreground/60" />;
+    }
+
+    if (isRunning) {
+      return <Loader2 className="w-3.5 h-3.5 text-muted-foreground/60 animate-spin" />;
+    }
+
+    // Ícone baseado no tipo de step
+    switch (step.stepType) {
+      case 'preprocessing':
+        return <Brain className="w-3.5 h-3.5 text-muted-foreground/60" />;
+      case 'web-research':
+        return <Search className="w-3.5 h-3.5 text-muted-foreground/60" />;
+      case 'sources-found':
+        return <Globe className="w-3.5 h-3.5 text-muted-foreground/60" />;
+      case 'processing':
+        return <Brain className="w-3.5 h-3.5 text-muted-foreground/60" />;
+      case 'response-generation':
+        return <Loader2 className="w-3.5 h-3.5 text-muted-foreground/60 animate-spin" />;
+      default:
+        return <Search className="w-3.5 h-3.5 text-muted-foreground/60" />;
+    }
+  };
+
+  return (
+    <div className={cn("mb-6 space-y-3", className)}>
+      {/* Header: "Working..." com spinner sutil */}
+      <div className="flex items-center gap-2 text-sm text-muted-foreground">
+        <Circle className="w-2 h-2 fill-current animate-pulse" />
+        <span>Working...</span>
+      </div>
+      
+      {/* Lista vertical de steps - texto simples */}
+      <div className="space-y-1.5 pl-6">
+        {steps.map((step, index) => {
+          const isRunning = step.status === 'running';
+          const isCompleted = step.status === 'completed';
+          const isError = step.status === 'error';
+          
+          return (
+            <div 
+              key={`${step.stepType}-${step.timestamp}`}
+              className={cn(
+                "reasoning-step flex items-center gap-2 text-sm",
+                isError 
+                  ? "text-destructive/80" 
+                  : isCompleted 
+                    ? "text-muted-foreground/60" 
+                    : "text-muted-foreground/80"
+              )}
+              style={{ animationDelay: `${index * 100}ms` }}
+            >
+              {getStepIcon(step)}
+              <span>{step.label}</span>
+              {step.details && (
+                <span className="text-xs text-muted-foreground/50 ml-1">
+                  {step.details}
+                </span>
+              )}
+            </div>
+          );
+        })}
+      </div>
+      
+      {/* Pills de busca - cápsulas sutis */}
+      {searchQueries.length > 0 && (
+        <div className="flex flex-wrap gap-2 pl-6">
+          <span className="text-xs text-muted-foreground/60">Searching:</span>
+          {searchQueries.map((query, index) => (
+            <span 
+              key={index}
+              className="text-xs font-mono px-2 py-1 bg-white/5 dark:bg-white/5 border border-white/10 dark:border-white/10 rounded-full text-muted-foreground/70"
+            >
+              {query}
+            </span>
+          ))}
+        </div>
+      )}
+      
+      {/* Fontes em revisão */}
+      {allSources.length > 0 && (
+        <div className="pl-6">
+          <div className="flex items-center gap-2 mb-2">
+            <span className="text-xs text-muted-foreground/60">
+              Reviewing sources - {allSources.length}
+            </span>
+          </div>
+          <SourcesCompact sources={allSources} />
+        </div>
+      )}
+    </div>
+  );
+}
+

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

components/chat/sources-display.tsx

@@ -27,90 +27,89 @@ export function SourcesDisplay({ sources, className }: SourcesDisplayProps) {
     }
   };
 
-  // Memoizar URLs de favicon para evitar recálculos
-  const faviconUrls = useMemo(() => {
-    return sources.map(source => {
-      try {
-        const domain = new URL(source.url).hostname;
-        return `https://www.google.com/s2/favicons?domain=${domain}&sz=32`;
-      } catch {
-        return null;
-      }
-    });
-  }, [sources]);
+  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];
+    }
+  };
 
   return (
-    <div className={cn("px-6 py-4 border-t border-muted bg-muted/20", className)}>
+    <div className={cn("px-6 py-4 border-t border-muted/50", className)}>
       <div className="flex items-center gap-2 mb-3">
-        <Globe className="w-4 h-4 text-muted-foreground" />
-        <p className="text-xs font-medium text-muted-foreground">
+        <Globe className="w-4 h-4 text-muted-foreground/60" />
+        <p className="text-xs font-medium text-muted-foreground/80">
           Fontes consultadas ({sources.length}):
         </p>
       </div>
       
-      <div className="flex flex-wrap gap-2 overflow-x-auto pb-2 scrollbar-thin scrollbar-thumb-muted scrollbar-track-transparent">
+      <div className="flex gap-3 overflow-x-auto py-2 sources-scrollbar">
         {sources.map((source, idx) => {
-          const faviconUrl = faviconUrls[idx];
+          const faviconUrl = getFaviconUrl(source.url);
+          const domain = getDomain(source.url);
           const isCopied = copiedIndex === idx;
           
           return (
-            <div
+            <a
               key={idx}
-              className="group flex-shrink-0 flex items-center gap-2 px-3 py-2 rounded-md bg-background hover:bg-muted/80 transition-all duration-200 border border-muted hover:border-primary/50 shadow-sm hover:shadow-md"
+              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"
+              onClick={(e) => {
+                // Permitir que o botão de copiar funcione sem navegar
+                if ((e.target as HTMLElement).closest('button')) {
+                  e.preventDefault();
+                }
+              }}
             >
-              {/* Favicon */}
               {faviconUrl ? (
                 <img
                   src={faviconUrl}
                   alt=""
-                  className="w-4 h-4 flex-shrink-0 rounded-sm"
+                  className="w-4 h-4 rounded flex-shrink-0"
                   onError={(e) => {
                     (e.target as HTMLImageElement).style.display = 'none';
                   }}
                 />
               ) : (
-                <Globe className="w-4 h-4 flex-shrink-0 text-muted-foreground" />
+                <Globe className="w-4 h-4 text-muted-foreground/60 flex-shrink-0" />
               )}
-              
-              {/* Title and URL */}
-              <div className="flex-1 min-w-0 max-w-[200px] md:max-w-[300px]">
-                <div className="text-xs font-medium text-foreground truncate" title={source.title || source.url}>
-                  {source.title || `Fonte ${idx + 1}`}
+              <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" title={source.url}>
-                  {source.url.replace(/^https?:\/\//, '').replace(/^www\./, '')}
+                <div className="text-[10px] text-muted-foreground truncate">
+                  {domain}
                 </div>
               </div>
-              
-              {/* Actions */}
-              <div className="flex items-center gap-1">
-                {/* Copy Button */}
-                <button
-                  onClick={() => copyToClipboard(source.url, idx)}
-                  className="p-1 rounded hover:bg-muted transition-colors"
-                  title="Copiar URL"
-                  aria-label="Copiar URL"
-                >
-                  {isCopied ? (
-                    <Check className="w-3 h-3 text-green-600 dark:text-green-400" />
-                  ) : (
-                    <Copy className="w-3 h-3 text-muted-foreground" />
-                  )}
-                </button>
-                
-                {/* External Link Button */}
-                <a
-                  href={source.url}
-                  target="_blank"
-                  rel="noopener noreferrer"
-                  className="p-1 rounded hover:bg-muted transition-colors"
-                  title="Abrir em nova aba"
-                  aria-label="Abrir em nova aba"
-                >
-                  <ExternalLink className="w-3 h-3 text-muted-foreground" />
-                </a>
-              </div>
-            </div>
+              <button
+                onClick={(e) => {
+                  e.preventDefault();
+                  e.stopPropagation();
+                  copyToClipboard(source.url, idx);
+                }}
+                className="ml-1 p-1 rounded hover:bg-muted/50 transition-colors opacity-0 group-hover:opacity-100"
+                title="Copiar URL"
+                aria-label="Copiar URL"
+              >
+                {isCopied ? (
+                  <Check className="w-3 h-3 text-green-600 dark:text-green-400" />
+                ) : (
+                  <Copy className="w-3 h-3 text-muted-foreground" />
+                )}
+              </button>
+            </a>
           );
         })}
       </div>