"use client" import * as React from "react" import { AnimatePresence } from "motion/react" import { MessageSquare, PanelLeft, Sparkles, SquarePen } from "lucide-react" import { ChatApp } from "@/components/agents/chat-app" import { Message, MessageAvatar, MessageBubble, MessageBubbleContent, MessageContent, MessageScroller, MessageTyping, } from "@/components/agents/message" import { PromptInput } from "@/components/agents/prompt-input" import { AnimatedSidebar, AnimatedSidebarContent, AnimatedSidebarGroup, AnimatedSidebarGroupContent, AnimatedSidebarGroupLabel, AnimatedSidebarInset, AnimatedSidebarMenu, AnimatedSidebarMenuButton, AnimatedSidebarMenuItem, AnimatedSidebarRail, AnimatedSidebarTrigger, } from "@/components/motion/animated-sidebar" import { Badge } from "@/components/ui/badge" type Turn = { id: string; from: "user" | "assistant"; text: string } const CONVERSATIONS: { id: string title: string when: string turns: Turn[] }[] = [ { id: "release", title: "First release scope", when: "Now", turns: [ { id: "1", from: "user", text: "What should the first release include?" }, { id: "2", from: "assistant", text: "A prompt, a streamed answer and a way to recover from errors.", }, ], }, { id: "tokens", title: "Blue scale for charts", when: "2h", turns: [ { id: "1", from: "user", text: "Which blues should charts use?" }, { id: "2", from: "assistant", text: "Steps 300, 500 and 700 stay distinct in both themes.", }, ], }, { id: "motion", title: "Spring tuning notes", when: "Yesterday", turns: [ { id: "1", from: "user", text: "Is snappy too fast for dialogs?" }, { id: "2", from: "assistant", text: "Use smooth for panels; keep snappy for toggles and presses.", }, ], }, ] export default function ChatAppDemo() { const [activeId, setActiveId] = React.useState(CONVERSATIONS[0].id) const [turns, setTurns] = React.useState>( Object.fromEntries(CONVERSATIONS.map((c) => [c.id, c.turns])) ) const [thinking, setThinking] = React.useState(false) const timer = React.useRef(undefined) const active = CONVERSATIONS.find((c) => c.id === activeId) ?? CONVERSATIONS[0] React.useEffect(() => () => window.clearTimeout(timer.current), []) const send = (text: string) => { const id = activeId setTurns((all) => ({ ...all, [id]: [...all[id], { id: crypto.randomUUID(), from: "user", text }], })) setThinking(true) timer.current = window.setTimeout(() => { setThinking(false) setTurns((all) => ({ ...all, [id]: [ ...all[id], { id: crypto.randomUUID(), from: "assistant", text: "Noted. I'll fold that into the plan.", }, ], })) }, 900) } return ( } onSelect={() => {}} > New chat Recent {CONVERSATIONS.map((c) => ( } isActive={c.id === activeId} badge={ {c.when} } onSelect={() => setActiveId(c.id)} className="font-normal" > {c.title} ))}

{active.title}

Agent 5.6

{turns[activeId].map((turn) => ( {turn.from === "user" ? "NM" : } {turn.text} ))} {thinking ? ( ) : null}

) }

Chat App

Installation

Dependencies

Source