Code Monkey home page Code Monkey logo

flex-plugin-chat-summary's Introduction

Screenshots

Generated summary Interactions timeline

Plugin

This Twilio Flex Plugin enables your agents to write a summary on task. The summary will be saved into interactions timeline and shown to agents on the next customer contact. To save a big portion of time on writing summary we use GPT Chat API providing the chat transcript and asking to summarise the chat in once sentence.

To learn more about developing plugins on your Flex instance, refer to the getting started guide.

How it works

This Plugin uses following Twilio Products. It is easy to have it running quickly!

  • It uses Twilio Functions to run the code to generate summary and update/get timeline;
  • It uses Twilio Sync to store the timeline for each contact;
  • It uses the new Twilio Paste - a UI library from Twilio which is the base for all future Flex Plugins;

To generate the summary plugin uses OpenAI GPT3 chat SDK.

Oh, before installing it:

You need to enable Flex UI 2.0, the newest version of Flex!

How to install

We have to install 2 assets:

  • The Twilio Functions (back-end)
  • The Flex Plugin (front-end)

To install the Twilio Functions:

  1. clone this repo;
  2. execute cd ./functions to go to the Twilio Functions folder.
  3. npm install to install the packages into your computer.
  4. rename .env-example from this folder to .env and follow the instructions in the .env file.
  5. npm run deploy to deploy the functions to your Twilio environment.
  6. Note the functions' domain in the output, you will need it to configure Plugin env.

To install the Flex Plugin:

  1. execute cd .. to go to the Plugin folder root.
  2. npm install to install the packages into your computer.
  3. rename .env-example from this folder to .env and follow the instructions in the .env file.
  4. You need to have the Twilio CLI. Type twilio in your terminal to see if you have it, if not, install it now.
  5. You need the Flex Plugins CLI . Type twilio plugins to make sure you have it, if not, install it.
  6. You need to create a new profile for your Twilio CLI, type twilio profiles:list to check if you are using it correctly. If not, add a new profile with the cmd twilio profiles:add.
  7. npm run deploy -- --changelog "first deployment!" to deploy this Plugin.
  8. Once step 7 is finished, it will show the next steps, you will have to run the command mentioned there (something like twilio flex:plugins:release ... etc etc)
  9. We are done! Go to https://flex.twilio.com - Once chat is ended should see a new component with generated summary. On the right side you will also see the Interactions Timeline for the contact.

Contributions ✨

Contributions of all kinds are welcome!

flex-plugin-chat-summary's People

Contributors

kuschanton avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.