From 3f6cdd8f97b82bfd9f8992e0f83be0a6aae36b52 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 20:25:40 +0000
Subject: [PATCH] Refactor: Move personality button

---
 src/components/ChatHeader.tsx     | 68 ++++++++++++++++++++++++++++++-
 src/components/chat/ChatInput.tsx | 59 +--------------------------
 src/components/chat/ChatView.tsx  |  8 ++--
 3 files changed, 71 insertions(+), 64 deletions(-)

diff --git a/src/components/ChatHeader.tsx b/src/components/ChatHeader.tsx
index b498927..4289d93 100644
--- a/src/components/ChatHeader.tsx
+++ b/src/components/ChatHeader.tsx
@@ -1,4 +1,4 @@
-import { ChevronDown } from "lucide-react";
+import { ChevronDown, UserCog } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import {
   DropdownMenu,
@@ -6,18 +6,35 @@ import {
   DropdownMenuItem,
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog";
+import { Textarea } from "@/components/ui/textarea";
+import { useState } from "react";
 
 interface ChatHeaderProps {
   showModelSelector?: boolean;
   selectedModel?: string;
   onModelChange?: (model: string) => void;
+  systemPrompt?: string;
+  onSystemPromptChange?: (prompt: string) => void;
 }
 
 export const ChatHeader = ({ 
   showModelSelector = false,
   selectedModel = "ChatGPT 4.1",
-  onModelChange
+  onModelChange,
+  systemPrompt = "Você é um assistente útil e prestativo.",
+  onSystemPromptChange
 }: ChatHeaderProps) => {
+  const [isPersonalityOpen, setIsPersonalityOpen] = useState(false);
+  const [tempSystemPrompt, setTempSystemPrompt] = useState(systemPrompt);
+  
   const models = [
     "ChatGPT 4.1",
     "ChatGPT 5",
@@ -25,6 +42,13 @@ export const ChatHeader = ({
     "Claude Opus 4.1",
   ];
 
+  const handleSavePersonality = () => {
+    if (onSystemPromptChange) {
+      onSystemPromptChange(tempSystemPrompt);
+    }
+    setIsPersonalityOpen(false);
+  };
+
   return (
     <header className="border-b border-border bg-card/50 backdrop-blur-sm px-6 py-4 flex items-center justify-between">
       <div className="flex items-center gap-4">
@@ -54,6 +78,46 @@ export const ChatHeader = ({
             </DropdownMenuContent>
           </DropdownMenu>
         )}
+
+        {showModelSelector && onSystemPromptChange && (
+          <Dialog open={isPersonalityOpen} onOpenChange={setIsPersonalityOpen}>
+            <DialogTrigger asChild>
+              <Button
+                variant="outline"
+                className="gap-2 glass-effect"
+                onClick={() => setTempSystemPrompt(systemPrompt)}
+              >
+                <UserCog className="w-4 h-4" />
+                <span className="font-medium">Personalidade</span>
+              </Button>
+            </DialogTrigger>
+            <DialogContent>
+              <DialogHeader>
+                <DialogTitle>Personalidade da IA</DialogTitle>
+                <DialogDescription>
+                  Defina o estilo, tom ou função da IA nesta conversa
+                </DialogDescription>
+              </DialogHeader>
+              <Textarea
+                value={tempSystemPrompt}
+                onChange={(e) => setTempSystemPrompt(e.target.value)}
+                placeholder="Ex: Você é um assistente técnico especializado em programação..."
+                className="min-h-[150px]"
+              />
+              <div className="flex justify-end gap-2">
+                <Button
+                  variant="outline"
+                  onClick={() => setIsPersonalityOpen(false)}
+                >
+                  Cancelar
+                </Button>
+                <Button onClick={handleSavePersonality}>
+                  Salvar
+                </Button>
+              </div>
+            </DialogContent>
+          </Dialog>
+        )}
       </div>
 
       <div className="text-sm text-muted-foreground">
diff --git a/src/components/chat/ChatInput.tsx b/src/components/chat/ChatInput.tsx
index 5a9ba12..5de6f0d 100644
--- a/src/components/chat/ChatInput.tsx
+++ b/src/components/chat/ChatInput.tsx
@@ -1,30 +1,18 @@
-import { Send, Paperclip, X, GripHorizontal, UserCog } from "lucide-react";
+import { Send, Paperclip, X, GripHorizontal } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { Textarea } from "@/components/ui/textarea";
 import { useState, useRef, useEffect } from "react";
 import { useToast } from "@/hooks/use-toast";
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogHeader,
-  DialogTitle,
-  DialogTrigger,
-} from "@/components/ui/dialog";
 
 interface ChatInputProps {
   onSendMessage: (message: string, files?: File[]) => void;
-  systemPrompt: string;
-  onSystemPromptChange: (prompt: string) => void;
 }
 
-export const ChatInput = ({ onSendMessage, systemPrompt, onSystemPromptChange }: ChatInputProps) => {
+export const ChatInput = ({ onSendMessage }: ChatInputProps) => {
   const [message, setMessage] = useState("");
   const [attachedFiles, setAttachedFiles] = useState<File[]>([]);
   const [textareaHeight, setTextareaHeight] = useState(60);
   const [isDragging, setIsDragging] = useState(false);
-  const [isPersonalityOpen, setIsPersonalityOpen] = useState(false);
-  const [tempSystemPrompt, setTempSystemPrompt] = useState(systemPrompt);
   const fileInputRef = useRef<HTMLInputElement>(null);
   const textareaRef = useRef<HTMLTextAreaElement>(null);
   const dragStartY = useRef<number>(0);
@@ -103,11 +91,6 @@ export const ChatInput = ({ onSendMessage, systemPrompt, onSystemPromptChange }:
     setAttachedFiles(attachedFiles.filter((_, i) => i !== index));
   };
 
-  const handleSavePersonality = () => {
-    onSystemPromptChange(tempSystemPrompt);
-    setIsPersonalityOpen(false);
-  };
-
   return (
     <div className="border-t border-border bg-card/50 backdrop-blur-sm p-4">
       <div className="max-w-4xl mx-auto space-y-3">
@@ -175,44 +158,6 @@ export const ChatInput = ({ onSendMessage, systemPrompt, onSystemPromptChange }:
               onChange={handleFileSelect}
               accept=".pdf,.txt,.doc,.docx,.xls,.xlsx,.csv,.png,.jpg,.jpeg,.gif,.webp"
             />
-            <Dialog open={isPersonalityOpen} onOpenChange={setIsPersonalityOpen}>
-              <DialogTrigger asChild>
-                <Button
-                  variant="outline"
-                  size="icon"
-                  className="h-11 w-11 glass-effect"
-                  onClick={() => setTempSystemPrompt(systemPrompt)}
-                  title="Personalidade"
-                >
-                  <UserCog className="w-5 h-5" />
-                </Button>
-              </DialogTrigger>
-              <DialogContent>
-                <DialogHeader>
-                  <DialogTitle>Personalidade da IA</DialogTitle>
-                  <DialogDescription>
-                    Defina o estilo, tom ou função da IA nesta conversa
-                  </DialogDescription>
-                </DialogHeader>
-                <Textarea
-                  value={tempSystemPrompt}
-                  onChange={(e) => setTempSystemPrompt(e.target.value)}
-                  placeholder="Ex: Você é um assistente técnico especializado em programação..."
-                  className="min-h-[150px]"
-                />
-                <div className="flex justify-end gap-2">
-                  <Button
-                    variant="outline"
-                    onClick={() => setIsPersonalityOpen(false)}
-                  >
-                    Cancelar
-                  </Button>
-                  <Button onClick={handleSavePersonality}>
-                    Salvar
-                  </Button>
-                </div>
-              </DialogContent>
-            </Dialog>
             <Button
               variant="outline"
               size="icon"
diff --git a/src/components/chat/ChatView.tsx b/src/components/chat/ChatView.tsx
index d2aa7b7..00ae580 100644
--- a/src/components/chat/ChatView.tsx
+++ b/src/components/chat/ChatView.tsx
@@ -90,6 +90,8 @@ export const ChatView = () => {
           showModelSelector={true}
           selectedModel={selectedModel}
           onModelChange={setSelectedModel}
+          systemPrompt={systemPrompt}
+          onSystemPromptChange={setSystemPrompt}
         />
 
         <ScrollArea className="flex-1">
@@ -119,11 +121,7 @@ export const ChatView = () => {
           </div>
         </ScrollArea>
 
-        <ChatInput 
-          onSendMessage={handleSendMessage}
-          systemPrompt={systemPrompt}
-          onSystemPromptChange={setSystemPrompt}
-        />
+        <ChatInput onSendMessage={handleSendMessage} />
       </div>
     </div>
   );