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

render chat messages as markdown #263

Merged

Conversation

Rainson12
Copy link
Contributor

@Rainson12 Rainson12 commented Aug 28, 2023

Description

When requesting generate a table of fruits or generate some code to count from 1 to 200 the response will contain markdown:
image

However Markdown can not be rendered in the frontend. This PR fixes it by adding a markdown rendering library and making use of it:
image

This also avoids using dangerouslySetInnerHTML attribute. The library remark-gfm is used because react-markdown does not support tables out of the box.

This is how urls or links would be rendered:
image

@github-actions github-actions bot added dependencies Pull requests that update a dependency file webapp Pull requests that update Typescript code PR: ready for review labels Aug 28, 2023
@Rainson12
Copy link
Contributor Author

@microsoft-github-policy-service agree

@crickman crickman requested review from teresaqhoang, dehoward, glahaye, alliscode and gitri-ms and removed request for teresaqhoang August 28, 2023 16:38
Copy link
Contributor

@crickman crickman left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I like it. Love the removal of convertToAnchorTags.

Do we want to run this through function testing? @teresaqhoang ?

(Nice profile icon @Rainson12 🥇 )

@alliscode alliscode added this pull request to the merge queue Aug 29, 2023
Merged via the queue into microsoft:main with commit d767c02 Aug 29, 2023
6 checks passed
@Rainson12 Rainson12 deleted the feature-render-messages-as-markdown branch August 29, 2023 18:46
teamleader-dev pushed a commit to vlink-group/chat-copilot that referenced this pull request Oct 7, 2024
### Description

When requesting `generate a table of fruits` or `generate some code to
count from 1 to 200` the response will contain markdown:

![image](https://github.com/microsoft/chat-copilot/assets/13119203/12b11e19-1e2b-4335-b45a-e3dd97919de2)

However Markdown can not be rendered in the frontend. This PR fixes it
by adding a markdown rendering library and making use of it:

![image](https://github.com/microsoft/chat-copilot/assets/13119203/726b6fe9-4673-4021-87c9-923d48a1d64d)

This also avoids using `dangerouslySetInnerHTML` attribute. The library
`remark-gfm` is used because `react-markdown` does not support tables
out of the box.

This is how urls or links would be rendered:

![image](https://github.com/microsoft/chat-copilot/assets/13119203/0b084d58-9602-4682-b5d2-ea77dbd6bbd9)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
dependencies Pull requests that update a dependency file webapp Pull requests that update Typescript code
Projects
No open projects
Development

Successfully merging this pull request may close these issues.

3 participants