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 `renderMarkdown` attribute now accepts **any** sender types (previously only `BOT` and `USER`)
+
 ## v0.2.0 (23-04-2025)
 
 **Added:**

README.md

@@ -114,7 +114,7 @@ As you may be able to tell from above, there are 5 configurable sections within
 
 #### Rendering Markdown
 
-To render markdown in messages, add the `renderMarkdown` attribute to any Block that requires markdown rendering. The `renderMarkdown` attribute is an array that accepts `"USER"` and/or `"BOT"`. An example can be seen below:
+To render markdown in messages, add the `renderMarkdown` attribute to any Block that requires markdown rendering. The `renderMarkdown` attribute is an array that accepts senders such as `"USER"` and/or `"BOT"`. An example can be seen below:
 
 ```javascript
 import ChatBot from "react-chatbotify";

package-lock.json

@@ -3,17 +3,16 @@
   "homepage": "https://github.com/React-ChatBotify-Plugins/markdown-renderer",
   "keywords": [
     "react",
-    "chat",
-    "chatbot",
-    "conversational-bot",
-    "conversational-ui",
     "frontend-library",
-    "plugins"
+    "plugins",
+    "markdown",
+    "react-chatbotify",
+    "react-chatbotify-plugin"
   ],
   "files": [
     "./dist"
   ],
-  "version": "0.2.0",
+  "version": "0.3.0",
   "description": "A simple plugin for rendering markdown 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"
   },
@@ -44,8 +44,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",
@@ -56,6 +56,7 @@
     "eslint-plugin-react-hooks": "^5.1.0",
     "eslint-plugin-react-refresh": "^0.4.19",
     "globals": "^15.15.0",
+    "prettier": "^3.5.3",
     "typescript": "^5.7.3",
     "typescript-eslint": "^8.24.0",
     "vite": "^6.1.0",

package.json

@@ -1,41 +1,35 @@
-import ChatBot, { Flow, Params } from "react-chatbotify";
-
-import RcbPlugin from "./factory/RcbPluginFactory";
-import { MarkdownRendererBlock } from "./types/MarkdownRendererBlock";
-import MarkdownWrapper from "./components/MarkdownWrapper";
-
-const App = () => {
-	// initialize the plugin
-	const plugins = [RcbPlugin({markdownComponent: MarkdownWrapper})];
-
-	// example flow for testing
-	const flow: Flow = {
-		start: {
-			message: "#### Hello! I'm rendering messages in markdown, you can type to me in markdown too!",
-			path: "loop",
-			renderMarkdown: ["BOT", "USER"],
-		} as MarkdownRendererBlock,
-		loop : {
-			message: async (params: Params) => {
-				await params.injectMessage(`Hey, here's a simple code block below:\\\
-
-					\`\`\`const greeting = "hello!";\`\`\`\\\
-
-					Pretty cool isn't it? Try again!`);
-			},
-			chatDisabled: false,
-			path: "loop",
-			renderMarkdown: ["BOT", "USER"],
-		} as MarkdownRendererBlock,
-	}
-
-	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 { MarkdownRendererBlock } from './types/MarkdownRendererBlock';
+import MarkdownWrapper from './components/MarkdownWrapper';
+
+const App = () => {
+	// initialize the plugin
+	const plugins = [RcbPlugin({ markdownComponent: MarkdownWrapper })];
+
+	// example flow for testing
+	const flow: Flow = {
+		start: {
+			message: "#### Hello! I'm rendering messages in markdown, you can type to me in markdown too!",
+			path: 'loop',
+			renderMarkdown: ['BOT', 'USER'],
+		} as MarkdownRendererBlock,
+		loop: {
+			message: async (params: Params) => {
+				await params.injectMessage(`Hey, here's a simple code block below:\\\
+
+					\`\`\`const greeting = "hello!";\`\`\`\\\
+
+					Pretty cool isn't it? Try again!`);
+			},
+			chatDisabled: false,
+			path: 'loop',
+			renderMarkdown: ['BOT', 'USER'],
+		} as MarkdownRendererBlock,
+	};
+
+	return <ChatBot id="chatbot-id" plugins={plugins} flow={flow}></ChatBot>;
+};
+
+export default App;

src/App.tsx

@@ -1,17 +1,13 @@
-import ReactMarkdown from "react-markdown";
+import ReactMarkdown from 'react-markdown';
 
 /**
  * Renders markdown content passed as children.
  *
  * @param children markdown text to render
  */
-const MarkdownWrapper = ({
-	children
-}: {
-	children: React.ReactNode
-}) => {
-    // ensures that markdownText is a string
-	const markdownText = typeof children === "string" ? children : "";
+const MarkdownWrapper = ({ children }: { children: React.ReactNode }) => {
+	// ensures that markdownText is a string
+	const markdownText = typeof children === 'string' ? children : '';
 	return (
 		<ReactMarkdown
 			components={{

src/components/MarkdownWrapper.tsx

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