snapshot of https://github.com/shadcn-ui/ui.git (main, 2026-09-15; blobs > 131072B omitted)

2026-09-15 22:44:43 +05:00
commit 1416db152c
5727 changed files with 630238 additions and 0 deletions
--- a/apps/v4/examples/base/message-scroller-state.tsx
+++ b/apps/v4/examples/base/message-scroller-state.tsx
@@ -0,0 +1,101 @@
+"use client"
+
+import { Bubble, BubbleContent } from "@/styles/base-rhea/ui/bubble"
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/styles/base-rhea/ui/card"
+import { Message, MessageContent } from "@/styles/base-rhea/ui/message"
+import {
+  MessageScroller,
+  MessageScrollerButton,
+  MessageScrollerContent,
+  MessageScrollerItem,
+  MessageScrollerProvider,
+  MessageScrollerViewport,
+  useMessageScrollerScrollable,
+} from "@/styles/base-rhea/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>
+  )
+}