Clickable hyperlinks

[ialokim]

It would be nice to be able to click on URLs, instead of having to copy and paste them manually in the browser.

[sebkur]

Good point. I was also thinking to add a copy button to each message, but while this makes opening URLs easier too, I guess clicking them directly is even better and probably we should have both eventually.

[sebkur]

I had the idea of enabling markdown rendering of chat messages in general and maybe getting link rendering and clickability for free. Here's the branch: https://github.com/sebkur/lanchat/tree/markdown

And this is a screenshot of it in use:

bold, italic, code blocks etc. work nice, which is cool.

links in [label](link) notation are rendered as such, as well as <link>. What does not work is auto-detection of links within the text, see, the message foo https://www.google.com asdf in the screenshot. I think that might be fixed with halilozercan/compose-richtext#101 though, which was merged on Oct 22 while the latest Maven release 0.15.0 is from Oct 20.

What also doesn't work is actually clicking the links (at least on desktop, haven't tried Android yet).

[sebkur]

Hmm, seems to have to do with the SelectionContainer actually. When I run this here with the selection container, clicking the links does not work, whereas when I remove the SelectionContainer clicking does work:

package de.mobanisto.lanchat

import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.text.selection.SelectionContainer
import androidx.compose.material.Text
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp
import androidx.compose.ui.window.singleWindowApplication
import com.halilibo.richtext.markdown.Markdown
import com.halilibo.richtext.ui.RichText

fun main() {
    singleWindowApplication {
        LazyColumn {
            item {
                Text("Foo")
            }
            item {
                SelectionContainer {
                    RichText(modifier = Modifier.padding(vertical = 8.dp).fillMaxWidth()) {
                        Markdown("[Google](https://www.google.com)", onLinkClicked = { link ->
                            println(link)
                        })
                    }
                }
            }
        }
    }
}

[sebkur]

Looks like this is a problem on desktop only and the root cause is that the SelectionContainer doesn't work with clickable components: JetBrains/compose-multiplatform#1450