docs: Update docs for beta.29

Author: tjtanjin

docs/concepts/conversations.md

@@ -160,6 +160,7 @@ Not to be confused with `message` from the section on [**Attributes**](/docs/con
 
 - id (required) - an auto-generated uuidv4 `string`, uniquely identifying a message
 - content (required) - a `string` or `JSX.Element`, representing the content of the message
+- contentWrapper (optional) - a react component that wraps the message content (received via children) to enable custom styling or layout (niche use-case)
 - sender (required) - a `string` representing message sender (can be `user`, `bot` or `system`)
 - type (required) - a `string` that specifies "string" (for plain text) or "object" (for JSX elements)
 - timestamp (required) - a `string` representing the time the message was sent in UTC

docs/concepts/plugins.md

@@ -14,7 +14,7 @@ A newly added feature in **v2** of the chatbot, the `plugins` prop provides user
 There is a small group of official plugins maintained, which provide useful functionalities in common use cases. As of the last update, the list of official plugins are as below:
 
 - [**Input Validator**](https://github.com/react-chatbotify-plugins/input-validator)
-- [**Markdown Parser**](https://github.com/react-chatbotify-plugins/markdown-parser)
+- [**Markdown Renderer**](https://github.com/react-chatbotify-plugins/markdown-renderer)
 - [**LLM Connector**](https://github.com/react-chatbotify-plugins/llm-connector) (WIP)
 - [**Discord Live Chat**](https://github.com/react-chatbotify-plugins/discord-live-chat) (WIP)
 

docs/examples/_category_.json

@@ -1,4 +1,4 @@
 {
   "label": "Examples",
-  "position": 5
+  "position": 6
 }

docs/examples/input_validation.md

@@ -5,7 +5,7 @@ description: input validation chatbot example
 keywords: [react, chat, chatbot, chatbotify]
 ---
 
-# Custom Icon
+# Input Validation
 
 The following is an example for performing user input validation. It leverages on the [**Input Validator Plugin**](https://www.npmjs.com/package/@rcb-plugins/input-validator), which is maintained separately on the [**React ChatBotify Plugins**](https://github.com/orgs/React-ChatBotify-Plugins) organization. If you require support with the plugin, please reach out to support on the [**plugins discord**](https://discord.gg/J6pA4v3AMW) instead.
 

docs/examples/markdown_render.md

@@ -0,0 +1,46 @@
+---
+sidebar_position: 23
+title: Markdown Render
+description: markdown render chatbot example
+keywords: [react, chat, chatbot, chatbotify]
+---
+
+# Markdown Render
+
+The following is an example for rendering markdown messages. It leverages on the [**Markdown Renderer Plugin**](https://www.npmjs.com/package/@rcb-plugins/markdown-renderer), which is maintained separately on the [**React ChatBotify Plugins**](https://github.com/orgs/React-ChatBotify-Plugins) organization. If you require support with the plugin, please reach out to support on the [**plugins discord**](https://discord.gg/J6pA4v3AMW) instead.
+
+```jsx live noInline title=MyChatBot.js
+const MyChatBot = () => {
+	// loads markdown renderer plugin to be passed into chatbot
+	const plugins = [MarkdownRenderer()];
+
+	// example flow for rendering markdown
+	const flow: Flow = {
+		start: {
+			message: "### Hey there, feel free to send me a markdown message!",
+			path: "try_again",
+			renderMarkdown: ["BOT", "USER"],
+		} as MarkdownRendererBlock,
+		try_again : {
+			message: "Interesting, **give it a try again**!",
+			path: "try_again",
+            renderMarkdown: ["BOT", "USER"],
+		} as MarkdownRendererBlock,
+	}
+	
+	const settings = {
+		general: {
+			embedded: true
+		},
+		chatHistory: {
+			storageKey: "example_markdown_render"
+		}
+	}
+
+	return (
+		<ChatBot plugins={plugins} settings={settings} flow={flow}/>
+	);
+};
+
+render(<MyChatBot/>)
+```

docs/faq.md

@@ -1,5 +1,5 @@
 ---
-sidebar_position: 6
+sidebar_position: 5
 title: FAQ
 description: content describing chatbot faq
 keywords: [react, chat, chatbot, chatbotify]

package-lock.json

@@ -23,11 +23,12 @@
     "@google/generative-ai": "^0.2.1",
     "@mdx-js/react": "^3.0.1",
     "@rcb-plugins/input-validator": "^0.1.1",
+    "@rcb-plugins/markdown-renderer": "^0.1.0",
     "clsx": "^1.2.1",
     "openai": "^4.47.1",
     "prism-react-renderer": "^2.3.1",
     "react": "^18.2.0",
-    "react-chatbotify": "^2.0.0-beta.26",
+    "react-chatbotify": "^2.0.0-beta.29",
     "react-dom": "^18.2.0",
     "react-github-btn": "^1.4.0"
   },

package.json

@@ -5,6 +5,7 @@ import ExecutionEnvironment from "@docusaurus/ExecutionEnvironment";
 
 let ChatBot = null;
 let InputValidator = null;
+let MarkdownRenderer = null;
 let reactChatbotify = {};
 
 if (ExecutionEnvironment.canUseDOM) {
@@ -16,13 +17,17 @@ if (ExecutionEnvironment.canUseDOM) {
 
 	// imports rcb plugin - input validator
 	InputValidator = require("@rcb-plugins/input-validator");
+
+	// imports rcb plugin - markdown renderer
+	MarkdownRenderer = require("@rcb-plugins/markdown-renderer");
 }
 
 const ReactLiveScope = {
 	React,
 	ChatBot,
 	...reactChatbotify,
 	InputValidator,
+	MarkdownRenderer,
 	GoogleGenerativeAI,
 	OpenAI,
 };