feat: implement scroll to bottom

components/button-scroll-to-bottom.tsx

@@ -0,0 +1,48 @@
+'use client'
+
+import * as React from 'react'
+import { ArrowDown } from 'lucide-react'
+
+import { cn } from '@/lib/utils'
+import { Button, type ButtonProps } from '@/components/ui/button'
+
+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)
+    }
+  }, [])
+
+  return (
+    <Button
+      variant="outline"
+      size="icon"
+      className={cn(
+        'absolute right-4 top-1 z-10 bg-background transition-opacity duration-300 sm:right-8 md:top-2',
+        isAtBottom ? 'opacity-0' : 'opacity-100',
+        className
+      )}
+      onClick={() =>
+        window.scrollTo({
+          top: document.body.offsetHeight,
+          behavior: 'smooth'
+        })
+      }
+      {...props}
+    >
+      <ArrowDown className="h-4 w-4" />
+      <span className="sr-only">Scroll to bottom</span>
+    </Button>
+  )
+}

components/chat-panel.tsx

@@ -6,6 +6,7 @@ import { RefreshCcw, StopCircle } from 'lucide-react'
 import { Button } from '@/components/ui/button'
 import { ExternalLink } from '@/components/external-link'
 import { PromptForm } from '@/components/prompt-form'
+import { ButtonScrollToBottom } from '@/components/button-scroll-to-bottom'
 
 export interface ChatPanelProps
   extends Pick<
@@ -24,15 +25,16 @@ export function ChatPanel({
 }: ChatPanelProps) {
   return (
     <div className="fixed inset-x-0 bottom-0 bg-gradient-to-b from-muted/10 from-10% to-muted/30 to-50%">
+      <ButtonScrollToBottom />
       <div className="mx-auto sm:max-w-2xl sm:px-4">
-        <div className="flex items-center justify-center py-2">
+        <div className="flex h-10 items-center justify-center">
           {isLoading ? (
             <Button
               variant="outline"
               onClick={() => stop()}
               className="bg-background"
             >
-              <StopCircle className="w-4 h-4 mr-2" />
+              <StopCircle className="mr-2 h-4 w-4" />
               Stop generating
             </Button>
           ) : (
@@ -42,13 +44,13 @@ export function ChatPanel({
                 onClick={() => reload()}
                 className="bg-background"
               >
-                <RefreshCcw className="w-4 h-4 mr-2" />
+                <RefreshCcw className="mr-2 h-4 w-4" />
                 Regenerate response
               </Button>
             )
           )}
         </div>
-        <div className="p-4 space-y-4 border-t shadow-lg bg-background sm:rounded-t-xl sm:border">
+        <div className="space-y-4 border-t bg-background px-4 py-2 shadow-lg sm:rounded-t-xl sm:border md:py-4">
           <PromptForm
             onSubmit={value => {
               append({
@@ -58,7 +60,7 @@ export function ChatPanel({
             }}
             isLoading={isLoading}
           />
-          <p className="hidden px-2 text-xs leading-normal text-center text-muted-foreground sm:block">
+          <p className="hidden px-2 text-center text-xs leading-normal text-muted-foreground sm:block">
             Open source AI chatbot app built with{' '}
             <ExternalLink href="https://nextjs.org">Next.js</ExternalLink> and{' '}
             <ExternalLink href="https://vercel.com/storage/kv">

components/chat.tsx

@@ -18,7 +18,7 @@ export function Chat({ id, initialMessages }: ChatProps) {
   })
 
   return (
-    <div className="h-full w-full overflow-auto bg-muted/50 pb-[200px] pt-4 md:pt-10">
+    <div className="pb-[200px] pt-4 md:pt-10">
       <ChatList messages={messages} />
       <ChatPanel
         id={id}

components/prompt-form.tsx

@@ -50,14 +50,14 @@ export function PromptForm({ onSubmit, isLoading }: PromptProps) {
       ref={formRef}
     >
       <TooltipProvider>
-        <div className="relative flex w-full grow flex-col overflow-hidden bg-background px-12 sm:rounded-md sm:border">
+        <div className="relative flex w-full grow flex-col overflow-hidden bg-background px-8 sm:rounded-md sm:border sm:px-12">
           <Tooltip>
             <TooltipTrigger asChild>
               <Link
                 href="/"
                 className={cn(
                   buttonVariants({ size: 'sm', variant: 'outline' }),
-                  'absolute left-4 top-4 h-8 w-8 rounded-full bg-background p-0'
+                  'absolute left-0 top-4 h-8 w-8 rounded-full bg-background p-0 sm:left-4'
                 )}
               >
                 <Plus className="h-4 w-4" />
@@ -75,9 +75,9 @@ export function PromptForm({ onSubmit, isLoading }: PromptProps) {
             onChange={e => setInput(e.target.value)}
             placeholder="Send a message."
             spellCheck={false}
-            className="min-h-[60px] w-full resize-none bg-transparent px-4 py-[1.4rem] focus-within:outline-none sm:text-sm"
+            className="min-h-[60px] w-full resize-none bg-transparent px-4 py-[1.3rem] focus-within:outline-none sm:text-sm"
           />
-          <div className="absolute right-4 top-4">
+          <div className="absolute right-0 top-4 sm:right-4">
             <Tooltip>
               <TooltipTrigger asChild>
                 <Button