Fix scrolling and improve responsive support

src/main/java/com/flowingcode/vaadin/addons/chatassistant/ChatAssistant.java

@@ -34,6 +34,7 @@
 import com.vaadin.flow.component.icon.VaadinIcon;
 import com.vaadin.flow.component.messages.MessageInput;
 import com.vaadin.flow.component.messages.MessageInput.SubmitEvent;
+import com.vaadin.flow.component.orderedlayout.FlexComponent;
 import com.vaadin.flow.component.orderedlayout.HorizontalLayout;
 import com.vaadin.flow.component.orderedlayout.VerticalLayout;
 import com.vaadin.flow.component.popover.Popover;
@@ -44,6 +45,7 @@
 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;
@@ -62,6 +64,7 @@
 @NpmPackage(value = "@emotion/react", version = "11.14.0")
 @NpmPackage(value = "@emotion/styled", version = "11.14.0")
 @JsModule("./react/animated-fab.tsx")
+@JsModule("./fcChatAssistantConnector.js")
 @Tag("animated-fab")
 @CssImport("./styles/chat-assistant-styles.css")
 public class ChatAssistant<T extends Message> extends ReactAdapterComponent implements ClickNotifier<ChatAssistant<T>> {
@@ -126,8 +129,9 @@ private void initializeHeader() {
   @SuppressWarnings("unchecked")
   private void initializeFooter() {
     messageInput = new MessageInput();
-    messageInput.setSizeFull();
-    messageInput.getStyle().set("padding", PADDING_SMALL);
+    messageInput.setWidthFull();
+    messageInput.setMaxHeight("80px");
+    messageInput.getStyle().set("padding", "0");
     defaultSubmitListenerRegistration = messageInput.addSubmitListener(se -> {
       sendMessage((T) Message.builder().messageTime(LocalDateTime.now())
           .name("User").content(se.getValue()).build());
@@ -136,7 +140,7 @@ private void initializeFooter() {
     whoIsTyping.setClassName("chat-assistant-who-is-typing");
     whoIsTyping.setVisible(false);
     VerticalLayout footer = new VerticalLayout(whoIsTyping, messageInput);
-    footer.setSizeFull();
+    footer.setWidthFull();
     footer.setSpacing(false);
     footer.setMargin(false);
     footer.setPadding(false);
@@ -151,14 +155,15 @@ private void initializeContent(boolean markdownEnabled) {
           return component;
         }));
     content.setItems(messages);
-    content.setMinHeight("400px");
-    content.setMinWidth("400px");
+    content.setSizeFull();
     container = new VerticalLayout(headerComponent, content, footerContainer);
     container.setClassName("chat-assistant-container-vertical-layout");
     container.setPadding(false);
     container.setMargin(false);
     container.setSpacing(false);
     container.setSizeFull();
+    container.setJustifyContentMode(FlexComponent.JustifyContentMode.BETWEEN);
+    container.setFlexGrow(1, content);
   }
 
   private void initializeChatWindow() {
@@ -169,9 +174,10 @@ private void initializeChatWindow() {
     chatWindow.add(resizableVL);
     chatWindow.setOpenOnClick(false);
     chatWindow.setCloseOnOutsideClick(false);
-    chatWindow.addOpenedChangeListener(ev->{
-      minimized = !ev.isOpened();
-    });
+    chatWindow.addOpenedChangeListener(ev -> minimized = !ev.isOpened());
+    chatWindow.addAttachListener(e -> e.getUI().getPage()
+        .executeJs("window.Vaadin.Flow.fcChatAssistantConnector.observePopoverResize($0)", chatWindow.getElement()));
+
     this.getElement().addEventListener("avatar-clicked", ev ->{
       if (this.minimized) {
         chatWindow.open();
@@ -404,5 +410,5 @@ public int getUnreadMessages() {
   public void setUnreadMessages(int unreadMessages) {
     setState("unreadMessages",unreadMessages);
   }
-  
+
 }

src/main/resources/META-INF/frontend/styles/chat-assistant-styles.css

@@ -19,16 +19,19 @@
  */
 vaadin-vertical-layout.chat-assistant-resizable-vertical-layout {
     transform: rotate(180deg); /* This rotation, along with the one below, is a "double rotation trick." */
-    margin: -0.125em -0.375em 0;
+    margin: 0;
+    padding: 10px;
     overflow: hidden;
-    width: 439px;
     resize: both;
-    min-height: min-content;
-    min-width: min-content;
+    min-height: 30vh;
+    min-width: 310px;
+    width: var(--fc-chat-assistant-popover-width, 400px);
+    height: var(--fc-chat-assistant-popover-height, 400px);
 }
 
 vaadin-vertical-layout.chat-assistant-container-vertical-layout {
-    min-height: min-content;
+    flex-grow: 1;
+    gap: var(--lumo-space-s);
     transform: rotate(180deg); /* This second rotation completes the "double rotation trick."
                                   Together, these two rotations position the resize handle in the upper-left corner.
                                   This new position is more suitable for resizing the chat window because the chat bubble 
@@ -37,4 +40,36 @@ vaadin-vertical-layout.chat-assistant-container-vertical-layout {
 
 .MuiBadge-badge {
     z-index: 2000 !important;
+}
+
+vaadin-popover-overlay::part(content){
+    padding: 0;
+}
+
+vaadin-message::part(message) {
+    word-break: break-word;
+}
+
+vaadin-popover-overlay::part(overlay) {
+    max-width: 100vw; /* Prevent width beyond viewport */
+    max-height: 100vh; /* Prevent height beyond viewport */
+}
+
+/* Mobile breakpoint */
+@media (max-width: 768px) {
+    vaadin-popover-overlay::part(overlay) {
+        width: 100%;
+        height: 100%;
+    }
+
+    vaadin-popover-overlay::part(content) {
+        width: 100%;
+        height: 100%;
+    }
+
+    vaadin-vertical-layout.chat-assistant-resizable-vertical-layout {
+        resize: none;
+        height: 100%;
+        width: 100%;
+    }
 }

src/main/resources/META-INF/resources/frontend/fcChatAssistantConnector.js

@@ -0,0 +1,178 @@
+/*-
+ * #%L
+ * Chat Assistant Add-on
+ * %%
+ * Copyright (C) 2025 Flowing Code
+ * %%
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * #L%
+ */
+(function () {
+    window.Vaadin.Flow.fcChatAssistantConnector = {
+        observePopoverResize: (popover) => {
+            // Skip the following logic on mobile devices by checking viewport width.
+            if (window.innerWidth <= 768) {
+                return;
+            }
+
+            if (popover.$connector) {
+                return;
+            }
+
+            popover.$connector = {};
+
+            // Find the resizable container inside the popover
+            const resizableContainer = popover.querySelector('.chat-assistant-resizable-vertical-layout');
+            if (!resizableContainer) return;
+
+            popover.addEventListener('opened-changed', e => {
+                if (e.detail.value) {
+                    const popoverOverlay = resizableContainer.parentElement;
+                    const overlay = popoverOverlay.shadowRoot?.querySelector('[part="overlay"]');
+                    // Track overlay position changes and keep container inside viewport
+                    trackOverlayPosition(overlay, resizableContainer, () => clampToViewport(resizableContainer));
+                }
+            });
+
+            // On drag/resize start (mouse), reset size restrictions so user can freely resize
+            resizableContainer.addEventListener("mousedown", e => {
+                resizableContainer.style.maxHeight = '';
+                resizableContainer.style.maxWidth = '';
+            });
+            // On drag/resize start (touch), reset size restrictions so user can freely resize
+            resizableContainer.addEventListener("touchstart", e => {
+                resizableContainer.style.maxHeight = '';
+                resizableContainer.style.maxWidth = '';
+            });
+
+            // Debounce calls to avoid excessive recalculations on rapid resize
+            const debouncedClamp = debounce(() => clampToViewport(resizableContainer));
+
+            new ResizeObserver(() => {
+                const popoverOverlay = resizableContainer.parentElement;
+                const overlay = popoverOverlay.shadowRoot?.querySelector('[part="overlay"]');
+                if (!overlay) return;
+
+                debouncedClamp();
+            }).observe(resizableContainer);
+
+
+            function debounce(callback) {
+                let rafId;
+                return () => {
+                    cancelAnimationFrame(rafId);
+                    rafId = requestAnimationFrame(callback);
+                };
+            }
+
+            /**
+             * Restricts the size and position of a resizable container so that it remains fully visible
+             * within the browser's viewport, applying a small padding to keep it from touching the edges.
+             *
+             * This function calculates how much space is available on each side of the container
+             * (top, bottom, left, right) relative to the viewport. If the container would overflow
+             * on a given side, it adjusts `maxWidth`/`maxHeight` and aligns it to the opposite side
+             * with a fixed padding.
+             *
+             * - If there isn't enough space on the right, it clamps width and aligns to the left.
+             * - If there isn't enough space on the left, it clamps width and aligns to the right.
+             * - If there isn't enough space at the bottom, it clamps height and aligns to the top.
+             * - If there isn't enough space at the top, it clamps height and aligns to the bottom.
+             *
+             * @param {HTMLElement} resizableContainer - The element whose size and position should be clamped to the viewport.
+             */
+            function clampToViewport(resizableContainer) {
+                const boundingClientRect = resizableContainer.getBoundingClientRect();
+
+                const containerWidthRight = boundingClientRect.width + (window.innerWidth - boundingClientRect.right);
+                const containerWidthLeft = boundingClientRect.left + boundingClientRect.width;
+                const containerHeightBottom = boundingClientRect.height + (window.innerHeight - boundingClientRect.bottom);
+                const containerHeightTop = boundingClientRect.top + boundingClientRect.height;
+
+                const padding = 5;
+                const paddingPx = padding + "px";
+
+                if (containerWidthRight >= window.innerWidth) {
+                    resizableContainer.style.maxWidth = (boundingClientRect.right - padding) + "px";
+                    resizableContainer.style.left = paddingPx;
+                } else if (containerWidthLeft >= window.innerWidth) {
+                    resizableContainer.style.maxWidth = (window.innerWidth - boundingClientRect.left - padding) + "px";
+                    resizableContainer.style.right = paddingPx;
+                }
+
+                if (containerHeightBottom >= window.innerHeight) {
+                    resizableContainer.style.maxHeight = (boundingClientRect.bottom - padding) + "px";
+                    resizableContainer.style.top = paddingPx;
+                } else if (containerHeightTop >= window.innerHeight) {
+                    resizableContainer.style.maxHeight = (window.innerHeight - boundingClientRect.top - padding) + "px";
+                    resizableContainer.style.bottom = paddingPx;
+                }
+            }
+
+            /**
+             * Continuously tracks the position of an overlay element and triggers a callback
+             * when the overlay's position has stabilized (i.e., changes are within the given buffer).
+             *
+             * This function uses `requestAnimationFrame` to check the overlay's position every frame.
+             * If the overlay moves more than `positionBuffer` pixels horizontally or vertically,
+             * tracking continues without calling the callback.
+             * Once the position changes are smaller than `positionBuffer`, the callback is invoked.
+             *
+             * @param {HTMLElement} overlay - The overlay element to track. Must support `.checkVisibility()`.
+             * @param {HTMLElement} resizableContainer - The container related to the overlay (not used directly here,
+             *     but often used by the callback to adjust size).
+             * @param {Function} callback - Function to call when the overlay position is stable.
+             * @param {number} [positionBuffer=10] - The minimum pixel movement threshold before considering the overlay stable.
+             */
+            function trackOverlayPosition(overlay, resizableContainer, callback, positionBuffer = 10) {
+                let lastTop = 0;
+                let lastLeft = 0;
+                let frameId;
+
+                function checkPosition() {
+                    if (!isVisible(overlay)) {
+                        cancelAnimationFrame(frameId);
+                        return;
+                    }
+
+                    const rect = overlay.getBoundingClientRect();
+                    const deltaTop = Math.abs(rect.top - lastTop);
+                    const deltaLeft = Math.abs(rect.left - lastLeft);
+                    if (deltaTop > positionBuffer || deltaLeft > positionBuffer) {
+                        lastTop = rect.top;
+                        lastLeft = rect.left;
+                    } else {
+                        callback();
+                    }
+
+                    frameId = requestAnimationFrame(checkPosition);
+                }
+
+                frameId = requestAnimationFrame(checkPosition);
+            }
+
+            function isVisible(el) {
+                if (!el) return false;
+
+                if (typeof el.checkVisibility === 'function') {
+                    // Use native checkVisibility if available
+                    return el.checkVisibility();
+                }
+
+                // Fallback: check CSS display and visibility
+                const style = getComputedStyle(el);
+                return style.display !== 'none' && style.visibility !== 'hidden';
+            }
+        },
+    }
+})();