YunxiaoXu/ea-chatbot-lg
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(ux): Add size limits and improved styling for plot previews in chat bubbles.

Browse Source
This commit is contained in:
Yunxiao Xu
2026-02-13 04:02:38 -08:00
parent 69c75bd4fe
commit 2220714962
1 changed files with 5 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
frontend/src/components/chat/MessageBubble.tsx
View File

@@ -48,20 +48,20 @@ export function MessageBubble({ message }: MessageBubbleProps) {
</div> </div>
{(message.plots || message.plot_ids) && ((message.plots?.length || 0) > 0 || (message.plot_ids?.length || 0) > 0) && ( {(message.plots || message.plot_ids) && ((message.plots?.length || 0) > 0 || (message.plot_ids?.length || 0) > 0) && (
<div className="mt-4 grid grid-cols-1 gap-2"> <div className="mt-4 grid grid-cols-1 gap-4">
{message.plots?.map((plot, index) => { {message.plots?.map((plot, index) => {
const src = `data:image/png;base64,${plot}` const src = `data:image/png;base64,${plot}`
return ( return (
<Button <Button
key={`stream-${index}`} key={`stream-${index}`}
variant="ghost" variant="ghost"
className="relative group p-0 h-auto w-full overflow-hidden hover:bg-transparent" className="relative group p-0 h-auto w-full max-w-2xl mx-auto overflow-hidden hover:bg-transparent flex justify-center border bg-white"
onClick={() => setSelectedPlot(src)} onClick={() => setSelectedPlot(src)}
> >
<img <img
src={src} src={src}
alt="Analysis Plot" alt="Analysis Plot"
className="rounded-md border bg-white w-full h-auto transition-all group-hover:brightness-95" className="rounded-md max-h-[400px] w-auto object-contain transition-all group-hover:brightness-95"
/> />
<div className="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity bg-black/10"> <div className="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity bg-black/10">
<Maximize2Icon className="h-6 w-6 text-white drop-shadow-md" /> <Maximize2Icon className="h-6 w-6 text-white drop-shadow-md" />
@@ -75,13 +75,13 @@ export function MessageBubble({ message }: MessageBubbleProps) {
<Button <Button
key={`history-${index}`} key={`history-${index}`}
variant="ghost" variant="ghost"
className="relative group p-0 h-auto w-full overflow-hidden hover:bg-transparent" className="relative group p-0 h-auto w-full max-w-2xl mx-auto overflow-hidden hover:bg-transparent flex justify-center border bg-white"
onClick={() => setSelectedPlot(src)} onClick={() => setSelectedPlot(src)}
> >
<img <img
src={src} src={src}
alt="Historical Analysis Plot" alt="Historical Analysis Plot"
className="rounded-md border bg-white w-full h-auto transition-all group-hover:brightness-95" className="rounded-md max-h-[400px] w-auto object-contain transition-all group-hover:brightness-95"
/> />
<div className="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity bg-black/10"> <div className="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity bg-black/10">
<Maximize2Icon className="h-6 w-6 text-white drop-shadow-md" /> <Maximize2Icon className="h-6 w-6 text-white drop-shadow-md" />