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 { type AgentState, type ReceivedMessage, useChat } from '@livekit/components-react'
import { Keyboard, Loader, Plus, SendHorizontal, Trash2 } from 'lucide-react' import { Keyboard, Loader, Plus, SendHorizontal, Trash2 } from 'lucide-react'
import { useEffect, useRef, useState } from '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 { Conversation, ConversationContent, ConversationScrollButton } from '@/components/ai-elements/conversation'
import { Button } from '@/components/ui/button'
import { Bubble, BubbleContent } from '@/components/ui/bubble' import { Bubble, BubbleContent } from '@/components/ui/bubble'
import { Button } from '@/components/ui/button' import { Button } from '@/components/ui/button'
import { Drawer, DrawerContent, DrawerFooter, DrawerHeader, DrawerTitle, DrawerTrigger } from '@/components/ui/drawer' import { Drawer, DrawerContent, DrawerFooter, DrawerHeader, DrawerTitle, DrawerTrigger } from '@/components/ui/drawer'
@@ -61,69 +58,62 @@ export function Chat({ agentState, messages }: ChatProps) {
</Button> </Button>
</DrawerTrigger> </DrawerTrigger>
<DrawerContent> <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">
<DrawerTitle>Chat</DrawerTitle> <Trash2 className="size-5" />
</DrawerHeader> </Button>
<div className="flex-1 overflow-hidden"> <DrawerTitle>Chat</DrawerTitle>
{messages.length === 0 ? ( <Button variant="ghost" size="icon" title="New conversation" className="text-muted-foreground">
<div className="flex h-full items-center justify-center text-sm text-muted-foreground"> <Plus className="size-5" />
No messages yet. Start a conversation! </Button>
</div> </DrawerHeader>
) : ( <Conversation className="h-full overflow-y-auto">
<Conversation className="h-full"> <ConversationContent>
<ConversationContent> {messages.length > 0 &&
{messages.length > 0 && (() => {
(() => { return (
return ( <Marker variant="separator">
<Marker variant="separator"> <MarkerContent>Conversation started</MarkerContent>
<MarkerContent>Conversation started</MarkerContent> </Marker>
</Marker> )
) })()}
})()} {messages.map((msg) => (
{messages.map((msg) => ( <Message key={msg.id} align={msg.role === 'assistant' ? 'start' : 'end'}>
<Message key={msg.id} align={msg.role === 'assistant' ? 'start' : 'end'}> <MessageContent>
<MessageContent> <Bubble variant={msg.role === 'assistant' ? 'muted' : 'default'}>
<Bubble variant={msg.role === 'assistant' ? 'muted' : 'default'}> <BubbleContent>{msg.content}</BubbleContent>
<BubbleContent>{msg.content}</BubbleContent> </Bubble>
</Bubble> <MessageFooter>{formatTime(msg.timestamp)}</MessageFooter>
<MessageFooter>{formatTime(msg.timestamp)}</MessageFooter> </MessageContent>
</MessageContent> </Message>
</Message> ))}
))} </ConversationContent>
{messages.length > 0 && ( <ConversationScrollButton />
<AgentChatTranscript agentState={agentState} messages={messages} className="h-full" /> </Conversation>
)} <DrawerFooter className="border-t border-border p-4">
</ConversationContent> <div className="flex items-end gap-2">
<ConversationScrollButton /> <textarea
</Conversation> 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 className="border-t border-border p-4"> </DrawerFooter>
<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>
</DrawerContent> </DrawerContent>
</Drawer> </Drawer>
) )