From 51f8828f700dd3b800f23305a406cb4a9827713d Mon Sep 17 00:00:00 2001
From: "gpt-engineer-app[bot]"
 <159125892+gpt-engineer-app[bot]@users.noreply.github.com>
Date: Thu, 16 Oct 2025 19:04:15 +0000
Subject: [PATCH] feat: Alinhar mensagens e permitir anexos

---
 src/components/chat/ChatInput.tsx   | 88 ++++++++++++++++++++++++-----
 src/components/chat/ChatMessage.tsx | 85 +++++++++++++++++++---------
 src/components/chat/ChatView.tsx    | 13 ++++-
 3 files changed, 144 insertions(+), 42 deletions(-)

diff --git a/src/components/chat/ChatInput.tsx b/src/components/chat/ChatInput.tsx
index db7c37b..b0783f6 100644
--- a/src/components/chat/ChatInput.tsx
+++ b/src/components/chat/ChatInput.tsx
@@ -1,19 +1,24 @@
-import { Send, Paperclip, Mic } from "lucide-react";
+import { Send, Paperclip, X } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { Textarea } from "@/components/ui/textarea";
-import { useState } from "react";
+import { useState, useRef } from "react";
+import { useToast } from "@/hooks/use-toast";
 
 interface ChatInputProps {
-  onSendMessage: (message: string) => void;
+  onSendMessage: (message: string, files?: File[]) => void;
 }
 
 export const ChatInput = ({ onSendMessage }: ChatInputProps) => {
   const [message, setMessage] = useState("");
+  const [attachedFiles, setAttachedFiles] = useState<File[]>([]);
+  const fileInputRef = useRef<HTMLInputElement>(null);
+  const { toast } = useToast();
 
   const handleSend = () => {
-    if (message.trim()) {
-      onSendMessage(message);
+    if (message.trim() || attachedFiles.length > 0) {
+      onSendMessage(message, attachedFiles);
       setMessage("");
+      setAttachedFiles([]);
     }
   };
 
@@ -24,9 +29,61 @@ export const ChatInput = ({ onSendMessage }: ChatInputProps) => {
     }
   };
 
+  const handleFileSelect = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const files = Array.from(e.target.files || []);
+    
+    // Validate file size (max 10MB per file)
+    const validFiles = files.filter((file) => {
+      if (file.size > 10 * 1024 * 1024) {
+        toast({
+          title: "Arquivo muito grande",
+          description: `${file.name} excede o limite de 10MB`,
+          variant: "destructive",
+        });
+        return false;
+      }
+      return true;
+    });
+
+    setAttachedFiles([...attachedFiles, ...validFiles]);
+    if (fileInputRef.current) {
+      fileInputRef.current.value = "";
+    }
+  };
+
+  const removeFile = (index: number) => {
+    setAttachedFiles(attachedFiles.filter((_, i) => i !== index));
+  };
+
   return (
     <div className="border-t border-border bg-card/50 backdrop-blur-sm p-4">
       <div className="max-w-4xl mx-auto">
+        {/* Attached Files Preview */}
+        {attachedFiles.length > 0 && (
+          <div className="mb-3 flex flex-wrap gap-2">
+            {attachedFiles.map((file, index) => (
+              <div
+                key={index}
+                className="flex items-center gap-2 px-3 py-1.5 rounded-lg bg-muted border border-border text-sm"
+              >
+                <Paperclip className="w-3 h-3 text-primary" />
+                <span className="font-medium">{file.name}</span>
+                <span className="text-xs text-muted-foreground">
+                  ({(file.size / 1024).toFixed(1)} KB)
+                </span>
+                <Button
+                  variant="ghost"
+                  size="icon"
+                  className="h-4 w-4 ml-1"
+                  onClick={() => removeFile(index)}
+                >
+                  <X className="w-3 h-3" />
+                </Button>
+              </div>
+            ))}
+          </div>
+        )}
+
         <div className="relative glass-effect rounded-xl p-1">
           <Textarea
             value={message}
@@ -37,32 +94,35 @@ export const ChatInput = ({ onSendMessage }: ChatInputProps) => {
           />
           
           <div className="absolute right-2 bottom-2 flex items-center gap-1">
+            <input
+              ref={fileInputRef}
+              type="file"
+              multiple
+              className="hidden"
+              onChange={handleFileSelect}
+              accept=".pdf,.txt,.doc,.docx,.xls,.xlsx,.csv,.png,.jpg,.jpeg,.gif,.webp"
+            />
             <Button
               variant="ghost"
               size="icon"
               className="h-8 w-8 text-muted-foreground hover:text-foreground"
+              onClick={() => fileInputRef.current?.click()}
+              title="Anexar arquivo"
             >
               <Paperclip className="w-4 h-4" />
             </Button>
-            <Button
-              variant="ghost"
-              size="icon"
-              className="h-8 w-8 text-muted-foreground hover:text-foreground"
-            >
-              <Mic className="w-4 h-4" />
-            </Button>
             <Button
               onClick={handleSend}
               size="icon"
               className="h-8 w-8 cyber-glow"
-              disabled={!message.trim()}
+              disabled={!message.trim() && attachedFiles.length === 0}
             >
               <Send className="w-4 h-4" />
             </Button>
           </div>
         </div>
         <p className="text-xs text-muted-foreground text-center mt-2">
-          Pressione Enter para enviar, Shift + Enter para nova linha
+          Pressione Enter para enviar, Shift + Enter para nova linha • Máx. 10MB por arquivo
         </p>
       </div>
     </div>
diff --git a/src/components/chat/ChatMessage.tsx b/src/components/chat/ChatMessage.tsx
index d3c4aec..87b776b 100644
--- a/src/components/chat/ChatMessage.tsx
+++ b/src/components/chat/ChatMessage.tsx
@@ -1,4 +1,4 @@
-import { Bot, User, Copy } from "lucide-react";
+import { Bot, User, Copy, File } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { Badge } from "@/components/ui/badge";
 import { useState } from "react";
@@ -8,9 +8,14 @@ interface ChatMessageProps {
   role: "user" | "assistant";
   content: string;
   model?: string;
+  attachments?: Array<{
+    name: string;
+    type: string;
+    size: number;
+  }>;
 }
 
-export const ChatMessage = ({ role, content, model }: ChatMessageProps) => {
+export const ChatMessage = ({ role, content, model, attachments }: ChatMessageProps) => {
   const [showActions, setShowActions] = useState(false);
   const { toast } = useToast();
   const isAssistant = role === "assistant";
@@ -27,38 +32,58 @@ export const ChatMessage = ({ role, content, model }: ChatMessageProps) => {
     <div
       className={`flex gap-4 py-6 px-6 group ${
         isAssistant ? "bg-muted/30" : ""
-      } hover:bg-muted/20 transition-colors`}
+      } hover:bg-muted/20 transition-colors ${
+        isAssistant ? "justify-start" : "justify-end"
+      }`}
       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
-              ? "bg-gradient-to-br from-primary to-secondary"
-              : "bg-accent/20 border border-accent"
-          }`}
-        >
-          {isAssistant ? (
+      {isAssistant && (
+        <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 bg-gradient-to-br from-primary to-secondary">
             <Bot className="w-5 h-5 text-primary-foreground" />
-          ) : (
-            <User className="w-5 h-5 text-accent" />
+          </div>
+          
+          {model && (
+            <Badge 
+              variant="secondary" 
+              className="text-xs px-2 py-0.5 bg-primary/10 text-primary border border-primary/30"
+            >
+              {model}
+            </Badge>
           )}
         </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>
+      <div className={`flex-1 max-w-3xl space-y-2 ${isAssistant ? "" : "flex flex-col items-end"}`}>
+        {/* Attachments */}
+        {attachments && attachments.length > 0 && (
+          <div className="flex flex-wrap gap-2 mb-2">
+            {attachments.map((file, index) => (
+              <div
+                key={index}
+                className="flex items-center gap-2 px-3 py-2 rounded-lg bg-muted border border-border text-sm"
+              >
+                <File className="w-4 h-4 text-primary" />
+                <span className="font-medium">{file.name}</span>
+                <span className="text-xs text-muted-foreground">
+                  ({(file.size / 1024).toFixed(1)} KB)
+                </span>
+              </div>
+            ))}
+          </div>
+        )}
+
+        <div
+          className={`inline-block px-4 py-3 rounded-xl ${
+            isAssistant
+              ? "bg-card border border-border"
+              : "bg-gradient-to-br from-primary to-secondary text-primary-foreground"
+          }`}
+        >
+          <p className={`leading-relaxed ${isAssistant ? "text-foreground" : "text-white"}`}>
+            {content}
+          </p>
         </div>
 
         {showActions && (
@@ -75,6 +100,12 @@ export const ChatMessage = ({ role, content, model }: ChatMessageProps) => {
           </div>
         )}
       </div>
+
+      {!isAssistant && (
+        <div className="w-8 h-8 rounded-lg flex items-center justify-center flex-shrink-0 bg-accent/20 border border-accent">
+          <User className="w-5 h-5 text-accent" />
+        </div>
+      )}
     </div>
   );
 };
diff --git a/src/components/chat/ChatView.tsx b/src/components/chat/ChatView.tsx
index 7659c8f..1097e83 100644
--- a/src/components/chat/ChatView.tsx
+++ b/src/components/chat/ChatView.tsx
@@ -10,6 +10,11 @@ interface Message {
   role: "user" | "assistant";
   content: string;
   model?: string;
+  attachments?: Array<{
+    name: string;
+    type: string;
+    size: number;
+  }>;
 }
 
 export const ChatView = () => {
@@ -26,11 +31,16 @@ export const ChatView = () => {
 
   const [isLoading, setIsLoading] = useState(false);
 
-  const handleSendMessage = (content: string) => {
+  const handleSendMessage = (content: string, files?: File[]) => {
     const newMessage: Message = {
       id: Date.now().toString(),
       role: "user",
       content,
+      attachments: files?.map((file) => ({
+        name: file.name,
+        type: file.type,
+        size: file.size,
+      })),
     };
 
     setMessages((prev) => [...prev, newMessage]);
@@ -74,6 +84,7 @@ export const ChatView = () => {
                 role={message.role}
                 content={message.content}
                 model={message.model}
+                attachments={message.attachments}
               />
             ))}