feat: Alinhar mensagens e permitir anexos

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()) {
+    if (message.trim() || attachedFiles.length > 0) {
-      onSendMessage(message);
+      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>

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,26 +32,19 @@ 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)}
     >
+      {isAssistant && (
         <div className="flex flex-col items-center gap-2">
-        <div
+          <div className="w-8 h-8 rounded-lg flex items-center justify-center flex-shrink-0 bg-gradient-to-br from-primary to-secondary">
-          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 ? (
             <Bot className="w-5 h-5 text-primary-foreground" />
-          ) : (
-            <User className="w-5 h-5 text-accent" />
-          )}
           </div>
           
-        {isAssistant && model && (
+          {model && (
             <Badge 
               variant="secondary" 
               className="text-xs px-2 py-0.5 bg-primary/10 text-primary border border-primary/30"
@@ -55,10 +53,37 @@ export const ChatMessage = ({ role, content, model }: ChatMessageProps) => {
             </Badge>
           )}
         </div>
+      )}
 
-      <div className="flex-1 space-y-2">
+      <div className={`flex-1 max-w-3xl space-y-2 ${isAssistant ? "" : "flex flex-col items-end"}`}>
-        <div className="prose prose-invert max-w-none">
+        {/* Attachments */}
-          <p className="text-foreground leading-relaxed">{content}</p>
+        {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>
   );
 };

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}
               />
             ))}