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,48 @@
+import { ChevronDown } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+
+export const ChatHeader = () => {
+  const models = [
+    "ChatGPT 4.1",
+    "GPT-5 Mini",
+    "Claude 3.5 Sonnet",
+    "Gemini 2.5 Flash",
+  ];
+
+  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">
+        <div className="flex items-center gap-2">
+          <div className="w-2 h-2 rounded-full bg-primary animate-pulse-glow" />
+          <span className="text-sm text-muted-foreground">Online</span>
+        </div>
+        
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <Button variant="outline" className="gap-2 glass-effect">
+              <span className="font-medium">ChatGPT 4.1</span>
+              <ChevronDown className="w-4 h-4" />
+            </Button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align="start" className="glass-effect">
+            {models.map((model) => (
+              <DropdownMenuItem key={model} className="cursor-pointer">
+                {model}
+              </DropdownMenuItem>
+            ))}
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </div>
+
+      <div className="text-sm text-muted-foreground">
+        Modelo de linguagem avançado
+      </div>
+    </header>
+  );
+};
@@ -0,0 +1,90 @@
+import { MessageSquare, Image, Mic, Settings, Plus } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Separator } from "@/components/ui/separator";
+
+interface LayoutProps {
+  children: React.ReactNode;
+  activeTab: "chat" | "images" | "audio";
+  onTabChange: (tab: "chat" | "images" | "audio") => void;
+}
+
+type TabType = "chat" | "images" | "audio";
+
+export const Layout = ({ children, activeTab, onTabChange }: LayoutProps) => {
+
+  const tabs = [
+    { id: "chat" as TabType, label: "Bate-papo", icon: MessageSquare },
+    { id: "images" as TabType, label: "Imagens", icon: Image },
+    { id: "audio" as TabType, label: "Áudio", icon: Mic },
+  ];
+
+  return (
+    <div className="flex h-screen w-full bg-background overflow-hidden">
+      {/* Sidebar */}
+      <aside className="w-72 bg-sidebar border-r border-sidebar-border flex flex-col">
+        {/* Logo */}
+        <div className="p-6 border-b border-sidebar-border">
+          <h1 className="text-2xl font-bold gradient-text">HGTX Codex</h1>
+          <p className="text-xs text-muted-foreground mt-1">AI Interface System</p>
+        </div>
+
+        {/* New Chat Button */}
+        <div className="p-4">
+          <Button className="w-full gap-2 cyber-glow" variant="default">
+            <Plus className="w-4 h-4" />
+            Novo Chat
+          </Button>
+        </div>
+
+        {/* Navigation Tabs */}
+        <nav className="flex-1 px-3 py-2 space-y-1">
+          {tabs.map((tab) => {
+            const Icon = tab.icon;
+            const isActive = activeTab === tab.id;
+            return (
+              <button
+                key={tab.id}
+                onClick={() => onTabChange(tab.id)}
+                className={`w-full flex items-center gap-3 px-4 py-3 rounded-lg transition-all ${
+                  isActive
+                    ? "bg-sidebar-accent text-sidebar-accent-foreground cyber-border"
+                    : "text-sidebar-foreground hover:bg-sidebar-accent/50"
+                }`}
+              >
+                <Icon className="w-5 h-5" />
+                <span className="font-medium">{tab.label}</span>
+              </button>
+            );
+          })}
+        </nav>
+
+        <Separator className="bg-sidebar-border" />
+
+        {/* Recent Section */}
+        <div className="p-4 space-y-2">
+          <p className="text-xs font-semibold text-muted-foreground uppercase tracking-wider">
+            Recentes
+          </p>
+          <div className="space-y-1">
+            <div className="text-sm text-sidebar-foreground/70 hover:text-sidebar-foreground px-3 py-2 rounded cursor-pointer hover:bg-sidebar-accent/30 transition-colors">
+              Conversa anterior...
+            </div>
+          </div>
+        </div>
+
+        {/* Settings */}
+        <div className="p-4 border-t border-sidebar-border">
+          <Button variant="ghost" className="w-full justify-start gap-2 text-sidebar-foreground">
+            <Settings className="w-4 h-4" />
+            Configurações
+          </Button>
+        </div>
+      </aside>
+
+      {/* Main Content */}
+      <main className="flex-1 flex flex-col overflow-hidden">
+        {children}
+      </main>
+    </div>
+  );
+};
@@ -0,0 +1,222 @@
+import { useState } from "react";
+import { ChatHeader } from "@/components/ChatHeader";
+import { Button } from "@/components/ui/button";
+import { Textarea } from "@/components/ui/textarea";
+import { Upload, Mic, Play, Download, Copy, Trash2 } from "lucide-react";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+
+export const AudioView = () => {
+  const [textToSpeech, setTextToSpeech] = useState("");
+  const [isProcessing, setIsProcessing] = useState(false);
+
+  const handleGenerateAudio = () => {
+    setIsProcessing(true);
+    setTimeout(() => setIsProcessing(false), 2000);
+  };
+
+  return (
+    <div className="flex flex-col h-full">
+      <ChatHeader />
+
+      <ScrollArea className="flex-1">
+        <div className="max-w-4xl mx-auto p-6">
+          <Tabs defaultValue="transcription" className="space-y-6">
+            <TabsList className="grid w-full grid-cols-2 glass-effect">
+              <TabsTrigger value="transcription">
+                Transcrição de Áudio
+              </TabsTrigger>
+              <TabsTrigger value="generation">Geração de Voz</TabsTrigger>
+            </TabsList>
+
+            {/* Transcription Tab */}
+            <TabsContent value="transcription" className="space-y-6">
+              <div className="glass-effect rounded-xl p-6 space-y-4">
+                <h3 className="text-lg font-semibold">
+                  Converter Áudio em Texto
+                </h3>
+                <p className="text-sm text-muted-foreground">
+                  Envie um arquivo de áudio (.mp3, .wav) para transcrição
+                </p>
+
+                <div className="border-2 border-dashed border-border rounded-xl p-12 text-center space-y-4 hover:border-primary/50 transition-colors cursor-pointer">
+                  <div className="w-16 h-16 mx-auto rounded-full bg-primary/10 flex items-center justify-center">
+                    <Upload className="w-8 h-8 text-primary" />
+                  </div>
+                  <div>
+                    <p className="font-medium">
+                      Clique para selecionar ou arraste o arquivo
+                    </p>
+                    <p className="text-sm text-muted-foreground mt-1">
+                      Suporta MP3, WAV (máx. 25MB)
+                    </p>
+                  </div>
+                  <Button variant="outline" className="gap-2">
+                    <Upload className="w-4 h-4" />
+                    Selecionar Arquivo
+                  </Button>
+                </div>
+              </div>
+
+              {/* Sample Transcription Result */}
+              <div className="glass-effect rounded-xl p-6 space-y-3">
+                <div className="flex items-center justify-between">
+                  <div>
+                    <h4 className="font-semibold">audio_sample.mp3</h4>
+                    <p className="text-xs text-muted-foreground">
+                      Transcrito há 5 minutos
+                    </p>
+                  </div>
+                  <div className="flex gap-2">
+                    <Button size="sm" variant="outline" className="gap-1">
+                      <Copy className="w-3 h-3" />
+                      Copiar
+                    </Button>
+                    <Button size="sm" variant="outline" className="gap-1">
+                      <Download className="w-3 h-3" />
+                    </Button>
+                    <Button size="sm" variant="destructive" className="gap-1">
+                      <Trash2 className="w-3 h-3" />
+                    </Button>
+                  </div>
+                </div>
+                <div className="bg-muted/30 rounded-lg p-4">
+                  <p className="text-sm leading-relaxed">
+                    Esta é uma transcrição de exemplo do áudio enviado. O
+                    sistema utilizará modelos de IA avançados para converter
+                    sua fala em texto com alta precisão.
+                  </p>
+                </div>
+              </div>
+            </TabsContent>
+
+            {/* Generation Tab */}
+            <TabsContent value="generation" className="space-y-6">
+              <div className="glass-effect rounded-xl p-6 space-y-4">
+                <h3 className="text-lg font-semibold">
+                  Converter Texto em Voz
+                </h3>
+
+                <div className="space-y-2">
+                  <label className="text-sm font-medium">
+                    Digite o texto para converter
+                  </label>
+                  <Textarea
+                    value={textToSpeech}
+                    onChange={(e) => setTextToSpeech(e.target.value)}
+                    placeholder="Digite o texto que deseja converter em fala..."
+                    className="min-h-[120px] resize-none"
+                  />
+                </div>
+
+                <div className="flex gap-4 items-end">
+                  <div className="flex-1 space-y-2">
+                    <label className="text-sm font-medium">Tipo de Voz</label>
+                    <Select defaultValue="neutral">
+                      <SelectTrigger>
+                        <SelectValue />
+                      </SelectTrigger>
+                      <SelectContent>
+                        <SelectItem value="neutral">Neutra</SelectItem>
+                        <SelectItem value="masculine">Masculina</SelectItem>
+                        <SelectItem value="feminine">Feminina</SelectItem>
+                        <SelectItem value="child">Infantil</SelectItem>
+                      </SelectContent>
+                    </Select>
+                  </div>
+
+                  <Button
+                    onClick={handleGenerateAudio}
+                    disabled={!textToSpeech.trim() || isProcessing}
+                    className="gap-2 cyber-glow"
+                    size="lg"
+                  >
+                    <Mic className="w-4 h-4" />
+                    {isProcessing ? "Gerando..." : "Gerar Áudio"}
+                  </Button>
+                </div>
+
+                {isProcessing && (
+                  <div className="bg-muted/30 rounded-lg p-6 flex items-center justify-center gap-3">
+                    <div className="w-8 h-8 border-4 border-primary/20 border-t-primary rounded-full animate-spin" />
+                    <p className="text-sm font-medium">
+                      Processando áudio...
+                    </p>
+                  </div>
+                )}
+              </div>
+
+              {/* Sample Generated Audio */}
+              <div className="glass-effect rounded-xl p-6 space-y-4">
+                <div className="flex items-center justify-between">
+                  <div>
+                    <h4 className="font-semibold">Áudio Gerado</h4>
+                    <p className="text-xs text-muted-foreground">
+                      Há 2 minutos · Voz Neutra
+                    </p>
+                  </div>
+                  <div className="flex gap-2">
+                    <Button size="sm" variant="outline" className="gap-1">
+                      <Download className="w-3 h-3" />
+                      Baixar
+                    </Button>
+                    <Button size="sm" variant="destructive" className="gap-1">
+                      <Trash2 className="w-3 h-3" />
+                    </Button>
+                  </div>
+                </div>
+
+                <div className="bg-muted/30 rounded-lg p-4 flex items-center gap-4">
+                  <Button size="icon" variant="outline" className="rounded-full">
+                    <Play className="w-5 h-5" />
+                  </Button>
+                  <div className="flex-1 h-2 bg-muted rounded-full overflow-hidden">
+                    <div className="h-full w-1/3 bg-primary rounded-full" />
+                  </div>
+                  <span className="text-sm text-muted-foreground tabular-nums">
+                    0:12 / 0:35
+                  </span>
+                </div>
+              </div>
+            </TabsContent>
+          </Tabs>
+
+          {/* History Section */}
+          <div className="mt-8 space-y-4">
+            <h3 className="text-lg font-semibold">Histórico Recente</h3>
+            <div className="grid gap-3">
+              {[1, 2].map((i) => (
+                <div
+                  key={i}
+                  className="glass-effect rounded-lg p-4 flex items-center justify-between hover:bg-muted/20 transition-colors"
+                >
+                  <div className="flex items-center gap-3">
+                    <div className="w-10 h-10 rounded-lg bg-primary/10 flex items-center justify-center">
+                      <Mic className="w-5 h-5 text-primary" />
+                    </div>
+                    <div>
+                      <p className="font-medium text-sm">audio_file_{i}.mp3</p>
+                      <p className="text-xs text-muted-foreground">
+                        Processado há {i} hora{i > 1 ? "s" : ""}
+                      </p>
+                    </div>
+                  </div>
+                  <Button size="icon" variant="ghost">
+                    <Play className="w-4 h-4" />
+                  </Button>
+                </div>
+              ))}
+            </div>
+          </div>
+        </div>
+      </ScrollArea>
+    </div>
+  );
+};
@@ -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>
+  );
+};
@@ -0,0 +1,146 @@
+import { useState } from "react";
+import { ChatHeader } from "@/components/ChatHeader";
+import { Button } from "@/components/ui/button";
+import { Textarea } from "@/components/ui/textarea";
+import { Download, Copy, Trash2, Sparkles } from "lucide-react";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+
+export const ImageView = () => {
+  const [prompt, setPrompt] = useState("");
+  const [isGenerating, setIsGenerating] = useState(false);
+  const [images, setImages] = useState<string[]>([]);
+
+  const handleGenerate = () => {
+    setIsGenerating(true);
+    // Simulate image generation
+    setTimeout(() => {
+      setImages((prev) => [
+        "https://images.unsplash.com/photo-1618005182384-a83a8bd57fbe?w=512&h=512&fit=crop",
+        ...prev,
+      ]);
+      setIsGenerating(false);
+    }, 3000);
+  };
+
+  return (
+    <div className="flex flex-col h-full">
+      <ChatHeader />
+
+      <ScrollArea className="flex-1">
+        <div className="max-w-5xl mx-auto p-6 space-y-6">
+          {/* Generation Form */}
+          <div className="glass-effect rounded-xl p-6 space-y-4">
+            <div className="space-y-2">
+              <label className="text-sm font-medium text-foreground">
+                Descreva a imagem
+              </label>
+              <Textarea
+                value={prompt}
+                onChange={(e) => setPrompt(e.target.value)}
+                placeholder="Descreva a imagem que deseja criar..."
+                className="min-h-[100px] resize-none"
+              />
+            </div>
+
+            <div className="flex gap-4 items-end">
+              <div className="flex-1 space-y-2">
+                <label className="text-sm font-medium text-foreground">
+                  Tamanho
+                </label>
+                <Select defaultValue="1024x1024">
+                  <SelectTrigger>
+                    <SelectValue />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="512x512">512x512</SelectItem>
+                    <SelectItem value="1024x1024">1024x1024</SelectItem>
+                    <SelectItem value="1792x1024">1792x1024 (Wide)</SelectItem>
+                    <SelectItem value="1024x1792">1024x1792 (Tall)</SelectItem>
+                  </SelectContent>
+                </Select>
+              </div>
+
+              <Button
+                onClick={handleGenerate}
+                disabled={!prompt.trim() || isGenerating}
+                className="gap-2 cyber-glow"
+                size="lg"
+              >
+                <Sparkles className="w-4 h-4" />
+                {isGenerating ? "Gerando..." : "Gerar Imagem"}
+              </Button>
+            </div>
+          </div>
+
+          {/* Loading State */}
+          {isGenerating && (
+            <div className="glass-effect rounded-xl p-12 flex flex-col items-center justify-center space-y-4 animate-fade-in">
+              <div className="relative">
+                <div className="w-24 h-24 rounded-full border-4 border-primary/20 border-t-primary animate-spin" />
+                <div className="absolute inset-0 flex items-center justify-center">
+                  <Sparkles className="w-8 h-8 text-primary animate-pulse-glow" />
+                </div>
+              </div>
+              <p className="text-lg font-medium gradient-text">
+                Gerando sua imagem...
+              </p>
+              <p className="text-sm text-muted-foreground">
+                Isso pode levar alguns segundos
+              </p>
+            </div>
+          )}
+
+          {/* Generated Images Grid */}
+          {images.length > 0 && (
+            <div>
+              <h3 className="text-lg font-semibold mb-4">Imagens Geradas</h3>
+              <div className="grid grid-cols-2 lg:grid-cols-3 gap-4">
+                {images.map((image, index) => (
+                  <div
+                    key={index}
+                    className="group relative glass-effect rounded-xl overflow-hidden aspect-square animate-fade-in"
+                  >
+                    <img
+                      src={image}
+                      alt={`Generated ${index}`}
+                      className="w-full h-full object-cover"
+                    />
+                    <div className="absolute inset-0 bg-gradient-to-t from-black/80 via-black/0 to-black/0 opacity-0 group-hover:opacity-100 transition-opacity">
+                      <div className="absolute bottom-0 left-0 right-0 p-3 flex gap-2">
+                        <Button
+                          size="sm"
+                          variant="secondary"
+                          className="flex-1 gap-1"
+                        >
+                          <Download className="w-3 h-3" />
+                          Baixar
+                        </Button>
+                        <Button size="sm" variant="secondary" className="gap-1">
+                          <Copy className="w-3 h-3" />
+                        </Button>
+                        <Button
+                          size="sm"
+                          variant="destructive"
+                          className="gap-1"
+                        >
+                          <Trash2 className="w-3 h-3" />
+                        </Button>
+                      </div>
+                    </div>
+                  </div>
+                ))}
+              </div>
+            </div>
+          )}
+        </div>
+      </ScrollArea>
+    </div>
+  );
+};
@@ -5,14 +5,14 @@ import { cva, type VariantProps } from "class-variance-authority";
 import { cn } from "@/lib/utils";

 const buttonVariants = cva(
-  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
  {
    variants: {
      variant: {
-        default: "bg-primary text-primary-foreground hover:bg-primary/90",
+        default: "bg-primary text-primary-foreground hover:bg-primary/90 shadow-lg hover:shadow-primary/50",
        destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
-        outline: "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
-        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        outline: "border border-border bg-background hover:bg-accent hover:text-accent-foreground",
+        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80 shadow-md hover:shadow-secondary/40",
        ghost: "hover:bg-accent hover:text-accent-foreground",
        link: "text-primary underline-offset-4 hover:underline",
      },
@@ -1,96 +1,61 @@
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
+
@tailwind base;
@tailwind components;
@tailwind utilities;

-/* Definition of the design system. All colors, gradients, fonts, etc should be defined here. 
-All colors MUST be HSL.
-*/
-
@layer base {
  :root {
-    --background: 0 0% 100%;
-    --foreground: 222.2 84% 4.9%;
+    /* HGTX Codex - Cyberpunk Dark Theme */
+    --background: 222 47% 5%;
+    --foreground: 200 100% 95%;

-    --card: 0 0% 100%;
-    --card-foreground: 222.2 84% 4.9%;
+    --card: 222 40% 8%;
+    --card-foreground: 200 100% 95%;

-    --popover: 0 0% 100%;
-    --popover-foreground: 222.2 84% 4.9%;
+    --popover: 222 45% 10%;
+    --popover-foreground: 200 100% 95%;

-    --primary: 222.2 47.4% 11.2%;
-    --primary-foreground: 210 40% 98%;
+    --primary: 190 100% 50%;
+    --primary-foreground: 222 47% 5%;

-    --secondary: 210 40% 96.1%;
-    --secondary-foreground: 222.2 47.4% 11.2%;
+    --secondary: 210 100% 50%;
+    --secondary-foreground: 222 47% 5%;

-    --muted: 210 40% 96.1%;
-    --muted-foreground: 215.4 16.3% 46.9%;
+    --muted: 222 30% 15%;
+    --muted-foreground: 200 20% 65%;

-    --accent: 210 40% 96.1%;
-    --accent-foreground: 222.2 47.4% 11.2%;
+    --accent: 190 100% 60%;
+    --accent-foreground: 222 47% 5%;

-    --destructive: 0 84.2% 60.2%;
-    --destructive-foreground: 210 40% 98%;
+    --destructive: 0 84% 60%;
+    --destructive-foreground: 200 100% 95%;

-    --border: 214.3 31.8% 91.4%;
-    --input: 214.3 31.8% 91.4%;
-    --ring: 222.2 84% 4.9%;
+    --border: 222 30% 18%;
+    --input: 222 30% 18%;
+    --ring: 190 100% 50%;

-    --radius: 0.5rem;
+    --radius: 0.75rem;

-    --sidebar-background: 0 0% 98%;
+    /* Sidebar specific */
+    --sidebar-background: 222 45% 7%;
+    --sidebar-foreground: 200 100% 90%;
+    --sidebar-primary: 190 100% 50%;
+    --sidebar-primary-foreground: 222 47% 5%;
+    --sidebar-accent: 222 35% 12%;
+    --sidebar-accent-foreground: 190 100% 60%;
+    --sidebar-border: 222 30% 15%;
+    --sidebar-ring: 190 100% 50%;

-    --sidebar-foreground: 240 5.3% 26.1%;
-
-    --sidebar-primary: 240 5.9% 10%;
-
-    --sidebar-primary-foreground: 0 0% 98%;
-
-    --sidebar-accent: 240 4.8% 95.9%;
-
-    --sidebar-accent-foreground: 240 5.9% 10%;
-
-    --sidebar-border: 220 13% 91%;
-
-    --sidebar-ring: 217.2 91.2% 59.8%;
-  }
-
-  .dark {
-    --background: 222.2 84% 4.9%;
-    --foreground: 210 40% 98%;
-
-    --card: 222.2 84% 4.9%;
-    --card-foreground: 210 40% 98%;
-
-    --popover: 222.2 84% 4.9%;
-    --popover-foreground: 210 40% 98%;
-
-    --primary: 210 40% 98%;
-    --primary-foreground: 222.2 47.4% 11.2%;
-
-    --secondary: 217.2 32.6% 17.5%;
-    --secondary-foreground: 210 40% 98%;
-
-    --muted: 217.2 32.6% 17.5%;
-    --muted-foreground: 215 20.2% 65.1%;
-
-    --accent: 217.2 32.6% 17.5%;
-    --accent-foreground: 210 40% 98%;
-
-    --destructive: 0 62.8% 30.6%;
-    --destructive-foreground: 210 40% 98%;
-
-    --border: 217.2 32.6% 17.5%;
-    --input: 217.2 32.6% 17.5%;
-    --ring: 212.7 26.8% 83.9%;
-    --sidebar-background: 240 5.9% 10%;
-    --sidebar-foreground: 240 4.8% 95.9%;
-    --sidebar-primary: 224.3 76.3% 48%;
-    --sidebar-primary-foreground: 0 0% 100%;
-    --sidebar-accent: 240 3.7% 15.9%;
-    --sidebar-accent-foreground: 240 4.8% 95.9%;
-    --sidebar-border: 240 3.7% 15.9%;
-    --sidebar-ring: 217.2 91.2% 59.8%;
+    /* Custom gradients */
+    --gradient-cyber: linear-gradient(135deg, hsl(190 100% 50%) 0%, hsl(210 100% 50%) 100%);
+    --gradient-subtle: linear-gradient(180deg, hsl(222 45% 8%) 0%, hsl(222 47% 5%) 100%);
+    --glow-cyan: 0 0 40px hsl(190 100% 50% / 0.3);
+    --glow-blue: 0 0 30px hsl(210 100% 50% / 0.25);
+    
+    /* Animation speeds */
+    --transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    --transition-bounce: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  }
 }

@@ -100,6 +65,44 @@ All colors MUST be HSL.
  }

  body {
-    @apply bg-background text-foreground;
+    @apply bg-background text-foreground font-sans antialiased;
+    font-family: 'Inter', system-ui, -apple-system, sans-serif;
+  }
+
+  /* Scrollbar styling */
+  ::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
+  }
+
+  ::-webkit-scrollbar-track {
+    @apply bg-background;
+  }
+
+  ::-webkit-scrollbar-thumb {
+    @apply bg-muted rounded-full;
+  }
+
+  ::-webkit-scrollbar-thumb:hover {
+    @apply bg-primary/50;
+  }
+}
+
+@layer components {
+  .glass-effect {
+    @apply bg-card/40 backdrop-blur-xl border border-border/50;
+  }
+
+  .cyber-glow {
+    box-shadow: var(--glow-cyan);
+  }
+
+  .cyber-border {
+    @apply border border-primary/30 rounded-lg;
+    box-shadow: 0 0 20px hsl(190 100% 50% / 0.1);
+  }
+
+  .gradient-text {
+    @apply bg-gradient-to-r from-primary to-secondary bg-clip-text text-transparent;
  }
 }
@@ -1,13 +1,18 @@
-// Update this page (the content is just a fallback if you fail to update the page)
+import { useState } from "react";
+import { Layout } from "@/components/Layout";
+import { ChatView } from "@/components/chat/ChatView";
+import { ImageView } from "@/components/images/ImageView";
+import { AudioView } from "@/components/audio/AudioView";

 const Index = () => {
+  const [activeView, setActiveView] = useState<"chat" | "images" | "audio">("chat");
+
  return (
-    <div className="flex min-h-screen items-center justify-center bg-background">
-      <div className="text-center">
-        <h1 className="mb-4 text-4xl font-bold">Welcome to Your Blank App</h1>
-        <p className="text-xl text-muted-foreground">Start building your amazing project here!</p>
-      </div>
-    </div>
+    <Layout activeTab={activeView} onTabChange={setActiveView}>
+      {activeView === "chat" && <ChatView />}
+      {activeView === "images" && <ImageView />}
+      {activeView === "audio" && <AudioView />}
+    </Layout>
  );
 };