feat: add hover action support (#3994)

Co-authored-by: LawyZheng <lawyzheng1106@gmail.com>

skyvern-frontend/src/api/types.ts

@@ -264,6 +264,7 @@ export interface CustomCredentialServiceConfigResponse {
 export const ActionTypes = {
   InputText: "input_text",
   Click: "click",
+  Hover: "hover",
   SelectOption: "select_option",
   UploadFile: "upload_file",
   complete: "complete",
@@ -290,6 +291,7 @@ export const ReadableActionTypes: {
 } = {
   input_text: "Input Text",
   click: "Click",
+  hover: "Hover",
   select_option: "Select Option",
   upload_file: "Upload File",
   complete: "Complete",

skyvern-frontend/src/routes/tasks/detail/ActionTypePill.tsx

@@ -7,6 +7,7 @@ type Props = {
 
 const icons: Partial<Record<ActionType, React.ReactNode>> = {
   click: <CursorArrowIcon className="h-4 w-4" />,
+  hover: <CursorArrowIcon className="h-4 w-4" />,
   input_text: <InputIcon className="h-4 w-4" />,
 };
 

skyvern-frontend/src/routes/tasks/detail/ActionTypePillMinimal.tsx

@@ -13,6 +13,7 @@ type Props = {
 
 const icons: Partial<Record<ActionType, React.ReactNode>> = {
   click: <CursorArrowIcon className="h-4 w-4" />,
+  hover: <CursorArrowIcon className="h-4 w-4" />,
   complete: <CheckCircledIcon className="h-4 w-4" />,
   input_text: <InputIcon className="h-4 w-4" />,
 };

skyvern-frontend/src/routes/tasks/detail/hooks/useActions.ts

@@ -18,6 +18,8 @@ function getActionInput(action: ActionApiResponse) {
     input = action.text;
   } else if (action.action_type === ActionTypes.Click) {
     input = "Click";
+  } else if (action.action_type === ActionTypes.Hover) {
+    input = "Hover";
   } else if (action.action_type === ActionTypes.SelectOption && action.option) {
     input = action.option.label;
   }