Utiliser un bouton pour fournir une entrée

S'APPLIQUE À : SDK v4

Les boutons améliorent l'expérience conversationnelle en permettant à l'utilisateur de répondre à une question ou de sélectionner le bouton souhaité, plutôt que d'avoir à taper une réponse au clavier. Contrairement aux boutons qui apparaissent dans les cartes enrichies (qui restent visibles et accessibles à l'utilisateur même après avoir été sélectionnés), les boutons qui apparaissent dans le volet des actions suggérées disparaissent après que l'utilisateur a effectué une sélection. Cela évite à l'utilisateur de sélectionner des boutons périmés au cours d'une conversation et simplifie le développement de bot puisque vous n'aurez pas à tenir compte de ce scénario.

Remarque

Les kits SDK JavaScript, C# et Python Bot Framework continueront d’être pris en charge. Toutefois, le kit de développement logiciel (SDK) Java est mis hors service avec une prise en charge finale à long terme se terminant en novembre 2023.

Les bots existants créés avec le kit de développement logiciel (SDK) Java continueront de fonctionner.

Pour la nouvelle génération de bots, envisagez d'utiliser Power Virtual Agents et découvrez comment choisir la solution de chatbot appropriée.

Pour plus d'informations, consultez Les futures versions de bot.

Suggérer l’action d’utiliser un bouton

Les actions suggérées permettent à votre bot de présenter des boutons. Vous pouvez créer une liste d'actions suggérées (également appelée réponses rapides) qui s'affichera à l'utilisateur une seule fois pendant la conversation.

C#

Voici un exemple de l'échantillon d'actions suggérées.

// Creates and sends an activity with suggested actions to the user. When the user
// clicks one of the buttons the text value from the "CardAction" will be
// displayed in the channel just as if the user entered the text. There are multiple
// "ActionTypes" that may be used for different situations.
private static async Task SendSuggestedActionsAsync(ITurnContext turnContext, CancellationToken cancellationToken)
{
    var reply = MessageFactory.Text("What is your favorite color?");

    reply.SuggestedActions = new SuggestedActions()
    {
        Actions = new List<CardAction>()
        {
            new CardAction() { Title = "Red", Type = ActionTypes.ImBack, Value = "Red", Image = "https://via.placeholder.com/20/FF0000?text=R", ImageAltText = "R" },
            new CardAction() { Title = "Yellow", Type = ActionTypes.ImBack, Value = "Yellow", Image = "https://via.placeholder.com/20/FFFF00?text=Y", ImageAltText = "Y" },
            new CardAction() { Title = "Blue", Type = ActionTypes.ImBack, Value = "Blue", Image = "https://via.placeholder.com/20/0000FF?text=B", ImageAltText = "B" },
        },
    };
    await turnContext.SendActivityAsync(reply, cancellationToken);
}

JavaScript

Voici un exemple de l'échantillon d'actions suggérées.

/**
 * Send suggested actions to the user.
 * @param {TurnContext} turnContext A TurnContext instance containing all the data needed for processing this conversation turn.
 */
async sendSuggestedActions(turnContext) {
    const cardActions = [
        {
            type: ActionTypes.PostBack,
            title: 'Red',
            value: 'Red',
            image: 'https://via.placeholder.com/20/FF0000?text=R',
            imageAltText: 'R'
        },
        {
            type: ActionTypes.PostBack,
            title: 'Yellow',
            value: 'Yellow',
            image: 'https://via.placeholder.com/20/FFFF00?text=Y',
            imageAltText: 'Y'
        },
        {
            type: ActionTypes.PostBack,
            title: 'Blue',
            value: 'Blue',
            image: 'https://via.placeholder.com/20/0000FF?text=B',
            imageAltText: 'B'
        }
    ];

    var reply = MessageFactory.suggestedActions(cardActions, 'What is the best color?');
    await turnContext.sendActivity(reply);
}

Java

Voici un exemple de l'échantillon d'actions suggérées.

/**
 * Creates and sends an activity with suggested actions to the user. When the user
 * clicks one of the buttons the text value from the "CardAction" will be
 * displayed in the channel just as if the user entered the text. There are multiple
 * "ActionTypes" that may be used for different situations.
 */
private static CompletableFuture<Void> sendSuggestedActions(TurnContext turnContext) {
    Activity reply = MessageFactory.text("What is your favorite color?");

    CardAction redAction = new CardAction();
    redAction.setTitle("Red");
    redAction.setType(ActionTypes.IM_BACK);
    redAction.setValue("Red");
    redAction.setImage("https://via.placeholder.com/20/FF0000?text=R");
    redAction.setImageAltText("R");

    CardAction yellowAction = new CardAction();
    yellowAction.setTitle("Yellow");
    yellowAction.setType(ActionTypes.IM_BACK);
    yellowAction.setValue("Yellow");
    yellowAction.setImage("https://via.placeholder.com/20/FFFF00?text=Y");
    yellowAction.setImageAltText("Y");

    CardAction blueAction = new CardAction();
    blueAction.setTitle("Blue");
    blueAction.setType(ActionTypes.IM_BACK);
    blueAction.setValue("Blue");
    blueAction.setImage("https://via.placeholder.com/20/0000FF?text=B");
    blueAction.setImageAltText("B");

    SuggestedActions actions = new SuggestedActions();
    actions.setActions(Arrays.asList(redAction, yellowAction, blueAction));
    reply.setSuggestedActions(actions);
    return turnContext.sendActivity(reply).thenApply(sendResult -> null);
}

Python

Voici un exemple de l'échantillon d'actions suggérées.

async def _send_suggested_actions(self, turn_context: TurnContext):
    """
    Creates and sends an activity with suggested actions to the user. When the user
    clicks one of the buttons the text value from the "CardAction" will be displayed
    in the channel just as if the user entered the text. There are multiple
    "ActionTypes" that may be used for different situations.
    """

    reply = MessageFactory.text("What is your favorite color?")

    reply.suggested_actions = SuggestedActions(
        actions=[
            CardAction(
                title="Red",
                type=ActionTypes.im_back,
                value="Red",
                image="https://via.placeholder.com/20/FF0000?text=R",
                image_alt_text="R",
            ),
            CardAction(
                title="Yellow",
                type=ActionTypes.im_back,
                value="Yellow",
                image="https://via.placeholder.com/20/FFFF00?text=Y",
                image_alt_text="Y",
            ),
            CardAction(
                title="Blue",
                type=ActionTypes.im_back,
                value="Blue",
                image="https://via.placeholder.com/20/0000FF?text=B",
                image_alt_text="B",
            ),
        ]
    )

    return await turn_context.send_activity(reply)

Ressources supplémentaires

Vous pouvez accéder au code source complet pour l'échantillon d'actions suggérées en C#, JavaScript, Java et Python.

Étapes suivantes

Enregistrer les données d’utilisateur et de conversation