feat(conversation): customizable scrollbar for conversation content

packages/elements/package.json

@@ -28,6 +28,7 @@
     "media-chrome": "^4.17.2",
     "motion": "^12.26.2",
     "nanoid": "^5.1.6",
+    "radix-ui": "latest",
     "react": "19.2.3",
     "react-dom": "19.2.3",
     "react-jsx-parser": "^2.2.0",

packages/elements/src/conversation.tsx

@@ -7,6 +7,8 @@ import { cn } from "@repo/shadcn-ui/lib/utils";
 import { ArrowDownIcon, DownloadIcon } from "lucide-react";
 import { useCallback } from "react";
 import { StickToBottom, useStickToBottomContext } from "use-stick-to-bottom";
+import { ScrollArea as ScrollAreaPrimitive } from "radix-ui";
+import { ScrollBar } from "@repo/shadcn-ui/components/ui/scroll-area";
 
 export type ConversationProps = ComponentProps<typeof StickToBottom>;
 
@@ -20,19 +22,38 @@ export const Conversation = ({ className, ...props }: ConversationProps) => (
   />
 );
 
-export type ConversationContentProps = ComponentProps<
-  typeof StickToBottom.Content
->;
+export type ConversationContentProps = ComponentProps<typeof ScrollAreaPrimitive.Root> & {
+  scrollClassName?: string;
+  scrollBarClassName?: string;
+};
 
 export const ConversationContent = ({
+  children,
   className,
+  scrollClassName,
+  scrollBarClassName,
   ...props
-}: ConversationContentProps) => (
-  <StickToBottom.Content
-    className={cn("flex flex-col gap-8 p-4", className)}
-    {...props}
-  />
-);
+}: ConversationContentProps) => {
+  const context = useStickToBottomContext();
+
+  return (
+    <ScrollAreaPrimitive.Root className="size-full" {...props}>
+      <ScrollAreaPrimitive.Viewport
+        ref={context.scrollRef}
+        className={cn("size-full overflow-y-auto", scrollClassName)}
+        style={{ scrollbarGutter: "stable both-edges" }}
+      >
+        <div
+          ref={context.contentRef}
+          className={cn("flex flex-col gap-8 p-4", className)}
+        >
+          {children}
+        </div>
+      </ScrollAreaPrimitive.Viewport>
+      <ScrollBar className={cn("w-2", scrollBarClassName)} />
+    </ScrollAreaPrimitive.Root>
+  );
+};
 
 export type ConversationEmptyStateProps = ComponentProps<"div"> & {
   title?: string;