Skip to content

Updated UI component ChatDisplay and added new UI component MasonryGallery - #137

Open
hannes011 wants to merge 5 commits into
teamapps-org:masterfrom
hannes011:ui-chat-display-masonry-gallery
Open

hannes011 wants to merge 5 commits into
teamapps-org:masterfrom
hannes011:ui-chat-display-masonry-gallery

Conversation

@hannes011

@hannes011 hannes011 commented Jun 25, 2026 •

Copy link
Copy Markdown
Contributor

Change ChatDisplay component:

  • change signature of ChatMessage to allow a content list instead of just a text - this enables the component to embed nested components and multiple texts
  • change signature of ChatDisplayModel: getChatMessages instead of getPreviousMessages must be implemented
  • add initialTopMessageId to the component
  • add command scrollToMessage to the component
  • add event onMessageViewed to the component
  • add event onPhotoClicked to the component
  • using photo thumbnail if given
  • remove workaround "scroll to bottom" on resize
  • add message footer
  • add message colors (border, bg, text)
  • stabilized scrolling position
  • lazy loading images

Created new MasonryGallery component to enhance visualization of photos for chat messages (or other use-cases)

  • lazy loading images
  • add event onImageClicked to the component

- change signature of ChatMessage to allow a content list instead of just a text - this enables the component to embed nested components and multiple texts
- change signature of ChatDisplayModel: getChatMessages instead of getPreviousMessages must be implemented
- add initialTopMessageId to the component
- add command scrollToMessage to the component
- add event messageViewed to the component
- add event photoClicked to the component
- using photo thumbnail if given
- remove workaround "scroll to bottom" on resize
- add message footer
- add message colors (border, bg, text)
- enhance photo gallery rendering
- stabilized scrolling position
- lazy loading images
@yamass

yamass commented Sep 6, 2026

Copy link
Copy Markdown
Member

This is two merge requests in one... I'll review it but it would be better if there was one for the new component (MasonryGalery) and one for the changes to the ChatDisplay.

@yamass
yamass self-requested a review September 6, 2026 20:44

@yamass yamass left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I did not do a full review. At this point, my remarks are worth a deep discussion about the requirements and implementation. Please, let's have a chat.

* @param numberOfOlderMessages maximum number of messages to include before the active lower boundary
* @return message batch in ascending chronological order
*/
ChatMessageBatch getChatMessages(Integer exclusiveStartingMessageId, Integer inclusiveAnchorMessageId, int numberOfOlderMessages);

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

issue: I find quite everything about this method weird. It feels like a Frankenstein of the three methods above it. But that makes it more complicated than things need to be.

Also, this is not really an interface method. Nobody outside this interface needs it. It is dictating how to do the implementation for no reason.

Suggestion:

  • Drop this method again
  • Make getLastChatMessages(int numberOfMessages) delegate to getPreviousMessages(Integer earliestKnownMessageId, int numberOfMessages) again (as before)
  • getLastChatMessages(int oldestMessageId, int bufferNumberOfMessages): Rename method and parameters to: getMessagesStartingFrom(int messageId, int lookBehind)

return new ChatMessageTextContent(text);
}

static ChatMessageContent component(Component component) {

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

issue: I find it quite strange to ask the model of a component to come up with the actual component to use for rendering its data. It is called model view controller for a reason. The model should not come up with the view.

How about:

  • getting rid of this class
  • introducing a getMetadata() method to the ChatMessage class. Something like Map<String, Object>. If you really insist, you can make your model put a component in there, but the cleaner way would be to only put the actual data to display there.
  • When the ChatMessage gets translated to a UiChatMessage, there must be a hook for translating metadata to whatever you want to do/add to the chat message. This should be a functional interface as always.


String getText();

default List<ChatMessageContent> getContent() {

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

issue: This is weird. We now have getText() and getContent() which in turn has getText() and getComponent().

Why not just getText() and getComponent().

Why a list?

But anyway, I am against introducing components to the model anyway. See my comment in ChatMessageContent.

String userImageUrl;
String userNickname;
String text;
List<UiChatMessageContent> content;

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

issue: Again: Why not just component. Why the additional wrapper?

return null;
}

default String getFooter() {

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What's a footer? If you need to display the time of writing, why not add that? Or is there a larger requirement behind this?

As a footer this will look quite lost. Can be made much more beautiful as a dedicated time element.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants