Make all text selectable within a container?

[landaire]

I'm trying out gpui / gpui-component for a chat room project, and as part of that I'd like to be able to have text selection across all text elements in a view.

i.e. in this example, click+drag to select any of the username / message.

// ChatRoom::render
div()
  .children(messages.iter().cloned())

// ChatMessageView::render
div()
  .child(/* Image */)
  .child(username_text())
  .child(message_text())

Is this possible today with gpui/gpui-component?

If not, I'm trying to think about how to implement this, and would love any input. Does a parent container which listens to the mouse events, maps to text element positions, etc. make the most sense? Like:

// ChatRoom::render
div()
  .selectable_text_container()
  .children(messages.iter().cloned())

[huacnlee]

#1169

Merged

[huacnlee]

You can't rely entirely on HTML and expect GPUI to do the same thing; your implementation strategy should be adjusted.

Currently, the GPUI component only supports selection for TextView, allowing for auxiliary selection when displaying text blocks.

For your chat scenario, I suggest separating the username and message, creating a structure similar to Discord's message display.

[username] <time>
This is the message...

This way, the username can be clickable using a Link or Element on_click, while the message uses a TextView to support Markdown and selection.

[huacnlee]

The second question:

In this case, you should use list from GPUI, not the virtual_list.

list

For each items may have different heights, GPUI will measure them and cache the actually height.

For example: The Chat Conversation list, each conversation may have different heights depends on the message length.

uniform_list

For used to each items with the same heights.

For example: The Contact list, each contact item has the same heights.

virtual_list

For you have known each items height before you render, each items can have different heights.

virtual_list is a extend based on uniform_list in GPUI Component, to add horizontal way supports, and with item_sizes option to support each items can have different heights.

---

Here is the Zed AI thread code example to use list:

https://github.com/zed-industries/zed/blob/0a9f40787216f18ee2f4dc79211877d1af496284/crates/agent_ui/src/acp/thread_view.rs#L4963-L4977

[landaire]

I see, thank you for pointing me towards list(). I suppose I (insanely incorrectly) thought initially that it would not cull elements and figured that's what virtual_list was supposed to solve. Understood.

Regarding the TextView, the messages are not markdown but I suppose I could convert to Markdown. Making the round-trip between plain text to Markdown back to the AST seems quite inefficient though, and I'd even settle for building my own rich text AST node to avoid that round-trip or Markdown injection.

You can't rely entirely on HTML and expect GPUI to do the same thing; your implementation strategy should be adjusted.

Definitely not expecting HTML-levels of richness to be provided by the framework at this time. I'm actually coming from an egui background though where all text can be made selectable.

[huacnlee]

I have plan to add a plain mode to TextView to render plain texts.

[huacnlee]

The implementation of Selection in GPUI still requires further refinement and experimentation, and currently doesn't meet your expectations.

Until support is available, you can try a different display method.