feat: render adaptive cards

[musale]

Closes #2185

PR Type

• Feature

Description of the changes

• Render adaptive cards with Action.OpenUrl option

PR checklist

• Project builds (yarn build) and changes have been tested in at least two supported browsers (Edge + non-Chromium based browser)
• All public APIs (classes, methods, etc) have been documented following the jsdoc syntax
• Stories have been added and existing stories have been tested
• Added appropriate documentation. Docs PR:

• License header has been added to all new source files (yarn setLicense)
• Contains NO breaking changes

Other information

• Render unsupported content for the rest of the other cards. Depends on feat: render cta for unsupported content #2663

[github-actions]

📖 The updated storybook is available here

[github-actions]

📖 The updated storybook is available here

[github-actions]

🚀 New react-contoso sample application deployed here

[github-actions]

🚀 New react-contoso sample application deployed here

[github-actions]

📖 The updated storybook is available here

[github-actions]

🚀 New react-contoso sample application deployed here

[musale]

@sebastienlevert thank you for this Adaptive card designer resource. I used the teams light css in the styling.

[sebastienlevert]

There is a conflict with this PR @musale and can't test / validate. @gavinbarron this happens on a lot of PRs lately with .yarn/install-state.gz and I'm wondering if we should add this file to .gitignore?

.yarn/install-state.gz is an optimization file that you shouldn't ever have to commit. It simply stores the exact state of your project so that the next commands can boot without having to resolve your workspaces all over again.

https://yarnpkg.com/getting-started/qa#which-files-should-be-gitignored

[github-actions]

📖 The updated storybook is available here

[github-actions]

🚀 New react-contoso sample application deployed here

[github-actions]

📖 The updated storybook is available here

[github-actions]

🚀 New react-contoso sample application deployed here

[sebastienlevert]

This starts to look really great! Couple comments:

• The color scheme for the AC styles should be closer to Web Light. Can you assign fluent tokens?
• The fonct used in the ACs should be the same (style, size, family) than the rest of the messages)
• Width of AC should be limited. When looking at Teams, the max-width of any message is calc(100% - 212px). Not exactly the same for us (we have a larger surface) but something like calc(100% - 400px) seems pretty good and represents a very similar rendering than in Teams.
• Some button sections are doubled?
  
  Card is the following payload:

{
    "type": "AdaptiveCard",
    "body": [
        {
            "columns": [
                {
                    "width": "auto",
                    "items": [
                        {
                            "size": "medium",
                            "style": "person",
                            "url": "https://focusworksaistrg.blob.core.windows.net/images/color.png",
                            "height": "auto",
                            "type": "Image"
                        }
                    ],
                    "type": "Column"
                },
                {
                    "width": "stretch",
                    "items": [
                        {
                            "size": "large",
                            "text": "Create images by describing them in your own language!",
                            "weight": "bolder",
                            "wrap": true,
                            "type": "TextBlock"
                        }
                    ],
                    "type": "Column"
                }
            ],
            "type": "ColumnSet"
        },
        {
            "size": "medium",
            "text": "🌟 Want a snazzy image for making the next presentation pop?\\💎 If you are on our paid plan, you can just tell me to create an image by providing a brief description.",
            "wrap": true,
            "type": "TextBlock"
        },
        {
            "text": "_\\"Create an image of a daring astronaut, space suit and helmet, standing in front of futuristic spaceship, adventurous, detailed, high detail, portrait\\"_",
            "wrap": true,
            "type": "TextBlock"
        },
        {
            "actions": [
                {
                    "url": "https://teams.microsoft.com/l/entity/ac68a41d-6b5a-432c-aba9-e1a0ca1e2a3e/47fa9af7-a1ea-46d9-9607-34dbffc5b7e7",
                    "title": "Subscribe from the Dashboard",
                    "type": "Action.OpenUrl"
                }
            ],
            "type": "ActionSet"
        },
        {
            "horizontalAlignment": "center",
            "url": "https://focusworksaistrg.blob.core.windows.net/images/aiimg1.png",
            "height": "auto",
            "type": "Image"
        },
        {
            "size": "medium",
            "text": "So go ahead and start creating images right now! ",
            "wrap": true,
            "type": "TextBlock"
        },
        {
            "actions": [
                {
                    "url": "https://forms.microsoft.com/e/Tdy8KgRuuc",
                    "title": "Want a customized version of Focusworks AI for your organization? Contact us.",
                    "type": "Action.OpenUrl"
                }
            ],
            "type": "ActionSet"
        }
    ],
    "version": "1.5",
    "msTeams": {
        "width": "full"
    }
}

and in Teams it look like this:

• Carousel are not supported right now (multiple ACs on the same message, with a carousel experience). I'm ok with leaving them behind, for now, but we'll have to identify a way to support them as some point. (It seems that caroussels can ONLY be a list of attachments, without no other markup, vs. a message with multiple adaptive cards that wraps them in a

  ).

[github-actions]

📖 The updated storybook is available here

[github-actions]

🚀 New react-contoso sample application deployed here

[github-actions]

📖 The updated storybook is available here

[github-actions]

🚀 New react-contoso sample application deployed here