Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Twitter integration #1

Open
wants to merge 3 commits into
base: main
Choose a base branch
from
Open

Twitter integration #1

wants to merge 3 commits into from

Conversation

thinkingserious
Copy link

First draft.

Copy link
Contributor

@nickhurlburt nickhurlburt left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@thinkingserious @ebgdae and Ashkon -- thank you so much for your help on this! I finally got this set up and working. I've left a few comments here, and I'd be interested if you have any thoughts. Especially if there's something you already have come across that I have a question on.

It's also understandable if you have no further time to comment. If so, I'm happy to take it from here. Thanks again!


### Install autohook

Once you have your Twitter developer account, you can set up the environment variables as described [here](https://github.com/twitterdev/autohook#dotenv-envtwitter). Installation instructions can be found [here](https://github.com/twitterdev/autohook#install).
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Note: what's really needed later is to add twitter-autohook to your package.json in the middleware project further down.

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should we simply specify that you will need to run npm install twitter-autohook?

);
}

function createNewChannel(flexFlowSid, flexChatService, recipientId, chatUserName) {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Seems like this function is being called on every new message, and these webhooks are being created on every new message. After three or four messages in the same conversation, this results in:

RestException [Error]: Too many channel webhooks
    at success (...) {
  status: 400,
  code: 50321,
  moreInfo: 'https://www.twilio.com/docs/errors/50321',
  detail: undefined
}

so we probably need to have a different mode that just creates the webhooks once.

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Agreed. Nice catch!

.webhooks.create({
type: 'webhook',
'configuration.method': 'POST',
'configuration.url': `<Twilo Flex function URL>/channel-update`,
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I can't work out if this webhook is actually needed. As it is, I don't think this does anything, since there's no function for this. Seems like this may be a hold-over from the original twilio-flex-custom-webchat code?

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Perhaps this is related to the issue above where we are creating multiple webhooks. Instead, we should be updating the channel.


### Update middleware

In `./twilio-flex-custom-webchat/middleware/server.js`, replace all the code there with:
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Note: this code can be downloaded from https://github.com/vernig/twilio-flex-custom-webchat/

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I added a link to that repo in the references section.

.webhooks.create({
type: 'webhook',
'configuration.method': 'POST',
'configuration.url': `<Twilo Flex function URL>?channel=${channel.sid}&recipient_id=${recipientId}`,
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Let's say we have two Twitter handles... a @myHelpline handle for the helpline, and a @myCaller handle who is the person reaching out to the helpline. When @myCaller sends a DM to @myHelpline, then @myHelpline can see that DM come in via Twitter and also via Flex. Currently, when a message is sent back from Flex, it doesn't get sent to @myCaller. Instead, it gets sent to @myHelpline. Within the Twitter UI, it looks like @myHelpline is having a DM conversation with itself. We would expect that the message gets sent to the caller, though, so there is a need to adjust this.

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't remember that happening in the demo, it is definitely super important to test this piece of code rigorously.


### Install autohook

Once you have your Twitter developer account, you can set up the environment variables as described [here](https://github.com/twitterdev/autohook#dotenv-envtwitter). Installation instructions can be found [here](https://github.com/twitterdev/autohook#install).
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

An important note on the env variables is that NGROK_AUTH_TOKEN is not actually optional. You need to create a (free) ngrok account for this to work.

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nice catch!


Replace `<Twilo Flex function URL>` with the URL obtained from your Twilio Function.

Launch the middleware in the directory `<path-to>/twilio-flex-custom-webchat/middleware` with the command `node server.js`.
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This actually needs several env variables to be passed for it to work:
TWILIO_ACCOUNT_SID=xx TWILIO_AUTH_TOKEN=xx FLEX_FLOW_SID=xx FLEX_CHAT_SERVICE=xx node server.js

And if you don't have ~/.env.twitter, then you need to send in the Twitter tokens and keys as well.

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Another nice catch! We should probably provide sample env files.

Accept the message and respond.

Celebrate!

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Things yet to be figured out:

  • How could we set this up with Twitter permissions such that multiple helpline handles can use it?
  • Could the middleware all be managed by Twilio functions, meaning there would be no need to maintain a separate Node app?

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm not sure about point one, but I believe point two is true. I think that would make for a nice second iteration :)

@thinkingserious
Copy link
Author

✨✨ Here's an AI-assisted sketch of how you might approach this issue saved by @thinkingserious using Copilot Workspace v0.22

Topic

Complete this code

Before
  • The code for integrating Twitter DMs with Twilio Flex is complete
  • Includes setup instructions for Twilio Flex, Twitter developer account, and middleware in README.md
  • Serverless function for responding to Twitter DMs via Twilio Flex provided
  • Middleware updates for handling Twitter events and sending messages to Flex are included
  • Requires setting up environment variables for Twitter and Twilio credentials
  • Instructions for deploying and testing the integration are provided
After
  • The code for integrating Twitter DMs with Twilio Flex is complete
  • Includes setup instructions for Twilio Flex, Twitter developer account, and middleware in README.md
  • Serverless function for responding to Twitter DMs via Twilio Flex provided
  • Middleware updates for handling Twitter events and sending messages to Flex are included
  • Requires setting up environment variables for Twitter and Twilio credentials
  • Instructions for deploying and testing the integration are provided
Plan
  • README.md (CHANGE)
    • Update the documentation to include detailed setup instructions for integrating Twitter DMs with Twilio Flex
    • Add instructions for obtaining a Twitter developer account and setting up environment variables
    • Provide a serverless function code snippet for handling Twitter DMs
    • Detail the steps for updating middleware to handle Twitter events and send messages to Flex
    • Include instructions for deploying and testing the integration
Sketch of implementation

An implementation sketch has not been generated or was not included

Details

Code analyzed at e0cbed5

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants