feat: Expand support for senders

Author: tjtanjin

.prettierrc

@@ -0,0 +1,7 @@
+{
+	"useTabs": true,
+	"tabWidth": 4,
+	"printWidth": 120,
+	"singleQuote": true,
+	"trailingComma": "es5"
+}

CHANGELOG.md

@@ -1,3 +1,8 @@
+## v0.3.0 (11-06-2025)
+
+**Added:**
+- The `renderHtml` attribute now accepts **any** sender types (previously only `BOT` and `USER`)
+
 ## v0.2.0 (23-04-2025)
 
 **Added:**

package-lock.json

@@ -3,17 +3,16 @@
   "homepage": "https://github.com/React-ChatBotify-Plugins/html-renderer",
   "keywords": [
     "react",
-    "chat",
-    "chatbot",
-    "conversational-bot",
-    "conversational-ui",
     "frontend-library",
-    "plugins"
+    "plugins",
+    "html",
+    "react-chatbotify",
+    "react-chatbotify-plugin"
   ],
   "files": [
     "./dist"
   ],
-  "version": "0.2.0",
+  "version": "0.3.0",
   "description": "A simple plugin for rendering html messages in React ChatBotify.",
   "type": "module",
   "main": "./dist/index.cjs",
@@ -33,6 +32,7 @@
     "start": "vite serve",
     "build": "tsc -b && vite build",
     "lint": "eslint --fix \"**/*.{ts,tsx}\"",
+    "format": "prettier --write \"{src,test,types}/**/*.{ts,tsx,js,json,md}\"",
     "preview": "vite preview",
     "prepack": "tsc && vite build",
     "unit:test": "jest __tests__/"
@@ -45,8 +45,8 @@
   },
   "peerDependencies": {
     "react": ">=16.14.0",
-    "react-dom": ">=16.14.0",
-    "react-chatbotify": "^2.0.0-beta.33"
+    "react-chatbotify": "^2.0.0-beta.38",
+    "react-dom": ">=16.14.0"
   },
   "devDependencies": {
     "@eslint/js": "^9.20.0",
@@ -60,6 +60,7 @@
     "globals": "^15.15.0",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
+    "prettier": "^3.5.3",
     "ts-jest": "^29.2.6",
     "typescript": "^5.7.3",
     "typescript-eslint": "^8.24.0",

package.json

@@ -1,37 +1,31 @@
-import ChatBot, { Flow, Params } from "react-chatbotify";
-
-import RcbPlugin from "./factory/RcbPluginFactory";
-import { HtmlRendererBlock } from "./types/HtmlRendererBlock";
-import HtmlWrapper from "./components/HtmlWrapper";
-
-const App = () => {
-	// initialize the plugin
-	const plugins = [RcbPlugin({htmlComponent: HtmlWrapper})];
-
-	// example flow for testing
-	const flow: Flow = {
-		start: {
-			message: "<h4>Hello! I'm rendering messages in html, you can type to me in html too!</h4>",
-			path: "loop",
-			renderHtml: ["BOT", "USER"],
-		} as HtmlRendererBlock,
-		loop : {
-			message: async (params: Params) => {
-				await params.injectMessage(`This is pretty cool <b>isn't it?</b>!`);
-			},
-			chatDisabled: false,
-			path: "loop",
-			renderHtml: ["BOT", "USER"],
-		} as HtmlRendererBlock,
-	}
-
-	return (
-		<ChatBot
-			id="chatbot-id"
-			plugins={plugins}
-			flow={flow}
-		></ChatBot>
-	);
-}
-
-export default App;
+import ChatBot, { Flow, Params } from 'react-chatbotify';
+
+import RcbPlugin from './factory/RcbPluginFactory';
+import { HtmlRendererBlock } from './types/HtmlRendererBlock';
+import HtmlWrapper from './components/HtmlWrapper';
+
+const App = () => {
+	// initialize the plugin
+	const plugins = [RcbPlugin({ htmlComponent: HtmlWrapper })];
+
+	// example flow for testing
+	const flow: Flow = {
+		start: {
+			message: "<h4>Hello! I'm rendering messages in html, you can type to me in html too!</h4>",
+			path: 'loop',
+			renderHtml: ['BOT', 'USER'],
+		} as HtmlRendererBlock,
+		loop: {
+			message: async (params: Params) => {
+				await params.injectMessage(`This is pretty cool <b>isn't it?</b>!`);
+			},
+			chatDisabled: false,
+			path: 'loop',
+			renderHtml: ['BOT', 'USER'],
+		} as HtmlRendererBlock,
+	};
+
+	return <ChatBot id="chatbot-id" plugins={plugins} flow={flow}></ChatBot>;
+};
+
+export default App;

src/App.tsx

@@ -1,20 +1,14 @@
-import { Interweave } from "interweave";
+import { Interweave } from 'interweave';
 
 /**
  * Renders html content passed as children.
  *
  * @param children html text to render
  */
-const HtmlWrapper = ({
-	children
-}: {
-	children: React.ReactNode
-}) => {
-    // ensures that htmlText is a string
-	const htmlText = typeof children === "string" ? children : "";
-	return (
-		<Interweave content={htmlText} />
-	);
+const HtmlWrapper = ({ children }: { children: React.ReactNode }) => {
+	// ensures that htmlText is a string
+	const htmlText = typeof children === 'string' ? children : '';
+	return <Interweave content={htmlText} />;
 };
 
 export default HtmlWrapper;

src/components/HtmlWrapper.tsx

@@ -2,5 +2,5 @@
  * Default values for plugin config.
  */
 export const DefaultPluginConfig = {
-    autoConfig: true,
-}
+	autoConfig: true,
+};