Refactor chat message UI

src/components/ChatHeader.tsx

@@ -9,9 +9,15 @@ import {
 
 interface ChatHeaderProps {
   showModelSelector?: boolean;
+  selectedModel?: string;
+  onModelChange?: (model: string) => void;
 }
 
-export const ChatHeader = ({ showModelSelector = false }: ChatHeaderProps) => {
+export const ChatHeader = ({ 
+  showModelSelector = false,
+  selectedModel = "ChatGPT 4.1",
+  onModelChange
+}: ChatHeaderProps) => {
   const models = [
     "ChatGPT 4.1",
     "ChatGPT 5",
@@ -27,17 +33,21 @@ export const ChatHeader = ({ showModelSelector = false }: ChatHeaderProps) => {
           <span className="text-sm text-muted-foreground">Online</span>
         </div>
         
-        {showModelSelector && (
+        {showModelSelector && onModelChange && (
           <DropdownMenu>
             <DropdownMenuTrigger asChild>
               <Button variant="outline" className="gap-2 glass-effect">
-                <span className="font-medium">ChatGPT 4.1</span>
+                <span className="font-medium">{selectedModel}</span>
                 <ChevronDown className="w-4 h-4" />
               </Button>
             </DropdownMenuTrigger>
             <DropdownMenuContent align="start" className="glass-effect bg-popover border-border z-50">
               {models.map((model) => (
-                <DropdownMenuItem key={model} className="cursor-pointer">
+                <DropdownMenuItem 
+                  key={model} 
+                  className="cursor-pointer"
+                  onClick={() => onModelChange(model)}
+                >
                   {model}
                 </DropdownMenuItem>
               ))}

src/components/chat/ChatMessage.tsx

@@ -1,16 +1,28 @@
-import { Bot, User, Copy, Edit, Trash2 } from "lucide-react";
+import { Bot, User, Copy } from "lucide-react";
 import { Button } from "@/components/ui/button";
+import { Badge } from "@/components/ui/badge";
 import { useState } from "react";
+import { useToast } from "@/hooks/use-toast";
 
 interface ChatMessageProps {
   role: "user" | "assistant";
   content: string;
+  model?: string;
 }
 
-export const ChatMessage = ({ role, content }: ChatMessageProps) => {
+export const ChatMessage = ({ role, content, model }: ChatMessageProps) => {
   const [showActions, setShowActions] = useState(false);
+  const { toast } = useToast();
   const isAssistant = role === "assistant";
 
+  const handleCopy = () => {
+    navigator.clipboard.writeText(content);
+    toast({
+      title: "Copiado!",
+      description: "Mensagem copiada para a área de transferência",
+    });
+  };
+
   return (
     <div
       className={`flex gap-4 py-6 px-6 group ${
@@ -19,17 +31,28 @@ export const ChatMessage = ({ role, content }: ChatMessageProps) => {
       onMouseEnter={() => setShowActions(true)}
       onMouseLeave={() => setShowActions(false)}
     >
-      <div
+      <div className="flex flex-col items-center gap-2">
-        className={`w-8 h-8 rounded-lg flex items-center justify-center flex-shrink-0 ${
+        <div
-          isAssistant
+          className={`w-8 h-8 rounded-lg flex items-center justify-center flex-shrink-0 ${
-            ? "bg-gradient-to-br from-primary to-secondary"
+            isAssistant
-            : "bg-accent/20 border border-accent"
+              ? "bg-gradient-to-br from-primary to-secondary"
-        }`}
+              : "bg-accent/20 border border-accent"
-      >
+          }`}
-        {isAssistant ? (
+        >
-          <Bot className="w-5 h-5 text-primary-foreground" />
+          {isAssistant ? (
-        ) : (
+            <Bot className="w-5 h-5 text-primary-foreground" />
-          <User className="w-5 h-5 text-accent" />
+          ) : (
+            <User className="w-5 h-5 text-accent" />
+          )}
+        </div>
+        
+        {isAssistant && model && (
+          <Badge 
+            variant="secondary" 
+            className="text-xs px-2 py-0.5 bg-primary/10 text-primary border border-primary/30"
+          >
+            {model}
+          </Badge>
         )}
       </div>
 
@@ -43,27 +66,12 @@ export const ChatMessage = ({ role, content }: ChatMessageProps) => {
             <Button
               variant="ghost"
               size="sm"
+              onClick={handleCopy}
               className="h-7 px-2 text-muted-foreground hover:text-foreground"
             >
               <Copy className="w-3 h-3 mr-1" />
               Copiar
             </Button>
-            <Button
-              variant="ghost"
-              size="sm"
-              className="h-7 px-2 text-muted-foreground hover:text-foreground"
-            >
-              <Edit className="w-3 h-3 mr-1" />
-              Editar
-            </Button>
-            <Button
-              variant="ghost"
-              size="sm"
-              className="h-7 px-2 text-muted-foreground hover:text-destructive"
-            >
-              <Trash2 className="w-3 h-3 mr-1" />
-              Excluir
-            </Button>
           </div>
         )}
       </div>

src/components/chat/ChatView.tsx

@@ -9,15 +9,18 @@ interface Message {
   id: string;
   role: "user" | "assistant";
   content: string;
+  model?: string;
 }
 
 export const ChatView = () => {
   const [isChatSidebarCollapsed, setIsChatSidebarCollapsed] = useState(false);
+  const [selectedModel, setSelectedModel] = useState("ChatGPT 4.1");
   const [messages, setMessages] = useState<Message[]>([
     {
       id: "1",
       role: "assistant",
       content: "Olá! Sou o assistente HGTX Codex. Como posso ajudá-lo hoje?",
+      model: "ChatGPT 4.1",
     },
   ]);
 
@@ -40,6 +43,7 @@ export const ChatView = () => {
         role: "assistant",
         content:
           "Esta é uma resposta simulada. Em breve, estarei conectado a modelos de IA reais para fornecer respostas inteligentes e úteis.",
+        model: selectedModel,
       };
       setMessages((prev) => [...prev, aiResponse]);
       setIsLoading(false);
@@ -56,7 +60,11 @@ export const ChatView = () => {
 
       {/* Main Chat Area */}
       <div className="flex-1 flex flex-col">
-        <ChatHeader showModelSelector={true} />
+        <ChatHeader 
+          showModelSelector={true}
+          selectedModel={selectedModel}
+          onModelChange={setSelectedModel}
+        />
 
         <ScrollArea className="flex-1">
           <div className="max-w-4xl mx-auto">
@@ -65,6 +73,7 @@ export const ChatView = () => {
                 key={message.id}
                 role={message.role}
                 content={message.content}
+                model={message.model}
               />
             ))}