From f03c07002fdc5578b1e7429781e6bc422f049496 Mon Sep 17 00:00:00 2001
From: Ryan Hopper-Lowe <46546486+ryanhopperlowe@users.noreply.github.com>
Date: Mon, 23 Dec 2024 11:11:52 -0600
Subject: [PATCH] refactor: re-center the message suggestions for new threads
 (#1025)

- Updates the scroll-area component to take classNames for it's viewport subcomponent for more flexible styling
---
 ui/admin/app/components/chat/MessagePane.tsx |  5 ++++-
 ui/admin/app/components/ui/scroll-area.tsx   | 16 ++++++++++++++--
 2 files changed, 18 insertions(+), 3 deletions(-)

diff --git a/ui/admin/app/components/chat/MessagePane.tsx b/ui/admin/app/components/chat/MessagePane.tsx
index 4f6739e3b..d21e753ec 100644
--- a/ui/admin/app/components/chat/MessagePane.tsx
+++ b/ui/admin/app/components/chat/MessagePane.tsx
@@ -34,7 +34,10 @@ export function MessagePane({
                 startScrollAt="bottom"
                 enableScrollTo="bottom"
                 enableScrollStick="bottom"
-                className={cn("h-full w-full relative", classNames.messageList)}
+                classNames={{
+                    root: cn("h-full w-full relative", classNames.messageList),
+                    viewport: cn(isEmpty && "flex flex-col justify-center"),
+                }}
             >
                 {isEmpty ? (
                     <NoMessages />
diff --git a/ui/admin/app/components/ui/scroll-area.tsx b/ui/admin/app/components/ui/scroll-area.tsx
index b7bc5efb8..6a0927bda 100644
--- a/ui/admin/app/components/ui/scroll-area.tsx
+++ b/ui/admin/app/components/ui/scroll-area.tsx
@@ -15,6 +15,10 @@ const ScrollArea = React.forwardRef<
         startScrollAt?: "bottom";
         enableScrollStick?: "bottom";
         enableScrollTo?: "bottom";
+        classNames?: {
+            root?: string;
+            viewport?: string;
+        };
     }
 >((props, ref) => {
     const {
@@ -23,6 +27,7 @@ const ScrollArea = React.forwardRef<
         startScrollAt,
         enableScrollTo,
         enableScrollStick,
+        classNames = {},
         ...rootProps
     } = props;
 
@@ -60,11 +65,18 @@ const ScrollArea = React.forwardRef<
     return (
         <ScrollAreaPrimitive.Root
             ref={ref}
-            className={cn("relative overflow-hidden", className)}
+            className={cn(
+                "relative overflow-hidden",
+                className,
+                classNames.root
+            )}
             {...rootProps}
         >
             <ScrollAreaPrimitive.Viewport
-                className="h-full w-full rounded-[inherit] max-h-[inherit]"
+                className={cn(
+                    "h-full w-full rounded-[inherit] max-h-[inherit]",
+                    classNames.viewport
+                )}
                 ref={initRef}
                 onScroll={(e) =>
                     setShouldStickToBottom(isScrolledToBottom(e.currentTarget))