fix: Fix auto focus forcing screens to jump

Author: tjtanjin

package-lock.json

@@ -15,7 +15,7 @@
   "files": [
     "./dist"
   ],
-  "version": "0.3.1",
+  "version": "0.3.2",
   "description": "A generic LLM connector for integrating Large Language Models (LLMs) in React ChatBotify!",
   "type": "module",
   "main": "./dist/index.cjs",
@@ -48,7 +48,7 @@
   "peerDependencies": {
     "@mlc-ai/web-llm": "^0.2.78",
     "react": ">=16.14.0",
-    "react-chatbotify": "^2.0.0-beta.38",
+    "react-chatbotify": "^2.0.0-beta.39",
     "react-dom": ">=16.14.0"
   },
   "devDependencies": {

package.json

@@ -38,7 +38,7 @@ const useRcbPlugin = (pluginConfig?: PluginConfig): ReturnType<Plugin> => {
 	const { messages, injectMessage, simulateStreamMessage, streamMessage, endStreamMessage } = useMessages();
 	const { goToPath } = usePaths();
 	const { toggleTextAreaDisabled, focusTextArea } = useTextArea();
-	const { toggleIsBotTyping } = useChatWindow();
+	const { toggleIsBotTyping, getIsChatBotVisible } = useChatWindow();
 
 	const mergedPluginConfig = { ...DefaultPluginConfig, ...(pluginConfig ?? {}) };
 
@@ -81,6 +81,7 @@ const useRcbPlugin = (pluginConfig?: PluginConfig): ReturnType<Plugin> => {
 		toggleIsBotTyping,
 		focusTextArea,
 		goToPath,
+		getIsChatBotVisible,
 	};
 
 	// handles pre-processing and post-processing of blocks.

src/core/useRcbPlugin.tsx

@@ -42,11 +42,19 @@ const useMessageHandler = (
 		toggleIsBotTyping: (active?: boolean) => void;
 		focusTextArea: () => void;
 		goToPath: (path: string) => void;
+		getIsChatBotVisible: () => boolean;
 	}
 ) => {
 	const { messagesRef, outputTypeRef, onUserMessageRef, onKeyDownRef, errorMessageRef } = refs;
-	const { injectMessage, simulateStreamMessage, toggleTextAreaDisabled, toggleIsBotTyping, goToPath, focusTextArea } =
-		actions;
+	const {
+		injectMessage,
+		simulateStreamMessage,
+		toggleTextAreaDisabled,
+		toggleIsBotTyping,
+		goToPath,
+		focusTextArea,
+		getIsChatBotVisible,
+	} = actions;
 
 	// controller to abort streaming responses if required
 	const abortControllerRef = useRef<AbortController | null>(null);
@@ -93,7 +101,9 @@ const useMessageHandler = (
 					toggleIsBotTyping(false);
 					toggleTextAreaDisabled(false);
 					setTimeout(() => {
-						focusTextArea();
+						if (getIsChatBotVisible()) {
+							focusTextArea();
+						}
 					});
 					console.error('LLM prompt failed', err);
 					if (outputTypeRef.current === 'full') {

src/hooks/useMessageHandler.ts

@@ -31,10 +31,18 @@ const useProcessBlock = (
 		toggleIsBotTyping: (active?: boolean) => void;
 		focusTextArea: () => void;
 		goToPath: (path: string) => void;
+		getIsChatBotVisible: () => boolean;
 	}
 ) => {
 	const { outputTypeRef } = refs;
-	const { toggleTextAreaDisabled, toggleIsBotTyping, focusTextArea, injectMessage, simulateStreamMessage } = actions;
+	const {
+		toggleTextAreaDisabled,
+		toggleIsBotTyping,
+		focusTextArea,
+		injectMessage,
+		simulateStreamMessage,
+		getIsChatBotVisible,
+	} = actions;
 
 	/**
 	 * Handles blocking of pre-processing and post-processing of block for full custom control.
@@ -67,11 +75,13 @@ const useProcessBlock = (
 				toggleIsBotTyping(false);
 				toggleTextAreaDisabled(false);
 				setTimeout(() => {
-					focusTextArea();
+					if (getIsChatBotVisible()) {
+						focusTextArea();
+					}
 				});
 			}
 		},
-		[toggleIsBotTyping, toggleTextAreaDisabled, focusTextArea]
+		[toggleIsBotTyping, toggleTextAreaDisabled, focusTextArea, getIsChatBotVisible]
 	);
 
 	// adds required events for block processing

src/hooks/useProcessBlock.ts

@@ -46,6 +46,7 @@ const handlePrompt = async (
 		toggleIsBotTyping: (active?: boolean) => void;
 		focusTextArea: () => void;
 		goToPath: (path: string) => void;
+		getIsChatBotVisible: () => boolean;
 	},
 	opts: { signal?: AbortSignal } = {}
 ): Promise<void> => {
@@ -61,6 +62,7 @@ const handlePrompt = async (
 		injectMessage,
 		streamMessage,
 		endStreamMessage,
+		getIsChatBotVisible,
 	} = actions;
 
 	const rawStream = refs.providerRef.current.sendMessages(messages);
@@ -80,7 +82,9 @@ const handlePrompt = async (
 		injectMessage(outputContent);
 		setTimeout(() => {
 			toggleTextAreaDisabled(false);
-			focusTextArea();
+			if (getIsChatBotVisible()) {
+				focusTextArea();
+			}
 		});
 	} else {
 		const formattedStream = formatStream(speakAndForward(rawStream, speakAudio), outputType, outputSpeed);
@@ -103,7 +107,9 @@ const handlePrompt = async (
 		endStreamMessage();
 		setTimeout(() => {
 			toggleTextAreaDisabled(false);
-			focusTextArea();
+			if (getIsChatBotVisible()) {
+				focusTextArea();
+			}
 		});
 	}
 };