Conversational AI (Recast.AI) Direct Integration with SAPUI5 Application
Recast.AI Integration
Initially in our project, integration of Recast.AI was planned to take place only in SAP Jam Messages service.
After successful integration we decided to investigate whether it was possible to integrate Recast.AI bot directly into SAPUI5 Application in order to get easy access to Chatbot just right from Fiori app.
Currently no guides for Chatbot integration with SAPUI5 Application are provided by Recast.AI.
The available Channels described on Recast.AI include SAP Jam.
Our starting point was an article on SCN describing a possible approach for such integration, you can find it by the following link:
https://blogs.sap.com/2018/08/13/chatbot-integrationrecast.ai-with-sap-ui5/
There are several limitations in the mentioned above approach:
- When popover is minimized, history of messaging is no longer available
- According to SAPUI5 best practices, it is not allowed to use direct creation of HTML objects
- Scrolling in the message box is not available. This leads to problems in displaying full lists of messages and new messages not fitting the popover;
- Using developer token to retrieve x-uuid.
Main Functionality
In SAPUI5 application Chatbot is integrated as a popover and it is designed using SAPUI5 controls.
It looks like a regular chat.
To achieve this, we used modified styles.css
There are several main advantages of having Chatbot integrated into SAPUI5 Application compared to using integration with SAP Jam Page:
- No need to navigate to any other app or service
- You can call Chatbot from any view just by adding the button to the footer:
Technical Design
The View is designed as a separate Fragment with Popover control, List in it and Input for user messages:
Fragment is called from the main view by clicking the button event:
And “onAfterRendering” bot is called:
As UI5 Fiori application is a client-side application, you must use only the request access token for communication with Recast API.
Authentication description in API reference forbids using developer access token on the client-side application:
(source: https://recast.ai/docs/api-reference/#authentication)
Then the bot is launched and bonded to the fragment.
After the text parsing (get input value and send message on keyup enter) POST request to Recast.AI API is sent and the received response is processed in order to create an incoming message:
Integration Advantages
As you can see from the present article, there is no standardized guidance on integration with SAPUI5 application in Recast.AI documentation (only SAP Jam is described).
But it is possible to use best practices and standard SAPUI5 controls.
The history of messages is available during the current session, so even if you navigate to other views and then get back, you will still be able to review you chat history.
You can use custom CSS styles to implement nice and chat-looking appearance of your integrated Chatbot.
Disadvantages of the Current Approach
Please consider that current integration approach is quite good for piloting stage and for SAP systems (Fiori Launchpads) with direct Internet connection, that is not usually the case. Additionally, please also consider that Recast.ai request token is used directly here and it means that it could be easily taken via F12 analysis and re-used by smart business users or could be used for non-designed business scenarios. We have reviewed integration we suggested here to avoid developer token usage that is for sure critical, however, direct request token usage is always not the best approach either.
Hi Mikhail. Are you located in Wrocław? Would you like to present it at our local SAP Community Meetup https://www.meetup.com/Wroclaw-SAP-Community-Meetup/
?
Dear Witalij,
Thank you for your comment!
Indeed, Skybuffer has an office in Wroclaw and we are more than willing to take part in SAP Community Meetup! I am located in our office in Minsk, Belarus. However, we have discussed the matter with Alex who is running our office in Poland, so he will get in touch with you.
Thank you once again for the opportunity to get connected!
Kind regards,
Mikhail
Whether request access token of Recast.AI should be added in both the function (getBotInstanceId() and createmessage()) ?
CreateMessage function is responsible for message creation and publishing in chat. The function is performed, when message from user successfully sent to Recase API and response came.
Request access token must be provided in getBotInstanceId().
Thank you for sharing this blog post Mikhail. Can you share what the onBeforeBotOpen() function inside openBot function consists of.?
Sure,
onBeforeBotOpen() as well as onAfterBotOpen() function is responsible for displaying chat Popover:
Great post! Can you please share the codes?
Thank you so much for this blog Mikhail. I worked with Manisha who wrote the following blog.
https://blogs.sap.com/2018/08/13/chatbot-integrationrecast.ai-with-sap-ui5
The points you considered in this blog are totally valid. We realized it in later stages of our development and we are currently having every control in SAPUI5. But, exposing of the token is something that needs to be further pondered about.
Nice Blog!
Hi Mikhail,
Great blog!
Can you share the code on github?
Thanks
Hi Mikhail,
I am facing issue "Request can not be processed without authentication" when i am trying to get the response from the bot connector for types message. Can you please tell me what could be the issue? Also from where can we get the "conversation_id" ?
Hi Mikhail,
Great post! Can you explain how you defined onAfterRendering function?
I don't see a snippet for that.
Thanks!
Hi Mikhail Andryievich ,
Your blog is really nice and i'm able to create a basic bot and integrate it to UI5 app. Now i want to read data from my odata service, for instance, northwind service. Could you please help me for this.
I tried using this “Call Webhook” option during Actions tab and provided the Northwind odata service there, but i’m always getting “500 – Internal Server Error” through my app and "No Reply" while testing in the recast link.
I've come across few links which suggest using NodeJS or JAVA to accomplish this but i want to try this without using NodeJS or JAVA.
Any suggestions would be of great help.
Thanks.