From 4dbb3117d68f9e310f9ff4ff0e319c93eff6323e Mon Sep 17 00:00:00 2001
From: vanbasten17 <marcrabat@gmail.com>
Date: Thu, 19 Sep 2024 12:38:16 +0200
Subject: [PATCH] fix: fix webchat not resizing properly on keyboard blur

---
 .../src/webchat/hooks/use-webchat-resizer.ts         | 12 +++++++++---
 1 file changed, 9 insertions(+), 3 deletions(-)

diff --git a/packages/botonic-react/src/webchat/hooks/use-webchat-resizer.ts b/packages/botonic-react/src/webchat/hooks/use-webchat-resizer.ts
index 11a920fe4..420319371 100644
--- a/packages/botonic-react/src/webchat/hooks/use-webchat-resizer.ts
+++ b/packages/botonic-react/src/webchat/hooks/use-webchat-resizer.ts
@@ -14,7 +14,6 @@ export const useWebchatResizer = host => {
       const keyboardOffset =
         (window.visualViewport && window.visualViewport.height) ||
         window.innerHeight
-
       let newWebchatPercentualHeight = keyboardOffset / webchatHeight
       newWebchatPercentualHeight =
         Math.round(newWebchatPercentualHeight * 100 * 100) / 100 // Two decimal places
@@ -29,16 +28,23 @@ export const useWebchatResizer = host => {
     ) {
       const newWebchatPercentualHeight = `${calculateNewWebchatElementHeight()}%`
       webchatRef.current.style.height = newWebchatPercentualHeight
+
       const newChatAreaHeight = `${webchatRef.current.clientHeight - headerRef.current.clientHeight - inputPanelRef.current.clientHeight}px`
+
       chatAreaRef.current.style.height = newChatAreaHeight
       scrollToBottom()
     }
   }
 
   const handleKeyboardHidden = () => {
-    if (webchatRef.current && chatAreaRef.current) {
+    if (
+      webchatRef.current &&
+      chatAreaRef.current &&
+      inputPanelRef.current &&
+      headerRef.current
+    ) {
       webchatRef.current.style.height = '100%'
-      chatAreaRef.current.style.height = '100%'
+      chatAreaRef.current.style.height = `${webchatRef.current.clientHeight - headerRef.current.clientHeight - inputPanelRef.current.clientHeight}px`
     }
   }