Add scroll area component (#945)

Co-authored-by: Muhammed Salih Altun <muhammedsalihaltun@gmail.com>

skyvern-frontend/src/components/ui/scroll-area.tsx

@@ -0,0 +1,46 @@
+import * as React from "react";
+import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area";
+
+import { cn } from "@/util/utils";
+
+const ScrollArea = React.forwardRef<
+  React.ElementRef<typeof ScrollAreaPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root>
+>(({ className, children, ...props }, ref) => (
+  <ScrollAreaPrimitive.Root
+    ref={ref}
+    className={cn("relative overflow-hidden", className)}
+    {...props}
+  >
+    <ScrollAreaPrimitive.Viewport className="h-full w-full rounded-[inherit]">
+      {children}
+    </ScrollAreaPrimitive.Viewport>
+    <ScrollBar />
+    <ScrollAreaPrimitive.Corner />
+  </ScrollAreaPrimitive.Root>
+));
+ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName;
+
+const ScrollBar = React.forwardRef<
+  React.ElementRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>,
+  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>
+>(({ className, orientation = "vertical", ...props }, ref) => (
+  <ScrollAreaPrimitive.ScrollAreaScrollbar
+    ref={ref}
+    orientation={orientation}
+    className={cn(
+      "flex touch-none select-none transition-colors",
+      orientation === "vertical" &&
+        "h-full w-2.5 border-l border-l-transparent p-[1px]",
+      orientation === "horizontal" &&
+        "h-2.5 flex-col border-t border-t-transparent p-[1px]",
+      className,
+    )}
+    {...props}
+  >
+    <ScrollAreaPrimitive.ScrollAreaThumb className="relative flex-1 rounded-full bg-border" />
+  </ScrollAreaPrimitive.ScrollAreaScrollbar>
+));
+ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName;
+
+export { ScrollArea, ScrollBar };

skyvern-frontend/src/routes/tasks/create/PromptBox.tsx

@@ -10,6 +10,7 @@ import { AxiosError } from "axios";
 import { useState } from "react";
 import { useNavigate } from "react-router-dom";
 import { stringify as convertToYAML } from "yaml";
+import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area";
 
 function createTaskFromTaskGenerationParameters(
   values: TaskGenerationApiResponse,
@@ -176,21 +177,24 @@ function PromptBox() {
           </div>
         </div>
       </div>
-      <div className="flex gap-4 overflow-x-scroll rounded-sm bg-slate-elevation1 p-4">
-        {examplePrompts.map((examplePrompt) => {
-          return (
-            <div
-              key={examplePrompt}
-              className="cursor-pointer whitespace-nowrap rounded-sm bg-slate-elevation3 px-4 py-3 hover:bg-slate-elevation5"
-              onClick={() => {
-                setPrompt(examplePrompt);
-              }}
-            >
-              {examplePrompt}
-            </div>
-          );
-        })}
-      </div>
+      <ScrollArea>
+        <div className="flex gap-4 rounded-sm bg-slate-elevation1 p-4">
+          {examplePrompts.map((examplePrompt) => {
+            return (
+              <div
+                key={examplePrompt}
+                className="cursor-pointer whitespace-nowrap rounded-sm bg-slate-elevation3 px-4 py-3 hover:bg-slate-elevation5"
+                onClick={() => {
+                  setPrompt(examplePrompt);
+                }}
+              >
+                {examplePrompt}
+              </div>
+            );
+          })}
+        </div>
+        <ScrollBar orientation="horizontal" />
+      </ScrollArea>
     </div>
   );
 }