[Security solution] Assistant package assistant/index.tsx cleanup

x-pack/packages/kbn-elastic-assistant/impl/assistant/assistant_body/empty_convo.tsx

@@ -0,0 +1,80 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import React, { Dispatch, SetStateAction } from 'react';
+import { EuiFlexGroup, EuiFlexItem, EuiPanel, EuiText } from '@elastic/eui';
+import { css } from '@emotion/react';
+import { PromptResponse } from '@kbn/elastic-assistant-common';
+import { QueryObserverResult } from '@tanstack/react-query';
+import { Conversation } from '../../..';
+import { AssistantAnimatedIcon } from '../assistant_animated_icon';
+import { SystemPrompt } from '../prompt_editor/system_prompt';
+import { SetupKnowledgeBaseButton } from '../../knowledge_base/setup_knowledge_base_button';
+import * as i18n from '../translations';
+
+interface Props {
+  currentConversation: Conversation | undefined;
+  currentSystemPromptId: string | undefined;
+  handleOnSystemPromptSelectionChange: (systemPromptId?: string) => void;
+
+  isSettingsModalVisible: boolean;
+  refetchCurrentUserConversations: () => Promise<
+    QueryObserverResult<Record<string, Conversation>, unknown>
+  >;
+  setIsSettingsModalVisible: Dispatch<SetStateAction<boolean>>;
+  allSystemPrompts: PromptResponse[];
+}
+
+export const EmptyConvo: React.FC<Props> = ({
+  allSystemPrompts,
+  currentConversation,
+  currentSystemPromptId,
+  handleOnSystemPromptSelectionChange,
+  isSettingsModalVisible,
+  refetchCurrentUserConversations,
+  setIsSettingsModalVisible,
+}) => {
+  return (
+    <EuiFlexGroup alignItems="center" justifyContent="center">
+      <EuiFlexItem grow={false}>
+        <EuiPanel
+          hasShadow={false}
+          css={css`
+            max-width: 400px;
+            text-align: center;
+          `}
+        >
+          <EuiFlexGroup alignItems="center" justifyContent="center" direction="column">
+            <EuiFlexItem grow={false}>
+              <AssistantAnimatedIcon />
+            </EuiFlexItem>
+            <EuiFlexItem grow={false}>
+              <EuiText>
+                <h3>{i18n.EMPTY_SCREEN_TITLE}</h3>
+                <p>{i18n.EMPTY_SCREEN_DESCRIPTION}</p>
+              </EuiText>
+            </EuiFlexItem>
+            <EuiFlexItem grow={false}>
+              <SystemPrompt
+                conversation={currentConversation}
+                currentSystemPromptId={currentSystemPromptId}
+                onSystemPromptSelectionChange={handleOnSystemPromptSelectionChange}
+                isSettingsModalVisible={isSettingsModalVisible}
+                setIsSettingsModalVisible={setIsSettingsModalVisible}
+                allSystemPrompts={allSystemPrompts}
+                refetchConversations={refetchCurrentUserConversations}
+              />
+            </EuiFlexItem>
+            <EuiFlexItem grow={false}>
+              <SetupKnowledgeBaseButton />
+            </EuiFlexItem>
+          </EuiFlexGroup>
+        </EuiPanel>
+      </EuiFlexItem>
+    </EuiFlexGroup>
+  );
+};

x-pack/packages/kbn-elastic-assistant/impl/assistant/assistant_body/index.tsx

@@ -0,0 +1,135 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import React, {
+  Dispatch,
+  FunctionComponent,
+  SetStateAction,
+  useEffect,
+  useMemo,
+  useRef,
+} from 'react';
+import { EuiFlexGroup, EuiFlexItem, EuiPanel, EuiText } from '@elastic/eui';
+import { HttpSetup } from '@kbn/core-http-browser';
+import { euiThemeVars } from '@kbn/ui-theme';
+import { css } from '@emotion/react';
+import { PromptResponse } from '@kbn/elastic-assistant-common';
+import { QueryObserverResult } from '@tanstack/react-query';
+import { EmptyConvo } from './empty_convo';
+import { WelcomeSetup } from './welcome_setup';
+import { Conversation } from '../../..';
+import { UpgradeLicenseCallToAction } from '../upgrade_license_cta';
+import * as i18n from '../translations';
+interface Props {
+  allSystemPrompts: PromptResponse[];
+  comments: JSX.Element;
+  currentConversation: Conversation | undefined;
+  currentSystemPromptId: string | undefined;
+  handleOnConversationSelected: ({ cId, cTitle }: { cId: string; cTitle: string }) => Promise<void>;
+  handleOnSystemPromptSelectionChange: (systemPromptId?: string) => void;
+  isAssistantEnabled: boolean;
+  isSettingsModalVisible: boolean;
+  isWelcomeSetup: boolean;
+  refetchCurrentUserConversations: () => Promise<
+    QueryObserverResult<Record<string, Conversation>, unknown>
+  >;
+  http: HttpSetup;
+  setIsSettingsModalVisible: Dispatch<SetStateAction<boolean>>;
+}
+
+export const AssistantBody: FunctionComponent<Props> = ({
+  allSystemPrompts,
+  comments,
+  currentConversation,
+  currentSystemPromptId,
+  handleOnConversationSelected,
+  handleOnSystemPromptSelectionChange,
+  http,
+  isAssistantEnabled,
+  isSettingsModalVisible,
+  isWelcomeSetup,
+  refetchCurrentUserConversations,
+  setIsSettingsModalVisible,
+}) => {
+  const isNewConversation = useMemo(
+    () => currentConversation?.messages.length === 0,
+    [currentConversation?.messages.length]
+  );
+
+  const disclaimer = useMemo(
+    () =>
+      isNewConversation && (
+        <EuiText
+          data-test-subj="assistant-disclaimer"
+          textAlign="center"
+          color={euiThemeVars.euiColorMediumShade}
+          size="xs"
+          css={css`
+            margin: 0 ${euiThemeVars.euiSizeL} ${euiThemeVars.euiSizeM} ${euiThemeVars.euiSizeL};
+          `}
+        >
+          {i18n.DISCLAIMER}
+        </EuiText>
+      ),
+    [isNewConversation]
+  );
+
+  // Start Scrolling
+  const commentsContainerRef = useRef<HTMLDivElement | null>(null);
+
+  useEffect(() => {
+    const parent = commentsContainerRef.current?.parentElement;
+
+    if (!parent) {
+      return;
+    }
+    // when scrollHeight changes, parent is scrolled to bottom
+    parent.scrollTop = parent.scrollHeight;
+
+    (
+      commentsContainerRef.current?.childNodes[0].childNodes[0] as HTMLElement
+    ).lastElementChild?.scrollIntoView();
+  });
+  //  End Scrolling
+
+  if (!isAssistantEnabled) {
+    return <UpgradeLicenseCallToAction http={http} />;
+  }
+
+  return (
+    <EuiFlexGroup direction="column" justifyContent="spaceBetween">
+      <EuiFlexItem grow={false}>
+        {isWelcomeSetup ? (
+          <WelcomeSetup
+            currentConversation={currentConversation}
+            handleOnConversationSelected={handleOnConversationSelected}
+          />
+        ) : currentConversation?.messages.length === 0 ? (
+          <EmptyConvo
+            allSystemPrompts={allSystemPrompts}
+            currentConversation={currentConversation}
+            currentSystemPromptId={currentSystemPromptId}
+            handleOnSystemPromptSelectionChange={handleOnSystemPromptSelectionChange}
+            isSettingsModalVisible={isSettingsModalVisible}
+            refetchCurrentUserConversations={refetchCurrentUserConversations}
+            setIsSettingsModalVisible={setIsSettingsModalVisible}
+          />
+        ) : (
+          <EuiPanel
+            hasShadow={false}
+            panelRef={(element) => {
+              commentsContainerRef.current = (element?.parentElement as HTMLDivElement) || null;
+            }}
+          >
+            {comments}
+          </EuiPanel>
+        )}
+      </EuiFlexItem>
+      <EuiFlexItem grow={false}>{disclaimer}</EuiFlexItem>
+    </EuiFlexGroup>
+  );
+};

x-pack/packages/kbn-elastic-assistant/impl/assistant/assistant_body/welcome_setup.tsx

@@ -0,0 +1,60 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import React from 'react';
+import { EuiFlexGroup, EuiFlexItem, EuiPanel, EuiText } from '@elastic/eui';
+import { css } from '@emotion/react';
+import { Conversation } from '../../..';
+import { AssistantAnimatedIcon } from '../assistant_animated_icon';
+import { ConnectorSetup } from '../../connectorland/connector_setup';
+import * as i18n from '../translations';
+
+interface Props {
+  currentConversation: Conversation | undefined;
+  handleOnConversationSelected: ({ cId, cTitle }: { cId: string; cTitle: string }) => Promise<void>;
+}
+
+export const WelcomeSetup: React.FC<Props> = ({
+  handleOnConversationSelected,
+  currentConversation,
+}) => {
+  return (
+    <EuiFlexGroup alignItems="center" justifyContent="center">
+      <EuiFlexItem grow={false}>
+        <EuiPanel
+          hasShadow={false}
+          css={css`
+            max-width: 400px;
+            text-align: center;
+          `}
+        >
+          <EuiFlexGroup alignItems="center" justifyContent="center" direction="column">
+            <EuiFlexItem grow={false}>
+              <AssistantAnimatedIcon />
+            </EuiFlexItem>
+            <EuiFlexItem grow={false}>
+              <EuiText>
+                <h3>{i18n.WELCOME_SCREEN_TITLE}</h3>
+              </EuiText>
+            </EuiFlexItem>
+            <EuiFlexItem grow={false}>
+              <EuiText color="subdued">
+                <p>{i18n.WELCOME_SCREEN_DESCRIPTION}</p>
+              </EuiText>
+            </EuiFlexItem>
+            <EuiFlexItem grow={false} data-test-subj="connector-prompt">
+              <ConnectorSetup
+                conversation={currentConversation}
+                onConversationUpdate={handleOnConversationSelected}
+              />
+            </EuiFlexItem>
+          </EuiFlexGroup>
+        </EuiPanel>
+      </EuiFlexItem>
+    </EuiFlexGroup>
+  );
+};

x-pack/packages/kbn-elastic-assistant/impl/assistant/assistant_header/index.test.tsx

@@ -35,7 +35,7 @@ const testProps = {
   onChatCleared: jest.fn(),
   showAnonymizedValues: false,
   conversations: mockConversations,
-  refetchConversationsState: jest.fn(),
+  refetchCurrentUserConversations: jest.fn(),
   isAssistantEnabled: true,
   anonymizationFields: { total: 0, page: 1, perPage: 1000, data: [] },
   refetchAnonymizationFieldsResults: jest.fn(),

x-pack/packages/kbn-elastic-assistant/impl/assistant/assistant_header/index.tsx

@@ -20,6 +20,7 @@ import {
 import { css } from '@emotion/react';
 import { euiThemeVars } from '@kbn/ui-theme';
 import { isEmpty } from 'lodash';
+import { DataStreamApis } from '../use_data_stream_apis';
 import { Conversation } from '../../..';
 import { AssistantTitle } from '../assistant_title';
 import { ConnectorSelectorInline } from '../../connectorland/connector_selector_inline/connector_selector_inline';
@@ -43,7 +44,7 @@ interface OwnProps {
   onConversationSelected: ({ cId, cTitle }: { cId: string; cTitle: string }) => void;
   conversations: Record<string, Conversation>;
   conversationsLoaded: boolean;
-  refetchConversationsState: () => Promise<void>;
+  refetchCurrentUserConversations: DataStreamApis['refetchCurrentUserConversations'];
   onConversationCreate: () => Promise<void>;
   isAssistantEnabled: boolean;
   refetchPrompts?: (
@@ -72,7 +73,7 @@ export const AssistantHeader: React.FC<Props> = ({
   onConversationSelected,
   conversations,
   conversationsLoaded,
-  refetchConversationsState,
+  refetchCurrentUserConversations,
   onConversationCreate,
   isAssistantEnabled,
   refetchPrompts,
@@ -164,7 +165,7 @@ export const AssistantHeader: React.FC<Props> = ({
               onConversationSelected={onConversationSelected}
               conversations={conversations}
               conversationsLoaded={conversationsLoaded}
-              refetchConversationsState={refetchConversationsState}
+              refetchCurrentUserConversations={refetchCurrentUserConversations}
               refetchPrompts={refetchPrompts}
             />
           </EuiFlexItem>
@@ -199,7 +200,7 @@ export const AssistantHeader: React.FC<Props> = ({
             <AssistantTitle
               title={selectedConversation?.title}
               selectedConversation={selectedConversation}
-              refetchConversationsState={refetchConversationsState}
+              refetchCurrentUserConversations={refetchCurrentUserConversations}
             />
           </EuiFlexItem>
 

x-pack/packages/kbn-elastic-assistant/impl/assistant/assistant_overlay/index.tsx

@@ -38,9 +38,7 @@ export const UnifiedTimelineGlobalStyles = createGlobalStyle`
 
 export const AssistantOverlay = React.memo<Props>(({ currentUserAvatar }) => {
   const [isModalVisible, setIsModalVisible] = useState(false);
-  const [conversationTitle, setConversationTitle] = useState<string | undefined>(
-    WELCOME_CONVERSATION_TITLE
-  );
+  const [conversationTitle, setConversationTitle] = useState<string>(WELCOME_CONVERSATION_TITLE);
   const [promptContextId, setPromptContextId] = useState<string | undefined>();
   const { assistantTelemetry, setShowAssistantOverlay, getLastConversationId } =
     useAssistantContext();

x-pack/packages/kbn-elastic-assistant/impl/assistant/assistant_title/index.test.tsx

@@ -15,7 +15,7 @@ const testProps = {
   docLinks: { ELASTIC_WEBSITE_URL: 'https://www.elastic.co/', DOC_LINK_VERSION: '7.15' },
   selectedConversation: undefined,
   onChange: jest.fn(),
-  refetchConversationsState: jest.fn(),
+  refetchCurrentUserConversations: jest.fn(),
 };
 
 describe('AssistantTitle', () => {

x-pack/packages/kbn-elastic-assistant/impl/assistant/assistant_title/index.tsx

@@ -8,6 +8,7 @@
 import React, { useCallback, useEffect, useState } from 'react';
 import { EuiFlexGroup, EuiFlexItem, EuiInlineEditTitle } from '@elastic/eui';
 import { css } from '@emotion/react';
+import { DataStreamApis } from '../use_data_stream_apis';
 import type { Conversation } from '../../..';
 import { AssistantAvatar } from '../assistant_avatar/assistant_avatar';
 import { useConversation } from '../use_conversation';
@@ -20,8 +21,8 @@ import { NEW_CHAT } from '../conversations/conversation_sidepanel/translations';
 export const AssistantTitle: React.FC<{
   title?: string;
   selectedConversation: Conversation | undefined;
-  refetchConversationsState: () => Promise<void>;
-}> = ({ title, selectedConversation, refetchConversationsState }) => {
+  refetchCurrentUserConversations: DataStreamApis['refetchCurrentUserConversations'];
+}> = ({ title, selectedConversation, refetchCurrentUserConversations }) => {
   const [newTitle, setNewTitle] = useState(title);
   const [newTitleError, setNewTitleError] = useState(false);
   const { updateConversationTitle } = useConversation();
@@ -35,10 +36,10 @@ export const AssistantTitle: React.FC<{
           conversationId: selectedConversation.id,
           updatedTitle,
         });
-        await refetchConversationsState();
+        await refetchCurrentUserConversations();
       }
     },
-    [refetchConversationsState, selectedConversation, updateConversationTitle]
+    [refetchCurrentUserConversations, selectedConversation, updateConversationTitle]
   );
 
   useEffect(() => {