Merge pull request #3363 from RedisInsight/fe/feature/RI-5701_chatbot

#RI-5701, #RI-5730 - chatbot enhancements

Author: rsergeenko

redisinsight/ui/src/assets/img/telescope-dark.svg

@@ -136,7 +136,7 @@ const BottomGroupMinimized = () => {
         <>
           <EuiIcon type={SurveyIcon} className={styles.surveyIcon} />
           <EuiHideFor sizes={['xs', 's']}>
-            <span>We value your input. Please take our survey.</span>
+            <span>Let us know what you think</span>
           </EuiHideFor>
           <EuiShowFor sizes={['xs', 's']}>
             <span>Survey</span>

redisinsight/ui/src/components/bottom-group-components/components/bottom-group-minimized/BottomGroupMinimized.tsx

@@ -3,7 +3,7 @@ import { EuiButton, EuiImage } from '@elastic/eui'
 
 import { OAuthSsoHandlerDialog } from 'uiSrc/components'
 
-import RedisLogo from 'uiSrc/assets/img/logo.svg'
+import RedisLogo from 'uiSrc/assets/img/logo_small.svg'
 
 import { OAuthSocialAction, OAuthSocialSource } from 'uiSrc/slices/interfaces'
 import styles from './styles.module.scss'

redisinsight/ui/src/components/oauth/oauth-sign-in-button/OAuthSignInButton.tsx

@@ -15,7 +15,7 @@
   }
 
   .logo {
-    width: 20px;
-    margin-right: 10px;
+    width: 14px;
+    margin-right: 6px;
   }
 }

redisinsight/ui/src/components/oauth/oauth-sign-in-button/styles.module.scss

@@ -8,6 +8,7 @@ import {
   createAssistantChatAction,
   getAssistantChatHistoryAction,
   removeAssistantChatAction,
+  sendQuestion,
 } from 'uiSrc/slices/panels/aiAssistant'
 import { getCommandsFromQuery, Nullable, scrollIntoView } from 'uiSrc/utils'
 import { sendEventTelemetry, TelemetryEvent } from 'uiSrc/telemetry'
@@ -16,6 +17,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 { generateHumanMessage } from 'uiSrc/utils/transformers/chatbot'
 import { AssistanceChatInitialMessage, ChatHistory, ChatForm, RestartChat } from '../shared'
 
 import styles from './styles.module.scss'
@@ -44,7 +46,18 @@ const AssistanceChat = () => {
     scrollToBottom('smooth')
 
     if (!id) {
-      dispatch(createAssistantChatAction((chatId) => sendChatMessage(chatId, message)))
+      dispatch(
+        createAssistantChatAction(
+          (chatId) => sendChatMessage(chatId, message),
+          // if cannot create a chat - just put message with error
+          () => dispatch(
+            sendQuestion({
+              ...generateHumanMessage(message),
+              error: { statusCode: 500 },
+            })
+          )
+        )
+      )
       return
     }
 

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

@@ -1,13 +1,12 @@
 import React, { useEffect } from 'react'
 
-import { EuiImage, EuiTab, EuiTabs } from '@elastic/eui'
+import { EuiTab, EuiTabs } from '@elastic/eui'
 
 import { useDispatch, useSelector } from 'react-redux'
 import cx from 'classnames'
 import { filter } from 'lodash'
 import { aiChatSelector, setSelectedTab } from 'uiSrc/slices/panels/aiAssistant'
 import { AiChatType } from 'uiSrc/slices/interfaces/aiAssistant'
-import AiChatImg from 'uiSrc/assets/img/ai/ai-chat-small.svg'
 
 import { FeatureFlags } from 'uiSrc/constants'
 import { appFeatureFlagsFeaturesSelector } from 'uiSrc/slices/app/features'
@@ -69,7 +68,6 @@ const ChatsWrapper = () => {
     <div className={styles.wrapper} data-testid="chat-wrapper">
       {chats.length > 1 && (
         <div className={styles.tabsWrapper}>
-          <EuiImage className={styles.chatImg} src={AiChatImg} alt="chat" />
           <EuiTabs className={cx('tabs-active-borders', styles.tabs)}>
             {documentationChatFeature?.flag && (
               <EuiTab

redisinsight/ui/src/components/side-panels/panels/ai-assistant/components/chats-wrapper/ChatsWrapper.tsx

@@ -12,12 +12,6 @@
     padding: 0 12px;
   }
 
-  .chatImg {
-    width: 18px;
-    margin-right: 12px;
-    margin-left: 4px;
-  }
-
   .tabs {
     :global(.euiTab) {
       margin-bottom: -1px;

redisinsight/ui/src/components/side-panels/panels/ai-assistant/components/chats-wrapper/styles.module.scss

@@ -1,6 +1,7 @@
 import React, { Ref, useCallback, useEffect, useRef, useState } from 'react'
 import { useDispatch, useSelector } from 'react-redux'
 import { useParams } from 'react-router-dom'
+import { EuiIcon } from '@elastic/eui'
 import {
   aiExpertChatSelector,
   askExpertChatbotAction,
@@ -15,6 +16,7 @@ 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 TelescopeImg from 'uiSrc/assets/img/telescope-dark.svg?react'
 import NoIndexesInitialMessage from './components/no-indexes-initial-message'
 import ExpertChatHeader from './components/expert-chat-header'
 import { ChatForm, ChatHistory, ExpertChatInitialMessage } from '../shared'
@@ -159,7 +161,13 @@ const ExpertChat = () => {
         title: 'Search & query capability is not available',
         content: freeInstances?.length
           ? 'Use your free all-in-one Redis Cloud database to start exploring these capabilities.'
-          : 'Create a free Redis Stack database with search & query capability that extends the core capabilities of open-source Redis.'
+          : 'Create a free Redis Stack database with search & query capability that extends the core capabilities of open-source Redis.',
+        icon: (
+          <EuiIcon
+            className={styles.iconTelescope}
+            type={TelescopeImg}
+          />
+        )
       }
     }
 

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

@@ -34,3 +34,11 @@
     }
   }
 }
+
+.iconTelescope {
+  width: 80px !important;
+  height: 60px !important;
+  margin-left: 12px;
+
+  transform: rotateY(180deg) !important;
+}

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

@@ -1,5 +1,5 @@
 import React, { Ref, useRef, useState } from 'react'
-import { EuiButton, EuiForm, EuiTextArea, EuiToolTip, keys } from '@elastic/eui'
+import { EuiButton, EuiForm, EuiSpacer, EuiText, EuiTextArea, EuiTitle, EuiToolTip, keys } from '@elastic/eui'
 
 import cx from 'classnames'
 import { isModifiedEvent } from 'uiSrc/services'
@@ -12,6 +12,7 @@ export interface Props {
   validation?: {
     title?: React.ReactNode
     content?: React.ReactNode
+    icon?: React.ReactNode
   }
   isDisabled?: boolean
   placeholder?: string
@@ -69,9 +70,21 @@ const ChatForm = (props: Props) => {
 
   return (
     <EuiToolTip
-      title={validation?.title}
-      content={validation?.content}
-      anchorClassName={styles.validationTooltip}
+      content={validation ? (
+        <div className={styles.tooltipContent}>
+          <div>
+            {validation.title && (
+              <>
+                <EuiTitle size="xxs"><span>{validation.title}</span></EuiTitle>
+                <EuiSpacer size="s" />
+              </>
+            )}
+            {validation.content && (<EuiText size="xs">{validation.content}</EuiText>)}
+          </div>
+          {validation.icon}
+        </div>
+      ) : undefined}
+      className={styles.validationTooltip}
       display="block"
     >
       <EuiForm