style: add no-scrollbar utility class and apply to Messages component

- Introduced a utility class to hide scrollbars across different browsers.
- Updated the Messages component to use the new no-scrollbar class for a cleaner UI.

app/globals.css

@@ -159,4 +159,17 @@
     @apply bg-background text-foreground;
     letter-spacing: var(--tracking-normal);
   }
+}
+
+@layer utilities {
+  /* Hide scrollbar for Chrome, Safari and Opera */
+  .no-scrollbar::-webkit-scrollbar {
+    display: none;
+  }
+
+  /* Hide scrollbar for IE, Edge and Firefox */
+  .no-scrollbar {
+    -ms-overflow-style: none;  /* IE and Edge */
+    scrollbar-width: none;  /* Firefox */
+  }
 }

components/messages.tsx

@@ -11,11 +11,11 @@ export const Messages = ({
   isLoading: boolean;
   status: "error" | "submitted" | "streaming" | "ready";
 }) => {
-  // const [containerRef, endRef] = useScrollToBottom();
+  const [containerRef, endRef] = useScrollToBottom();
   return (
     <div
-      className="h-full overflow-y-auto"
-      // ref={containerRef}
+      className="h-full overflow-y-auto no-scrollbar"
+      ref={containerRef}
     >
       <div className="max-w-xl mx-auto py-4">
         {messages.map((m, i) => (
@@ -27,7 +27,7 @@ export const Messages = ({
             status={status}
           />
         ))}
-        {/* <div className="h-1" ref={endRef} /> */}
+        <div className="h-1" ref={endRef} />
       </div>
     </div>
   );