Skip to content

render chat messages as markdown#263

Merged
alliscode merged 2 commits intomicrosoft:mainfrom
Rainson12:feature-render-messages-as-markdown
Aug 29, 2023
Merged

render chat messages as markdown#263
alliscode merged 2 commits intomicrosoft:mainfrom
Rainson12:feature-render-messages-as-markdown

Conversation

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

@microsoft-github-policy-service agree

@crickman crickman requested review from alliscode, dehoward, gitri-ms, glahaye and teresaqhoang and removed request for teresaqhoang August 28, 2023 16:38
Copy link
Copy Markdown
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
@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)
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)
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