From f3478ffc6582c1806b1a41196c54dd86f042e304 Mon Sep 17 00:00:00 2001
From: Kerem Yilmaz <kerem@skyvern.com>
Date: Tue, 11 Jun 2024 11:29:57 -0700
Subject: [PATCH] Fix confidence score in task actions (#458)

---
 skyvern-frontend/src/api/types.ts             |  4 ++--
 .../tasks/detail/ScrollableActionList.tsx     | 21 +++++++++++++++++--
 2 files changed, 21 insertions(+), 4 deletions(-)

diff --git a/skyvern-frontend/src/api/types.ts b/skyvern-frontend/src/api/types.ts
index d8363daa..c9d55b6e 100644
--- a/skyvern-frontend/src/api/types.ts
+++ b/skyvern-frontend/src/api/types.ts
@@ -187,7 +187,7 @@ export type Option = {
 
 export type ActionApiResponse = {
   reasoning: string;
-  confidence_float: number;
+  confidence_float?: number;
   action_type: ActionType;
   text: string | null;
   option: Option | null;
@@ -196,7 +196,7 @@ export type ActionApiResponse = {
 
 export type Action = {
   reasoning: string;
-  confidence: number;
+  confidence?: number;
   type: ActionType;
   input: string;
   success: boolean;
diff --git a/skyvern-frontend/src/routes/tasks/detail/ScrollableActionList.tsx b/skyvern-frontend/src/routes/tasks/detail/ScrollableActionList.tsx
index 3f3227ab..4a644844 100644
--- a/skyvern-frontend/src/routes/tasks/detail/ScrollableActionList.tsx
+++ b/skyvern-frontend/src/routes/tasks/detail/ScrollableActionList.tsx
@@ -3,6 +3,12 @@ import { Action, ActionTypes, ReadableActionTypes } from "@/api/types";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import { Separator } from "@/components/ui/separator";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
 import { useCredentialGetter } from "@/hooks/useCredentialGetter";
 import { cn } from "@/util/utils";
 import {
@@ -105,9 +111,20 @@ function ScrollableActionList({
                   <div className="flex gap-2 items-center">
                     <span>#{index + 1}</span>
                     <Badge>{ReadableActionTypes[action.type]}</Badge>
-                    <div>{action.confidence}</div>
                   </div>
-                  <div>
+                  <div className="flex items-center gap-2">
+                    {typeof action.confidence === "number" && (
+                      <TooltipProvider>
+                        <Tooltip>
+                          <TooltipTrigger>
+                            <Badge variant="secondary">
+                              {action.confidence}
+                            </Badge>
+                          </TooltipTrigger>
+                          <TooltipContent>Confidence Score</TooltipContent>
+                        </Tooltip>
+                      </TooltipProvider>
+                    )}
                     {action.success ? (
                       <CheckCircledIcon className="w-6 h-6 text-success" />
                     ) : (