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

4
skyvern-frontend/src/routes/tasks/create/CreateNewTaskFromPrompt.tsx
View File

@@ -9,8 +9,8 @@ function CreateNewTaskFromPrompt() {
return (
<section className="space-y-8">
<header className="flex flex-col gap-4">
<div className="flex gap-4 items-center">
<MagicWandIcon className="w-6 h-6" />
<div className="flex items-center gap-4">
<MagicWandIcon className="h-6 w-6" />
<h1 className="text-3xl font-bold">Create New Task</h1>
</div>
<p>

6
skyvern-frontend/src/routes/tasks/create/SavedTaskCard.tsx
View File

@@ -75,8 +75,8 @@ function SavedTaskCard({ workflowId, title, url, description }: Props) {
return (
<Card>
<CardHeader>
<CardTitle className="flex justify-between items-center">
<span className="overflow-hidden text-ellipsis whitespace-nowrap ">
<CardTitle className="flex items-center justify-between">
<span className="overflow-hidden text-ellipsis whitespace-nowrap">
{title}
</span>
<Dialog open={open} onOpenChange={setOpen}>
@@ -130,7 +130,7 @@ function SavedTaskCard({ workflowId, title, url, description }: Props) {
</CardDescription>
</CardHeader>
<CardContent
className="h-48 overflow-scroll hover:bg-muted/40 cursor-pointer"
className="h-48 cursor-pointer overflow-scroll hover:bg-muted/40"
onClick={() => {
navigate(workflowId);
}}

8
skyvern-frontend/src/routes/tasks/create/SavedTasks.tsx
View File

@@ -108,14 +108,14 @@ function SavedTasks() {
>
<CardHeader>
<CardTitle>New Template</CardTitle>
<CardDescription className="whitespace-nowrap overflow-hidden text-ellipsis">
<CardDescription className="overflow-hidden text-ellipsis whitespace-nowrap">
Create your own template
</CardDescription>
</CardHeader>
<CardContent className="flex h-48 justify-center items-center hover:bg-muted/40 cursor-pointer">
{!mutation.isPending && <PlusIcon className="w-12 h-12" />}
<CardContent className="flex h-48 cursor-pointer items-center justify-center hover:bg-muted/40">
{!mutation.isPending && <PlusIcon className="h-12 w-12" />}
{mutation.isPending && (
<ReloadIcon className="animate-spin w-12 h-12" />
<ReloadIcon className="h-12 w-12 animate-spin" />
)}
</CardContent>
</Card>

28
skyvern-frontend/src/routes/tasks/create/TaskTemplates.tsx
View File

@@ -97,7 +97,7 @@ function TaskTemplates() {
href="https://meetings.hubspot.com/suchintan"
target="_blank"
rel="noopener noreferrer"
className="underline underline-offset-2 ml-auto"
className="ml-auto underline underline-offset-2"
>
Book a demo {"->"}
</a>
@@ -105,25 +105,25 @@ function TaskTemplates() {
</Alert>
<section className="py-4">
<header>
<h1 className="text-3xl mb-2">Try a prompt</h1>
<h1 className="mb-2 text-3xl">Try a prompt</h1>
</header>
<p className="text-sm">
We will generate a task for you automatically.
</p>
<Separator className="mt-2 mb-8" />
<div className="flex border rounded-xl items-center pr-4 max-w-xl mx-auto">
<Separator className="mb-8 mt-2" />
<div className="mx-auto flex max-w-xl items-center rounded-xl border pr-4">
<Textarea
className="rounded-xl resize-none border-transparent hover:border-transparent focus-visible:ring-0 p-2 font-mono text-sm"
className="resize-none rounded-xl border-transparent p-2 font-mono text-sm hover:border-transparent focus-visible:ring-0"
value={prompt}
onChange={(e) => setPrompt(e.target.value)}
placeholder="Enter your prompt..."
/>
<div className="h-full">
{getTaskFromPromptMutation.isPending ? (
<ReloadIcon className="w-6 h-6 animate-spin" />
<ReloadIcon className="h-6 w-6 animate-spin" />
) : (
<PaperPlaneIcon
className="w-6 h-6 cursor-pointer"
className="h-6 w-6 cursor-pointer"
onClick={() => {
getTaskFromPromptMutation.mutate(prompt);
}}
@@ -131,12 +131,12 @@ function TaskTemplates() {
)}
</div>
</div>
<div className="flex flex-wrap gap-4 mt-4 justify-center">
<div className="mt-4 flex flex-wrap justify-center gap-4">
{examplePrompts.map((examplePrompt) => {
return (
<div
key={examplePrompt}
className="p-2 border rounded-xl cursor-pointer text-muted-foreground text-sm"
className="cursor-pointer rounded-xl border p-2 text-sm text-muted-foreground"
onClick={() => {
setPrompt(examplePrompt);
}}
@@ -151,18 +151,18 @@ function TaskTemplates() {
<header>
<h1 className="text-3xl">Your Templates</h1>
</header>
<p className="text-sm mt-1">Your saved task templates</p>
<Separator className="mt-2 mb-8" />
<p className="mt-1 text-sm">Your saved task templates</p>
<Separator className="mb-8 mt-2" />
<SavedTasks />
</section>
<section className="py-4">
<header>
<h1 className="text-3xl">Skyvern Templates</h1>
</header>
<p className="text-sm mt-1">
<p className="mt-1 text-sm">
Sample tasks that showcase Skyvern's capabilities
</p>
<Separator className="mt-2 mb-8" />
<Separator className="mb-8 mt-2" />
<div className="grid grid-cols-4 gap-4">
{Object.entries(templateSamples).map(([sampleKey, sample]) => {
return (
@@ -174,7 +174,7 @@ function TaskTemplates() {
</CardDescription>
</CardHeader>
<CardContent
className="h-48 hover:bg-muted/40 cursor-pointer"
className="h-48 cursor-pointer hover:bg-muted/40"
onClick={() => {
navigate(sampleKey);
}}

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 (

2
skyvern-frontend/src/routes/tasks/list/TaskHistory.tsx
View File

@@ -105,7 +105,7 @@ function TaskHistory() {
{task.task_id}
</TableCell>
<TableCell
className="w-1/4 cursor-pointer max-w-64 overflow-hidden whitespace-nowrap overflow-ellipsis"
className="w-1/4 max-w-64 cursor-pointer overflow-hidden overflow-ellipsis whitespace-nowrap"
onClick={(event) => handleNavigate(event, task.task_id)}
>
{task.request.url}

8
skyvern-frontend/src/routes/tasks/list/TaskListSkeletonRows.tsx
View File

@@ -8,16 +8,16 @@ function TaskListSkeletonRows() {
return (
<TableRow key={index}>
<TableCell className="w-1/3">
<Skeleton className="w-full h-6" />
<Skeleton className="h-6 w-full" />
</TableCell>
<TableCell className="w-1/4">
<Skeleton className="w-full h-6" />
<Skeleton className="h-6 w-full" />
</TableCell>
<TableCell className="w-1/3">
<Skeleton className="w-full h-6" />
<Skeleton className="h-6 w-full" />
</TableCell>
<TableCell className="w-1/12">
<Skeleton className="w-full h-6" />
<Skeleton className="h-6 w-full" />
</TableCell>
</TableRow>
);

4
skyvern-frontend/src/routes/tasks/running/LatestScreenshot.tsx
View File

@@ -65,7 +65,7 @@ function LatestScreenshot({ id }: Props) {
});
if (isFetching && !artifact) {
return <Skeleton className="w-full h-full" />;
return <Skeleton className="h-full w-full" />;
}
if (isError || !artifact) {
@@ -75,7 +75,7 @@ function LatestScreenshot({ id }: Props) {
return (
<img
src={getImageURL(artifact)}
className="w-full h-full object-contain"
className="h-full w-full object-contain"
alt="Latest screenshot"
/>
);

2
skyvern-frontend/src/routes/tasks/running/QueuedTasks.tsx
View File

@@ -69,7 +69,7 @@ function QueuedTasks() {
onClick={(event) => handleNavigate(event, task.task_id)}
>
<TableCell className="w-1/4">{task.task_id}</TableCell>
<TableCell className="w-1/4 max-w-64 overflow-hidden whitespace-nowrap overflow-ellipsis">
<TableCell className="w-1/4 max-w-64 overflow-hidden overflow-ellipsis whitespace-nowrap">
{task.request.url}
</TableCell>
<TableCell className="w-1/4">

6
skyvern-frontend/src/routes/tasks/running/RunningTasks.tsx
View File

@@ -52,19 +52,19 @@ function RunningTasks() {
return (
<Card
key={task.task_id}
className="hover:bg-muted/50 cursor-pointer"
className="cursor-pointer hover:bg-muted/50"
onClick={(event) => handleNavigate(event, task.task_id)}
>
<CardHeader>
<CardTitle className="overflow-hidden text-ellipsis whitespace-nowrap">
{task.task_id}
</CardTitle>
<CardDescription className="whitespace-nowrap overflow-hidden text-ellipsis">
<CardDescription className="overflow-hidden text-ellipsis whitespace-nowrap">
{task.request.url}
</CardDescription>
</CardHeader>
<CardContent className="flex items-center justify-center">
<div className="w-40 h-40">
<div className="h-40 w-40">
<LatestScreenshot id={task.task_id} />
</div>
</CardContent>