-
Notifications
You must be signed in to change notification settings - Fork 0
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
base: main
Are you sure you want to change the base?
Conversation
There was a problem hiding this 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). |
There was a problem hiding this comment.
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.
There was a problem hiding this comment.
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) { |
There was a problem hiding this comment.
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.
There was a problem hiding this comment.
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`, |
There was a problem hiding this comment.
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?
There was a problem hiding this comment.
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: |
There was a problem hiding this comment.
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/
There was a problem hiding this comment.
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}`, |
There was a problem hiding this comment.
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.
There was a problem hiding this comment.
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). |
There was a problem hiding this comment.
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.
There was a problem hiding this comment.
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`. |
There was a problem hiding this comment.
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.
There was a problem hiding this comment.
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! | ||
|
There was a problem hiding this comment.
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?
There was a problem hiding this comment.
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 :)
✨✨ Here's an AI-assisted sketch of how you might approach this issue saved by @thinkingserious using Copilot Workspace v0.22 TopicComplete this code Before
After
Plan
Sketch of implementationAn implementation sketch has not been generated or was not included |
First draft.