Skip to content

render chat messages as markdown - #263

Merged
Ben Thomas (alliscode) merged 2 commits into
microsoft:mainfrom
Rainson12:feature-render-messages-as-markdown
Aug 29, 2023
Merged

render chat messages as markdown#263
Ben Thomas (alliscode) merged 2 commits into
microsoft:mainfrom
Rainson12:feature-render-messages-as-markdown

Conversation

@Rainson12

@Rainson12 Rene Steen (Rainson12) commented Aug 28, 2023

Copy link
Copy Markdown
Contributor

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
Copy Markdown
Contributor Author

@microsoft-github-policy-service agree

@crickman Chris (crickman) left a comment

Copy link
Copy Markdown
Contributor

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? Teresa Hoang (@teresaqhoang) ?

(Nice profile icon Rene Steen (@Rainson12) 🥇 )

@alliscode
Ben Thomas (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
@Rainson12
Rene Steen (Rainson12) deleted the feature-render-messages-as-markdown branch August 29, 2023 18:46
Team Leader (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)
Kyle Beachem (kb0039) pushed a commit to aaronba/chat-copilot that referenced this pull request Jan 8, 2025
### 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)
Jonny Toombs (jdtoombs) pushed a commit to jdtoombs/chat-copilot that referenced this pull request Apr 10, 2025
…icrosoft#263)

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
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