fix(assistant): render markdown in TextInput output#540
Conversation
Wrap the output field in NcRichText when isOutput is true, falling back to NcRichContenteditable for the input case. Headings, lists, bold, italic, code blocks and links are now rendered. Tables are not rendered due to the markdown-it configuration of NcRichText in @nextcloud/vue, which does not enable the table plugin by default. The copy still functions and keeps the markdown as expected. Signed-off-by: niv <nicolas.varlot@ac-versailles.fr>
There was a problem hiding this comment.
Pull request overview
Note
Copilot was unable to run its full agentic suite in this review.
Renders markdown content in the assistant's "generate text" output by using NcRichText for output mode while keeping NcRichContenteditable for input mode.
Changes:
- Conditionally render
NcRichTextwhenisOutput && hasValueis true. - Import and register the
NcRichTextcomponent.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
|
Thank you for this PR! The problem with this is that is makes the output uneditable for the user, and we assume that the LLM output is not perfect and has to be adapted. Can you find a way to keep that function, and also keep the "easy copy" button? |
|
Hi @janepie, the easy copy button is still present and can be used. I added a very short video to show it. |
|
Ah thanks for showing me! It's a bit unfortunate that the button and the AI-generation note disappear into the scrollable area, we should keep them visible and make the result scrollable instead. So points to adapt would be
|
Wrap the rendered output in a bounded scrollable container and allow switching to edit mode with a double-click. The contenteditable returns to rendered mode on blur. This preserves the editing capability while keeping the markdown rendering as the default view. Addresses review feedback on nextcloud#540. Signed-off-by: Nicolas Varlot <nicolas.varlot@ac-versailles.fr>
|
I pushed a new commit addressing both points:
|
janepie
left a comment
janepie
left a comment
There was a problem hiding this comment.
Looks good!
I'd prefer to have the double-click hint somewhere more visible but I'm not sure yet where to put it, so let's do that in a follow-up.
A few small remarks
| <br v-if="limitLabel"> | ||
| {{ limitLabel ?? '' }} | ||
| </label> | ||
| <div |
There was a problem hiding this comment.
Why wrapping it in a div? Should work with directly using NcRichText
| .copy-button, | ||
| .choose-file-button { | ||
| position: absolute !important; | ||
| z-index: 10; |
Summary
The assistant's "generate text" form currently displays its output through NcRichContenteditable, which renders text as-is. When the underlying LLM returns markdown (heading, lists, tables, bold, links), the user sees raw markdown syntax instead of formatted content.
This PR wraps the output field in NcRichText when isOutput is true, falling back to NcRichContenteditable for the input case. Headings, lists, bold, italic, code blocks and links are now rendered. Tables are not rendered due to the markdown-it configuration of NcRichText in @nextcloud/vue, which does not enable the table plugin by default. The copy still functions and keeps the markdown as expected.
Screenshots
Before
After
