microsoft / ConversationLearner-Samples

Sample bot using the ConversationLearner SDK

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Responding with a Card from an API Callback

srozga opened this issue · comments

It is unclear how to response with a card from a callback. App.ts refers to BB.Activity, but that type isn't available in that namespace. Tried returning the result of calling BB.CardFactory.heroCard but nothing was sent back to the emulator.
Thanks
-s

Might be easiest to just share an example. Here is an API callback that renders a carousel of cocktail cards:

cl.AddAPICallback("ShowCocktails", async (memoryManager: ClientMemoryManager) => {

let cocktails = memoryManager.EntityValueAsList("cocktails")

let attachments = []

for (let id of cocktails) {
    let cocktail = await getCocktailById(id)
    if (cocktail) {
        let card = renderDrink(cocktail);
        attachments.push(BB.CardFactory.adaptiveCard(card))
    }
}

const message = BB.MessageFactory.list(attachments)
message.text = undefined
message.attachmentLayout = "carousel"

return message

})

export function renderDrink(drink: IDrink) {

let facts = [];
if (drink.strIngredient1) {
    facts.push({
        title: drink.strIngredient1,
        value: drink.strMeasure1
    })
}
if (drink.strIngredient2) {
    facts.push({
        title: drink.strIngredient2,
        value: drink.strMeasure2
    })
}
if (drink.strIngredient3) {
    facts.push({
        title: drink.strIngredient3,
        value: drink.strMeasure3
    })
}
if (drink.strIngredient4) {
    facts.push({
        title: drink.strIngredient4,
        value: drink.strMeasure4
    })
}
if (drink.strIngredient5) {
    facts.push({
        title: drink.strIngredient5,
        value: drink.strMeasure5
    })
}
let factSet = {
    type: "FactSet",
    facts: facts
}

let items = [];
items.push(
    {
        type: "TextBlock",
        text: drink.strDrink,
        weight: "bolder",
        size: "extraLarge",
        spacing: "none"
});
items.push({
    type: "TextBlock",
    text: drink.strGlass,
    size: "small",
    wrap: true
})

let column1 = {
    type: "Column",
    width: 1,
    items: items
}

let column2 = {
    type: "Column",
    width: 1,
    items: [
        {
            type: "Image",
            url: drink.strDrinkThumb
        }
    ]
}

let body = [];
body.push({
    type: "ColumnSet",
    columns: [column1, column2]
})
body.push({
    type: "TextBlock",
    text: drink.strInstructions,
    size: "small",
    wrap: true
})
body.push(factSet)

let actions = [];
actions.push({
    type: "Action.Submit",
    title: "Make It!",
    data: { submit: "Make It" }
})
actions.push({
    type: "Action.Submit",
    title: "Something Else",
    data: { submit: "Something Else" }
})

let acard = {
    $schema: "http://adaptivecards.io/schemas/adaptive-card.json",
    type: "AdaptiveCard",
    version: "1.0",
    body: body,
    actions: actions
}
return acard;

}

Got it! MessageFactory is what I was looking for. Thanks!