moehre/maia-pwa-livekit
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix UI issues with drawer

Browse Source
This commit is contained in:
bluemoehre
2026-07-13 14:56:57 +02:00
parent fab61d2bae
commit f658f77b57
1 changed files with 55 additions and 65 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Chat.tsx
+55 -65
View File
@@ -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,69 +58,62 @@ export function Chat({ agentState, messages }: ChatProps) {
</Button>
</DrawerTrigger>
<DrawerContent>
<div className="mx-auto flex h-[50svh] w-full max-w-2xl flex-col">
<DrawerHeader>
<DrawerTitle>Chat</DrawerTitle>
</DrawerHeader>
<div className="flex-1 overflow-hidden">
{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 &&
(() => {
return (
<Marker variant="separator">
<MarkerContent>Conversation started</MarkerContent>
</Marker>
)
})()}
{messages.map((msg) => (
<Message key={msg.id} align={msg.role === 'assistant' ? 'start' : 'end'}>
<MessageContent>
<Bubble variant={msg.role === 'assistant' ? 'muted' : 'default'}>
<BubbleContent>{msg.content}</BubbleContent>
</Bubble>
<MessageFooter>{formatTime(msg.timestamp)}</MessageFooter>
</MessageContent>
</Message>
))}
{messages.length > 0 && (
<AgentChatTranscript agentState={agentState} messages={messages} className="h-full" />
)}
</ConversationContent>
<ConversationScrollButton />
</Conversation>
)}
<DrawerHeader className="flex flex-row items-center justify-between border-b border-border">
<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>
<Conversation className="h-full overflow-y-auto">
<ConversationContent>
{messages.length > 0 &&
(() => {
return (
<Marker variant="separator">
<MarkerContent>Conversation started</MarkerContent>
</Marker>
)
})()}
{messages.map((msg) => (
<Message key={msg.id} align={msg.role === 'assistant' ? 'start' : 'end'}>
<MessageContent>
<Bubble variant={msg.role === 'assistant' ? 'muted' : 'default'}>
<BubbleContent>{msg.content}</BubbleContent>
</Bubble>
<MessageFooter>{formatTime(msg.timestamp)}</MessageFooter>
</MessageContent>
</Message>
))}
</ConversationContent>
<ConversationScrollButton />
</Conversation>
<DrawerFooter className="border-t border-border p-4">
<div className="flex items-end gap-2">
<textarea
ref={inputRef}
value={message}
disabled={isFormSubmitting}
placeholder="Type a message..."
onKeyDown={handleKeyDown}
onChange={(e) => setMessage(e.target.value)}
className="field-sizing-content max-h-20 min-h-9 flex-1 resize-none [scrollbar-width:thin] rounded-lg border border-input bg-background px-3 py-2 text-sm placeholder:text-muted-foreground focus:ring-2 focus:ring-ring focus:outline-none disabled:cursor-not-allowed disabled:opacity-50"
/>
<Button
size="icon"
type="button"
disabled={isDisabled}
variant={isDisabled ? 'secondary' : 'default'}
title={isFormSubmitting ? 'Sending...' : 'Send'}
onClick={handleSend}
className="shrink-0"
>
{isFormSubmitting ? <Loader className="animate-spin" /> : <SendHorizontal />}
</Button>
</div>
<div className="border-t border-border p-4">
<div className="flex items-end gap-2">
<textarea
ref={inputRef}
value={message}
disabled={isFormSubmitting}
placeholder="Type a message..."
onKeyDown={handleKeyDown}
onChange={(e) => setMessage(e.target.value)}
className="field-sizing-content max-h-20 min-h-9 flex-1 resize-none [scrollbar-width:thin] rounded-lg border border-input bg-background px-3 py-2 text-sm placeholder:text-muted-foreground focus:ring-2 focus:ring-ring focus:outline-none disabled:cursor-not-allowed disabled:opacity-50"
/>
<Button
size="icon"
type="button"
disabled={isDisabled}
variant={isDisabled ? 'secondary' : 'default'}
title={isFormSubmitting ? 'Sending...' : 'Send'}
onClick={handleSend}
className="shrink-0"
>
{isFormSubmitting ? <Loader className="animate-spin" /> : <SendHorizontal />}
</Button>
</div>
</div>
</div>
</DrawerFooter>
</DrawerContent>
</Drawer>
)