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 a nice and chat-looking appearance of your integrated Chatbot.
Disadvantages of the Current Approach
Please consider that the current integration approach is quite good for a piloting stage only, as well as for SAP systems (Fiori Launchpads) with direct Internet connection (that is not always the case). Additionally, please note that Recast.ai request token is used here directly and it means that it can be easily taken via F12 analysis and re-used by smart business users, or can be used for non-designed business scenarios. We have reviewed the suggested integration to avoid developer token usage that is for sure critical. However, direct request token usage is not always the best approach, either.