feat: Alinhar mensagens e permitir anexos

2025-10-16 19:04:15 +00:00
parent b64672fb06
commit 51f8828f70
3 changed files with 144 additions and 42 deletions
@@ -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>
@@ -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 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>

-      <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={`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>
  );
 };
@@ -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}
              />
            ))}