fix: scroll to bottom button didnt show during streaming (carbon-design-system#1007)

Author: ethanwinters

packages/ai-chat-components/src/components/chat-shell/src/workspace-manager.ts

@@ -81,6 +81,7 @@ export class WorkspaceManager {
     this.throttledHandleHostResize = throttle(
       (inlineSize: number) => this.handleHostResize(inlineSize),
       100,
+      { leading: true, trailing: true },
     );
   }
 

packages/ai-chat-components/src/components/markdown/src/markdown.ts

@@ -326,7 +326,7 @@ class CDSAIChatMarkdown extends LitElement {
       return trackedTask;
     },
     100,
-    { leading: true },
+    { leading: true, trailing: true },
   );
 
   protected async getUpdateComplete(): Promise<boolean> {

packages/ai-chat/src/aiChatEntry.tsx

@@ -53,6 +53,7 @@ export {
   WriteableElementName,
   WriteableElements,
 } from "./types/instance/ChatInstance";
+export { AutoScrollOptions } from "./types/utilities/HasDoAutoScroll";
 export { LayoutCustomProperties } from "./types/config/LayoutCustomProperties";
 
 export { CornersType } from "./types/config/CornersType";

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

@@ -60,7 +60,6 @@ import { HasServiceManager } from "../hocs/withServiceManager";
 import actions from "../store/actions";
 import { AppConfig } from "../../types/state/AppConfig";
 import { HasClassName } from "../../types/utilities/HasClassName";
-import { HasDoAutoScroll } from "../../types/utilities/HasDoAutoScroll";
 import HasIntl from "../../types/utilities/HasIntl";
 import HasLanguagePack from "../../types/utilities/HasLanguagePack";
 import {
@@ -136,8 +135,7 @@ interface MessageProps
     HasServiceManager,
     HasLanguagePack,
     HasClassName,
-    HasAriaAnnouncer,
-    HasDoAutoScroll {
+    HasAriaAnnouncer {
   /**
    * The local message item that is part of the original message.
    */
@@ -1042,7 +1040,6 @@ class MessageComponent extends PureComponent<MessageProps, MessageState> {
       disableUserInputs,
       showAvatarLine,
       className,
-      doAutoScroll,
       isMessageForInput,
       scrollElementIntoView,
       isFirstMessageItem,
@@ -1075,7 +1072,6 @@ class MessageComponent extends PureComponent<MessageProps, MessageState> {
         disableUserInputs={disableUserInputs}
         isMessageForInput={isMessageForInput}
         config={config}
-        doAutoScroll={doAutoScroll}
         scrollElementIntoView={scrollElementIntoView}
         showChainOfThought={isLastMessageItem}
         hideFeedback={hideFeedback}

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

@@ -376,7 +376,6 @@ function MessageTypeComponent(props: MessageTypeComponentProps) {
           MessageErrorState.FAILED_WHILE_STREAMING
         }
         removeHTML={removeHTML}
-        doAutoScroll={props.doAutoScroll}
       />
     );
   }
@@ -483,17 +482,15 @@ function MessageTypeComponent(props: MessageTypeComponentProps) {
     message: LocalMessageItem,
     originalMessage: MessageResponse,
   ) {
-    const { serviceManager, doAutoScroll } = props;
+    const { serviceManager } = props;
     return (
       <UserDefinedResponse
-        streamingState={message.ui_state.streamingState}
         isStreamingError={
           originalMessage?.history?.error_state ===
           MessageErrorState.FAILED_WHILE_STREAMING
         }
         localMessageID={message.ui_state.id}
         serviceManager={serviceManager}
-        doAutoScroll={doAutoScroll}
       />
     );
   }
@@ -560,7 +557,7 @@ function MessageTypeComponent(props: MessageTypeComponentProps) {
     localMessageItem: LocalMessageItem<ConversationalSearchItem>,
     fullMessage: MessageResponse,
   ) {
-    const { scrollElementIntoView, doAutoScroll } = props;
+    const { scrollElementIntoView } = props;
     return (
       <ConversationalSearch
         localMessageItem={localMessageItem}
@@ -569,7 +566,6 @@ function MessageTypeComponent(props: MessageTypeComponentProps) {
           fullMessage?.history?.error_state ===
           MessageErrorState.FAILED_WHILE_STREAMING
         }
-        doAutoScroll={doAutoScroll}
       />
     );
   }

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

@@ -13,6 +13,10 @@
 @use "@carbon/styles/scss/components/button/tokens";
 @use "../styles/chat-theme";
 
+.cds-aichat--typing-indicator--hidden {
+  visibility: hidden;
+}
+
 .cds-aichat--messages--holder {
   display: flex;
   overflow: hidden;