Définir des commandes de recherche d’extension de message

Pour créer une extension de message basée sur la recherche à l’aide de Teams Toolkit, procédez comme suit :

1. Ouvrez Visual Studio Code.

2. Dans le volet gauche, sélectionnez Kit de ressources Teams.

3. Sélectionnez Créer une application.

4. Sélectionnez Extension de message.

5. Sélectionnez Résultats de la recherche personnalisée.

6. Sélectionnez un langage de programmation.

7. Sélectionnez Dossier par défaut.

8. Entrez le nom de votre application, puis sélectionnez Entrée.

   Teams Toolkit crée une structure automatique de votre projet et crée une extension de message de recherche.

Pour exécuter l’extension de message dans Teams, procédez comme suit :

1. Dans le volet de gauche, sélectionnez Boîte à outils Teams.

2. Sous COMPTES, connectez-vous avec votre compte Microsoft 365 et votre compte Azure si ce n’est déjà fait.

   

3. Dans le volet gauche, sélectionnez Exécuter et déboguer (Ctrl+Maj+D).

4. Dans la liste déroulante de configuration de lancement, sélectionnez Preview in Teams (Edge) ou Preview in Teams (Chrome). Teams Toolkit lance le client web Teams dans une fenêtre de navigateur.

5. Accédez à un message de conversation et sélectionnez l’icône Actions et applications . Dans le menu volant, recherchez votre application.

6. Sélectionnez votre extension de message dans la liste et entrez une commande de recherche dans la zone de recherche.

7. Sélectionnez un élément dans la liste. L’élément se déploie dans une carte adaptative dans la zone de composition de message.

8. Sélectionnez Envoyer. Teams envoie le résultat de la recherche sous forme de carte adaptative dans le message de conversation.

1. Accédez au Portail des développeurs pour Teams.

2. Accédez à Applications.

3. Sélectionnez Créer une application.

4. Sous Configurer, sélectionnez Fonctionnalités de l’application.

5. Sélectionnez Extension de messagerie.

   

6. Sous Type d’extension de message, sélectionnez Bot.

   1. Si vous obtenez une clause d’exclusion de responsabilité, qui indique que l’extension de message d’API est déjà utilisée par les utilisateurs. Voulez-vous changer le type d’extension de message en bot ?. Sélectionnez Oui, modifier.

   

7. Si vous avez un bot existant, sélectionnez Bot existant ou, si vous avez un ID de bot, sélectionnez Entrer l’ID du bot.

   1. Si vous n’avez pas d’ID de bot existant, sélectionnez Créer un bot pour créer un bot et entrez l’ID du bot que vous avez créé.

8. Sélectionnez Enregistrer.

9. Sélectionnez les étendues requises.

10. Sous Commande, sélectionnez + Ajouter une commande.

    Une page de détails de commande s’affiche.

11. Dans la page Détails de la commande, sélectionnez Rechercher comme type de commande et mettez à jour les champs suivants :

    • ID de commande
    • Titre de la commande
    • Description de la commande
    • Contexte dans lequel la commande fonctionne
    • Nom du paramètre
    • Titre du paramètre
    • Description du paramètre
    • Sélectionner le type d’entrée

12. Sélectionnez Enregistrer. Extension de message de recherche à l’aide de l’infrastructure de bot créée.

13. Dans le coin supérieur droit, sélectionnez Aperçu dans Teams. L’application s’ouvre dans le client web ou de bureau Teams.

• Référence du Kit de développement logiciel (SDK)
• Exemple de référence de code

protected override async Task<MessagingExtensionResponse> OnTeamsMessagingExtensionQueryAsync(ITurnContext<IInvokeActivity> turnContext, MessagingExtensionQuery query, CancellationToken cancellationToken)
        {
            var text = query?.Parameters?[0]?.Value as string ?? string.Empty;

            var packages = new[] {
            new { title = "A very extensive set of extension methods", value = "FluentAssertions" },
            new { title = "Fluent UI Library", value = "FluentUI" }};

            // We take every row of the results and wrap them in cards wrapped in MessagingExtensionAttachment objects.
            // The Preview is optional, if it includes a Tap, that will trigger the OnTeamsMessagingExtensionSelectItemAsync event back on this bot.
            var attachments = packages.Select(package =>
            {
                var previewCard = new ThumbnailCard { Title = package.title, Tap = new CardAction { Type = "invoke", Value = package } };
                if (!string.IsNullOrEmpty(package.title))
                {
                    previewCard.Images = new List<CardImage>() { new CardImage(package.title, "Icon") };
                }

                var attachment = new MessagingExtensionAttachment
                {
                    ContentType = HeroCard.ContentType,
                    Content = new HeroCard { Title = package.title },
                    Preview = previewCard.ToAttachment()
                };

                return attachment;
            }).ToList();

            // The list of MessagingExtensionAttachments must we wrapped in a MessagingExtensionResult wrapped in a MessagingExtensionResponse.
            return new MessagingExtensionResponse
            {
                ComposeExtension = new MessagingExtensionResult
                {
                    Type = "result",
                    AttachmentLayout = "list",
                    Attachments = attachments
                }
            };
        }

Exemple de référence de code

async handleTeamsMessagingExtensionQuery(context, query) {
        const searchQuery = query.parameters[0].value;     
        const attachments = [];
                const response = await axios.get(`http://registry.npmjs.com/-/v1/search?${ querystring.stringify({ text: searchQuery, size: 8 }) }`);
                
                response.data.objects.forEach(obj => {
                        const heroCard = CardFactory.heroCard(obj.package.name);
                        const preview = CardFactory.heroCard(obj.package.name);
                        preview.content.tap = { type: 'invoke', value: { description: obj.package.description } };
                        const attachment = { ...heroCard, preview };
                        attachments.push(attachment);
                });
    
                return {
                    composeExtension:  {
                           type: 'result',
                           attachmentLayout: 'list',
                           attachments: attachments
                    }
                };
            }       
        }