diff --git a/src/components/Chat.tsx b/src/components/Chat.tsx
index 7a57143..0a30c29 100644
--- a/src/components/Chat.tsx
+++ b/src/components/Chat.tsx
@@ -1,16 +1,17 @@
 import { useRef, useState, useEffect } from 'react'
 import { type AgentState, type ReceivedMessage, useChat } from '@livekit/components-react'
-import { Keyboard, Loader, SendHorizontal } from 'lucide-react'
+import { Keyboard, Loader, Plus, SendHorizontal, Trash2 } from 'lucide-react'
+import { useEffect, useRef, useState } from 'react'
 
 import { AgentChatTranscript } from '@/components/agents-ui/agent-chat-transcript'
 import { Conversation, ConversationContent, ConversationScrollButton } from '@/components/ai-elements/conversation'
 import { Button } from '@/components/ui/button'
 import { Bubble, BubbleContent } from '@/components/ui/bubble'
+import { Button } from '@/components/ui/button'
+import { Drawer, DrawerContent, DrawerFooter, DrawerHeader, DrawerTitle, DrawerTrigger } from '@/components/ui/drawer'
 import { Marker, MarkerContent } from '@/components/ui/marker'
-import { Drawer, DrawerContent, DrawerHeader, DrawerTitle, DrawerTrigger } from '@/components/ui/drawer'
-import chatMessages from '@/mocks/chat.json'
+import { Message, MessageContent, MessageFooter } from '@/components/ui/message'
 import { formatTime } from '@/utils/datetime'
-import { Message, MessageContent, MessageFooter } from './ui/message'
 
 interface ChatProps {
   agentState: AgentState
@@ -65,14 +66,14 @@ export function Chat({ agentState, messages }: ChatProps) {
             <DrawerTitle>Chat</DrawerTitle>
           </DrawerHeader>
           <div className="flex-1 overflow-hidden">
-            {messages.length === 0 && chatMessages.length === 0 ? (
+            {messages.length === 0 ? (
               <div className="flex h-full items-center justify-center text-sm text-muted-foreground">
                 No messages yet. Start a conversation!
               </div>
             ) : (
               <Conversation className="h-full">
                 <ConversationContent>
-                  {chatMessages.length > 0 &&
+                  {messages.length > 0 &&
                     (() => {
                       return (
                         <Marker variant="separator">
@@ -80,7 +81,7 @@ export function Chat({ agentState, messages }: ChatProps) {
                         </Marker>
                       )
                     })()}
-                  {chatMessages.map((msg) => (
+                  {messages.map((msg) => (
                     <Message key={msg.id} align={msg.role === 'assistant' ? 'start' : 'end'}>
                       <MessageContent>
                         <Bubble variant={msg.role === 'assistant' ? 'muted' : 'default'}>