ui: mobile chatbot improvements (#1155)

app/globals.css

@@ -20,6 +20,18 @@
     .text-balance {
         text-wrap: balance;
     }
+    
+    .-webkit-overflow-scrolling-touch {
+        -webkit-overflow-scrolling: touch;
+    }
+    
+    .touch-pan-y {
+        touch-action: pan-y;
+    }
+    
+    .overscroll-behavior-contain {
+        overscroll-behavior: contain;
+    }
 }
 
 @layer base {
@@ -101,6 +113,12 @@
 
     body {
         @apply bg-background text-foreground;
+        overflow-x: hidden;
+        position: relative;
+    }
+    
+    html {
+        overflow-x: hidden;
     }
 }
 
@@ -162,3 +180,33 @@
 .suggestion-highlight {
     @apply bg-blue-200 hover:bg-blue-300 dark:hover:bg-blue-400/50 dark:text-blue-50 dark:bg-blue-500/40;
 }
+
+/* minimal scrollbar styling */
+::-webkit-scrollbar {
+    width: 6px;
+    height: 6px;
+}
+
+::-webkit-scrollbar-track {
+    background: transparent;
+}
+
+::-webkit-scrollbar-thumb {
+    background: hsl(var(--border));
+    border-radius: 3px;
+    transition: background 0.2s ease;
+}
+
+::-webkit-scrollbar-thumb:hover {
+    background: hsl(var(--muted-foreground) / 0.5);
+}
+
+::-webkit-scrollbar-corner {
+    background: transparent;
+}
+
+/* firefox scrollbar styling */
+* {
+    scrollbar-width: thin;
+    scrollbar-color: hsl(var(--border)) transparent;
+}

components/app-sidebar.tsx

@@ -43,7 +43,7 @@ export function AppSidebar({ user }: { user: User | undefined }) {
                 <Button
                   variant="ghost"
                   type="button"
-                  className="p-2 h-fit"
+                  className="p-1 h-8 md:p-2 md:h-fit"
                   onClick={() => {
                     setOpenMobile(false);
                     router.push('/');
@@ -53,7 +53,7 @@ export function AppSidebar({ user }: { user: User | undefined }) {
                   <PlusIcon />
                 </Button>
               </TooltipTrigger>
-              <TooltipContent align="end">New Chat</TooltipContent>
+              <TooltipContent align="end" className="hidden md:block">New Chat</TooltipContent>
             </Tooltip>
           </div>
         </SidebarMenu>

components/chat-header.tsx

@@ -9,7 +9,6 @@ import { Button } from '@/components/ui/button';
 import { PlusIcon, VercelIcon } from './icons';
 import { useSidebar } from './ui/sidebar';
 import { memo } from 'react';
-import { Tooltip, TooltipContent, TooltipTrigger } from './ui/tooltip';
 import { type VisibilityType, VisibilitySelector } from './visibility-selector';
 import type { Session } from 'next-auth';
 
@@ -34,8 +33,6 @@ function PureChatHeader({
       <SidebarToggle />
 
       {(!open || windowWidth < 768) && (
-        <Tooltip>
-          <TooltipTrigger asChild>
         <Button
           variant="outline"
           className="order-2 md:order-1 md:px-2 px-2 md:h-fit ml-auto md:ml-0"
@@ -47,9 +44,6 @@ function PureChatHeader({
           <PlusIcon />
           <span className="md:sr-only">New Chat</span>
         </Button>
-          </TooltipTrigger>
-          <TooltipContent>New Chat</TooltipContent>
-        </Tooltip>
       )}
 
       {!isReadonly && (

components/chat.tsx

@@ -6,7 +6,7 @@ import { useEffect, useState } from 'react';
 import useSWR, { useSWRConfig } from 'swr';
 import { ChatHeader } from '@/components/chat-header';
 import type { Vote } from '@/lib/db/schema';
-import { fetcher, fetchWithErrorHandlers, generateUUID, cn } from '@/lib/utils';
+import { fetcher, fetchWithErrorHandlers, generateUUID } from '@/lib/utils';
 import { Artifact } from './artifact';
 import { MultimodalInput } from './multimodal-input';
 import { Messages } from './messages';
@@ -128,7 +128,7 @@ export function Chat({
 
   return (
     <>
-      <div className="flex flex-col min-w-0 h-dvh bg-background">
+      <div className="flex flex-col min-w-0 h-dvh bg-background touch-pan-y overscroll-behavior-contain">
         <ChatHeader
           chatId={id}
           selectedVisibilityType={initialVisibilityType}
@@ -145,9 +145,10 @@ export function Chat({
           regenerate={regenerate}
           isReadonly={isReadonly}
           isArtifactVisible={isArtifactVisible}
+          selectedModelId={initialChatModel}
         />
 
-        <div className="sticky bottom-0 flex gap-2 px-4 pb-4 mx-auto w-full bg-background md:pb-6 md:max-w-3xl z-[1] border-t-0">
+        <div className="sticky bottom-0 flex gap-2 px-2 md:px-4 pb-3 md:pb-4 mx-auto w-full bg-background max-w-4xl z-[1] border-t-0">
           {!isReadonly && (
             <MultimodalInput
               chatId={id}

components/elements/actions.tsx

@@ -13,7 +13,7 @@ import type { ComponentProps } from 'react';
 export type ActionsProps = ComponentProps<'div'>;
 
 export const Actions = ({ className, children, ...props }: ActionsProps) => (
-  <div className={cn('flex items-center gap-1', className)} {...props}>
+  <div className={cn('flex gap-1 items-center', className)} {...props}>
     {children}
   </div>
 );

components/elements/conversation.tsx

@@ -11,7 +11,10 @@ export type ConversationProps = ComponentProps<typeof StickToBottom>;
 
 export const Conversation = ({ className, ...props }: ConversationProps) => (
   <StickToBottom
-    className={cn('relative flex-1 overflow-y-auto', className)}
+    className={cn(
+      'overflow-y-auto relative flex-1 touch-pan-y will-change-scroll',
+      className,
+    )}
     initial="smooth"
     resize="smooth"
     role="log"
@@ -46,7 +49,7 @@ export const ConversationScrollButton = ({
     !isAtBottom && (
       <Button
         className={cn(
-          'absolute bottom-4 left-[50%] translate-x-[-50%] rounded-full',
+          'absolute bottom-4 left-1/2 -translate-x-1/2 rounded-full z-10 shadow-lg',
           className,
         )}
         onClick={handleScrollToBottom}

components/elements/reasoning.tsx

@@ -37,7 +37,7 @@ export type ReasoningProps = ComponentProps<typeof Collapsible> & {
   duration?: number;
 };
 
-const AUTO_CLOSE_DELAY = 1000;
+const AUTO_CLOSE_DELAY = 500;
 const MS_IN_S = 1000;
 
 export const Reasoning = memo(
@@ -98,7 +98,7 @@ export const Reasoning = memo(
         value={{ isStreaming, isOpen, setIsOpen, duration }}
       >
         <Collapsible
-          className={cn('not-prose mb-4', className)}
+          className={cn('not-prose', className)}
           onOpenChange={handleOpenChange}
           open={isOpen}
           {...props}
@@ -119,7 +119,7 @@ export const ReasoningTrigger = memo(
     return (
       <CollapsibleTrigger
         className={cn(
-          'flex items-center gap-2 text-muted-foreground text-sm',
+          'flex items-center gap-1.5 text-muted-foreground text-xs hover:text-foreground transition-colors',
           className,
         )}
         {...props}
@@ -130,11 +130,11 @@ export const ReasoningTrigger = memo(
             {isStreaming || duration === 0 ? (
               <p>Thinking...</p>
             ) : (
-              <p>Thought for {duration} seconds</p>
+              <p>Thought for {duration}s</p>
             )}
             <ChevronDownIcon
               className={cn(
-                'size-4 text-muted-foreground transition-transform',
+                'size-3 text-muted-foreground transition-transform',
                 isOpen ? 'rotate-180' : 'rotate-0',
               )}
             />
@@ -155,8 +155,8 @@ export const ReasoningContent = memo(
   ({ className, children, ...props }: ReasoningContentProps) => (
     <CollapsibleContent
       className={cn(
-        'mt-4 text-sm',
+        'mt-2 text-xs text-muted-foreground',
-        'data-[state=closed]:fade-out-0 data-[state=closed]:slide-out-to-top-2 data-[state=open]:slide-in-from-top-2 text-popover-foreground outline-none data-[state=closed]:animate-out data-[state=open]:animate-in',
+        'data-[state=closed]:fade-out-0 data-[state=closed]:slide-out-to-top-2 data-[state=open]:slide-in-from-top-2 outline-none data-[state=closed]:animate-out data-[state=open]:animate-in',
         className,
       )}
       {...props}

components/greeting.tsx

@@ -4,14 +4,14 @@ export const Greeting = () => {
   return (
     <div
       key="overview"
-      className="max-w-3xl mx-auto md:mt-20 px-8 size-full flex flex-col justify-center"
+      className="max-w-3xl mx-auto mt-4 md:mt-16 px-4 md:px-8 size-full flex flex-col justify-center"
     >
       <motion.div
         initial={{ opacity: 0, y: 10 }}
         animate={{ opacity: 1, y: 0 }}
         exit={{ opacity: 0, y: 10 }}
         transition={{ delay: 0.5 }}
-        className="text-2xl font-semibold"
+        className="text-xl md:text-2xl font-semibold"
       >
         Hello there!
       </motion.div>
@@ -20,7 +20,7 @@ export const Greeting = () => {
         animate={{ opacity: 1, y: 0 }}
         exit={{ opacity: 0, y: 10 }}
         transition={{ delay: 0.6 }}
-        className="text-2xl text-zinc-500"
+        className="text-xl md:text-2xl text-zinc-500"
       >
         How can I help you today?
       </motion.div>

components/message-actions.tsx

@@ -3,7 +3,7 @@ import { useCopyToClipboard } from 'usehooks-ts';
 
 import type { Vote } from '@/lib/db/schema';
 
-import { CopyIcon, ThumbDownIcon, ThumbUpIcon } from './icons';
+import { CopyIcon, ThumbDownIcon, ThumbUpIcon, PencilEditIcon } from './icons';
 import { Actions, Action } from './elements/actions';
 import { memo } from 'react';
 import equal from 'fast-deep-equal';
@@ -15,29 +15,26 @@ export function PureMessageActions({
   message,
   vote,
   isLoading,
+  setMode,
 }: {
   chatId: string;
   message: ChatMessage;
   vote: Vote | undefined;
   isLoading: boolean;
+  setMode?: (mode: 'view' | 'edit') => void;
 }) {
   const { mutate } = useSWRConfig();
   const [_, copyToClipboard] = useCopyToClipboard();
 
   if (isLoading) return null;
-  if (message.role === 'user') return null;
 
-  return (
-    <Actions>
-        <Action
-          tooltip="Copy"
-          onClick={async () => {
   const textFromParts = message.parts
     ?.filter((part) => part.type === 'text')
     .map((part) => part.text)
     .join('\n')
     .trim();
 
+  const handleCopy = async () => {
     if (!textFromParts) {
       toast.error("There's no text to copy!");
       return;
@@ -45,8 +42,33 @@ export function PureMessageActions({
 
     await copyToClipboard(textFromParts);
     toast.success('Copied to clipboard!');
-          }}
+  };
+
+  // User messages get edit (on hover) and copy actions
+  if (message.role === 'user') {
+    return (
+      <Actions className="justify-end -mr-0.5">
+        <div className="relative">
+          {setMode && (
+            <Action
+              tooltip="Edit"
+              onClick={() => setMode('edit')}
+              className="absolute top-0 -left-10 opacity-0 transition-opacity group-hover/message:opacity-100"
             >
+              <PencilEditIcon />
+            </Action>
+          )}
+          <Action tooltip="Copy" onClick={handleCopy}>
+            <CopyIcon />
+          </Action>
+        </div>
+      </Actions>
+    );
+  }
+
+  return (
+    <Actions className="-ml-0.5">
+      <Action tooltip="Copy" onClick={handleCopy}>
         <CopyIcon />
       </Action>
 

components/message.tsx

@@ -1,10 +1,9 @@
 'use client';
-import cx from 'classnames';
+import { motion } from 'framer-motion';
-import { AnimatePresence, motion } from 'framer-motion';
 import { memo, useState } from 'react';
 import type { Vote } from '@/lib/db/schema';
 import { DocumentToolResult } from './document';
-import { PencilEditIcon, SparklesIcon, LoaderIcon } from './icons';
+import { SparklesIcon } from './icons';
 import { Response } from './elements/response';
 import { MessageContent } from './elements/message';
 import {
@@ -19,8 +18,6 @@ import { PreviewAttachment } from './preview-attachment';
 import { Weather } from './weather';
 import equal from 'fast-deep-equal';
 import { cn, sanitizeText } from '@/lib/utils';
-import { Button } from './ui/button';
-import { Tooltip, TooltipContent, TooltipTrigger } from './ui/tooltip';
 import { MessageEditor } from './message-editor';
 import { DocumentPreview } from './document-preview';
 import { MessageReasoning } from './message-reasoning';
@@ -28,9 +25,6 @@ import type { UseChatHelpers } from '@ai-sdk/react';
 import type { ChatMessage } from '@/lib/types';
 import { useDataStream } from './data-stream-provider';
 
-// Type narrowing is handled by TypeScript's control flow analysis
-// The AI SDK provides proper discriminated unions for tool calls
-
 const PurePreviewMessage = ({
   chatId,
   message,
@@ -61,33 +55,39 @@ const PurePreviewMessage = ({
   useDataStream();
 
   return (
-    <AnimatePresence>
     <motion.div
       data-testid={`message-${message.role}`}
       className="w-full group/message"
-        initial={{ y: 5, opacity: 0 }}
+      initial={{ opacity: 0 }}
-        animate={{ y: 0, opacity: 1 }}
+      animate={{ opacity: 1 }}
       data-role={message.role}
     >
       <div
-          className={cn('flex items-start gap-3', {
+        className={cn('flex items-start gap-3 w-full', {
-            'w-full': mode === 'edit',
+          'justify-end': message.role === 'user' && mode !== 'edit',
-            'max-w-xl ml-auto justify-end mr-6':
+          'justify-start': message.role === 'assistant',
-              message.role === 'user' && mode !== 'edit',
-            'justify-start -ml-3': message.role === 'assistant',
         })}
       >
         {message.role === 'assistant' && (
-            <div className="flex justify-center items-center mt-1 rounded-full ring-1 size-8 shrink-0 ring-border bg-background">
+          <div className="flex justify-center items-center -mt-1 rounded-full ring-1 size-8 shrink-0 ring-border bg-background">
             <SparklesIcon size={14} />
           </div>
         )}
 
         <div
-            className={cn('flex flex-col gap-4', {
+          className={cn('flex flex-col', {
+            'gap-2 md:gap-4': message.parts?.some(
+              (p) => p.type === 'text' && p.text?.trim(),
+            ),
             'min-h-96': message.role === 'assistant' && requiresScrollPadding,
-              'w-full': message.role === 'assistant',
+            'w-full':
-              'w-fit': message.role === 'user',
+              (message.role === 'assistant' &&
+                message.parts?.some(
+                  (p) => p.type === 'text' && p.text?.trim(),
+                )) ||
+              mode === 'edit',
+            'max-w-[90%] sm:max-w-[min(fit-content,80%)]':
+              message.role === 'user' && mode !== 'edit',
           })}
         >
           {attachmentsFromMessage.length > 0 && (
@@ -125,32 +125,20 @@ const PurePreviewMessage = ({
             if (type === 'text') {
               if (mode === 'view') {
                 return (
-                    <div key={key} className="flex flex-row gap-2 items-start">
+                  <div key={key}>
-                      {message.role === 'user' && !isReadonly && (
-                        <Tooltip>
-                          <TooltipTrigger asChild>
-                            <Button
-                              data-testid="message-edit-button"
-                              variant="ghost"
-                              className="px-2 rounded-full opacity-0 h-fit text-muted-foreground group-hover/message:opacity-100"
-                              onClick={() => {
-                                setMode('edit');
-                              }}
-                            >
-                              <PencilEditIcon />
-                            </Button>
-                          </TooltipTrigger>
-                          <TooltipContent>Edit message</TooltipContent>
-                        </Tooltip>
-                      )}
-
                     <MessageContent
                       data-testid="message-content"
-                        className={cn('justify-start items-start text-left', {
+                      className={cn({
-                          'bg-primary text-primary-foreground':
+                        'rounded-2xl px-3 py-2 break-words text-white text-right w-fit':
                           message.role === 'user',
-                          'bg-transparent -ml-4': message.role === 'assistant',
+                        'bg-transparent px-0 py-0 text-left':
+                          message.role === 'assistant',
                       })}
+                      style={
+                        message.role === 'user'
+                          ? { backgroundColor: '#006cff' }
+                          : undefined
+                      }
                     >
                       <Response>{sanitizeText(part.text)}</Response>
                     </MessageContent>
@@ -289,12 +277,12 @@ const PurePreviewMessage = ({
               message={message}
               vote={vote}
               isLoading={isLoading}
+              setMode={setMode}
             />
           )}
         </div>
       </div>
     </motion.div>
-    </AnimatePresence>
   );
 };
 
@@ -319,21 +307,44 @@ export const ThinkingMessage = () => {
     <motion.div
       data-testid="message-assistant-loading"
       className="w-full group/message"
-      initial={{ y: 5, opacity: 0 }}
+      initial={{ opacity: 0 }}
-      animate={{ y: 0, opacity: 1, transition: { delay: 1 } }}
+      animate={{ opacity: 1 }}
       data-role={role}
     >
-      <div className="flex items-start gap-3 justify-start -ml-3">
+      <div className="flex gap-3 justify-start items-start">
-        <div className="flex justify-center items-center mt-1 rounded-full ring-1 size-8 shrink-0 ring-border bg-background">
+        <div className="flex justify-center items-center -mt-1 rounded-full ring-1 size-8 shrink-0 ring-border bg-background">
           <SparklesIcon size={14} />
         </div>
 
-        <div className="flex flex-col gap-4 w-full">
+        <div className="flex flex-col gap-2 w-full md:gap-4">
-          <MessageContent className="bg-transparent -ml-4">
+          <div className="px-0 py-0 text-sm text-muted-foreground">
-            <div className="text-muted-foreground">Hmm...</div>
+            <LoadingText>Thinking...</LoadingText>
-          </MessageContent>
+          </div>
         </div>
       </div>
     </motion.div>
   );
 };
+
+const LoadingText = ({ children }: { children: React.ReactNode }) => {
+  return (
+    <motion.div
+      animate={{ backgroundPosition: ['100% 50%', '-100% 50%'] }}
+      transition={{
+        duration: 1.5,
+        repeat: Number.POSITIVE_INFINITY,
+        ease: 'linear',
+      }}
+      style={{
+        background:
+          'linear-gradient(90deg, hsl(var(--muted-foreground)) 0%, hsl(var(--muted-foreground)) 35%, hsl(var(--foreground)) 50%, hsl(var(--muted-foreground)) 65%, hsl(var(--muted-foreground)) 100%)',
+        backgroundSize: '200% 100%',
+        WebkitBackgroundClip: 'text',
+        backgroundClip: 'text',
+      }}
+      className="flex items-center text-transparent"
+    >
+      {children}
+    </motion.div>
+  );
+};

components/messages.tsx

@@ -1,15 +1,14 @@
 import { PreviewMessage, ThinkingMessage } from './message';
 import { Greeting } from './greeting';
-import { memo } from 'react';
+import { memo, useEffect } from 'react';
 import type { Vote } from '@/lib/db/schema';
 import equal from 'fast-deep-equal';
 import type { UseChatHelpers } from '@ai-sdk/react';
-import { motion } from 'framer-motion';
 import { useMessages } from '@/hooks/use-messages';
 import type { ChatMessage } from '@/lib/types';
 import { useDataStream } from './data-stream-provider';
-import { Conversation, ConversationContent, ConversationScrollButton } from './elements/conversation';
+import { Conversation, ConversationContent } from './elements/conversation';
-import { cn } from '@/lib/utils';
+import { ArrowDownIcon } from 'lucide-react';
 
 interface MessagesProps {
   chatId: string;
@@ -20,6 +19,7 @@ interface MessagesProps {
   regenerate: UseChatHelpers<ChatMessage>['regenerate'];
   isReadonly: boolean;
   isArtifactVisible: boolean;
+  selectedModelId: string;
 }
 
 function PureMessages({
@@ -31,12 +31,13 @@ function PureMessages({
   regenerate,
   isReadonly,
   isArtifactVisible,
+  selectedModelId,
 }: MessagesProps) {
   const {
     containerRef: messagesContainerRef,
     endRef: messagesEndRef,
-    onViewportEnter,
+    isAtBottom,
-    onViewportLeave,
+    scrollToBottom,
     hasSentMessage,
   } = useMessages({
     chatId,
@@ -45,10 +46,28 @@ function PureMessages({
 
   useDataStream();
 
+  useEffect(() => {
+    if (status === 'submitted') {
+      requestAnimationFrame(() => {
+        const container = messagesContainerRef.current;
+        if (container) {
+          container.scrollTo({
+            top: container.scrollHeight,
+            behavior: 'smooth'
+          });
+        }
+      });
+    }
+  }, [status]);
+
   return (
-    <div ref={messagesContainerRef} className="flex-1 overflow-y-auto">
+    <div
-      <Conversation className="flex flex-col min-w-0 gap-6 pt-4 pb-32 px-4 max-w-4xl mx-auto">
+      ref={messagesContainerRef}
-        <ConversationContent className="flex flex-col gap-6">
+      className="overflow-y-scroll flex-1 touch-pan-y overscroll-behavior-contain -webkit-overflow-scrolling-touch"
+      style={{ overflowAnchor: 'none' }}
+    >
+      <Conversation className="flex flex-col gap-4 px-2 pt-4 pb-4 mx-auto min-w-0 max-w-4xl md:gap-6 md:px-4">
+        <ConversationContent className="flex flex-col gap-4 md:gap-6">
           {messages.length === 0 && <Greeting />}
 
           {messages.map((message, index) => (
@@ -56,7 +75,9 @@ function PureMessages({
               key={message.id}
               chatId={chatId}
               message={message}
-              isLoading={status === 'streaming' && messages.length - 1 === index}
+              isLoading={
+                status === 'streaming' && messages.length - 1 === index
+              }
               vote={
                 votes
                   ? votes.find((vote) => vote.messageId === message.id)
@@ -74,17 +95,28 @@ function PureMessages({
 
           {status === 'submitted' &&
             messages.length > 0 &&
-            messages[messages.length - 1].role === 'user' && <ThinkingMessage />}
+            messages[messages.length - 1].role === 'user' &&
+            selectedModelId !== 'chat-model-reasoning' && (
+              <ThinkingMessage />
+            )}
 
-          <motion.div
+          <div
             ref={messagesEndRef}
             className="shrink-0 min-w-[24px] min-h-[24px]"
-            onViewportLeave={onViewportLeave}
-            onViewportEnter={onViewportEnter}
           />
         </ConversationContent>
-        <ConversationScrollButton />
       </Conversation>
+
+      {!isAtBottom && (
+        <button
+          className="absolute bottom-40 left-1/2 z-10 p-2 rounded-full border shadow-lg transition-colors -translate-x-1/2 bg-background hover:bg-muted"
+          onClick={() => scrollToBottom('smooth')}
+          type="button"
+          aria-label="Scroll to bottom"
+        >
+          <ArrowDownIcon className="size-4" />
+        </button>
+      )}
     </div>
   );
 }
@@ -93,6 +125,7 @@ export const Messages = memo(PureMessages, (prevProps, nextProps) => {
   if (prevProps.isArtifactVisible && nextProps.isArtifactVisible) return true;
 
   if (prevProps.status !== nextProps.status) return false;
+  if (prevProps.selectedModelId !== nextProps.selectedModelId) return false;
   if (prevProps.messages.length !== nextProps.messages.length) return false;
   if (!equal(prevProps.messages, nextProps.messages)) return false;
   if (!equal(prevProps.votes, nextProps.votes)) return false;

components/multimodal-input.tsx

@@ -80,13 +80,13 @@ function PureMultimodalInput({
 
   const adjustHeight = () => {
     if (textareaRef.current) {
-      textareaRef.current.style.height = '72px';
+      textareaRef.current.style.height = '44px';
     }
   };
 
   const resetHeight = () => {
     if (textareaRef.current) {
-      textareaRef.current.style.height = '72px';
+      textareaRef.current.style.height = '44px';
     }
   };
 
@@ -226,7 +226,7 @@ function PureMultimodalInput({
             animate={{ opacity: 1, y: 0 }}
             exit={{ opacity: 0, y: 10 }}
             transition={{ type: 'spring', stiffness: 300, damping: 20 }}
-            className="absolute bottom-28 left-1/2 z-50 -translate-x-1/2"
+            className="absolute -top-12 left-1/2 z-50 -translate-x-1/2"
           >
             <Button
               data-testid="scroll-to-bottom-button"
@@ -264,7 +264,7 @@ function PureMultimodalInput({
       />
 
       <PromptInput
-        className="bg-gray-50 rounded-3xl border border-gray-300 shadow-none transition-all duration-200 dark:bg-sidebar dark:border-sidebar-border hover:ring-1 hover:ring-primary/30 focus-within:ring-1 focus-within:ring-primary/50"
+        className="rounded-xl border shadow-sm transition-all duration-200 bg-background border-border focus-within:border-border hover:border-muted-foreground/50"
         onSubmit={(event) => {
           event.preventDefault();
           if (status !== 'ready') {
@@ -314,14 +314,14 @@ function PureMultimodalInput({
           placeholder="Send a message..."
           value={input}
           onChange={handleInput}
-          minHeight={72}
+          minHeight={44}
           maxHeight={200}
           disableAutoResize={true}
-          className="text-base resize-none py-4 px-4 [&::-webkit-scrollbar]:hidden [-ms-overflow-style:none] [scrollbar-width:none] bg-transparent !border-0 !border-none outline-none ring-0 focus-visible:ring-0 focus-visible:ring-offset-0 focus-visible:outline-none"
+          className="text-sm resize-none py-3 px-3 [&::-webkit-scrollbar]:hidden [-ms-overflow-style:none] [scrollbar-width:none] bg-transparent !border-0 !border-none outline-none ring-0 focus-visible:ring-0 focus-visible:ring-offset-0 focus-visible:outline-none placeholder:text-muted-foreground"
           rows={1}
           autoFocus
         />
-        <PromptInputToolbar className="px-4 py-2 !border-t-0 !border-top-0 shadow-none dark:!border-transparent dark:border-0">
+        <PromptInputToolbar className="px-3 py-2 !border-t-0 !border-top-0 shadow-none dark:!border-transparent dark:border-0">
           <PromptInputTools className="gap-2">
             <AttachmentsButton fileInputRef={fileInputRef} status={status} />
             <ModelSelectorCompact selectedModelId={selectedModelId} />
@@ -332,9 +332,9 @@ function PureMultimodalInput({
             <PromptInputSubmit
               status={status}
               disabled={!input.trim() || uploadQueue.length > 0}
-              className="p-3 text-gray-700 bg-gray-200 rounded-full hover:bg-gray-300 dark:bg-sidebar-accent dark:hover:bg-sidebar-accent/80 dark:text-gray-300"
+              className="p-2 rounded-full transition-colors duration-200 text-primary-foreground bg-primary hover:bg-primary/90 disabled:bg-muted disabled:text-muted-foreground"
             >
-              <ArrowUpIcon size={20} />
+              <ArrowUpIcon size={16} />
             </PromptInputSubmit>
           )}
         </PromptInputToolbar>
@@ -367,13 +367,14 @@ function PureAttachmentsButton({
   return (
     <Button
       data-testid="attachments-button"
-      className="rounded-md rounded-bl-lg p-[7px] h-fit dark:border-zinc-700 hover:dark:bg-zinc-900 hover:bg-zinc-200"
+      className="rounded-md p-1.5 h-fit hover:bg-muted transition-colors duration-200"
       onClick={(event) => {
         event.preventDefault();
         fileInputRef.current?.click();
       }}
       disabled={status !== 'ready'}
       variant="ghost"
+      size="sm"
     >
       <PaperclipIcon size={14} />
     </Button>
@@ -440,47 +441,18 @@ function PureStopButton({
   return (
     <Button
       data-testid="stop-button"
-      className="rounded-full p-1.5 h-fit border dark:border-zinc-600"
+      className="p-2 rounded-full border transition-colors duration-200 h-fit border-border hover:bg-muted"
       onClick={(event) => {
         event.preventDefault();
         stop();
         setMessages((messages) => messages);
       }}
+      variant="outline"
+      size="sm"
     >
-      <StopIcon size={14} />
+      <StopIcon size={16} />
     </Button>
   );
 }
 
 const StopButton = memo(PureStopButton);
-
-function PureSendButton({
-  submitForm,
-  input,
-  uploadQueue,
-}: {
-  submitForm: () => void;
-  input: string;
-  uploadQueue: Array<string>;
-}) {
-  return (
-    <Button
-      data-testid="send-button"
-      className="rounded-full p-1.5 h-fit border dark:border-zinc-600"
-      onClick={(event) => {
-        event.preventDefault();
-        submitForm();
-      }}
-      disabled={input.length === 0 || uploadQueue.length > 0}
-    >
-      <ArrowUpIcon size={14} />
-    </Button>
-  );
-}
-
-const SendButton = memo(PureSendButton, (prevProps, nextProps) => {
-  if (prevProps.uploadQueue.length !== nextProps.uploadQueue.length)
-    return false;
-  if (prevProps.input !== nextProps.input) return false;
-  return true;
-});

components/sidebar-toggle.tsx

@@ -22,12 +22,12 @@ export function SidebarToggle({
           data-testid="sidebar-toggle-button"
           onClick={toggleSidebar}
           variant="outline"
-          className="md:px-2 md:h-fit"
+          className="px-1 h-8 md:px-2 md:h-fit"
         >
           <SidebarLeftIcon size={16} />
         </Button>
       </TooltipTrigger>
-      <TooltipContent align="start">Toggle Sidebar</TooltipContent>
+      <TooltipContent align="start" className="hidden md:block">Toggle Sidebar</TooltipContent>
     </Tooltip>
   );
 }

components/ui/sidebar.tsx

@@ -10,7 +10,7 @@ import { cn } from '@/lib/utils';
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
 import { Separator } from '@/components/ui/separator';
-import { Sheet, SheetContent } from '@/components/ui/sheet';
+import { Sheet, SheetContent, SheetTitle } from '@/components/ui/sheet';
 import { Skeleton } from '@/components/ui/skeleton';
 import {
   Tooltip,
@@ -214,6 +214,7 @@ const Sidebar = React.forwardRef<
             }
             side={side}
           >
+            <SheetTitle className="sr-only">Navigation Menu</SheetTitle>
             <div className="flex h-full w-full flex-col">{children}</div>
           </SheetContent>
         </Sheet>

hooks/use-messages.tsx

@@ -21,13 +21,6 @@ export function useMessages({
 
   const [hasSentMessage, setHasSentMessage] = useState(false);
 
-  useEffect(() => {
-    if (chatId) {
-      scrollToBottom('instant');
-      setHasSentMessage(false);
-    }
-  }, [chatId, scrollToBottom]);
-
   useEffect(() => {
     if (status === 'submitted') {
       setHasSentMessage(true);

hooks/use-scroll-to-bottom.tsx

@@ -1,27 +1,47 @@
 import useSWR from 'swr';
-import { useRef, useEffect, useCallback } from 'react';
+import { useRef, useEffect, useCallback, useState } from 'react';
 
 type ScrollFlag = ScrollBehavior | false;
 
 export function useScrollToBottom() {
   const containerRef = useRef<HTMLDivElement>(null);
   const endRef = useRef<HTMLDivElement>(null);
-
+  const [isAtBottom, setIsAtBottom] = useState(true);
-  const { data: isAtBottom = false, mutate: setIsAtBottom } = useSWR(
-    'messages:is-at-bottom',
-    null,
-    { fallbackData: false },
-  );
 
   const { data: scrollBehavior = false, mutate: setScrollBehavior } =
     useSWR<ScrollFlag>('messages:should-scroll', null, { fallbackData: false });
 
+  const handleScroll = useCallback(() => {
+    if (!containerRef.current) return;
+    const { scrollTop, scrollHeight, clientHeight } = containerRef.current;
+    
+    // Check if we are within 100px of the bottom (like v0 does)
+    setIsAtBottom(scrollTop + clientHeight >= scrollHeight - 100);
+  }, []);
+
   useEffect(() => {
-    if (scrollBehavior) {
+    const container = containerRef.current;
-      endRef.current?.scrollIntoView({ behavior: scrollBehavior });
+    if (!container) return;
+
+    container.addEventListener('scroll', handleScroll);
+    handleScroll(); // Check initial state
+
+    return () => {
+      container.removeEventListener('scroll', handleScroll);
+    };
+  }, [handleScroll]);
+
+  useEffect(() => {
+    if (scrollBehavior && containerRef.current) {
+      const container = containerRef.current;
+      const scrollOptions: ScrollToOptions = {
+        top: container.scrollHeight,
+        behavior: scrollBehavior
+      };
+      container.scrollTo(scrollOptions);
       setScrollBehavior(false);
     }
-  }, [setScrollBehavior, scrollBehavior]);
+  }, [scrollBehavior, setScrollBehavior]);
 
   const scrollToBottom = useCallback(
     (scrollBehavior: ScrollBehavior = 'smooth') => {