feat: Add support for simulate stream events

Author: tjtanjin

CHANGELOG.md

@@ -1,3 +1,11 @@
+## v0.2.0 (23-04-2025)
+
+**Added:**
+- Added support for capturing simulated message stream events, available on React ChatBotify **v2.0.0-beta.33 and above**
+
+**Fixed:**
+- Fixed version compatibility to correctly reflect support for React 16.14.0 and above
+
 ## v0.1.0 (25-02-2025)
 
 **Added:**

package-lock.json

@@ -44,9 +44,9 @@
     "url": "https://github.com/React-ChatBotify-Plugins/html-renderer"
   },
   "peerDependencies": {
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
-    "react-chatbotify": "^2.0.0-beta.31"
+    "react": ">=16.14.0",
+    "react-dom": ">=16.14.0",
+    "react-chatbotify": "^2.0.0-beta.33"
   },
   "devDependencies": {
     "@eslint/js": "^9.20.0",

package.json

@@ -28,7 +28,6 @@ const App = () => {
 	return (
 		<ChatBot
 			id="chatbot-id"
-			settings={{audio: {disabled: false}, botBubble: {simStream: false}}}
 			plugins={plugins}
 			flow={flow}
 		></ChatBot>

src/App.tsx

@@ -10,6 +10,7 @@ import {
 	useMessages,
 	useSettings,
 	useChatHistory,
+	RcbStartSimulateStreamMessageEvent,
 } from "react-chatbotify";
 
 import HtmlWrapper from "../components/HtmlWrapper";
@@ -55,7 +56,8 @@ const useRcbPlugin = (pluginConfig?: PluginConfig) => {
 		 * @param event message event received
 		 */
 		const handleMessageEvent = async (
-			event: RcbPreInjectMessageEvent | RcbChunkStreamMessageEvent | RcbStartStreamMessageEvent
+			event: RcbPreInjectMessageEvent | RcbChunkStreamMessageEvent
+			| RcbStartSimulateStreamMessageEvent | RcbStartStreamMessageEvent
 		) => {
 			const sender = event.data.message?.sender.toUpperCase();
 
@@ -69,8 +71,8 @@ const useRcbPlugin = (pluginConfig?: PluginConfig) => {
 				return;
 			}
 
-			if (event.type === "rcb-pre-inject-message") {
-				(event as RcbPreInjectMessageEvent).data.simStreamChunker = parseHtmlMessage;
+			if (event.type === "rcb-start-simulate-stream-message") {
+				(event as RcbStartSimulateStreamMessageEvent).data.simulateStreamChunker = parseHtmlMessage;
 			}
 
 			event.data.message.contentWrapper = component;
@@ -100,12 +102,14 @@ const useRcbPlugin = (pluginConfig?: PluginConfig) => {
 		window.addEventListener("rcb-pre-inject-message", handleMessageEvent);
 		window.addEventListener("rcb-chunk-stream-message", handleMessageEvent);
 		window.addEventListener("rcb-start-stream-message", handleMessageEvent);
+		window.addEventListener("rcb-start-simulate-stream-message", handleMessageEvent);
 		window.addEventListener("rcb-start-speak-audio", handleAudioEvent);
 
 		return () => {
 			window.removeEventListener("rcb-pre-inject-message", handleMessageEvent);
 			window.removeEventListener("rcb-chunk-stream-message", handleMessageEvent);
 			window.removeEventListener("rcb-start-stream-message", handleMessageEvent);
+			window.removeEventListener("rcb-start-simulate-stream-message", handleMessageEvent);
 			window.removeEventListener("rcb-start-speak-audio", handleAudioEvent);
 		};
 	}, [getBotId, getFlow, shouldRenderHtml]);
@@ -121,6 +125,7 @@ const useRcbPlugin = (pluginConfig?: PluginConfig) => {
 			event: {
 				rcbPreInjectMessage: true,
 				rcbChunkStreamMessage: true,
+				rcbStartSimulateStreamMessage: true,
 				rcbStartStreamMessage: true,
 				rcbStartSpeakAudio: true,
 			},

src/core/useRcbPlugin.tsx

@@ -19,6 +19,8 @@ import {
 	RcbTextAreaChangeValueEvent,
 	RcbPreLoadChatBotEvent,
 	RcbPostLoadChatBotEvent,
+	RcbStartSimulateStreamMessageEvent,
+	RcbStopSimulateStreamMessageEvent,
 } from "react-chatbotify";
 
 declare global {
@@ -40,6 +42,8 @@ declare global {
 		// messages
 		"rcb-pre-inject-message": RcbPreInjectMessageEvent;
 		"rcb-post-inject-message": RcbPostInjectMessageEvent;
+		"rcb-start-simulate-stream-message": RcbStartSimulateStreamMessageEvent;
+		"rcb-stop-simulate-stream-message": RcbStopSimulateStreamMessageEvent;
 		"rcb-start-stream-message": RcbStartStreamMessageEvent;
 		"rcb-chunk-stream-message": RcbChunkStreamMessageEvent;
 		"rcb-stop-stream-message": RcbStopStreamMessageEvent;