refactor: Minor code cleanup

Author: tjtanjin

package-lock.json

@@ -52,7 +52,7 @@
   "peerDependencies": {
     "react": ">=16.14.0",
     "react-dom": ">=16.14.0",
-    "react-chatbotify": "^2.0.0-beta.36",
+    "react-chatbotify": "^2.0.0-beta.37",
     "@mlc-ai/web-llm": "^0.2.78",
     "@wllama/wllama": "^2.3.1"
   },

package.json

@@ -20,10 +20,7 @@ const App = () => {
 	];
 
 	const onUserMessageCheck = async (message: Message) => {
-		if (
-			typeof message.content === 'string' &&
-			message.content.toUpperCase() === 'RESTART'
-		) {
+		if (typeof message.content === 'string' && message.content.toUpperCase() === 'RESTART') {
 			return 'start';
 		}
 	};
@@ -33,7 +30,7 @@ const App = () => {
 			return 'start';
 		}
 		return null;
-	}
+	};
 
 	// example flow for testing
 	const flow: Flow = {
@@ -52,16 +49,23 @@ const App = () => {
 					await params.simulateStreamMessage(
 						`You selected ${params.userInput}. This model runs in your browser, so responses may be slower and less accurate.`
 					);
-				// if gemini/openai chosen, check for presence of api keys since examples are running in 'direct' mode
+					// if gemini/openai chosen, check for presence of api keys since examples are running in 'direct' mode
 				} else {
-					if ((params.userInput === "Gemini" && !geminiApiKey) || (params.userInput === "OpenAI" && !openaiApiKey)) {
-						await params.simulateStreamMessage(`You selected ${params.userInput} in 'direct' mode but no API key was set!`);
-						return "start";
+					if (
+						(params.userInput === 'Gemini' && !geminiApiKey) ||
+						(params.userInput === 'OpenAI' && !openaiApiKey)
+					) {
+						await params.simulateStreamMessage(
+							`You selected ${params.userInput} in 'direct' mode but no API key was set!`
+						);
+						return 'start';
 					} else {
 						await params.simulateStreamMessage(`You selected ${params.userInput}, ask away!`);
 					}
 				}
-				await params.simulateStreamMessage("You may type 'RESTART' or hit the 'ESC' key to select another model.")
+				await params.simulateStreamMessage(
+					"You may type 'RESTART' or hit the 'ESC' key to select another model."
+				);
 				return params.userInput.toLowerCase();
 			},
 		} as LlmConnectorBlock,
@@ -80,7 +84,8 @@ const App = () => {
 		wllama: {
 			llmConnector: {
 				provider: new WllamaProvider({
-					modelUrl: 'https://huggingface.co/HuggingFaceTB/SmolLM2-360M-Instruct-GGUF/resolve/main/smollm2-360m-instruct-q8_0.gguf',
+					modelUrl:
+						'https://huggingface.co/HuggingFaceTB/SmolLM2-360M-Instruct-GGUF/resolve/main/smollm2-360m-instruct-q8_0.gguf',
 					loadModelConfig: {
 						n_ctx: 8192,
 					},
@@ -124,13 +129,7 @@ const App = () => {
 		} as LlmConnectorBlock,
 	};
 
-	return (
-		<ChatBot
-			id="chatbot-id"
-			plugins={plugins}
-			flow={flow}
-		></ChatBot>
-	);
+	return <ChatBot id="chatbot-id" plugins={plugins} flow={flow}></ChatBot>;
 };
 
 export default App;

src/App.tsx

@@ -1,6 +1,5 @@
 import { useEffect, useRef } from 'react';
 import {
-	useBotId,
 	useFlow,
 	Plugin,
 	useAudio,
@@ -29,12 +28,11 @@ const useRcbPlugin = (pluginConfig?: PluginConfig): ReturnType<Plugin> => {
 	const outputTypeRef = useRef<'character' | 'chunk' | 'full'>('chunk');
 	const outputSpeedRef = useRef<number>(30);
 	const historySizeRef = useRef<number>(0);
-	const initialMessageRef = useRef<string>("");
+	const initialMessageRef = useRef<string>('');
 	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 { getBotId } = useBotId();
 	const { getFlow } = useFlow();
 	const { speakAudio } = useAudio();
 	const { messages, injectMessage, simulateStreamMessage, streamMessage, endStreamMessage } = useMessages();
@@ -50,12 +48,12 @@ const useRcbPlugin = (pluginConfig?: PluginConfig): ReturnType<Plugin> => {
 	}, [messages]);
 
 	// handles changing of conversation path (block)
-	useChangePath(getBotId, getFlow, (block) => {
+	useChangePath(getFlow, (block) => {
 		providerRef.current = block.llmConnector?.provider ?? null;
 		outputTypeRef.current = block.llmConnector?.outputType ?? 'chunk';
 		outputSpeedRef.current = block.llmConnector?.outputSpeed ?? 30;
 		historySizeRef.current = block.llmConnector?.historySize ?? 0;
-		initialMessageRef.current = block.llmConnector?.initialMessage ?? "";
+		initialMessageRef.current = block.llmConnector?.initialMessage ?? '';
 		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;
@@ -86,10 +84,10 @@ const useRcbPlugin = (pluginConfig?: PluginConfig): ReturnType<Plugin> => {
 	};
 
 	// handles pre-processing and post-processing of blocks.
-	useProcessBlock(getBotId, refs, actions);
+	useProcessBlock(refs, actions);
 
 	// handles message events
-	useMessageHandler(getBotId, refs, actions);
+	useMessageHandler(refs, actions);
 
 	// initializes plugin metadata with plugin name
 	const pluginMetaData: ReturnType<Plugin> = { name: '@rcb-plugins/llm-connector' };

src/core/useRcbPlugin.tsx

@@ -1,47 +1,34 @@
-import { useEffect, useCallback } from 'react';
-import { Flow, RcbChangePathEvent } from 'react-chatbotify';
+import { useCallback } from 'react';
+import { Flow, RcbChangePathEvent, RcbEvent, useOnRcbEvent } from 'react-chatbotify';
 
 import { LlmConnectorBlock } from '../types/LlmConnectorBlock';
 
 /**
  * Handles changing of conversation path (block).
  *
- * @param getBotId id of the chatbot
  * @param getFlow flow of the chatbot
  * @param setConnectorBlockFields sets all fields required for llm connector block
  */
-const useChangePath = (
-	getBotId: () => string | null,
-	getFlow: () => Flow,
-	setConnectorBlockFields: (block: LlmConnectorBlock) => void
-) => {
+const useChangePath = (getFlow: () => Flow, setConnectorBlockFields: (block: LlmConnectorBlock) => void) => {
 	/**
 	 * Handles setting of provider on change of path.
 	 *
 	 * @param event change path event received
 	 */
 	const handler = useCallback(
 		(event: RcbChangePathEvent) => {
-			// if event is not for chatbot, return
-			if (getBotId() !== event.detail.botId) {
-				return;
-			}
-
 			// update llm connector block fields
 			// if is llm connector block, will populate valid fields
 			// else will reset all to null
 			const flow = getFlow();
 			const nextBlock = flow[event.data.nextPath] as LlmConnectorBlock;
 			setConnectorBlockFields(nextBlock);
 		},
-		[getBotId, getFlow, setConnectorBlockFields]
+		[getFlow, setConnectorBlockFields]
 	);
 
 	// adds required events for change path
-	useEffect(() => {
-		window.addEventListener('rcb-change-path', handler);
-		return () => window.removeEventListener('rcb-change-path', handler);
-	}, [handler]);
+	useOnRcbEvent(RcbEvent.CHANGE_PATH, handler);
 };
 
 export { useChangePath };

src/hooks/useChangePath.ts

@@ -4,6 +4,8 @@ import {
 	RcbStopStreamMessageEvent,
 	RcbStopSimulateStreamMessageEvent,
 	Message,
+	useOnRcbEvent,
+	RcbEvent,
 } from 'react-chatbotify';
 import { handlePrompt } from '../utils/promptHandler';
 import { Provider } from '../types/Provider';
@@ -15,12 +17,10 @@ const STREAM_DEBOUNCE_MS = 500;
 /**
  * Handles message events.
  *
- * @param getBotId id of the chatbot
  * @param refs object containing relevant refs
  * @param actions object containing relevant actions
  */
 const useMessageHandler = (
-	getBotId: () => string | null,
 	refs: {
 		providerRef: React.MutableRefObject<Provider | null>;
 		messagesRef: React.MutableRefObject<Message[]>;
@@ -45,17 +45,11 @@ const useMessageHandler = (
 	}
 ) => {
 	const { messagesRef, outputTypeRef, onUserMessageRef, onKeyDownRef, errorMessageRef } = refs;
-	const {
-		injectMessage,
-		simulateStreamMessage,
-		toggleTextAreaDisabled,
-		toggleIsBotTyping,
-		goToPath,
-		focusTextArea
-	} = actions;
+	const { injectMessage, simulateStreamMessage, toggleTextAreaDisabled, toggleIsBotTyping, goToPath, focusTextArea } =
+		actions;
 
 	// controller to abort streaming responses if required
-    const abortControllerRef = useRef<AbortController | null>(null);
+	const abortControllerRef = useRef<AbortController | null>(null);
 
 	/**
 	 * Handles message events to determine whether to prompt LLM.
@@ -64,7 +58,7 @@ const useMessageHandler = (
 	 */
 	const handler = useCallback(
 		(event: RcbPostInjectMessageEvent | RcbStopStreamMessageEvent | RcbStopSimulateStreamMessageEvent) => {
-			if (getBotId() !== event.detail.botId || !refs.providerRef.current) {
+			if (!refs.providerRef.current) {
 				return;
 			}
 			const msg = event.data.message!;
@@ -90,10 +84,10 @@ const useMessageHandler = (
 				const historySize = refs.historySizeRef.current;
 				const past = messagesRef.current;
 				const messagesToSend = historySize ? [...past.slice(-(historySize - 1)), msg] : [msg];
-				
+
 				// create & stash a new controller
-                const ctrl = new AbortController();
-                abortControllerRef.current = ctrl;
+				const ctrl = new AbortController();
+				abortControllerRef.current = ctrl;
 
 				handlePrompt(messagesToSend, refs, actions, { signal: ctrl.signal }).catch((err) => {
 					toggleIsBotTyping(false);
@@ -102,28 +96,21 @@ const useMessageHandler = (
 						focusTextArea();
 					});
 					console.error('LLM prompt failed', err);
-					if (outputTypeRef.current === "full") {
+					if (outputTypeRef.current === 'full') {
 						injectMessage(errorMessageRef.current);
 					} else {
 						simulateStreamMessage(errorMessageRef.current);
 					}
 				});
 			}, STREAM_DEBOUNCE_MS);
 		},
-		[getBotId, refs, actions]
+		[refs, actions]
 	);
 
 	// adds required events for message streaming
-	useEffect(() => {
-		window.addEventListener('rcb-post-inject-message', handler);
-		window.addEventListener('rcb-stop-simulate-stream-message', handler);
-		window.addEventListener('rcb-stop-stream-message', handler);
-		return () => {
-			window.removeEventListener('rcb-post-inject-message', handler);
-			window.removeEventListener('rcb-stop-simulate-stream-message', handler);
-			window.removeEventListener('rcb-stop-stream-message', handler);
-		};
-	}, [handler]);
+	useOnRcbEvent(RcbEvent.POST_INJECT_MESSAGE, handler);
+	useOnRcbEvent(RcbEvent.STOP_SIMULATE_STREAM_MESSAGE, handler);
+	useOnRcbEvent(RcbEvent.STOP_STREAM_MESSAGE, handler);
 
 	// handles keydown event for stop condition
 	useEffect(() => {
@@ -133,8 +120,8 @@ const useMessageHandler = (
 				if (path) {
 					abortControllerRef.current?.abort();
 					abortControllerRef.current = null;
-					goToPath(path)
-				};
+					goToPath(path);
+				}
 			}
 		};
 		window.addEventListener('keydown', onKey);

src/hooks/useMessageHandler.ts

@@ -1,17 +1,15 @@
-import { useEffect, useCallback } from 'react';
-import { RcbPreProcessBlockEvent, RcbPostProcessBlockEvent, Message } from 'react-chatbotify';
+import { useCallback } from 'react';
+import { RcbPreProcessBlockEvent, RcbPostProcessBlockEvent, Message, RcbEvent, useOnRcbEvent } from 'react-chatbotify';
 import { LlmConnectorBlock } from '../types/LlmConnectorBlock';
 import { Provider } from '../types/Provider';
 
 /**
  * Handles pre-processing and post-processing of blocks.
  *
- * @param getBotId id of the chatbot
  * @param refs object containing relevant refs
  * @param actions object containing relevant actions
  */
 const useProcessBlock = (
-	getBotId: () => string | null,
 	refs: {
 		providerRef: React.MutableRefObject<Provider | null>;
 		messagesRef: React.MutableRefObject<Message[]>;
@@ -45,11 +43,6 @@ const useProcessBlock = (
 	 */
 	const handler = useCallback(
 		(event: RcbPreProcessBlockEvent | RcbPostProcessBlockEvent) => {
-			// if event is not for chatbot, return
-			if (getBotId() !== event.detail.botId) {
-				return;
-			}
-
 			// if not an llm connector block, return
 			const block = event.data.block as LlmConnectorBlock;
 			if (!block.llmConnector) {
@@ -65,7 +58,7 @@ const useProcessBlock = (
 			// disabling typing indicator, enabling text area and focusing on it again
 			if (event.type === 'rcb-pre-process-block') {
 				if (block.llmConnector?.initialMessage) {
-					if (outputTypeRef.current === "full") {
+					if (outputTypeRef.current === 'full') {
 						injectMessage(refs.initialMessageRef.current);
 					} else {
 						simulateStreamMessage(refs.initialMessageRef.current);
@@ -78,18 +71,11 @@ const useProcessBlock = (
 				});
 			}
 		},
-		[getBotId, toggleIsBotTyping, toggleTextAreaDisabled, focusTextArea]
+		[toggleIsBotTyping, toggleTextAreaDisabled, focusTextArea]
 	);
 
 	// adds required events for block processing
-	useEffect(() => {
-		window.addEventListener('rcb-pre-process-block', handler);
-		window.addEventListener('rcb-post-process-block', handler);
-		return () => {
-			window.removeEventListener('rcb-pre-process-block', handler);
-			window.removeEventListener('rcb-post-process-block', handler);
-		};
-	}, [handler]);
+	useOnRcbEvent(RcbEvent.PRE_PROCESS_BLOCK, handler);
+	useOnRcbEvent(RcbEvent.POST_PROCESS_BLOCK, handler);
 };
-
 export { useProcessBlock };