gmakstutis/openrag
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

overflow fix

Browse source
This commit is contained in:
estevez.sebastian@gmail.com 2025-07-16 01:29:53 -04:00
parent 179e2fb457
commit 981c7a156e
1 changed files with 9 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
frontend/src/app/chat/page.tsx
View file

@ -89,7 +89,7 @@ export default function ChatPage() {
</div> </div>
<Card className="h-[600px] flex flex-col"> <Card className="h-[600px] flex flex-col">
<CardHeader> <CardHeader className="flex-shrink-0">
<CardTitle className="flex items-center gap-2"> <CardTitle className="flex items-center gap-2">
<MessageCircle className="h-5 w-5" /> <MessageCircle className="h-5 w-5" />
Chat Chat
@ -98,9 +98,9 @@ export default function ChatPage() {
Chat with AI about your indexed documents Chat with AI about your indexed documents
</CardDescription> </CardDescription>
</CardHeader> </CardHeader>
<CardContent className="flex-1 flex flex-col gap-4"> <CardContent className="flex-1 flex flex-col gap-4 min-h-0">
{/* Messages Area */} {/* Messages Area */}
<div className="flex-1 overflow-y-auto space-y-4 p-4 rounded-lg bg-muted/20"> <div className="flex-1 overflow-y-auto overflow-x-hidden space-y-4 p-4 rounded-lg bg-muted/20 min-h-0">
{messages.length === 0 ? ( {messages.length === 0 ? (
<div className="flex items-center justify-center h-full text-muted-foreground"> <div className="flex items-center justify-center h-full text-muted-foreground">
<div className="text-center"> <div className="text-center">
@ -121,7 +121,7 @@ export default function ChatPage() {
> >
<div <div
className={cn( className={cn(
"flex items-start gap-3 max-w-[80%]", "flex items-start gap-3 max-w-[80%] min-w-0",
message.role === "user" ? "flex-row-reverse" : "flex-row" message.role === "user" ? "flex-row-reverse" : "flex-row"
)} )}
> >
@ -141,13 +141,13 @@ export default function ChatPage() {
</div> </div>
<div <div
className={cn( className={cn(
"rounded-lg px-3 py-2 text-sm", "rounded-lg px-3 py-2 text-sm min-w-0 overflow-hidden",
message.role === "user" message.role === "user"
? "bg-primary text-primary-foreground" ? "bg-primary text-primary-foreground"
: "bg-card border border-border/40" : "bg-card border border-border/40"
)} )}
> >
<p className="whitespace-pre-wrap">{message.content}</p> <p className="whitespace-pre-wrap break-words overflow-wrap-anywhere">{message.content}</p>
<p className="text-xs opacity-70 mt-1"> <p className="text-xs opacity-70 mt-1">
{message.timestamp.toLocaleTimeString()} {message.timestamp.toLocaleTimeString()}
</p> </p>
@ -157,11 +157,11 @@ export default function ChatPage() {
))} ))}
{loading && ( {loading && (
<div className="flex w-full justify-start"> <div className="flex w-full justify-start">
<div className="flex items-start gap-3 max-w-[80%]"> <div className="flex items-start gap-3 max-w-[80%] min-w-0">
<div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-secondary text-secondary-foreground"> <div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-secondary text-secondary-foreground">
<Bot className="h-4 w-4" /> <Bot className="h-4 w-4" />
</div> </div>
<div className="rounded-lg px-3 py-2 text-sm bg-card border border-border/40"> <div className="rounded-lg px-3 py-2 text-sm bg-card border border-border/40 min-w-0 overflow-hidden">
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<Loader2 className="h-4 w-4 animate-spin" /> <Loader2 className="h-4 w-4 animate-spin" />
<span>Thinking...</span> <span>Thinking...</span>
@ -176,7 +176,7 @@ export default function ChatPage() {
</div> </div>
{/* Input Area */} {/* Input Area */}
<form onSubmit={handleSubmit} className="flex gap-2"> <form onSubmit={handleSubmit} className="flex gap-2 flex-shrink-0">
<Input <Input
value={input} value={input}
onChange={(e) => setInput(e.target.value)} onChange={(e) => setInput(e.target.value)}