This plugin requires at minimum, Flex 1.12

It adds an input field near the Chat Input field to illustrate how the agent could send an Image (or other file) through the chat channel.

It also replaces the default Message Bubble implementation with a custom version that is able to render images. If sending PDFs this custom message bubble will need to be extended to support rendering a PDF.

Lastly, it contains an example of an first message auto-response when the agent accepts the incoming chat task.

There are serveral comments throughout the code that explain what is happening.

NOTE: styling of the Image input field is left off this example.

Make sure you have Node.js as well as npm installed.

Afterwards install the dependencies by running npm install:

cd plugin-advanced-messages-example

# If you use npm
npm install

In order to develop locally, you can use the Webpack Dev Server by running:

npm start

This will automatically start up the Webpack Dev Server and open the browser for you. Your app will run on http://localhost:8080. If you want to change that you can do this by setting the PORT environment variable:

PORT=3000 npm start

When you make changes to your code, the browser window will be automatically refreshed.

Once you are happy with your plugin, you have to bundle it, in order to deply it to Twilio Flex.

Run the following command to start the bundling:

npm run build

Afterwards, you'll find in your project a build/ folder that contains a file with the name of your plugin project. For example plugin-example.js. Take this file and upload it into the Assets part of your Twilio Runtime.

Note: Common packages like React, ReactDOM, Redux and ReactRedux are not bundled with the build because they are treated as external dependencies so the plugin will depend on Flex which would provide them globally.