Error Trying Agent Transfer Task on BotKitSDK Tutorial


(Richard Keller) #1

I’m getting the following error when chatting to Bot.

Error: TypeError: Cannot read property ‘on_user_message’ of undefined
at Object.runComponentHandler (D:\NGRok\BotKit\lib\sdk\index.js:54:99)
at D:\NGRok\BotKit\lib\app\routes.js:19:38

I’ve gone through the Tutorial ( https://developer.kore.ai/docs/bots/kore-web-sdk/using-the-botkit-sdk/botkit-sdk-tutorial-agent-transfer/ )

NGRok and Local Node Server are receiving messages.

Any help or better yet a video to match the tutorial would be good.


(Avinash Deva) #2

Hello @richard,

Please find the below changes to be made as part of the sdk.

  1. app.js file within the botkit to include js file name.
    Something like this sdk.registerBot(require(’./fileName.js’));.

  2. fileName.js should be having the botname and botId to which the botkit has been configured.

  3. Also need to update the bot credentials in config.json as mentioned below.

    “credentials”: {
    “botid”:{
    “apikey”: “ClientSecret”,
    “appId”: “ClientId”
    },
    },

Please do let us know in case if this does not work by any chance :slight_smile:


(Richard Keller) #5

Ok. Here are steps

  1. Load Missing Components

npm install url-template
npm install node-schedule

  1. I changed lib\app\index.js bodyparser to non deprecated method.

Application.prototype.loadmiddlewares = function(){
this.app.use(bodyparser.urlencoded({extended: true})); // this.app.use(bodyparser());

Now down to one more error.

data OnMessagePayload {
requestId: ‘03069582c7863f5e6bbc3961f7b44b22’,
botId: ‘st-f291465d-bfc5-58b4-b793-a62ef0bd8795’,
componentId: ‘default’,
payloadClassName: ‘OnMessagePayload’,
_originalPayload: { requestId: ‘03069582c7863f5e6bbc3961f7b44b22’ },
getBotVariableUrl: undefined,
sendUserMessageUrl: undefined,
sendBotMessageUrl: undefined,
resetBotUrl: undefined,
baseUrl: undefined,
metaInfo: undefined,
context: undefined,
channel: undefined,
message: undefined,
agent_transfer: false,
ackMessage: true,
toJSON: [Function] }
ERROR { InvalidArguments: send bot message url is missing
at Object.sendBotMessage (D:\NGRok\BotKit\lib\sdk\index.js:151:19)
at onUserMessage (D:\NGRok\BotKit\LiveChat.js:181:20)
at on_user_message (D:\NGRok\BotKit\LiveChat.js:198:9)
at wrapper (D:\NGRok\BotKit\node_modules\lodash\lodash.js:5232:19)
at tryCatcher (D:\NGRok\BotKit\node_modules\bluebird\js\release\util.js:16:23)
at D:\NGRok\BotKit\node_modules\bluebird\js\release\method.js:15:34
at D:\NGRok\BotKit\lib\sdk\index.js:62:13
at tryCatcher (D:\NGRok\BotKit\node_modules\bluebird\js\release\util.js:16:23)
at Function.Promise.attempt.Promise.try (D:\NGRok\BotKit\node_modules\bluebird\js\release\method.js:39:29)
at Object.runComponentHandler (D:\NGRok\BotKit\lib\sdk\index.js:59:23)
at D:\NGRok\BotKit\lib\app\routes.js:19:38
at Layer.handle [as handle_request] (D:\NGRok\BotKit\node_modules\express\lib\router\layer.js:95:5)
at next (D:\NGRok\BotKit\node_modules\express\lib\router\route.js:131:13)
at Route.dispatch (D:\NGRok\BotKit\node_modules\express\lib\router\route.js:112:3)
at Layer.handle [as handle_request] (D:\NGRok\BotKit\node_modules\express\lib\router\layer.js:95:5)
at D:\NGRok\BotKit\node_modules\express\lib\router\index.js:277:22
at param (D:\NGRok\BotKit\node_modules\express\lib\router\index.js:349:14)
at param (D:\NGRok\BotKit\node_modules\express\lib\router\index.js:365:14)
at param (D:\NGRok\BotKit\node_modules\express\lib\router\index.js:365:14)
at Function.process_params (D:\NGRok\BotKit\node_modules\express\lib\router\index.js:410:3)
at next (D:\NGRok\BotKit\node_modules\express\lib\router\index.js:271:10)
at D:\NGRok\BotKit\lib\app\middlewares\APIKeyMiddleware\index.js:38:11
at Layer.handle [as handle_request] (D:\NGRok\BotKit\node_modules\express\lib\router\layer.js:95:5)
at trim_prefix (D:\NGRok\BotKit\node_modules\express\lib\router\index.js:312:13)
at D:\NGRok\BotKit\node_modules\express\lib\router\index.js:280:7
at Function.process_params (D:\NGRok\BotKit\node_modules\express\lib\router\index.js:330:12)
at next (D:\NGRok\BotKit\node_modules\express\lib\router\index.js:271:10)
at urlencodedParser (D:\NGRok\BotKit\node_modules\body-parser\lib\types\urlencoded.js:100:7)
statusCode: 400,
status: 400,
customCode: ‘INVALID_ARGUMENTS’,
errors:
[ { msg: ‘send bot message url is missing’,
code: ‘INVALID_ARGUMENTS’ } ],
_headers: {},
message: ‘send bot message url is missing’,
name: ‘InvalidArguments’ } InvalidArguments: send bot message url is missing
at Object.sendBotMessage (D:\NGRok\BotKit\lib\sdk\index.js:151:19)
at onUserMessage (D:\NGRok\BotKit\LiveChat.js:181:20)
at on_user_message (D:\NGRok\BotKit\LiveChat.js:198:9)
at wrapper (D:\NGRok\BotKit\node_modules\lodash\lodash.js:5232:19)
at tryCatcher (D:\NGRok\BotKit\node_modules\bluebird\js\release\util.js:16:23)
at D:\NGRok\BotKit\node_modules\bluebird\js\release\method.js:15:34
at D:\NGRok\BotKit\lib\sdk\index.js:62:13
at tryCatcher (D:\NGRok\BotKit\node_modules\bluebird\js\release\util.js:16:23)
at Function.Promise.attempt.Promise.try (D:\NGRok\BotKit\node_modules\bluebird\js\release\method.js:39:29)
at Object.runComponentHandler (D:\NGRok\BotKit\lib\sdk\index.js:59:23)
at D:\NGRok\BotKit\lib\app\routes.js:19:38
at Layer.handle [as handle_request] (D:\NGRok\BotKit\node_modules\express\lib\router\layer.js:95:5)
at next (D:\NGRok\BotKit\node_modules\express\lib\router\route.js:131:13)
at Route.dispatch (D:\NGRok\BotKit\node_modules\express\lib\router\route.js:112:3)
at Layer.handle [as handle_request] (D:\NGRok\BotKit\node_modules\express\lib\router\layer.js:95:5)
at D:\NGRok\BotKit\node_modules\express\lib\router\index.js:277:22
at param (D:\NGRok\BotKit\node_modules\express\lib\router\index.js:349:14)
at param (D:\NGRok\BotKit\node_modules\express\lib\router\index.js:365:14)
at param (D:\NGRok\BotKit\node_modules\express\lib\router\index.js:365:14)
at Function.process_params (D:\NGRok\BotKit\node_modules\express\lib\router\index.js:410:3)
at next (D:\NGRok\BotKit\node_modules\express\lib\router\index.js:271:10)
at D:\NGRok\BotKit\lib\app\middlewares\APIKeyMiddleware\index.js:38:11
at Layer.handle [as handle_request] (D:\NGRok\BotKit\node_modules\express\lib\router\layer.js:95:5)
at trim_prefix (D:\NGRok\BotKit\node_modules\express\lib\router\index.js:312:13)
at D:\NGRok\BotKit\node_modules\express\lib\router\index.js:280:7
at Function.process_params (D:\NGRok\BotKit\node_modules\express\lib\router\index.js:330:12)
at next (D:\NGRok\BotKit\node_modules\express\lib\router\index.js:271:10)
at urlencodedParser (D:\NGRok\BotKit\node_modules\body-parser\lib\types\urlencoded.js:100:7)


(Subrahmanyam Donepudi) #6

@richard, I have downloaded the botkit sdk now and I ran into the same issue as you.
image

The issue should have been because we are registering bot at LiveChatAPI.js again in the app.js file along with LiveChat.js.

LiveChatAPI.js was referenced in the LiveChat.js file anyway so it should be good to read the configurations in the file.

image

I have now removed registering LiveChat.js from app.js and run the file again. Agent transfer invocation seems fine now. Please refer to below snips:

image

image

image

Please let us know if you run into any further issues.


(Richard Keller) #7

That’s the error I am getting. Can you setup a zoom or something to go over?


(Subrahmanyam Donepudi) #8

Could you revert back the change at index.js and then make the changes as mentioned in my last reply?

If you still run into the issues, may be our support team can help you further


(Swagata Sengupta) #9

Configuring Agent Transfer

One of the frequently asked questions is how to transfer chat to a human from the bot. It is especially necessary if your bot is in space of customer service. Chat bots are not meant to completely replace humans. Many a times chat bot will fail to answer satisfactorily or user would just want to talk/chat to a human from the start. When this happens the chatbot should transfer the chats to a human agent or a customer care representative. But how can we achieve that? In this article, we will give an overview on how we can integrate a live chat into our bot using Kore

BOTKIT SDK. The source code is available at github repo https://github.com/Koredotcom/BotKit

High Level Overview

Our bot would be central piece to whole solution. Apart from performing all its normal functionality, our bot would also act as a proxy between user and agent.

  • Bot :​ Well, we (will) have our bot .

  • Users :​ Users are our customers who would be using our bot.

  • Agent :​ Agents are humans who would chat with our users. Our agent will also need a chat window. For this we will use liveperson/live chat software

Design and Configuration

  1. As a bot developer, open Kore bot builder – https://bots.kore.ai/botbuilder
    1-dashboard

  2. Select the Bot for which Agent Transfer should be configured

  3. Open or create a dialog task and connect agent transfer service as shown below and save. You will see a message ‘botkit sdk isn’t configured yet for agent transfer’. This will be taken care in later part of the document.
    2-dialog_task

  4. Navigate to Events and Extensions - Agent Transfer
    3-EventsAndExtensions

  5. As given in Step 1, download BotKit SDK from Kore’s github repository
    4-github

  6. Now select Create App option in App name section, if there is no app created already, create a new app and click on done.
    5-createapp

  7. Go to BOTKIT SDK and copy Bot ID, Client ID and Secret keys and check the Events required.
    6-CopyClientID_Secrets

  8. Give the respective Call back URL of your application, to be invoked by BotKIt SDK events

  • If you are not using any third party callback server, then you can use NGROK

  • Install and run ngrok as your test callback server. The test callback server​ application, ​ ngrok ​, is used to simulate your callback server application.

  • To download the test callback server application, download ngrok from ​https://ngrok.com/download​, and install the ​ same for your operating system.

  • Downloading NGROK on mac:

    • Press Command+Space and type Terminal and press enter/return key to invoke terminal app

    • Run in Terminal app:
      ruby -e “$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)” <
      /dev/null 2> /dev/null
      and press enter/return key.
      If the screen prompts you to enter a password, please enter your Mac’s user password to continue. When you type the password, it won’t be displayed on screen, but the system would accept it. So just type your password and press ENTER/RETURN key. Then wait for the command to finish.

    • Run:
      brew cask install ngrok

    • In a ​ Terminal ​ Window, start ​ ngrok ​ to monitor port ​8003​ using the following command:​
      ngrok http 8003
      Copy ngrok forwarding URL and give it in the callback url under BOTKIT SDK option within the BOT.

    • NGROK forwarding url is the callback url and it should be given in BOTKIT SDK callback URL option and in config file. http://XXXXXXX.ngrok.io and save.
      7-ngrok_callback

    • Once the call back URL is mentioned and saved, then agent transfer is configured at the dialog level. Now open the respective dialog task, open agent transfer to see that the configuration is saved as shown below.
      8-dialog_agent_transfer

  1. Install Node.js

    • The BotKit SDK requires node.js to run on the same server where the SDK is installed. Go to https://nodejs.org/en/download/, and then select your OS as a .pkg file type for Mac and .msi file type for Windows.
    • In a ​ Terminal ​ window, run the ​node -v command to verify installation and version, for example, v6.10.2|
  2. Install any live agent software eg Livechat, Liveperson, Concentrix, Vayusphere etc depending on your enterprise requirement and license availability. Note - Kore.ai does not endorse any application.

    • LiveChat
    • You can use your own LiveChat subscription or set up a free 30-day trial account at LiveChatInc.com by entering your business email in the Start using LiveChat now!
    • After successful signing up and creating an account, go to Settings from the left navigation and select chat link as shown below.
    • Copy the URL as shown below and the code should be given in config file in downloaded BOTKIT SDK. URL - ​https://lc.chat/now/104xx297/​ and the license code is ​104xx297
      9-LiveChat
  3. Open the downloaded BotKit SDK folder and do the following:

    • Edit livechatapi.js,

    • Give the respective botId and botName of your bot, which you have copied earlier.

    • This JS file contains 3 API’s of Kore, Initialization, Send Message, Get Message. If required, any new API’s written for human agent transfer should be put in here. Example: If closing connection is required, then close connection api written needs to go into livechatapi.js
      js

    • Edit config.js

    • Client ID, Client Secret key, respective server ports running and liveagent license of the third-party server goes here.

    • Client Id, Client Secret can be copied from Events and Extensions-BotKit SDK.

    • ngrok forwarding url can be copied from ngrok running instance. It is the call back url.

    • Liveagentlicense is the code given in the chatlink of livechat
      11-Liveagentlicense

    • Edit Livechat.js, provide the respective botId and botName of your bot, which you have copied earlier and save.
      js

    • Edit app.js and add the following sdk.registerBot(require(’./LiveChat.js’)) , save
      js

    • Run the botkit sdk by giving node app.js in the terminal window.

    • ngrok and node.js server will be running in different terminals and as a user start the chat by opening the respective bots chat window.

    • When user initiates the chat from the bot, bot transfers the call to an agent and sends a message to the user
      14-bot-to-agent

    • Agent receives a notification about this on the livechat
      15-Agent_received_onLiveChat

    • Now connection between agent and the user has been established and the conversation continues
      16-BotTrackingMessagesFromAgent

Courtesy: @srirama.yadlapalli