Added chat UI

app/w/components/chat/chat.tsx

@@ -0,0 +1,75 @@
+'use client'
+
+import { useState } from 'react'
+import { MessageCircle, Send, X } from 'lucide-react'
+import { Button } from '@/components/ui/button'
+import { Input } from '@/components/ui/input'
+import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip'
+
+export function Chat() {
+  const [isOpen, setIsOpen] = useState(false)
+  const [message, setMessage] = useState('')
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault()
+    // Handle message submission here
+    setMessage('')
+    setIsOpen(false) // Close the chat after sending
+  }
+
+  const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (e.key === 'Enter') {
+      e.preventDefault()
+      handleSubmit(e as unknown as React.FormEvent)
+    }
+  }
+
+  if (!isOpen) {
+    return (
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <button
+            onClick={() => setIsOpen(true)}
+            className="fixed right-16 bottom-[18px] z-10 flex h-9 w-9 items-center justify-center rounded-lg bg-background text-muted-foreground transition-colors hover:text-foreground hover:bg-accent border"
+          >
+            <MessageCircle className="h-5 w-5" />
+            <span className="sr-only">Open Chat</span>
+          </button>
+        </TooltipTrigger>
+        <TooltipContent side="left">Open Chat</TooltipContent>
+      </Tooltip>
+    )
+  }
+
+  return (
+    <div className="fixed bottom-16 left-1/2 -translate-x-1/2 z-50 w-[500px] bg-background rounded-2xl border shadow-lg">
+      <form onSubmit={handleSubmit} className="flex items-center gap-2 p-2">
+        <Button
+          variant="ghost"
+          size="icon"
+          onClick={() => setIsOpen(false)}
+          className="h-8 w-8 rounded-full text-muted-foreground hover:text-foreground hover:bg-accent/50"
+        >
+          <X className="h-4 w-4" />
+          <span className="sr-only">Close Chat</span>
+        </Button>
+        <Input
+          value={message}
+          onChange={(e) => setMessage(e.target.value)}
+          onKeyDown={handleKeyDown}
+          placeholder="Type your message..."
+          className="flex-1 rounded-xl border-0 focus-visible:ring-0 focus-visible:ring-offset-0 text-sm text-foreground placeholder:text-muted-foreground/50"
+        />
+        <Button
+          type="submit"
+          variant="ghost"
+          size="icon"
+          className="h-8 w-8 rounded-full text-muted-foreground hover:text-foreground hover:bg-accent/50"
+        >
+          <Send className="h-4 w-4" />
+          <span className="sr-only">Send message</span>
+        </Button>
+      </form>
+    </div>
+  )
+}

app/w/components/console/console.tsx

@@ -63,7 +63,7 @@ export function Console() {
             <span className="sr-only">Open Console</span>
           </button>
         </TooltipTrigger>
-        <TooltipContent side="left">Open Console</TooltipContent>
+        <TooltipContent side="top">Open Console</TooltipContent>
       </Tooltip>
     )
   }

app/w/layout.tsx

@@ -1,3 +1,4 @@
+import { Chat } from './components/chat/chat'
 import { Console } from './components/console/console'
 import { ControlBar } from './components/control-bar/control-bar'
 import { Sidebar } from './components/sidebar/sidebar'
@@ -15,6 +16,7 @@ export default function WorkspaceLayout({ children }: { children: React.ReactNod
           <ControlBar />
           <div className="h-16">
             <Toolbar />
+            <Chat />
             <Console />
             <main className="grid items-start gap-2 bg-muted/40 h-[calc(100vh-4rem)]">
               {children}