docs: Minor docs update for hooks

Author: tjtanjin

docs/examples/custom_hooks.md

@@ -7,14 +7,15 @@ keywords: [react, chat, chatbot, chatbotify]
 
 # Custom Hooks
 
-The following is an example for using custom hooks, which allows you to interact with the chatbot functionalities **externally** (i.e. from your own components). The full list of hooks and the functionalities they expose can be found [**here**](/docs/api/hooks). For this example, we'll only be looking at a few hooks such as [**`useAudio`**](/docs/api/hooks#useaudio), [**`useFlow`**](/docs/api/hooks#useflow), [**`useToasts`**](/docs/api/hooks#usetoast) and [**`useNotifications`**](/docs/api/hooks#usenotifications). The hooks are imported within the `MyChatBotWrapper` component which is nested under `ChatBotProvider`.
+The following is an example for using custom hooks, which allows you to interact with the chatbot functionalities **externally** (i.e. from your own components). The full list of hooks and the functionalities they expose can be found [**here**](/docs/api/hooks). For this example, we'll only be looking at a few hooks such as [**`useAudio`**](/docs/api/hooks#useaudio), [**`useFlow`**](/docs/api/hooks#useflow), [**`useToasts`**](/docs/api/hooks#usetoast), [**`useNotifications`**](/docs/api/hooks#usenotifications) and [**`useMessages`**](/docs/api/hooks#usemessages). The hooks are imported within the `MyChatBotWrapper` component which is nested under `ChatBotProvider`.
 
 ```jsx live noInline title=MyChatBot.js
 const MyChatBotWrapper = () => {
     const { toggleAudio } = useAudio();
     const { restartFlow } = useFlow();
     const { showToast } = useToasts();
     const { playNotificationSound } = useNotifications();
+    const { injectMessage } = useMessages();
 
     const settings = {
         general: {embedded: true},
@@ -40,6 +41,7 @@ const MyChatBotWrapper = () => {
           <ExampleButton onClick={restartFlow} text="Click me to reset the flow!"/>
           <ExampleButton onClick={() => showToast("Hello there!")} text="Click me to show a toast!"/>
           <ExampleButton onClick={playNotificationSound} text="Click me to play a notification sound!"/>
+          <ExampleButton onClick={() => injectMessage("Hello I'm an injected message!")} text="Click me to inject a message!"/>
           <ChatBot settings={settings} flow={flow}/>
         </>
     );

src/theme/ReactLiveScope/index.js

@@ -1,55 +1,24 @@
 import React from "react";
 import { GoogleGenerativeAI } from "@google/generative-ai";
-import OpenAI from 'openai';
-
-import ExecutionEnvironment from '@docusaurus/ExecutionEnvironment';
+import OpenAI from "openai";
+import ExecutionEnvironment from "@docusaurus/ExecutionEnvironment";
 
 let ChatBot = null;
-let ChatBotProvider = null;
-let hooks = {};
-let Button = null;
-let getDefaultSettings = null
-let getDefaultStyles = null;
-let useAudio = null;
-let useNotifications = null;
-let useFlow = null;
-let useToasts = null;
+let reactChatbotify = {};
 
 if (ExecutionEnvironment.canUseDOM) {
-	ChatBot = require("react-chatbotify").default;
-	hooks = {
-		ChatBotProvider,
-		Button,
-		getDefaultSettings,
-		getDefaultStyles,
-		useAudio,
-		useNotifications,
-		useFlow,
-		useToasts
-	} = require("react-chatbotify");
-	ChatBotProvider = hooks.ChatBotProvider;
-	Button = hooks.Button;
-	getDefaultSettings = hooks.getDefaultSettings;
-	getDefaultStyles = hooks.getDefaultStyles;
-	useAudio = hooks.useAudio;
-	useNotifications = hooks.useNotifications;
-	useFlow = hooks.useFlow;
-	useToasts = hooks.useToasts;
+	const chatbotifyModule = require("react-chatbotify");
+	ChatBot = chatbotifyModule.default;
+	reactChatbotify = { ...chatbotifyModule };
+	delete reactChatbotify.default;
 }
 
 const ReactLiveScope = {
 	React,
 	ChatBot,
-	ChatBotProvider,
-	Button,
-	getDefaultSettings,
-	getDefaultStyles,
-	useAudio,
-	useNotifications,
-	useFlow,
-	useToasts,
+	...reactChatbotify,
 	GoogleGenerativeAI,
-	OpenAI
+	OpenAI,
 };
-  
-export default ReactLiveScope;
+
+export default ReactLiveScope;