Merge pull request #46 from ansari-project/mobile-usability-improvements

Mobile usability improvements

Author: waleedkadous

src/components/chat/MessageBubble.tsx

@@ -115,7 +115,7 @@ const MessageBubble: React.FC<MessageBubbleProps> = ({
           </Markdown>
         </View>
         {!isOutgoing && !isSending && reactionsEnabled && (
-          <View className='flex flex-row' key={message.id}>
+          <View className='flex flex-row pb-4' key={message.id}>
             <ReactionButtons
               threadId={threadId}
               messageId={message.id}

src/components/chat/MessageList.tsx

@@ -6,6 +6,7 @@ import React, { forwardRef, useRef, useState } from 'react'
 import { ActivityIndicator, Platform, Pressable, ScrollView, View } from 'react-native'
 import { useSelector } from 'react-redux'
 import MessageBubble, { MessageBubbleProps } from './MessageBubble'
+import { useLocalSearchParams } from 'expo-router'
 
 // Memoize MessageBubble to avoid unnecessary re-renders
 const areEqual = (prevProps: MessageBubbleProps, nextProps: MessageBubbleProps) =>
@@ -47,8 +48,10 @@ const MessageList = forwardRef<MessageListRef, MessageListProps>(
     const sideMenuWidth = useSelector((state: RootState) => state.sideMenu.width)
     const { isSmallScreen, height } = useScreenInfo(sideMenuWidth)
     const theme = useSelector((state: RootState) => state.theme.theme)
+    const { threadId } = useLocalSearchParams<{ threadId: string }>()
 
-    if (isLoading && !isSending && !activeThread) {
+    const validThread = activeThread && activeThread.id === threadId
+    if (isLoading && !isSending && !validThread) {
       return (
         <View className='flex-1 items-center justify-center'>
           <ActivityIndicator size='large' color={theme.hoverColor} />
@@ -87,7 +90,14 @@ const MessageList = forwardRef<MessageListRef, MessageListProps>(
         <ScrollView
           ref={scrollViewRef}
           className={`mb-${isSmallScreen ? '1' : '2'}`}
-          scrollEventThrottle={250}
+          scrollEventThrottle={50}
+          onScroll={(event) => {
+            const { contentOffset, layoutMeasurement } = event.nativeEvent
+            // 250 accounts for the height of the fixed header + chat input + footer note
+            const isAtBottom = contentOffset.y >= event.nativeEvent.contentSize.height - layoutMeasurement.height - 250
+
+            setDisplayScrollButton(!isAtBottom)
+          }}
           onContentSizeChange={(contentWidth: number, contentHeight: number) => {
             if (isSending) return
 

src/components/chat/ReactionButtons.tsx

@@ -116,12 +116,12 @@ const ReactionButtons: React.FC<ReactionButtonsProps> = ({ threadId, messageId,
 
   return (
     <View className='w-full'>
-      <View className='flex flex-row w-full'>
-        <Pressable onPress={copyMessage} className={`w-5 h-5 ${isRTL ? 'mr-2' : 'ml-2'}`}>
+      <View className='flex flex-row w-full gap-x-4'>
+        <Pressable onPress={copyMessage} className={`w-5 h-5 ${isRTL ? 'mr-2' : 'ml-2'}`} hitSlop={8}>
           {copySuccess ? (
-            <CheckIcon fill={theme.hoverColor} />
+            <CheckIcon fill={theme.hoverColor} width={24} height={24} />
           ) : (
-            <CopyIcon fill={theme.iconFill} hoverFill={theme.hoverColor} />
+            <CopyIcon fill={theme.iconFill} hoverFill={theme.hoverColor} width={24} height={24} />
           )}
         </Pressable>
         <Pressable
@@ -130,10 +130,13 @@ const ReactionButtons: React.FC<ReactionButtonsProps> = ({ threadId, messageId,
             setEditing(true)
           }}
           className={`w-5 h-5 ${isRTL ? 'mr-2' : 'ml-2'}`}
+          hitSlop={8}
         >
           <LikeIcon
             fill={selectedIcon === FeedbackClass.ThumbsUp ? theme.hoverColor : theme.iconFill}
             hoverFill={theme.hoverColor}
+            width={24}
+            height={24}
           />
         </Pressable>
         <Pressable
@@ -142,21 +145,24 @@ const ReactionButtons: React.FC<ReactionButtonsProps> = ({ threadId, messageId,
             setEditing(true)
           }}
           className={`w-5 h-5 ${isRTL ? 'mr-2' : 'ml-2'}`}
+          hitSlop={8}
         >
           <DislikeIcon
             fill={selectedIcon === FeedbackClass.ThumbsDown ? theme.hoverColor : theme.iconFill}
             hoverFill={theme.hoverColor}
+            width={24}
+            height={24}
           />
         </Pressable>
       </View>
       {modalVisible && (
-        <View className={`w-full h-0 mt-6 ${modalVisible ? 'h-auto' : ''}`}>
+        <View className={`w-full mt-6 ${modalVisible ? 'h-auto' : ''}`}>
           <View
             className='w-full px-2 sm:px-5 py-4 items-start rounded'
             style={{ backgroundColor: theme.inputBackgroundColor }}
           >
             <View className='flex-row w-full items-center'>
-              <View className='flex-2 flex-row gap-2.5'>
+              <View className='flex-2 flex-row gap-2'>
                 <Text style={[{ color: theme.primaryColor, fontFamily: 'Inter', fontWeight: '500' }]}>
                   {t('whyDidYouChooseThisRating')}
                 </Text>

src/components/menu/SideMenuBody.tsx

@@ -2,7 +2,8 @@ import { AddIcon, LogoRoundIcon, MenuIcon } from '@/components/svg'
 import { useAuth, useDirection, useScreenInfo } from '@/hooks'
 import { AppDispatch, RootState, fetchThreads, toggleSideMenu } from '@/store'
 import React, { useEffect, useState } from 'react'
-import { Pressable, View, SafeAreaView } from 'react-native'
+import { Pressable, View } from 'react-native'
+import { SafeAreaView } from 'react-native-safe-area-context'
 import { useDispatch, useSelector } from 'react-redux'
 import { useRouter } from 'expo-router'
 import ActionButtons from '../ActionButtons'