feat: improve chat and image generation UI

- Add separate Chat and Image Generation buttons
- Move image generation input to bottom
- Improve layout of image generation component
- Update navigation handling

app/chat/image/page.tsx

@@ -0,0 +1,29 @@
+"use client"
+
+import { useRouter } from 'next/navigation'
+import { ImageGeneration } from '@/components/chat/image-generation'
+import { Button } from "@/components/ui/button"
+import { ArrowLeft } from "lucide-react"
+import Link from "next/link"
+
+export default function ImageGenerationPage() {
+  const router = useRouter()
+
+  return (
+    <div className="flex flex-col min-h-[100dvh] bg-black">
+      <div className="flex items-center justify-between h-14 px-4 bg-black border-b border-gray-800">
+        <div className="flex items-center gap-2">
+          <Link href="/chat">
+            <Button variant="ghost" size="icon" className="text-white hover:bg-gray-800">
+              <ArrowLeft className="h-4 w-4" />
+            </Button>
+          </Link>
+          <span className="text-white">Image Generation</span>
+        </div>
+      </div>
+      <div className="flex-1 overflow-hidden">
+        <ImageGeneration />
+      </div>
+    </div>
+  )
+}

components/chat/chat-interface.tsx

@@ -15,13 +15,15 @@ import { ChevronLeft, ChevronRight, Settings2, Sliders } from "lucide-react"
 import { Slider } from "@/components/ui/slider"
 import { Separator } from "@/components/ui/separator"
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
+import { useRouter } from 'next/navigation'
 
 interface ChatInterfaceProps {
   conversation: Conversation | null
   onNewMessage: (messages: Message[]) => void
 }
 
 export function ChatInterface({ conversation, onNewMessage }: ChatInterfaceProps) {
+  const router = useRouter()
   const [inputMessage, setInputMessage] = useState('')
   const { toast } = useToast()
   const [isLoading, setIsLoading] = useState(false)
@@ -106,17 +108,21 @@ export function ChatInterface({ conversation, onNewMessage }: ChatInterfaceProps
       <div className={`${showLeftSidebar ? 'w-64' : 'w-0'} bg-background border-r transition-all duration-300 overflow-hidden`}>
         <div className="p-4">
           <div className="space-y-2">
-            <Button variant="ghost" className="w-full justify-start">
+            <Button 
+              variant="ghost" 
+              className="w-full justify-start"
+              onClick={() => setIsImageMode(false)}
+            >
               <span className="mr-2">💬</span>
               Chat
             </Button>
             <Button 
               variant="ghost" 
               className="w-full justify-start"
-              onClick={() => setIsImageMode(!isImageMode)}
+              onClick={() => setIsImageMode(true)}
             >
               <span className="mr-2">⚡</span>
-              {isImageMode ? 'Text Chat' : 'Image Generation'}
+              Image Generation
             </Button>
           </div>
         </div>

components/chat/image-generation.tsx

@@ -36,35 +36,41 @@ export function ImageGeneration() {
   }
 
   return (
-    <div className="flex flex-col space-y-4 p-4">
-      <div className="flex space-x-2">
-        <Input
-          value={prompt}
-          onChange={(e) => setPrompt(e.target.value)}
-          placeholder="Describe the image you want to generate..."
-          className="flex-1"
-          onKeyPress={(e) => e.key === 'Enter' && generateImage()}
-        />
-        <Button 
-          onClick={generateImage}
-          disabled={isLoading}
-        >
-          {isLoading ? 'Generating...' : 'Generate'}
-        </Button>
+    <div className="flex flex-col h-full">
+      {/* Image Display Area */}
+      <div className="flex-1 overflow-y-auto p-4">
+        {generatedImage && (
+          <Card className="p-4">
+            <div className="relative w-full aspect-square">
+              <Image
+                src={generatedImage}
+                alt="Generated image"
+                fill
+                className="object-contain"
+              />
+            </div>
+          </Card>
+        )}
       </div>
 
-      {generatedImage && (
-        <Card className="p-4">
-          <div className="relative w-full aspect-square">
-            <Image
-              src={generatedImage}
-              alt="Generated image"
-              fill
-              className="object-contain"
-            />
-          </div>
-        </Card>
-      )}
+      {/* Input Area */}
+      <div className="border-t p-4 bg-background">
+        <div className="flex space-x-2">
+          <Input
+            value={prompt}
+            onChange={(e) => setPrompt(e.target.value)}
+            placeholder="Describe the image you want to generate..."
+            className="flex-1"
+            onKeyPress={(e) => e.key === 'Enter' && generateImage()}
+          />
+          <Button 
+            onClick={generateImage}
+            disabled={isLoading}
+          >
+            {isLoading ? 'Generating...' : 'Generate'}
+          </Button>
+        </div>
+      </div>
     </div>
   )
 }

components/navbar.tsx

@@ -51,7 +51,7 @@ const Navbar = () => {
     {
       href: "/chat",
       label: "Chat",
-      active: pathname === "/chat",
+      active: pathname === "/chat" || pathname === "/chat/image",
     },
   ]