TEAMS custom template - Githubissues

nmwael commented 1 year ago

So if I have a adaptive card template with embedded SVG's they render fine if I chat directly to the bot. BUT if the bot chats to a channel using a work response they are not shown:

working code

    @ChatRequest(value = "template", description = "get user settings for user, eg get user settings for johndoe@tdc.dk")
    public Callback getUserCallingSettings() {
        return new Callback("Nino","VIP","XXXXX","ADSL", Instant.now());
    }

NOT working svgs:

    public void sendAlertNotification(Callback callback ) {
        WorkResponse out = new WorkResponse(alertChannel,callback, WorkMode.VIEW);
        rh.accept(out);
    }

robmoffat commented 1 year ago

HI @nmwael,

That's an interesting result. Can you share your template, so we can see how this is embedded?

nmwael commented 1 year ago

yes and I should probably mention that I tested it using edge and web teams:

{
  "type": "AdaptiveCard",
  "body": [
    {
      "type": "ColumnSet",
      "columns": [
        {
          "type": "Column",
          "items": [
            {
              "type": "Container",
              "backgroundImage": {
                "url": "https://messagecardplayground.azurewebsites.net/assets/TxP_Background.png"
              },
              "items": [
                {
                  "type": "ImageSet",
                  "images": [
                    {
                      "type": "Image",
                      "url": "data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"currentColor\" class=\"bi bi-person\" viewBox=\"0 0 16 16\"><path d=\"M8 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6Zm2-3a2 2 0 1 1-4 0 2 2 0 0 1 4 0Zm4 8c0 1-1 1-1 1H3s-1 0-1-1 1-4 6-4 6 3 6 4Zm-1-.004c-.001-.246-.154-.986-.832-1.664C11.516 10.68 10.289 10 8 10c-2.29 0-3.516.68-4.168 1.332-.678.678-.83 1.418-.832 1.664h10Z\"/>Sorry, your browser does not support inline SVG.</svg>",
                      "size": "Small"
                    },
                    {
                      "type": "Image",
                      "url": "data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"currentColor\" class=\"bi bi-telephone-outbound\" viewBox=\"0 0 16 16\"><path d=\"M3.654 1.328a.678.678 0 0 0-1.015-.063L1.605 2.3c-.483.484-.661 1.169-.45 1.77a17.568 17.568 0 0 0 4.168 6.608 17.569 17.569 0 0 0 6.608 4.168c.601.211 1.286.033 1.77-.45l1.034-1.034a.678.678 0 0 0-.063-1.015l-2.307-1.794a.678.678 0 0 0-.58-.122l-2.19.547a1.745 1.745 0 0 1-1.657-.459L5.482 8.062a1.745 1.745 0 0 1-.46-1.657l.548-2.19a.678.678 0 0 0-.122-.58L3.654 1.328zM1.884.511a1.745 1.745 0 0 1 2.612.163L6.29 2.98c.329.423.445.974.315 1.494l-.547 2.19a.678.678 0 0 0 .178.643l2.457 2.457a.678.678 0 0 0 .644.178l2.189-.547a1.745 1.745 0 0 1 1.494.315l2.306 1.794c.829.645.905 1.87.163 2.611l-1.034 1.034c-.74.74-1.846 1.065-2.877.702a18.634 18.634 0 0 1-7.01-4.42 18.634 18.634 0 0 1-4.42-7.009c-.362-1.03-.037-2.137.703-2.877L1.885.511zM11 .5a.5.5 0 0 1 .5-.5h4a.5.5 0 0 1 .5.5v4a.5.5 0 0 1-1 0V1.707l-4.146 4.147a.5.5 0 0 1-.708-.708L14.293 1H11.5a.5.5 0 0 1-.5-.5z\"/>Sorry, your browser does not support inline SVG.</svg>",
                      "size": "Small"
                    }
                  ],
                  "imageSize": "Small"
                }
              ],
              "bleed": true
            },
            {
              "type": "Container",
              "spacing": "None",
              "style": "emphasis",
              "items": [
                {
                  "type": "TextBlock",
                  "size": "Large",
                  "weight": "Lighter",
                  "color": "Accent",
                  "text": "Customer placed callback",
                  "wrap": true,
                  "horizontalAlignment": "Center"
                },
                {
                  "type": "FactSet",
                  "facts": [
                    {
                      "title": "Name:",
                      "value": "${form.name}"
                    },

                    {
                      "title": "Customer type:",
                      "value": "${form.type}"
                    },
                    {
                      "title": "Subject:",
                      "value": "${form.subject}"
                    }
                  ,
                    {
                      "title": "Placed at:",
                      "value": "${form.placedAt}"
                    }
                  ,
                    {
                      "title": "Phone nr:",
                      "value": "${form.phoneNumber}"
                    }

                  ]
                },

                {
                  "type": "Container",
                  "items": [
                    {
                      "type": "ActionSet",
                      "actions": [
                        {
                          "type": "Action.OpenUrl",
                          "title": "Call customer",
                          "style": "positive",
                          "url": "https://teams.microsoft.com/l/call/0/0?users=${form.phoneNumber}"
                        }
                      ]
                    }
                  ]
                }
              ],
              "bleed": true,
              "height": "stretch"
            }
          ],
          "width": 45
        }
      ],
      "height": "stretch"
    }
  ],
  "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
  "version": "1.5"
}

robmoffat commented 1 year ago

ok, interesting.

On the surface of it, it seems like this is a restriction in Microsoft Teams. There's certainly no code inside Spring Bot to make the difference. So a couple of ideas:

First, Is it possible to take Spring Bot out of the picture? Does posting in messages into teams from some other source yield the same result? If so, this is likely to be a "feature" of Teams.

Second, (and if that is the case) one thing that occurs to me is that Teams has some very rigid rules around DLP, and will actively change the contents of your message in order to ensure that data isn't inadvertently "smuggled" in some hidden part of the message payload. (For example, comments get stripped too). It's something I butted up against while building the AdaptiveCard Spring bot code. For this reason, it might be cutting your data: URL from the message. You might try a regular https: URL instead and link to a public image? That might avoid this problem.

Let me know how you go.

nmwael commented 1 year ago

so I went ahead and tried the idea you got.. Still no luck..

I then noticed that the other image I had included was rendering.. It was an PNG.. SO now after converting the SVG's to pngs they are rendering.. Note to oneself if converting from SVG for png remember to set the png size to at least 64x64 or it will be very pixelated.

robmoffat commented 1 year ago

So.. the upshot is that Teams allows SVGs embedded in Chats, but not Channels?

nmwael commented 1 year ago

yes.. as far as I can see.

On Tue, Jan 3, 2023 at 11:00 AM Rob Moffat @.***> wrote:

So.. the upshot is that Teams allows SVGs embedded in Chats, but not Channels?

— Reply to this email directly, view it on GitHub https://github.com/finos/spring-bot/issues/372#issuecomment-1369579774, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAF3P5Z6NKE7MYAGDCP7GVLWQP2FJANCNFSM6AAAAAATDJKN5A . You are receiving this because you modified the open/close state.Message ID: @.***>

-- Best regards / Med venlig hilsen Nino Martinez

finos / spring-bot

TEAMS custom template #372