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

Make success and fail action icons more visible (#441)

Browse Source
This commit is contained in:
Kerem Yilmaz
2024-06-07 06:21:28 -07:00
committed by GitHub
parent 81538a74e1
commit 4123718130
1 changed files with 24 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,19 +1,19 @@
import { getClient } from "@/api/AxiosClient";
import { Action, ActionTypes, ReadableActionTypes } from "@/api/types"; import { Action, ActionTypes, ReadableActionTypes } from "@/api/types";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button"; import { Button } from "@/components/ui/button";
import { Separator } from "@/components/ui/separator";
import { useCredentialGetter } from "@/hooks/useCredentialGetter";
import { cn } from "@/util/utils";
import { import {
ArrowLeftIcon, ArrowLeftIcon,
ArrowRightIcon, ArrowRightIcon,
CheckIcon, CheckCircledIcon,
Cross1Icon, CrossCircledIcon,
} from "@radix-ui/react-icons"; } from "@radix-ui/react-icons";
import { useQueryClient } from "@tanstack/react-query"; import { useQueryClient } from "@tanstack/react-query";
import { useParams } from "react-router-dom";
import { useCredentialGetter } from "@/hooks/useCredentialGetter";
import { getClient } from "@/api/AxiosClient";
import { useEffect, useRef } from "react"; import { useEffect, useRef } from "react";
import { cn } from "@/util/utils"; import { useParams } from "react-router-dom";
import { Badge } from "@/components/ui/badge";
import { Separator } from "@/components/ui/separator";
type Props = { type Props = {
data: Array<Action | null>; data: Array<Action | null>;
@@ -75,9 +75,9 @@ function ScrollableActionList({
refs.current[index] = element; refs.current[index] = element;
}} }}
className={cn( className={cn(
"flex p-4 rounded-lg shadow-md border hover:bg-muted cursor-pointer", "flex p-4 rounded-lg shadow-md border border-transparent hover:border-slate-500 cursor-pointer",
{ {
"bg-muted": selected, "border-slate-500": selected,
}, },
)} )}
onClick={() => onActiveIndexChange(index)} onClick={() => onActiveIndexChange(index)}
@@ -101,11 +101,21 @@ function ScrollableActionList({
}} }}
> >
<div className="flex-1 p-2 pt-0 space-y-2"> <div className="flex-1 p-2 pt-0 space-y-2">
<div className="flex gap-2 items-center"> <div className="flex justify-between">
<span>#{index + 1}</span> <div className="flex gap-2 items-center">
<Badge>{ReadableActionTypes[action.type]}</Badge> <span>#{index + 1}</span>
<div>{action.confidence}</div> <Badge>{ReadableActionTypes[action.type]}</Badge>
<div>{action.confidence}</div>
</div>
<div>
{action.success ? (
<CheckCircledIcon className="w-6 h-6 text-success" />
) : (
<CrossCircledIcon className="w-6 h-6 text-destructive" />
)}
</div>
</div> </div>
<div className="text-sm">{action.reasoning}</div> <div className="text-sm">{action.reasoning}</div>
{action.type === ActionTypes.InputText && ( {action.type === ActionTypes.InputText && (
<> <>
@@ -114,13 +124,6 @@ function ScrollableActionList({
</> </>
)} )}
</div> </div>
<div>
{action.success ? (
<CheckIcon className="w-4 h-4 text-success" />
) : (
<Cross1Icon className="w-4 h-4 text-destructive" />
)}
</div>
</div> </div>
); );
})} })}