Поделиться через


Отправка вложений мультимедиа с помощью пакета SDK Bot Framework

ОБЛАСТЬ ПРИМЕНЕНИЯ: ПАКЕТ SDK версии 4

Обмен сообщениями между пользователем и ботом может включать вложения мультимедиа, такие как изображения, видео, аудио и файлы. Пакет SDK Bot Framework поддерживает задачу отправки пользователю богатых сообщений. Чтобы определить тип форматированных сообщений, поддерживаемых каналом (Facebook, Slack и т. д.), ознакомьтесь с документацией канала по вопросам ограничений.

Примечание.

Чтобы создавать агенты с помощью выбранной службы ИИ, оркестрации и знаний, рекомендуется использовать пакет SDK для агентов Microsoft 365. Пакет SDK для агентов поддерживает C#, JavaScript или Python. Дополнительные сведения о пакете SDK для агентов см. в aka.ms/agents. Если вы ищете платформу агента на основе SaaS, рассмотрите microsoft Copilot Studio. Если у вас есть существующий бот, созданный с помощью пакета SDK Bot Framework, вы можете обновить бота до пакета SDK для агентов. Вы можете ознакомиться с основными изменениями и обновлениями в руководстве по миграции с Bot Framework SDK на SDK для агентов. Запросы на поддержку пакета SDK Bot Framework больше не будут обслуживаться с 31 декабря 2025 г.

Предварительные условия

Отправка вложений

Чтобы отправить пользователю содержимое, например изображение или видео, нужно добавить вложение или список вложений в сообщение.

Примеры доступных карточек см. в разделе " Проектирование пользовательского интерфейса ".

Дополнительные сведения см. в разделе "Что такое ограничение размера файла, переданного с помощью каналов?", в разделе часто задаваемых вопросов.

Весь исходный код, показанный в этом разделе, основан на примере обработки вложений .

Свойство Attachments объекта Activity содержит массив объектов Attachment, представляющих мультимедийные вложения и богатые карточки в сообщении. Чтобы добавить мультимедийное вложение в сообщение, создайте объект Attachment для действия reply и задайте свойства ContentType, ContentUrl и Name.

Чтобы создать ответное сообщение, определите текст и настройте вложения. Присвоение вложений ответному сообщению выполняется одинаково для всех типов вложений, но настройка и определение разных вложений будут отличаться, как показано в следующих фрагментах. Ниже приведен код для настройки ответа со встроенным вложением:

Боты/AttachmentsBot.cs

{
    reply = MessageFactory.Text("This is an inline attachment.");

Далее мы рассмотрим типы вложений. Во-первых, это встроенное вложение:

Боты/AttachmentsBot.cs

{
    var imagePath = Path.Combine(Environment.CurrentDirectory, @"Resources", "architecture-resize.png");
    var imageData = Convert.ToBase64String(File.ReadAllBytes(imagePath));

    return new Attachment
    {
        Name = @"Resources\architecture-resize.png",
        ContentType = "image/png",
        ContentUrl = $"data:image/png;base64,{imageData}",
    };
}

Затем загруженное вложение:

Боты/AttachmentsBot.cs

{
    if (string.IsNullOrWhiteSpace(serviceUrl))
    {
        throw new ArgumentNullException(nameof(serviceUrl));
    }

    if (string.IsNullOrWhiteSpace(conversationId))
    {
        throw new ArgumentNullException(nameof(conversationId));
    }

    var imagePath = Path.Combine(Environment.CurrentDirectory, @"Resources", "architecture-resize.png");

    var connector = turnContext.TurnState.Get<IConnectorClient>() as ConnectorClient;
    var attachments = new Attachments(connector);
    var response = await attachments.Client.Conversations.UploadAttachmentAsync(
        conversationId,
        new AttachmentData
        {
            Name = @"Resources\architecture-resize.png",
            OriginalBase64 = File.ReadAllBytes(imagePath),
            Type = "image/png",
        },
        cancellationToken);

    var attachmentUri = attachments.GetAttachmentUri(response.Id);

    return new Attachment
    {
        Name = @"Resources\architecture-resize.png",
        ContentType = "image/png",
        ContentUrl = attachmentUri,
    };
}

Наконец, вложение из Интернета:

Боты/AttachmentsBot.cs

    {
        // ContentUrl must be HTTPS.
        return new Attachment
        {
            Name = @"Resources\architecture-resize.png",
            ContentType = "image/png",
            ContentUrl = "https://docs.microsoft.com/en-us/bot-framework/media/how-it-works/architecture-resize.png",
        };
    }
}

Если вложение представляет собой изображение, аудиофайл или видео, служба соединителя будет передавать данные вложения каналу так, чтобы позволить каналу обрабатывать это вложение в диалоге. Если вложение представляет собой файл, URL-адрес файла будет отображаться в диалоге как гиперссылка.

Отправить карту героя

Помимо простых вложений изображений или видео, вы можете прикрепить карточку героя, которая позволяет объединять изображения и кнопки в один объект и отправлять их пользователю. Markdown поддерживается для большинства текстовых полей, но особенности поддержки зависят от канала.

Чтобы создать сообщение с карточкой героя и кнопкой, можно подключить HeroCard объект к сообщению.

Следующий исходный код представлен в примере "Обработка вложений ".

Боты/AttachmentsBot.cs


      private static async Task DisplayOptionsAsync(ITurnContext turnContext, CancellationToken cancellationToken)
      {
          // Create a HeroCard with options for the user to interact with the bot.
          var card = new HeroCard
          {
              Text = "You can upload an image or select one of the following choices",
              Buttons = new List<CardAction>
              {
                  // Note that some channels require different values to be used in order to get buttons to display text.
                  // In this code the emulator is accounted for with the 'title' parameter, but in other channels you may
                  // need to provide a value for other parameters like 'text' or 'displayText'.
                  new CardAction(ActionTypes.ImBack, title: "1. Inline Attachment", value: "1"),
                  new CardAction(ActionTypes.ImBack, title: "2. Internet Attachment", value: "2"),
                  new CardAction(ActionTypes.ImBack, title: "3. Uploaded Attachment", value: "3"),
              },
          };

          var reply = MessageFactory.Attachment(card.ToAttachment());
          await turnContext.SendActivityAsync(reply, cancellationToken);

Обработать события в интерактивных карточках

Чтобы обработать события в богатых карточках, используйте объекты действия карточки, чтобы указать, что должно происходить, когда пользователь выбирает кнопку или касается раздела карточки. Каждое действие карточки имеет свойство типа и значения .

Чтобы правильно функционировать, назначьте тип действия каждому элементу, который можно щелкнуть на карточке героя. В этой таблице перечислены и описаны доступные типы действий и что должно содержаться в связанном свойстве значения.

Действие messageBack карточки имеет более обобщенное значение, чем другие действия карты. Дополнительные сведения о и других типах действий карты см. в разделе «Действие карты» схемы активности.

Тип Описание Значение
звонок Инициирует телефонный звонок. Целевое назначение телефонного звонка в следующем формате: tel:123123123123.
загрузить файл Скачивает файл. URL-адрес для скачивания файла.
imBack Отправляет боту сообщение и отображает полученный ответ в чате. Текст отправляемого сообщения.
ответитьСообщением Представляет текстовый ответ, отправляемый через систему чата. Необязательное программное значение для включения в созданные сообщения.
openUrl Открывает URL-адрес в окне встроенного браузера. URL-адрес, который нужно открыть.
воспроизвестиАудио Воспроизводит звук. URL-адрес для воспроизведения звука.
воспроизвестиВидео Воспроизводит видео. URL-адрес для воспроизведения видео.
обратная отправка данных Отправляет боту сообщение, но не всегда отображает полученный ответ в чате. Текст отправляемого сообщения.
показатьИзображение Отображает изображение. URL-адрес для отображения изображения.
вход Инициирует процесс входа OAuth. URL-адрес потока OAuth, который нужно запустить.

Карточка героя с различными типами событий

В следующем коде показаны примеры использования различных событий интерактивных карточек.

Примеры всех доступных карточек см. в примере "Использование карточек ".

Cards.cs

public static HeroCard GetHeroCard()
{
    var heroCard = new HeroCard
    {
        Title = "BotFramework Hero Card",
        Subtitle = "Microsoft Bot Framework",
        Text = "Build and connect intelligent bots to interact with your users naturally wherever they are," +
               " from text/sms to Skype, Slack, Office 365 mail and other popular services.",
        Images = new List<CardImage> { new CardImage("https://sec.ch9.ms/ch9/7ff5/e07cfef0-aa3b-40bb-9baa-7c9ef8ff7ff5/buildreactionbotframework_960.jpg") },
        Buttons = new List<CardAction> { new CardAction(ActionTypes.OpenUrl, "Get Started", value: "https://docs.microsoft.com/bot-framework") },
    };

    return heroCard;
}

Cards.cs

public static SigninCard GetSigninCard()
{
    var signinCard = new SigninCard
    {
        Text = "BotFramework Sign-in Card",
        Buttons = new List<CardAction> { new CardAction(ActionTypes.Signin, "Sign-in", value: "https://login.microsoftonline.com/") },
    };

    return signinCard;
}

Отправка адаптивной карточки

Хотя можно использовать фабрику сообщений для создания сообщения, содержащего вложение (любого рода), адаптивная карточка — это один из конкретных типов вложений. Не все каналы поддерживают адаптивные карточки, а некоторые каналы могут частично поддерживать адаптивные карточки. Например, при отправке адаптивной карточки в Facebook кнопки не будут работать, а текст и изображения будут функционировать нормально. Фабрика сообщений — это вспомогательный класс пакета SDK Bot Framework, используемый для автоматизации действий по созданию.

Адаптивные карточки — это открытый формат обмена карточками, позволяющий разработчикам обмениваться контентом пользовательского интерфейса общим и согласованным способом. Однако не все каналы поддерживают адаптивные карточки.

Конструктор адаптивных карточек предоставляет широкий интерактивный интерфейс разработки адаптивных карточек.

Примечание.

Вы должны протестировать эту функцию, выбрав каналы, которые будут использоваться ботом, чтобы определить, поддерживают ли они адаптивные карточки.

Чтобы использовать адаптивные карточки, не забудьте добавить пакет NuGet AdaptiveCards.

Следующий исходный код представлен в примере "Использование карточек ".

Cards.cs

В этом примере JSON адаптивной карточки загружается из файла и добавляется в качестве вложения.

public static Attachment CreateAdaptiveCardAttachment()
{
    // combine path for cross platform support
    var paths = new[] { ".", "Resources", "adaptiveCard.json" };
    var adaptiveCardJson = File.ReadAllText(Path.Combine(paths));

    var adaptiveCardAttachment = new Attachment()
    {
        ContentType = "application/vnd.microsoft.card.adaptive",
        Content = JsonConvert.DeserializeObject(adaptiveCardJson),
    };

    return adaptiveCardAttachment;
}

Сообщения также могут включать несколько вложений в макете карусели, где вложения помещаются одно за другим и пользователь может их прокручивать.

Следующий исходный код представлен в примере "Использование карточек ".

Диалоги/MainDialog.cs

Сначала создайте ответ и определите вложения в виде списка.

// Cards are sent as Attachments in the Bot Framework.
// So we need to create a list of attachments for the reply activity.
var attachments = new List<Attachment>();

// Reply to the activity we received with an activity.
var reply = MessageFactory.Attachment(attachments);

Затем добавьте вложения и установите тип макета на карусель. Здесь мы добавляем их по одному, но вы можете управлять этим списком и добавлять в него карточки любым удобным методом.

// Display a carousel of all the rich card types.
reply.AttachmentLayout = AttachmentLayoutTypes.Carousel;
reply.Attachments.Add(Cards.CreateAdaptiveCardAttachment());
reply.Attachments.Add(Cards.GetAnimationCard().ToAttachment());
reply.Attachments.Add(Cards.GetAudioCard().ToAttachment());
reply.Attachments.Add(Cards.GetHeroCard().ToAttachment());
reply.Attachments.Add(Cards.GetOAuthCard().ToAttachment());
reply.Attachments.Add(Cards.GetReceiptCard().ToAttachment());
reply.Attachments.Add(Cards.GetSigninCard().ToAttachment());
reply.Attachments.Add(Cards.GetThumbnailCard().ToAttachment());
reply.Attachments.Add(Cards.GetVideoCard().ToAttachment());

Завершив добавление вложений, вы можете отправить этот ответ так же, как и любой другой.

// Send the card(s) to the user as an attachment to the activity
await stepContext.Context.SendActivityAsync(reply, cancellationToken);

Пример кода для обработки входных данных адаптивной карточки

В следующем примере показан один из способов использования входных данных адаптивной карточки в классе диалоговых окон бота. Он расширяет образец карточек героев, проверяя входные данные, полученные в текстовом поле от клиента ответа. Сначала необходимо добавить функции ввода текста и кнопки в существующую адаптивную карточку, добавив следующий код непосредственно перед окончательной скобкой adaptiveCard.json, расположенной в папке ресурсов:

"actions": [
  {
    "type": "Action.ShowCard",
    "title": "Text",
    "card": {
      "type": "AdaptiveCard",
      "body": [
        {
          "type": "Input.Text",
          "id": "text",
          "isMultiline": true,
          "placeholder": "Enter your comment"
        }
      ],
      "actions": [
        {
          "type": "Action.Submit",
          "title": "OK"
        }
      ]
    }
  }
]

Идентификатор текстового поля ввода имеет значение text. Когда пользователь нажимает кнопку "ОК", сообщение, которое создает адаптивная карточка, будет иметь свойство значения с именем text , которое содержит сведения, введенные пользователем в поле ввода текста карточки.

Наш проверяющий элемент использует Newtonsoft.json, чтобы сначала преобразовать это в JObjectобъект, а затем создать подрезанную текстовую строку для сравнения. Поэтому добавьте:

using System;
using System.Linq;
using Newtonsoft.Json.Linq;

для MainDialog.cs установите последний стабильный пакет NuGet Newtonsoft.Json. В коде валидатора мы добавили путь логики в комментарии к коду. Этот ChoiceValidator метод помещается в образец "Использование карточек " сразу после закрытой фигурной скобки для объявления MainDialog:

private async Task ChoiceValidator(
    PromptValidatorContext promptContext,
    CancellationToken cancellationToken)
{
    // Retrieves Adaptive Card comment text as JObject.
    // looks for JObject field "text" and converts that input into a trimmed text string.
    var jobject = promptContext.Context.Activity.Value as JObject;
    var jtoken = jobject?["text"];
    var text = jtoken?.Value().Trim();

    // Logic: 1. if succeeded = true, just return promptContext
    //        2. if false, see if JObject contained Adaptive Card input.
    //               No = (bad input) return promptContext
    //               Yes = update Value field with JObject text string, return "true".
    if (!promptContext.Recognized.Succeeded && text != null)
    {
        var choice = promptContext.Options.Choices.FirstOrDefault(
        c => c.Value.Equals(text, StringComparison.InvariantCultureIgnoreCase));
        if (choice != null)
        {
            promptContext.Recognized.Value = new FoundChoice
            {
                Value = choice.Value,
            };
            return true;
        }
    }
    return promptContext.Recognized.Succeeded;
}

Теперь выше в декларации MainDialog измените:

// Define the main dialog and its related components.
AddDialog(new ChoicePrompt(nameof(ChoicePrompt)));

на:

// Define the main dialog and its related components.
AddDialog(new ChoicePrompt(nameof(ChoicePrompt), ChoiceValidator));

Это активирует валидатор для поиска входных данных адаптивной карточки при каждом создании нового модального окна выбора.

Тестируйте бота "Использование карточек"

  1. Запустите пример использования карточек локально и откройте бота в эмуляторе Bot Framework.
  2. Следуйте инструкциям в боте, чтобы отобразить тип карточки, например адаптивную карточку.

Следующие шаги