vodorod/Dorod-Sky
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Add tailwind plugin for prettier (#592)

Browse Source
This commit is contained in:
Salih Altun
2024-07-11 21:29:47 +03:00
committed by GitHub
parent 4e49d84f1e
commit 102d73b60e
39 changed files with 206 additions and 127 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
skyvern-frontend/src/routes/tasks/detail/ActionCard.tsx
View File

@@ -18,7 +18,7 @@ function ActionCard({
return (
<div
className={cn(
"flex p-4 rounded-lg shadow-md border hover:bg-muted cursor-pointer",
"flex cursor-pointer rounded-lg border p-4 shadow-md hover:bg-muted",
{
"bg-muted": selected,
},

6
skyvern-frontend/src/routes/tasks/detail/ActionScreenshot.tsx
View File

@@ -34,15 +34,15 @@ function ActionScreenshot({ stepId, index }: Props) {
if (isFetching) {
return (
<div className="max-h-[400px] flex flex-col mx-auto items-center gap-2 overflow-hidden">
<ReloadIcon className="animate-spin h-6 w-6" />
<div className="mx-auto flex max-h-[400px] flex-col items-center gap-2 overflow-hidden">
<ReloadIcon className="h-6 w-6 animate-spin" />
<div>Loading screenshot...</div>
</div>
);
}
return screenshot ? (
<figure className="max-w-full flex flex-col mx-auto items-center gap-2 overflow-hidden">
<figure className="mx-auto flex max-w-full flex-col items-center gap-2 overflow-hidden">
<ZoomableImage src={getImageURL(screenshot)} alt="llm-screenshot" />
</figure>
) : (

4
skyvern-frontend/src/routes/tasks/detail/InputReasoningCard.tsx
View File

@@ -6,7 +6,7 @@ type Props = {
function InputReasoningCard({ input, reasoning, confidence }: Props) {
return (
<div className="flex p-4 gap-2 rounded-md shadow-md border items-start">
<div className="flex items-start gap-2 rounded-md border p-4 shadow-md">
<div className="flex-1">
<div className="text-sm">
<span className="font-bold">Agent Input:</span> {input}
@@ -15,7 +15,7 @@ function InputReasoningCard({ input, reasoning, confidence }: Props) {
<span className="font-bold">Agent Reasoning:</span> {reasoning}
</div>
</div>
<div className="flex items-center justify-center border p-2 rounded-lg bg-muted">
<div className="flex items-center justify-center rounded-lg border bg-muted p-2">
<span>Confidence: {confidence}</span>
</div>
</div>

2
skyvern-frontend/src/routes/tasks/detail/JSONArtifact.tsx
View File

@@ -31,7 +31,7 @@ function JSONArtifact({ artifact }: Props) {
});
if (isFetching) {
return <Skeleton className="w-full h-48" />;
return <Skeleton className="h-48 w-full" />;
}
return (

24
skyvern-frontend/src/routes/tasks/detail/ScrollableActionList.tsx
View File

@@ -77,7 +77,7 @@ function ScrollableActionList({
refs.current[actionIndex] = element;
}}
className={cn(
"flex p-4 rounded-lg shadow-md border hover:border-slate-300 cursor-pointer",
"flex cursor-pointer rounded-lg border p-4 shadow-md hover:border-slate-300",
{
"border-slate-300": selected,
},
@@ -95,9 +95,9 @@ function ScrollableActionList({
});
}}
>
<div className="flex-1 p-2 pt-0 space-y-2">
<div className="flex-1 space-y-2 p-2 pt-0">
<div className="flex justify-between">
<div className="flex gap-2 items-center">
<div className="flex items-center gap-2">
<span>#{i + 1}</span>
<Badge>{ReadableActionTypes[action.type]}</Badge>
</div>
@@ -113,9 +113,9 @@ function ScrollableActionList({
</TooltipProvider>
)}
{action.success ? (
<CheckCircledIcon className="w-6 h-6 text-success" />
<CheckCircledIcon className="h-6 w-6 text-success" />
) : (
<CrossCircledIcon className="w-6 h-6 text-destructive" />
<CrossCircledIcon className="h-6 w-6 text-destructive" />
)}
</div>
</div>
@@ -123,7 +123,7 @@ function ScrollableActionList({
<div className="text-sm">{action.reasoning}</div>
{action.type === ActionTypes.InputText && (
<>
<Separator className="bg-slate-50 block" />
<Separator className="block bg-slate-50" />
<div className="text-sm">Input: {action.input}</div>
</>
)}
@@ -138,8 +138,8 @@ function ScrollableActionList({
typeof activeIndex === "number" ? data.length - activeIndex - 1 : "stream";
return (
<div className="w-1/3 flex flex-col items-center border rounded h-[40rem]">
<div className="flex items-center text-sm p-4 gap-2">
<div className="flex h-[40rem] w-1/3 flex-col items-center rounded border">
<div className="flex items-center gap-2 p-4 text-sm">
<Button
size="icon"
onClick={() => {
@@ -155,7 +155,7 @@ function ScrollableActionList({
<ArrowDownIcon />
</Button>
</div>
<div className="overflow-y-scroll w-full px-4 pb-4 space-y-4">
<div className="w-full space-y-4 overflow-y-scroll px-4 pb-4">
{showStreamOption && (
<div
key="stream"
@@ -163,15 +163,15 @@ function ScrollableActionList({
refs.current[data.length] = element;
}}
className={cn(
"flex p-4 rounded-lg shadow-md border hover:border-slate-300 cursor-pointer",
"flex cursor-pointer rounded-lg border p-4 shadow-md hover:border-slate-300",
{
"border-slate-300": activeIndex === "stream",
},
)}
onClick={() => onActiveIndexChange("stream")}
>
<div className="text-lg flex gap-2 items-center">
<DotFilledIcon className="w-6 h-6 text-red-500" />
<div className="flex items-center gap-2 text-lg">
<DotFilledIcon className="h-6 w-6 text-red-500" />
Live
</div>
</div>

18
skyvern-frontend/src/routes/tasks/detail/StepArtifacts.tsx
View File

@@ -80,7 +80,7 @@ function StepArtifacts({ id, stepProps }: Props) {
return (
<Tabs defaultValue="info" className="w-full">
<TabsList className="grid w-full h-16 grid-cols-5">
<TabsList className="grid h-16 w-full grid-cols-5">
<TabsTrigger value="info">Info</TabsTrigger>
<TabsTrigger value="screenshot_llm">Annotated Screenshots</TabsTrigger>
<TabsTrigger value="screenshot_action">Action Screenshots</TabsTrigger>
@@ -126,16 +126,16 @@ function StepArtifacts({ id, stepProps }: Props) {
<ZoomableImage
key={index}
src={getImageURL(artifact)}
className="object-cover w-full h-full"
className="h-full w-full object-cover"
alt="action-screenshot"
/>
))}
</div>
) : isFetching ? (
<div className="grid grid-cols-2 gap-4 p-4">
<Skeleton className="w-full h-full" />
<Skeleton className="w-full h-full" />
<Skeleton className="w-full h-full" />
<Skeleton className="h-full w-full" />
<Skeleton className="h-full w-full" />
<Skeleton className="h-full w-full" />
</div>
) : (
<div>No screenshots found</div>
@@ -148,16 +148,16 @@ function StepArtifacts({ id, stepProps }: Props) {
<ZoomableImage
key={index}
src={getImageURL(artifact)}
className="object-cover w-full h-full"
className="h-full w-full object-cover"
alt="action-screenshot"
/>
))}
</div>
) : isFetching ? (
<div className="grid grid-cols-3 gap-4 p-4">
<Skeleton className="w-full h-full" />
<Skeleton className="w-full h-full" />
<Skeleton className="w-full h-full" />
<Skeleton className="h-full w-full" />
<Skeleton className="h-full w-full" />
<Skeleton className="h-full w-full" />
</div>
) : (
<div>No screenshots found</div>

2
skyvern-frontend/src/routes/tasks/detail/StepArtifactsLayout.tsx
View File

@@ -40,7 +40,7 @@ function StepArtifactsLayout() {
onActiveIndexChange={setActiveIndex}
/>
</aside>
<main className="px-4 w-full">
<main className="w-full px-4">
{activeStep ? (
<StepArtifacts id={activeStep.step_id} stepProps={activeStep} />
) : null}

6
skyvern-frontend/src/routes/tasks/detail/StepNavigation.tsx
View File

@@ -48,7 +48,7 @@ function StepNavigation({ activeIndex, onActiveIndexChange }: Props) {
return (
<div
className={cn(
"flex items-center px-6 py-2 hover:bg-primary-foreground rounded-2xl cursor-pointer",
"flex cursor-pointer items-center rounded-2xl px-6 py-2 hover:bg-primary-foreground",
{
"bg-primary-foreground": isActive,
},
@@ -59,10 +59,10 @@ function StepNavigation({ activeIndex, onActiveIndexChange }: Props) {
}}
>
{step.status === "completed" && (
<CheckboxIcon className="w-6 h-6 mr-2 text-green-500" />
<CheckboxIcon className="mr-2 h-6 w-6 text-green-500" />
)}
{step.status === "failed" && (
<CrossCircledIcon className="w-6 h-6 mr-2 text-red-500" />
<CrossCircledIcon className="mr-2 h-6 w-6 text-red-500" />
)}
<span>
{step.retry_index > 0

10
skyvern-frontend/src/routes/tasks/detail/TaskActions.tsx
View File

@@ -200,7 +200,7 @@ function TaskActions() {
function getStream() {
if (task?.status === Status.Queued) {
return (
<div className="w-full h-full flex flex-col gap-4 items-center justify-center text-lg bg-slate-900">
<div className="flex h-full w-full flex-col items-center justify-center gap-4 bg-slate-900 text-lg">
<span>Your task is queued. Typical queue time is 1-2 minutes.</span>
<span>Stream will start when the task is running.</span>
</div>
@@ -209,7 +209,7 @@ function TaskActions() {
if (task?.status === Status.Running && streamImgSrc.length === 0) {
return (
<div className="w-full h-full flex items-center justify-center text-lg bg-slate-900">
<div className="flex h-full w-full items-center justify-center bg-slate-900 text-lg">
Starting the stream...
</div>
);
@@ -217,7 +217,7 @@ function TaskActions() {
if (task?.status === Status.Running && streamImgSrc.length > 0) {
return (
<div className="w-full h-full">
<div className="h-full w-full">
<img src={`data:image/png;base64,${streamImgSrc}`} />
</div>
);
@@ -227,8 +227,8 @@ function TaskActions() {
return (
<div className="flex gap-2">
<div className="w-2/3 border rounded">
<div className="p-4 w-full h-full">
<div className="w-2/3 rounded border">
<div className="h-full w-full p-4">
{selectedAction === "stream" ? getStream() : null}
{typeof selectedAction === "number" && activeAction ? (
<ActionScreenshot

18
skyvern-frontend/src/routes/tasks/detail/TaskDetails.tsx
View File

@@ -101,7 +101,7 @@ function TaskDetails() {
return (
<div className="flex flex-col gap-8">
<div className="flex justify-between items-center">
<div className="flex items-center justify-between">
<div className="flex items-center gap-4">
<span className="text-lg">{taskId}</span>
{taskId && <TaskInfo id={taskId} />}
@@ -141,8 +141,8 @@ function TaskDetails() {
</div>
{taskIsLoading ? (
<div className="flex items-center gap-2">
<Skeleton className="w-32 h-32" />
<Skeleton className="w-full h-32" />
<Skeleton className="h-32 w-32" />
<Skeleton className="h-32 w-full" />
</div>
) : (
<>
@@ -150,13 +150,13 @@ function TaskDetails() {
{failureReason}
</>
)}
<div className="flex justify-center items-center">
<div className="inline-flex border rounded bg-muted p-1">
<div className="flex items-center justify-center">
<div className="inline-flex rounded border bg-muted p-1">
<NavLink
to="actions"
className={({ isActive }) => {
return cn(
"cursor-pointer px-2 py-1 rounded-md text-muted-foreground",
"cursor-pointer rounded-md px-2 py-1 text-muted-foreground",
{
"bg-primary-foreground text-foreground": isActive,
},
@@ -169,7 +169,7 @@ function TaskDetails() {
to="recording"
className={({ isActive }) => {
return cn(
"cursor-pointer px-2 py-1 rounded-md text-muted-foreground",
"cursor-pointer rounded-md px-2 py-1 text-muted-foreground",
{
"bg-primary-foreground text-foreground": isActive,
},
@@ -182,7 +182,7 @@ function TaskDetails() {
to="parameters"
className={({ isActive }) => {
return cn(
"cursor-pointer px-2 py-1 rounded-md text-muted-foreground",
"cursor-pointer rounded-md px-2 py-1 text-muted-foreground",
{
"bg-primary-foreground text-foreground": isActive,
},
@@ -195,7 +195,7 @@ function TaskDetails() {
to="diagnostics"
className={({ isActive }) => {
return cn(
"cursor-pointer px-2 py-1 rounded-md text-muted-foreground",
"cursor-pointer rounded-md px-2 py-1 text-muted-foreground",
{
"bg-primary-foreground text-foreground": isActive,
},

8
skyvern-frontend/src/routes/tasks/detail/TaskInfo.tsx
View File

@@ -47,10 +47,10 @@ function TaskInfo({ id }: Props) {
if (stepsIsLoading || taskIsLoading) {
return (
<div className="flex gap-4">
<Skeleton className="w-20 h-6" />
<Skeleton className="w-20 h-6" />
<Skeleton className="w-20 h-6" />
<Skeleton className="w-20 h-6" />
<Skeleton className="h-6 w-20" />
<Skeleton className="h-6 w-20" />
<Skeleton className="h-6 w-20" />
<Skeleton className="h-6 w-20" />
</div>
);
}

6
skyvern-frontend/src/routes/tasks/detail/TaskRecording.tsx
View File

@@ -24,8 +24,8 @@ function TaskRecording() {
if (taskIsFetching) {
return (
<div className="flex mx-auto">
<div className="w-[800px] h-[450px]">
<div className="mx-auto flex">
<div className="h-[450px] w-[800px]">
<Skeleton className="h-full" />
</div>
</div>
@@ -37,7 +37,7 @@ function TaskRecording() {
}
return (
<div className="flex mx-auto">
<div className="mx-auto flex">
{task.recording_url ? (
<video width={800} height={450} src={getRecordingURL(task)} controls />
) : (

2
skyvern-frontend/src/routes/tasks/detail/TextArtifact.tsx
View File

@@ -29,7 +29,7 @@ function TextArtifact({ artifact }: Props) {
});
if (isFetching) {
return <Skeleton className="w-full h-48" />;
return <Skeleton className="h-48 w-full" />;
}
return (