Skip to content

Use Markdown in AI chat messages #12234

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.

Sign up for GitHub

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

Jump to bottom
Open
InAnYan opened this issue Nov 25, 2024 · 6 comments · May be fixed by #13194
Open

Use Markdown in AI chat messages #12234

InAnYan opened this issue Nov 25, 2024 · 6 comments · May be fixed by #13194
Assignees
@Yubo-Cao
Labels
📍 Assigned Assigned by assign-issue-action (or manually assigned) component: ai component: ui good second issue Issues that involve a tour of two or three interweaved components in JabRef 📌 Pinned

Comments

@InAnYan
Copy link
Member

InAnYan commented Nov 25, 2024 •
edited by koppor
Loading

Is your suggestion for improvement related to a problem? Please describe.

Currently, chat messages are formatted in a TextArea. This allows text to be selected, but the formatting is ugly. Markdown is a de-facto standard for chat LLMs.

Describe the solution you'd like

Use Markdown in AI chat messages with the ability to select and copy text.

Additional context

There is a long-standing problem with JavaFX: you cannot select Text or Label. Only text in TextField or TextArea can be selected. However, text in WebView can be selected, and it is already used in JabRef in entry preview!

Thus, you have 2 options:

  1. Implement Markdown using multiple Text or Labels and add a button Copy in the sidebar of a chat message (place where "Delete" button).
  2. Implement Markdown using WebView.

Option 1 is, I think, easier to implement.

But Option 2 is tricky: at first glance it would solve the problem, but the question is -- performance overhead? WebView is like a tiny browser. Thus, a better option is to format the whole chat UI (only messages, not prompt) in a WebView.

Though the best way is to find a way to make Text or Label be selectable and copyable.
@ar-rana
Copy link
Contributor

ar-rana commented Jan 11, 2025

Hello InAnYan,
I just wanted to confim that by Markdown you mean that we will have to use the MarkdownFormatter.java class, rightnow I have just used Text instead of TextArea and added a button to make it such that you can copy the text.
Please tell me if I am correct

Image

@ThiloteE
Copy link
Member

@ar-rana please open a pull-request an link it to to this issue. This will ease the review process substantially. Thank you :-)

@github-project-automation github-project-automation bot moved this to Free to take in Good First Issues Jan 12, 2025
@ThiloteE ThiloteE moved this from Free to take to Assigned in Good First Issues Jan 12, 2025
@github-project-automation github-project-automation bot moved this to Normal priority in Prioritization Jan 12, 2025
@ar-rana ar-rana mentioned this issue Jan 16, 2025
Closed
7 tasks
@ThiloteE ThiloteE mentioned this issue Jan 20, 2025
Closed
@koppor koppor added 📍 Assigned Assigned by assign-issue-action (or manually assigned) good first issue An issue intended for project-newcomers. Varies in difficulty. labels Feb 25, 2025
@koppor koppor moved this from Assigned to Free to take in Good First Issues Feb 25, 2025
@koppor koppor added good second issue Issues that involve a tour of two or three interweaved components in JabRef and removed good first issue An issue intended for project-newcomers. Varies in difficulty. labels Feb 25, 2025
@subhramit subhramit moved this from Free to take to Assigned in Good First Issues Mar 11, 2025
@koppor koppor removed the 📍 Assigned Assigned by assign-issue-action (or manually assigned) label Mar 13, 2025
@koppor koppor moved this from Assigned to Free to take in Good First Issues Mar 13, 2025
@Yubo-Cao
Copy link
Contributor

Figure 1
Using textflow to display rich text

Image

Figure 2
Copy and selectable rich text

Image

I have a proposal to implement the markdown with text flow (which can be constructed with a Markdown parser and a tree walker to yield a Textflow node), which can be made selectable and copyable through the POC shown below.

https://github.com/Yubo-Cao/markdown_poc

@Siedlerchr
Copy link
Member

@Yubo-Cao That looks great! Go ahead!

@Yubo-Cao
Copy link
Contributor

/assign-me

@github-actions github-actions bot added the 📍 Assigned Assigned by assign-issue-action (or manually assigned) label May 27, 2025
@github-actions GitHub Actions
Copy link
Contributor

👋 Hey @Yubo-Cao, thank you for your interest in this issue! 🎉

We're excited to have you on board. Start by exploring our Contributing guidelines, and don't forget to check out our workspace setup guidelines to get started smoothly.

In case you encounter failing tests during development, please check our developer FAQs!

Having any questions or issues? Feel free to ask here on GitHub. Need help setting up your local workspace? Join the conversation on JabRef's Gitter chat. And don't hesitate to open a (draft) pull request early on to show the direction it is heading towards. This way, you will receive valuable feedback.

Happy coding! 🚀

@Yubo-Cao Yubo-Cao mentioned this issue May 30, 2025
Closed
7 tasks
@Yubo-Cao Yubo-Cao linked a pull request May 30, 2025 that will close this issue
Open
7 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@Yubo-Cao Yubo-Cao

Labels
📍 Assigned Assigned by assign-issue-action (or manually assigned) component: ai component: ui good second issue Issues that involve a tour of two or three interweaved components in JabRef 📌 Pinned
Projects
Prioritization
Status: Normal priority
JabRef UI Improvements
Status: No status
Milestone
No milestone
6 participants
@Siedlerchr @koppor @InAnYan @ThiloteE @Yubo-Cao @ar-rana