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

fix weird loading state in actions (#439)

Browse Source
This commit is contained in:
Salih Altun
2024-06-06 23:16:35 +03:00
committed by GitHub
parent 1d3a7a0348
commit 579aa274cd
2 changed files with 34 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -70,6 +70,7 @@ function ScrollableActionList({
const selected = activeIndex === index; const selected = activeIndex === index;
return ( return (
<div <div
key={index}
ref={(element) => { ref={(element) => {
refs.current[index] = element; refs.current[index] = element;
}} }}

62
skyvern-frontend/src/routes/tasks/detail/useActions.tsx
View File

@@ -22,11 +22,12 @@ function getActionInput(action: ActionApiResponse) {
return input; return input;
} }
function useActions( function useActions(taskId: string): {
taskId: string, data?: Array<Action>;
): ReturnType<typeof useQuery<Array<Action | null>>> { isFetching: boolean;
} {
const credentialGetter = useCredentialGetter(); const credentialGetter = useCredentialGetter();
const { data: task } = useQuery<TaskApiResponse>({ const { data: task, isFetching: taskIsFetching } = useQuery<TaskApiResponse>({
queryKey: ["task", taskId], queryKey: ["task", taskId],
queryFn: async () => { queryFn: async () => {
const client = await getClient(credentialGetter); const client = await getClient(credentialGetter);
@@ -37,40 +38,43 @@ function useActions(
const taskIsRunningOrQueued = const taskIsRunningOrQueued =
task?.status === Status.Running || task?.status === Status.Queued; task?.status === Status.Running || task?.status === Status.Queued;
const useQueryReturn = useQuery<Array<Action | null>>({ const stepsQuery = useQuery<Array<StepApiResponse>>({
queryKey: ["task", taskId, "actions"], queryKey: ["task", taskId, "steps"],
queryFn: async () => { queryFn: async () => {
const client = await getClient(credentialGetter); const client = await getClient(credentialGetter);
const steps = (await client return client
.get(`/tasks/${taskId}/steps`) .get(`/tasks/${taskId}/steps`)
.then((response) => response.data)) as Array<StepApiResponse>; .then((response) => response.data);
const actions = steps.map((step) => {
const actionsAndResults = step.output.actions_and_results;
const actions = actionsAndResults.map((actionAndResult, index) => {
const action: Action = {
reasoning: actionAndResult[0].reasoning,
confidence: actionAndResult[0].confidence_float,
input: getActionInput(actionAndResult[0]),
type: actionAndResult[0].action_type,
success: actionAndResult[1][0].success,
stepId: step.step_id,
index,
};
return action;
});
return actions;
});
return actions.flat();
}, },
enabled: !!task, enabled: !!task,
staleTime: taskIsRunningOrQueued ? 30 : Infinity, staleTime: taskIsRunningOrQueued ? 30 : Infinity,
refetchOnWindowFocus: taskIsRunningOrQueued, refetchOnWindowFocus: taskIsRunningOrQueued,
}); });
return useQueryReturn; const actions = stepsQuery.data
?.map((step) => {
const actionsAndResults = step.output.actions_and_results;
const actions = actionsAndResults.map((actionAndResult, index) => {
const action: Action = {
reasoning: actionAndResult[0].reasoning,
confidence: actionAndResult[0].confidence_float,
input: getActionInput(actionAndResult[0]),
type: actionAndResult[0].action_type,
success: actionAndResult[1][0].success,
stepId: step.step_id,
index,
};
return action;
});
return actions;
})
.flat();
return {
data: actions,
isFetching: stepsQuery.isFetching || taskIsFetching,
};
} }
export { useActions }; export { useActions };