From 03a24c38d3dfdb353b33f33523f2f67c6fbe2dad Mon Sep 17 00:00:00 2001
From: Ryo Aonetsuki <mdsalmanhelp0@gmail.com>
Date: Thu, 29 Oct 2026 10:36:13 +0600
Subject: [PATCH 1/2] Show the scroll-state example on the Message Scroller
 page

Signed-off-by: ryoaonetsuki <ryoaonetsuki@users.noreply.github.com>
---
 src/examples/message-scroller-scrollable.tsx | 101 +++++++++++++++++++
 1 file changed, 101 insertions(+)
 create mode 100644 src/examples/message-scroller-scrollable.tsx

diff --git a/src/examples/message-scroller-scrollable.tsx b/src/examples/message-scroller-scrollable.tsx
new file mode 100644
index 0000000..b6ebb64
--- /dev/null
+++ b/src/examples/message-scroller-scrollable.tsx
@@ -0,0 +1,101 @@
+"use client"
+
+import { Bubble, BubbleContent } from "@/components/ui/bubble"
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card"
+import { Message, MessageContent } from "@/components/ui/message"
+import {
+  MessageScroller,
+  MessageScrollerButton,
+  MessageScrollerContent,
+  MessageScrollerItem,
+  MessageScrollerProvider,
+  MessageScrollerViewport,
+  useMessageScrollerScrollable,
+} from "@/components/ui/message-scroller"
+
+const messages = Array.from({ length: 12 }, (_, index) => ({
+  id: `state-${index + 1}`,
+  role: index % 2 === 0 ? "user" : "assistant",
+  text:
+    index % 2 === 0
+      ? `Check section ${index + 1} of the transcript.`
+      : `Section ${index + 1} is ready. Scroll state updates without rerendering the rows.`,
+})) satisfies Array<{
+  id: string
+  role: "user" | "assistant"
+  text: string
+}>
+
+export function MessageScrollerScrollable() {
+  return (
+    <Card className="mx-auto h-112 w-full max-w-md gap-0">
+      <CardHeader className="border-b">
+        <CardTitle>Scroll State</CardTitle>
+        <CardDescription>
+          Read scroll state in JavaScript with the state hook.
+        </CardDescription>
+      </CardHeader>
+      <CardContent className="min-h-0 flex-1 p-0">
+        <MessageScrollerProvider defaultScrollPosition="start">
+          <MessageScroller>
+            <StatusBar />
+            <MessageScrollerViewport>
+              <MessageScrollerContent className="gap-4 p-4 pt-12">
+                {messages.map((message) => (
+                  <MessageScrollerItem
+                    key={message.id}
+                    messageId={message.id}
+                    scrollAnchor={message.role === "user"}
+                  >
+                    <Message align={message.role === "user" ? "end" : "start"}>
+                      <MessageContent>
+                        <Bubble
+                          variant={
+                            message.role === "user" ? "default" : "muted"
+                          }
+                        >
+                          <BubbleContent>{message.text}</BubbleContent>
+                        </Bubble>
+                      </MessageContent>
+                    </Message>
+                  </MessageScrollerItem>
+                ))}
+              </MessageScrollerContent>
+            </MessageScrollerViewport>
+            <MessageScrollerButton />
+          </MessageScroller>
+        </MessageScrollerProvider>
+      </CardContent>
+    </Card>
+  )
+}
+
+function StatusBar() {
+  const { start, end } = useMessageScrollerScrollable()
+  const states = [
+    { label: "At top", on: !start },
+    { label: "At bottom", on: !end },
+    { label: "Older above", on: start },
+    { label: "Newer below", on: end },
+  ]
+
+  return (
+    <div className="pointer-events-none absolute inset-x-3 top-3 z-10 flex flex-wrap gap-1.5">
+      {states.map((state) => (
+        <span
+          key={state.label}
+          data-on={state.on}
+          className="rounded-full border bg-background px-2 py-0.5 text-xs text-muted-foreground data-[on=true]:border-transparent data-[on=true]:bg-primary data-[on=true]:text-primary-foreground"
+        >
+          {state.label}
+        </span>
+      ))}
+    </div>
+  )
+}

From 2bb5cc7bb237eaccef40246bc017beff767f5bbe Mon Sep 17 00:00:00 2001
From: Ryo Aonetsuki <mdsalmanhelp0@gmail.com>
Date: Thu, 29 Oct 2026 10:36:15 +0600
Subject: [PATCH 2/2] Show the scroll-state example on the Message Scroller
 page

Signed-off-by: ryoaonetsuki <ryoaonetsuki@users.noreply.github.com>
---
 src/examples/message-scroller-state.tsx | 101 ------------------------
 1 file changed, 101 deletions(-)
 delete mode 100644 src/examples/message-scroller-state.tsx

diff --git a/src/examples/message-scroller-state.tsx b/src/examples/message-scroller-state.tsx
deleted file mode 100644
index f67c0b2..0000000
--- a/src/examples/message-scroller-state.tsx
+++ /dev/null
@@ -1,101 +0,0 @@
-"use client"
-
-import { Bubble, BubbleContent } from "@/components/ui/bubble"
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from "@/components/ui/card"
-import { Message, MessageContent } from "@/components/ui/message"
-import {
-  MessageScroller,
-  MessageScrollerButton,
-  MessageScrollerContent,
-  MessageScrollerItem,
-  MessageScrollerProvider,
-  MessageScrollerViewport,
-  useMessageScrollerScrollable,
-} from "@/components/ui/message-scroller"
-
-const messages = Array.from({ length: 12 }, (_, index) => ({
-  id: `state-${index + 1}`,
-  role: index % 2 === 0 ? "user" : "assistant",
-  text:
-    index % 2 === 0
-      ? `Check section ${index + 1} of the transcript.`
-      : `Section ${index + 1} is ready. Scroll state updates without rerendering the rows.`,
-})) satisfies Array<{
-  id: string
-  role: "user" | "assistant"
-  text: string
-}>
-
-export function MessageScrollerState() {
-  return (
-    <Card className="mx-auto h-112 w-full max-w-md gap-0">
-      <CardHeader className="border-b">
-        <CardTitle>Scroll State</CardTitle>
-        <CardDescription>
-          Read scroll state in JavaScript with the state hook.
-        </CardDescription>
-      </CardHeader>
-      <CardContent className="min-h-0 flex-1 p-0">
-        <MessageScrollerProvider defaultScrollPosition="start">
-          <MessageScroller>
-            <StatusBar />
-            <MessageScrollerViewport>
-              <MessageScrollerContent className="gap-4 p-4 pt-12">
-                {messages.map((message) => (
-                  <MessageScrollerItem
-                    key={message.id}
-                    messageId={message.id}
-                    scrollAnchor={message.role === "user"}
-                  >
-                    <Message align={message.role === "user" ? "end" : "start"}>
-                      <MessageContent>
-                        <Bubble
-                          variant={
-                            message.role === "user" ? "default" : "muted"
-                          }
-                        >
-                          <BubbleContent>{message.text}</BubbleContent>
-                        </Bubble>
-                      </MessageContent>
-                    </Message>
-                  </MessageScrollerItem>
-                ))}
-              </MessageScrollerContent>
-            </MessageScrollerViewport>
-            <MessageScrollerButton />
-          </MessageScroller>
-        </MessageScrollerProvider>
-      </CardContent>
-    </Card>
-  )
-}
-
-function StatusBar() {
-  const { start, end } = useMessageScrollerScrollable()
-  const states = [
-    { label: "At top", on: !start },
-    { label: "At bottom", on: !end },
-    { label: "Older above", on: start },
-    { label: "Newer below", on: end },
-  ]
-
-  return (
-    <div className="pointer-events-none absolute inset-x-3 top-3 z-10 flex flex-wrap gap-1.5">
-      {states.map((state) => (
-        <span
-          key={state.label}
-          data-on={state.on}
-          className="rounded-full border bg-background px-2 py-0.5 text-xs text-muted-foreground data-[on=true]:border-transparent data-[on=true]:bg-primary data-[on=true]:text-primary-foreground"
-        >
-          {state.label}
-        </span>
-      ))}
-    </div>
-  )
-}