correções e bugs

src/components/ChatHeader.tsx

@@ -1,4 +1,4 @@
-import { ChevronDown, UserCog } from "lucide-react";
+import { ChevronDown, UserCog, Loader2 } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import {
   DropdownMenu,
@@ -15,7 +15,11 @@ import {
   DialogTrigger,
 } from "@/components/ui/dialog";
 import { Textarea } from "@/components/ui/textarea";
-import { useState } from "react";
+import { useState, useEffect } from "react";
+import { fetchModelsFromDatabase, ModelConfig } from "@/config/models";
+
+// Texto padrão da personalidade (mesmo valor usado em ChatView)
+const DEFAULT_SYSTEM_PROMPT = "Você é um assistente útil e prestativo.";
 
 interface ChatHeaderProps {
   showModelSelector?: boolean;
@@ -29,25 +33,30 @@ export const ChatHeader = ({
   showModelSelector = false,
   selectedModel = "GPT-4o",
   onModelChange,
-  systemPrompt = "Você é um assistente útil e prestativo.",
+  systemPrompt = DEFAULT_SYSTEM_PROMPT,
   onSystemPromptChange
 }: ChatHeaderProps) => {
   const [isPersonalityOpen, setIsPersonalityOpen] = useState(false);
   const [tempSystemPrompt, setTempSystemPrompt] = useState(systemPrompt);
+  const [models, setModels] = useState<ModelConfig[]>([]);
+  const [isLoadingModels, setIsLoadingModels] = useState(true);
 
-  const models = [
-    "GPT-4.1",
-    "GPT-4o",
-    "GPT-5 Mini",
-    "Gemini 2.0 Flash",
-    "Claude Sonnet 4.5",
-    "DeepSeek V3.2 Chat",
-    "DeepSeek V3.2 Reasoner",
-    "Gemini 2.5 Flash",
-    "Gemini 2.5 Flash-Lite",
-    "Claude Haiku 4.5",
-    "GPT-4o Mini",
-  ];
+  // Carrega modelos da API ao montar o componente
+  useEffect(() => {
+    const loadModels = async () => {
+      setIsLoadingModels(true);
+      try {
+        const modelsFromAPI = await fetchModelsFromDatabase();
+        setModels(modelsFromAPI);
+      } catch (error) {
+        console.error('Erro ao carregar modelos:', error);
+      } finally {
+        setIsLoadingModels(false);
+      }
+    };
+
+    loadModels();
+  }, []);
 
   const handleSavePersonality = () => {
     if (onSystemPromptChange) {
@@ -67,19 +76,37 @@ export const ChatHeader = ({
         {showModelSelector && onModelChange && (
           <DropdownMenu>
             <DropdownMenuTrigger asChild>
-              <Button variant="outline" className="gap-1 md:gap-2 glass-effect text-xs md:text-sm">
-                <span className="font-medium truncate max-w-[80px] md:max-w-none">{selectedModel}</span>
-                <ChevronDown className="w-3 h-3 md:w-4 md:h-4" />
+              <Button
+                variant="outline"
+                className="gap-1 md:gap-2 glass-effect text-xs md:text-sm"
+                disabled={isLoadingModels}
+              >
+                {isLoadingModels ? (
+                  <>
+                    <Loader2 className="w-3 h-3 md:w-4 md:h-4 animate-spin" />
+                    <span className="font-medium">Carregando...</span>
+                  </>
+                ) : (
+                  <>
+                    <span className="font-medium truncate max-w-[80px] md:max-w-none">{selectedModel}</span>
+                    <ChevronDown className="w-3 h-3 md:w-4 md:h-4" />
+                  </>
+                )}
               </Button>
             </DropdownMenuTrigger>
             <DropdownMenuContent align="start" className="glass-effect bg-popover border-border z-50">
               {models.map((model) => (
-                <DropdownMenuItem 
-                  key={model} 
+                <DropdownMenuItem
+                  key={model.id}
                   className="cursor-pointer"
-                  onClick={() => onModelChange(model)}
+                  onClick={() => onModelChange(model.name)}
                 >
-                  {model}
+                  <div className="flex flex-col">
+                    <span className="font-medium">{model.name}</span>
+                    {model.description && (
+                      <span className="text-xs text-muted-foreground">{model.description}</span>
+                    )}
+                  </div>
                 </DropdownMenuItem>
               ))}
             </DropdownMenuContent>