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,6 +31,7 @@ export const ChatMessage = ({ role, content }: ChatMessageProps) => {
       onMouseEnter={() => setShowActions(true)}
       onMouseLeave={() => setShowActions(false)}
     >
+      <div className="flex flex-col items-center gap-2">
         <div
           className={`w-8 h-8 rounded-lg flex items-center justify-center flex-shrink-0 ${
             isAssistant
@@ -33,6 +46,16 @@ export const ChatMessage = ({ role, content }: ChatMessageProps) => {
           )}
         </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>
+
       <div className="flex-1 space-y-2">
         <div className="prose prose-invert max-w-none">
           <p className="text-foreground leading-relaxed">{content}</p>
@@ -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}
               />
             ))}