From 709c596e3c22cd64fe909a9b8a0108e7cec2c536 Mon Sep 17 00:00:00 2001
From: Martin Lopez <mlopez@flowingcode.com>
Date: Tue, 26 Aug 2025 19:46:31 -0300
Subject: [PATCH] fix: use grid instead of virtual-list

Fixes #47
---
 .../addons/chatassistant/ChatAssistant.java      | 16 ++++++++++------
 .../frontend/styles/chat-assistant-styles.css    |  4 ++++
 2 files changed, 14 insertions(+), 6 deletions(-)

diff --git a/src/main/java/com/flowingcode/vaadin/addons/chatassistant/ChatAssistant.java b/src/main/java/com/flowingcode/vaadin/addons/chatassistant/ChatAssistant.java
index 10315ee..6b6ecea 100644
--- a/src/main/java/com/flowingcode/vaadin/addons/chatassistant/ChatAssistant.java
+++ b/src/main/java/com/flowingcode/vaadin/addons/chatassistant/ChatAssistant.java
@@ -29,6 +29,8 @@
 import com.vaadin.flow.component.dependency.CssImport;
 import com.vaadin.flow.component.dependency.JsModule;
 import com.vaadin.flow.component.dependency.NpmPackage;
+import com.vaadin.flow.component.grid.Grid;
+import com.vaadin.flow.component.grid.GridVariant;
 import com.vaadin.flow.component.html.Span;
 import com.vaadin.flow.component.icon.Icon;
 import com.vaadin.flow.component.icon.VaadinIcon;
@@ -39,13 +41,11 @@
 import com.vaadin.flow.component.orderedlayout.VerticalLayout;
 import com.vaadin.flow.component.popover.Popover;
 import com.vaadin.flow.component.react.ReactAdapterComponent;
-import com.vaadin.flow.component.virtuallist.VirtualList;
 import com.vaadin.flow.data.provider.DataProvider;
 import com.vaadin.flow.data.renderer.ComponentRenderer;
 import com.vaadin.flow.data.renderer.Renderer;
 import com.vaadin.flow.function.SerializableSupplier;
 import com.vaadin.flow.shared.Registration;
-
 import java.time.LocalDateTime;
 import java.util.ArrayList;
 import java.util.List;
@@ -69,13 +69,14 @@
 @CssImport("./styles/chat-assistant-styles.css")
 public class ChatAssistant<T extends Message> extends ReactAdapterComponent implements ClickNotifier<ChatAssistant<T>> {
 
+  private static final String CHAT_ASSISTANT_GRID_COMPACT = "chat-assistant-grid-compact";
+
   private static final String CHAT_HEADER_CLASS_NAME = "chat-header";
-  private static final String PADDING_SMALL = "0.5em";
 
   private Component headerComponent;
   private VerticalLayout container;
   private Component footerContainer;
-  private VirtualList<T> content = new VirtualList<>();
+  private Grid<T> content = new Grid<>();
   private Popover chatWindow;
   private List<T> messages;
   private MessageInput messageInput;
@@ -149,7 +150,10 @@ private void initializeFooter() {
 
   @SuppressWarnings("unchecked")
   private void initializeContent(boolean markdownEnabled) {
-    content.setRenderer(new ComponentRenderer<>(message -> new ChatMessage<T>(message, markdownEnabled), 
+    content.addThemeVariants(GridVariant.LUMO_NO_BORDER);
+    content.addThemeVariants(GridVariant.LUMO_NO_ROW_BORDERS);
+    content.setClassName(CHAT_ASSISTANT_GRID_COMPACT);
+    content.addColumn(m->m.getContent()).setKey("content").setRenderer(new ComponentRenderer<>(message -> new ChatMessage<T>(message, markdownEnabled), 
         (component, message) -> {
           ((ChatMessage<T>) component).setMessage(message);
           return component;
@@ -381,7 +385,7 @@ public void scrollToEnd() {
    */
   public void setMessagesRenderer(Renderer<T> renderer) {
     Objects.requireNonNull(renderer, "Renderer cannot not be null");
-    content.setRenderer(renderer);
+    content.getColumnByKey("content").setRenderer(renderer);
   }
   
   /**
diff --git a/src/main/resources/META-INF/frontend/styles/chat-assistant-styles.css b/src/main/resources/META-INF/frontend/styles/chat-assistant-styles.css
index 8644844..783da69 100644
--- a/src/main/resources/META-INF/frontend/styles/chat-assistant-styles.css
+++ b/src/main/resources/META-INF/frontend/styles/chat-assistant-styles.css
@@ -55,6 +55,10 @@ vaadin-popover-overlay::part(overlay) {
     max-height: 100vh; /* Prevent height beyond viewport */
 }
 
+vaadin-grid.chat-assistant-grid-compact vaadin-grid-cell-content {
+	padding: 0px;
+}
+
 /* Mobile breakpoint */
 @media (max-width: 768px) {
     vaadin-popover-overlay::part(overlay) {