fix: scrolling safari issues

Author: ethanwinters

packages/ai-chat/src/chat/components-legacy/MessagesComponent.tsx

@@ -0,0 +1,41 @@
+/*
+ *  Copyright IBM Corp. 2025
+ *
+ *  This source code is licensed under the Apache-2.0 license found in the
+ *  LICENSE file in the root directory of this source tree.
+ *
+ *  @license
+ */
+
+import React from "react";
+
+interface MessagesScrollHandleProps {
+  ariaLabel: string;
+  buttonRef: React.RefObject<HTMLButtonElement>;
+  onBlur: () => void;
+  onClick?: () => void;
+  onFocus: () => void;
+}
+
+function MessagesScrollHandle({
+  ariaLabel,
+  buttonRef,
+  onBlur,
+  onClick,
+  onFocus,
+}: MessagesScrollHandleProps) {
+  return (
+    <button
+      type="button"
+      className="cds-aichat--messages--scroll-handle"
+      ref={buttonRef}
+      tabIndex={0}
+      aria-label={ariaLabel}
+      onClick={onClick}
+      onFocus={onFocus}
+      onBlur={onBlur}
+    />
+  );
+}
+
+export { MessagesScrollHandle };

packages/ai-chat/src/chat/components-legacy/MessagesScrollHandle.tsx

@@ -0,0 +1,45 @@
+/*
+ *  Copyright IBM Corp. 2025
+ *
+ *  This source code is licensed under the Apache-2.0 license found in the
+ *  LICENSE file in the root directory of this source tree.
+ *
+ *  @license
+ */
+
+import ChatButton, {
+  CHAT_BUTTON_KIND,
+  CHAT_BUTTON_SIZE,
+} from "@carbon/ai-chat-components/es/react/chat-button.js";
+import React from "react";
+import { MountChildrenOnDelay } from "../components/util/MountChildrenOnDelay";
+
+interface MessagesScrollToBottomButtonProps {
+  ariaLabel: string;
+  icon: React.ReactNode;
+  onClick: () => void;
+}
+
+function MessagesScrollToBottomButton({
+  ariaLabel,
+  icon,
+  onClick,
+}: MessagesScrollToBottomButtonProps) {
+  return (
+    <MountChildrenOnDelay>
+      <div className="cds-aichat__scroll-to-bottom">
+        <ChatButton
+          className="cds-aichat__scroll-to-bottom-button"
+          size={CHAT_BUTTON_SIZE.SMALL}
+          kind={CHAT_BUTTON_KIND.SECONDARY}
+          aria-label={ariaLabel}
+          onClick={onClick}
+        >
+          {icon}
+        </ChatButton>
+      </div>
+    </MountChildrenOnDelay>
+  );
+}
+
+export { MessagesScrollToBottomButton };

packages/ai-chat/src/chat/components-legacy/MessagesScrollToBottomButton.tsx

@@ -0,0 +1,58 @@
+/*
+ *  Copyright IBM Corp. 2025
+ *
+ *  This source code is licensed under the Apache-2.0 license found in the
+ *  LICENSE file in the root directory of this source tree.
+ *
+ *  @license
+ */
+
+import Processing from "@carbon/ai-chat-components/es/react/processing.js";
+import React from "react";
+import { AriaLiveMessage } from "../components/aria/AriaLiveMessage";
+import { CarbonTheme } from "../../types/config/PublicConfig";
+
+interface MessagesTypingIndicatorProps {
+  carbonTheme: CarbonTheme;
+  index: number;
+  isTypingMessage?: string;
+  processingLabel: string;
+  statusMessage?: string;
+}
+
+function MessagesTypingIndicator({
+  carbonTheme,
+  index,
+  isTypingMessage,
+  processingLabel,
+  statusMessage,
+}: MessagesTypingIndicatorProps) {
+  return (
+    <div
+      className={`cds-aichat--message cds-aichat--message-${index} cds-aichat--message--last-message`}
+    >
+      <div className="cds-aichat--message--padding">
+        {isTypingMessage && <AriaLiveMessage message={isTypingMessage} />}
+        <div className="cds-aichat--assistant-message">
+          <div className="cds-aichat--received cds-aichat--received--loading cds-aichat--message-vertical-padding">
+            <div className="cds-aichat--received--inner">
+              <div className="cds-aichat--processing">
+                <Processing
+                  className="cds-aichat--processing-component"
+                  loop
+                  carbonTheme={carbonTheme}
+                  aria-label={processingLabel}
+                />{" "}
+                <div className="cds-aichat--processing-label">
+                  {statusMessage}
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export { MessagesTypingIndicator };

packages/ai-chat/src/chat/components-legacy/MessagesTypingIndicator.tsx

@@ -0,0 +1,63 @@
+/*
+ *  Copyright IBM Corp. 2025
+ *
+ *  This source code is licensed under the Apache-2.0 license found in the
+ *  LICENSE file in the root directory of this source tree.
+ *
+ *  @license
+ */
+
+import cx from "classnames";
+import React from "react";
+
+interface MessagesViewProps {
+  bottomScrollHandle: React.ReactNode;
+  bottomSpacerRef: React.RefObject<HTMLDivElement>;
+  humanAgentBanner: React.ReactNode;
+  messagesContainerRef: React.RefObject<HTMLDivElement>;
+  onScroll: () => void;
+  regularMessages: React.ReactNode[];
+  scrollDownButton?: React.ReactNode;
+  scrollHandleHasFocus: boolean;
+  topScrollHandle: React.ReactNode;
+  typingIndicator?: React.ReactNode;
+}
+
+function MessagesView({
+  bottomScrollHandle,
+  bottomSpacerRef,
+  humanAgentBanner,
+  messagesContainerRef,
+  onScroll,
+  regularMessages,
+  scrollDownButton,
+  scrollHandleHasFocus,
+  topScrollHandle,
+  typingIndicator,
+}: MessagesViewProps) {
+  return (
+    <div className="cds-aichat--messages--holder">
+      {humanAgentBanner}
+      {/* eslint-disable-next-line jsx-a11y/no-static-element-interactions */}
+      <div
+        className={cx("cds-aichat--messages__wrapper", {
+          "cds-aichat--messages__wrapper--scroll-handle-has-focus":
+            scrollHandleHasFocus,
+        })}
+        ref={messagesContainerRef}
+        onScroll={onScroll}
+      >
+        {topScrollHandle}
+        <div className="cds-aichat--messages">
+          {regularMessages}
+          {typingIndicator}
+          <div id="chat-bottom-spacer" ref={bottomSpacerRef} />
+          {scrollDownButton}
+        </div>
+        {bottomScrollHandle}
+      </div>
+    </div>
+  );
+}
+
+export { MessagesView };

packages/ai-chat/src/chat/components-legacy/MessagesView.tsx

@@ -52,28 +52,26 @@ function doScrollElementIntoView(
  * @param element The scrollable element to set the scroll position of.
  * @param scrollTop The scrollTop value to set.
  * @param scrollLeft The scrollLeft value to set.
- * @param animate Indicates if the scrolling should be done using animation.
+ * @param animate Indicates if the scrolling should be done using smooth scroll animation.
  */
 function doScrollElement(
   element: Element,
   scrollTop: number,
   scrollLeft: number,
   animate = false,
 ) {
-  setTimeout(() => {
-    if (element) {
-      if (animate && element.scroll) {
-        element.scroll({
-          top: scrollTop,
-          left: scrollLeft,
-          behavior: "smooth",
-        });
-      } else {
-        element.scrollTop = scrollTop;
-        element.scrollLeft = scrollLeft;
-      }
+  if (element) {
+    if (animate && element.scroll) {
+      element.scroll({
+        top: scrollTop,
+        left: scrollLeft,
+        behavior: "smooth",
+      });
+    } else {
+      element.scrollTop = scrollTop;
+      element.scrollLeft = scrollLeft;
     }
-  });
+  }
 }
 
 /**
@@ -241,53 +239,6 @@ function getScrollBottom(element: HTMLElement) {
   return 0;
 }
 
-/**
- * Continuously checks an element's scrollHeight on each animation frame and resolves
- * once the scrollHeight remains unchanged for a specified number of consecutive frames (default 2 frames).
- *
- * This is useful for waiting until layout changes (e.g., animations, content loading, dropdowns expanding/collapsing)
- * have fully settled before performing measurements or scroll adjustments.
- *
- * Uses scrollHeight instead of clientHeight/getBoundingClientRect to detect content changes inside scrollable containers.
- */
-function waitForStableHeight(
-  el: HTMLElement,
-  opts: { frames?: number; timeoutMs?: number } = {},
-): Promise<void> {
-  const requiredStableFrames = opts.frames ?? 2;
-  const timeoutMs = opts.timeoutMs ?? 500;
-  let stableFrames = 0;
-  let lastHeight = el.scrollHeight;
-  let rafId: number | null = null;
-
-  return new Promise((resolve) => {
-    const deadline = performance.now() + timeoutMs;
-
-    const tick = () => {
-      const now = performance.now();
-      const h = el.scrollHeight;
-
-      if (h === lastHeight) {
-        stableFrames += 1;
-      } else {
-        stableFrames = 0;
-        lastHeight = h;
-      }
-
-      if (stableFrames >= requiredStableFrames || now >= deadline) {
-        if (rafId != null) {
-          cancelAnimationFrame(rafId);
-        }
-        resolve();
-      } else {
-        rafId = requestAnimationFrame(tick);
-      }
-    };
-
-    rafId = requestAnimationFrame(tick);
-  });
-}
-
 export {
   SCROLLBAR_WIDTH,
   doScrollElement,
@@ -302,5 +253,4 @@ export {
   focusOnFirstFocusableElement,
   isEnterKey,
   getScrollBottom,
-  waitForStableHeight,
 };

packages/ai-chat/src/chat/utils/domUtils.ts

@@ -13,7 +13,10 @@ import { DeepPartial } from "../../types/utilities/DeepPartial";
 import { AppConfig } from "../../types/state/AppConfig";
 import { AppState } from "../../types/state/AppState";
 import { FileUpload } from "../../types/config/ServiceDeskConfig";
-import { LocalMessageItem } from "../../types/messaging/LocalMessageItem";
+import {
+  LocalMessageItem,
+  MessageErrorState,
+} from "../../types/messaging/LocalMessageItem";
 import { FileStatusValue } from "./constants";
 import { findLastWithMap } from "./lang/arrayUtils";
 import { uuid, UUIDType } from "./lang/uuid";
@@ -580,6 +583,39 @@ function isStandaloneSystemMessage(message: Message): boolean {
   return false;
 }
 
+/**
+ * Returns the ID of the last message response that should have interactive inputs enabled.
+ *
+ * As soon as the user sends a message, all previous responses are disabled to prevent re-interaction.
+ * However, if the latest request resulted in an error, the last response is re-enabled so the user
+ * isn't left stuck with a disabled input bar.
+ *
+ * @param localMessageItems - The ordered list of local message items
+ * @param allMessagesByID - Map of all messages by their IDs
+ */
+function getMessageIDForUserInput(
+  localMessageItems: LocalMessageItem[],
+  allMessagesByID: Record<string, Message>,
+): string | null {
+  for (let index = localMessageItems.length - 1; index >= 0; index--) {
+    const message = localMessageItems[index];
+    const originalMessage = allMessagesByID[message.fullMessageID];
+    if (
+      isRequest(originalMessage) &&
+      originalMessage?.history?.error_state !== MessageErrorState.FAILED
+    ) {
+      // If we find a request that was not an error, then we need to disable everything.
+      return null;
+    }
+    if (isResponse(originalMessage)) {
+      // If we didn't find a successful request, then the first response we find can be enabled.
+      return message.fullMessageID;
+    }
+  }
+  // Nothing should be enabled.
+  return null;
+}
+
 export {
   getOptionType,
   isResponse,
@@ -621,4 +657,5 @@ export {
   isFullWidthUserDefined,
   isSystemMessageItem,
   isStandaloneSystemMessage,
+  getMessageIDForUserInput,
 };