SAPCAI quick replies displayed as attachments - botframework

Question

I used SAPCAI (SAP Conversational AI is a French development platform like Azure Bot Service) to build my chatbot, but I'm using the Bot-Framework Webchat on my web app. Therefore, I don't have any C# or JS code. The problem is SAPCAI quick replies are displayed as "attachments". How can I fix that?
Expected
Got

Answer 1

What you want is the Quick replies type.
Quick replies: Same purpose as buttons, but disappear once clicked. Great if you don’t want the user to have to scroll up the conversation and click on a button again.
There is information about how to create click replies on this page. It seems to be in the format of:
{
"type": "quickReplies",
"content": {
"title": "TITLE",
"buttons": [
{
"title": "BUTTON_TITLE",
"value": "BUTTON_VALUE"
}
]
}
}
The important part would be "type": "quickReplies". Since you haven't provided any code I'm not sure if you know how to get to the stage where you enter/edit this JSON. From the documentation on the first page that I linked it would seem that you get to this via:
On the Actions tab of a skill (or on the Requirements tab), you can choose among other things to send messages.
Under the send message button you will be displayed a list of message types to send, quick replies is one of these types. See my screenshots here.
I hope this helps.

Answer 2

I'm not entirely sure how SAPCAI works, but if you are receiving a card in Web Chat, you can use a custom middleware store to convert the card's title to text and its buttons to suggested actions. Then you can add them to the activity in place of the attachment. Note, the store middleware below will convert all card to suggested actions, so you may want to add some additional logic if you do intend to use other cards in your dialog. Also, if the card is an AdaptiveCard, you will need to do some more modifications as well since those tend to more complex than rich cards.
Middleware
const store = createStore(
{},
({ dispatch}) => next => async action => {
if (action.type === 'DIRECT_LINE/INCOMING_ACTIVITY') {
const { attachments, from: { role }} = action.payload.activity;
if (role === 'bot' && attachments) {
const text = attachments.map(({ content: { title }}) => title).join(' ');
const actions = attachments.map(({content: { buttons }}) => buttons).flat();
action.payload.activity.text = text;
action.payload.activity.attachments = [];
action.payload.activity.suggestedActions = { actions };
}
}
return next(action)
}
);
renderWebChat({
directLine,
store,
}, document.getElementById('webchat'));
Screenshot
Hope this helps!