Upload 10 files

chat-input.tsx

@@ -0,0 +1,93 @@
+"use client"
+
+import type React from "react"
+
+import { useState, useRef, type KeyboardEvent } from "react"
+import { Button } from "@/components/ui/button"
+import { Textarea } from "@/components/ui/textarea"
+import { Send, Trash2, Paperclip } from "lucide-react"
+
+interface ChatInputProps {
+  onSend: (message: string, file?: File) => void
+  isLoading: boolean
+  onClear: () => void
+}
+
+export function ChatInput({ onSend, isLoading, onClear }: ChatInputProps) {
+  const [message, setMessage] = useState("")
+  const [file, setFile] = useState<File | null>(null)
+  const fileInputRef = useRef<HTMLInputElement>(null)
+
+  const handleSend = () => {
+    if (message.trim() || file) {
+      onSend(message.trim(), file || undefined)
+      setMessage("")
+      setFile(null)
+    }
+  }
+
+  const handleKeyPress = (e: KeyboardEvent) => {
+    if (e.key === "Enter" && !e.shiftKey) {
+      e.preventDefault()
+      handleSend()
+    }
+  }
+
+  const handleFileSelect = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const selectedFile = e.target.files?.[0]
+    if (selectedFile) {
+      setFile(selectedFile)
+    }
+  }
+
+  return (
+    <div className="space-y-2">
+      {file && (
+        <div className="flex items-center gap-2 p-2 bg-muted rounded-md">
+          <Paperclip className="h-4 w-4" />
+          <span className="text-sm">{file.name}</span>
+          <Button variant="ghost" size="sm" onClick={() => setFile(null)}>
+            ×
+          </Button>
+        </div>
+      )}
+
+      <div className="flex gap-2">
+        <div className="flex-1 relative">
+          <Textarea
+            value={message}
+            onChange={(e) => setMessage(e.target.value)}
+            onKeyPress={handleKeyPress}
+            placeholder="Type your message... (Shift+Enter for new line)"
+            className="min-h-[60px] resize-none pr-12"
+            disabled={isLoading}
+          />
+          <input
+            ref={fileInputRef}
+            type="file"
+            className="hidden"
+            onChange={handleFileSelect}
+            accept=".txt,.json,.md,.pdf"
+          />
+          <Button
+            variant="ghost"
+            size="sm"
+            className="absolute right-2 top-2 h-8 w-8 p-0"
+            onClick={() => fileInputRef.current?.click()}
+          >
+            <Paperclip className="h-4 w-4" />
+          </Button>
+        </div>
+
+        <div className="flex flex-col gap-2">
+          <Button onClick={handleSend} disabled={isLoading || (!message.trim() && !file)} size="sm">
+            <Send className="h-4 w-4" />
+          </Button>
+          <Button variant="outline" onClick={onClear} size="sm">
+            <Trash2 className="h-4 w-4" />
+          </Button>
+        </div>
+      </div>
+    </div>
+  )
+}

chat-interface.tsx

@@ -0,0 +1,126 @@
+"use client"
+
+import type React from "react"
+import { useState, useRef } from "react"
+import { Card } from "@/components/ui/card"
+import { Button } from "@/components/ui/button"
+import { Badge } from "@/components/ui/badge"
+import { ChatMessages } from "@/components/chat-messages"
+import { ChatInput } from "@/components/chat-input"
+import { ProviderSelector } from "@/components/provider-selector"
+import { SuggestionPills } from "@/components/suggestion-pills"
+import { useChat } from "@/hooks/use-chat"
+import { Download, Upload, FileText, Copy, Globe, Zap } from "lucide-react"
+import type { AIProvider } from "@/types/chat"
+
+interface ChatInterfaceProps {
+  messages?: any[]
+  onSendMessage?: (message: string) => void
+  suggestions?: string[]
+  isGenerating?: boolean
+}
+
+export function ChatInterface({
+  messages: externalMessages,
+  onSendMessage: externalSendMessage,
+  suggestions: externalSuggestions,
+  isGenerating: externalIsGenerating,
+}: ChatInterfaceProps) {
+  const [selectedProvider, setSelectedProvider] = useState<AIProvider>("openai")
+  const [selectedModel, setSelectedModel] = useState<string>("gpt-4o")
+
+  const {
+    messages: internalMessages,
+    isLoading,
+    sendMessage: internalSendMessage,
+    suggestions: internalSuggestions,
+    clearChat,
+    uploadHistory,
+    downloadHistory,
+    exportHTML,
+    copyJSON,
+  } = useChat(selectedProvider)
+
+  const fileInputRef = useRef<HTMLInputElement>(null)
+
+  // Use external props if provided, otherwise use internal state
+  const messages = externalMessages || internalMessages
+  const sendMessage = externalSendMessage || internalSendMessage
+  const suggestions = externalSuggestions || internalSuggestions
+  const isGenerating = externalIsGenerating || isLoading
+
+  const handleFileUpload = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const file = event.target.files?.[0]
+    if (file) {
+      uploadHistory(file)
+      event.target.value = ""
+    }
+  }
+
+  return (
+    <Card className="w-full h-[700px] flex flex-col">
+      <div className="p-4 border-b">
+        <div className="flex items-center justify-between mb-3">
+          <div className="flex items-center gap-3">
+            <Badge variant="secondary" className="gap-1">
+              <Zap className="h-3 w-3" />
+              Software Engineering Agent
+            </Badge>
+            <Badge variant="outline" className="gap-1">
+              <Globe className="h-3 w-3" />
+              Website Generator
+            </Badge>
+          </div>
+          <div className="text-sm text-muted-foreground">{messages.length} messages</div>
+        </div>
+
+        <div className="flex items-center justify-between">
+          <ProviderSelector
+            selected={selectedProvider}
+            onSelect={setSelectedProvider}
+            selectedModel={selectedModel}
+            onModelSelect={setSelectedModel}
+          />
+
+          <div className="flex items-center gap-2">
+            <Button variant="outline" size="sm" onClick={() => fileInputRef.current?.click()} className="gap-2">
+              <Upload className="h-4 w-4" />
+              Import
+            </Button>
+
+            <Button variant="outline" size="sm" onClick={downloadHistory} className="gap-2 bg-transparent">
+              <Download className="h-4 w-4" />
+              JSON
+            </Button>
+
+            <Button variant="outline" size="sm" onClick={exportHTML} className="gap-2 bg-transparent">
+              <FileText className="h-4 w-4" />
+              HTML
+            </Button>
+
+            <Button variant="outline" size="sm" onClick={copyJSON} className="gap-2 bg-transparent">
+              <Copy className="h-4 w-4" />
+              Copy
+            </Button>
+          </div>
+        </div>
+
+        <input ref={fileInputRef} type="file" accept=".json" onChange={handleFileUpload} className="hidden" />
+      </div>
+
+      <div className="flex-1 flex flex-col overflow-hidden">
+        <ChatMessages messages={messages} isLoading={isGenerating} />
+
+        {suggestions.length > 0 && (
+          <div className="p-4 border-t">
+            <SuggestionPills suggestions={suggestions} onSelect={sendMessage} />
+          </div>
+        )}
+
+        <div className="p-4 border-t">
+          <ChatInput onSend={sendMessage} isLoading={isGenerating} onClear={clearChat} />
+        </div>
+      </div>
+    </Card>
+  )
+}

chat-messages.tsx

@@ -0,0 +1,96 @@
+"use client"
+
+import { useEffect, useRef } from "react"
+import { ScrollArea } from "@/components/ui/scroll-area"
+import { Avatar, AvatarFallback } from "@/components/ui/avatar"
+import { Card } from "@/components/ui/card"
+import { Button } from "@/components/ui/button"
+import { Copy, User, Bot } from "lucide-react"
+import type { Message } from "@/types/chat"
+import { useToast } from "@/hooks/use-toast"
+
+interface ChatMessagesProps {
+  messages: Message[]
+  isLoading: boolean
+}
+
+export function ChatMessages({ messages, isLoading }: ChatMessagesProps) {
+  const scrollRef = useRef<HTMLDivElement>(null)
+  const { toast } = useToast()
+
+  useEffect(() => {
+    if (scrollRef.current) {
+      scrollRef.current.scrollTop = scrollRef.current.scrollHeight
+    }
+  }, [messages])
+
+  const copyToClipboard = (text: string) => {
+    navigator.clipboard.writeText(text)
+    toast({
+      title: "Copied to clipboard",
+      duration: 2000,
+    })
+  }
+
+  return (
+    <ScrollArea className="flex-1 p-4" ref={scrollRef}>
+      <div className="space-y-4">
+        {messages.map((message) => (
+          <div key={message.id} className={`flex gap-3 ${message.role === "user" ? "justify-end" : "justify-start"}`}>
+            {message.role === "assistant" && (
+              <Avatar className="h-8 w-8">
+                <AvatarFallback>
+                  <Bot className="h-4 w-4" />
+                </AvatarFallback>
+              </Avatar>
+            )}
+
+            <Card
+              className={`max-w-[80%] p-3 ${
+                message.role === "user" ? "bg-primary text-primary-foreground" : "bg-muted"
+              }`}
+            >
+              <div className="flex items-start justify-between gap-2">
+                <div className="whitespace-pre-wrap text-sm">{message.content}</div>
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  className="h-6 w-6 p-0 opacity-50 hover:opacity-100"
+                  onClick={() => copyToClipboard(message.content)}
+                >
+                  <Copy className="h-3 w-3" />
+                </Button>
+              </div>
+              {message.provider && <div className="text-xs opacity-70 mt-2">via {message.provider}</div>}
+            </Card>
+
+            {message.role === "user" && (
+              <Avatar className="h-8 w-8">
+                <AvatarFallback>
+                  <User className="h-4 w-4" />
+                </AvatarFallback>
+              </Avatar>
+            )}
+          </div>
+        ))}
+
+        {isLoading && (
+          <div className="flex gap-3 justify-start">
+            <Avatar className="h-8 w-8">
+              <AvatarFallback>
+                <Bot className="h-4 w-4" />
+              </AvatarFallback>
+            </Avatar>
+            <Card className="bg-muted p-3">
+              <div className="flex space-x-1">
+                <div className="w-2 h-2 bg-current rounded-full animate-bounce" />
+                <div className="w-2 h-2 bg-current rounded-full animate-bounce" style={{ animationDelay: "0.1s" }} />
+                <div className="w-2 h-2 bg-current rounded-full animate-bounce" style={{ animationDelay: "0.2s" }} />
+              </div>
+            </Card>
+          </div>
+        )}
+      </div>
+    </ScrollArea>
+  )
+}

file-upload.tsx

@@ -0,0 +1,84 @@
+"use client"
+
+import type React from "react"
+
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import { Label } from "@/components/ui/label"
+import { Upload, Download, FileText, Archive, Code } from "lucide-react"
+import { useRef } from "react"
+
+interface FileUploadProps {
+  onUpload: (file: File) => void
+  onDownload: () => void
+  onExportHTML: () => void
+}
+
+export function FileUpload({ onUpload, onDownload, onExportHTML }: FileUploadProps) {
+  const fileInputRef = useRef<HTMLInputElement>(null)
+
+  const handleFileUpload = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const file = event.target.files?.[0]
+    if (file) {
+      onUpload(file)
+      event.target.value = ""
+    }
+  }
+
+  const exportZip = () => {
+    // This would create a ZIP file with all generated files
+    console.log("Exporting as ZIP...")
+  }
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle className="flex items-center gap-2">
+          <Archive className="h-5 w-5" />
+          File Management
+        </CardTitle>
+      </CardHeader>
+      <CardContent className="space-y-4">
+        <div className="space-y-2">
+          <Label htmlFor="file-upload">Import Chat History</Label>
+          <div className="flex gap-2">
+            <Input
+              id="file-upload"
+              type="file"
+              accept=".json"
+              onChange={handleFileUpload}
+              ref={fileInputRef}
+              className="flex-1"
+            />
+            <Button variant="outline" onClick={() => fileInputRef.current?.click()}>
+              <Upload className="h-4 w-4" />
+            </Button>
+          </div>
+        </div>
+
+        <div className="grid grid-cols-2 gap-2">
+          <Button variant="outline" onClick={onDownload} className="gap-2 bg-transparent">
+            <Download className="h-4 w-4" />
+            JSON History
+          </Button>
+
+          <Button variant="outline" onClick={onExportHTML} className="gap-2 bg-transparent">
+            <FileText className="h-4 w-4" />
+            HTML Export
+          </Button>
+
+          <Button variant="outline" onClick={exportZip} className="gap-2 bg-transparent">
+            <Archive className="h-4 w-4" />
+            ZIP Package
+          </Button>
+
+          <Button variant="outline" className="gap-2 bg-transparent">
+            <Code className="h-4 w-4" />
+            Source Code
+          </Button>
+        </div>
+      </CardContent>
+    </Card>
+  )
+}

navbar.tsx

@@ -0,0 +1,60 @@
+"use client"
+
+import Link from "next/link"
+import { usePathname } from "next/navigation"
+import { Button } from "@/components/ui/button"
+import { ThemeToggle } from "@/components/theme-toggle"
+import { MessageSquare, History, Settings, Download, Upload } from "lucide-react"
+import { useChatHistory } from "@/hooks/use-chat-history"
+
+export function Navbar() {
+  const pathname = usePathname()
+  const { exportHistory, importHistory } = useChatHistory()
+
+  return (
+    <nav className="border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
+      <div className="container mx-auto px-4">
+        <div className="flex h-16 items-center justify-between">
+          <div className="flex items-center space-x-6">
+            <Link href="/" className="flex items-center space-x-2">
+              <MessageSquare className="h-6 w-6" />
+              <span className="font-bold">AI Agent</span>
+            </Link>
+
+            <div className="flex items-center space-x-4">
+              <Link href="/">
+                <Button variant={pathname === "/" ? "default" : "ghost"} size="sm">
+                  Chat
+                </Button>
+              </Link>
+              <Link href="/history">
+                <Button variant={pathname === "/history" ? "default" : "ghost"} size="sm">
+                  <History className="h-4 w-4 mr-2" />
+                  History
+                </Button>
+              </Link>
+              <Link href="/settings">
+                <Button variant={pathname === "/settings" ? "default" : "ghost"} size="sm">
+                  <Settings className="h-4 w-4 mr-2" />
+                  Settings
+                </Button>
+              </Link>
+            </div>
+          </div>
+
+          <div className="flex items-center space-x-2">
+            <Button variant="outline" size="sm" onClick={exportHistory}>
+              <Download className="h-4 w-4 mr-2" />
+              Export
+            </Button>
+            <Button variant="outline" size="sm" onClick={importHistory}>
+              <Upload className="h-4 w-4 mr-2" />
+              Import
+            </Button>
+            <ThemeToggle />
+          </div>
+        </div>
+      </div>
+    </nav>
+  )
+}

provider-selector.tsx

@@ -0,0 +1,84 @@
+"use client"
+
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
+import { Badge } from "@/components/ui/badge"
+import type { AIProvider } from "@/types/chat"
+
+interface ProviderSelectorProps {
+  selected: AIProvider
+  onSelect: (provider: AIProvider) => void
+  selectedModel?: string
+  onModelSelect?: (model: string) => void
+}
+
+const providers = [
+  {
+    id: "openai" as AIProvider,
+    name: "OpenAI",
+    badge: "GPT-4",
+    models: ["gpt-4o", "gpt-4o-mini", "gpt-4-turbo", "gpt-3.5-turbo"],
+  },
+  {
+    id: "openrouter" as AIProvider,
+    name: "OpenRouter",
+    badge: "Multi-Model",
+    models: ["openai/gpt-4o", "anthropic/claude-3.5-sonnet", "meta-llama/llama-3.1-405b", "google/gemini-pro-1.5"],
+  },
+  {
+    id: "groq" as AIProvider,
+    name: "Groq",
+    badge: "Fast",
+    models: ["llama-3.1-70b-versatile", "llama-3.1-8b-instant", "mixtral-8x7b-32768"],
+  },
+  {
+    id: "grok" as AIProvider,
+    name: "Grok",
+    badge: "xAI",
+    models: ["grok-beta", "grok-vision-beta"],
+  },
+]
+
+export function ProviderSelector({ selected, onSelect, selectedModel, onModelSelect }: ProviderSelectorProps) {
+  const currentProvider = providers.find((p) => p.id === selected)
+
+  return (
+    <div className="flex items-center gap-3">
+      <span className="text-sm font-medium">AI Provider:</span>
+      <Select value={selected} onValueChange={onSelect}>
+        <SelectTrigger className="w-48">
+          <SelectValue />
+        </SelectTrigger>
+        <SelectContent>
+          {providers.map((provider) => (
+            <SelectItem key={provider.id} value={provider.id}>
+              <div className="flex items-center gap-2">
+                <span>{provider.name}</span>
+                <Badge variant="secondary" className="text-xs">
+                  {provider.badge}
+                </Badge>
+              </div>
+            </SelectItem>
+          ))}
+        </SelectContent>
+      </Select>
+
+      {onModelSelect && currentProvider && (
+        <>
+          <span className="text-sm font-medium">Model:</span>
+          <Select value={selectedModel || currentProvider.models[0]} onValueChange={onModelSelect}>
+            <SelectTrigger className="w-64">
+              <SelectValue />
+            </SelectTrigger>
+            <SelectContent>
+              {currentProvider.models.map((model) => (
+                <SelectItem key={model} value={model}>
+                  <span className="font-mono text-sm">{model}</span>
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+        </>
+      )}
+    </div>
+  )
+}

suggestion-pills.tsx

@@ -0,0 +1,23 @@
+"use client"
+
+import { Button } from "@/components/ui/button"
+
+interface SuggestionPillsProps {
+  suggestions: string[]
+  onSelect: (suggestion: string) => void
+}
+
+export function SuggestionPills({ suggestions, onSelect }: SuggestionPillsProps) {
+  return (
+    <div className="space-y-2">
+      <div className="text-sm text-muted-foreground">Suggestions:</div>
+      <div className="flex flex-wrap gap-2">
+        {suggestions.map((suggestion, index) => (
+          <Button key={index} variant="outline" size="sm" onClick={() => onSelect(suggestion)} className="text-xs">
+            {suggestion}
+          </Button>
+        ))}
+      </div>
+    </div>
+  )
+}

theme-provider.tsx

@@ -0,0 +1,7 @@
+"use client"
+import { ThemeProvider as NextThemesProvider } from "next-themes"
+import type { ThemeProviderProps } from "next-themes"
+
+export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
+  return <NextThemesProvider {...props}>{children}</NextThemesProvider>
+}

theme-toggle.tsx

@@ -0,0 +1,25 @@
+"use client"
+
+import { Moon, Sun } from "lucide-react"
+import { useTheme } from "next-themes"
+import { Button } from "@/components/ui/button"
+import { useEffect, useState } from "react"
+
+export function ThemeToggle() {
+  const { theme, setTheme } = useTheme()
+  const [mounted, setMounted] = useState(false)
+
+  useEffect(() => {
+    setMounted(true)
+  }, [])
+
+  if (!mounted) {
+    return null
+  }
+
+  return (
+    <Button variant="outline" size="sm" onClick={() => setTheme(theme === "light" ? "dark" : "light")}>
+      {theme === "light" ? <Moon className="h-4 w-4" /> : <Sun className="h-4 w-4" />}
+    </Button>
+  )
+}

website-preview.tsx

@@ -0,0 +1,171 @@
+"use client"
+
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
+import { Button } from "@/components/ui/button"
+import { Badge } from "@/components/ui/badge"
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
+import { ScrollArea } from "@/components/ui/scroll-area"
+import { Code, Eye, Download, Copy, RefreshCw } from "lucide-react"
+import { useState } from "react"
+
+interface WebsitePreviewProps {
+  generatedWebsite?: {
+    html: string
+    css: string
+    js: string
+    preview: string
+  }
+  isGenerating?: boolean
+}
+
+export function WebsitePreview({ generatedWebsite, isGenerating }: WebsitePreviewProps) {
+  const [activeTab, setActiveTab] = useState("preview")
+
+  const copyToClipboard = (content: string) => {
+    navigator.clipboard.writeText(content)
+  }
+
+  const downloadFile = (content: string, filename: string) => {
+    const blob = new Blob([content], { type: "text/plain" })
+    const url = URL.createObjectURL(blob)
+    const a = document.createElement("a")
+    a.href = url
+    a.download = filename
+    a.click()
+    URL.revokeObjectURL(url)
+  }
+
+  return (
+    <Card className="w-full h-[700px] flex flex-col">
+      <CardHeader className="pb-3">
+        <div className="flex items-center justify-between">
+          <CardTitle className="flex items-center gap-2">
+            <Eye className="h-5 w-5" />
+            Website Preview
+          </CardTitle>
+          <div className="flex items-center gap-2">
+            {isGenerating && (
+              <Badge variant="secondary" className="gap-1">
+                <RefreshCw className="h-3 w-3 animate-spin" />
+                Generating...
+              </Badge>
+            )}
+            {generatedWebsite && <Badge variant="default">Ready</Badge>}
+          </div>
+        </div>
+      </CardHeader>
+
+      <CardContent className="flex-1 flex flex-col overflow-hidden p-0">
+        {generatedWebsite ? (
+          <Tabs value={activeTab} onValueChange={setActiveTab} className="flex-1 flex flex-col">
+            <div className="px-6 pb-0">
+              <TabsList className="grid w-full grid-cols-4">
+                <TabsTrigger value="preview">Preview</TabsTrigger>
+                <TabsTrigger value="html">HTML</TabsTrigger>
+                <TabsTrigger value="css">CSS</TabsTrigger>
+                <TabsTrigger value="js">JavaScript</TabsTrigger>
+              </TabsList>
+            </div>
+
+            <div className="flex-1 overflow-hidden">
+              <TabsContent value="preview" className="h-full m-0 p-6">
+                <div className="h-full border rounded-lg overflow-hidden bg-white">
+                  <iframe
+                    srcDoc={generatedWebsite.preview}
+                    className="w-full h-full border-0"
+                    title="Website Preview"
+                  />
+                </div>
+              </TabsContent>
+
+              <TabsContent value="html" className="h-full m-0 p-6">
+                <div className="h-full flex flex-col">
+                  <div className="flex items-center justify-between mb-3">
+                    <h3 className="text-sm font-medium">HTML Code</h3>
+                    <div className="flex gap-2">
+                      <Button size="sm" variant="outline" onClick={() => copyToClipboard(generatedWebsite.html)}>
+                        <Copy className="h-4 w-4" />
+                      </Button>
+                      <Button
+                        size="sm"
+                        variant="outline"
+                        onClick={() => downloadFile(generatedWebsite.html, "index.html")}
+                      >
+                        <Download className="h-4 w-4" />
+                      </Button>
+                    </div>
+                  </div>
+                  <ScrollArea className="flex-1 border rounded-lg">
+                    <pre className="p-4 text-sm">
+                      <code>{generatedWebsite.html}</code>
+                    </pre>
+                  </ScrollArea>
+                </div>
+              </TabsContent>
+
+              <TabsContent value="css" className="h-full m-0 p-6">
+                <div className="h-full flex flex-col">
+                  <div className="flex items-center justify-between mb-3">
+                    <h3 className="text-sm font-medium">CSS Code</h3>
+                    <div className="flex gap-2">
+                      <Button size="sm" variant="outline" onClick={() => copyToClipboard(generatedWebsite.css)}>
+                        <Copy className="h-4 w-4" />
+                      </Button>
+                      <Button
+                        size="sm"
+                        variant="outline"
+                        onClick={() => downloadFile(generatedWebsite.css, "styles.css")}
+                      >
+                        <Download className="h-4 w-4" />
+                      </Button>
+                    </div>
+                  </div>
+                  <ScrollArea className="flex-1 border rounded-lg">
+                    <pre className="p-4 text-sm">
+                      <code>{generatedWebsite.css}</code>
+                    </pre>
+                  </ScrollArea>
+                </div>
+              </TabsContent>
+
+              <TabsContent value="js" className="h-full m-0 p-6">
+                <div className="h-full flex flex-col">
+                  <div className="flex items-center justify-between mb-3">
+                    <h3 className="text-sm font-medium">JavaScript Code</h3>
+                    <div className="flex gap-2">
+                      <Button size="sm" variant="outline" onClick={() => copyToClipboard(generatedWebsite.js)}>
+                        <Copy className="h-4 w-4" />
+                      </Button>
+                      <Button
+                        size="sm"
+                        variant="outline"
+                        onClick={() => downloadFile(generatedWebsite.js, "script.js")}
+                      >
+                        <Download className="h-4 w-4" />
+                      </Button>
+                    </div>
+                  </div>
+                  <ScrollArea className="flex-1 border rounded-lg">
+                    <pre className="p-4 text-sm">
+                      <code>{generatedWebsite.js}</code>
+                    </pre>
+                  </ScrollArea>
+                </div>
+              </TabsContent>
+            </div>
+          </Tabs>
+        ) : (
+          <div className="flex-1 flex items-center justify-center p-6">
+            <div className="text-center">
+              <Code className="h-12 w-12 text-muted-foreground mx-auto mb-4" />
+              <h3 className="text-lg font-medium mb-2">No Website Generated</h3>
+              <p className="text-muted-foreground text-sm">
+                Ask the AI agent to generate a website, landing page, or web application
+              </p>
+            </div>
+          </div>
+        )}
+      </CardContent>
+    </Card>
+  )
+}