feat: render cta for unsupported content

[musale]

Closes #2190

PR Type

• Feature

Description of the changes

Renders a CTA component showing the content is unsupported and you need to use the main window to view it.

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

[microsoft-github-policy-service]

Thank you for creating a Pull Request @musale.

This is a checklist for the PR reviewer(s) to complete before approving and merging this PR:

• I have verified a documentation PR has been linked and is approved (or not applicable)
• I have ran this PR locally and have tested the fix/feature
• I have verified that stories have been added to storybook (or not applicable)
• I have tested existing stories in storybook to verify no regression has occured
• I have tested the solution in at least two browsers (Edge + 1 non-Chromium based browser)

[sebastienlevert]

A couple of comments. Might be related to design / specs that were a bit unclear. Let me know if we prefer managing them as part of this PR or as part of a set of bugs:

• When deeplinking to the message, it would be preferrable to link to the actual message vs. the conversation. Right now we deepking with https://teams.microsoft.com/_#/conversations/19:805224bd1792420ba2823cce0ca20d2c@thread.v2?ctx=chat and I feel we should use https://teams.microsoft.com/l/message/19:805224bd1792420ba2823cce0ca20d2c@thread.v2/1694112186669?context=%7B%22contextType%22%3A%22chat%22%7D
• The placeholder is a little bit off compared to the Figma file. I feel there should be some top padding.
  
• Placeholder was rendered on a "simple" html formatted text.

"body": {
                "contentType": "html",
                "content": "<hr><p>gdffdgdfg</p><p>dfg</p><h1>dfgdfgdfg</h1><p>dfgd</p><p style=\"margin-left:40px\">fgdfgdfgdfg</p><p>dfgdfg</p><p>&nbsp;</p><p>&nbsp;</p><table itemprop=\"copy-paste-table\"><tbody><tr><td><p>&nbsp;</p></td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></tr><tr><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></tr><tr><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></tr><tr><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></tr><tr><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></tr></tbody></table><p>&nbsp;</p><p>&nbsp;</p>"
            }

[musale]

@sebastienlevert I have updated the first 2 issues. As for the rendering as plain text one, that is as a result of the MessageThreads component not currently supporting a way for customizing the ouput when you have unsupported content. It is a dirty hack that uses renderToString from react to generate a html string of the UnsupportedContent component. Then the html string is what is rendered as a chat message. An ideal solution would be something like what is implemented for onRenderAvatar where we could substitute what is originally used for unsupported content with our UnsupportedContent

[sebastienlevert]

@musale Not sure I'm following on the third bullet. I would think that formatted HTML should be treated as valid and supported content. So we shouldn't render at all the UnsupportedContent component, right? Are we too greedy in the validation of what's supported or not?

[github-actions]

🚀 New react-contoso sample application deployed here

[sebastienlevert]

The auto-deployment of React Contoso on any PR is ABSOLUTELY FANTASTIC! Thanks for making this a thing @gavinbarron!

[sebastienlevert]

Couple of things I saw, but might be related to the order of things.

• Mentions are rendered as placeholders (but I assume they wouldn't when feat: add support for @mentions in the chat content #2668 will be merged.
• I still see the formatted HTML messages as unsupported.

[musale]

@sebastienlevert for point 1, they will be rendered as mgt person when that PR is merged. For point 2, I narrowed it down to:

• inserting a link.
• inserting a table.

I have fixed the issue and should be good to go.

[github-actions]

🚀 New react-contoso sample application deployed here

[gavinbarron]

@musale I see that you have resolved the comments about all of the extra eslint suppressions but I'm not seeing that they have been removed. Is there a commit missing from this change?

[github-actions]

🚀 New react-contoso sample application deployed here

[musale]

@musale I see that you have resolved the comments about all of the extra eslint suppressions but I'm not seeing that they have been removed. Is there a commit missing from this change?

Yes. Here it is 7da8a5f

[github-actions]

🚀 New react-contoso sample application deployed here

[github-actions]

🚀 New react-contoso sample application deployed here