Atualizacao visual HGTX Commander

src/components/chat/ChatView.tsx

@@ -3,6 +3,13 @@ import { ChatHeader } from "@/components/ChatHeader";
 import { ChatMessage } from "./ChatMessage";
 import { ChatInput } from "./ChatInput";
 import { ChatSidebar } from "./ChatSidebar";
+import { ChatWelcome } from "./ChatWelcome";
+import {
+  createWelcomeMessage,
+  isWelcomeMessage,
+  withoutWelcomeMessages,
+} from "./welcome-message";
+import type { Message } from "./ChatView.types";
 import { ScrollArea } from "@/components/ui/scroll-area";
 import { chatService, ChatRecord, MessageRecord } from "@/services/chat";
 import { useToast } from "@/hooks/use-toast";
@@ -11,18 +18,6 @@ import { getModelId } from "@/config/models";
 // Texto padrão da personalidade (usado para novos chats)
 const DEFAULT_SYSTEM_PROMPT = "Você é um assistente útil e prestativo.";
 
-interface Message {
-  id: string;
-  role: "user" | "assistant";
-  content: string;
-  model?: string;
-  attachments?: Array<{
-    name: string;
-    type: string;
-    size: number;
-  }>;
-}
-
 export const ChatView = () => {
   const { toast } = useToast();
   const [isChatSidebarCollapsed, setIsChatSidebarCollapsed] = useState(false);
@@ -31,16 +26,17 @@ export const ChatView = () => {
   const [currentChatId, setCurrentChatId] = useState("0");
   // Inicia com texto padrão - será atualizado ao carregar chat existente
   const [systemPrompt, setSystemPrompt] = useState(DEFAULT_SYSTEM_PROMPT);
-  const [messages, setMessages] = useState<Message[]>([
-    {
-      id: "1",
-      role: "assistant",
-      content: "Olá! Sou o assistente HGTX Codex. Como posso ajudá-lo hoje?",
-      model: "GPT-4o",
-    },
-  ]);
+  const [messages, setMessages] = useState<Message[]>([createWelcomeMessage()]);
 
   const [isLoading, setIsLoading] = useState(false);
+  const [inputDraft, setInputDraft] = useState<{
+    text: string;
+    at: number;
+  } | null>(null);
+
+  const handleSelectSuggestion = (prompt: string) => {
+    setInputDraft({ text: prompt, at: Date.now() });
+  };
 
   // NOTA: Salvamento automático desabilitado - mensagens já são salvas na API
   // quando enviadas via handleSendMessage
@@ -82,14 +78,7 @@ export const ChatView = () => {
     // Reseta a personalidade para o texto padrão
     setSystemPrompt(DEFAULT_SYSTEM_PROMPT);
 
-    setMessages([
-      {
-        id: "1",
-        role: "assistant",
-        content: "Olá! Sou o assistente HGTX Codex. Como posso ajudá-lo hoje?",
-        model: selectedModel,
-      },
-    ]);
+    setMessages([createWelcomeMessage()]);
 
     // Dispara evento para atualizar a sidebar
     window.dispatchEvent(new Event('chatUpdated'));
@@ -136,14 +125,7 @@ export const ChatView = () => {
       });
 
       // Inicia com mensagem padrão em caso de erro
-      setMessages([
-        {
-          id: "1",
-          role: "assistant",
-          content: "Olá! Sou o assistente HGTX Codex. Como posso ajudá-lo hoje?",
-          model: selectedModel,
-        },
-      ]);
+      setMessages([createWelcomeMessage()]);
     } finally {
       setIsLoading(false);
     }
@@ -162,7 +144,7 @@ export const ChatView = () => {
       })),
     };
 
-    setMessages((prev) => [...prev, newMessage]);
+    setMessages((prev) => [...withoutWelcomeMessages(prev), newMessage]);
     setIsLoading(true);
 
     try {
@@ -234,7 +216,7 @@ export const ChatView = () => {
   return (
     <div className="flex h-full w-full pb-16 md:pb-0">
       {/* Chat Sidebar - Hidden on mobile */}
-      <div className="hidden md:block">
+      <div className="hidden w-80 max-w-80 shrink-0 min-w-0 overflow-hidden md:block">
         <ChatSidebar
           isCollapsed={isChatSidebarCollapsed}
           onToggleCollapse={() => setIsChatSidebarCollapsed(!isChatSidebarCollapsed)}
@@ -256,15 +238,22 @@ export const ChatView = () => {
 
         <ScrollArea className="flex-1">
           <div className="max-w-4xl mx-auto px-2 md:px-4">
-            {messages.map((message) => (
-              <ChatMessage
-                key={message.id}
-                role={message.role}
-                content={message.content}
-                model={message.model}
-                attachments={message.attachments}
-              />
-            ))}
+            {messages.map((message) =>
+              isWelcomeMessage(message) ? (
+                <ChatWelcome
+                  key={message.id}
+                  onSelectSuggestion={handleSelectSuggestion}
+                />
+              ) : (
+                <ChatMessage
+                  key={message.id}
+                  role={message.role}
+                  content={message.content}
+                  model={message.model}
+                  attachments={message.attachments}
+                />
+              )
+            )}
 
             {isLoading && (
               <div className="flex gap-4 py-6 px-6 bg-muted/30">
@@ -281,7 +270,12 @@ export const ChatView = () => {
           </div>
         </ScrollArea>
 
-        <ChatInput onSendMessage={handleSendMessage} />
+        <ChatInput
+          onSendMessage={handleSendMessage}
+          draftMessage={inputDraft?.text}
+          draftTrigger={inputDraft?.at}
+          onDraftApplied={() => setInputDraft(null)}
+        />
       </div>
     </div>
   );