feat(add: allowesc prop): add new allowEsc props

add prop that closes the chat box when escape key is pressed

BREAKING CHANGE: new prop

Author: awran5

src/Components/FloatingWhatsapp.tsx

@@ -10,7 +10,7 @@ interface FloatingWhatsAppProps {
   chatMessage?: string
   darkMode?: boolean
   allowClickAway?: boolean
-
+  allowEsc?: boolean
   styles?: React.CSSProperties
   className?: string
   placeholder?: string
@@ -28,6 +28,7 @@ function FloatingWhatsApp({
   chatMessage = 'Hello there! 🤝 \nHow can we help?',
   darkMode = false,
   allowClickAway = false,
+  allowEsc = false,
   styles = {},
   className = '',
   placeholder = 'Type a message..'
@@ -52,12 +53,29 @@ function FloatingWhatsApp({
     if (isOpen) setOpen(false)
   }, [allowClickAway, isOpen])
 
+  const onEscKey = useCallback(
+    (event: KeyboardEvent) => {
+      if (!allowEsc) return
+
+      if (event.key === 'Escape') {
+        if (isOpen) setOpen(false)
+      }
+    },
+    [allowEsc, isOpen]
+  )
+
   useEffect(() => {
     document.addEventListener('click', onClickOutside, false)
 
     return () => document.removeEventListener('click', onClickOutside)
   }, [onClickOutside])
 
+  useEffect(() => {
+    document.addEventListener('keydown', onEscKey, false)
+
+    return () => document.removeEventListener('keydown', onEscKey)
+  }, [onEscKey])
+
   return (
     <div className={`${css.floatingWhatsapp} ${darkMode ? css.dark : ''} ${className}`}>
       <div className={css.whatsappButton} onClick={handleClick} style={styles} aria-hidden='true'>