Ling0925
/
suna
mirror of https://github.com/kortix-ai/suna.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #526 from escapade-mckv/thread-page 

chore(ui): better looking browser screenshot loader
This commit is contained in:
Bobbie 2025-05-27 13:11:00 +05:30 committed by GitHub
parent a6e41152a7 f3940e7338
commit 1cdeb88679
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 19 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
frontend/src/components/thread/tool-views/BrowserToolView.tsx
View File

@ -19,6 +19,7 @@ import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Badge } from '@/components/ui/badge'; import { Badge } from '@/components/ui/badge';
import { Button } from '@/components/ui/button'; import { Button } from '@/components/ui/button';
import { Skeleton } from '@/components/ui/skeleton'; import { Skeleton } from '@/components/ui/skeleton';
import { ImageLoader } from './shared/ImageLoader';
export function BrowserToolView({ export function BrowserToolView({
name = 'browser-operation', name = 'browser-operation',
@ -186,9 +187,7 @@ export function BrowserToolView({
return ( return (
<div className="flex items-center justify-center w-full h-full min-h-[600px] relative" style={{ minHeight: '600px' }}> <div className="flex items-center justify-center w-full h-full min-h-[600px] relative" style={{ minHeight: '600px' }}>
{imageLoading && ( {imageLoading && (
<div className="absolute inset-0 flex items-center justify-center"> <ImageLoader />
<Skeleton className="w-full h-full min-h-[600px]" />
</div>
)} )}
<img <img
src={screenshotUrl} src={screenshotUrl}
@ -213,9 +212,7 @@ export function BrowserToolView({
return ( return (
<div className="flex items-center justify-center w-full h-full min-h-[600px] relative" style={{ minHeight: '600px' }}> <div className="flex items-center justify-center w-full h-full min-h-[600px] relative" style={{ minHeight: '600px' }}>
{imageLoading && ( {imageLoading && (
<div className="absolute inset-0 flex items-center justify-center"> <ImageLoader />
<Skeleton className="w-full h-full min-h-[600px]" />
</div>
)} )}
<img <img
src={`data:image/jpeg;base64,${screenshotBase64}`} src={`data:image/jpeg;base64,${screenshotBase64}`}
@ -329,13 +326,11 @@ export function BrowserToolView({
)} )}
</div> </div>
) )
) : // For non-last tool calls, only show screenshot if available, otherwise show "No Browser State" ) :
(screenshotUrl || screenshotBase64) ? ( (screenshotUrl || screenshotBase64) ? (
<div className="flex items-center justify-center w-full h-full max-h-[650px] overflow-auto relative"> <div className="flex items-center justify-center w-full h-full overflow-auto relative">
{imageLoading && ( {imageLoading && (
<div className="absolute inset-0 flex items-center justify-center"> <ImageLoader />
<Skeleton className="w-full h-full min-h-[400px]" />
</div>
)} )}
{screenshotUrl ? ( {screenshotUrl ? (
<img <img

13
frontend/src/components/thread/tool-views/shared/ImageLoader.tsx Normal file
View File

@ -0,0 +1,13 @@
import { Skeleton } from "@/components/ui/skeleton"
export const ImageLoader = ({ className = "" } : {className?: string}) => {
return (
<div className={`relative flex items-center justify-center h-full w-full overflow-hidden ${className}`}>
<div className="h-[60%] flex flex-col gap-6 aspect-square rounded-xl items-center justify-center">
<Skeleton className="w-full h-full rounded-lg" />
<Skeleton className="w-full h-14 rounded-lg" />
<Skeleton className="w-full h-14 rounded-lg" />
</div>
</div>
)
}