From 928b109ae64db3679927eca211c112df3b3bb04b Mon Sep 17 00:00:00 2001
From: HaecheonLee <dlgocjs1@gmail.com>
Date: Fri, 10 May 2024 04:14:21 -0400
Subject: [PATCH] enh: resolve @ts-expect-error issues (#58)

---
 src/components/ChatBotContainer.tsx           | 12 +++++-----
 src/components/ChatBotInput/ChatBotInput.tsx  |  6 ++---
 .../ChatBotInput/VoiceButton/VoiceButton.tsx  |  3 +--
 src/services/VoiceService.tsx                 |  2 +-
 types/global.d.ts                             | 22 +++++++++++++++++++
 5 files changed, 33 insertions(+), 12 deletions(-)
 create mode 100644 types/global.d.ts

diff --git a/src/components/ChatBotContainer.tsx b/src/components/ChatBotContainer.tsx
index a6bc0065..cac23774 100644
--- a/src/components/ChatBotContainer.tsx
+++ b/src/components/ChatBotContainer.tsx
@@ -147,13 +147,15 @@ const ChatBotContainer = ({ flow }: { flow: Flow }) => {
 		if (isDesktop || botOptions.theme?.embedded) {
 			return;
 		}
-
-		if ("virtualKeyboard" in navigator) {
-			// @ts-expect-error virtualkeyboard type unknown
+		
+		if (navigator.virtualKeyboard) {
 			navigator.virtualKeyboard.overlaysContent = true;
-			// @ts-expect-error virtualkeyboard type unknown
 			navigator.virtualKeyboard.addEventListener("geometrychange", (event) => {
-				const { x, y, width, height } = event.target.boundingRect;
+				if (!event.target) {
+					return;
+				}
+
+				const { x, y, width, height } = (event.target as VirtualKeyboard).boundingRect;
 				// width does not need adjustments so only height is adjusted
 				if (x == 0 && y == 0 && width == 0 && height == 0) {
 					// delay added as it takes time for keyboard to appear and resize the viewport height
diff --git a/src/components/ChatBotInput/ChatBotInput.tsx b/src/components/ChatBotInput/ChatBotInput.tsx
index eb8aeb15..5208102a 100644
--- a/src/components/ChatBotInput/ChatBotInput.tsx
+++ b/src/components/ChatBotInput/ChatBotInput.tsx
@@ -181,8 +181,7 @@ const ChatBotInput = ({
 			{/* textarea intentionally does not use the disabled property to prevent keyboard from closing on mobile */}
 			{textAreaSensitiveMode && botOptions.sensitiveInfo?.maskInTextArea ?
 				<input
-					// @ts-expect-error input ref type
-					ref={inputRef}
+					ref={inputRef as RefObject<HTMLInputElement>}
 					type="password"
 					className="rcb-chat-input-textarea"
 					style={textAreaDisabled
@@ -196,8 +195,7 @@ const ChatBotInput = ({
 				/>
 				:
 				<textarea
-					// @ts-expect-error input ref type
-					ref={inputRef}
+					ref={inputRef as RefObject<HTMLTextAreaElement>}
 					style={textAreaDisabled
 						? textAreaDisabledStyle
 						: (isFocused ? textAreaFocusedStyle : textAreaStyle)}
diff --git a/src/components/ChatBotInput/VoiceButton/VoiceButton.tsx b/src/components/ChatBotInput/VoiceButton/VoiceButton.tsx
index a6578eb7..cac6dff0 100644
--- a/src/components/ChatBotInput/VoiceButton/VoiceButton.tsx
+++ b/src/components/ChatBotInput/VoiceButton/VoiceButton.tsx
@@ -33,11 +33,10 @@ const VoiceButton = ({
 
 	// handles options for bot
 	const { botOptions } = useBotOptions();
-
+	
 	// handles starting and stopping of voice recording on toggle
 	useEffect(() => {
 		if (voiceToggledOn) {
-			// @ts-expect-error input ref type
 			startVoiceRecording(botOptions, handleToggleVoice, triggerSendVoiceInput, setInputLength, inputRef);
 		} else {
 			stopVoiceRecording();
diff --git a/src/services/VoiceService.tsx b/src/services/VoiceService.tsx
index 63a044e6..bd1e73ae 100644
--- a/src/services/VoiceService.tsx
+++ b/src/services/VoiceService.tsx
@@ -19,7 +19,7 @@ let toggleOn = false;
  */
 export const startVoiceRecording = (botOptions: Options, handleToggleVoice: () => void,
 	triggerSendVoiceInput: () => void, setInputLength: Dispatch<SetStateAction<number>>,
-	inputRef: RefObject<HTMLTextAreaElement>) => {
+	inputRef: RefObject<HTMLTextAreaElement | HTMLInputElement>) => {
 
 	if (!recognition) {
 		return;
diff --git a/types/global.d.ts b/types/global.d.ts
new file mode 100644
index 00000000..1a531903
--- /dev/null
+++ b/types/global.d.ts
@@ -0,0 +1,22 @@
+import { EventHandler } from "react";
+
+declare global {
+	interface Navigator {
+		virtualKeyboard?: VirtualKeyboard;
+	}
+
+	/**
+	 * Represents the virtual keyboard API, which extends the browser's navigator object.
+	 * 
+	 * Note: VirtualKeyboard is not natively supported by TypeScript. The implementation 
+	 * provided here is based on the proposed specification available at 
+	 * {@link https://w3c.github.io/virtual-keyboard/#dom-navigator-virtualkeyboard}.
+	 */
+	interface VirtualKeyboard extends EventTarget {
+		hide(): void
+		show(): void;
+		boundingRect: DOMRect;
+		overlaysContent: boolean;
+		ongeometrychange: EventHandler;
+	}
+}