Add tool box

Author: AntoineGrandchamp

assets/tools.svg

@@ -1,27 +1,37 @@
-import React, { Component } from 'react';
-import { Widget, addResponseMessage, setQuickButtons, toggleMsgLoader } from '../index';
+import React, { Component } from "react";
+import {
+  Widget,
+  addResponseMessage,
+  setQuickButtons,
+  toggleMsgLoader
+} from "../index";
 
 export default class App extends Component {
   componentDidMount() {
-    addResponseMessage('Welcome to this awesome chat!');
+    addResponseMessage("Welcome to this awesome chat!");
   }
 
-  handleNewUserMessage = (newMessage) => {    
+  handleNewUserMessage = newMessage => {
     toggleMsgLoader();
     setTimeout(() => {
-      toggleMsgLoader();      
-      if (newMessage === 'fruits') {
-        setQuickButtons([ { label: 'Apple', value: 'apple' }, { label: 'Orange', value: 'orange' }, { label: 'Pear', value: 'pear' }, { label: 'Banana', value: 'banana' } ]);
+      toggleMsgLoader();
+      if (newMessage === "fruits") {
+        setQuickButtons([
+          { label: "Apple", value: "apple" },
+          { label: "Orange", value: "orange" },
+          { label: "Pear", value: "pear" },
+          { label: "Banana", value: "banana" }
+        ]);
       } else {
         addResponseMessage(newMessage);
       }
     }, 2000);
-  }
+  };
 
-  handleQuickButtonClicked = (e) => {
-    addResponseMessage('Selected ' + e);
+  handleQuickButtonClicked = e => {
+    addResponseMessage("Selected " + e);
     setQuickButtons([]);
-  }
+  };
 
   render() {
     return (
@@ -32,6 +42,21 @@ export default class App extends Component {
         handleNewUserMessage={this.handleNewUserMessage}
         handleQuickButtonClicked={this.handleQuickButtonClicked}
         badge={1}
+        showCloseButton={true}
+        menuItems={[
+          {
+            label: "HEY MAN",
+            onClick: () => {
+              console.log("Malade");
+            }
+          },
+          {
+            label: "icons",
+            onClick: () => {
+              console.log("Malade");
+            }
+          }
+        ]}
       />
     );
   }