Search code examples
c#botframeworkchatbotmicrosoft-teams

Use AudioCard of Microsoft Bot with Microsoft Teams see bot UI shows "Go back to the main window to see this content."


I can run this Teams Bot sample: https://github.com/microsoft/BotBuilder-Samples/tree/main/samples/csharp_dotnetcore/57.teams-conversation-bot

When I need to add an AudioCard to play a mp3 song, I updated my code:

    private async Task CardActivityAsync(ITurnContext<IMessageActivity> turnContext, bool update, CancellationToken cancellationToken)
    {
        var card = GetAudioCard();

        await SendUpdatedCardAudio(turnContext, card, cancellationToken);

    }

    private static AudioCard GetAudioCard()
    {
        var audioCard = new AudioCard
        {
            Title = "I am your father",
            Subtitle = "Star Wars: Episode V - The Empire Strikes Back",
            Text = "The Empire Strikes Back (also known as Star Wars: Episode V – The Empire Strikes Back)" +
                   " is a 1980 American epic space opera film directed by Irvin Kershner. Leigh Brackett and" +
                   " Lawrence Kasdan wrote the screenplay, with George Lucas writing the film's story and serving" +
                   " as executive producer. The second installment in the original Star Wars trilogy, it was produced" +
                   " by Gary Kurtz for Lucasfilm Ltd. and stars Mark Hamill, Harrison Ford, Carrie Fisher, Billy Dee Williams," +
                   " Anthony Daniels, David Prowse, Kenny Baker, Peter Mayhew and Frank Oz.",
            Image = new ThumbnailUrl
            {
                Url = "https://upload.wikimedia.org/wikipedia/en/3/3c/SW_-_Empire_Strikes_Back.jpg",
            },
            Media = new List<MediaUrl>
            {
                new MediaUrl()
                {
                    Url = "https://wavlist.com/wav/father.wav",
                },
            },
            Buttons = new List<CardAction>
            {
                new CardAction()
                {
                    Title = "Read More",
                    Type = ActionTypes.OpenUrl,
                    Value = "https://en.wikipedia.org/wiki/The_Empire_Strikes_Back",
                },
            },
        };

        return audioCard;
    }

    private static async Task SendUpdatedCardAudio(ITurnContext<IMessageActivity> turnContext, AudioCard card, CancellationToken cancellationToken)
    {
        var attachments = new List<Attachment>();
        var reply = MessageFactory.Attachment(attachments);

        reply.Attachments.Add(card.ToAttachment());

        await turnContext.SendActivityAsync(reply, cancellationToken);
    }

Above modification is with reference from this sample: https://github.com/microsoft/BotBuilder-Samples/tree/main/samples/csharp_dotnetcore/06.using-cards

When I tested it in Teams Bot, I see the following replies: From Teams Bot

The replies said: "Go back to the main window to see this content.".

Do you know why? Thanks.


Solution

  • Recall that the "Bot Framework" is a general Bot creation framework from Microsoft, with Teams just being one particular implementation. As a result, some things are simply not supported in a Teams context. In this case, as per the docs over here:

    The following cards are implemented by the Bot Framework, but are not supported by Teams:
    
    - ..
    - Audio cards
    - ..
    

    So you would need to implement another solution to audio, unfortunately. What you could instead perhaps do is provide a link to the audio file, or to a player, something like that. Another alternative is to implement a Task Module (basically a popup in Teams) that embeds your own small html5 audio player.

    So what ou