feat(typing-indicator): add setting to disable typing indicator

src/Bootstrap.test.tsx

@@ -57,6 +57,7 @@ test('persists user settings if none were already persisted', async () => {
     customUsername: '',
     playSoundOnNewMessage: true,
     showNotificationOnNewMessage: true,
+    showActiveTypingStatus: true,
   })
 })
 

src/Bootstrap.tsx

@@ -43,6 +43,7 @@ function Bootstrap({
     colorMode: 'dark',
     playSoundOnNewMessage: true,
     showNotificationOnNewMessage: true,
+    showActiveTypingStatus: true,
   })
   const { userId } = userSettings
 

src/components/MessageForm/MessageForm.tsx

@@ -1,6 +1,7 @@
 import {
   KeyboardEvent,
   SyntheticEvent,
+  useContext,
   useEffect,
   useRef,
   useState,
@@ -12,6 +13,8 @@ import Fab from '@mui/material/Fab'
 import ArrowUpward from '@mui/icons-material/ArrowUpward'
 
 import { messageCharacterSizeLimit } from 'config/messaging'
+import { SettingsContext } from 'contexts/SettingsContext'
+import classNames from 'classnames'
 
 interface MessageFormProps {
   onMessageSubmit: (message: string) => void
@@ -24,6 +27,8 @@ export const MessageForm = ({
   onMessageChange,
   isMessageSending,
 }: MessageFormProps) => {
+  const settingsContext = useContext(SettingsContext)
+  const { showActiveTypingStatus } = settingsContext.getUserSettings()
   const textFieldRef = useRef<HTMLInputElement>(null)
   const [textMessage, setTextMessage] = useState('')
 
@@ -71,7 +76,13 @@ export const MessageForm = ({
   }
 
   return (
-    <form onSubmit={handleMessageSubmit} className="pt-4 px-4">
+    <form
+      onSubmit={handleMessageSubmit}
+      className={classNames({
+        'pt-4 px-4': showActiveTypingStatus,
+        'p-4': !showActiveTypingStatus,
+      })}
+    >
       <Stack direction="row" spacing={2}>
         <FormControl fullWidth>
           <TextField

src/components/Room/Room.tsx

@@ -1,10 +1,7 @@
 import { useContext } from 'react'
-
 import { useWindowSize } from '@react-hook/window-size'
-
 import Collapse from '@mui/material/Collapse'
 import Zoom from '@mui/material/Zoom'
-
 import Box from '@mui/material/Box'
 import Divider from '@mui/material/Divider'
 import { v4 as uuid } from 'uuid'
@@ -16,6 +13,8 @@ import { ShellContext } from 'contexts/ShellContext'
 import { MessageForm } from 'components/MessageForm'
 import { ChatTranscript } from 'components/ChatTranscript'
 
+import { SettingsContext } from 'contexts/SettingsContext'
+
 import { useRoom } from './useRoom'
 import { RoomAudioControls } from './RoomAudioControls'
 import { RoomVideoControls } from './RoomVideoControls'
@@ -41,6 +40,8 @@ export function Room({
   password,
   userId,
 }: RoomProps) {
+  const settingsContext = useContext(SettingsContext)
+  const { showActiveTypingStatus } = settingsContext.getUserSettings()
   const {
     isMessageSending,
     handleInlineMediaUpload,
@@ -158,7 +159,7 @@ export function Room({
                     isMessageSending={isMessageSending}
                     onMessageChange={handleMessageChange}
                   />
-                  <TypingStatusBar />
+                  {showActiveTypingStatus ? <TypingStatusBar /> : null}
                 </Box>
               </Box>
             )}

src/components/Room/useRoom.ts

@@ -66,6 +66,7 @@ export function useRoom(
   } = useContext(ShellContext)
 
   const settingsContext = useContext(SettingsContext)
+  const { showActiveTypingStatus } = settingsContext.getUserSettings()
   const [isMessageSending, setIsMessageSending] = useState(false)
   const [messageLog, _setMessageLog] = useState<Array<Message | InlineMedia>>(
     []
@@ -164,8 +165,10 @@ export function useRoom(
   )
 
   useEffect(() => {
+    if (!showActiveTypingStatus) return
+
     sendTypingStatusChange({ isTyping })
-  }, [isTyping, sendTypingStatusChange])
+  }, [isTyping, sendTypingStatusChange, showActiveTypingStatus])
 
   useEffect(() => {
     return () => {

src/contexts/SettingsContext.ts

@@ -15,5 +15,6 @@ export const SettingsContext = createContext<SettingsContextProps>({
     colorMode: 'dark',
     playSoundOnNewMessage: true,
     showNotificationOnNewMessage: true,
+    showActiveTypingStatus: true,
   }),
 })

src/models/settings.ts

@@ -4,4 +4,5 @@ export interface UserSettings {
   customUsername: string
   playSoundOnNewMessage: boolean
   showNotificationOnNewMessage: boolean
+  showActiveTypingStatus: boolean
 }

src/pages/Settings/Settings.tsx

@@ -6,6 +6,7 @@ import Divider from '@mui/material/Divider'
 import Switch from '@mui/material/Switch'
 import FormGroup from '@mui/material/FormGroup'
 import FormControlLabel from '@mui/material/FormControlLabel'
+import Paper from '@mui/material/Paper'
 
 import { NotificationService } from 'services/Notification'
 import { ShellContext } from 'contexts/ShellContext'
@@ -28,8 +29,11 @@ export const Settings = ({ userId }: SettingsProps) => {
     setIsDeleteSettingsConfirmDiaglogOpen,
   ] = useState(false)
   const [, setIsNotificationPermissionDetermined] = useState(false)
-  const { playSoundOnNewMessage, showNotificationOnNewMessage } =
-    getUserSettings()
+  const {
+    playSoundOnNewMessage,
+    showNotificationOnNewMessage,
+    showActiveTypingStatus,
+  } = getUserSettings()
 
   const persistedStorage = getPersistedStorage()
 
@@ -61,6 +65,13 @@ export const Settings = ({ userId }: SettingsProps) => {
     updateUserSettings({ showNotificationOnNewMessage })
   }
 
+  const handleShowActiveTypingStatusChange = (
+    _event: ChangeEvent,
+    showActiveTypingStatus: boolean
+  ) => {
+    updateUserSettings({ showActiveTypingStatus })
+  }
+
   const handleDeleteSettingsClick = () => {
     setIsDeleteSettingsConfirmDiaglogOpen(true)
   }
@@ -88,30 +99,48 @@ export const Settings = ({ userId }: SettingsProps) => {
       >
         Chat
       </Typography>
-      <Typography>When a message is received in the background:</Typography>
-      <FormGroup>
-        <FormControlLabel
-          control={
-            <Switch
-              checked={playSoundOnNewMessage}
-              onChange={handlePlaySoundOnNewMessageChange}
-            />
-          }
-          label="Play a sound"
-        />
-        <FormControlLabel
-          control={
-            <Switch
-              checked={
-                areNotificationsAvailable && showNotificationOnNewMessage
-              }
-              onChange={handleShowNotificationOnNewMessageChange}
-              disabled={!areNotificationsAvailable}
-            />
-          }
-          label="Show a notification"
-        />
-      </FormGroup>
+      <Paper elevation={3} sx={{ p: 2, mb: 2 }}>
+        <Typography>When a message is received in the background:</Typography>
+        <FormGroup>
+          <FormControlLabel
+            control={
+              <Switch
+                checked={playSoundOnNewMessage}
+                onChange={handlePlaySoundOnNewMessageChange}
+              />
+            }
+            label="Play a sound"
+          />
+          <FormControlLabel
+            control={
+              <Switch
+                checked={
+                  areNotificationsAvailable && showNotificationOnNewMessage
+                }
+                onChange={handleShowNotificationOnNewMessageChange}
+                disabled={!areNotificationsAvailable}
+              />
+            }
+            label="Show a notification"
+          />
+        </FormGroup>
+      </Paper>
+      <Paper elevation={3} sx={{ p: 2, mb: 2 }}>
+        <FormGroup>
+          <FormControlLabel
+            control={
+              <Switch
+                checked={showActiveTypingStatus}
+                onChange={handleShowActiveTypingStatusChange}
+              />
+            }
+            label="Show active typing indicators"
+          />
+        </FormGroup>
+        <Typography variant="subtitle2" sx={_theme => ({})}>
+          Disabling this will also hide your active typing status from others.
+        </Typography>
+      </Paper>
       <Divider sx={{ my: 2 }} />
       <Typography
         variant="h2"

src/test-utils/stubs/settingsContext.ts

@@ -12,6 +12,7 @@ export const userSettingsContextStubFactory = (
       colorMode: 'dark',
       playSoundOnNewMessage: true,
       showNotificationOnNewMessage: true,
+      showActiveTypingStatus: true,
       ...userSettingsOverrides,
     }),
   }