Wyświetlanie karty adaptacyjnej w Copilot Studio

Artykuł
11/20/2024

Notatka

Ten artykuł obejmuje tylko klasyczne czatboty. Aby rozszerzyć utworzonych agentów Copilot Studio, nie trzeba używać Bot Framework aplikacji Composer. Wszystkie funkcje opisane w tym artykule są dostępne dla agentów bezpośrednio w Copilot Studio.

Udoskonalaj swojego bota, tworząc własne okna dialogowe za pomocą Bot Framework Composer, a następnie dodając je do swojego bota Microsoft Copilot Studio.

W tym przykładzie dowiesz się, jak wyświetlić kartę adaptacyjną w Microsoft Copilot Studio za pomocą Composera.

Ważne

Integracja aplikacji Composer nie jest dostępna dla użytkowników posiadających tylko licencję Teams w usłudze Microsoft Copilot Studio. Wymagana jest licencja wersji próbnej lub pełna licencja usługi Microsoft Copilot Studio.

Wymagania wstępne

Utwórz nowy temat

W usłudze Microsoft Copilot Studio utwórz nowego bota o nazwie Contoso Meal Delivery Service.
Wróć do strony Tematy i utwórz nowy temat o nazwie Meal delivery options.

Skopiuj i wklej następujące frazy wyzwalające:

what meals can I order
what meal options do you have
what dishes do you deliver
entrees available for delivery

Na kanwie tworzenia wybierz domyślny węzeł Wiadomość. Wybierz trzy kropki w pionie, a następnie wybierz opcję Usuń.
W węźle Frazy wyzwalające wybierz pozycję Dodaj węzeł (+) i wybierz pozycję Zadaj pytanie. Następnie w węźle Pytanie:
1. W obszarze Zadaj pytanie wprowadź What city are you in?.
2. W obszarze Identyfikuj wybierz Miasto.
W obszarze Zapisz odpowiedź jako wybierz automatycznie tworzoną zmienną. Następnie w okienku właściwości zmiennej:
1. W polu Nazwa wprowadź user_city.
2. W polu Użycie wybierz opcję Bot (dowolny temat może mieć dostęp).
Wybierz pozycję Zapisz.

Zmienna usługi Microsoft Copilot Studio.

Tworzenie karty adaptacyjnej

Następnie wyświetlisz obrazy z posiłkami wyboru, które są dostępne w mieście użytkownika, przy użyciu aplikacji Composer.

Otwórz bota w aplikacji Composer. Aby uzyskać instrukcje dotyczące tej czynności, zobacz Wprowadzenie do Bot Framework Composer.
Przejdź na stronę Tworzenie. W bocie wybierz pozycję Więcej opcji (...), a następnie wybierz + Dodaj sesję dialogową.
W polu Nazwa wprowadź Meals, a następnie wybierz przycisk OK.
Przejdź na stronę Odpowiedzi bota. W eksploratorze botów wybierz pozycję Meals, a następnie Pokaż kod.

W widoku kodu skopiuj i wklej następującą odpowiedź bota. Następnie zastąp trzy przykładowe adresy URL obrazów własnymi.

# Chicken()
-Chicken

# Steak()
-Steak

# Tofu()
-Tofu

# SteakImageURL()
-https://www.example.com/steak.jpg

# ChickenImageURL()
-https://www.example.com/chicken.jpg

# TofuImageURL()
-https://www.example.com/tofu.jpg

Karta Odpowiedzi bota z ciągami w aplikacji Composer.

Skopiuj i wklej następujący kod w tym samym widoku kodu, aby dodać kartę adaptacyjną, na której są wyświetlane trzy obrazy.

# adaptivecardjson_meals(location)
- ```
{
    "type": "AdaptiveCard",
    "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
    "version": "1.1",
    "body": [
            {
            "type": "TextBlock",
            "text": "Meal delivery options for ${location}:",
            "size": "Medium",
            "weight": "Bolder"
        },
        {
            "type": "ColumnSet",
            "columns": [
                {
                    "type": "Column",
                    "width": "stretch",
                    "items": [
                        {
                            "type": "Image",
                            "url": "${SteakImageURL()}",
                            "size": "Stretch",
                            "spacing": "Medium",
                            "horizontalAlignment": "Center"
                        }
                    ]
                },
                {
                    "type": "Column",
                    "width": "stretch",
                    "items": [
                        {
                            "type": "Image",
                            "url": "${ChickenImageURL()}",
                            "horizontalAlignment": "Center"
                        }
                    ]
                },
                {
                    "type": "Column",
                    "width": "stretch",
                    "items": [
                        {
                            "type": "Image",
                            "url": "${TofuImageURL()}",
                            "horizontalAlignment": "Center"
                        }
                    ]
                }
            ]
        },
        {
            "type": "ColumnSet",
            "columns": [
                {
                    "type": "Column",
                    "width": "stretch",
                    "items": [
                        {
                            "type": "TextBlock",
                            "text": "${Steak()}",
                            "wrap": true,
                            "horizontalAlignment": "Center"                            
                        }
                    ]
                },
                {
                    "type": "Column",
                    "width": "stretch",
                    "items": [
                        {
                            "type": "TextBlock",
                            "text": "${Chicken()}",
                            "wrap": true,
                            "horizontalAlignment": "Center"
                        }
                    ]
                },
                {
                    "type": "Column",
                    "width": "stretch",
                    "items": [
                        {
                            "type": "TextBlock",
                            "text": "${Tofu()}",
                            "wrap": true,
                            "horizontalAlignment": "Center"
                        }
                    ]
                }
            ]
        }
    ]
}
```

Karta Odpowiedzi bota w aplikacji Composer — dane JSON karty adaptacyjnej.

Skopiuj i wklej następujący kod w tym samym widoku kodu, aby dodać działanie, które spowoduje wyświetlenie karty adaptacyjnej.
```
# AdaptiveCardMeals(location)
[Activity
    Attachments = ${json(adaptivecardjson_meals(location))}
]
```