feat: Add property for configuring llm to wait for user input

Author: tjtanjin

CHANGELOG.md

@@ -1,3 +1,8 @@
+## v0.4.0 (21-10-2025)
+
+**Added:**
+- Added a `waitForUserInput` property (defaults to `true`) within the `llmConnector` attribute - if set to `false`, the llm prompt will be fired upon entering the llm block (i.e. uses user input from previous block instead of waiting for the next user input)
+
 ## v0.3.2 (12-06-2025)
 
 **Fixed:**

package-lock.json

@@ -15,7 +15,7 @@
   "files": [
     "./dist"
   ],
-  "version": "0.3.2",
+  "version": "0.4.0",
   "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.39",
+    "react-chatbotify": "^2.4.1",
     "react-dom": ">=16.14.0"
   },
   "devDependencies": {

package.json

@@ -23,19 +23,28 @@ import { useMessageHandler } from '../hooks/useMessageHandler';
  * @param pluginConfig configurations for the plugin
  */
 const useRcbPlugin = (pluginConfig?: PluginConfig): ReturnType<Plugin> => {
+	const blockLoadedRef = useRef<boolean>(false);
 	const messagesRef = useRef<Message[]>([]);
 	const providerRef = useRef<Provider | null>(null);
 	const outputTypeRef = useRef<'character' | 'chunk' | 'full'>('chunk');
 	const outputSpeedRef = useRef<number>(30);
 	const historySizeRef = useRef<number>(0);
 	const initialMessageRef = useRef<string>('');
+	const waitForUserInputRef = useRef<boolean>(true);
 	const errorMessageRef = useRef<string>('Unable to get response, please try again.');
 	const onUserMessageRef = useRef<((msg: Message) => Promise<string | null>) | null>(null);
 	const onKeyDownRef = useRef<((e: KeyboardEvent) => Promise<string | null>) | null>(null);
 
 	const { getFlow } = useFlow();
 	const { speakAudio } = useAudio();
-	const { messages, injectMessage, simulateStreamMessage, streamMessage, endStreamMessage } = useMessages();
+	const { 
+		messages,
+		injectMessage,
+		simulateStreamMessage,
+		streamMessage,
+		endStreamMessage,
+		getMessages
+	} = useMessages();
 	const { goToPath } = usePaths();
 	const { toggleTextAreaDisabled, focusTextArea } = useTextArea();
 	const { toggleIsBotTyping, getIsChatBotVisible } = useChatWindow();
@@ -54,25 +63,29 @@ const useRcbPlugin = (pluginConfig?: PluginConfig): ReturnType<Plugin> => {
 		outputSpeedRef.current = block.llmConnector?.outputSpeed ?? 30;
 		historySizeRef.current = block.llmConnector?.historySize ?? 0;
 		initialMessageRef.current = block.llmConnector?.initialMessage ?? '';
+		waitForUserInputRef.current = block.llmConnector?.waitForUserInput ?? true;
 		errorMessageRef.current = block.llmConnector?.errorMessage ?? 'Unable to get response, please try again.';
 		onUserMessageRef.current = block.llmConnector?.stopConditions?.onUserMessage ?? null;
 		onKeyDownRef.current = block.llmConnector?.stopConditions?.onKeyDown ?? null;
 	});
 
 	const refs = {
+		blockLoadedRef,
 		providerRef,
 		messagesRef,
 		outputTypeRef,
 		outputSpeedRef,
 		historySizeRef,
 		initialMessageRef,
+		waitForUserInputRef,
 		errorMessageRef,
 		onUserMessageRef,
 		onKeyDownRef,
 	};
 
 	const actions = {
 		speakAudio,
+		getMessages,
 		injectMessage,
 		simulateStreamMessage,
 		streamMessage,

src/core/useRcbPlugin.tsx

@@ -22,18 +22,21 @@ const STREAM_DEBOUNCE_MS = 500;
  */
 const useMessageHandler = (
 	refs: {
+		blockLoadedRef: React.MutableRefObject<boolean>;
 		providerRef: React.MutableRefObject<Provider | null>;
 		messagesRef: React.MutableRefObject<Message[]>;
 		outputTypeRef: React.MutableRefObject<'character' | 'chunk' | 'full'>;
 		outputSpeedRef: React.MutableRefObject<number>;
 		historySizeRef: React.MutableRefObject<number>;
 		initialMessageRef: React.MutableRefObject<string>;
+		waitForUserInputRef: React.MutableRefObject<boolean>;
 		errorMessageRef: React.MutableRefObject<string>;
 		onUserMessageRef: React.MutableRefObject<((msg: Message) => Promise<string | null>) | null>;
 		onKeyDownRef: React.MutableRefObject<((e: KeyboardEvent) => Promise<string | null>) | null>;
 	},
 	actions: {
 		speakAudio: (text: string) => void;
+		getMessages: (sender?: string, numMessages?: number, offset?: number) => Message[] | null;
 		injectMessage: (content: string | JSX.Element, sender?: string) => Promise<Message | null>;
 		simulateStreamMessage: (content: string, sender?: string) => Promise<Message | null>;
 		streamMessage: (msg: string) => void;
@@ -47,6 +50,7 @@ const useMessageHandler = (
 ) => {
 	const { messagesRef, outputTypeRef, onUserMessageRef, onKeyDownRef, errorMessageRef } = refs;
 	const {
+		getMessages,
 		injectMessage,
 		simulateStreamMessage,
 		toggleTextAreaDisabled,
@@ -137,6 +141,18 @@ const useMessageHandler = (
 		window.addEventListener('keydown', onKey);
 		return () => window.removeEventListener('keydown', onKey);
 	}, []);
+
+	// calls handler once if block isn't loaded yet; then set it to true
+	useEffect(() => {
+		if (!refs.blockLoadedRef.current && refs.providerRef.current && !refs.waitForUserInputRef.current) {
+			const lastUserMessage = getMessages('user', 1)?.pop();
+			// create a mock event to trigger the handler
+			// todo: this approach is a little hacky, consider refactoring later
+			const fakeEvt = { data: { message: lastUserMessage } } as unknown as RcbPostInjectMessageEvent;
+			handler(fakeEvt);
+			refs.blockLoadedRef.current = true;
+		}
+	}, [handler]);
 };
 
 export { useMessageHandler };

src/hooks/useMessageHandler.ts

@@ -11,12 +11,14 @@ import { Provider } from '../types/Provider';
  */
 const useProcessBlock = (
 	refs: {
+		blockLoadedRef: React.MutableRefObject<boolean>;
 		providerRef: React.MutableRefObject<Provider | null>;
 		messagesRef: React.MutableRefObject<Message[]>;
 		outputTypeRef: React.MutableRefObject<'character' | 'chunk' | 'full'>;
 		outputSpeedRef: React.MutableRefObject<number>;
 		historySizeRef: React.MutableRefObject<number>;
 		initialMessageRef: React.MutableRefObject<string>;
+		waitForUserInputRef: React.MutableRefObject<boolean>;
 		errorMessageRef: React.MutableRefObject<string>;
 		onUserMessageRef: React.MutableRefObject<((msg: Message) => Promise<string | null>) | null>;
 		onKeyDownRef: React.MutableRefObject<((e: KeyboardEvent) => Promise<string | null>) | null>;

src/hooks/useProcessBlock.ts

@@ -12,6 +12,7 @@ export type LlmConnectorBlock = Block & {
 		historySize?: number;
 		initialMessage?: string;
 		errorMessage?: string;
+		waitForUserInput?: boolean;
 		stopConditions?: {
 			onUserMessage?: (message: Message) => Promise<string | null>;
 			onKeyDown?: (event: KeyboardEvent) => Promise<string | null>;