From b84090c9a3f62a10cf3b665087e4ab945faa46f7 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:14:33 +0000
Subject: [PATCH] Refactor chat input layout

---
 src/components/chat/ChatInput.tsx | 41 +++++++++++++++++--------------
 1 file changed, 23 insertions(+), 18 deletions(-)

diff --git a/src/components/chat/ChatInput.tsx b/src/components/chat/ChatInput.tsx
index e8ccd0e..0ac64d2 100644
--- a/src/components/chat/ChatInput.tsx
+++ b/src/components/chat/ChatInput.tsx
@@ -57,10 +57,10 @@ export const ChatInput = ({ onSendMessage }: ChatInputProps) => {
 
   return (
     <div className="border-t border-border bg-card/50 backdrop-blur-sm p-4">
-      <div className="max-w-4xl mx-auto">
+      <div className="max-w-4xl mx-auto space-y-3">
         {/* Attached Files Preview */}
         {attachedFiles.length > 0 && (
-          <div className="mb-3 flex flex-wrap gap-2">
+          <div className="flex flex-wrap gap-2">
             {attachedFiles.map((file, index) => (
               <div
                 key={index}
@@ -84,16 +84,20 @@ export const ChatInput = ({ onSendMessage }: ChatInputProps) => {
           </div>
         )}
 
-        <div className="relative glass-effect rounded-xl p-1">
-          <Textarea
-            value={message}
-            onChange={(e) => setMessage(e.target.value)}
-            onKeyDown={handleKeyDown}
-            placeholder="Digite sua mensagem..."
-            className="min-h-[60px] max-h-[400px] resize-y border-0 bg-transparent focus-visible:ring-0 focus-visible:ring-offset-0 pr-24"
-          />
-          
-          <div className="absolute right-2 bottom-2 flex items-center gap-1">
+        {/* Message Input and Buttons */}
+        <div className="flex gap-2 items-end">
+          <div className="flex-1 glass-effect rounded-xl p-3">
+            <Textarea
+              value={message}
+              onChange={(e) => setMessage(e.target.value)}
+              onKeyDown={handleKeyDown}
+              placeholder="Digite sua mensagem..."
+              className="min-h-[60px] max-h-[400px] resize-y border-0 bg-transparent focus-visible:ring-0 focus-visible:ring-offset-0 w-full p-0"
+            />
+          </div>
+
+          {/* Action Buttons */}
+          <div className="flex gap-2">
             <input
               ref={fileInputRef}
               type="file"
@@ -103,25 +107,26 @@ export const ChatInput = ({ onSendMessage }: ChatInputProps) => {
               accept=".pdf,.txt,.doc,.docx,.xls,.xlsx,.csv,.png,.jpg,.jpeg,.gif,.webp"
             />
             <Button
-              variant="ghost"
+              variant="outline"
               size="icon"
-              className="h-8 w-8 text-muted-foreground hover:text-foreground"
+              className="h-11 w-11 glass-effect"
               onClick={() => fileInputRef.current?.click()}
               title="Anexar arquivo"
             >
-              <Paperclip className="w-4 h-4" />
+              <Paperclip className="w-5 h-5" />
             </Button>
             <Button
               onClick={handleSend}
               size="icon"
-              className="h-8 w-8 cyber-glow"
+              className="h-11 w-11 cyber-glow"
               disabled={!message.trim() && attachedFiles.length === 0}
             >
-              <Send className="w-4 h-4" />
+              <Send className="w-5 h-5" />
             </Button>
           </div>
         </div>
-        <p className="text-xs text-muted-foreground text-center mt-2">
+
+        <p className="text-xs text-muted-foreground text-center">
           Pressione Enter para enviar, Shift + Enter para nova linha • Máx. 10MB por arquivo
         </p>
       </div>