enh: resolve @ts-expect-error issues (#58)

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

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)}

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();

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;

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;
+	}
+}