VIBN Frontend for Coolify deployment

components/layout/right-panel.tsx

@@ -0,0 +1,119 @@
+"use client";
+
+import { useState } from "react";
+import {
+  Sparkles,
+  ChevronLeft,
+  ChevronRight,
+  Send,
+} from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import { Textarea } from "@/components/ui/textarea";
+
+export function RightPanel() {
+  const [isCollapsed, setIsCollapsed] = useState(true);
+  const [message, setMessage] = useState("");
+
+  if (isCollapsed) {
+    return (
+      <div className="relative flex w-12 flex-col items-center border-l bg-card/50 py-4">
+        <Button
+          variant="ghost"
+          size="icon"
+          onClick={() => setIsCollapsed(false)}
+          className="h-8 w-8"
+        >
+          <Sparkles className="h-4 w-4" />
+        </Button>
+      </div>
+    );
+  }
+
+  return (
+    <aside className="relative flex w-80 flex-col border-l bg-card/50">
+      {/* Header */}
+      <div className="flex h-12 items-center justify-between px-4 border-b">
+        <h2 className="font-semibold text-sm">AI Chat</h2>
+        <Button
+          variant="ghost"
+          size="icon"
+          onClick={() => setIsCollapsed(true)}
+          className="h-7 w-7"
+        >
+          <ChevronRight className="h-4 w-4" />
+        </Button>
+      </div>
+
+      {/* Chat Messages */}
+      <ScrollArea className="flex-1 p-4">
+        <div className="space-y-4">
+          {/* Empty State */}
+          <div className="flex flex-col items-center justify-center py-12 text-center">
+            <div className="mb-3 rounded-full bg-primary/10 p-3">
+              <Sparkles className="h-6 w-6 text-primary" />
+            </div>
+            <h3 className="font-medium mb-1">AI Assistant</h3>
+            <p className="text-sm text-muted-foreground max-w-[250px]">
+              Ask questions about your project, get code suggestions, or
+              request documentation
+            </p>
+          </div>
+
+          {/* Example Chat Messages (for when conversation exists) */}
+          {/*
+          <div className="space-y-4">
+            <div className="flex gap-3">
+              <div className="h-8 w-8 rounded-full bg-primary/10 flex items-center justify-center">
+                <Sparkles className="h-4 w-4 text-primary" />
+              </div>
+              <div className="flex-1 space-y-1">
+                <div className="text-sm bg-muted rounded-lg p-3">
+                  How can I help you with your project today?
+                </div>
+              </div>
+            </div>
+
+            <div className="flex gap-3 flex-row-reverse">
+              <div className="h-8 w-8 rounded-full bg-primary flex items-center justify-center text-xs font-medium text-primary-foreground">
+                You
+              </div>
+              <div className="flex-1 space-y-1">
+                <div className="text-sm bg-primary text-primary-foreground rounded-lg p-3">
+                  What's the current token usage?
+                </div>
+              </div>
+            </div>
+          </div>
+          */}
+        </div>
+      </ScrollArea>
+
+      {/* Chat Input */}
+      <div className="border-t p-4 space-y-2">
+        <div className="flex gap-2">
+          <Textarea
+            placeholder="Ask AI about your project..."
+            value={message}
+            onChange={(e) => setMessage(e.target.value)}
+            className="min-h-[60px] resize-none"
+            onKeyDown={(e) => {
+              if (e.key === "Enter" && !e.shiftKey) {
+                e.preventDefault();
+                // TODO: Send message
+                setMessage("");
+              }
+            }}
+          />
+          <Button size="icon" className="shrink-0">
+            <Send className="h-4 w-4" />
+          </Button>
+        </div>
+        <p className="text-xs text-muted-foreground">
+          Press Enter to send, Shift+Enter for new line
+        </p>
+      </div>
+    </aside>
+  );
+}
+