From b8d3ba85f5507fb78bbf623aa84a66508b7cbfdd Mon Sep 17 00:00:00 2001
From: shadcn <m@shadcn.com>
Date: Thu, 15 Jun 2023 15:27:41 +0400
Subject: [PATCH] feat: implement auto scroll

---
 components/button-scroll-to-bottom.tsx | 18 ++--------------
 components/chat-scroll-anchor.tsx      | 29 ++++++++++++++++++++++++++
 components/chat.tsx                    |  6 +++++-
 lib/hooks/use-at-bottom.tsx            | 23 ++++++++++++++++++++
 package.json                           |  1 +
 pnpm-lock.yaml                         | 11 ++++++++++
 6 files changed, 71 insertions(+), 17 deletions(-)
 create mode 100644 components/chat-scroll-anchor.tsx
 create mode 100644 lib/hooks/use-at-bottom.tsx

diff --git a/components/button-scroll-to-bottom.tsx b/components/button-scroll-to-bottom.tsx
index b94f34a..436a6c0 100644
--- a/components/button-scroll-to-bottom.tsx
+++ b/components/button-scroll-to-bottom.tsx
@@ -3,26 +3,12 @@
 import * as React from 'react'
 
 import { cn } from '@/lib/utils'
+import { useAtBottom } from '@/lib/hooks/use-at-bottom'
 import { Button, type ButtonProps } from '@/components/ui/button'
 import { IconArrowDown } from '@/components/ui/icons'
 
 export function ButtonScrollToBottom({ className, ...props }: ButtonProps) {
-  const [isAtBottom, setIsAtBottom] = React.useState(false)
-
-  React.useEffect(() => {
-    const handleScroll = () => {
-      setIsAtBottom(
-        window.innerHeight + window.scrollY > document.body.offsetHeight - 100
-      )
-    }
-
-    window.addEventListener('scroll', handleScroll, { passive: true })
-    handleScroll()
-
-    return () => {
-      window.removeEventListener('scroll', handleScroll)
-    }
-  }, [])
+  const isAtBottom = useAtBottom()
 
   return (
     <Button
diff --git a/components/chat-scroll-anchor.tsx b/components/chat-scroll-anchor.tsx
new file mode 100644
index 0000000..ac809f4
--- /dev/null
+++ b/components/chat-scroll-anchor.tsx
@@ -0,0 +1,29 @@
+'use client'
+
+import * as React from 'react'
+import { useInView } from 'react-intersection-observer'
+
+import { useAtBottom } from '@/lib/hooks/use-at-bottom'
+
+interface ChatScrollAnchorProps {
+  trackVisibility?: boolean
+}
+
+export function ChatScrollAnchor({ trackVisibility }: ChatScrollAnchorProps) {
+  const isAtBottom = useAtBottom()
+  const { ref, entry, inView } = useInView({
+    trackVisibility,
+    delay: 100,
+    rootMargin: '0px 0px -150px 0px'
+  })
+
+  React.useEffect(() => {
+    if (isAtBottom && trackVisibility && !inView) {
+      entry?.target.scrollIntoView({
+        block: 'start'
+      })
+    }
+  }, [inView, entry, isAtBottom, trackVisibility])
+
+  return <div ref={ref} className="h-px w-full" />
+}
diff --git a/components/chat.tsx b/components/chat.tsx
index 4e097c9..165a77b 100644
--- a/components/chat.tsx
+++ b/components/chat.tsx
@@ -6,6 +6,7 @@ import { cn } from '@/lib/utils'
 import { ChatList } from '@/components/chat-list'
 import { ChatPanel } from '@/components/chat-panel'
 import { EmptyScreen } from '@/components/empty-screen'
+import { ChatScrollAnchor } from '@/components/chat-scroll-anchor'
 
 export interface ChatProps extends React.ComponentProps<'div'> {
   initialMessages?: Message[]
@@ -26,7 +27,10 @@ export function Chat({ id, initialMessages, className }: ChatProps) {
     <>
       <div className={cn('pb-[200px] pt-4 md:pt-10', className)}>
         {messages.length ? (
-          <ChatList messages={messages} />
+          <>
+            <ChatList messages={messages} />
+            <ChatScrollAnchor trackVisibility={isLoading} />
+          </>
         ) : (
           <EmptyScreen setInput={setInput} />
         )}
diff --git a/lib/hooks/use-at-bottom.tsx b/lib/hooks/use-at-bottom.tsx
new file mode 100644
index 0000000..98b1fdb
--- /dev/null
+++ b/lib/hooks/use-at-bottom.tsx
@@ -0,0 +1,23 @@
+import * as React from 'react'
+
+export function useAtBottom(offset = 0) {
+  const [isAtBottom, setIsAtBottom] = React.useState(false)
+
+  React.useEffect(() => {
+    const handleScroll = () => {
+      setIsAtBottom(
+        window.innerHeight + window.scrollY ===
+          document.body.offsetHeight - offset
+      )
+    }
+
+    window.addEventListener('scroll', handleScroll, { passive: true })
+    handleScroll()
+
+    return () => {
+      window.removeEventListener('scroll', handleScroll)
+    }
+  }, [offset])
+
+  return isAtBottom
+}
diff --git a/package.json b/package.json
index 8d63969..6da22d3 100644
--- a/package.json
+++ b/package.json
@@ -34,6 +34,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-hot-toast": "^2.4.1",
+    "react-intersection-observer": "^9.4.4",
     "react-markdown": "^8.0.7",
     "react-syntax-highlighter": "^15.5.0",
     "react-textarea-autosize": "^8.4.1",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index c465a4f..0fd8386 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -68,6 +68,9 @@ dependencies:
   react-hot-toast:
     specifier: ^2.4.1
     version: 2.4.1(csstype@3.1.2)(react-dom@18.2.0)(react@18.2.0)
+  react-intersection-observer:
+    specifier: ^9.4.4
+    version: 9.4.4(react@18.2.0)
   react-markdown:
     specifier: ^8.0.7
     version: 8.0.7(@types/react@18.2.6)(react@18.2.0)
@@ -4412,6 +4415,14 @@ packages:
       - csstype
     dev: false
 
+  /react-intersection-observer@9.4.4(react@18.2.0):
+    resolution: {integrity: sha512-KQr8ezJscRSQZR0/TjogG4mZttCzdPZj8fhDzAK+xrPYOVvFjabRNy+4EY3UhS3fJaJyIedGjA8y4yKX+nc08w==}
+    peerDependencies:
+      react: ^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0
+    dependencies:
+      react: 18.2.0
+    dev: false
+
   /react-is@16.13.1:
     resolution: {integrity: sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==}