Definir comandos de pesquisa da extensão de mensagens

Para criar uma extensão de mensagem baseada em pesquisa com o Teams Toolkit, siga estes passos:

1. Abra o Visual Studio Code.

2. No painel esquerdo, selecione Teams Toolkit.

3. Selecione Criar uma Nova Aplicação.

4. Selecione Extensão da Mensagem.

5. Selecione Resultados de Pesquisa Personalizados.

6. Selecione uma linguagem de programação.

7. Selecione Pasta predefinida.

8. Introduza o nome da sua aplicação e selecione Enter.

   O Teams Toolkit estrutura o seu projeto e cria uma extensão de mensagem de pesquisa.

Para executar a extensão de mensagem no Teams, siga estes passos:

1. No painel esquerdo, selecione Teams Toolkit.

2. Em CONTAS, inicie sessão com a sua conta do Microsoft 365 e a conta do Azure, caso ainda não o tenha feito.

   

3. No painel esquerdo, selecione Executar e Depurar (Ctrl+Shift+D).

4. Na lista pendente de configuração de início, selecione Preview in Teams (Edge) ou Preview in Teams (Chrome). O Teams Toolkit inicia o cliente Web do Teams numa janela do browser.

5. Aceda a uma mensagem de chat e selecione o ícone Ações e aplicações . No menu de opções, procure a sua aplicação.

6. Selecione a extensão da mensagem na lista e introduza um comando de pesquisa na caixa de pesquisa.

7. Selecione um item na lista. O item desenrola-se num Cartão Ajustável na área de composição de mensagens.

8. Selecione Enviar. O Teams envia o resultado da pesquisa como um Cartão Ajustável na mensagem de chat.

1. Aceda ao Portal do Programador do Teams.

2. Aceda a Aplicações.

3. Selecione Criar uma nova aplicação.

4. Em Configurar, selecioneFuncionalidades da aplicação.

5. Selecione Extensão de mensagens.

   

6. Em Tipo de extensão de mensagem, selecione Bot.

   1. Se receber uma exclusão de responsabilidade, que diz API Message extension já está a ser utilizada pelos utilizadores. Pretende alterar o tipo de extensão da mensagem para bot? Selecione Sim, alterar.

   

7. Se tiver um bot existente, selecione Bot existente ou, se tiver um ID de bot, selecione Introduzir ID do Bot.

   1. Se não tiver um ID de bot existente, selecione Criar um bot para criar um novo bot e introduza o ID do bot novo que criou.

8. Selecione Salvar.

9. Selecione os âmbitos necessários.

10. Em Comando, selecione + Adicionar um comando.

    É apresentada uma página de detalhes do comando.

11. Na página Detalhes do comando, selecione Procurar como o tipo de comando e atualize os seguintes campos:

    • ID do Comando
    • Título do comando
    • Descrição do comando
    • Contexto no qual o comando funciona
    • Nome do parâmetro
    • Título do parâmetro
    • Descrição do parâmetro
    • Selecione o tipo de entrada

12. Selecione Salvar. Uma extensão de mensagem de pesquisa com a arquitetura de bot criada.

13. No canto superior direito, selecione Pré-visualizar no Teams. A aplicação é aberta no ambiente de trabalho ou no cliente Web do Teams.

• Referência do SDK
• Referência de código de exemplo

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
                }
            };
        }

Referência de código de exemplo

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
                    }
                };
            }       
        }