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
obot-platform · Dec 23, 2024 · f03c070 · f03c070
1 parent 31c39b7
commit f03c070
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 3 deletions.
diff --git 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
@@ -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))