feat: scrollbar optimize

Author: xx-yoke

playground/src/Chat.tsx

@@ -11,6 +11,7 @@ import { InputCount, Sender } from "@matechat/react/sender";
 import type { MessageParam } from "@matechat/react/utils";
 import { useChat } from "@matechat/react/utils/chat";
 import { useMateChat } from "@matechat/react/utils/core";
+import clsx from "clsx";
 import { MessageSquarePlus } from "lucide-react";
 import { useMemo, useState } from "react";
 
@@ -84,7 +85,13 @@ export function Chat() {
     <div className="flex flex-col items-center justify-center min-h-screen bg-gray-100">
       <main className="flex flex-col items-center justify-center h-[80vh] w-full max-w-3xl p-4 bg-white rounded-lg shadow-md gap-5">
         <BubbleList
-          className="px-4 w-full max-w-full"
+          className={clsx(
+            "px-4 w-full max-w-full",
+            "[scrollbar-gutter:stable] [&::-webkit-scrollbar]:w-2 [&::-webkit-scrollbar-thumb]:rounded-full",
+            "[&::-webkit-scrollbar-thumb]:cursor-auto",
+            "[&::-webkit-scrollbar-thumb]:bg-gray-300 dark:[&::-webkit-scrollbar-thumb]:bg-gray-600",
+            "[&::-webkit-scrollbar-thumb:hover]:bg-gray-400 dark:[&::-webkit-scrollbar-thumb:hover]:bg-gray-500",
+          )}
           messages={messages}
           background="right-solid"
           isPending={pending}

src/sender.tsx

@@ -122,11 +122,11 @@ export function Sender({
   const [isSending, setIsSending] = useState(false);
 
   useEffect(() => {
-    onMessageChange?.(message);
     if (textareaRef.current) {
       textareaRef.current.style.height = "auto";
       textareaRef.current.style.height = `${textareaRef.current.scrollHeight}px`;
     }
+    onMessageChange?.(message);
   }, [message, onMessageChange]);
 
   const [controller, setController] = useState<AbortController | null>(null);
@@ -180,7 +180,7 @@ export function Sender({
       data-slot="sender"
       className={twMerge(
         clsx(
-          "flex flex-col items-center border rounded-2xl",
+          "px-1 flex flex-col items-center border rounded-2xl",
           "border-gray-200 dark:border-gray-700 shadow-sm transition-all duration-300 hover:shadow-md",
           "focus-within:ring-2 focus-within:ring-blue-500 focus-within:border-blue-500",
           className,
@@ -195,9 +195,14 @@ export function Sender({
         onKeyDown={handleKeyDown}
         placeholder={placeholder}
         className={clsx(
-          "w-full pt-4 px-4 border-0 rounded-2xl !resize-none",
+          "w-full pt-4 px-4 border-0 rounded-2xl !resize-none bg-transparent",
           "focus:ring-0 focus:outline-none text-gray-700 placeholder-gray-400",
           "overflow-y-auto max-h-32",
+          "[scrollbar-gutter:stable] [&::-webkit-scrollbar]:w-1.5 [&::-webkit-scrollbar-thumb]:rounded-full",
+          "[&::-webkit-scrollbar-thumb]:cursor-auto",
+          "[&::-webkit-scrollbar-thumb]:bg-gray-300 dark:[&::-webkit-scrollbar-thumb]:bg-gray-600",
+          "[&::-webkit-scrollbar-thumb:hover]:bg-gray-400 dark:[&::-webkit-scrollbar-thumb:hover]:bg-gray-500",
+          "[&::-webkit-scrollbar-track]:mt-3"
         )}
         rows={2}
       />