fix UI issues with drawer

src/components/Chat.tsx

@@ -1,11 +1,8 @@
-import { useRef, useState, useEffect } from 'react'
 import { type AgentState, type ReceivedMessage, useChat } from '@livekit/components-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'
@@ -61,17 +58,16 @@ export function Chat({ agentState, messages }: ChatProps) {
         </Button>
       </DrawerTrigger>
       <DrawerContent>
-        <div className="mx-auto flex h-[50svh] w-full max-w-2xl flex-col">
+        <DrawerHeader className="flex flex-row items-center justify-between border-b border-border">
-          <DrawerHeader>
+          <Button variant="ghost" size="icon" title="Delete conversation" className="text-muted-foreground">
+            <Trash2 className="size-5" />
+          </Button>
           <DrawerTitle>Chat</DrawerTitle>
+          <Button variant="ghost" size="icon" title="New conversation" className="text-muted-foreground">
+            <Plus className="size-5" />
+          </Button>
         </DrawerHeader>
-          <div className="flex-1 overflow-hidden">
+        <Conversation className="h-full overflow-y-auto">
-            {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>
             {messages.length > 0 &&
               (() => {
@@ -91,15 +87,10 @@ export function Chat({ agentState, messages }: ChatProps) {
                 </MessageContent>
               </Message>
             ))}
-                  {messages.length > 0 && (
-                    <AgentChatTranscript agentState={agentState} messages={messages} className="h-full" />
-                  )}
           </ConversationContent>
           <ConversationScrollButton />
         </Conversation>
-            )}
+        <DrawerFooter className="border-t border-border p-4">
-          </div>
-          <div className="border-t border-border p-4">
           <div className="flex items-end gap-2">
             <textarea
               ref={inputRef}
@@ -122,8 +113,7 @@ export function Chat({ agentState, messages }: ChatProps) {
               {isFormSubmitting ? <Loader className="animate-spin" /> : <SendHorizontal />}
             </Button>
           </div>
-          </div>
+        </DrawerFooter>
-        </div>
       </DrawerContent>
     </Drawer>
   )