feat: Add input validation example

Author: tjtanjin

docs/concepts/plugins.md

@@ -15,8 +15,8 @@ There is a small group of official plugins maintained, which provide useful func
 
 - [**Input Validator**](https://github.com/react-chatbotify-plugins/input-validator)
 - [**Markdown Parser**](https://github.com/react-chatbotify-plugins/markdown-parser)
-- [**llm-connector**](https://github.com/react-chatbotify-plugins/llm-connector) (WIP)
-- [**discord-live-chat**](https://github.com/react-chatbotify-plugins/discord-live-chat) (WIP)
+- [**LLM Connector**](https://github.com/react-chatbotify-plugins/llm-connector) (WIP)
+- [**Discord Live Chat**](https://github.com/react-chatbotify-plugins/discord-live-chat) (WIP)
 
 If you strongly believe that there are common use cases with no suitable plugins, you may feel free to make a suggestion for one on [**discord**](https://discord.gg/J6pA4v3AMW).
 

docs/examples/input_validation.md

@@ -0,0 +1,50 @@
+---
+sidebar_position: 22
+title: Input Validation
+description: input validation chatbot example
+keywords: [react, chat, chatbot, chatbotify]
+---
+
+# Custom Icon
+
+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.
+
+```jsx live noInline title=MyChatBot.js
+const MyChatBot = () => {
+	// loads input validator plugin to be passed into chatbot
+	const plugins = [InputValidator()];
+
+	// example flow for testing validation that age must be a number
+	const flow: Flow = {
+		start: {
+			message: "Hey there, please enter your age!",
+			path: "try_again",
+			validateInput: (userInput: string) => {
+				if (typeof userInput === "string" && !Number.isNaN(Number(userInput))) {
+					return {success: true};
+				}
+				return {success: false, promptContent: "Age must be a number!", promptDuration: 3000, promptType: "error", highlightTextArea: true};
+			}
+		} as InputValidatorBlock,
+		try_again : {
+			message: "Nice, you passed the input validation!",
+			path: "start",
+		}
+	}
+	
+	const settings = {
+		general: {
+			embedded: true
+		},
+		chatHistory: {
+			storageKey: "example_input_validation"
+		}
+	}
+
+	return (
+		<ChatBot plugins={plugins} settings={settings} flow={flow}/>
+	);
+};
+
+render(<MyChatBot/>)
+```

package-lock.json

@@ -22,11 +22,12 @@
     "@docusaurus/theme-live-codeblock": "^3.2.0",
     "@google/generative-ai": "^0.2.1",
     "@mdx-js/react": "^3.0.1",
+    "@rcb-plugins/input-validator": "^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.23",
+    "react-chatbotify": "^2.0.0-beta.24",
     "react-dom": "^18.2.0",
     "react-github-btn": "^1.4.0"
   },

package.json

@@ -4,19 +4,25 @@ import OpenAI from "openai";
 import ExecutionEnvironment from "@docusaurus/ExecutionEnvironment";
 
 let ChatBot = null;
+let InputValidator = null;
 let reactChatbotify = {};
 
 if (ExecutionEnvironment.canUseDOM) {
+	// imports react chatbotify core library
 	const chatbotifyModule = require("react-chatbotify");
 	ChatBot = chatbotifyModule.default;
 	reactChatbotify = { ...chatbotifyModule };
 	delete reactChatbotify.default;
+
+	// imports rcb plugin - input validator
+	InputValidator = require("@rcb-plugins/input-validator");
 }
 
 const ReactLiveScope = {
 	React,
 	ChatBot,
 	...reactChatbotify,
+	InputValidator,
 	GoogleGenerativeAI,
 	OpenAI,
 };