refactor: Minor update to plugin template

Author: tjtanjin

README.md

@@ -224,23 +224,29 @@ Below is an overview of the main folders and files in this template:
 |   ├── constants/
 │   │   └── DefaultPluginConfig.ts - Constants for plugin configurations.
 │   ├── core/
-│   │   └── RcbPlugin.tsx - Contains logic for hook factory and plugin hook.
+│   │   └── RcbPlugin.tsx - Contains core logic for the plugin (plugin hook).
+|   ├── factory/
+│   │   └── RcbPlugin.tsx - Contains hook factory that prepares and creates the plugin hook.
 |   ├── types/
 │   │   └── PluginConfig.ts - Contains type definition for plugin configurations.
 │   ├── App.tsx - For initializing and testing the plugin.
 │   ├── development.tsx - Entry point during development.
 │   └── index.tsx - Export file for your plugin.
+├── setup.js - Setup script for quick initialization of the project
 └── package.json - Update name and author fields here.
 ```
 
 ### Key Files
 - .github Folder: Contains templates and workflows for CI/CD, automating builds and releases.
-- Constants Folder: Contains constants used in the plugin (e.g. DefaultPluginConfig).
-- Factory Folder: Houses RcbPlugin.tsx, where the plugin logic is developed.
+- Constants Folder: Contains constants used in the plugin (e.g. _DefaultPluginConfig.ts_).
+- Core Folder: Houses the plugin hook, where the core logic for the plugin is developed.
+- Factory Folder: Houses the plugin factory, which prepares the plugin hook to be consumed by the core library.
 - Types Folder: Specifies the types used in the plugin (e.g. PluginConfig).
-- App File: Initializes the chatbot with your plugin; ideal for quick testing.
-- Development and Index Files: Used for development setup and exporting plugin components.
-- package.json: Update your plugin’s information here before publishing.
+- App.tsx File: Initializes the chatbot with your plugin; ideal for quick testing.
+- development.tsx File: Used for development setup and testing.
+- index.tsx File: Used to export plugin components.
+- setup.js: Setup script for quick initialization of the template repository.
+- package.json File: Update your plugin’s information here before publishing.
 
 ## Creating a Plugin
 

src/core/useRcbPlugin.ts

@@ -0,0 +1,62 @@
+import { useEffect } from "react";
+
+import { RcbPreInjectMessageEvent, useBotId } from "react-chatbotify";
+import { PluginConfig } from "../types/PluginConfig";
+
+/**
+ * Plugin hook that handles all the core logic.
+ *
+ * @param pluginConfig configurations for the plugin
+ */
+const useRcbPlugin = (pluginConfig?: PluginConfig) => {
+    // uses hook to get bot id
+    const { getBotId } = useBotId();
+
+    // provides plugin logic
+    useEffect(() => {
+        // handles message sent
+        const handlePreInjectMessage = (event: RcbPreInjectMessageEvent) => {
+            // checks bot id to prevent conflicts with multiple chatbots
+            if (getBotId() !== event.detail.botId) {
+                return;
+            }
+
+            // checks if message is from user
+            if (event.data.message.sender.toUpperCase() !== "USER") {
+                return;
+            }
+
+            // checks if message content is a string (it may be a JSX element)
+            const message = event.data.message;
+            if (typeof message.content !== "string") {
+                return;
+            }
+
+            // reverses the message string if it is
+            message.content = message.content.split("").reverse().join("");
+        };
+
+        // relies on rcb-pre-inject-message event to intercept and modify messages
+        window.addEventListener("rcb-pre-inject-message", handlePreInjectMessage);
+        return () => {
+            window.removeEventListener("rcb-pre-inject-message", handlePreInjectMessage);
+        };
+    }, [getBotId]);
+
+    // name is a required field, recommended to match the npm package name to be unique
+    const pluginMetaData = {name: "rcb-example-plugin", settings: {}};
+
+    // if auto config is true, then automatically enable the require events (or other settings as required)
+    if (pluginConfig?.autoConfig) {
+        pluginMetaData.settings = {
+            event: {
+                rcbPreInjectMessage: true
+            }
+        }
+    }
+
+    // returns plugin metadata to be consumed by the core library
+    return pluginMetaData;
+};
+
+export default useRcbPlugin;

src/factory/RcbPluginFactory.ts

@@ -0,0 +1,22 @@
+import useRcbPlugin from "../core/useRcbPlugin";
+import { PluginConfig } from "../types/PluginConfig";
+
+/**
+ * Factory that prepares the plugin hook to be consumed by the core library.
+ *
+ * @param pluginConfig configurations for the plugin
+ */
+const RcbPluginFactory = ({
+    pluginConfig,
+}: {
+    pluginConfig?: PluginConfig;
+} = {}) => {
+    // any custom logic to be ran before hook initialization can be done here
+    
+    // prepares and returns the plugin hook without calling it, because the
+    // initialization of the hook should be handled by the core library itself
+    const usePreparedRcbPlugin = () => useRcbPlugin(pluginConfig);
+    return usePreparedRcbPlugin;
+};
+
+export default RcbPluginFactory;