turbo_chat 0.1.8 → 0.1.11

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 7539f6a1acc24a17b883f7545c2fd941fd87a7dec93f2806438e56a03a558724
-  data.tar.gz: 64b476e34935a766f88d3e61a7632b3e15fa6de1582037bc77d9d7484a923a53
+  metadata.gz: 97ae091b4d44fd093c6fbff38d64027c8cb85f45c5663f05e2a66cbcb15c043d
+  data.tar.gz: 3983790dec17e23c5ce5d99dd44f154e0d3b154ca43b9d4e595bf6491ac91822
 SHA512:
-  metadata.gz: 162fe8c035a2d541023a160cc4f70cd3f0f9678c8fab6cf7a1936fa675e748d3b76f669b8dcb04a83cc5e2729af12e2985a270946f6a7a3e4b1fa6312c7c373a
-  data.tar.gz: '068556524d2dd13d2fcea185f369a4e9a5f15b324d66c6fa0e99cc8c8ed43a31dae47b85cf796c5c6b081cf5aa51caa47041ac81d9e88444b755ad32a42db81c'
+  metadata.gz: cc0717fd14c06e02daa493ed4887b962147e17b15d1d44880f9305be2cb51869066c3f29c08b8ad89b45cca4fa2e5ec13850d84fe56525a3ce5123eec8c8c936
+  data.tar.gz: 7f6d6ceecc1421e73b407d67da671e25fcb32adfdee714eaddacaa6187200e2c6a423f94e9ae955fc93546c2f2c78f3c659ebcf3a21313a8d5d25d1f49b0716b

data/CHANGELOG.md

@@ -2,6 +2,29 @@
 
 All notable changes to `turbo_chat` will be documented in this file.
 
+## [0.1.11] - 2026-02-26
+
+### Changed
+- Smoothed signal-state transitions (for example: thinking to planning to typing) to reduce flicker during rapid updates.
+- Updated signal Turbo Stream updates to use morphing so signal entries transition in place more smoothly.
+
+## [0.1.10] - 2026-02-26
+
+### Added
+- Unbounded chat now supports a viewport-edge scrollbar proxy on the far right side of the screen while preserving inner chat layout.
+
+### Changed
+- Improved unbounded chat scrolling smoothness for wheel input and maintained synchronization between the edge scrollbar and message list position.
+- Hardened page scroll locking for unbounded chat so the document does not scroll while chat remains scrollable.
+
+## [0.1.9] - 2026-02-25
+
+### Added
+- Support improved mobile chat behavior to keep the composer pinned and visible on iOS-class viewports, with safer full-screen height handling.
+
+### Changed
+- Updated RubyGems metadata links to the `main` branch.
+
 ## [0.1.8] - 2026-02-23
 
 ### Added

data/README.md

@@ -126,6 +126,7 @@ TurboChat.configure do |config|
   config.show_timestamp = true
   config.show_role = false
   config.message_source_labels = TurboChat::Configuration::DEFAULT_MESSAGE_SOURCE_LABELS.dup
+  config.chat_style = "chat_style_bounded"
   config.signal_text_sheen = true
 
   config.emit_moderation_events = false
@@ -174,6 +175,14 @@ TurboChat.configure do |config|
 end
 ```
 
+Chat UI layout style is configurable:
+
+```ruby
+TurboChat.configure do |config|
+  config.chat_style = "chat_style_unbounded" # or "chat_style_bounded"
+end
+```
+
 ## Roles
 
 Built-in roles:

data/app/assets/javascripts/turbo_chat/lifecycle_events.js

@@ -1,6 +1,7 @@
 (function (namespace) {
   var datasetFlagEnabled = namespace.datasetFlagEnabled;
   var parseJsonObject = namespace.parseJsonObject;
+  var PAGE_SCROLL_LOCK_CLASS = "chat-page-scroll-locked";
 
   function setupInvitationEvents() {
     document.querySelectorAll("[data-chat-index]").forEach(function (element) {
@@ -64,7 +65,16 @@
     });
   }
 
+  function syncPageScrollLock() {
+    var hasUnboundedShell = document.querySelector(".chat-shell--style-unbounded");
+    document.documentElement.classList.toggle(PAGE_SCROLL_LOCK_CLASS, Boolean(hasUnboundedShell));
+    if (document.body) {
+      document.body.classList.toggle(PAGE_SCROLL_LOCK_CLASS, Boolean(hasUnboundedShell));
+    }
+  }
+
   function setupTurboChatUi() {
+    syncPageScrollLock();
     setupInvitationEvents();
     setupChatLifecycleEvents();
 

data/app/assets/javascripts/turbo_chat/messages.js

@@ -1,6 +1,8 @@
 (function (namespace) {
   var constants = namespace.constants || {};
   var MENTION_BLUR_HIDE_DELAY_MS = constants.MENTION_BLUR_HIDE_DELAY_MS || 120;
+  var GLOBAL_SCROLLBAR_CLASS = "chat-global-scrollbar";
+  var GLOBAL_SCROLLBAR_HIDDEN_CLASS = "chat-global-scrollbar--hidden";
 
   var datasetFlagEnabled = namespace.datasetFlagEnabled;
   var parseMentionTokens = namespace.parseMentionTokens;
@@ -10,6 +12,7 @@
   var setupMentionAutocomplete = namespace.setupMentionAutocomplete;
   var scrollMessageIntoView = namespace.scrollMessageIntoView;
   var scrollLastMessageIntoView = namespace.scrollLastMessageIntoView;
+  var prefersReducedMotion = namespace.prefersReducedMotion || function () { return false; };
 
   function syncOwnMessageClasses(container) {
     if (!container || !container.dataset) {
@@ -432,10 +435,381 @@
     });
 
     observer.observe(container, { childList: true });
+
+    setupUnboundedWheelScrollProxy(container);
+  }
+
+  function normalizeWheelDeltaY(event) {
+    if (!event) {
+      return 0;
+    }
+
+    var deltaY = event.deltaY;
+    if (!deltaY) {
+      return 0;
+    }
+
+    if (event.deltaMode === 1) {
+      return deltaY * 16;
+    }
+
+    if (event.deltaMode === 2) {
+      var viewportHeight = (typeof window !== "undefined" && window.innerHeight) || 800;
+      return deltaY * viewportHeight;
+    }
+
+    return deltaY;
+  }
+
+  function shouldIgnoreWheelProxy(event, container) {
+    if (!event) {
+      return true;
+    }
+
+    if (container.contains(event.target)) {
+      return true;
+    }
+
+    if (
+      event.target &&
+      typeof event.target.closest === "function" &&
+      event.target.closest(
+        ".chat-members-list-shell, .chat-invite-menu, .chat-mentions-menu, textarea, input, select, [contenteditable='true']"
+      )
+    ) {
+      return true;
+    }
+
+    return false;
+  }
+
+  function clampScrollTop(container, scrollTop) {
+    if (!container) {
+      return 0;
+    }
+
+    var maxScrollTop = Math.max(0, container.scrollHeight - container.clientHeight);
+    if (scrollTop < 0) {
+      return 0;
+    }
+
+    if (scrollTop > maxScrollTop) {
+      return maxScrollTop;
+    }
+
+    return scrollTop;
+  }
+
+  function startSmoothWheelScroll(state) {
+    if (!state || state.smoothScrollRafId) {
+      return;
+    }
+
+    function step() {
+      state.smoothScrollRafId = null;
+
+      var container = state.container;
+      if (!container || !container.isConnected) {
+        return;
+      }
+
+      var targetScrollTop = clampScrollTop(container, state.smoothTargetScrollTop);
+      state.smoothTargetScrollTop = targetScrollTop;
+
+      var currentScrollTop = container.scrollTop;
+      var remainingDelta = targetScrollTop - currentScrollTop;
+      if (Math.abs(remainingDelta) <= 0.5) {
+        if (currentScrollTop !== targetScrollTop) {
+          state.syncingFromWheelAnimation = true;
+          container.scrollTop = targetScrollTop;
+          state.syncingFromWheelAnimation = false;
+          queueGlobalScrollbarSync(state);
+        }
+        return;
+      }
+
+      state.syncingFromWheelAnimation = true;
+      container.scrollTop = currentScrollTop + remainingDelta * 0.22;
+      state.syncingFromWheelAnimation = false;
+      queueGlobalScrollbarSync(state);
+      state.smoothScrollRafId = window.requestAnimationFrame(step);
+    }
+
+    state.smoothScrollRafId = window.requestAnimationFrame(step);
+  }
+
+  function proxyWheelToMessages(state, event) {
+    var container = state && state.container;
+    if (!container) {
+      return false;
+    }
+
+    var deltaY = normalizeWheelDeltaY(event);
+    if (!deltaY) {
+      return false;
+    }
+
+    var currentTarget = typeof state.smoothTargetScrollTop === "number"
+      ? state.smoothTargetScrollTop
+      : container.scrollTop;
+    var nextScrollTop = clampScrollTop(container, currentTarget + deltaY);
+
+    if (nextScrollTop === currentTarget) {
+      return false;
+    }
+
+    state.smoothTargetScrollTop = nextScrollTop;
+    if (prefersReducedMotion()) {
+      container.scrollTop = nextScrollTop;
+      queueGlobalScrollbarSync(state);
+      return true;
+    }
+
+    if (typeof window === "undefined" || typeof window.requestAnimationFrame !== "function") {
+      container.scrollTop = nextScrollTop;
+      queueGlobalScrollbarSync(state);
+      return true;
+    }
+
+    startSmoothWheelScroll(state);
+    return true;
+  }
+
+  function createGlobalScrollbar() {
+    var scrollbar = document.createElement("div");
+    scrollbar.className = GLOBAL_SCROLLBAR_CLASS + " " + GLOBAL_SCROLLBAR_HIDDEN_CLASS;
+    scrollbar.setAttribute("aria-hidden", "true");
+
+    var spacer = document.createElement("div");
+    spacer.className = "chat-global-scrollbar-spacer";
+    scrollbar.appendChild(spacer);
+
+    if (document.body) {
+      document.body.appendChild(scrollbar);
+    }
+
+    return { scrollbar: scrollbar, spacer: spacer };
+  }
+
+  function ensureGlobalScrollbar(state) {
+    if (state.globalScrollbar && state.globalScrollbar.isConnected && state.globalScrollbarSpacer) {
+      return;
+    }
+
+    var created = createGlobalScrollbar();
+    state.globalScrollbar = created.scrollbar;
+    state.globalScrollbarSpacer = created.spacer;
+
+    state.globalScrollbar.addEventListener("scroll", function () {
+      var container = state.container;
+      if (!container || !container.isConnected || state.syncingFromMessages) {
+        return;
+      }
+
+      state.syncingFromScrollbar = true;
+      var targetTop = clampScrollTop(container, state.globalScrollbar.scrollTop);
+      state.smoothTargetScrollTop = targetTop;
+      container.scrollTop = targetTop;
+      state.syncingFromScrollbar = false;
+    });
+  }
+
+  function syncGlobalScrollbar(state) {
+    var container = state.container;
+    if (!container || !container.isConnected) {
+      return;
+    }
+
+    ensureGlobalScrollbar(state);
+    var globalScrollbar = state.globalScrollbar;
+    var spacer = state.globalScrollbarSpacer;
+    if (!globalScrollbar || !spacer) {
+      return;
+    }
+
+    var maxScrollTop = Math.max(0, container.scrollHeight - container.clientHeight);
+    var globalViewportHeight = globalScrollbar.clientHeight || ((typeof window !== "undefined" && window.innerHeight) || 0);
+    var spacerHeight = Math.max(globalViewportHeight, Math.ceil(maxScrollTop + globalViewportHeight));
+    spacer.style.height = spacerHeight + "px";
+
+    var hideScrollbar = maxScrollTop <= 1;
+    globalScrollbar.classList.toggle(GLOBAL_SCROLLBAR_HIDDEN_CLASS, hideScrollbar);
+    if (hideScrollbar) {
+      if (globalScrollbar.scrollTop !== 0) {
+        globalScrollbar.scrollTop = 0;
+      }
+      return;
+    }
+
+    var targetScrollTop = Math.min(maxScrollTop, container.scrollTop);
+    if (!state.smoothScrollRafId) {
+      state.smoothTargetScrollTop = targetScrollTop;
+    }
+    if (Math.abs(globalScrollbar.scrollTop - targetScrollTop) > 1) {
+      state.syncingFromMessages = true;
+      globalScrollbar.scrollTop = targetScrollTop;
+      state.syncingFromMessages = false;
+    }
+  }
+
+  function queueGlobalScrollbarSync(state) {
+    if (!state || state.syncRafId) {
+      return;
+    }
+
+    if (typeof window === "undefined" || typeof window.requestAnimationFrame !== "function") {
+      syncGlobalScrollbar(state);
+      return;
+    }
+
+    state.syncRafId = window.requestAnimationFrame(function () {
+      state.syncRafId = null;
+      syncGlobalScrollbar(state);
+    });
+  }
+
+  function bindContainerScrollProxy(state, container) {
+    if (state.boundContainer === container) {
+      return;
+    }
+
+    if (state.boundContainer && state.onContainerScroll) {
+      state.boundContainer.removeEventListener("scroll", state.onContainerScroll);
+    }
+
+    if (state.mutationObserver) {
+      state.mutationObserver.disconnect();
+    }
+
+    state.boundContainer = container;
+    state.container = container;
+
+    state.onContainerScroll = function () {
+      if (!state.globalScrollbar || state.syncingFromScrollbar) {
+        return;
+      }
+
+      if (!state.syncingFromWheelAnimation) {
+        state.smoothTargetScrollTop = container.scrollTop;
+      }
+      state.syncingFromMessages = true;
+      state.globalScrollbar.scrollTop = container.scrollTop;
+      state.syncingFromMessages = false;
+    };
+    container.addEventListener("scroll", state.onContainerScroll, { passive: true });
+
+    state.mutationObserver = new MutationObserver(function () {
+      queueGlobalScrollbarSync(state);
+    });
+    state.mutationObserver.observe(container, { childList: true, subtree: true, characterData: true });
+
+    queueGlobalScrollbarSync(state);
+  }
+
+  function cleanupDetachedGlobalScrollbars() {
+    if (document.querySelector(".chat-shell--style-unbounded")) {
+      return;
+    }
+
+    document.querySelectorAll("." + GLOBAL_SCROLLBAR_CLASS).forEach(function (node) {
+      node.remove();
+    });
+  }
+
+  function setupUnboundedWheelScrollProxy(container) {
+    if (!container) {
+      return;
+    }
+
+    var shell = container.closest(".chat-shell--style-unbounded");
+    if (!shell) {
+      return;
+    }
+
+    var state = shell.__chatWheelProxyState;
+    if (!state) {
+      state = {
+        shell: shell,
+        container: container,
+        boundContainer: null,
+        globalScrollbar: null,
+        globalScrollbarSpacer: null,
+        mutationObserver: null,
+        syncingFromMessages: false,
+        syncingFromScrollbar: false,
+        syncRafId: null,
+        onContainerScroll: null,
+        smoothTargetScrollTop: container.scrollTop,
+        smoothScrollRafId: null,
+        syncingFromWheelAnimation: false
+      };
+      shell.__chatWheelProxyState = state;
+
+      state.forwardWheel = function (event) {
+        if (state.globalScrollbar && state.globalScrollbar.contains(event.target)) {
+          return;
+        }
+
+        var activeContainer = state.container;
+        if (!activeContainer || !activeContainer.isConnected) {
+          return;
+        }
+
+        if (shouldIgnoreWheelProxy(event, activeContainer)) {
+          return;
+        }
+
+        if (proxyWheelToMessages(state, event)) {
+          event.preventDefault();
+        }
+      };
+
+      state.forwardWheelOutsideShell = function (event) {
+        if (!shell.isConnected || !state.container || !state.container.isConnected) {
+          return;
+        }
+
+        if (shell.contains(event.target)) {
+          return;
+        }
+
+        state.forwardWheel(event);
+      };
+
+      state.onViewportResize = function () {
+        queueGlobalScrollbarSync(state);
+      };
+
+      shell.addEventListener("wheel", state.forwardWheel, { passive: false });
+      document.addEventListener("wheel", state.forwardWheelOutsideShell, { passive: false });
+      if (typeof window !== "undefined") {
+        window.addEventListener("resize", state.onViewportResize);
+        if (window.visualViewport && typeof window.visualViewport.addEventListener === "function") {
+          window.visualViewport.addEventListener("resize", state.onViewportResize);
+        }
+      }
+    } else {
+      state.container = container;
+    }
+
+    bindContainerScrollProxy(state, container);
+  }
+
+  function syncAllGlobalScrollbars() {
+    document.querySelectorAll(".chat-shell--style-unbounded").forEach(function (shell) {
+      var state = shell.__chatWheelProxyState;
+      if (!state || !state.container || !state.container.isConnected) {
+        return;
+      }
+
+      queueGlobalScrollbarSync(state);
+    });
   }
 
   function setupAllMessageAutoScroll() {
     document.querySelectorAll(".chat-messages").forEach(setupMessageAutoScroll);
+    syncAllGlobalScrollbars();
+    cleanupDetachedGlobalScrollbars();
   }
 
   namespace.setupAllMessageAutoScroll = setupAllMessageAutoScroll;

data/app/assets/javascripts/turbo_chat/realtime.js

@@ -5,6 +5,7 @@
   var SIGNAL_IDLE_GRACE_MS = constants.SIGNAL_IDLE_GRACE_MS || 2500;
   var SIGNAL_HEARTBEAT_MS = constants.SIGNAL_HEARTBEAT_MS || 4000;
   var SIGNAL_RETREAT_MS = constants.SIGNAL_RETREAT_MS || 180;
+  var SIGNAL_EMPTY_GRACE_MS = constants.SIGNAL_EMPTY_GRACE_MS || 180;
   var MENTION_BLUR_HIDE_DELAY_MS = constants.MENTION_BLUR_HIDE_DELAY_MS || 120;
   var COMPOSER_MAX_HEIGHT_PX = constants.COMPOSER_MAX_HEIGHT_PX || 210;
 
@@ -40,26 +41,89 @@
     });
   }
 
-  function syncSignalContainerState(container) {
+  function containerBottomPadding(container) {
+    if (!container || typeof window === "undefined") {
+      return 0;
+    }
+
+    var cssPadding = window.getComputedStyle(container).paddingBottom;
+    var parsedPadding = parseFloat(cssPadding);
+    if (isNaN(parsedPadding) || parsedPadding <= 0) {
+      return 0;
+    }
+
+    return parsedPadding;
+  }
+
+  function visibleSignalNode(container) {
     if (!container) {
+      return null;
+    }
+
+    return container.querySelector(".chat-typing-indicator:not(.chat-typing-indicator--leaving)");
+  }
+
+  function clearSignalDeactivateTimer(container) {
+    if (!container || !container.__chatSignalDeactivateTimeoutId) {
       return;
     }
 
+    clearTimeout(container.__chatSignalDeactivateTimeoutId);
+    container.__chatSignalDeactivateTimeoutId = null;
+  }
+
+  function queueSignalDeactivate(container) {
+    if (!container || container.__chatSignalDeactivateTimeoutId) {
+      return;
+    }
+
+    container.__chatSignalDeactivateTimeoutId = setTimeout(function () {
+      container.__chatSignalDeactivateTimeoutId = null;
+      if (!container.isConnected) {
+        return;
+      }
+
+      syncSignalContainerState(container, { forceInactive: true });
+    }, SIGNAL_EMPTY_GRACE_MS);
+  }
+
+  function shouldStickMessagesToBottom(messagesContainer) {
+    if (!messagesContainer) {
+      return false;
+    }
+
+    var reservedBottomPadding = containerBottomPadding(messagesContainer);
+    var distanceFromBottom = messagesContainer.scrollHeight -
+      (messagesContainer.scrollTop + messagesContainer.clientHeight) -
+      reservedBottomPadding;
+    return distanceFromBottom <= 24;
+  }
+
+  function syncSignalContainerState(container, options) {
+    if (!container) {
+      return;
+    }
+
+    options = options || {};
     hideOwnSignals(container);
 
-    var hasVisibleSignals = container.querySelector(
-      ".chat-typing-indicator:not(.chat-typing-indicator--leaving)"
-    );
-    container.classList.toggle("chat-signals--active", Boolean(hasVisibleSignals));
+    var hasVisibleSignals = Boolean(visibleSignalNode(container));
+
+    if (!hasVisibleSignals && !options.forceInactive && container.classList.contains("chat-signals--active")) {
+      queueSignalDeactivate(container);
+      return;
+    }
+
+    if (hasVisibleSignals) {
+      clearSignalDeactivateTimer(container);
+    }
+
+    container.classList.toggle("chat-signals--active", hasVisibleSignals);
 
     var chatWindow = container.closest(".chat-window");
     if (chatWindow) {
       var messagesContainer = chatWindow.querySelector(".chat-messages");
-      var shouldStickToBottom = false;
-      if (messagesContainer) {
-        var distanceFromBottom = messagesContainer.scrollHeight - (messagesContainer.scrollTop + messagesContainer.clientHeight);
-        shouldStickToBottom = distanceFromBottom <= 24;
-      }
+      var shouldStickToBottom = shouldStickMessagesToBottom(messagesContainer);
 
       var signalOffset = hasVisibleSignals ? Math.ceil(container.scrollHeight) + 8 : 0;
       chatWindow.style.setProperty("--chat-signal-offset", signalOffset + "px");
@@ -86,11 +150,31 @@
     container.dataset.chatSignalsBound = "true";
     syncSignalContainerState(container);
 
+    var syncRafId = null;
+    function queueSignalContainerSync() {
+      if (syncRafId) {
+        return;
+      }
+
+      if (typeof window === "undefined" || typeof window.requestAnimationFrame !== "function") {
+        syncSignalContainerState(container);
+        return;
+      }
+
+      syncRafId = window.requestAnimationFrame(function () {
+        syncRafId = null;
+        if (!container.isConnected) {
+          return;
+        }
+        syncSignalContainerState(container);
+      });
+    }
+
     var observer = new MutationObserver(function () {
-      syncSignalContainerState(container);
+      queueSignalContainerSync();
     });
 
-    observer.observe(container, { childList: true });
+    observer.observe(container, { childList: true, subtree: true, characterData: true });
   }
 
   function setupAllSignalContainers() {
@@ -154,6 +238,8 @@
     var pendingSignalClear = false;
     var emitTypingEvents = datasetFlagEnabled(element, "chatEmitTypingEvents");
     var emitMessageEvents = datasetFlagEnabled(element, "chatEmitMessageEvents");
+    var unboundedShell = element.closest(".chat-shell--style-unbounded");
+    var composerClearanceRafId = null;
     var mentionsEnabled = datasetFlagEnabled(element, "chatEnableMentions");
     var mentionOptions = mentionsEnabled ? parseMentionOptions(element.dataset.chatMentionOptions) : [];
     var mentionAutocomplete = setupMentionAutocomplete(messageInput, {
@@ -177,15 +263,67 @@
       setMentionOptions: updateMentionOptions
     };
 
+    function syncComposerClearance() {
+      if (!unboundedShell) {
+        return;
+      }
+
+      var viewportHeight = (typeof window !== "undefined" && window.innerHeight) || document.documentElement.clientHeight || 0;
+      var composerRect = element.getBoundingClientRect();
+      if (viewportHeight > 0 && composerRect && composerRect.height > 0) {
+        var coveredHeight = Math.max(0, viewportHeight - composerRect.top);
+        if (coveredHeight > 0) {
+          unboundedShell.style.setProperty("--chat-floating-composer-clearance", Math.ceil(coveredHeight + 8) + "px");
+          return;
+        }
+      }
+
+      var composerShell = element.querySelector(".chat-composer-shell");
+      if (!composerShell) {
+        return;
+      }
+
+      var composerHeight = Math.ceil(composerShell.getBoundingClientRect().height);
+      if (!composerHeight || composerHeight <= 0) {
+        return;
+      }
+
+      var clearance = composerHeight + 28;
+      unboundedShell.style.setProperty("--chat-floating-composer-clearance", clearance + "px");
+    }
+
+    function queueComposerClearanceSync() {
+      if (!unboundedShell || typeof window === "undefined" || typeof window.requestAnimationFrame !== "function") {
+        syncComposerClearance();
+        return;
+      }
+
+      if (composerClearanceRafId) {
+        return;
+      }
+
+      composerClearanceRafId = window.requestAnimationFrame(function () {
+        composerClearanceRafId = null;
+        syncComposerClearance();
+      });
+    }
+
     function autoResizeComposerInput() {
       messageInput.style.height = "auto";
       var contentHeight = messageInput.scrollHeight;
       var nextHeight = Math.min(contentHeight, COMPOSER_MAX_HEIGHT_PX);
       messageInput.style.height = nextHeight + "px";
       messageInput.style.overflowY = contentHeight > COMPOSER_MAX_HEIGHT_PX ? "auto" : "hidden";
+      queueComposerClearanceSync();
     }
 
     autoResizeComposerInput();
+    if (typeof window !== "undefined") {
+      window.addEventListener("resize", queueComposerClearanceSync);
+      if (window.visualViewport && typeof window.visualViewport.addEventListener === "function") {
+        window.visualViewport.addEventListener("resize", queueComposerClearanceSync);
+      }
+    }
 
     function emitTypingEvent(eventName) {
       if (!emitTypingEvents) {