{{/each}}`
59 | }
60 |
61 | /**
62 | * Makes the flex-ui understand our custom Email channel
63 | * enabling custom rendering and handling of sending via SendGrid
64 | *
65 | * @param flex { typeof import('@twilio/flex-ui') }
66 | * @param _manager { import('@twilio/flex-ui').Manager }
67 | */
68 | registerEmailChannel(flex, _manager) {
69 | const EmailChannel = flex.DefaultTaskChannels.createChatTaskChannel(
70 | 'Email',
71 | task => task.taskChannelUniqueName === 'email'
72 | );
73 |
74 | EmailChannel.templates.TaskListItem.firstLine = task => task.attributes.name;
75 | EmailChannel.templates.TaskCanvasHeader.title = task => task.attributes.name;
76 | EmailChannel.templates.IncomingTaskCanvas.firstLine = task => task.attributes.subject;
77 | EmailChannel.templates.IncomingTaskCanvas.secondLine = task => task.attributes.message;
78 |
79 | ['active', 'list', 'main'].forEach(icon => {
80 | EmailChannel.icons[icon] = ;
83 | });
84 |
85 | flex.TaskChannels.register(EmailChannel);
86 | }
87 | }
88 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Notice - Legacy Code
2 |
3 | **This plugin is no longer maintained, as [email is now natively supported in Flex](https://www.twilio.com/docs/flex/email).**
4 |
5 | # Twilio Flex / SendGrid Email Integration Example
6 |
7 | ## Setting up SendGrid
8 |
9 | * You'll need to [authenticate your domain](https://sendgrid.com/docs/ui/account-and-settings/how-to-set-up-domain-authentication/)
10 | * Then point your MX record to `mx.sendgrid.net`
11 | * Configure the [inbound parse webhook](https://app.sendgrid.com/settings/parse) to point at your application. If using [ngrok](https://ngrok.com) like me, it should look like `https://yourtunnel.ngrok.io/inbound`.
12 | * Note: Twilio Functions are currently not compatible with the inbound parse webhook
13 | * Generate a SendGrid API Key [here](https://app.sendgrid.com/settings/api_keys) and note it down
14 |
15 | ## Configuring Twilio Flex
16 |
17 | * Navigate to your [TaskRouter](https://www.twilio.com/console/taskrouter/workspaces) Workspace (it should be named `Flex Task Assignment`), then to Task Channels and create a new Task Channel named `Email`.
18 |
19 | * Create an email Flex Flow
20 |
21 | You'll need your webhook URL handy, in this quickstart I will use [ngrok](https://ngrok.com) in this example. You'll also need your `ChatServiceSid` which can be found [here](https://www.twilio.com/console/chat/dashboard).
22 |
23 | Run the following `curl`:
24 |
25 | ```bash
26 | curl -X POST https://flex-api.twilio.com/v1/FlexFlows \
27 | --data-urlencode 'ChannelType=custom' \
28 | --data-urlencode 'Enabled=true' \
29 | --data-urlencode 'ContactIdentity=null' \
30 | --data-urlencode 'IntegrationType=external' \
31 | --data-urlencode 'Integration.Url=https://yourtunnel.ngrok.io/flexflow' \
32 | --data-urlencode 'FriendlyName=Email FlexFlow' \
33 | --data-urlencode 'ChatServiceSid=ISxxxxxxxxx' \
34 | --data-urlencode 'LongLived=true' \
35 | -u ACxxxxxxxx:[AUTH_TOKEN]
36 | ```
37 |
38 | This should yield a Flex Flow Sid like `FOxxxxxxxxx` -- note it down.
39 |
40 | ## Setting up your webhook
41 |
42 | Hopefully you've already cloned this repository and ran `npm install`. Next:
43 |
44 | * Navigate to the `server` folder
45 | * Configure your environment variables `cp .env.example .env`
46 | * We noted down the Flex Flow Sid and SendGrid API key already from the steps above
47 | * Here are links to grab the [account sid and auth token](https://www.twilio.com/console), your [workspace and workflow sid](https://www.twilio.com/console/taskrouter/workspaces) and [flex chat service sid](https://www.twilio.com/console/chat/dashboard).
48 | * Run the server `node index.js`
49 | * Start your tunnel `ngrok http 8080`
50 |
51 | If you followed the steps above correctly, sending an e-mail should now yield some logs and a task within Flex.
52 |
53 | 
54 |
55 | Of course, Flex doesn't know how to render tasks for our new e-mail channel yet, so we can't see the contents. For that, let's add a plugin!
56 |
57 | ## Building the plugin
58 |
59 | In the root of the `plugin-email` directory execute
60 |
61 | * npm install
62 | * npm run build
63 |
64 | Then upload the resulting distribution file to [Twilio Assets](https://www.twilio.com/console/assets/public).
65 |
66 | It should now look like this:
67 |
68 | 
69 |
70 | ## Changing the URL of your server
71 |
72 | If you find yourself wanting to update the URL for your express server, you'll need to update the URL in two places:
73 |
74 | * Replace the [inbound parse webhook](https://app.sendgrid.com/settings/parse) with your new URL
75 | * Update the FlexFlow with your new URL:
76 |
77 | ```bash
78 | curl -X POST https://flex-api.twilio.com/v1/FlexFlows/FOxxx \
79 | --data-urlencode 'Integration.Url=https://yourtunnel.ngrok.io/flexflow' \
80 | -u ACxxxxxxxx:[AUTH_TOKEN]
81 | ```
82 |
83 | ## Authors
84 |
85 | * Martin Amps
86 | * Trenton McManus
87 |
88 | ## Disclaimer
89 | This software is to be considered "sample code", a Type B Deliverable, and is delivered "as-is" to the user. Twilio bears no responsibility to support the use or implementation of this software.
90 |
--------------------------------------------------------------------------------
/server/utils.js:
--------------------------------------------------------------------------------
1 | const parseHeaders = require('parse-headers');
2 |
3 | const S = require('string');
4 | const emailAddressParser = require("email-addresses");
5 |
6 | const turndown = require('turndown'); // converts html to markdown
7 | const cheerio = require('cheerio'); // cherio allows us to do jQuery style DOM navigation
8 |
9 | const singleIdTypes = ["message-id", "in-reply-to"]; // These ID feilds should only have one entry
10 | const multipleAddressTypes = ["cc", "to"]; // These email address feilds could have multiple entries
11 |
12 | module.exports = {
13 | getParsedHeaders: (headers) => {
14 | let parsedHeaders = parseHeaders(headers);
15 |
16 | // Now we'll iterate through those headers and modify some of the values.
17 | for (const [key, value] of Object.entries(parsedHeaders)) {
18 |
19 | // We need to turn "References" into an array so we can take the first value later.
20 | if (key === 'references') {
21 | const refrencesArray = S(S(value).strip('<', '>').s).split(' ');
22 | parsedHeaders[key] = refrencesArray;
23 | }
24 |
25 | // Strip all the angled brackets off of the ID feilds so they match what we did for "References".
26 | if (singleIdTypes.includes(key)) {
27 | parsedHeaders[key] = S(value).strip('<', '>').s;
28 | }
29 |
30 | // We want to get the original "Subject" of the email, so we remove any "Re" that shows up.
31 | if (key === 'subject') {
32 | parsedHeaders[key] = S(value).chompLeft('Re:', 'RE:', 're:').trimLeft().s; // This is not comprehensive.
33 | }
34 |
35 | // Parse lists of email addresses.
36 | if (multipleAddressTypes.includes(key)) {
37 | parsedHeaders[key] = emailAddressParser.parseAddressList(value);
38 | }
39 |
40 | // "From" should not have multiple values, so we process it differently.
41 | if (key === 'from') {
42 | parsedHeaders[key] = emailAddressParser.parseOneAddress(value);
43 | }
44 | }
45 |
46 | return parsedHeaders;
47 | },
48 |
49 | html2markdown: (html) => {
50 | const turndownService = new turndown();
51 | const $ = cheerio.load(html);
52 |
53 | $('.gmail_quote').empty(); // Get rid of all elements containing the 'gmail_quote' class.
54 |
55 | //TODO: There are sooooo many other ways that a reply could be formatted. Add some of them.
56 |
57 | // Convert the remaining HTML into markdown
58 | return turndownService.turndown($.html())
59 | },
60 |
61 | createTask: (twilio, channelSid, fromAddress, targetAgent) => {
62 | let attributes = {
63 | emailTarget: targetAgent,
64 | channelType: 'web',
65 | channelSid: channelSid,
66 | name: fromAddress
67 | };
68 |
69 | // Allow sending to a specific agent
70 | if (targetAgent !== undefined) {
71 | attributes['emailTarget'] = targetAgent;
72 | }
73 |
74 | return twilio.taskrouter
75 | .workspaces(process.env.WORKSPACE_SID)
76 | .tasks
77 | .create({
78 | taskChannel: 'email',
79 | workflowSid: process.env.WORKFLOW_SID,
80 | attributes: JSON.stringify(attributes)
81 | });
82 | },
83 |
84 | checkTaskPending: (twilio, taskSid) => {
85 | if (!taskSid) {
86 | return Promise.resolve(false);
87 | }
88 |
89 | return twilio.taskrouter
90 | .workspaces(process.env.WORKSPACE_SID)
91 | .tasks(taskSid)
92 | .fetch()
93 | .then(task => {
94 | console.log('check pending got task', task);
95 | return ['completed', 'canceled', 'wrapping'].indexOf(task.assignmentStatus) === -1;
96 | })
97 | .catch(e => {
98 | if (e.status === 404) {
99 | return false;
100 | }
101 |
102 | throw e;
103 | });
104 | }
105 | };
106 |
--------------------------------------------------------------------------------
/server/extractHtmlContent.js:
--------------------------------------------------------------------------------
1 | const cheerio = require('cheerio');
2 | const TurndownService = require('turndown');
3 |
4 | // TODO: This could be more useful if it weren't a flat array.
5 | // 'Attributions' are strings of text that get added before thread history.
6 | // They are the most reliable way to identify the start of the thread history
7 | const attributionRegExp = [
8 | // example: "From: Nemo MacNaught Date: Wednesday, November 13, 2019 at 3:37 PMTo: Nemo MacNaught Subject: Re: Test"
9 | // comment: "Outlook Desktop default format"
10 | "From:\\s.+?Date:\\s.+?To:\\s.+?Subject:\\s",
11 |
12 | // example: "On Wed, Nov 13, 2019 at 3:31 PM Nemo MacNaught wrote:"
13 | // comment: "Gmail default format"
14 | "On[^.!?:;]+?,[^.!?:;]+?,[^.!?:;]+?\\sat\\s\\d{1,2}:\\d{1,2}\\s[AP]M\\s[^<]+?<.*>\\swrote:",
15 |
16 | // example: "On Wednesday, November 13, 2019, 03:45:41 PM PST, Nemo MacNaught wrote:"
17 | // comment: "Yahoo default format"
18 | "On\\s\\w+,\\s\\w+\\s\\d{1,2},\\s\\d{4},\\s\\d{2}:\\d{2}:\\d{2}\\s[AP]M\\s[A-Z]{3},\\s[^<]+?<.*>\\swrote:",
19 |
20 | // example: "On Oct 21, 2019, at 15:53, Nemo MacNaught wrote:"
21 | // comment: "iOS Mail App default format"
22 | "On\\s\\w+\\s\\w+,\\s\\d{4}.\\sat\\s\\d{2}:\\d{2},\\s[^<]+?<\\S*>\\swrote:",
23 |
24 | // example: "On Oct 21, 2019, at 15:53, Nemo MacNaught wrote:"
25 | // comment: "iOS Mail App default format"
26 | "On\\s\\w+\\s\\w+,\\s\\d{4}.\\sat\\s\\d{2}:\\d{2},\\s[^<]+?<\\S*>\\swrote:",
27 |
28 | // example: "On Saturday, November 16, 2019, Nemo MacNaught <[nemomacnaught@yahoo.com](mailto:nemomacnaught@yahoo.com)\> wrote:"
29 | // comment: "Gmail Mobile Browser"
30 | "On\\s\\w+,\\s\\w+\\s\\d{1,2},\\s\\d{4},\\s[^:]*<[^>]*>\\swrote:",
31 |
32 | // example: "-------- Original message --------From: Nemo MacNaught Date: 11/13/19 15:37 (GMT-08:00) To: Nemo MacNaught Subject: Re: Test"
33 | // comment: "Samsung Mail default format"
34 | "-------- Original message --------", // Samsung Mail Android App
35 | "-----Original Message-----", // AOL Desktop Browser
36 |
37 | // Tutanota:
Nov 17, 2019, 09:55 by tamarind.pony@tutanota.com: