Merge pull request #3355 from RedisInsight/fe/feature/RI-5647-suggest-import-data

#RI-5647 - suggest to import data when there are no indexes

Author: rsergeenko

redisinsight/ui/src/components/side-panels/panels/ai-assistant/AiAssistant.tsx

@@ -1,17 +1,30 @@
-import React from 'react'
-import { useSelector } from 'react-redux'
+import React, { useEffect, useRef } from 'react'
+import { useDispatch, useSelector } from 'react-redux'
 
 import { oauthCloudUserSelector } from 'uiSrc/slices/oauth/cloud'
 import { FeatureFlags } from 'uiSrc/constants'
 import { appFeatureFlagsFeaturesSelector } from 'uiSrc/slices/app/features'
+import { clearExpertChatHistory } from 'uiSrc/slices/panels/aiAssistant'
 import { WelcomeAiAssistant, ChatsWrapper } from './components'
 import styles from './styles.module.scss'
 
 const AiAssistant = () => {
-  const { data } = useSelector(oauthCloudUserSelector)
+  const { data: userOAuthProfile } = useSelector(oauthCloudUserSelector)
   const { [FeatureFlags.cloudSso]: cloudSsoFeature } = useSelector(appFeatureFlagsFeaturesSelector)
 
-  const isShowAuth = cloudSsoFeature?.flag && !data
+  const currentAccountIdRef = useRef(userOAuthProfile?.id)
+  const isShowAuth = cloudSsoFeature?.flag && !userOAuthProfile
+
+  const dispatch = useDispatch()
+
+  useEffect(() => {
+    // user logout
+    if (currentAccountIdRef.current && !userOAuthProfile?.id) {
+      dispatch(clearExpertChatHistory())
+    }
+
+    currentAccountIdRef.current = userOAuthProfile?.id
+  }, [userOAuthProfile])
 
   return (
     <div className={styles.wrapper} data-testid="redis-copilot">

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

@@ -1,6 +1,15 @@
 import React from 'react'
 import { cloneDeep } from 'lodash'
-import { act, cleanup, fireEvent, mockedStore, render, screen, waitForEuiPopoverVisible } from 'uiSrc/utils/test-utils'
+import {
+  act,
+  cleanup,
+  fireEvent,
+  mockedStore,
+  mockedStoreFn,
+  render,
+  screen,
+  waitForEuiPopoverVisible
+} from 'uiSrc/utils/test-utils'
 
 import {
   aiAssistantChatSelector,
@@ -28,25 +37,25 @@ jest.mock('uiSrc/slices/panels/aiAssistant', () => ({
 let store: typeof mockedStore
 beforeEach(() => {
   cleanup()
-  store = cloneDeep(mockedStore)
+  store = cloneDeep(mockedStoreFn())
   store.clearActions()
 })
 
 describe('AssistanceChat', () => {
   it('should render', () => {
-    expect(render(<AssistanceChat />)).toBeTruthy()
+    expect(render(<AssistanceChat />, { store })).toBeTruthy()
   })
 
   it('should proper components render by default', () => {
-    render(<AssistanceChat />)
+    render(<AssistanceChat />, { store })
 
     expect(screen.getByTestId('ai-general-restart-session-btn')).toBeInTheDocument()
     expect(screen.getByTestId('ai-chat-empty-history')).toBeInTheDocument()
     expect(screen.getByTestId('ai-submit-message-btn')).toBeInTheDocument()
   })
 
   it('should call proper actions by default', () => {
-    render(<AssistanceChat />)
+    render(<AssistanceChat />, { store })
 
     expect(store.getActions()).toEqual([])
   })
@@ -56,7 +65,7 @@ describe('AssistanceChat', () => {
       id: '1',
       messages: []
     })
-    render(<AssistanceChat />)
+    render(<AssistanceChat />, { store })
 
     expect(store.getActions()).toEqual([getAssistantChatHistory()])
   })
@@ -66,7 +75,7 @@ describe('AssistanceChat', () => {
       id: '',
       messages: []
     })
-    render(<AssistanceChat />)
+    render(<AssistanceChat />, { store })
 
     act(() => {
       fireEvent.change(
@@ -88,7 +97,7 @@ describe('AssistanceChat', () => {
       id: '1',
       messages: []
     })
-    render(<AssistanceChat />)
+    render(<AssistanceChat />, { store })
 
     const afterRenderActions = [...store.getActions()]
 
@@ -124,15 +133,16 @@ describe('AssistanceChat', () => {
       messages: [{}]
     })
 
-    render(<AssistanceChat />)
+    render(<AssistanceChat />, { store })
 
     const afterRenderActions = [...store.getActions()]
 
     fireEvent.click(screen.getByTestId('ai-general-restart-session-btn'))
 
     await waitForEuiPopoverVisible()
-
-    fireEvent.click(screen.getByTestId('ai-chat-restart-confirm'))
+    await act(async () => {
+      fireEvent.click(screen.getByTestId('ai-chat-restart-confirm'))
+    })
 
     expect(store.getActions()).toEqual([
       ...afterRenderActions,

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

@@ -16,7 +16,7 @@ import { AiChatMessage, AiChatType } from 'uiSrc/slices/interfaces/aiAssistant'
 import { connectedInstanceSelector } from 'uiSrc/slices/instances/instances'
 import { appRedisCommandsSelector } from 'uiSrc/slices/app/redis-commands'
 
-import { AssistanceChatInitialMessage, ChatHistory, ChatForm } from '../shared'
+import { AssistanceChatInitialMessage, ChatHistory, ChatForm, RestartChat } from '../shared'
 
 import styles from './styles.module.scss'
 
@@ -121,13 +121,17 @@ const AssistanceChat = () => {
     <div className={styles.wrapper} data-testid="ai-general-chat">
       <div className={styles.header}>
         <span />
-        <EuiButtonEmpty
-          disabled={!!inProgressMessage || !messages?.length}
-          iconType="eraser"
-          size="xs"
-          onClick={onClearSession}
-          className={styles.headerBtn}
-          data-testid="ai-general-restart-session-btn"
+        <RestartChat
+          button={(
+            <EuiButtonEmpty
+              disabled={!!inProgressMessage || !messages?.length}
+              iconType="eraser"
+              size="xs"
+              className={styles.headerBtn}
+              data-testid="ai-general-restart-session-btn"
+            />
+          )}
+          onConfirm={onClearSession}
         />
       </div>
       <div className={styles.chatHistory}>

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

@@ -14,6 +14,8 @@ import { sendEventTelemetry, TelemetryEvent } from 'uiSrc/telemetry'
 import { AiChatMessage, AiChatType } from 'uiSrc/slices/interfaces/aiAssistant'
 import { appRedisCommandsSelector } from 'uiSrc/slices/app/redis-commands'
 import { oauthCloudUserSelector } from 'uiSrc/slices/oauth/cloud'
+import { fetchRedisearchListAction } from 'uiSrc/slices/browser/redisearch'
+import NoIndexesInitialMessage from './components/no-indexes-initial-message'
 import ExpertChatHeader from './components/expert-chat-header'
 import { ChatForm, ChatHistory, ExpertChatInitialMessage } from '../shared'
 
@@ -26,6 +28,8 @@ const ExpertChat = () => {
   const { data: userOAuthProfile } = useSelector(oauthCloudUserSelector)
   const freeInstances = useSelector(freeInstancesSelector) || []
 
+  const [isNoIndexes, setIsNoIndexes] = useState(false)
+  const [isLoading, setIsLoading] = useState(false)
   const [inProgressMessage, setinProgressMessage] = useState<Nullable<AiChatMessage>>(null)
 
   const currentAccountIdRef = useRef(userOAuthProfile?.id)
@@ -35,8 +39,12 @@ const ExpertChat = () => {
   const dispatch = useDispatch()
 
   useEffect(() => {
+    if (!instanceId) {
+      return
+    }
+
     // changed account
-    if (instanceId && currentAccountIdRef.current !== userOAuthProfile?.id) {
+    if (currentAccountIdRef.current !== userOAuthProfile?.id) {
       currentAccountIdRef.current = userOAuthProfile?.id
       dispatch(getExpertChatHistoryAction(instanceId, () => scrollToBottom('auto')))
       return
@@ -47,11 +55,31 @@ const ExpertChat = () => {
       return
     }
 
-    if (instanceId) {
-      dispatch(getExpertChatHistoryAction(instanceId, () => scrollToBottom('auto')))
-    }
+    dispatch(getExpertChatHistoryAction(instanceId, () => scrollToBottom('auto')))
   }, [instanceId, userOAuthProfile])
 
+  useEffect(() => {
+    if (!instanceId) return
+    if (!isRedisearchAvailable(modules)) return
+    if (messages.length) return
+
+    getIndexes()
+  }, [instanceId, modules])
+
+  const getIndexes = () => {
+    setIsLoading(true)
+    dispatch(
+      fetchRedisearchListAction(
+        (indexes) => {
+          setIsLoading(false)
+          setIsNoIndexes(!indexes.length)
+        },
+        () => setIsLoading(false),
+        false
+      )
+    )
+  }
+
   const handleSubmit = useCallback((message: string) => {
     scrollToBottom()
 
@@ -148,9 +176,11 @@ const ExpertChat = () => {
       />
       <div className={styles.chatHistory}>
         <ChatHistory
-          isLoading={loading}
+          isLoading={loading || isLoading}
           modules={modules}
-          initialMessage={ExpertChatInitialMessage}
+          initialMessage={isNoIndexes
+            ? <NoIndexesInitialMessage onSuccess={getIndexes} />
+            : ExpertChatInitialMessage}
           inProgressMessage={inProgressMessage}
           history={messages}
           scrollDivRef={scrollDivRef}

redisinsight/ui/src/components/side-panels/panels/ai-assistant/components/expert-chat/components/no-indexes-initial-message/NoIndexesInitialMessage.spec.tsx

@@ -0,0 +1,34 @@
+import React from 'react'
+import { render, screen } from 'uiSrc/utils/test-utils'
+import { sendEventTelemetry, TelemetryEvent } from 'uiSrc/telemetry'
+
+import NoIndexesInitialMessage from './NoIndexesInitialMessage'
+
+jest.mock('uiSrc/telemetry', () => ({
+  ...jest.requireActual('uiSrc/telemetry'),
+  sendEventTelemetry: jest.fn(),
+}))
+
+describe('NoIndexesInitialMessage', () => {
+  it('should render', () => {
+    expect(render(<NoIndexesInitialMessage />)).toBeTruthy()
+  })
+
+  it('should render load sample data button', () => {
+    render(<NoIndexesInitialMessage />)
+
+    expect(screen.getByTestId('load-sample-data-btn')).toBeInTheDocument()
+  })
+
+  it('should call telemetry on init', () => {
+    const sendEventTelemetryMock = jest.fn();
+    (sendEventTelemetry as jest.Mock).mockImplementation(() => sendEventTelemetryMock)
+
+    render(<NoIndexesInitialMessage />)
+
+    expect(sendEventTelemetry).toBeCalledWith({
+      event: TelemetryEvent.AI_CHAT_BOT_NO_INDEXES_MESSAGE_DISPLAYED
+    });
+    (sendEventTelemetry as jest.Mock).mockRestore()
+  })
+})

redisinsight/ui/src/components/side-panels/panels/ai-assistant/components/expert-chat/components/no-indexes-initial-message/NoIndexesInitialMessage.tsx

@@ -0,0 +1,35 @@
+import React, { useEffect } from 'react'
+import { EuiSpacer, EuiText } from '@elastic/eui'
+import LoadSampleData from 'uiSrc/pages/browser/components/load-sample-data'
+
+import { sendEventTelemetry, TelemetryEvent } from 'uiSrc/telemetry'
+import styles from './styles.module.scss'
+
+export interface Props {
+  onSuccess?: () => void
+}
+
+const NoIndexesInitialMessage = (props: Props) => {
+  const { onSuccess } = props
+
+  useEffect(() => {
+    sendEventTelemetry({
+      event: TelemetryEvent.AI_CHAT_BOT_NO_INDEXES_MESSAGE_DISPLAYED
+    })
+  }, [])
+
+  return (
+    <div data-testid="no-indexes-chat-message">
+      <EuiText size="xs">Hi!</EuiText>
+      <EuiText size="xs">I am here to help you get started with data querying.</EuiText>
+      <EuiText size="xs">I noticed that you have no indexes created.</EuiText>
+      <EuiSpacer />
+      <EuiText size="xs">Would you like to load the sample data to see what Redis Copilot can help you do?</EuiText>
+      <EuiSpacer />
+      <LoadSampleData anchorClassName={styles.anchorClassName} onSuccess={onSuccess} />
+      <EuiSpacer size="xs" />
+    </div>
+  )
+}
+
+export default NoIndexesInitialMessage

redisinsight/ui/src/components/side-panels/panels/ai-assistant/components/expert-chat/components/no-indexes-initial-message/index.ts

@@ -0,0 +1,3 @@
+import NoIndexesInitialMessage from './NoIndexesInitialMessage'
+
+export default NoIndexesInitialMessage

redisinsight/ui/src/components/side-panels/panels/ai-assistant/components/expert-chat/components/no-indexes-initial-message/styles.module.scss

@@ -0,0 +1,12 @@
+.anchorClassName {
+  :global {
+    .euiButton {
+      height: 28px !important;
+      line-height: 28px !important;
+
+      .euiButton__text {
+        font-size: 13px !important;
+      }
+    }
+  }
+}

redisinsight/ui/src/components/side-panels/panels/ai-assistant/components/shared/error-message/ErrorMessage.spec.tsx

@@ -16,7 +16,7 @@ describe('ErrorMessage', () => {
     expect(screen.getByTestId('ai-chat-error-message')).toHaveTextContent(AiChatErrors.Default)
     expect(screen.getByTestId('ai-chat-error-report-link')).toBeInTheDocument()
 
-    expect(screen.getByTestId('ai-general-restart-session-btn')).toBeInTheDocument()
+    expect(screen.getByTestId('ai-chat-error-restart-session-btn')).toBeInTheDocument()
   })
 
   it('should not render restart button with timeout error', () => {
@@ -26,6 +26,6 @@ describe('ErrorMessage', () => {
     expect(screen.getByTestId('ai-chat-error-message')).toHaveTextContent(AiChatErrors.Timeout)
     expect(screen.getByTestId('ai-chat-error-report-link')).toBeInTheDocument()
 
-    expect(screen.queryByTestId('ai-general-restart-session-btn')).not.toBeInTheDocument()
+    expect(screen.queryByTestId('ai-chat-error-restart-session-btn')).not.toBeInTheDocument()
   })
 })

redisinsight/ui/src/components/side-panels/panels/ai-assistant/components/shared/error-message/ErrorMessage.tsx

@@ -54,7 +54,7 @@ const ErrorMessage = (props: Props) => {
               color="secondary"
               iconType="eraser"
               className={styles.restartSessionBtn}
-              data-testid="ai-general-restart-session-btn"
+              data-testid="ai-chat-error-restart-session-btn"
             >
               Restart session
             </EuiButton>