Implement HGTX Codex interface

2025-10-16 18:40:35 +00:00
parent bae53d35d6
commit 480d771841
12 changed files with 854 additions and 103 deletions
@@ -0,0 +1,70 @@
+import { Send, Paperclip, Mic } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Textarea } from "@/components/ui/textarea";
+import { useState } from "react";
+
+interface ChatInputProps {
+  onSendMessage: (message: string) => void;
+}
+
+export const ChatInput = ({ onSendMessage }: ChatInputProps) => {
+  const [message, setMessage] = useState("");
+
+  const handleSend = () => {
+    if (message.trim()) {
+      onSendMessage(message);
+      setMessage("");
+    }
+  };
+
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === "Enter" && !e.shiftKey) {
+      e.preventDefault();
+      handleSend();
+    }
+  };
+
+  return (
+    <div className="border-t border-border bg-card/50 backdrop-blur-sm p-4">
+      <div className="max-w-4xl mx-auto">
+        <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-[200px] resize-none 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">
+            <Button
+              variant="ghost"
+              size="icon"
+              className="h-8 w-8 text-muted-foreground hover:text-foreground"
+            >
+              <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()}
+            >
+              <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
+        </p>
+      </div>
+    </div>
+  );
+};
@@ -0,0 +1,72 @@
+import { Bot, User, Copy, Edit, Trash2 } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { useState } from "react";
+
+interface ChatMessageProps {
+  role: "user" | "assistant";
+  content: string;
+}
+
+export const ChatMessage = ({ role, content }: ChatMessageProps) => {
+  const [showActions, setShowActions] = useState(false);
+  const isAssistant = role === "assistant";
+
+  return (
+    <div
+      className={`flex gap-4 py-6 px-6 group ${
+        isAssistant ? "bg-muted/30" : ""
+      } hover:bg-muted/20 transition-colors`}
+      onMouseEnter={() => setShowActions(true)}
+      onMouseLeave={() => setShowActions(false)}
+    >
+      <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 ? (
+          <Bot className="w-5 h-5 text-primary-foreground" />
+        ) : (
+          <User className="w-5 h-5 text-accent" />
+        )}
+      </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>
+
+        {showActions && (
+          <div className="flex gap-1 animate-fade-in">
+            <Button
+              variant="ghost"
+              size="sm"
+              className="h-7 px-2 text-muted-foreground hover:text-foreground"
+            >
+              <Copy className="w-3 h-3 mr-1" />
+              Copiar
+            </Button>
+            <Button
+              variant="ghost"
+              size="sm"
+              className="h-7 px-2 text-muted-foreground hover:text-foreground"
+            >
+              <Edit className="w-3 h-3 mr-1" />
+              Editar
+            </Button>
+            <Button
+              variant="ghost"
+              size="sm"
+              className="h-7 px-2 text-muted-foreground hover:text-destructive"
+            >
+              <Trash2 className="w-3 h-3 mr-1" />
+              Excluir
+            </Button>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
@@ -0,0 +1,79 @@
+import { useState } from "react";
+import { ChatHeader } from "@/components/ChatHeader";
+import { ChatMessage } from "./ChatMessage";
+import { ChatInput } from "./ChatInput";
+import { ScrollArea } from "@/components/ui/scroll-area";
+
+interface Message {
+  id: string;
+  role: "user" | "assistant";
+  content: string;
+}
+
+export const ChatView = () => {
+  const [messages, setMessages] = useState<Message[]>([
+    {
+      id: "1",
+      role: "assistant",
+      content: "Olá! Sou o assistente HGTX Codex. Como posso ajudá-lo hoje?",
+    },
+  ]);
+
+  const [isLoading, setIsLoading] = useState(false);
+
+  const handleSendMessage = (content: string) => {
+    const newMessage: Message = {
+      id: Date.now().toString(),
+      role: "user",
+      content,
+    };
+
+    setMessages((prev) => [...prev, newMessage]);
+    setIsLoading(true);
+
+    // Simulate AI response
+    setTimeout(() => {
+      const aiResponse: Message = {
+        id: (Date.now() + 1).toString(),
+        role: "assistant",
+        content:
+          "Esta é uma resposta simulada. Em breve, estarei conectado a modelos de IA reais para fornecer respostas inteligentes e úteis.",
+      };
+      setMessages((prev) => [...prev, aiResponse]);
+      setIsLoading(false);
+    }, 1500);
+  };
+
+  return (
+    <div className="flex flex-col h-full">
+      <ChatHeader />
+
+      <ScrollArea className="flex-1">
+        <div className="max-w-4xl mx-auto">
+          {messages.map((message) => (
+            <ChatMessage
+              key={message.id}
+              role={message.role}
+              content={message.content}
+            />
+          ))}
+
+          {isLoading && (
+            <div className="flex gap-4 py-6 px-6 bg-muted/30">
+              <div className="w-8 h-8 rounded-lg bg-gradient-to-br from-primary to-secondary flex items-center justify-center">
+                <div className="w-5 h-5 border-2 border-primary-foreground border-t-transparent rounded-full animate-spin" />
+              </div>
+              <div className="flex gap-1 items-center">
+                <div className="w-2 h-2 bg-primary rounded-full animate-bounce" />
+                <div className="w-2 h-2 bg-primary rounded-full animate-bounce delay-100" />
+                <div className="w-2 h-2 bg-primary rounded-full animate-bounce delay-200" />
+              </div>
+            </div>
+          )}
+        </div>
+      </ScrollArea>
+
+      <ChatInput onSendMessage={handleSendMessage} />
+    </div>
+  );
+};