feat: enhance UI and functionality across chat and settings

- Added custom scrollbar styles for improved aesthetics and usability across the interface.
- Implemented responsive adjustments for chat sidebar and input components to enhance mobile experience.
- Integrated tooltip components in select elements for better user guidance and information display.
- Updated chat input and message components for improved styling and functionality.
- Enhanced settings page with semantic query expansion options and improved model selection UI.
- Refactored sidebar list to include better date formatting and tooltip support for session titles.
- Introduced GPU stats monitoring in the system panel for better hardware insights.

components/chat/prompt-generator.tsx

@@ -2,6 +2,7 @@ import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, D
 import { Button } from "@/components/ui/button";
 import { Textarea } from "@/components/ui/textarea";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
 import { Sparkles, Loader2 } from "lucide-react";
 import { useState, useEffect } from "react";
 import { usePromptGenerator } from "@/hooks/use-prompt-generator";
@@ -92,30 +93,54 @@ export function PromptGeneratorDialog({ defaultModel, onPromptGenerated }: Promp
             <label htmlFor="model-select" className="text-sm font-medium">
               Modelo para Geração
             </label>
-            <Select 
-              value={selectedModel || undefined} 
-              onValueChange={setSelectedModel}
-              disabled={loading || models.length === 0}
-            >
-              <SelectTrigger id="model-select">
-                <SelectValue placeholder={
-                  loading 
-                    ? "Carregando modelos..." 
-                    : models.length === 0 
-                      ? "Nenhum modelo disponível" 
-                      : "Selecione um modelo..."
-                } />
-              </SelectTrigger>
-              <SelectContent>
-                {models.length === 0 ? (
-                  <SelectItem value="" disabled>Nenhum modelo disponível</SelectItem>
-                ) : (
-                  models.map(m => (
-                    <SelectItem key={m.name} value={m.name}>{m.name}</SelectItem>
-                  ))
-                )}
-              </SelectContent>
-            </Select>
+            <TooltipProvider>
+              <Select 
+                value={selectedModel || undefined} 
+                onValueChange={setSelectedModel}
+                disabled={loading || models.length === 0}
+              >
+                <Tooltip>
+                  <TooltipTrigger asChild>
+                    <SelectTrigger id="model-select" className="min-w-0 max-w-full">
+                      <SelectValue placeholder={
+                        loading 
+                          ? "Carregando modelos..." 
+                          : models.length === 0 
+                            ? "Nenhum modelo disponível" 
+                            : "Selecione um modelo..."
+                      } className="truncate" />
+                    </SelectTrigger>
+                  </TooltipTrigger>
+                  {selectedModel && (
+                    <TooltipContent side="top" className="max-w-[70vw] break-words">
+                      <p className="text-sm">{selectedModel}</p>
+                    </TooltipContent>
+                  )}
+                </Tooltip>
+                <SelectContent className="max-w-[90vw]">
+                  {models.length === 0 ? (
+                    <SelectItem value="" disabled>Nenhum modelo disponível</SelectItem>
+                  ) : (
+                    models.map(m => (
+                      <Tooltip key={m.name}>
+                        <TooltipTrigger asChild>
+                          <SelectItem value={m.name} className="min-w-0">
+                            <span className="truncate block" style={{ maxWidth: '70vw' }}>
+                              {m.name}
+                            </span>
+                          </SelectItem>
+                        </TooltipTrigger>
+                        {m.name.length > 40 && (
+                          <TooltipContent side="right" className="max-w-[70vw] break-words">
+                            <p className="text-sm">{m.name}</p>
+                          </TooltipContent>
+                        )}
+                      </Tooltip>
+                    ))
+                  )}
+                </SelectContent>
+              </Select>
+            </TooltipProvider>
             <p className="text-xs text-muted-foreground">
               Recomendado: Modelos com boa capacidade de instrução (ex: Llama 3, Mistral).
             </p>