From 43c7cbb21e465185157f04aa97fc8a32e42afcab Mon Sep 17 00:00:00 2001
From: Jeremy <git@jrmyphlmn.com>
Date: Wed, 20 Mar 2024 04:37:08 +0300
Subject: [PATCH] Improve scroll anchor (#275)

---
 app/(chat)/layout.tsx                  |  4 +-
 components/button-scroll-to-bottom.tsx | 20 +++---
 components/chat-list.tsx               | 35 +++++++----
 components/chat-panel.tsx              | 28 ++++++---
 components/chat-scroll-anchor.tsx      | 28 ---------
 components/chat.tsx                    | 34 ++++++----
 components/empty-screen.tsx            |  2 +-
 components/sidebar-item.tsx            |  4 +-
 components/stocks/message.tsx          |  4 +-
 components/stocks/stock-purchase.tsx   |  2 +-
 lib/hooks/use-at-bottom.tsx            | 23 -------
 lib/hooks/use-scroll-anchor.tsx        | 86 ++++++++++++++++++++++++++
 12 files changed, 169 insertions(+), 101 deletions(-)
 delete mode 100644 components/chat-scroll-anchor.tsx
 delete mode 100644 lib/hooks/use-at-bottom.tsx
 create mode 100644 lib/hooks/use-scroll-anchor.tsx

diff --git a/app/(chat)/layout.tsx b/app/(chat)/layout.tsx
index bbdb186..2825d59 100644
--- a/app/(chat)/layout.tsx
+++ b/app/(chat)/layout.tsx
@@ -8,9 +8,7 @@ export default async function ChatLayout({ children }: ChatLayoutProps) {
   return (
     <div className="relative flex h-[calc(100vh_-_theme(spacing.16))] overflow-hidden">
       <SidebarDesktop />
-      <div className="group w-full overflow-auto pl-0 animate-in duration-300 ease-in-out peer-[[data-state=open]]:lg:pl-[250px] peer-[[data-state=open]]:xl:pl-[300px]">
-        {children}
-      </div>
+      {children}
     </div>
   )
 }
diff --git a/components/button-scroll-to-bottom.tsx b/components/button-scroll-to-bottom.tsx
index 436a6c0..3988e73 100644
--- a/components/button-scroll-to-bottom.tsx
+++ b/components/button-scroll-to-bottom.tsx
@@ -3,13 +3,20 @@
 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 = useAtBottom()
+interface ButtonScrollToBottomProps extends ButtonProps {
+  isAtBottom: boolean
+  scrollToBottom: () => void
+}
 
+export function ButtonScrollToBottom({
+  className,
+  isAtBottom,
+  scrollToBottom,
+  ...props
+}: ButtonScrollToBottomProps) {
   return (
     <Button
       variant="outline"
@@ -19,12 +26,7 @@ export function ButtonScrollToBottom({ className, ...props }: ButtonProps) {
         isAtBottom ? 'opacity-0' : 'opacity-100',
         className
       )}
-      onClick={() =>
-        window.scrollTo({
-          top: document.body.offsetHeight,
-          behavior: 'smooth'
-        })
-      }
+      onClick={() => scrollToBottom()}
       {...props}
     >
       <IconArrowDown />
diff --git a/components/chat-list.tsx b/components/chat-list.tsx
index af744c6..80821a1 100644
--- a/components/chat-list.tsx
+++ b/components/chat-list.tsx
@@ -2,6 +2,7 @@ import { Separator } from '@/components/ui/separator'
 import { UIState } from '@/lib/chat/actions'
 import { Session } from '@/lib/types'
 import Link from 'next/link'
+import { ExclamationTriangleIcon } from '@radix-ui/react-icons'
 
 export interface ChatList {
   messages: UIState
@@ -17,19 +18,27 @@ export function ChatList({ messages, session, isShared }: ChatList) {
   return (
     <div className="relative mx-auto max-w-2xl px-4">
       {!isShared && !session ? (
-        <div className="mb-8 rounded-lg border bg-white p-4 dark:bg-zinc-950">
-          <p className="text-muted-foreground leading-normal">
-            Please{' '}
-            <Link href="/login" className="underline">
-              log in
-            </Link>{' '}
-            or{' '}
-            <Link href="/signup" className="underline">
-              sign up
-            </Link>{' '}
-            to save and revisit your chat history!
-          </p>
-        </div>
+        <>
+          <div className="group relative mb-4 flex items-start md:-ml-12">
+            <div className="bg-background flex size-[25px] shrink-0 select-none items-center justify-center rounded-md border shadow-sm">
+              <ExclamationTriangleIcon />
+            </div>
+            <div className="ml-4 flex-1 space-y-2 overflow-hidden px-1">
+              <p className="text-muted-foreground leading-normal">
+                Please{' '}
+                <Link href="/login" className="underline">
+                  log in
+                </Link>{' '}
+                or{' '}
+                <Link href="/signup" className="underline">
+                  sign up
+                </Link>{' '}
+                to save and revisit your chat history!
+              </p>
+            </div>
+          </div>
+          <Separator className="my-4" />
+        </>
       ) : null}
 
       {messages.map((message, index) => (
diff --git a/components/chat-panel.tsx b/components/chat-panel.tsx
index 020b142..48df7a7 100644
--- a/components/chat-panel.tsx
+++ b/components/chat-panel.tsx
@@ -17,9 +17,18 @@ export interface ChatPanelProps {
   title?: string
   input: string
   setInput: (value: string) => void
+  isAtBottom: boolean
+  scrollToBottom: () => void
 }
 
-export function ChatPanel({ id, title, input, setInput }: ChatPanelProps) {
+export function ChatPanel({
+  id,
+  title,
+  input,
+  setInput,
+  isAtBottom,
+  scrollToBottom
+}: ChatPanelProps) {
   const [aiState] = useAIState()
   const [messages, setMessages] = useUIState<typeof AI>()
   const { submitUserMessage } = useActions()
@@ -33,24 +42,27 @@ export function ChatPanel({ id, title, input, setInput }: ChatPanelProps) {
     },
     {
       heading: 'What is the price of',
-      subheading: 'DOGE in the stock market?',
-      message: 'What is the price of DOGE in the stock market?'
+      subheading: '$DOGE right now?',
+      message: 'What is the price of $DOGE right now?'
     },
     {
       heading: 'I would like to buy',
-      subheading: '42 DOGE coins',
-      message: `I would like to buy 42 DOGE coins`
+      subheading: '42 $DOGE',
+      message: `I would like to buy 42 $DOGE`
     },
     {
       heading: 'What are some',
-      subheading: `recent events about DOGE?`,
-      message: `What are some recent events about DOGE?`
+      subheading: `recent events about $DOGE?`,
+      message: `What are some recent events about $DOGE?`
     }
   ]
 
   return (
     <div className="fixed inset-x-0 bottom-0 w-full bg-gradient-to-b from-muted/30 from-0% to-muted/30 to-50% duration-300 ease-in-out animate-in dark:from-background/10 dark:from-10% dark:to-background/80 peer-[[data-state=open]]:group-[]:lg:pl-[250px] peer-[[data-state=open]]:group-[]:xl:pl-[300px]">
-      <ButtonScrollToBottom />
+      <ButtonScrollToBottom
+        isAtBottom={isAtBottom}
+        scrollToBottom={scrollToBottom}
+      />
 
       <div className="mx-auto sm:max-w-2xl sm:px-4">
         <div className="mb-4 grid grid-cols-2 gap-2 px-4 sm:px-0">
diff --git a/components/chat-scroll-anchor.tsx b/components/chat-scroll-anchor.tsx
deleted file mode 100644
index 29b6c21..0000000
--- a/components/chat-scroll-anchor.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-'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 -125px 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 2b7cc20..a8d188f 100644
--- a/components/chat.tsx
+++ b/components/chat.tsx
@@ -4,13 +4,13 @@ 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'
 import { useLocalStorage } from '@/lib/hooks/use-local-storage'
 import { useEffect, useState } from 'react'
 import { useUIState, useAIState } from 'ai/rsc'
 import { Session } from '@/lib/types'
 import { usePathname, useRouter } from 'next/navigation'
 import { Message } from '@/lib/chat/actions'
+import { useScrollAnchor } from '@/lib/hooks/use-scroll-anchor'
 import { toast } from 'sonner'
 
 export interface ChatProps extends React.ComponentProps<'div'> {
@@ -26,7 +26,6 @@ export function Chat({ id, className, session, missingKeys }: ChatProps) {
   const [input, setInput] = useState('')
   const [messages] = useUIState()
   const [aiState] = useAIState()
-  const isLoading = true
 
   const [_, setNewChatId] = useLocalStorage('newChatId', id)
 
@@ -55,19 +54,32 @@ export function Chat({ id, className, session, missingKeys }: ChatProps) {
     })
   }, [missingKeys])
 
+  const { messagesRef, scrollRef, visibilityRef, isAtBottom, scrollToBottom } =
+    useScrollAnchor()
+
   return (
-    <>
-      <div className={cn('pb-[200px] pt-4 md:pt-10', className)}>
+    <div
+      className="group w-full overflow-auto pl-0 peer-[[data-state=open]]:lg:pl-[250px] peer-[[data-state=open]]:xl:pl-[300px]"
+      ref={scrollRef}
+    >
+      <div
+        className={cn('pb-[200px] pt-4 md:pt-10', className)}
+        ref={messagesRef}
+      >
         {messages.length ? (
-          <>
-            <ChatList messages={messages} isShared={false} session={session} />
-            <ChatScrollAnchor trackVisibility={isLoading} />
-          </>
+          <ChatList messages={messages} isShared={false} session={session} />
         ) : (
-          <EmptyScreen setInput={setInput} />
+          <EmptyScreen />
         )}
+        <div className="h-px w-full" ref={visibilityRef} />
       </div>
-      <ChatPanel id={id} input={input} setInput={setInput} />
-    </>
+      <ChatPanel
+        id={id}
+        input={input}
+        setInput={setInput}
+        isAtBottom={isAtBottom}
+        scrollToBottom={scrollToBottom}
+      />
+    </div>
   )
 }
diff --git a/components/empty-screen.tsx b/components/empty-screen.tsx
index 663f751..bb70d95 100644
--- a/components/empty-screen.tsx
+++ b/components/empty-screen.tsx
@@ -19,7 +19,7 @@ const exampleMessages = [
   }
 ]
 
-export function EmptyScreen({ setInput }: Pick<UseChatHelpers, 'setInput'>) {
+export function EmptyScreen() {
   return (
     <div className="mx-auto max-w-2xl px-4">
       <div className="flex flex-col gap-2 rounded-lg border bg-background p-8">
diff --git a/components/sidebar-item.tsx b/components/sidebar-item.tsx
index d5d27a0..fc7020b 100644
--- a/components/sidebar-item.tsx
+++ b/components/sidebar-item.tsx
@@ -60,12 +60,12 @@ export function SidebarItem({ index, chat, children }: SidebarItemProps) {
               tabIndex={-1}
               className="focus:bg-muted focus:ring-1 focus:ring-ring"
             >
-              <IconUsers className="mr-2" />
+              <IconUsers className="mr-2 mt-1 text-zinc-500" />
             </TooltipTrigger>
             <TooltipContent>This is a shared chat.</TooltipContent>
           </Tooltip>
         ) : (
-          <IconMessage className="mr-2" />
+          <IconMessage className="mr-2 mt-1 text-zinc-500" />
         )}
       </div>
       <Link
diff --git a/components/stocks/message.tsx b/components/stocks/message.tsx
index bba6724..5c7e7ca 100644
--- a/components/stocks/message.tsx
+++ b/components/stocks/message.tsx
@@ -18,7 +18,7 @@ export function UserMessage({ children }: { children: React.ReactNode }) {
       <div className="flex size-[25px] shrink-0 select-none items-center justify-center rounded-md border bg-background shadow-sm">
         <IconUser />
       </div>
-      <div className="ml-4 flex-1 space-y-2 overflow-hidden px-1">
+      <div className="ml-4 flex-1 space-y-2 overflow-hidden pl-2">
         {children}
       </div>
     </div>
@@ -103,7 +103,7 @@ export function BotCard({
       >
         <IconOpenAI />
       </div>
-      <div className="ml-4 flex-1 px-1">{children}</div>
+      <div className="ml-4 flex-1 pl-2">{children}</div>
     </div>
   )
 }
diff --git a/components/stocks/stock-purchase.tsx b/components/stocks/stock-purchase.tsx
index f0877f8..8acb8e3 100644
--- a/components/stocks/stock-purchase.tsx
+++ b/components/stocks/stock-purchase.tsx
@@ -118,7 +118,7 @@ export function Purchase({
           </div>
 
           <button
-            className="mt-6 w-full rounded-lg bg-green-500 px-4 py-2 font-bold text-zinc-900 hover:bg-green-600"
+            className="mt-6 w-full rounded-lg bg-green-400 px-4 py-2 font-bold text-zinc-900 hover:bg-green-500"
             onClick={async () => {
               const response = await confirmPurchase(symbol, price, value)
               setPurchasingUI(response.purchasingUI)
diff --git a/lib/hooks/use-at-bottom.tsx b/lib/hooks/use-at-bottom.tsx
deleted file mode 100644
index d37c8cf..0000000
--- a/lib/hooks/use-at-bottom.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-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/lib/hooks/use-scroll-anchor.tsx b/lib/hooks/use-scroll-anchor.tsx
new file mode 100644
index 0000000..a524027
--- /dev/null
+++ b/lib/hooks/use-scroll-anchor.tsx
@@ -0,0 +1,86 @@
+import { useCallback, useEffect, useRef, useState } from 'react'
+
+export const useScrollAnchor = () => {
+  const messagesRef = useRef<HTMLDivElement>(null)
+  const scrollRef = useRef<HTMLDivElement>(null)
+  const visibilityRef = useRef<HTMLDivElement>(null)
+
+  const [isAtBottom, setIsAtBottom] = useState(true)
+  const [isVisible, setIsVisible] = useState(false)
+
+  const scrollToBottom = useCallback(() => {
+    if (messagesRef.current) {
+      messagesRef.current.scrollIntoView({
+        block: 'end',
+        behavior: 'smooth'
+      })
+    }
+  }, [])
+
+  useEffect(() => {
+    if (messagesRef.current) {
+      if (isAtBottom && !isVisible) {
+        messagesRef.current.scrollIntoView({
+          block: 'end'
+        })
+      }
+    }
+  }, [isAtBottom, isVisible])
+
+  useEffect(() => {
+    const { current } = scrollRef
+
+    if (current) {
+      const handleScroll = (event: Event) => {
+        const target = event.target as HTMLDivElement
+        const offset = 25
+        const isAtBottom =
+          target.scrollTop + target.clientHeight >= target.scrollHeight - offset
+
+        setIsAtBottom(isAtBottom)
+      }
+
+      current.addEventListener('scroll', handleScroll, {
+        passive: true
+      })
+
+      return () => {
+        current.removeEventListener('scroll', handleScroll)
+      }
+    }
+  }, [])
+
+  useEffect(() => {
+    if (visibilityRef.current) {
+      let observer = new IntersectionObserver(
+        entries => {
+          entries.forEach(entry => {
+            if (entry.isIntersecting) {
+              setIsVisible(true)
+            } else {
+              setIsVisible(false)
+            }
+          })
+        },
+        {
+          rootMargin: '0px 0px -150px 0px'
+        }
+      )
+
+      observer.observe(visibilityRef.current)
+
+      return () => {
+        observer.disconnect()
+      }
+    }
+  })
+
+  return {
+    messagesRef,
+    scrollRef,
+    visibilityRef,
+    scrollToBottom,
+    isAtBottom,
+    isVisible
+  }
+}