ChatBot Integration(recast.ai) with SAP UI5

[former_member224926]

I have become more interested in chat bots and how they can serve customers.  After a bunch of research and testing I decided to start a project in order to learn about bots.



In this article, I explain steps to integrate chat bots with SAP Web IDE.  I will be using recast.ai to create chat bot, integrate and render the same in ui5. So, friends let get started.

Web IDE For The Front End

I decided to use SAP Web IDE to develop the front end to the project, as Web IDE allows fast yet robust development of sites that can be deployed easily.  Web IDE was the perfect fit for this learning project.

Assumption

1. You have created bot in recast.ai


2. You have base knowledge of rest api.

Procedure of Integration and Chat Bot Rendering

Step 1. Invoke recast rest api passing your user slug and token.

a. Redefine onAfterRendering



b.Invoke rest api call to get user unique ID or uuid which would later be used for interaction between the ui5 bot interface and recast intents.

Please find place for your user-slug and token to find out in recast



 

Step 2. Invoke bot popover in the sense render ui



Invoke chat bot by registering enter key with code 13 for chat input. This would enable bot-user chat interactive display on the press even of enter key.



 

Step 3. Fetch response of user chat input based on intent received from recast.



 

Step 4. Create bot message ui based on the response received in step 4 rest call.



Step 5. Add animation to bot message display and after timeout we remove the animation in above step.



 

Last Step 6. Add style class for images in chat display to appear as icon siZe.



 

Conclusion

1. Refer recast.ai api-reference to know more about connectors.


2. Chat bot interface can be designed in many ways please find this code pen link.


3. Whenever, you are doing integration providing correct tokens number, user slug and bot slug(bot name) is important for successful integration.


4. Please find link to above sample code in github.

Hope it helps 🙂

 

Regards,

Manisha Madhwani

 

 

 

 

 

 

 

[former_member206914]

Well Well Well ! Thank you so much for this Manisha. We completed backend part of one of our chatbot implementation and are waiting to make the UI part. Thanks for giving us a best resource to refer via this blog. This SAPUI5 - Recast.AI integration blog would surely help us a lot.

Keep writing more!

[whatsap]

Great!

[p330068]

Good one ?

[alexandre_lara]

Awesome!

[kunju1991]

Awesome!

 

[suvrajyoti_chatterjee]

Thanks for sharing! Great post 🙂

[bharanidharan]

Hi Manisha,

Thanks for your post but it seems that the chatbot interface shows or takes up only 2 inputs. I have replaced with my chatbot but still it shows takes/shows only 2 inputs.

I could see that the chat interface is from codepen.io but that is working fine there.

Kindly check the application for any correction required.

Regards,

Bharanidharan

[evgenykei]

In our solution we are going to little bit different way – we develop own bot server for interaction with sap with inbound text classification and interface with possibility to flexible call any fm inside sap. So we have some benefit now - possible to install locally inside the customers landscape, easy enhance with new function, secured chat with 128 bit  encryption.

[former_member206914]

Hi Bharanidharan,

Using this code from from codepen.io we faced this issue too. You need to include a slider in the dialogue component there. All the dialogues are getting rendered on UI but are just hided. Adjusting the CSS also would help you.

We created our own SAPUI5 based UI now.

Thanks

Best,

Giridhar

[former_member206914]

Hi Evgeniy,

Super. Your customized chatbot layer looks very flexible from what you have written. You have included security too! Very nice. We will seek your expertise in this area soon.

Thanks

Best,

Giridhar

[evgenykei]

You are welcome. I'm open to help.

[ferrygun18]

Can you please share the code ?

 

[former_member206914]

Before I share the code, I would like to share the following blog with you wherein they used only SAPUI5 controls. Our code is obsolete now as we are using HTML elements which is against the SAPUI5/Fiori standards. I see you already made a comment over there. You can use the code from our blog and Mikhail’s blog. Please contact Manisha Madhwani for the code.

https://blogs.sap.com/2018/09/05/conversational-ai-recast.ai-direct-integration-with-sapui5-applicat...

Best

Giridhar on behalf of Manisha.

[former_member286489]

Hi Manisha,

I am facing issue “Request can not be processed without authentication” when i am trying to get the response from the bot connector for typed message. Can you please tell me what could be the issue? Also can you please clarify from where can we get the “conversation_id” ?

Thanks

[former_member224926]

Hello Gautami,

 

Thanks for reaching out here. The authentication error which you are facing is due to the incorrect token values which typically get updated by recast or sap conversational ai on fortnightly basis.

If you have created your own bot please update the user slug, request token in getBot method of the sample github code of this article. Also, update developer token value in respondTo method of XOXO controller file.

You can provide any alphanumeric number as conversation_id.

Hope it helps.

Thanks,

Manisha Madhwani

[former_member286489]

Hi Manisha,
Thanks for replying. I tried with the tokens you mentioned but i am still facing the same issue - "Request can not be processed without authentication". I agree using the developer token should have helped with the authentication. Do we need to change any setting at the bot level?

[former_member224926]

Hi Gautami,

Please find a quite detailed version of the above article here,

https://cai.tools.sap/blog/how-to-integrate-sap-conversational-ai-chatbot-to-sap-ui5/

Hope it helps

Thanks,

Manisha Madhwani

[former_member606600]

Hi Manisha,

Im facing an issue when I exit the chatbot window and then open it again, all the conversation is gone. Do you know how to fix it?

 

Thanks,

Karla Cantú