120 lines
3.8 KiB
TypeScript
120 lines
3.8 KiB
TypeScript
"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>
|
|
);
|
|
}
|
|
|