Use Markdown in AI chat messages

[InAnYan]

trafficstars

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]

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

[ThiloteE]

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

[Yubo-Cao]

Figure 1 Using textflow to display rich text

Figure 2 Copy and selectable rich text

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]

@Yubo-Cao That looks great! Go ahead!

[Yubo-Cao]

/assign-me

[ThiloteE]

How to test:

Ask the model to respond with a text that covers all syntax as provided by markdown basic (or markdown-extended respectively).

I created this text based on https://www.markdownguide.org/basic-syntax/. Ideally, that's what it should cover at the very least, but we can create a new issue for that, if wanted.

# Heading 1
## Heading 2
### Heading 3

**Bold text**

*Italic text*

- Item 1
- Item 2
- Item 3

1. First item
2. Second item
3. Third item

[Link](https://www.example.com)

![Image](image.jpg)

> Blockquote

`Inline code`

Note that code blocks within code-blocks are probably not trivial.

``` ```

Also, here is some text that contains a little bit of extended markdown syntax:

# A little bit of Extended Markdown Syntax

## Footnotes

Here's a sentence with a footnote. [^1]

[^1]: This is the footnote.

## Heading IDs

### My Great Heading {#custom-id}

## Definition Lists

Term 1
: Definition 1

Term 2
: Definition 2

## Strikethrough

~~The world is flat.~~

| Syntax | Description |
| --- | --- |
| Header | Title |
| Paragraph | Text |

- [x] Task 1
- [ ] Task 2
- [ ] Task 3

## Emoji

That is so funny! \:joy:

## Highlight

I need to highlight these ==very important words==.

## Subscript

H~2~O

## Superscript

X^2^

[github-actions[bot]]

We think that this issue was fixed. Please head to https://builds.jabref.org/main to download a development build and try it out.

For any feedback, add a comment to the pull request at https://github.com/JabRef/jabref/pull/13194.