Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[REFACTOR] update UnsupportedContent rendering #2819

Open
musale opened this issue Nov 1, 2023 · 3 comments
Open

[REFACTOR] update UnsupportedContent rendering #2819

musale opened this issue Nov 1, 2023 · 3 comments

Comments

@musale
Copy link
Contributor

musale commented Nov 1, 2023

Describe the bug
Currently, rendering the UnsupportedContent component is done by stringifying the component and appending it as a string in the content property. This brings in state mutation of the props that is not advised.

To Reproduce
Steps to reproduce the behavior:

  1. Go to
    const onRenderMessage = (messageProps: MessageProps, defaultOnRender?: MessageRenderer) => {
    const message = messageProps?.message;
    if (isGraphChatMessage(message) && message?.hasUnsupportedContent) {
    const unsupportedContentComponent = <UnsupportedContent targetUrl={message.rawChatUrl} />;
    messageProps = produce(messageProps, (draft: MessageProps) => {
    if (isChatMessage(draft.message)) {
    draft.message.content = renderToString(unsupportedContentComponent);
    }
    });
    }

Expected behavior
Rendered UnsupportedContent component as a react component. Wrap it in ChatMessage or ChatMyMessage components from @fluentui/react-components. Add the chat message header customizations for a similar look to the rest of the messages. Remove any state mutations on the props passed in onRenderMessage.

Additional Context

@musale musale added bug Something isn't working Needs: Triage 🔍 labels Nov 1, 2023
@gavinbarron
Copy link
Member

Good call @musale

@gavinbarron gavinbarron added this to the Chat - GA milestone Nov 13, 2023
@sebastienlevert
Copy link
Contributor

In a case where we want developers to provide their own logic to render the content (replace an adaptive card, for instance), we should provide a onUnsupportedContentRender callback that developers can use to return a JSX element if required.

@musale
Copy link
Contributor Author

musale commented Mar 5, 2024

In a case where we want developers to provide their own logic to render the content (replace an adaptive card, for instance), we should provide a onUnsupportedContentRender callback that developers can use to return a JSX element if required.

Good idea, we should make this its own issue. Update: #3122

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
Status: Todo 📃
Development

No branches or pull requests

4 participants