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>
+  );
+};