Merge pull request #3515 from RedisInsight/fe/bugfix/RI-5852-chats-history-scroll

#RI-5852 - update chat history scroll behavior

Author: mariasergeenko

redisinsight/api/src/constants/telemetry-events.ts

@@ -89,7 +89,7 @@ export enum TelemetryEvents {
   FeatureFlagRecalculated = 'FEATURE_FLAG_RECALCULATED',
 
   // Insights
-  InsightsRecommendationGenerated = 'INSIGHTS_RECOMMENDATION_GENERATED',
+  InsightsTipGenerated = 'INSIGHTS_TIP_GENERATED',
 }
 
 export enum CommandType {

redisinsight/api/src/modules/database-recommendation/database-recommendation.analytics.spec.ts

@@ -36,7 +36,7 @@ describe('DatabaseRecommendationAnalytics', () => {
       );
 
       expect(sendEventSpy).toHaveBeenCalledWith(
-        TelemetryEvents.InsightsRecommendationGenerated,
+        TelemetryEvents.InsightsTipGenerated,
         {
           recommendationName: mockDatabaseRecommendation.name,
           databaseId: mockDatabase.id,

redisinsight/api/src/modules/database-recommendation/database-recommendation.analytics.ts

@@ -14,7 +14,7 @@ export class DatabaseRecommendationAnalytics extends TelemetryBaseService {
   sendCreatedRecommendationEvent(recommendation: DatabaseRecommendation, database: Database): void {
     try {
       this.sendEvent(
-        TelemetryEvents.InsightsRecommendationGenerated,
+        TelemetryEvents.InsightsTipGenerated,
         {
           recommendationName: recommendation.name,
           databaseId: database.id,

redisinsight/ui/src/components/side-panels/panels/ai-assistant/components/assistance-chat/AssistanceChat.tsx

@@ -1,4 +1,4 @@
-import React, { Ref, useCallback, useEffect, useRef, useState } from 'react'
+import React, { useCallback, useEffect, useState } from 'react'
 import { useDispatch, useSelector } from 'react-redux'
 import { useParams } from 'react-router-dom'
 import { EuiButtonEmpty } from '@elastic/eui'
@@ -7,11 +7,12 @@ import {
   askAssistantChatbot,
   createAssistantChatAction,
   getAssistantChatHistoryAction,
-  removeAssistantChatAction, removeAssistantChatHistorySuccess,
+  removeAssistantChatAction,
+  removeAssistantChatHistorySuccess,
   sendQuestion,
   updateAssistantChatAgreements,
 } from 'uiSrc/slices/panels/aiAssistant'
-import { getCommandsFromQuery, Nullable, scrollIntoView } from 'uiSrc/utils'
+import { getCommandsFromQuery, Nullable } from 'uiSrc/utils'
 import { sendEventTelemetry, TelemetryEvent } from 'uiSrc/telemetry'
 import { AiChatMessage, AiChatType } from 'uiSrc/slices/interfaces/aiAssistant'
 
@@ -32,23 +33,17 @@ const AssistanceChat = () => {
   const { commandsArray: REDIS_COMMANDS_ARRAY } = useSelector(appRedisCommandsSelector)
 
   const [inProgressMessage, setinProgressMessage] = useState<Nullable<AiChatMessage>>(null)
-  const scrollDivRef: Ref<HTMLDivElement> = useRef(null)
   const { instanceId } = useParams<{ instanceId: string }>()
 
   const dispatch = useDispatch()
 
   useEffect(() => {
-    if (!id || messages.length) {
-      scrollToBottom('auto')
-      return
-    }
+    if (!id || messages.length) return
 
-    dispatch(getAssistantChatHistoryAction(id, () => scrollToBottom('auto')))
+    dispatch(getAssistantChatHistoryAction(id))
   }, [id])
 
   const handleSubmit = useCallback((message: string) => {
-    scrollToBottom('smooth')
-
     if (!agreements) {
       dispatch(updateAssistantChatAgreements(true))
       sendEventTelemetry({
@@ -95,7 +90,6 @@ const AssistanceChat = () => {
       {
         onMessage: (message: AiChatMessage) => {
           setinProgressMessage({ ...message })
-          scrollToBottom('auto')
         },
         onError: (errorCode: number) => {
           sendEventTelemetry({
@@ -156,16 +150,6 @@ const AssistanceChat = () => {
     })
   }, [])
 
-  const scrollToBottom = useCallback((behavior: ScrollBehavior = 'smooth') => {
-    requestAnimationFrame(() => {
-      scrollIntoView(scrollDivRef?.current, {
-        behavior,
-        block: 'start',
-        inline: 'start',
-      })
-    })
-  }, [])
-
   return (
     <div className={styles.wrapper} data-testid="ai-general-chat">
       <div className={styles.header}>
@@ -185,13 +169,12 @@ const AssistanceChat = () => {
       </div>
       <div className={styles.chatHistory}>
         <ChatHistory
+          autoScroll
           isLoading={loading}
           modules={modules}
           initialMessage={AssistanceChatInitialMessage}
           inProgressMessage={inProgressMessage}
           history={messages}
-          scrollDivRef={scrollDivRef}
-          onMessageRendered={scrollToBottom}
           onRunCommand={onRunCommand}
           onRestart={onClearSession}
         />

redisinsight/ui/src/components/side-panels/panels/ai-assistant/components/expert-chat/ExpertChat.spec.tsx

@@ -15,6 +15,7 @@ import {
   aiExpertChatSelector,
   clearExpertChatHistory,
   getExpertChatHistory,
+  getExpertChatHistorySuccess,
   sendExpertQuestion,
   updateExpertChatAgreements,
 } from 'uiSrc/slices/panels/aiAssistant'
@@ -57,19 +58,20 @@ jest.mock('react-router-dom', () => ({
 }))
 
 let store: typeof mockedStore
-beforeEach(() => {
-  cleanup()
-  store = cloneDeep(mockedStoreFn())
-  store.clearActions()
-})
 
 describe('ExpertChat', () => {
+  beforeEach(() => {
+    cleanup()
+    store = cloneDeep(mockedStoreFn())
+    store.clearActions()
+  })
+
   it('should render', () => {
-    expect(render(<ExpertChat />)).toBeTruthy()
+    expect(render(<ExpertChat />, { store })).toBeTruthy()
   })
 
   it('should proper components render by default', () => {
-    render(<ExpertChat />)
+    render(<ExpertChat />, { store })
 
     expect(screen.getByTestId('ai-expert-restart-session-btn')).toBeInTheDocument()
     expect(screen.getByTestId('ai-chat-empty-history')).toBeInTheDocument()
@@ -82,7 +84,7 @@ describe('ExpertChat', () => {
       messages: [],
       agreements: []
     })
-    render(<ExpertChat />)
+    render(<ExpertChat />, { store })
 
     expect(screen.getByTestId('ai-loading-spinner')).toBeInTheDocument()
     expect(screen.queryByTestId('ai-chat-empty-history')).not.toBeInTheDocument()
@@ -200,7 +202,8 @@ describe('ExpertChat', () => {
   it('should call action after click on restart session', async () => {
     const sendEventTelemetryMock = jest.fn();
     (sendEventTelemetry as jest.Mock).mockImplementation(() => sendEventTelemetryMock)
-    apiService.delete = jest.fn().mockResolvedValueOnce({ status: 200 });
+    apiService.delete = jest.fn().mockResolvedValueOnce({ status: 200 })
+    apiService.get = jest.fn().mockResolvedValueOnce({ status: 200, data: [] });
 
     (aiExpertChatSelector as jest.Mock).mockReturnValue({
       loading: false,
@@ -221,6 +224,7 @@ describe('ExpertChat', () => {
 
     expect(store.getActions()).toEqual([
       ...afterRenderActions,
+      getExpertChatHistorySuccess([]),
       clearExpertChatHistory()
     ])
 

redisinsight/ui/src/components/side-panels/panels/ai-assistant/components/expert-chat/ExpertChat.tsx

@@ -1,4 +1,4 @@
-import React, { Ref, useCallback, useEffect, useRef, useState } from 'react'
+import React, { useCallback, useEffect, useRef, useState } from 'react'
 import { useDispatch, useSelector } from 'react-redux'
 import { useHistory, useParams } from 'react-router-dom'
 import { EuiIcon } from '@elastic/eui'
@@ -9,7 +9,7 @@ import {
   removeExpertChatHistoryAction,
   updateExpertChatAgreements,
 } from 'uiSrc/slices/panels/aiAssistant'
-import { findTutorialPath, getCommandsFromQuery, isRedisearchAvailable, Nullable, scrollIntoView } from 'uiSrc/utils'
+import { findTutorialPath, getCommandsFromQuery, isRedisearchAvailable, Nullable } from 'uiSrc/utils'
 import { connectedInstanceSelector, freeInstancesSelector } from 'uiSrc/slices/instances/instances'
 
 import { sendEventTelemetry, TELEMETRY_EMPTY_VALUE, TelemetryEvent } from 'uiSrc/telemetry'
@@ -40,7 +40,6 @@ const ExpertChat = () => {
   const [inProgressMessage, setinProgressMessage] = useState<Nullable<AiChatMessage>>(null)
 
   const currentAccountIdRef = useRef(userOAuthProfile?.id)
-  const scrollDivRef: Ref<HTMLDivElement> = useRef(null)
   const { instanceId } = useParams<{ instanceId: string }>()
 
   const isAgreementsAccepted = agreements.includes(instanceId) || messages.length > 0
@@ -56,16 +55,11 @@ const ExpertChat = () => {
     // changed account
     if (currentAccountIdRef.current !== userOAuthProfile?.id) {
       currentAccountIdRef.current = userOAuthProfile?.id
-      dispatch(getExpertChatHistoryAction(instanceId, () => scrollToBottom('auto')))
+      dispatch(getExpertChatHistoryAction(instanceId))
       return
     }
 
-    if (messages.length) {
-      scrollToBottom('auto')
-      return
-    }
-
-    dispatch(getExpertChatHistoryAction(instanceId, () => scrollToBottom('auto')))
+    dispatch(getExpertChatHistoryAction(instanceId))
   }, [instanceId, userOAuthProfile])
 
   useEffect(() => {
@@ -91,8 +85,6 @@ const ExpertChat = () => {
   }
 
   const handleSubmit = useCallback((message: string) => {
-    scrollToBottom()
-
     if (!isAgreementsAccepted) {
       dispatch(updateExpertChatAgreements(instanceId))
 
@@ -109,10 +101,7 @@ const ExpertChat = () => {
       instanceId,
       message,
       {
-        onMessage: (message: AiChatMessage) => {
-          setinProgressMessage({ ...message })
-          scrollToBottom('auto')
-        },
+        onMessage: (message: AiChatMessage) => setinProgressMessage({ ...message }),
         onError: (errorCode: number) => {
           sendEventTelemetry({
             event: TelemetryEvent.AI_CHAT_BOT_ERROR_MESSAGE_RECEIVED,
@@ -180,16 +169,6 @@ const ExpertChat = () => {
     })
   }
 
-  const scrollToBottom = (behavior: ScrollBehavior = 'smooth') => {
-    setTimeout(() => {
-      scrollIntoView(scrollDivRef?.current, {
-        behavior,
-        block: 'start',
-        inline: 'start',
-      })
-    }, 0)
-  }
-
   const getValidationMessage = () => {
     if (!instanceId) {
       return {
@@ -226,14 +205,14 @@ const ExpertChat = () => {
       />
       <div className={styles.chatHistory}>
         <ChatHistory
+          autoScroll
           isLoading={loading || isLoading}
           modules={modules}
           initialMessage={isNoIndexes
             ? <NoIndexesInitialMessage onClickTutorial={handleClickTutorial} onSuccess={getIndexes} />
             : EXPERT_CHAT_INITIAL_MESSAGE}
           inProgressMessage={inProgressMessage}
           history={messages}
-          scrollDivRef={scrollDivRef}
           onRunCommand={onRunCommand}
           onRestart={onClearSession}
         />

redisinsight/ui/src/components/side-panels/panels/ai-assistant/components/shared/chat-history/ChatHistory.tsx

@@ -1,9 +1,10 @@
-import React, { useCallback } from 'react'
+import React, { MutableRefObject, Ref, useCallback, useEffect, useRef } from 'react'
 import cx from 'classnames'
 
 import { EuiIcon, EuiLoadingSpinner } from '@elastic/eui'
+import { throttle } from 'lodash'
 import { AiChatMessage, AiChatMessageType } from 'uiSrc/slices/interfaces/aiAssistant'
-import { Nullable } from 'uiSrc/utils'
+import { Nullable, scrollIntoView } from 'uiSrc/utils'
 import { AdditionalRedisModule } from 'apiSrc/modules/database/models/additional.redis.module'
 
 import LoadingMessage from '../loading-message'
@@ -13,30 +14,81 @@ import ErrorMessage from '../error-message'
 import styles from './styles.module.scss'
 
 export interface Props {
+  autoScroll?: boolean
   isLoading?: boolean
   initialMessage: React.ReactNode
   inProgressMessage?: Nullable<AiChatMessage>
   modules?: AdditionalRedisModule[]
   history: AiChatMessage[]
-  scrollDivRef: React.Ref<HTMLDivElement>
   onMessageRendered?: () => void
   onRunCommand?: (query: string) => void
   onRestart: () => void
 }
 
+const SCROLL_THROTTLE_MS = 200
+
 const ChatHistory = (props: Props) => {
   const {
+    autoScroll,
     isLoading,
     initialMessage,
     inProgressMessage,
     modules,
     history = [],
-    scrollDivRef,
     onMessageRendered,
     onRunCommand,
     onRestart
   } = props
 
+  const scrollDivRef: Ref<HTMLDivElement> = useRef(null)
+  const listRef: Ref<HTMLDivElement> = useRef(null)
+  const observerRef: MutableRefObject<Nullable<MutationObserver>> = useRef(null)
+  const scrollBehavior = useRef<ScrollBehavior>('auto')
+
+  useEffect(() => {
+    if (!autoScroll) return undefined
+    if (!listRef.current) return undefined
+
+    scrollBehavior.current = inProgressMessage ? 'smooth' : 'auto'
+
+    if (!inProgressMessage) scrollToBottom()
+    if (inProgressMessage?.content === '') scrollToBottomThrottled()
+
+    if (!observerRef.current) {
+      const observerCallback: MutationCallback = (mutationsList) => {
+        // eslint-disable-next-line no-restricted-syntax
+        for (const mutation of mutationsList) {
+          if (mutation.type === 'childList') {
+            scrollBehavior.current === 'smooth' ? scrollToBottomThrottled() : scrollToBottom()
+            break
+          }
+        }
+      }
+
+      observerRef.current = new MutationObserver(observerCallback)
+    }
+
+    observerRef.current.observe(listRef.current, {
+      childList: true,
+      subtree: true,
+    })
+
+    return () => {
+      observerRef.current?.disconnect()
+    }
+  }, [autoScroll, inProgressMessage, history])
+
+  const scrollToBottom = (behavior: ScrollBehavior = 'auto') => {
+    requestAnimationFrame(() => {
+      scrollIntoView(scrollDivRef?.current, {
+        behavior,
+        block: 'start',
+        inline: 'start',
+      })
+    })
+  }
+  const scrollToBottomThrottled = throttle(() => scrollToBottom('smooth'), SCROLL_THROTTLE_MS)
+
   const getMessage = useCallback((message?: Nullable<AiChatMessage>) => {
     if (!message) return null
 
@@ -107,15 +159,15 @@ const ChatHistory = (props: Props) => {
 
   return (
     <div className={styles.wrapper}>
-      <div className={styles.history} data-testid="ai-chat-history">
+      <div ref={listRef} className={styles.history} data-testid="ai-chat-history">
         {history.map(getMessage)}
         {getMessage(inProgressMessage)}
         {content === '' && (
           <div className={styles.answerWrapper}>
             <div className={styles.answer} data-testid="ai-loading-answer"><LoadingMessage /></div>
           </div>
         )}
-        <div ref={scrollDivRef} />
+        <div className={styles.scrollAnchor} ref={scrollDivRef} />
       </div>
     </div>
   )