diff --git a/x-pack/packages/kbn-elastic-assistant-common/impl/mock/get_anonymized_value/index.ts b/x-pack/packages/kbn-elastic-assistant-common/impl/mock/get_anonymized_value/index.ts index 3822c736b670e..256f9776c4563 100644 --- a/x-pack/packages/kbn-elastic-assistant-common/impl/mock/get_anonymized_value/index.ts +++ b/x-pack/packages/kbn-elastic-assistant-common/impl/mock/get_anonymized_value/index.ts @@ -5,13 +5,6 @@ * 2.0. */ -import { Replacements } from '../../schemas'; - /** This mock returns the reverse of `value` */ -export const mockGetAnonymizedValue = ({ - currentReplacements, - rawValue, -}: { - currentReplacements: Replacements | undefined; - rawValue: string; -}): string => rawValue.split('').reverse().join(''); +export const mockGetAnonymizedValue = ({ rawValue }: { rawValue: string }): string => + rawValue.split('').reverse().join(''); diff --git a/x-pack/packages/kbn-elastic-assistant/impl/assistant/assistant_header/assistant_header_flyout.tsx b/x-pack/packages/kbn-elastic-assistant/impl/assistant/assistant_header/assistant_header_flyout.tsx deleted file mode 100644 index 5725d983eff33..0000000000000 --- a/x-pack/packages/kbn-elastic-assistant/impl/assistant/assistant_header/assistant_header_flyout.tsx +++ /dev/null @@ -1,284 +0,0 @@ -/* - * 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, { useState, useMemo, useCallback } from 'react'; -import { QueryObserverResult, RefetchOptions, RefetchQueryFilters } from '@tanstack/react-query'; -import { - EuiFlexGroup, - EuiFlexItem, - EuiPopover, - EuiContextMenu, - EuiButtonIcon, - EuiPanel, - EuiConfirmModal, - EuiToolTip, -} from '@elastic/eui'; -import { css } from '@emotion/react'; -import { euiThemeVars } from '@kbn/ui-theme'; -import { DocLinksStart } from '@kbn/core-doc-links-browser'; -import { isEmpty } from 'lodash'; -import { Conversation } from '../../..'; -import { AssistantTitle } from '../assistant_title'; -import { ConnectorSelectorInline } from '../../connectorland/connector_selector_inline/connector_selector_inline'; -import { FlyoutNavigation } from '../assistant_overlay/flyout_navigation'; -import { AssistantSettingsButton } from '../settings/assistant_settings_button'; -import * as i18n from './translations'; -import { AIConnector } from '../../connectorland/connector_selector'; - -interface OwnProps { - selectedConversation: Conversation | undefined; - defaultConnector?: AIConnector; - docLinks: Omit; - isDisabled: boolean; - isSettingsModalVisible: boolean; - onToggleShowAnonymizedValues: () => void; - setIsSettingsModalVisible: React.Dispatch>; - showAnonymizedValues: boolean; - onChatCleared: () => void; - onCloseFlyout?: () => void; - chatHistoryVisible?: boolean; - setChatHistoryVisible?: React.Dispatch>; - onConversationSelected: ({ cId, cTitle }: { cId: string; cTitle: string }) => void; - conversations: Record; - conversationsLoaded: boolean; - refetchConversationsState: () => Promise; - onConversationCreate: () => Promise; - isAssistantEnabled: boolean; - refetchPrompts?: ( - options?: RefetchOptions & RefetchQueryFilters - ) => Promise>; -} - -type Props = OwnProps; -/** - * Renders the header of the Elastic AI Assistant. - * Provide a user interface for selecting and managing conversations, - * toggling the display of anonymized values, and accessing the assistant settings. - */ -export const AssistantHeaderFlyout: React.FC = ({ - selectedConversation, - defaultConnector, - docLinks, - isDisabled, - isSettingsModalVisible, - onToggleShowAnonymizedValues, - setIsSettingsModalVisible, - showAnonymizedValues, - onChatCleared, - chatHistoryVisible, - setChatHistoryVisible, - onCloseFlyout, - onConversationSelected, - conversations, - conversationsLoaded, - refetchConversationsState, - onConversationCreate, - isAssistantEnabled, - refetchPrompts, -}) => { - const showAnonymizedValuesChecked = useMemo( - () => - selectedConversation?.replacements != null && - Object.keys(selectedConversation?.replacements).length > 0 && - showAnonymizedValues, - [selectedConversation?.replacements, showAnonymizedValues] - ); - - const selectedConnectorId = useMemo( - () => selectedConversation?.apiConfig?.connectorId, - [selectedConversation?.apiConfig?.connectorId] - ); - - const [isPopoverOpen, setPopover] = useState(false); - - const onButtonClick = useCallback(() => { - setPopover(!isPopoverOpen); - }, [isPopoverOpen]); - - const closePopover = useCallback(() => { - setPopover(false); - }, []); - - const [isResetConversationModalVisible, setIsResetConversationModalVisible] = useState(false); - - const closeDestroyModal = useCallback(() => setIsResetConversationModalVisible(false), []); - const showDestroyModal = useCallback(() => setIsResetConversationModalVisible(true), []); - - const onConversationChange = useCallback( - (updatedConversation) => { - onConversationSelected({ - cId: updatedConversation.id, - cTitle: updatedConversation.title, - }); - }, - [onConversationSelected] - ); - - const panels = useMemo( - () => [ - { - id: 0, - items: [ - { - name: i18n.RESET_CONVERSATION, - css: css` - color: ${euiThemeVars.euiColorDanger}; - `, - onClick: showDestroyModal, - icon: 'refresh', - 'data-test-subj': 'clear-chat', - }, - ], - }, - ], - [showDestroyModal] - ); - - const handleReset = useCallback(() => { - onChatCleared(); - closeDestroyModal(); - closePopover(); - }, [onChatCleared, closeDestroyModal, closePopover]); - - return ( - <> - - - - - - - {onCloseFlyout && ( - - - - )} - - - - - - - - - - - - - - - - - - - - - } - isOpen={isPopoverOpen} - closePopover={closePopover} - panelPaddingSize="none" - anchorPosition="downLeft" - > - - - - - - - - {isResetConversationModalVisible && ( - -

{i18n.CLEAR_CHAT_CONFIRMATION}

-
- )} - - ); -}; diff --git a/x-pack/packages/kbn-elastic-assistant/impl/assistant/assistant_header/index.test.tsx b/x-pack/packages/kbn-elastic-assistant/impl/assistant/assistant_header/index.test.tsx index f806f5d1ef7c6..b4f4bd2c25384 100644 --- a/x-pack/packages/kbn-elastic-assistant/impl/assistant/assistant_header/index.test.tsx +++ b/x-pack/packages/kbn-elastic-assistant/impl/assistant/assistant_header/index.test.tsx @@ -20,7 +20,7 @@ const mockConversations = { }; const testProps = { conversationsLoaded: true, - currentConversation: welcomeConvo, + selectedConversation: welcomeConvo, title: 'Test Title', docLinks: { ELASTIC_WEBSITE_URL: 'https://www.elastic.co/', @@ -30,12 +30,13 @@ const testProps = { isSettingsModalVisible: false, onConversationSelected, onToggleShowAnonymizedValues: jest.fn(), - selectedConversationId: emptyWelcomeConvo.id, setIsSettingsModalVisible: jest.fn(), - onConversationDeleted: jest.fn(), + onConversationCreate: jest.fn(), + onChatCleared: jest.fn(), showAnonymizedValues: false, conversations: mockConversations, refetchConversationsState: jest.fn(), + isAssistantEnabled: true, anonymizationFields: { total: 0, page: 1, perPage: 1000, data: [] }, refetchAnonymizationFieldsResults: jest.fn(), allPrompts: [], @@ -69,53 +70,64 @@ describe('AssistantHeader', () => { beforeEach(() => { jest.clearAllMocks(); }); - it('showAnonymizedValues is not checked when currentConversation.replacements is null', () => { + it('showAnonymizedValues is not checked when selectedConversation.replacements is null', () => { const { getByText, getByTestId } = render(, { wrapper: TestProviders, }); - expect(getByText('Test Title')).toBeInTheDocument(); - expect(getByTestId('showAnonymizedValues')).toHaveAttribute('aria-checked', 'false'); + expect(getByText(welcomeConvo.title)).toBeInTheDocument(); + expect(getByTestId('showAnonymizedValues').firstChild).toHaveAttribute( + 'data-euiicon-type', + 'eyeClosed' + ); }); - it('showAnonymizedValues is not checked when currentConversation.replacements is empty', () => { + it('showAnonymizedValues is not checked when selectedConversation.replacements is empty', () => { const { getByText, getByTestId } = render( , { wrapper: TestProviders, } ); - expect(getByText('Test Title')).toBeInTheDocument(); - expect(getByTestId('showAnonymizedValues')).toHaveAttribute('aria-checked', 'false'); + expect(getByText(welcomeConvo.title)).toBeInTheDocument(); + expect(getByTestId('showAnonymizedValues').firstChild).toHaveAttribute( + 'data-euiicon-type', + 'eyeClosed' + ); }); - it('showAnonymizedValues is not checked when currentConversation.replacements has values and showAnonymizedValues is false', () => { + it('showAnonymizedValues is not checked when selectedConversation.replacements has values and showAnonymizedValues is false', () => { const { getByTestId } = render( - , + , { wrapper: TestProviders, } ); - expect(getByTestId('showAnonymizedValues')).toHaveAttribute('aria-checked', 'false'); + expect(getByTestId('showAnonymizedValues').firstChild).toHaveAttribute( + 'data-euiicon-type', + 'eyeClosed' + ); }); - it('showAnonymizedValues is checked when currentConversation.replacements has values and showAnonymizedValues is true', () => { + it('showAnonymizedValues is checked when selectedConversation.replacements has values and showAnonymizedValues is true', () => { const { getByTestId } = render( - , + , { wrapper: TestProviders, } ); - expect(getByTestId('showAnonymizedValues')).toHaveAttribute('aria-checked', 'true'); + expect(getByTestId('showAnonymizedValues').firstChild).toHaveAttribute( + 'data-euiicon-type', + 'eye' + ); }); it('Conversation is updated when connector change occurs', async () => { const { getByTestId } = render(, { wrapper: TestProviders, }); - fireEvent.click(getByTestId('connectorSelectorPlaceholderButton')); fireEvent.click(getByTestId('connector-selector')); await act(async () => { diff --git a/x-pack/packages/kbn-elastic-assistant/impl/assistant/assistant_header/index.tsx b/x-pack/packages/kbn-elastic-assistant/impl/assistant/assistant_header/index.tsx index 7507c14648614..30e620ea38873 100644 --- a/x-pack/packages/kbn-elastic-assistant/impl/assistant/assistant_header/index.tsx +++ b/x-pack/packages/kbn-elastic-assistant/impl/assistant/assistant_header/index.tsx @@ -5,44 +5,47 @@ * 2.0. */ -import React, { useCallback, useMemo } from 'react'; +import React, { useState, useMemo, useCallback } from 'react'; +import { QueryObserverResult, RefetchOptions, RefetchQueryFilters } from '@tanstack/react-query'; import { EuiFlexGroup, EuiFlexItem, - EuiHorizontalRule, - EuiSpacer, - EuiSwitch, + EuiPopover, + EuiContextMenu, + EuiButtonIcon, + EuiPanel, + EuiConfirmModal, EuiToolTip, } from '@elastic/eui'; -import { QueryObserverResult, RefetchOptions, RefetchQueryFilters } from '@tanstack/react-query'; import { css } from '@emotion/react'; -import { DocLinksStart } from '@kbn/core-doc-links-browser'; +import { euiThemeVars } from '@kbn/ui-theme'; import { isEmpty } from 'lodash'; -import { PromptResponse } from '@kbn/elastic-assistant-common'; -import { AIConnector } from '../../connectorland/connector_selector'; import { Conversation } from '../../..'; import { AssistantTitle } from '../assistant_title'; -import { ConversationSelector } from '../conversations/conversation_selector'; +import { ConnectorSelectorInline } from '../../connectorland/connector_selector_inline/connector_selector_inline'; +import { FlyoutNavigation } from '../assistant_overlay/flyout_navigation'; import { AssistantSettingsButton } from '../settings/assistant_settings_button'; import * as i18n from './translations'; +import { AIConnector } from '../../connectorland/connector_selector'; interface OwnProps { - currentConversation?: Conversation; + selectedConversation: Conversation | undefined; defaultConnector?: AIConnector; - docLinks: Omit; isDisabled: boolean; isSettingsModalVisible: boolean; - onConversationSelected: ({ cId, cTitle }: { cId: string; cTitle: string }) => void; - onConversationDeleted: (conversationId: string) => void; onToggleShowAnonymizedValues: () => void; setIsSettingsModalVisible: React.Dispatch>; - shouldDisableKeyboardShortcut?: () => boolean; showAnonymizedValues: boolean; - title: string; + onChatCleared: () => void; + onCloseFlyout?: () => void; + chatHistoryVisible?: boolean; + setChatHistoryVisible?: React.Dispatch>; + onConversationSelected: ({ cId, cTitle }: { cId: string; cTitle: string }) => void; conversations: Record; conversationsLoaded: boolean; refetchConversationsState: () => Promise; - allPrompts: PromptResponse[]; + onConversationCreate: () => Promise; + isAssistantEnabled: boolean; refetchPrompts?: ( options?: RefetchOptions & RefetchQueryFilters ) => Promise>; @@ -55,31 +58,53 @@ type Props = OwnProps; * toggling the display of anonymized values, and accessing the assistant settings. */ export const AssistantHeader: React.FC = ({ - currentConversation, + selectedConversation, defaultConnector, - docLinks, isDisabled, isSettingsModalVisible, - onConversationSelected, - onConversationDeleted, onToggleShowAnonymizedValues, setIsSettingsModalVisible, - shouldDisableKeyboardShortcut, showAnonymizedValues, - title, + onChatCleared, + chatHistoryVisible, + setChatHistoryVisible, + onCloseFlyout, + onConversationSelected, conversations, conversationsLoaded, refetchConversationsState, - allPrompts, + onConversationCreate, + isAssistantEnabled, refetchPrompts, }) => { const showAnonymizedValuesChecked = useMemo( () => - currentConversation?.replacements != null && - Object.keys(currentConversation?.replacements).length > 0 && + selectedConversation?.replacements != null && + Object.keys(selectedConversation?.replacements).length > 0 && showAnonymizedValues, - [currentConversation?.replacements, showAnonymizedValues] + [selectedConversation?.replacements, showAnonymizedValues] ); + + const selectedConnectorId = useMemo( + () => selectedConversation?.apiConfig?.connectorId, + [selectedConversation?.apiConfig?.connectorId] + ); + + const [isPopoverOpen, setPopover] = useState(false); + + const onButtonClick = useCallback(() => { + setPopover(!isPopoverOpen); + }, [isPopoverOpen]); + + const closePopover = useCallback(() => { + setPopover(false); + }, []); + + const [isResetConversationModalVisible, setIsResetConversationModalVisible] = useState(false); + + const closeDestroyModal = useCallback(() => setIsResetConversationModalVisible(false), []); + const showDestroyModal = useCallback(() => setIsResetConversationModalVisible(true), []); + const onConversationChange = useCallback( (updatedConversation) => { onConversationSelected({ @@ -89,90 +114,163 @@ export const AssistantHeader: React.FC = ({ }, [onConversationSelected] ); - const selectedConversationId = useMemo( - () => - !isEmpty(currentConversation?.id) ? currentConversation?.id : currentConversation?.title, - [currentConversation?.id, currentConversation?.title] + + const panels = useMemo( + () => [ + { + id: 0, + items: [ + { + name: i18n.RESET_CONVERSATION, + css: css` + color: ${euiThemeVars.euiColorDanger}; + `, + onClick: showDestroyModal, + icon: 'refresh', + 'data-test-subj': 'clear-chat', + }, + ], + }, + ], + [showDestroyModal] ); + const handleReset = useCallback(() => { + onChatCleared(); + closeDestroyModal(); + closePopover(); + }, [onChatCleared, closeDestroyModal, closePopover]); + return ( <> - + + + + + + {onCloseFlyout && ( + + + + )} + + + - - - - - - + + + + - <> - - + + + + + - - - - + + + } + isOpen={isPopoverOpen} + closePopover={closePopover} + panelPaddingSize="none" + anchorPosition="downLeft" + > + + - - - - + + + + {isResetConversationModalVisible && ( + +

{i18n.CLEAR_CHAT_CONFIRMATION}

+
+ )} ); }; diff --git a/x-pack/packages/kbn-elastic-assistant/impl/assistant/assistant_overlay/flyout_navigation.tsx b/x-pack/packages/kbn-elastic-assistant/impl/assistant/assistant_overlay/flyout_navigation.tsx index 85d7360c2870a..3f7c3f7ea1bcb 100644 --- a/x-pack/packages/kbn-elastic-assistant/impl/assistant/assistant_overlay/flyout_navigation.tsx +++ b/x-pack/packages/kbn-elastic-assistant/impl/assistant/assistant_overlay/flyout_navigation.tsx @@ -48,6 +48,7 @@ export const FlyoutNavigation = memo( onClick={onToggle} iconType={isExpanded ? 'arrowEnd' : 'arrowStart'} size="xs" + data-test-subj="aiAssistantFlyoutNavigationToggle" aria-label={ isExpanded ? i18n.translate( diff --git a/x-pack/packages/kbn-elastic-assistant/impl/assistant/assistant_overlay/index.test.tsx b/x-pack/packages/kbn-elastic-assistant/impl/assistant/assistant_overlay/index.test.tsx index 679901bc02748..9e6a9164607a3 100644 --- a/x-pack/packages/kbn-elastic-assistant/impl/assistant/assistant_overlay/index.test.tsx +++ b/x-pack/packages/kbn-elastic-assistant/impl/assistant/assistant_overlay/index.test.tsx @@ -24,31 +24,33 @@ describe('AssistantOverlay', () => { it('renders when isAssistantEnabled prop is true and keyboard shortcut is pressed', () => { const { getByTestId } = render( - + ); fireEvent.keyDown(document, { key: ';', ctrlKey: true }); - const modal = getByTestId('ai-assistant-modal'); - expect(modal).toBeInTheDocument(); + const flyout = getByTestId('ai-assistant-flyout'); + expect(flyout).toBeInTheDocument(); }); - it('modal closes when close button is clicked', () => { - const { getByLabelText, queryByTestId } = render( + it('flyout closes when close button is clicked', () => { + const { queryByTestId } = render( - + ); fireEvent.keyDown(document, { key: ';', ctrlKey: true }); - const closeButton = getByLabelText('Closes this modal window'); - fireEvent.click(closeButton); - const modal = queryByTestId('ai-assistant-modal'); - expect(modal).not.toBeInTheDocument(); + const closeButton = queryByTestId('euiFlyoutCloseButton'); + if (closeButton) { + fireEvent.click(closeButton); + } + const flyout = queryByTestId('ai-assistant-flyout'); + expect(flyout).not.toBeInTheDocument(); }); - it('Assistant invoked from shortcut tracking happens on modal open only (not close)', () => { + it('Assistant invoked from shortcut tracking happens on flyout open only (not close)', () => { render( - + ); fireEvent.keyDown(document, { key: ';', ctrlKey: true }); @@ -61,26 +63,26 @@ describe('AssistantOverlay', () => { expect(reportAssistantInvoked).toHaveBeenCalledTimes(1); }); - it('modal closes when shortcut is pressed and modal is already open', () => { + it('flyout closes when shortcut is pressed and flyout is already open', () => { const { queryByTestId } = render( - + ); fireEvent.keyDown(document, { key: ';', ctrlKey: true }); fireEvent.keyDown(document, { key: ';', ctrlKey: true }); - const modal = queryByTestId('ai-assistant-modal'); - expect(modal).not.toBeInTheDocument(); + const flyout = queryByTestId('ai-assistant-flyout'); + expect(flyout).not.toBeInTheDocument(); }); - it('modal does not open when incorrect shortcut is pressed', () => { + it('flyout does not open when incorrect shortcut is pressed', () => { const { queryByTestId } = render( - + ); fireEvent.keyDown(document, { key: 'a', ctrlKey: true }); - const modal = queryByTestId('ai-assistant-modal'); - expect(modal).not.toBeInTheDocument(); + const flyout = queryByTestId('ai-assistant-flyout'); + expect(flyout).not.toBeInTheDocument(); }); }); diff --git a/x-pack/packages/kbn-elastic-assistant/impl/assistant/assistant_overlay/index.tsx b/x-pack/packages/kbn-elastic-assistant/impl/assistant/assistant_overlay/index.tsx index 44907d8b1fd00..689f60f0a52d9 100644 --- a/x-pack/packages/kbn-elastic-assistant/impl/assistant/assistant_overlay/index.tsx +++ b/x-pack/packages/kbn-elastic-assistant/impl/assistant/assistant_overlay/index.tsx @@ -6,12 +6,12 @@ */ import React, { useCallback, useEffect, useRef, useState } from 'react'; -import { EuiModal, EuiFlyoutResizable, useEuiTheme } from '@elastic/eui'; +import { EuiFlyoutResizable } from '@elastic/eui'; import useEvent from 'react-use/lib/useEvent'; -// eslint-disable-next-line @kbn/eslint/module_migration -import styled from 'styled-components'; import { css } from '@emotion/react'; +// eslint-disable-next-line @kbn/eslint/module_migration +import { createGlobalStyle } from 'styled-components'; import { ShowAssistantOverlayProps, useAssistantContext, @@ -22,23 +22,21 @@ import { WELCOME_CONVERSATION_TITLE } from '../use_conversation/translations'; const isMac = navigator.platform.toLowerCase().indexOf('mac') >= 0; -const StyledEuiModal = styled(EuiModal)` - ${({ theme }) => `margin-top: ${theme.eui.euiSizeXXL};`} - min-width: 95vw; - min-height: 25vh; -`; - /** * Modal container for Elastic AI Assistant conversations, receiving the page contents as context, plus whatever * component currently has focus and any specific context it may provide through the SAssInterface. */ export interface Props { - isFlyoutMode: boolean; currentUserAvatar?: UserAvatar; } -export const AssistantOverlay = React.memo(({ isFlyoutMode, currentUserAvatar }) => { - const { euiTheme } = useEuiTheme(); +export const UnifiedTimelineGlobalStyles = createGlobalStyle` + body:has(.timeline-portal-overlay-mask) .euiOverlayMask { + z-index: 1003 !important; + } +`; + +export const AssistantOverlay = React.memo(({ currentUserAvatar }) => { const [isModalVisible, setIsModalVisible] = useState(false); const [conversationTitle, setConversationTitle] = useState( WELCOME_CONVERSATION_TITLE @@ -130,8 +128,8 @@ export const AssistantOverlay = React.memo(({ isFlyoutMode, currentUserAv if (!isModalVisible) return null; - if (isFlyoutMode) { - return ( + return ( + <> (({ isFlyoutMode, currentUserAv data-test-subj="ai-assistant-flyout" paddingSize="none" hideCloseButton - // EUI TODO: This z-index override of EuiOverlayMask is a workaround, and ideally should be resolved with a cleaner UI/UX flow long-term - maskProps={{ style: `z-index: ${(euiTheme.levels.flyout as number) + 3}` }} // we need this flyout to be above the timeline flyout (which has a z-index of 1002) > - ); - } - - return ( - <> - {isModalVisible && ( - - - - )} + ); }); diff --git a/x-pack/packages/kbn-elastic-assistant/impl/assistant/assistant_title/index.test.tsx b/x-pack/packages/kbn-elastic-assistant/impl/assistant/assistant_title/index.test.tsx index ee4a998a1439f..d9dd84cb0b51d 100644 --- a/x-pack/packages/kbn-elastic-assistant/impl/assistant/assistant_title/index.test.tsx +++ b/x-pack/packages/kbn-elastic-assistant/impl/assistant/assistant_title/index.test.tsx @@ -6,7 +6,7 @@ */ import React from 'react'; -import { render, fireEvent } from '@testing-library/react'; +import { render } from '@testing-library/react'; import { AssistantTitle } from '.'; import { TestProviders } from '../../mock/test_providers/test_providers'; @@ -14,7 +14,6 @@ const testProps = { title: 'Test Title', docLinks: { ELASTIC_WEBSITE_URL: 'https://www.elastic.co/', DOC_LINK_VERSION: '7.15' }, selectedConversation: undefined, - isFlyoutMode: false, onChange: jest.fn(), refetchConversationsState: jest.fn(), }; @@ -28,22 +27,4 @@ describe('AssistantTitle', () => { ); expect(getByText('Test Title')).toBeInTheDocument(); }); - - it('clicking on the popover button opens the popover with the correct link', () => { - const { getByTestId, queryByTestId } = render( - - - , - { - wrapper: TestProviders, - } - ); - expect(queryByTestId('tooltipContent')).not.toBeInTheDocument(); - fireEvent.click(getByTestId('tooltipIcon')); - expect(getByTestId('tooltipContent')).toBeInTheDocument(); - expect(getByTestId('externalDocumentationLink')).toHaveAttribute( - 'href', - 'https://www.elastic.co/guide/en/security/7.15/security-assistant.html' - ); - }); }); diff --git a/x-pack/packages/kbn-elastic-assistant/impl/assistant/assistant_title/index.tsx b/x-pack/packages/kbn-elastic-assistant/impl/assistant/assistant_title/index.tsx index 7e9934afcaa90..2090a92645c65 100644 --- a/x-pack/packages/kbn-elastic-assistant/impl/assistant/assistant_title/index.tsx +++ b/x-pack/packages/kbn-elastic-assistant/impl/assistant/assistant_title/index.tsx @@ -5,24 +5,10 @@ * 2.0. */ -import React, { useCallback, useEffect, useMemo, useState } from 'react'; -import { - EuiButtonIcon, - EuiFlexGroup, - EuiFlexItem, - EuiInlineEditTitle, - EuiLink, - EuiModalHeaderTitle, - EuiPopover, - EuiText, - EuiTitle, -} from '@elastic/eui'; -import type { DocLinksStart } from '@kbn/core-doc-links-browser'; -import { FormattedMessage } from '@kbn/i18n-react'; +import React, { useCallback, useEffect, useState } from 'react'; +import { EuiFlexGroup, EuiFlexItem, EuiInlineEditTitle } from '@elastic/eui'; import { css } from '@emotion/react'; -import * as i18n from '../translations'; import type { Conversation } from '../../..'; -import { ConnectorSelectorInline } from '../../connectorland/connector_selector_inline/connector_selector_inline'; import { AssistantAvatar } from '../assistant_avatar/assistant_avatar'; import { useConversation } from '../use_conversation'; import { NEW_CHAT } from '../conversations/conversation_sidepanel/translations'; @@ -32,63 +18,14 @@ import { NEW_CHAT } from '../conversations/conversation_sidepanel/translations'; * information about the assistant feature and access to documentation. */ export const AssistantTitle: React.FC<{ - isDisabled?: boolean; title?: string; - docLinks: Omit; selectedConversation: Conversation | undefined; - isFlyoutMode: boolean; - onChange: (updatedConversation: Conversation) => void; refetchConversationsState: () => Promise; -}> = ({ - isDisabled = false, - title, - docLinks, - selectedConversation, - isFlyoutMode, - onChange, - refetchConversationsState, -}) => { +}> = ({ title, selectedConversation, refetchConversationsState }) => { const [newTitle, setNewTitle] = useState(title); const [newTitleError, setNewTitleError] = useState(false); const { updateConversationTitle } = useConversation(); - const selectedConnectorId = selectedConversation?.apiConfig?.connectorId; - - const { ELASTIC_WEBSITE_URL, DOC_LINK_VERSION } = docLinks; - const url = `${ELASTIC_WEBSITE_URL}guide/en/security/${DOC_LINK_VERSION}/security-assistant.html`; - - const documentationLink = useMemo( - () => ( - - {i18n.DOCUMENTATION} - - ), - [url] - ); - - const content = useMemo( - () => ( - - ), - [documentationLink] - ); - - const [isPopoverOpen, setIsPopoverOpen] = useState(false); - const onButtonClick = useCallback(() => setIsPopoverOpen((isOpen: boolean) => !isOpen), []); - const closePopover = useCallback(() => setIsPopoverOpen(false), []); - const handleUpdateTitle = useCallback( async (updatedTitle: string) => { setNewTitleError(false); @@ -109,108 +46,33 @@ export const AssistantTitle: React.FC<{ setNewTitle(title); }, [title]); - if (isFlyoutMode) { - return ( - - - - - - setNewTitle(e.currentTarget.nodeValue || '')} - onCancel={() => setNewTitle(title)} - onSave={handleUpdateTitle} - editModeProps={{ - formRowProps: { - fullWidth: true, - }, - }} - /> - - - ); - } - return ( - - - - - - - - - - - -

{title}

-
-
- - - } - isOpen={isPopoverOpen} - closePopover={closePopover} - anchorPosition="rightUp" - > - - -

{content}

-
-
-
-
-
-
- {!isFlyoutMode && ( - - - - )} -
-
-
-
+ + + + + + setNewTitle(e.currentTarget.nodeValue || '')} + onCancel={() => setNewTitle(title)} + onSave={handleUpdateTitle} + editModeProps={{ + formRowProps: { + fullWidth: true, + }, + }} + /> + + ); }; diff --git a/x-pack/packages/kbn-elastic-assistant/impl/assistant/chat_actions/index.test.tsx b/x-pack/packages/kbn-elastic-assistant/impl/assistant/chat_actions/index.test.tsx index 36936c7565112..7fbd7e1a03366 100644 --- a/x-pack/packages/kbn-elastic-assistant/impl/assistant/chat_actions/index.test.tsx +++ b/x-pack/packages/kbn-elastic-assistant/impl/assistant/chat_actions/index.test.tsx @@ -9,14 +9,11 @@ import React from 'react'; import { render, fireEvent, within } from '@testing-library/react'; import { ChatActions } from '.'; -const onChatCleared = jest.fn(); const onSendMessage = jest.fn(); const testProps = { isDisabled: false, isLoading: false, - onChatCleared, onSendMessage, - isFlyoutMode: false, promptValue: 'prompt', }; @@ -26,16 +23,9 @@ describe('ChatActions', () => { }); it('the component renders with all props', () => { const { getByTestId } = render(); - expect(getByTestId('clear-chat')).toHaveAttribute('aria-label', 'Clear chat'); expect(getByTestId('submit-chat')).toHaveAttribute('aria-label', 'Submit message'); }); - it('onChatCleared function is called when clear chat button is clicked', () => { - const { getByTestId } = render(); - fireEvent.click(getByTestId('clear-chat')); - expect(onChatCleared).toHaveBeenCalled(); - }); - it('onSendMessage function is called when send message button is clicked', () => { const { getByTestId } = render(); @@ -49,7 +39,6 @@ describe('ChatActions', () => { isDisabled: true, }; const { getByTestId } = render(); - expect(getByTestId('clear-chat')).toBeDisabled(); expect(getByTestId('submit-chat')).toBeDisabled(); }); diff --git a/x-pack/packages/kbn-elastic-assistant/impl/assistant/chat_actions/index.tsx b/x-pack/packages/kbn-elastic-assistant/impl/assistant/chat_actions/index.tsx index e7ff0922b30ae..ba980356351fd 100644 --- a/x-pack/packages/kbn-elastic-assistant/impl/assistant/chat_actions/index.tsx +++ b/x-pack/packages/kbn-elastic-assistant/impl/assistant/chat_actions/index.tsx @@ -7,14 +7,12 @@ import React, { useCallback, useRef } from 'react'; import { EuiButtonIcon, EuiFlexGroup, EuiFlexItem, EuiToolTip } from '@elastic/eui'; -import { CLEAR_CHAT, SUBMIT_MESSAGE } from '../translations'; +import { SUBMIT_MESSAGE } from '../translations'; interface OwnProps { isDisabled: boolean; isLoading: boolean; - isFlyoutMode: boolean; promptValue?: string; - onChatCleared: () => void; onSendMessage: () => void; } @@ -26,9 +24,7 @@ type Props = OwnProps; export const ChatActions: React.FC = ({ isDisabled, isLoading, - onChatCleared, onSendMessage, - isFlyoutMode, promptValue, }) => { const submitTooltipRef = useRef(null); @@ -39,21 +35,6 @@ export const ChatActions: React.FC = ({ return ( - {!isFlyoutMode && ( - - - - - - )} = ({ aria-label={SUBMIT_MESSAGE} data-test-subj="submit-chat" color="primary" - display={isFlyoutMode && promptValue?.length ? 'fill' : 'base'} - size={isFlyoutMode ? 'm' : 'xs'} - iconType={isFlyoutMode ? 'kqlFunction' : 'returnKey'} + display={promptValue?.length ? 'fill' : 'base'} + size={'m'} + iconType={'kqlFunction'} isDisabled={isDisabled || !promptValue?.length} isLoading={isLoading} onClick={onSendMessage} diff --git a/x-pack/packages/kbn-elastic-assistant/impl/assistant/chat_send/index.test.tsx b/x-pack/packages/kbn-elastic-assistant/impl/assistant/chat_send/index.test.tsx index ab7b942476f81..99f30cde68a82 100644 --- a/x-pack/packages/kbn-elastic-assistant/impl/assistant/chat_send/index.test.tsx +++ b/x-pack/packages/kbn-elastic-assistant/impl/assistant/chat_send/index.test.tsx @@ -12,12 +12,10 @@ import { TestProviders } from '../../mock/test_providers/test_providers'; jest.mock('./use_chat_send'); -const handleOnChatCleared = jest.fn(); const handlePromptChange = jest.fn(); const handleSendMessage = jest.fn(); const handleRegenerateResponse = jest.fn(); const testProps: Props = { - handleOnChatCleared, handlePromptChange, handleSendMessage, handleRegenerateResponse, @@ -25,7 +23,6 @@ const testProps: Props = { isDisabled: false, shouldRefocusPrompt: false, userPrompt: '', - isFlyoutMode: false, }; describe('ChatSend', () => { beforeEach(() => { diff --git a/x-pack/packages/kbn-elastic-assistant/impl/assistant/chat_send/index.tsx b/x-pack/packages/kbn-elastic-assistant/impl/assistant/chat_send/index.tsx index 880d4d5f9f88f..c292a70252a03 100644 --- a/x-pack/packages/kbn-elastic-assistant/impl/assistant/chat_send/index.tsx +++ b/x-pack/packages/kbn-elastic-assistant/impl/assistant/chat_send/index.tsx @@ -14,11 +14,10 @@ import { ChatActions } from '../chat_actions'; import { PromptTextArea } from '../prompt_textarea'; import { useAutosizeTextArea } from './use_autosize_textarea'; -export interface Props extends Omit { +export interface Props extends Omit { isDisabled: boolean; shouldRefocusPrompt: boolean; userPrompt: string | null; - isFlyoutMode: boolean; } /** @@ -26,12 +25,10 @@ export interface Props extends Omit { * Allows the user to clear the chat and switch between different system prompts. */ export const ChatSend: React.FC = ({ - handleOnChatCleared, handlePromptChange, handleSendMessage, isDisabled, isLoading, - isFlyoutMode, shouldRefocusPrompt, userPrompt, }) => { @@ -58,7 +55,7 @@ export const ChatSend: React.FC = ({ return ( = ({ handlePromptChange={handlePromptChange} value={promptValue} isDisabled={isDisabled} - isFlyoutMode={isFlyoutMode} /> diff --git a/x-pack/packages/kbn-elastic-assistant/impl/assistant/chat_send/use_chat_send.test.tsx b/x-pack/packages/kbn-elastic-assistant/impl/assistant/chat_send/use_chat_send.test.tsx index 17a421313e3a4..a9231499570c7 100644 --- a/x-pack/packages/kbn-elastic-assistant/impl/assistant/chat_send/use_chat_send.test.tsx +++ b/x-pack/packages/kbn-elastic-assistant/impl/assistant/chat_send/use_chat_send.test.tsx @@ -21,7 +21,6 @@ jest.mock('../use_conversation'); jest.mock('../../..'); const setEditingSystemPromptId = jest.fn(); -const setPromptTextPreview = jest.fn(); const setSelectedPromptContexts = jest.fn(); const setUserPrompt = jest.fn(); const sendMessage = jest.fn(); @@ -43,7 +42,6 @@ export const testProps: UseChatSendProps = { } as unknown as HttpSetup, editingSystemPromptId: defaultSystemPrompt.id, setEditingSystemPromptId, - setPromptTextPreview, setSelectedPromptContexts, setUserPrompt, setCurrentConversation, @@ -75,7 +73,6 @@ describe('use chat send', () => { }); result.current.handleOnChatCleared(); expect(clearConversation).toHaveBeenCalled(); - expect(setPromptTextPreview).toHaveBeenCalledWith(''); expect(setUserPrompt).toHaveBeenCalledWith(''); expect(setSelectedPromptContexts).toHaveBeenCalledWith({}); await waitFor(() => { @@ -89,7 +86,6 @@ describe('use chat send', () => { wrapper: TestProviders, }); result.current.handlePromptChange('new prompt'); - expect(setPromptTextPreview).toHaveBeenCalledWith('new prompt'); expect(setUserPrompt).toHaveBeenCalledWith('new prompt'); }); it('handleSendMessage sends message with context prompt when a valid prompt text is provided', async () => { diff --git a/x-pack/packages/kbn-elastic-assistant/impl/assistant/chat_send/use_chat_send.tsx b/x-pack/packages/kbn-elastic-assistant/impl/assistant/chat_send/use_chat_send.tsx index 9d5e822fcdf55..5a70b6ad32cd8 100644 --- a/x-pack/packages/kbn-elastic-assistant/impl/assistant/chat_send/use_chat_send.tsx +++ b/x-pack/packages/kbn-elastic-assistant/impl/assistant/chat_send/use_chat_send.tsx @@ -25,7 +25,6 @@ export interface UseChatSendProps { http: HttpSetup; selectedPromptContexts: Record; setEditingSystemPromptId: React.Dispatch>; - setPromptTextPreview: React.Dispatch>; setSelectedPromptContexts: React.Dispatch< React.SetStateAction> >; @@ -54,7 +53,6 @@ export const useChatSend = ({ http, selectedPromptContexts, setEditingSystemPromptId, - setPromptTextPreview, setSelectedPromptContexts, setUserPrompt, setCurrentConversation, @@ -69,7 +67,6 @@ export const useChatSend = ({ const { clearConversation, removeLastMessage } = useConversation(); const handlePromptChange = (prompt: string) => { - setPromptTextPreview(prompt); setUserPrompt(prompt); }; @@ -120,7 +117,6 @@ export const useChatSend = ({ // Reset prompt context selection and preview before sending: setSelectedPromptContexts({}); - setPromptTextPreview(''); const rawResponse = await sendMessage({ apiConfig: currentConversation.apiConfig, @@ -168,7 +164,6 @@ export const useChatSend = ({ selectedPromptContexts, sendMessage, setCurrentConversation, - setPromptTextPreview, setSelectedPromptContexts, toasts, ] @@ -214,7 +209,6 @@ export const useChatSend = ({ conversation: currentConversation, })?.id; - setPromptTextPreview(''); setUserPrompt(''); setSelectedPromptContexts({}); if (currentConversation) { @@ -230,7 +224,6 @@ export const useChatSend = ({ currentConversation, setCurrentConversation, setEditingSystemPromptId, - setPromptTextPreview, setSelectedPromptContexts, setUserPrompt, ]); diff --git a/x-pack/packages/kbn-elastic-assistant/impl/assistant/context_pills/index.test.tsx b/x-pack/packages/kbn-elastic-assistant/impl/assistant/context_pills/index.test.tsx index 0168c27c7f548..da2dd3008a1b0 100644 --- a/x-pack/packages/kbn-elastic-assistant/impl/assistant/context_pills/index.test.tsx +++ b/x-pack/packages/kbn-elastic-assistant/impl/assistant/context_pills/index.test.tsx @@ -33,7 +33,6 @@ const mockPromptContexts: Record = { const defaultProps = { anonymizationFields: { total: 0, page: 1, perPage: 1000, data: [] }, promptContexts: mockPromptContexts, - isFlyoutMode: false, }; describe('ContextPills', () => { diff --git a/x-pack/packages/kbn-elastic-assistant/impl/assistant/context_pills/index.tsx b/x-pack/packages/kbn-elastic-assistant/impl/assistant/context_pills/index.tsx index ce5a0cf59ca6a..d3ae29643804e 100644 --- a/x-pack/packages/kbn-elastic-assistant/impl/assistant/context_pills/index.tsx +++ b/x-pack/packages/kbn-elastic-assistant/impl/assistant/context_pills/index.tsx @@ -5,20 +5,14 @@ * 2.0. */ -import { EuiButton, EuiButtonEmpty, EuiFlexGroup, EuiFlexItem, EuiToolTip } from '@elastic/eui'; +import { EuiButtonEmpty, EuiFlexGroup, EuiFlexItem, EuiToolTip } from '@elastic/eui'; import { sortBy } from 'lodash/fp'; import React, { useCallback, useMemo } from 'react'; -// eslint-disable-next-line @kbn/eslint/module_migration -import styled from 'styled-components'; import { FindAnonymizationFieldsResponse } from '@kbn/elastic-assistant-common/impl/schemas/anonymization_fields/find_anonymization_fields_route.gen'; import { getNewSelectedPromptContext } from '../../data_anonymization/get_new_selected_prompt_context'; import type { PromptContext, SelectedPromptContext } from '../prompt_context/types'; -const PillButton = styled(EuiButton)` - margin-right: ${({ theme }) => theme.eui.euiSizeXS}; -`; - interface Props { anonymizationFields: FindAnonymizationFieldsResponse; promptContexts: Record; @@ -26,7 +20,6 @@ interface Props { setSelectedPromptContexts: React.Dispatch< React.SetStateAction> >; - isFlyoutMode: boolean; } const ContextPillsComponent: React.FC = ({ @@ -34,7 +27,6 @@ const ContextPillsComponent: React.FC = ({ promptContexts, selectedPromptContexts, setSelectedPromptContexts, - isFlyoutMode, }) => { const sortedPromptContexts = useMemo( () => sortBy('description', Object.values(promptContexts)), @@ -63,7 +55,7 @@ const ContextPillsComponent: React.FC = ({ {sortedPromptContexts.map(({ description, id, tooltip }) => { // Workaround for known issue where tooltip won't dismiss after button state is changed once clicked // See: https://github.com/elastic/eui/issues/6488#issuecomment-1379656704 - const button = isFlyoutMode ? ( + const button = ( = ({ > {description} - ) : ( - selectPromptContext(id)} - > - {description} - ); return ( diff --git a/x-pack/packages/kbn-elastic-assistant/impl/assistant/conversations/conversation_selector/index.tsx b/x-pack/packages/kbn-elastic-assistant/impl/assistant/conversations/conversation_selector/index.tsx index fd9cddc39dbbe..4ee8076c42a9d 100644 --- a/x-pack/packages/kbn-elastic-assistant/impl/assistant/conversations/conversation_selector/index.tsx +++ b/x-pack/packages/kbn-elastic-assistant/impl/assistant/conversations/conversation_selector/index.tsx @@ -35,7 +35,6 @@ interface Props { selectedConversationId: string | undefined; onConversationSelected: ({ cId, cTitle }: { cId: string; cTitle: string }) => void; onConversationDeleted: (conversationId: string) => void; - shouldDisableKeyboardShortcut?: () => boolean; isDisabled?: boolean; conversations: Record; allPrompts: PromptResponse[]; @@ -65,7 +64,6 @@ export const ConversationSelector: React.FC = React.memo( defaultConnector, onConversationSelected, onConversationDeleted, - shouldDisableKeyboardShortcut = () => false, isDisabled = false, conversations, allPrompts, @@ -199,9 +197,8 @@ export const ConversationSelector: React.FC = React.memo( const renderOption: ( option: ConversationSelectorOption, - searchValue: string, - OPTION_CONTENT_CLASSNAME: string - ) => React.ReactNode = (option, searchValue, contentClassName) => { + searchValue: string + ) => React.ReactNode = (option, searchValue) => { const { label, id, value } = option; return ( diff --git a/x-pack/packages/kbn-elastic-assistant/impl/assistant/conversations/conversation_selector_settings/index.tsx b/x-pack/packages/kbn-elastic-assistant/impl/assistant/conversations/conversation_selector_settings/index.tsx index f4b8f9a79412f..f1edb5a9dc2a9 100644 --- a/x-pack/packages/kbn-elastic-assistant/impl/assistant/conversations/conversation_selector_settings/index.tsx +++ b/x-pack/packages/kbn-elastic-assistant/impl/assistant/conversations/conversation_selector_settings/index.tsx @@ -27,7 +27,6 @@ interface Props { onConversationDeleted: (conversationTitle: string) => void; onConversationSelectionChange: (conversation?: Conversation | string) => void; selectedConversationTitle: string; - shouldDisableKeyboardShortcut?: () => boolean; isDisabled?: boolean; } @@ -62,7 +61,6 @@ export const ConversationSelectorSettings: React.FC = React.memo( onConversationSelectionChange, selectedConversationTitle, isDisabled, - shouldDisableKeyboardShortcut = () => false, }) => { const conversationTitles = useMemo( () => Object.values(conversations).map((c) => c.title), diff --git a/x-pack/packages/kbn-elastic-assistant/impl/assistant/conversations/conversation_settings/conversation_settings.tsx b/x-pack/packages/kbn-elastic-assistant/impl/assistant/conversations/conversation_settings/conversation_settings.tsx index cba17030e1577..1584a46ee687a 100644 --- a/x-pack/packages/kbn-elastic-assistant/impl/assistant/conversations/conversation_settings/conversation_settings.tsx +++ b/x-pack/packages/kbn-elastic-assistant/impl/assistant/conversations/conversation_settings/conversation_settings.tsx @@ -49,7 +49,6 @@ export interface ConversationSettingsProps { React.SetStateAction >; isDisabled?: boolean; - isFlyoutMode: boolean; } /** @@ -66,7 +65,6 @@ export const ConversationSettings: React.FC = React.m conversationSettings, http, isDisabled = false, - isFlyoutMode, setAssistantStreamingEnabled, setConversationSettings, conversationsSettingsBulkActions, @@ -127,7 +125,6 @@ export const ConversationSettings: React.FC = React.m conversationsSettingsBulkActions={conversationsSettingsBulkActions} http={http} isDisabled={isDisabled} - isFlyoutMode={isFlyoutMode} selectedConversation={selectedConversationWithApiConfig} setConversationSettings={setConversationSettings} setConversationsSettingsBulkActions={setConversationsSettingsBulkActions} diff --git a/x-pack/packages/kbn-elastic-assistant/impl/assistant/conversations/conversation_settings/conversation_settings_editor.tsx b/x-pack/packages/kbn-elastic-assistant/impl/assistant/conversations/conversation_settings/conversation_settings_editor.tsx index 41da376d21b73..cf8275203090b 100644 --- a/x-pack/packages/kbn-elastic-assistant/impl/assistant/conversations/conversation_settings/conversation_settings_editor.tsx +++ b/x-pack/packages/kbn-elastic-assistant/impl/assistant/conversations/conversation_settings/conversation_settings_editor.tsx @@ -31,7 +31,6 @@ export interface ConversationSettingsEditorProps { conversationsSettingsBulkActions: ConversationsBulkActions; http: HttpSetup; isDisabled?: boolean; - isFlyoutMode: boolean; selectedConversation?: Conversation; setConversationSettings: React.Dispatch>>; setConversationsSettingsBulkActions: React.Dispatch< @@ -49,7 +48,6 @@ export const ConversationSettingsEditor: React.FC @@ -304,7 +299,6 @@ export const ConversationSettingsEditor: React.FC diff --git a/x-pack/packages/kbn-elastic-assistant/impl/assistant/conversations/conversation_settings_management/index.tsx b/x-pack/packages/kbn-elastic-assistant/impl/assistant/conversations/conversation_settings_management/index.tsx index 485f89358f57a..10608502e70d3 100644 --- a/x-pack/packages/kbn-elastic-assistant/impl/assistant/conversations/conversation_settings_management/index.tsx +++ b/x-pack/packages/kbn-elastic-assistant/impl/assistant/conversations/conversation_settings_management/index.tsx @@ -36,7 +36,6 @@ interface Props { defaultConnector?: AIConnector; handleSave: (shouldRefetchConversation?: boolean) => void; isDisabled?: boolean; - isFlyoutMode: boolean; onCancelClick: () => void; setAssistantStreamingEnabled: React.Dispatch>; setConversationSettings: React.Dispatch>>; @@ -62,7 +61,6 @@ const ConversationSettingsManagementComponent: React.FC = ({ conversationsLoaded, handleSave, isDisabled, - isFlyoutMode, onSelectedConversationChange, onCancelClick, selectedConversation, @@ -221,7 +219,6 @@ const ConversationSettingsManagementComponent: React.FC = ({ conversationsSettingsBulkActions={conversationsSettingsBulkActions} http={http} isDisabled={isDisabled} - isFlyoutMode={isFlyoutMode} selectedConversation={selectedConversation} setConversationSettings={setConversationSettings} setConversationsSettingsBulkActions={setConversationsSettingsBulkActions} diff --git a/x-pack/packages/kbn-elastic-assistant/impl/assistant/conversations/conversation_sidepanel/title_field.tsx b/x-pack/packages/kbn-elastic-assistant/impl/assistant/conversations/conversation_sidepanel/title_field.tsx index acbda15320277..373c052ede6e1 100644 --- a/x-pack/packages/kbn-elastic-assistant/impl/assistant/conversations/conversation_sidepanel/title_field.tsx +++ b/x-pack/packages/kbn-elastic-assistant/impl/assistant/conversations/conversation_sidepanel/title_field.tsx @@ -32,7 +32,7 @@ const TitleFieldComponent = ({ conversationIds, euiFieldProps }: TitleFieldProps ), value: true, }, - validate: (text: string) => { + validate: () => { if (conversationIds?.includes(value)) { return i18n.translate( 'xpack.elasticAssistant.conversationSidepanel.titleField.uniqueTitle', diff --git a/x-pack/packages/kbn-elastic-assistant/impl/assistant/helpers.test.ts b/x-pack/packages/kbn-elastic-assistant/impl/assistant/helpers.test.ts index 19d703a271edc..b4ed11a82df9e 100644 --- a/x-pack/packages/kbn-elastic-assistant/impl/assistant/helpers.test.ts +++ b/x-pack/packages/kbn-elastic-assistant/impl/assistant/helpers.test.ts @@ -22,12 +22,11 @@ const defaultConversation = { replacements: {}, title: 'conversation_id', }; -const isFlyoutMode = false; describe('helpers', () => { describe('isAssistantEnabled = false', () => { const isAssistantEnabled = false; it('When no conversation history, return only enterprise messaging', () => { - const result = getBlockBotConversation(defaultConversation, isAssistantEnabled, isFlyoutMode); + const result = getBlockBotConversation(defaultConversation, isAssistantEnabled); expect(result.messages).toEqual(enterpriseMessaging); expect(result.messages.length).toEqual(1); }); @@ -47,7 +46,7 @@ describe('helpers', () => { }, ], }; - const result = getBlockBotConversation(conversation, isAssistantEnabled, isFlyoutMode); + const result = getBlockBotConversation(conversation, isAssistantEnabled); expect(result.messages.length).toEqual(2); }); @@ -56,7 +55,7 @@ describe('helpers', () => { ...defaultConversation, messages: enterpriseMessaging, }; - const result = getBlockBotConversation(conversation, isAssistantEnabled, isFlyoutMode); + const result = getBlockBotConversation(conversation, isAssistantEnabled); expect(result.messages.length).toEqual(1); expect(result.messages).toEqual(enterpriseMessaging); }); @@ -77,7 +76,7 @@ describe('helpers', () => { }, ], }; - const result = getBlockBotConversation(conversation, isAssistantEnabled, isFlyoutMode); + const result = getBlockBotConversation(conversation, isAssistantEnabled); expect(result.messages.length).toEqual(3); }); }); @@ -85,8 +84,8 @@ describe('helpers', () => { describe('isAssistantEnabled = true', () => { const isAssistantEnabled = true; it('when no conversation history, returns the welcome conversation', () => { - const result = getBlockBotConversation(defaultConversation, isAssistantEnabled, isFlyoutMode); - expect(result.messages.length).toEqual(3); + const result = getBlockBotConversation(defaultConversation, isAssistantEnabled); + expect(result.messages.length).toEqual(0); }); it('returns a conversation history with the welcome conversation appended', () => { const conversation = { @@ -103,8 +102,8 @@ describe('helpers', () => { }, ], }; - const result = getBlockBotConversation(conversation, isAssistantEnabled, isFlyoutMode); - expect(result.messages.length).toEqual(4); + const result = getBlockBotConversation(conversation, isAssistantEnabled); + expect(result.messages.length).toEqual(1); }); }); diff --git a/x-pack/packages/kbn-elastic-assistant/impl/assistant/helpers.ts b/x-pack/packages/kbn-elastic-assistant/impl/assistant/helpers.ts index e9a0599ca4fc2..f369bf430ea54 100644 --- a/x-pack/packages/kbn-elastic-assistant/impl/assistant/helpers.ts +++ b/x-pack/packages/kbn-elastic-assistant/impl/assistant/helpers.ts @@ -10,7 +10,7 @@ import { AIConnector } from '../connectorland/connector_selector'; import { FetchConnectorExecuteResponse, FetchConversationsResponse } from './api'; import { Conversation } from '../..'; import type { ClientMessage } from '../assistant_context/types'; -import { enterpriseMessaging, WELCOME_CONVERSATION } from './use_conversation/sample_conversations'; +import { enterpriseMessaging } from './use_conversation/sample_conversations'; export const getMessageFromRawResponse = ( rawResponse: FetchConnectorExecuteResponse @@ -57,8 +57,7 @@ export const mergeBaseWithPersistedConversations = ( export const getBlockBotConversation = ( conversation: Conversation, - isAssistantEnabled: boolean, - isFlyoutMode: boolean + isAssistantEnabled: boolean ): Conversation => { if (!isAssistantEnabled) { if ( @@ -76,7 +75,7 @@ export const getBlockBotConversation = ( return { ...conversation, - messages: [...conversation.messages, ...(!isFlyoutMode ? WELCOME_CONVERSATION.messages : [])], + messages: conversation.messages, }; }; diff --git a/x-pack/packages/kbn-elastic-assistant/impl/assistant/index.test.tsx b/x-pack/packages/kbn-elastic-assistant/impl/assistant/index.test.tsx index b25945dd247bf..cd0d53bd460c3 100644 --- a/x-pack/packages/kbn-elastic-assistant/impl/assistant/index.test.tsx +++ b/x-pack/packages/kbn-elastic-assistant/impl/assistant/index.test.tsx @@ -7,12 +7,11 @@ import React from 'react'; -import { act, fireEvent, render, screen, waitFor, within } from '@testing-library/react'; +import { act, fireEvent, render, screen, waitFor } from '@testing-library/react'; import { Assistant } from '.'; import type { IHttpFetchError } from '@kbn/core/public'; import { useLoadConnectors } from '../connectorland/use_load_connectors'; -import { useConnectorSetup } from '../connectorland/connector_setup'; import { DefinedUseQueryResult, UseQueryResult } from '@tanstack/react-query'; @@ -40,7 +39,7 @@ jest.mock('./use_conversation'); const renderAssistant = (extraProps = {}, providerProps = {}) => render( - + ); @@ -63,11 +62,12 @@ const mockData = { }, }; const mockDeleteConvo = jest.fn(); +const mockGetDefaultConversation = jest.fn().mockReturnValue(mockData.welcome_id); const clearConversation = jest.fn(); const mockUseConversation = { clearConversation: clearConversation.mockResolvedValue(mockData.welcome_id), getConversation: jest.fn(), - getDefaultConversation: jest.fn().mockReturnValue(mockData.welcome_id), + getDefaultConversation: mockGetDefaultConversation, deleteConversation: mockDeleteConvo, setApiConfig: jest.fn().mockResolvedValue({}), }; @@ -83,10 +83,6 @@ describe('Assistant', () => { persistToLocalStorage = jest.fn(); persistToSessionStorage = jest.fn(); (useConversation as jest.Mock).mockReturnValue(mockUseConversation); - jest.mocked(useConnectorSetup).mockReturnValue({ - comments: [], - prompt: <>, - }); jest.mocked(PromptEditor).mockReturnValue(null); jest.mocked(QuickPrompts).mockReturnValue(null); @@ -221,22 +217,21 @@ describe('Assistant', () => { it('should delete conversation when delete button is clicked', async () => { renderAssistant(); + const deleteButton = screen.getAllByTestId('delete-option')[0]; await act(async () => { - fireEvent.click( - within(screen.getByTestId('conversation-selector')).getByTestId( - 'comboBoxToggleListButton' - ) - ); + fireEvent.click(deleteButton); }); - const deleteButton = screen.getAllByTestId('delete-option')[0]; await act(async () => { - fireEvent.click(deleteButton); + fireEvent.click(screen.getByTestId('confirmModalConfirmButton')); + }); + + await waitFor(() => { + expect(mockDeleteConvo).toHaveBeenCalledWith(mockData.electric_sheep_id.id); }); - expect(mockDeleteConvo).toHaveBeenCalledWith(mockData.welcome_id.id); }); it('should refetchConversationsState after clear chat history button click', async () => { - renderAssistant({ isFlyoutMode: true }); + renderAssistant(); fireEvent.click(screen.getByTestId('chat-context-menu')); fireEvent.click(screen.getByTestId('clear-chat')); fireEvent.click(screen.getByTestId('confirmModalConfirmButton')); @@ -259,7 +254,7 @@ describe('Assistant', () => { expect(persistToLocalStorage).toHaveBeenLastCalledWith(mockData.welcome_id.id); - const previousConversationButton = screen.getByLabelText('Previous conversation'); + const previousConversationButton = await screen.findByText(mockData.electric_sheep_id.title); expect(previousConversationButton).toBeInTheDocument(); await act(async () => { @@ -295,13 +290,13 @@ describe('Assistant', () => { isFetched: true, } as unknown as DefinedUseQueryResult, unknown>); - const { getByLabelText } = renderAssistant(); + const { findByText } = renderAssistant(); expect(persistToLocalStorage).toHaveBeenCalled(); expect(persistToLocalStorage).toHaveBeenLastCalledWith(mockData.welcome_id.id); - const previousConversationButton = getByLabelText('Previous conversation'); + const previousConversationButton = await findByText(mockData.electric_sheep_id.title); expect(previousConversationButton).toBeInTheDocument(); @@ -321,7 +316,7 @@ describe('Assistant', () => { renderAssistant({ setConversationTitle }); await act(async () => { - fireEvent.click(screen.getByLabelText('Previous conversation')); + fireEvent.click(await screen.findByText(mockData.electric_sheep_id.title)); }); expect(setConversationTitle).toHaveBeenLastCalledWith('electric sheep'); @@ -351,7 +346,7 @@ describe('Assistant', () => { } as unknown as DefinedUseQueryResult, unknown>); renderAssistant(); - const previousConversationButton = screen.getByLabelText('Previous conversation'); + const previousConversationButton = await screen.findByText('updated title'); await act(async () => { fireEvent.click(previousConversationButton); }); diff --git a/x-pack/packages/kbn-elastic-assistant/impl/assistant/index.tsx b/x-pack/packages/kbn-elastic-assistant/impl/assistant/index.tsx index 6892fdcaf48bd..3fe4e1586e239 100644 --- a/x-pack/packages/kbn-elastic-assistant/impl/assistant/index.tsx +++ b/x-pack/packages/kbn-elastic-assistant/impl/assistant/index.tsx @@ -5,8 +5,6 @@ * 2.0. */ -/* eslint-disable complexity */ - import React, { Dispatch, SetStateAction, @@ -26,9 +24,6 @@ import { EuiFlyoutFooter, EuiFlyoutHeader, EuiFlyoutBody, - EuiModalFooter, - EuiModalHeader, - EuiModalBody, EuiText, } from '@elastic/eui'; import { euiThemeVars } from '@kbn/ui-theme'; @@ -43,7 +38,6 @@ import { PromptTypeEnum } from '@kbn/elastic-assistant-common/impl/schemas/promp import { useChatSend } from './chat_send/use_chat_send'; import { ChatSend } from './chat_send'; import { BlockBotCallToAction } from './block_bot/cta'; -import { AssistantHeader } from './assistant_header'; import { WELCOME_CONVERSATION_TITLE } from './use_conversation/translations'; import { getDefaultConnector, @@ -57,16 +51,15 @@ import { getNewSelectedPromptContext } from '../data_anonymization/get_new_selec import type { PromptContext, SelectedPromptContext } from './prompt_context/types'; import { useConversation } from './use_conversation'; import { CodeBlockDetails, getDefaultSystemPrompt } from './use_conversation/helpers'; -import { PromptEditor } from './prompt_editor'; import { QuickPrompts } from './quick_prompts/quick_prompts'; import { useLoadConnectors } from '../connectorland/use_load_connectors'; -import { useConnectorSetup } from '../connectorland/connector_setup'; +import { ConnectorSetup } from '../connectorland/connector_setup'; import { ConnectorMissingCallout } from '../connectorland/connector_missing_callout'; import { ConversationSidePanel } from './conversations/conversation_sidepanel'; import { NEW_CHAT } from './conversations/conversation_sidepanel/translations'; import { SystemPrompt } from './prompt_editor/system_prompt'; import { SelectedPromptContexts } from './prompt_editor/selected_prompt_contexts'; -import { AssistantHeaderFlyout } from './assistant_header/assistant_header_flyout'; +import { AssistantHeader } from './assistant_header'; import * as i18n from './translations'; export const CONVERSATION_SIDE_PANEL_WIDTH = 220; @@ -77,17 +70,12 @@ const CommentContainer = styled('span')` overflow: hidden; `; -const ModalPromptEditorWrapper = styled.div` - margin-right: 24px; -`; - import { FetchConversationsResponse, useFetchCurrentUserConversations, CONVERSATIONS_QUERY_KEYS, } from './api/conversations/use_fetch_current_user_conversations'; import { Conversation } from '../assistant_context/types'; -import { clearPresentationData } from '../connectorland/connector_setup/helpers'; import { getGenAiConfig } from '../connectorland/helpers'; import { AssistantAnimatedIcon } from './assistant_animated_icon'; import { useFetchAnonymizationFields } from './api/anonymization_fields/use_fetch_anonymization_fields'; @@ -102,7 +90,6 @@ export interface Props { showTitle?: boolean; setConversationTitle?: Dispatch>; onCloseFlyout?: () => void; - isFlyoutMode?: boolean; chatHistoryVisible?: boolean; setChatHistoryVisible?: Dispatch>; currentUserAvatar?: UserAvatar; @@ -120,7 +107,6 @@ const AssistantComponent: React.FC = ({ showTitle = true, setConversationTitle, onCloseFlyout, - isFlyoutMode = false, chatHistoryVisible, setChatHistoryVisible, currentUserAvatar, @@ -129,14 +115,12 @@ const AssistantComponent: React.FC = ({ assistantTelemetry, augmentMessageCodeBlocks, assistantAvailability: { isAssistantEnabled }, - docLinks, getComments, http, knowledgeBase: { isEnabledKnowledgeBase, isEnabledRAGAlerts }, promptContexts, setLastConversationId, getLastConversationId, - title, baseConversations, } = useAssistantContext(); @@ -251,7 +235,7 @@ const AssistantComponent: React.FC = ({ nextConversation?.id !== '' ? nextConversation?.id : nextConversation?.title ]) ?? conversations[WELCOME_CONVERSATION_TITLE] ?? - getDefaultConversation({ cTitle: WELCOME_CONVERSATION_TITLE, isFlyoutMode }); + getDefaultConversation({ cTitle: WELCOME_CONVERSATION_TITLE }); if ( prev && @@ -278,7 +262,6 @@ const AssistantComponent: React.FC = ({ getDefaultConversation, getLastConversationId, isAssistantEnabled, - isFlyoutMode, ]); // Welcome setup state @@ -295,10 +278,8 @@ const AssistantComponent: React.FC = ({ // Welcome conversation is a special 'setup' case when no connector exists, mostly extracted to `ConnectorSetup` component, // but currently a bit of state is littered throughout the assistant component. TODO: clean up/isolate this state const blockBotConversation = useMemo( - () => - currentConversation && - getBlockBotConversation(currentConversation, isAssistantEnabled, isFlyoutMode), - [currentConversation, isAssistantEnabled, isFlyoutMode] + () => currentConversation && getBlockBotConversation(currentConversation, isAssistantEnabled), + [currentConversation, isAssistantEnabled] ); // Settings modal state (so it isn't shared between assistant instances like Timeline) @@ -325,7 +306,6 @@ const AssistantComponent: React.FC = ({ setLastConversationId, ]); - const [promptTextPreview, setPromptTextPreview] = useState(''); const [autoPopulatedOnce, setAutoPopulatedOnce] = useState(false); const [userPrompt, setUserPrompt] = useState(null); @@ -398,16 +378,10 @@ const AssistantComponent: React.FC = ({ // when scrollHeight changes, parent is scrolled to bottom parent.scrollTop = parent.scrollHeight; - if (isFlyoutMode) { - ( - commentsContainerRef.current?.childNodes[0].childNodes[0] as HTMLElement - ).lastElementChild?.scrollIntoView(); - } + ( + commentsContainerRef.current?.childNodes[0].childNodes[0] as HTMLElement + ).lastElementChild?.scrollIntoView(); }); - - const getWrapper = (children: React.ReactNode, isCommentContainer: boolean) => - isCommentContainer ? {children} : <>{children}; - // End Scrolling const selectedSystemPrompt = useMemo( @@ -446,17 +420,6 @@ const AssistantComponent: React.FC = ({ [allSystemPrompts, refetchCurrentConversation, refetchResults] ); - const { comments: connectorComments, prompt: connectorPrompt } = useConnectorSetup({ - isFlyoutMode, - conversation: blockBotConversation, - onConversationUpdate: handleOnConversationSelected, - onSetupComplete: () => { - if (currentConversation) { - setCurrentConversation(clearPresentationData(currentConversation)); - } - }, - }); - const handleOnConversationDeleted = useCallback( async (cTitle: string) => { await deleteConversation(conversations[cTitle].id); @@ -538,14 +501,6 @@ const AssistantComponent: React.FC = ({ isFetchedAnonymizationFields, ]); - useEffect(() => {}, [ - areConnectorsFetched, - connectors, - conversationsLoaded, - currentConversation, - isLoading, - ]); - const createCodeBlockPortals = useCallback( () => messageCodeBlocks?.map((codeBlocks: CodeBlockDetails[], i: number) => { @@ -576,7 +531,6 @@ const AssistantComponent: React.FC = ({ } = useChatSend({ allSystemPrompts, currentConversation, - setPromptTextPreview, setUserPrompt, editingSystemPromptId, http, @@ -601,7 +555,7 @@ const AssistantComponent: React.FC = ({ [currentConversation, handleSendMessage, refetchResults] ); - const chatbotComments = useMemo( + const comments = useMemo( () => ( <> = ({ isFetchingResponse: isLoadingChatSend, setIsStreaming, currentUserAvatar, - isFlyoutMode, })} - {...(!isFlyoutMode - ? { - css: css` - margin-right: ${euiThemeVars.euiSizeL}; + // Avoid comments going off the flyout + css={css` + padding-bottom: ${euiThemeVars.euiSizeL}; - > li > div:nth-child(2) { - overflow: hidden; - } - `, - } - : { - // Avoid comments going off the flyout - css: css` - padding-bottom: ${euiThemeVars.euiSizeL}; - - > li > div:nth-child(2) { - overflow: hidden; - } - `, - })} + > li > div:nth-child(2) { + overflow: hidden; + } + `} /> {currentConversation?.messages.length !== 0 && selectedPromptContextsCount > 0 && ( )} - - {!isFlyoutMode && - (currentConversation?.messages.length === 0 || selectedPromptContextsCount > 0) && ( - - - - )} ), [ @@ -675,34 +596,10 @@ const AssistantComponent: React.FC = ({ isEnabledRAGAlerts, isLoadingChatSend, currentUserAvatar, - isFlyoutMode, selectedPromptContextsCount, - editingSystemPromptId, - isNewConversation, - isSettingsModalVisible, - promptContexts, - promptTextPreview, - handleOnSystemPromptSelectionChange, - selectedPromptContexts, - allSystemPrompts, ] ); - const comments = useMemo(() => { - if (isDisabled && !isFlyoutMode) { - return ( - - ); - } - - return chatbotComments; - }, [isDisabled, isFlyoutMode, chatbotComments, connectorComments]); - const trackPrompt = useCallback( (promptTitle: string) => { if (currentConversation?.title) { @@ -800,19 +697,14 @@ const AssistantComponent: React.FC = ({ textAlign="center" color={euiThemeVars.euiColorMediumShade} size="xs" - css={ - isFlyoutMode - ? css` - margin: 0 ${euiThemeVars.euiSizeL} ${euiThemeVars.euiSizeM} - ${euiThemeVars.euiSizeL}; - ` - : {} - } + css={css` + margin: 0 ${euiThemeVars.euiSizeL} ${euiThemeVars.euiSizeM} ${euiThemeVars.euiSizeL}; + `} > {i18n.DISCLAIMER} ), - [isFlyoutMode, isNewConversation] + [isNewConversation] ); const flyoutBodyContent = useMemo(() => { @@ -842,7 +734,10 @@ const AssistantComponent: React.FC = ({ - {connectorPrompt} + @@ -879,7 +774,6 @@ const AssistantComponent: React.FC = ({ onSystemPromptSelectionChange={handleOnSystemPromptSelectionChange} isSettingsModalVisible={isSettingsModalVisible} setIsSettingsModalVisible={setIsSettingsModalVisible} - isFlyoutMode allSystemPrompts={allSystemPrompts} /> @@ -905,328 +799,212 @@ const AssistantComponent: React.FC = ({ ); }, [ allSystemPrompts, + blockBotConversation, comments, - connectorPrompt, currentConversation, editingSystemPromptId, + handleOnConversationSelected, handleOnSystemPromptSelectionChange, isSettingsModalVisible, isWelcomeSetup, ]); - if (isFlyoutMode) { - return ( - - {chatHistoryVisible && ( - - - - )} + return ( + + {chatHistoryVisible && ( - - + + )} + + + + - + + + {/* Create portals for each EuiCodeBlock to add the `Investigate in Timeline` action */} + {createCodeBlockPortals()} + + - - + min-height: 100px; + flex: 1; - {/* Create portals for each EuiCodeBlock to add the `Investigate in Timeline` action */} - {createCodeBlockPortals()} - - div { + display: flex; + flex-direction: column; + align-items: stretch; + + > .euiFlyoutBody__banner { + overflow-x: unset; + } - > div { + > .euiFlyoutBody__overflowContent { display: flex; - flex-direction: column; - align-items: stretch; - - > .euiFlyoutBody__banner { - overflow-x: unset; - } - - > .euiFlyoutBody__overflowContent { - display: flex; - flex: 1; - overflow: auto; - } + flex: 1; + overflow: auto; } - `} - banner={ - !isDisabled && - showMissingConnectorCallout && - areConnectorsFetched && ( - 0} - isSettingsModalVisible={isSettingsModalVisible} - setIsSettingsModalVisible={setIsSettingsModalVisible} - isFlyoutMode={isFlyoutMode} - /> - ) } - > - {!isAssistantEnabled ? ( - 0} + isSettingsModalVisible={isSettingsModalVisible} + setIsSettingsModalVisible={setIsSettingsModalVisible} /> - ) : ( - - {flyoutBodyContent} - {disclaimer} - - )} - - + {!isAssistantEnabled ? ( + + } + http={http} + isAssistantEnabled={isAssistantEnabled} + isWelcomeSetup={isWelcomeSetup} + /> + ) : ( + + {flyoutBodyContent} + {disclaimer} + + )} + + + - - {!isDisabled && - Object.keys(promptContexts).length !== selectedPromptContextsCount && ( - - - <> - - {Object.keys(promptContexts).length > 0 && } - - - - )} - - - {Object.keys(selectedPromptContexts).length ? ( - - + {!isDisabled && + Object.keys(promptContexts).length !== selectedPromptContextsCount && ( + + + <> + + {Object.keys(promptContexts).length > 0 && } + - ) : null} + + )} + + {Object.keys(selectedPromptContexts).length ? ( - - - - - {!isDisabled && ( - - + - - )} - - - - - - - ); - } - - return getWrapper( - <> - - {showTitle && ( - - )} + + + - {/* Create portals for each EuiCodeBlock to add the `Investigate in Timeline` action */} - {createCodeBlockPortals()} - - {!isDisabled && !isLoadingAnonymizationFields && !isErrorAnonymizationFields && ( - <> - - {Object.keys(promptContexts).length > 0 && } - - )} - - - - - {' '} - {getWrapper( - <> - {comments} - - {!isDisabled && showMissingConnectorCallout && areConnectorsFetched && ( - <> - - - - 0} - isSettingsModalVisible={isSettingsModalVisible} - setIsSettingsModalVisible={setIsSettingsModalVisible} - isFlyoutMode={isFlyoutMode} - /> - - - + {!isDisabled && ( + + + )} - , - !embeddedLayout - )} - - {disclaimer} - - - - - - {!isDisabled && ( - - )} - - , - embeddedLayout + + + + + + ); }; diff --git a/x-pack/packages/kbn-elastic-assistant/impl/assistant/prompt_editor/index.test.tsx b/x-pack/packages/kbn-elastic-assistant/impl/assistant/prompt_editor/index.test.tsx index 6d421b649a380..e2f55ee89202e 100644 --- a/x-pack/packages/kbn-elastic-assistant/impl/assistant/prompt_editor/index.test.tsx +++ b/x-pack/packages/kbn-elastic-assistant/impl/assistant/prompt_editor/index.test.tsx @@ -39,7 +39,6 @@ const defaultProps: Props = { selectedPromptContexts: {}, setIsSettingsModalVisible: jest.fn(), setSelectedPromptContexts: jest.fn(), - isFlyoutMode: false, allSystemPrompts: [], }; diff --git a/x-pack/packages/kbn-elastic-assistant/impl/assistant/prompt_editor/index.tsx b/x-pack/packages/kbn-elastic-assistant/impl/assistant/prompt_editor/index.tsx index 1528435764acd..adf9b7d4aa658 100644 --- a/x-pack/packages/kbn-elastic-assistant/impl/assistant/prompt_editor/index.tsx +++ b/x-pack/packages/kbn-elastic-assistant/impl/assistant/prompt_editor/index.tsx @@ -31,7 +31,6 @@ export interface Props { setSelectedPromptContexts: React.Dispatch< React.SetStateAction> >; - isFlyoutMode: boolean; allSystemPrompts: PromptResponse[]; } @@ -50,7 +49,6 @@ const PromptEditorComponent: React.FC = ({ selectedPromptContexts, setIsSettingsModalVisible, setSelectedPromptContexts, - isFlyoutMode, allSystemPrompts, }) => { const commentBody = useMemo( @@ -64,17 +62,14 @@ const PromptEditorComponent: React.FC = ({ onSystemPromptSelectionChange={onSystemPromptSelectionChange} isSettingsModalVisible={isSettingsModalVisible} setIsSettingsModalVisible={setIsSettingsModalVisible} - isFlyoutMode={isFlyoutMode} /> )} @@ -90,7 +85,6 @@ const PromptEditorComponent: React.FC = ({ onSystemPromptSelectionChange, isSettingsModalVisible, setIsSettingsModalVisible, - isFlyoutMode, promptContexts, selectedPromptContexts, setSelectedPromptContexts, diff --git a/x-pack/packages/kbn-elastic-assistant/impl/assistant/prompt_editor/selected_prompt_contexts/index.test.tsx b/x-pack/packages/kbn-elastic-assistant/impl/assistant/prompt_editor/selected_prompt_contexts/index.test.tsx index 899ee5ed7488c..873c41731bd20 100644 --- a/x-pack/packages/kbn-elastic-assistant/impl/assistant/prompt_editor/selected_prompt_contexts/index.test.tsx +++ b/x-pack/packages/kbn-elastic-assistant/impl/assistant/prompt_editor/selected_prompt_contexts/index.test.tsx @@ -15,7 +15,6 @@ import type { SelectedPromptContext } from '../../prompt_context/types'; import { Props, SelectedPromptContexts } from '.'; const defaultProps: Props = { - isNewConversation: false, promptContexts: { [mockAlertPromptContext.id]: mockAlertPromptContext, [mockEventPromptContext.id]: mockEventPromptContext, @@ -23,7 +22,6 @@ const defaultProps: Props = { selectedPromptContexts: {}, setSelectedPromptContexts: jest.fn(), currentReplacements: {}, - isFlyoutMode: false, }; const mockSelectedAlertPromptContext: SelectedPromptContext = { @@ -53,61 +51,6 @@ describe('SelectedPromptContexts', () => { }); }); - it('it does NOT render a spacer when isNewConversation is false and selectedPromptContextIds.length is 1', async () => { - render( - - - - ); - - await waitFor(() => { - expect(screen.queryByTestId('spacer')).not.toBeInTheDocument(); - }); - }); - - it('it renders a spacer when isNewConversation is true and selectedPromptContextIds.length is 1', async () => { - render( - - - - ); - - await waitFor(() => { - expect(screen.getByTestId('spacer')).toBeInTheDocument(); - }); - }); - - it('it renders a spacer for each selected prompt context when isNewConversation is false and selectedPromptContextIds.length is 2', async () => { - render( - - - - ); - - await waitFor(() => { - expect(screen.getAllByTestId('spacer')).toHaveLength(2); - }); - }); - it('renders the selected prompt contexts', async () => { const selectedPromptContexts = { [mockAlertPromptContext.id]: mockSelectedAlertPromptContext, diff --git a/x-pack/packages/kbn-elastic-assistant/impl/assistant/prompt_editor/selected_prompt_contexts/index.tsx b/x-pack/packages/kbn-elastic-assistant/impl/assistant/prompt_editor/selected_prompt_contexts/index.tsx index d3555b2e2ac86..3a0e6f3ce87d2 100644 --- a/x-pack/packages/kbn-elastic-assistant/impl/assistant/prompt_editor/selected_prompt_contexts/index.tsx +++ b/x-pack/packages/kbn-elastic-assistant/impl/assistant/prompt_editor/selected_prompt_contexts/index.tsx @@ -5,19 +5,10 @@ * 2.0. */ -import { - EuiAccordion, - EuiButtonIcon, - EuiFlexGroup, - EuiFlexItem, - EuiSpacer, - EuiToolTip, -} from '@elastic/eui'; +import { EuiAccordion, EuiButtonIcon, EuiFlexGroup, EuiFlexItem, EuiToolTip } from '@elastic/eui'; import { isEmpty, omit } from 'lodash/fp'; import React, { useCallback } from 'react'; -// eslint-disable-next-line @kbn/eslint/module_migration -import styled from 'styled-components'; - +import styled from '@emotion/styled'; import { css } from '@emotion/react'; import { euiThemeVars } from '@kbn/ui-theme'; import { Conversation } from '../../../assistant_context/types'; @@ -26,14 +17,12 @@ import type { PromptContext, SelectedPromptContext } from '../../prompt_context/ import * as i18n from './translations'; export interface Props { - isNewConversation: boolean; promptContexts: Record; selectedPromptContexts: Record; setSelectedPromptContexts: React.Dispatch< React.SetStateAction> >; currentReplacements: Conversation['replacements'] | undefined; - isFlyoutMode: boolean; } export const EditorContainer = styled.div<{ @@ -45,20 +34,11 @@ export const EditorContainer = styled.div<{ `; const SelectedPromptContextsComponent: React.FC = ({ - isNewConversation, promptContexts, selectedPromptContexts, setSelectedPromptContexts, currentReplacements, - isFlyoutMode, }) => { - const [accordionState, setAccordionState] = React.useState<'closed' | 'open'>('closed'); - - const onToggle = useCallback( - () => setAccordionState((prev) => (prev === 'open' ? 'closed' : 'open')), - [] - ); - const unselectPromptContext = useCallback( (unselectedId: string) => { setSelectedPromptContexts((prev) => omit(unselectedId, prev)); @@ -71,22 +51,13 @@ const SelectedPromptContextsComponent: React.FC = ({ } return ( - + {Object.keys(selectedPromptContexts) .sort() .map((id) => ( - {!isFlyoutMode && - (isNewConversation || Object.keys(selectedPromptContexts).length > 1) ? ( - - ) : null} = ({ } id={id} - {...(!isFlyoutMode && { onToggle })} paddingSize="s" - {...(isFlyoutMode - ? { - css: css` - background: ${euiThemeVars.euiPageBackgroundColor}; - border-radius: ${euiThemeVars.euiBorderRadius}; + css={css` + background: ${euiThemeVars.euiPageBackgroundColor}; + border-radius: ${euiThemeVars.euiBorderRadius}; - > div:first-child { - color: ${euiThemeVars.euiColorPrimary}; - padding: ${euiThemeVars.euiFormControlPadding}; - } - `, - borders: 'all', - arrowProps: { - color: 'primary', - }, - } - : {})} + > div:first-child { + color: ${euiThemeVars.euiColorPrimary}; + padding: ${euiThemeVars.euiFormControlPadding}; + } + `} + borders={'all'} + arrowProps={{ + color: 'primary', + }} > - {isFlyoutMode ? ( - - ) : ( - - - - )} + ))} diff --git a/x-pack/packages/kbn-elastic-assistant/impl/assistant/prompt_editor/system_prompt/helpers.test.tsx b/x-pack/packages/kbn-elastic-assistant/impl/assistant/prompt_editor/system_prompt/helpers.test.tsx index 82b04c60a569c..f13441a3102f9 100644 --- a/x-pack/packages/kbn-elastic-assistant/impl/assistant/prompt_editor/system_prompt/helpers.test.tsx +++ b/x-pack/packages/kbn-elastic-assistant/impl/assistant/prompt_editor/system_prompt/helpers.test.tsx @@ -16,21 +16,21 @@ import { getOptions, getOptionFromPrompt } from './helpers'; describe('helpers', () => { describe('getOptionFromPrompt', () => { it('returns an EuiSuperSelectOption with the correct value', () => { - const option = getOptionFromPrompt({ ...mockSystemPrompt, isFlyoutMode: true }); + const option = getOptionFromPrompt({ ...mockSystemPrompt }); expect(option.value).toBe(mockSystemPrompt.id); }); it('returns an EuiSuperSelectOption with the correct inputDisplay', () => { - const option = getOptionFromPrompt({ ...mockSystemPrompt, isFlyoutMode: false }); + const option = getOptionFromPrompt({ ...mockSystemPrompt }); render(<>{option.inputDisplay}); - expect(screen.getByTestId('systemPromptText')).toHaveTextContent(mockSystemPrompt.content); + expect(screen.getByTestId('systemPromptText')).toHaveTextContent(mockSystemPrompt.name); }); it('shows the expected name in the dropdownDisplay', () => { - const option = getOptionFromPrompt({ ...mockSystemPrompt, isFlyoutMode: true }); + const option = getOptionFromPrompt({ ...mockSystemPrompt }); render({option.dropdownDisplay}); @@ -38,7 +38,7 @@ describe('helpers', () => { }); it('shows the expected prompt content in the dropdownDisplay', () => { - const option = getOptionFromPrompt({ ...mockSystemPrompt, isFlyoutMode: true }); + const option = getOptionFromPrompt({ ...mockSystemPrompt }); render({option.dropdownDisplay}); @@ -51,7 +51,7 @@ describe('helpers', () => { const prompts = [mockSystemPrompt, mockSuperheroSystemPrompt]; const promptIds = prompts.map(({ id }) => id); - const options = getOptions({ prompts, isFlyoutMode: false }); + const options = getOptions({ prompts }); const optionValues = options.map(({ value }) => value); expect(optionValues).toEqual(promptIds); diff --git a/x-pack/packages/kbn-elastic-assistant/impl/assistant/prompt_editor/system_prompt/helpers.tsx b/x-pack/packages/kbn-elastic-assistant/impl/assistant/prompt_editor/system_prompt/helpers.tsx index bd217bb54e9f6..92814927f980a 100644 --- a/x-pack/packages/kbn-elastic-assistant/impl/assistant/prompt_editor/system_prompt/helpers.tsx +++ b/x-pack/packages/kbn-elastic-assistant/impl/assistant/prompt_editor/system_prompt/helpers.tsx @@ -8,46 +8,23 @@ import { EuiText, EuiToolTip } from '@elastic/eui'; import type { EuiSuperSelectOption } from '@elastic/eui'; import React from 'react'; -// eslint-disable-next-line @kbn/eslint/module_migration -import styled from 'styled-components'; - -import { css } from '@emotion/react'; +import styled from '@emotion/styled'; import { isEmpty } from 'lodash/fp'; +import { euiThemeVars } from '@kbn/ui-theme'; import { PromptResponse } from '@kbn/elastic-assistant-common'; import { EMPTY_PROMPT } from './translations'; const Strong = styled.strong` - margin-right: ${({ theme }) => theme.eui.euiSizeS}; + margin-right: ${euiThemeVars.euiSizeS}; `; export const getOptionFromPrompt = ({ content, id, name, - showTitles = false, - isFlyoutMode, -}: PromptResponse & { - showTitles?: boolean; - isFlyoutMode: boolean; -}): EuiSuperSelectOption => ({ +}: PromptResponse): EuiSuperSelectOption => ({ value: id, - inputDisplay: isFlyoutMode ? ( - name - ) : ( - - {showTitles ? name : content} - - ), + inputDisplay: {name}, dropdownDisplay: ( <> {name} @@ -64,12 +41,6 @@ export const getOptionFromPrompt = ({ interface GetOptionsProps { prompts: PromptResponse[] | undefined; - showTitles?: boolean; - isFlyoutMode: boolean; } -export const getOptions = ({ - prompts, - showTitles = false, - isFlyoutMode, -}: GetOptionsProps): Array> => - prompts?.map((p) => getOptionFromPrompt({ ...p, showTitles, isFlyoutMode })) ?? []; +export const getOptions = ({ prompts }: GetOptionsProps): Array> => + prompts?.map(getOptionFromPrompt) ?? []; diff --git a/x-pack/packages/kbn-elastic-assistant/impl/assistant/prompt_editor/system_prompt/index.test.tsx b/x-pack/packages/kbn-elastic-assistant/impl/assistant/prompt_editor/system_prompt/index.test.tsx index 34d40852ba505..3b82b1fd0fbe5 100644 --- a/x-pack/packages/kbn-elastic-assistant/impl/assistant/prompt_editor/system_prompt/index.test.tsx +++ b/x-pack/packages/kbn-elastic-assistant/impl/assistant/prompt_editor/system_prompt/index.test.tsx @@ -90,7 +90,6 @@ describe('SystemPrompt', () => { isSettingsModalVisible={isSettingsModalVisible} onSystemPromptSelectionChange={onSystemPromptSelectionChange} setIsSettingsModalVisible={setIsSettingsModalVisible} - isFlyoutMode={false} allSystemPrompts={mockSystemPrompts} /> ); @@ -100,10 +99,6 @@ describe('SystemPrompt', () => { expect(screen.getByTestId('selectSystemPrompt')).toBeInTheDocument(); }); - it('does NOT render the system prompt text', () => { - expect(screen.queryByTestId('systemPromptText')).not.toBeInTheDocument(); - }); - it('does NOT render the edit button', () => { expect(screen.queryByTestId('edit')).not.toBeInTheDocument(); }); @@ -122,26 +117,21 @@ describe('SystemPrompt', () => { isSettingsModalVisible={isSettingsModalVisible} onSystemPromptSelectionChange={onSystemPromptSelectionChange} setIsSettingsModalVisible={setIsSettingsModalVisible} - isFlyoutMode={false} allSystemPrompts={mockSystemPrompts} /> ); }); - it('does NOT render the system prompt select', () => { - expect(screen.queryByTestId('selectSystemPrompt')).not.toBeInTheDocument(); + it('does render the system prompt select', () => { + expect(screen.queryByTestId('selectSystemPrompt')).toBeInTheDocument(); }); it('renders the system prompt text', () => { - expect(screen.getByTestId('systemPromptText')).toHaveTextContent(mockSystemPrompt.content); - }); - - it('renders the edit button', () => { - expect(screen.getByTestId('edit')).toBeInTheDocument(); + expect(screen.getByTestId('systemPromptText')).toHaveTextContent(mockSystemPrompt.name); }); it('renders the clear button', () => { - expect(screen.getByTestId('clear')).toBeInTheDocument(); + expect(screen.getByTestId('clearSystemPrompt')).toBeInTheDocument(); }); }); @@ -158,7 +148,6 @@ describe('SystemPrompt', () => { isSettingsModalVisible={isSettingsModalVisible} onSystemPromptSelectionChange={onSystemPromptSelectionChange} setIsSettingsModalVisible={setIsSettingsModalVisible} - isFlyoutMode={false} allSystemPrompts={mockSystemPrompts} /> @@ -206,7 +195,6 @@ describe('SystemPrompt', () => { isSettingsModalVisible={isSettingsModalVisible} onSystemPromptSelectionChange={onSystemPromptSelectionChange} setIsSettingsModalVisible={setIsSettingsModalVisible} - isFlyoutMode={false} allSystemPrompts={mockSystemPrompts} /> @@ -268,7 +256,6 @@ describe('SystemPrompt', () => { isSettingsModalVisible={isSettingsModalVisible} onSystemPromptSelectionChange={onSystemPromptSelectionChange} setIsSettingsModalVisible={setIsSettingsModalVisible} - isFlyoutMode={false} allSystemPrompts={mockSystemPrompts} /> @@ -337,7 +324,6 @@ describe('SystemPrompt', () => { isSettingsModalVisible={isSettingsModalVisible} onSystemPromptSelectionChange={onSystemPromptSelectionChange} setIsSettingsModalVisible={setIsSettingsModalVisible} - isFlyoutMode={false} allSystemPrompts={mockSystemPrompts} /> @@ -421,7 +407,6 @@ describe('SystemPrompt', () => { isSettingsModalVisible={isSettingsModalVisible} onSystemPromptSelectionChange={onSystemPromptSelectionChange} setIsSettingsModalVisible={setIsSettingsModalVisible} - isFlyoutMode={false} allSystemPrompts={mockSystemPrompts} /> @@ -483,26 +468,6 @@ describe('SystemPrompt', () => { }); }); - it('shows the system prompt select when the edit button is clicked', () => { - render( - - - - ); - - userEvent.click(screen.getByTestId('edit')); - - expect(screen.getByTestId('selectSystemPrompt')).toBeInTheDocument(); - }); - it('shows the system prompt select when system prompt text is clicked', () => { render( @@ -512,7 +477,6 @@ describe('SystemPrompt', () => { isSettingsModalVisible={isSettingsModalVisible} onSystemPromptSelectionChange={onSystemPromptSelectionChange} setIsSettingsModalVisible={setIsSettingsModalVisible} - isFlyoutMode={false} allSystemPrompts={mockSystemPrompts} /> diff --git a/x-pack/packages/kbn-elastic-assistant/impl/assistant/prompt_editor/system_prompt/index.tsx b/x-pack/packages/kbn-elastic-assistant/impl/assistant/prompt_editor/system_prompt/index.tsx index f2808c3e204f1..01fe334eb1f7d 100644 --- a/x-pack/packages/kbn-elastic-assistant/impl/assistant/prompt_editor/system_prompt/index.tsx +++ b/x-pack/packages/kbn-elastic-assistant/impl/assistant/prompt_editor/system_prompt/index.tsx @@ -5,14 +5,9 @@ * 2.0. */ -import { EuiButtonIcon, EuiFlexGroup, EuiFlexItem, EuiText, EuiToolTip } from '@elastic/eui'; import React, { useCallback, useMemo } from 'react'; - -import { css } from '@emotion/react'; -import { isEmpty } from 'lodash/fp'; import { PromptResponse } from '@kbn/elastic-assistant-common'; import { Conversation } from '../../../..'; -import * as i18n from './translations'; import { SelectSystemPrompt } from './select_system_prompt'; interface Props { @@ -21,7 +16,6 @@ interface Props { isSettingsModalVisible: boolean; onSystemPromptSelectionChange: (systemPromptId: string | undefined) => void; setIsSettingsModalVisible: React.Dispatch>; - isFlyoutMode: boolean; allSystemPrompts: PromptResponse[]; } @@ -31,7 +25,6 @@ const SystemPromptComponent: React.FC = ({ isSettingsModalVisible, onSystemPromptSelectionChange, setIsSettingsModalVisible, - isFlyoutMode, allSystemPrompts, }) => { const selectedPrompt = useMemo(() => { @@ -42,99 +35,24 @@ const SystemPromptComponent: React.FC = ({ } }, [allSystemPrompts, conversation?.apiConfig?.defaultSystemPromptId, editingSystemPromptId]); - const [isEditing, setIsEditing] = React.useState(false); - const handleClearSystemPrompt = useCallback(() => { if (conversation) { onSystemPromptSelectionChange(undefined); } }, [conversation, onSystemPromptSelectionChange]); - const handleEditSystemPrompt = useCallback(() => setIsEditing(true), []); - - if (isFlyoutMode) { - return ( - - ); - } - return ( -
- {selectedPrompt == null || isEditing ? ( - - ) : ( - - - - {isEmpty(selectedPrompt?.content) ? i18n.EMPTY_PROMPT : selectedPrompt?.content} - - - - - - - - - - - - - - - - - - - )} -
+ ); }; diff --git a/x-pack/packages/kbn-elastic-assistant/impl/assistant/prompt_editor/system_prompt/select_system_prompt/index.test.tsx b/x-pack/packages/kbn-elastic-assistant/impl/assistant/prompt_editor/system_prompt/select_system_prompt/index.test.tsx index 3796e5b4a81eb..7c8f575cd49d7 100644 --- a/x-pack/packages/kbn-elastic-assistant/impl/assistant/prompt_editor/system_prompt/select_system_prompt/index.test.tsx +++ b/x-pack/packages/kbn-elastic-assistant/impl/assistant/prompt_editor/system_prompt/select_system_prompt/index.test.tsx @@ -48,9 +48,9 @@ const props: Props = { ], conversation: undefined, isSettingsModalVisible: false, + isClearable: true, selectedPrompt: { id: 'default-system-prompt', content: '', name: '', promptType: 'system' }, setIsSettingsModalVisible: jest.fn(), - isFlyoutMode: false, }; const mockUseAssistantContext = { @@ -91,93 +91,27 @@ jest.mock('../../../../assistant_context', () => { describe('SelectSystemPrompt', () => { beforeEach(() => jest.clearAllMocks()); - it('renders the prompt super select when isEditing is true', () => { - const { getByTestId } = render(); + it('renders the prompt super select', () => { + const { getByTestId } = render(); expect(getByTestId(TEST_IDS.PROMPT_SUPERSELECT)).toBeInTheDocument(); }); - it('does NOT render the prompt super select when isEditing is false', () => { - const { queryByTestId } = render(); - - expect(queryByTestId(TEST_IDS.PROMPT_SUPERSELECT)).not.toBeInTheDocument(); - }); - - it('does NOT render the clear system prompt button when isEditing is true', () => { - const { queryByTestId } = render(); - - expect(queryByTestId('clearSystemPrompt')).not.toBeInTheDocument(); - }); - - it('renders the clear system prompt button when isEditing is true AND isClearable is true', () => { - const { getByTestId } = render( - - ); + it('renders the clear system prompt button', () => { + const { getByTestId } = render(); expect(getByTestId('clearSystemPrompt')).toBeInTheDocument(); }); - it('does NOT render the clear system prompt button when isEditing is false', () => { - const { queryByTestId } = render(); - - expect(queryByTestId('clearSystemPrompt')).not.toBeInTheDocument(); - }); - - it('renders the add system prompt button when isEditing is false', () => { - const { getByTestId } = render(); - - expect(getByTestId('addSystemPrompt')).toBeInTheDocument(); - }); - - it('does NOT render the add system prompt button when isEditing is true', () => { - const { queryByTestId } = render(); - - expect(queryByTestId('addSystemPrompt')).not.toBeInTheDocument(); - }); - it('clears the selected system prompt when the clear button is clicked', () => { const clearSelectedSystemPrompt = jest.fn(); const { getByTestId } = render( - + ); userEvent.click(getByTestId('clearSystemPrompt')); expect(clearSelectedSystemPrompt).toHaveBeenCalledTimes(1); }); - - it('hides the select when the clear button is clicked', () => { - const setIsEditing = jest.fn(); - - const { getByTestId } = render( - - ); - - userEvent.click(getByTestId('clearSystemPrompt')); - - expect(setIsEditing).toHaveBeenCalledWith(false); - }); - - it('shows the select when the add button is clicked', () => { - const setIsEditing = jest.fn(); - - const { getByTestId } = render( - - ); - - userEvent.click(getByTestId('addSystemPrompt')); - - expect(setIsEditing).toHaveBeenCalledWith(true); - }); }); diff --git a/x-pack/packages/kbn-elastic-assistant/impl/assistant/prompt_editor/system_prompt/select_system_prompt/index.tsx b/x-pack/packages/kbn-elastic-assistant/impl/assistant/prompt_editor/system_prompt/select_system_prompt/index.tsx index 0296fa3e636ca..0f10cf6d3063f 100644 --- a/x-pack/packages/kbn-elastic-assistant/impl/assistant/prompt_editor/system_prompt/select_system_prompt/index.tsx +++ b/x-pack/packages/kbn-elastic-assistant/impl/assistant/prompt_editor/system_prompt/select_system_prompt/index.tsx @@ -38,15 +38,11 @@ export interface Props { selectedPrompt: PromptResponse | undefined; clearSelectedSystemPrompt?: () => void; isClearable?: boolean; - isEditing?: boolean; isDisabled?: boolean; isOpen?: boolean; isSettingsModalVisible: boolean; - setIsEditing?: React.Dispatch>; setIsSettingsModalVisible: React.Dispatch>; - showTitles?: boolean; onSystemPromptSelectionChange?: (promptId: string | undefined) => void; - isFlyoutMode: boolean; } const ADD_NEW_SYSTEM_PROMPT = 'ADD_NEW_SYSTEM_PROMPT'; @@ -58,15 +54,11 @@ const SelectSystemPromptComponent: React.FC = ({ selectedPrompt, clearSelectedSystemPrompt, isClearable = false, - isEditing = false, isDisabled = false, isOpen = false, isSettingsModalVisible, onSystemPromptSelectionChange, - setIsEditing, setIsSettingsModalVisible, - showTitles = false, - isFlyoutMode = false, }) => { const { setSelectedSettingsTab } = useAssistantContext(); const { setApiConfig } = useConversation(); @@ -117,10 +109,7 @@ const SelectSystemPromptComponent: React.FC = ({ }, []); // SuperSelect State/Actions - const options = useMemo( - () => getOptions({ prompts: allSystemPrompts, showTitles, isFlyoutMode }), - [allSystemPrompts, showTitles, isFlyoutMode] - ); + const options = useMemo(() => getOptions({ prompts: allSystemPrompts }), [allSystemPrompts]); const onChange = useCallback( (selectedSystemPromptId) => { @@ -134,11 +123,9 @@ const SelectSystemPromptComponent: React.FC = ({ onSystemPromptSelectionChange(selectedSystemPromptId); } setSelectedSystemPrompt(selectedSystemPromptId); - setIsEditing?.(false); }, [ onSystemPromptSelectionChange, - setIsEditing, setIsSettingsModalVisible, setSelectedSettingsTab, setSelectedSystemPrompt, @@ -147,14 +134,8 @@ const SelectSystemPromptComponent: React.FC = ({ const clearSystemPrompt = useCallback(() => { setSelectedSystemPrompt(undefined); - setIsEditing?.(false); clearSelectedSystemPrompt?.(); - }, [clearSelectedSystemPrompt, setIsEditing, setSelectedSystemPrompt]); - - const onShowSelectSystemPrompt = useCallback(() => { - setIsEditing?.(true); - setIsOpenLocal(true); - }, [setIsEditing]); + }, [clearSelectedSystemPrompt, setSelectedSystemPrompt]); return ( = ({ max-width: 100%; `} > - {isEditing && ( - + - - - )} + /> + - {isEditing && isClearable && selectedPrompt && ( + {isClearable && selectedPrompt && ( svg { - width: 8px; - height: 8px; - stroke-width: 2px; - fill: #fff; - stroke: #fff; - } - ` - : undefined - } - /> - - )} - {!isEditing && ( - - svg { + width: 8px; + height: 8px; + stroke-width: 2px; + fill: #fff; + stroke: #fff; + } + `} /> )} diff --git a/x-pack/packages/kbn-elastic-assistant/impl/assistant/prompt_editor/system_prompt/system_prompt_modal/system_prompt_selector/system_prompt_selector.tsx b/x-pack/packages/kbn-elastic-assistant/impl/assistant/prompt_editor/system_prompt/system_prompt_modal/system_prompt_selector/system_prompt_selector.tsx index 2c4826940a7ca..ae5fce935cfe3 100644 --- a/x-pack/packages/kbn-elastic-assistant/impl/assistant/prompt_editor/system_prompt/system_prompt_modal/system_prompt_selector/system_prompt_selector.tsx +++ b/x-pack/packages/kbn-elastic-assistant/impl/assistant/prompt_editor/system_prompt/system_prompt_modal/system_prompt_selector/system_prompt_selector.tsx @@ -147,9 +147,8 @@ export const SystemPromptSelector: React.FC = React.memo( const renderOption: ( option: SystemPromptSelectorOption, - searchValue: string, - OPTION_CONTENT_CLASSNAME: string - ) => React.ReactNode = (option, searchValue, contentClassName) => { + searchValue: string + ) => React.ReactNode = (option, searchValue) => { const { label, value } = option; return ( isDisabled?: boolean; onPromptSubmit: (value: string) => void; value: string; - isFlyoutMode: boolean; } export const PromptTextArea = forwardRef( - ({ isDisabled = false, value, onPromptSubmit, handlePromptChange, isFlyoutMode }, ref) => { + ({ isDisabled = false, value, onPromptSubmit, handlePromptChange }, ref) => { const onChangeCallback = useCallback( (event: React.ChangeEvent) => { handlePromptChange(event.target.value); @@ -46,8 +45,8 @@ export const PromptTextArea = forwardRef( ( value={value} onChange={onChangeCallback} onKeyDown={onKeyDown} - rows={isFlyoutMode ? 1 : 6} + rows={1} /> ); } diff --git a/x-pack/packages/kbn-elastic-assistant/impl/assistant/quick_prompts/quick_prompt_selector/quick_prompt_selector.tsx b/x-pack/packages/kbn-elastic-assistant/impl/assistant/quick_prompts/quick_prompt_selector/quick_prompt_selector.tsx index d29887e8c4f6a..759c6e49e446e 100644 --- a/x-pack/packages/kbn-elastic-assistant/impl/assistant/quick_prompts/quick_prompt_selector/quick_prompt_selector.tsx +++ b/x-pack/packages/kbn-elastic-assistant/impl/assistant/quick_prompts/quick_prompt_selector/quick_prompt_selector.tsx @@ -140,9 +140,8 @@ export const QuickPromptSelector: React.FC = React.memo( const renderOption: ( option: QuickPromptSelectorOption, - searchValue: string, - OPTION_CONTENT_CLASSNAME: string - ) => React.ReactNode = (option, searchValue, contentClassName) => { + searchValue: string + ) => React.ReactNode = (option, searchValue) => { const { color, label, value } = option; return ( ({ + ...jest.requireActual('react-use'), + useMeasure: () => [ + () => {}, + { + width: 500, + }, + ], +})); + jest.mock('../../assistant_context', () => ({ ...jest.requireActual('../../assistant_context'), useAssistantContext: () => mockUseAssistantContext, diff --git a/x-pack/packages/kbn-elastic-assistant/impl/assistant/quick_prompts/quick_prompts.tsx b/x-pack/packages/kbn-elastic-assistant/impl/assistant/quick_prompts/quick_prompts.tsx index c578a58be728d..e910d238ccc5d 100644 --- a/x-pack/packages/kbn-elastic-assistant/impl/assistant/quick_prompts/quick_prompts.tsx +++ b/x-pack/packages/kbn-elastic-assistant/impl/assistant/quick_prompts/quick_prompts.tsx @@ -27,12 +27,10 @@ import { QUICK_PROMPTS_TAB } from '../settings/const'; export const KNOWLEDGE_BASE_CATEGORY = 'knowledge-base'; -const COUNT_BEFORE_OVERFLOW = 5; interface QuickPromptsProps { setInput: (input: string) => void; setIsSettingsModalVisible: React.Dispatch>; trackPrompt: (prompt: string) => void; - isFlyoutMode: boolean; allPrompts: PromptResponse[]; } @@ -42,7 +40,7 @@ interface QuickPromptsProps { * and localstorage for storing new and edited prompts. */ export const QuickPrompts: React.FC = React.memo( - ({ setInput, setIsSettingsModalVisible, trackPrompt, isFlyoutMode, allPrompts }) => { + ({ setInput, setIsSettingsModalVisible, trackPrompt, allPrompts }) => { const [quickPromptsContainerRef, { width }] = useMeasure(); const { knowledgeBase, promptContexts, setSelectedSettingsTab } = useAssistantContext(); @@ -103,25 +101,15 @@ export const QuickPrompts: React.FC = React.memo( }, [setIsSettingsModalVisible, setSelectedSettingsTab]); const quickPrompts = useMemo(() => { - const visibleCount = isFlyoutMode ? Math.floor(width / 120) : COUNT_BEFORE_OVERFLOW; + const visibleCount = Math.floor(width / 120); const visibleItems = contextFilteredQuickPrompts.slice(0, visibleCount); const overflowItems = contextFilteredQuickPrompts.slice(visibleCount); return { visible: visibleItems, overflow: overflowItems }; - }, [contextFilteredQuickPrompts, isFlyoutMode, width]); + }, [contextFilteredQuickPrompts, width]); return ( - + = React.memo( - ) : ( - - ) + } isOpen={isOverflowPopoverOpen} closePopover={closeOverflowPopover} diff --git a/x-pack/packages/kbn-elastic-assistant/impl/assistant/settings/assistant_settings.test.tsx b/x-pack/packages/kbn-elastic-assistant/impl/assistant/settings/assistant_settings.test.tsx index 8f4a8680f9c57..9fb8db972e482 100644 --- a/x-pack/packages/kbn-elastic-assistant/impl/assistant/settings/assistant_settings.test.tsx +++ b/x-pack/packages/kbn-elastic-assistant/impl/assistant/settings/assistant_settings.test.tsx @@ -55,7 +55,6 @@ const testProps = { selectedConversationId: welcomeConvo.title, onClose, onSave, - isFlyoutMode: false, onConversationSelected, conversations: {}, anonymizationFields: { total: 0, page: 1, perPage: 1000, data: [] }, diff --git a/x-pack/packages/kbn-elastic-assistant/impl/assistant/settings/assistant_settings.tsx b/x-pack/packages/kbn-elastic-assistant/impl/assistant/settings/assistant_settings.tsx index d5bbefe304208..4b46d2b75d0a9 100644 --- a/x-pack/packages/kbn-elastic-assistant/impl/assistant/settings/assistant_settings.tsx +++ b/x-pack/packages/kbn-elastic-assistant/impl/assistant/settings/assistant_settings.tsx @@ -59,7 +59,6 @@ interface Props { onClose: ( event?: React.KeyboardEvent | React.MouseEvent ) => void; - isFlyoutMode: boolean; onSave: (success: boolean) => Promise; selectedConversationId?: string; onConversationSelected: ({ cId, cTitle }: { cId: string; cTitle: string }) => void; @@ -80,7 +79,6 @@ export const AssistantSettings: React.FC = React.memo( onConversationSelected, conversations, conversationsLoaded, - isFlyoutMode, }) => { const { actionTypeRegistry, @@ -338,7 +336,6 @@ export const AssistantSettings: React.FC = React.memo( setAssistantStreamingEnabled={setUpdatedAssistantStreamingEnabled} onSelectedConversationChange={onHandleSelectedConversationChange} http={http} - isFlyoutMode={isFlyoutMode} /> ))} {selectedSettingsTab === QUICK_PROMPTS_TAB && ( diff --git a/x-pack/packages/kbn-elastic-assistant/impl/assistant/settings/assistant_settings_button.test.tsx b/x-pack/packages/kbn-elastic-assistant/impl/assistant/settings/assistant_settings_button.test.tsx index 3aab8d1169bfc..0ef76adad9940 100644 --- a/x-pack/packages/kbn-elastic-assistant/impl/assistant/settings/assistant_settings_button.test.tsx +++ b/x-pack/packages/kbn-elastic-assistant/impl/assistant/settings/assistant_settings_button.test.tsx @@ -22,7 +22,6 @@ const testProps = { isSettingsModalVisible: false, selectedConversation: welcomeConvo, setIsSettingsModalVisible, - isFlyoutMode: false, onConversationSelected, conversations: {}, conversationsLoaded: true, diff --git a/x-pack/packages/kbn-elastic-assistant/impl/assistant/settings/assistant_settings_button.tsx b/x-pack/packages/kbn-elastic-assistant/impl/assistant/settings/assistant_settings_button.tsx index 30f141f219476..0df20b0cd4db2 100644 --- a/x-pack/packages/kbn-elastic-assistant/impl/assistant/settings/assistant_settings_button.tsx +++ b/x-pack/packages/kbn-elastic-assistant/impl/assistant/settings/assistant_settings_button.tsx @@ -23,7 +23,6 @@ interface Props { setIsSettingsModalVisible: React.Dispatch>; onConversationSelected: ({ cId, cTitle }: { cId: string; cTitle: string }) => void; isDisabled?: boolean; - isFlyoutMode: boolean; conversations: Record; conversationsLoaded: boolean; refetchConversationsState: () => Promise; @@ -42,7 +41,6 @@ export const AssistantSettingsButton: React.FC = React.memo( isSettingsModalVisible, setIsSettingsModalVisible, selectedConversationId, - isFlyoutMode, onConversationSelected, conversations, conversationsLoaded, @@ -92,7 +90,7 @@ export const AssistantSettingsButton: React.FC = React.memo( isDisabled={isDisabled} iconType="gear" size="xs" - {...(isFlyoutMode ? { color: 'text' } : {})} + color="text" /> @@ -103,7 +101,6 @@ export const AssistantSettingsButton: React.FC = React.memo( onConversationSelected={onConversationSelected} onClose={handleCloseModal} onSave={handleSave} - isFlyoutMode={isFlyoutMode} conversations={conversations} conversationsLoaded={conversationsLoaded} /> diff --git a/x-pack/packages/kbn-elastic-assistant/impl/assistant/settings/assistant_settings_management.test.tsx b/x-pack/packages/kbn-elastic-assistant/impl/assistant/settings/assistant_settings_management.test.tsx index 15fb05ca1c807..7d70ee5ede730 100644 --- a/x-pack/packages/kbn-elastic-assistant/impl/assistant/settings/assistant_settings_management.test.tsx +++ b/x-pack/packages/kbn-elastic-assistant/impl/assistant/settings/assistant_settings_management.test.tsx @@ -62,7 +62,6 @@ const testProps = { selectedConversation: welcomeConvo, onClose, onSave, - isFlyoutMode: false, onConversationSelected, conversations: {}, anonymizationFields: { total: 0, page: 1, perPage: 1000, data: [] }, diff --git a/x-pack/packages/kbn-elastic-assistant/impl/assistant/settings/assistant_settings_management.tsx b/x-pack/packages/kbn-elastic-assistant/impl/assistant/settings/assistant_settings_management.tsx index 3f9be4972fe7e..be6370d36e841 100644 --- a/x-pack/packages/kbn-elastic-assistant/impl/assistant/settings/assistant_settings_management.tsx +++ b/x-pack/packages/kbn-elastic-assistant/impl/assistant/settings/assistant_settings_management.tsx @@ -49,7 +49,6 @@ interface Props { conversations: Record; conversationsLoaded: boolean; selectedConversation: Conversation; - isFlyoutMode: boolean; refetchConversations: () => void; } @@ -61,7 +60,6 @@ export const AssistantSettingsManagement: React.FC = React.memo( ({ conversations, conversationsLoaded, - isFlyoutMode, refetchConversations, selectedConversation: defaultSelectedConversation, }) => { @@ -304,7 +302,6 @@ export const AssistantSettingsManagement: React.FC = React.memo( conversationsSettingsBulkActions={conversationsSettingsBulkActions} defaultConnector={defaultConnector} handleSave={handleSave} - isFlyoutMode={isFlyoutMode} onCancelClick={onCancelClick} onSelectedConversationChange={onHandleSelectedConversationChange} selectedConversation={selectedConversation} diff --git a/x-pack/packages/kbn-elastic-assistant/impl/assistant/settings/evaluation_settings/evaluation_settings.tsx b/x-pack/packages/kbn-elastic-assistant/impl/assistant/settings/evaluation_settings/evaluation_settings.tsx index fe4d75be04004..71bbab7636a4a 100644 --- a/x-pack/packages/kbn-elastic-assistant/impl/assistant/settings/evaluation_settings/evaluation_settings.tsx +++ b/x-pack/packages/kbn-elastic-assistant/impl/assistant/settings/evaluation_settings/evaluation_settings.tsx @@ -44,14 +44,10 @@ const DEFAULT_EVAL_TYPES_OPTIONS = [ ]; const DEFAULT_OUTPUT_INDEX = '.kibana-elastic-ai-assistant-evaluation-results'; -interface Props { - onEvaluationSettingsChange?: () => void; -} - /** * Evaluation Settings -- development-only feature for evaluating models */ -export const EvaluationSettings: React.FC = React.memo(({ onEvaluationSettingsChange }) => { +export const EvaluationSettings: React.FC = React.memo(() => { const { actionTypeRegistry, basePath, http, setTraceOptions, traceOptions } = useAssistantContext(); const { data: connectors } = useLoadConnectors({ http }); diff --git a/x-pack/packages/kbn-elastic-assistant/impl/assistant/use_assistant_overlay/index.tsx b/x-pack/packages/kbn-elastic-assistant/impl/assistant/use_assistant_overlay/index.tsx index 3396223d192ca..9ccc2cbce815d 100644 --- a/x-pack/packages/kbn-elastic-assistant/impl/assistant/use_assistant_overlay/index.tsx +++ b/x-pack/packages/kbn-elastic-assistant/impl/assistant/use_assistant_overlay/index.tsx @@ -130,7 +130,7 @@ export const useAssistantOverlay = ( // proxy show / hide calls to assistant context, using our internal prompt context id: // silent:boolean doesn't show the toast notification if the conversation is not found const showAssistantOverlay = useCallback( - async (showOverlay: boolean, silent?: boolean) => { + async (showOverlay: boolean) => { let conversation; if (!isLoading) { conversation = conversationTitle diff --git a/x-pack/packages/kbn-elastic-assistant/impl/assistant/use_conversation/index.tsx b/x-pack/packages/kbn-elastic-assistant/impl/assistant/use_conversation/index.tsx index a276aea3ff4ab..4643af5509aeb 100644 --- a/x-pack/packages/kbn-elastic-assistant/impl/assistant/use_conversation/index.tsx +++ b/x-pack/packages/kbn-elastic-assistant/impl/assistant/use_conversation/index.tsx @@ -33,7 +33,6 @@ interface CreateConversationProps { messages?: ClientMessage[]; conversationIds?: string[]; apiConfig?: Conversation['apiConfig']; - isFlyoutMode: boolean; } interface SetApiConfigProps { @@ -126,13 +125,10 @@ export const useConversation = (): UseConversation => { * Create a new conversation with the given conversationId, and optionally add messages */ const getDefaultConversation = useCallback( - ({ cTitle, messages, isFlyoutMode }: CreateConversationProps): Conversation => { + ({ cTitle, messages }: CreateConversationProps): Conversation => { const newConversation: Conversation = cTitle === i18n.WELCOME_CONVERSATION_TITLE - ? { - ...WELCOME_CONVERSATION, - messages: !isFlyoutMode ? WELCOME_CONVERSATION.messages : [], - } + ? WELCOME_CONVERSATION : { ...DEFAULT_CONVERSATION_STATE, id: '', diff --git a/x-pack/packages/kbn-elastic-assistant/impl/assistant/use_conversation/sample_conversations.tsx b/x-pack/packages/kbn-elastic-assistant/impl/assistant/use_conversation/sample_conversations.tsx index 7cdf709192f70..85192f646963c 100644 --- a/x-pack/packages/kbn-elastic-assistant/impl/assistant/use_conversation/sample_conversations.tsx +++ b/x-pack/packages/kbn-elastic-assistant/impl/assistant/use_conversation/sample_conversations.tsx @@ -13,35 +13,7 @@ export const WELCOME_CONVERSATION: Conversation = { id: '', title: WELCOME_CONVERSATION_TITLE, category: 'assistant', - messages: [ - { - role: 'assistant', - content: i18n.WELCOME_GENERAL, - timestamp: '', - presentation: { - delay: 2 * 1000, - stream: true, - }, - }, - { - role: 'assistant', - content: i18n.WELCOME_GENERAL_2, - timestamp: '', - presentation: { - delay: 1000, - stream: true, - }, - }, - { - role: 'assistant', - content: i18n.WELCOME_GENERAL_3, - timestamp: '', - presentation: { - delay: 1000, - stream: true, - }, - }, - ], + messages: [], replacements: {}, excludeFromLastConversationStorage: true, }; diff --git a/x-pack/packages/kbn-elastic-assistant/impl/assistant_context/index.tsx b/x-pack/packages/kbn-elastic-assistant/impl/assistant_context/index.tsx index 78336f8a8b03d..65fca75623306 100644 --- a/x-pack/packages/kbn-elastic-assistant/impl/assistant_context/index.tsx +++ b/x-pack/packages/kbn-elastic-assistant/impl/assistant_context/index.tsx @@ -73,7 +73,6 @@ export interface AssistantProviderProps { showAnonymizedValues: boolean; setIsStreaming: (isStreaming: boolean) => void; currentUserAvatar?: UserAvatar; - isFlyoutMode: boolean; }) => EuiCommentProps[]; http: HttpSetup; baseConversations: Record; @@ -114,7 +113,6 @@ export interface UseAssistantContext { showAnonymizedValues: boolean; currentUserAvatar?: UserAvatar; setIsStreaming: (isStreaming: boolean) => void; - isFlyoutMode: boolean; }) => EuiCommentProps[]; http: HttpSetup; knowledgeBase: KnowledgeBaseConfig; @@ -234,9 +232,7 @@ export const AssistantProvider: React.FC = ({ /** * Global Assistant Overlay actions */ - const [showAssistantOverlay, setShowAssistantOverlay] = useState( - (showAssistant) => {} - ); + const [showAssistantOverlay, setShowAssistantOverlay] = useState(() => {}); /** * Settings State diff --git a/x-pack/packages/kbn-elastic-assistant/impl/connectorland/connector_missing_callout/index.test.tsx b/x-pack/packages/kbn-elastic-assistant/impl/connectorland/connector_missing_callout/index.test.tsx index a131e63ae49c3..5465ca19e99de 100644 --- a/x-pack/packages/kbn-elastic-assistant/impl/connectorland/connector_missing_callout/index.test.tsx +++ b/x-pack/packages/kbn-elastic-assistant/impl/connectorland/connector_missing_callout/index.test.tsx @@ -30,7 +30,6 @@ describe('connectorMissingCallout', () => { isConnectorConfigured={false} isSettingsModalVisible={false} setIsSettingsModalVisible={jest.fn()} - isFlyoutMode={false} /> ); @@ -45,7 +44,6 @@ describe('connectorMissingCallout', () => { isConnectorConfigured={true} isSettingsModalVisible={false} setIsSettingsModalVisible={jest.fn()} - isFlyoutMode={false} /> ); @@ -70,7 +68,6 @@ describe('connectorMissingCallout', () => { isConnectorConfigured={true} isSettingsModalVisible={false} setIsSettingsModalVisible={jest.fn()} - isFlyoutMode={false} /> ); diff --git a/x-pack/packages/kbn-elastic-assistant/impl/connectorland/connector_missing_callout/index.tsx b/x-pack/packages/kbn-elastic-assistant/impl/connectorland/connector_missing_callout/index.tsx index 8853ca0a67d33..26ce2f736ed9a 100644 --- a/x-pack/packages/kbn-elastic-assistant/impl/connectorland/connector_missing_callout/index.tsx +++ b/x-pack/packages/kbn-elastic-assistant/impl/connectorland/connector_missing_callout/index.tsx @@ -20,7 +20,6 @@ interface Props { isConnectorConfigured: boolean; isSettingsModalVisible: boolean; setIsSettingsModalVisible: React.Dispatch>; - isFlyoutMode: boolean; } /** @@ -31,7 +30,7 @@ interface Props { * TODO: Add setting for 'default connector' so we can auto-resolve and not even show this */ export const ConnectorMissingCallout: React.FC = React.memo( - ({ isConnectorConfigured, isSettingsModalVisible, setIsSettingsModalVisible, isFlyoutMode }) => { + ({ isConnectorConfigured, isSettingsModalVisible, setIsSettingsModalVisible }) => { const { assistantAvailability, setSelectedSettingsTab } = useAssistantContext(); const onConversationSettingsClicked = useCallback(() => { @@ -55,13 +54,10 @@ export const ConnectorMissingCallout: React.FC = React.memo( iconType="controlsVertical" size="m" title={i18n.MISSING_CONNECTOR_CALLOUT_TITLE} - css={ - isFlyoutMode && - css` - padding-left: ${euiLightVars.euiPanelPaddingModifiers.paddingMedium} !important; - padding-right: ${euiLightVars.euiPanelPaddingModifiers.paddingMedium} !important; - ` - } + css={css` + padding-left: ${euiLightVars.euiPanelPaddingModifiers.paddingMedium} !important; + padding-right: ${euiLightVars.euiPanelPaddingModifiers.paddingMedium} !important; + `} >

{ beforeEach(() => { jest.clearAllMocks(); }); - it('renders empty selection if no selected connector is provided', () => { + it('renders add new connector button if no selected connector is provided', () => { const { getByTestId } = render( ); - expect(getByTestId('connector-selector')).toBeInTheDocument(); - expect(getByTestId('connector-selector')).toHaveTextContent(''); + fireEvent.click(getByTestId('connector-selector')); + expect(getByTestId('addNewConnectorButton')).toBeInTheDocument(); }); it('renders with provided selected connector', () => { const { getByTestId } = render( diff --git a/x-pack/packages/kbn-elastic-assistant/impl/connectorland/connector_selector/index.tsx b/x-pack/packages/kbn-elastic-assistant/impl/connectorland/connector_selector/index.tsx index 410ee650c43ef..ad0fffc44e6b5 100644 --- a/x-pack/packages/kbn-elastic-assistant/impl/connectorland/connector_selector/index.tsx +++ b/x-pack/packages/kbn-elastic-assistant/impl/connectorland/connector_selector/index.tsx @@ -30,7 +30,6 @@ interface Props { selectedConnectorId?: string; displayFancy?: (displayText: string) => React.ReactNode; setIsOpen?: (isOpen: boolean) => void; - isFlyoutMode: boolean; stats?: AttackDiscoveryStats | null; } @@ -47,7 +46,6 @@ export const ConnectorSelector: React.FC = React.memo( selectedConnectorId, onConnectorSelectionChange, setIsOpen, - isFlyoutMode, stats = null, }) => { const { actionTypeRegistry, http, assistantAvailability } = useAssistantContext(); @@ -177,7 +175,7 @@ export const ConnectorSelector: React.FC = React.memo( return ( <> - {isFlyoutMode && !connectorExists && !connectorOptions.length ? ( + {!connectorExists && !connectorOptions.length ? ( ({ jest.mock('../use_load_connectors', () => ({ useLoadConnectors: jest.fn(() => { return { - data: [], + data: mockConnectors, error: null, isSuccess: true, }; @@ -68,67 +67,61 @@ describe('ConnectorSelectorInline', () => { jest.clearAllMocks(); }); it('renders empty view if no selected conversation is provided', () => { - const { getByText } = render( + const { getByTestId } = render( ); - expect(getByText(i18n.INLINE_CONNECTOR_PLACEHOLDER)).toBeInTheDocument(); + fireEvent.click(getByTestId('connector-selector')); + expect(getByTestId('addNewConnectorButton')).toBeInTheDocument(); }); it('renders empty view if selectedConnectorId is NOT in list of connectors', () => { - const { getByText } = render( + const { getByTestId } = render( ); - expect(getByText(i18n.INLINE_CONNECTOR_PLACEHOLDER)).toBeInTheDocument(); + fireEvent.click(getByTestId('connector-selector')); + expect(getByTestId('addNewConnectorButton')).toBeInTheDocument(); }); - it('Clicking add connector button opens the connector selector', () => { - const { getByTestId, queryByTestId } = render( + it('renders the connector selector', () => { + const { getByTestId } = render( ); - expect(queryByTestId('connector-selector')).not.toBeInTheDocument(); - fireEvent.click(getByTestId('connectorSelectorPlaceholderButton')); expect(getByTestId('connector-selector')).toBeInTheDocument(); }); it('On connector change, update conversation API config', () => { const connectorTwo = mockConnectors[1]; - const { getByTestId, queryByTestId } = render( + const { getByTestId } = render( ); - fireEvent.click(getByTestId('connectorSelectorPlaceholderButton')); fireEvent.click(getByTestId('connector-selector')); fireEvent.click(getByTestId(connectorTwo.id)); - expect(queryByTestId('connector-selector')).not.toBeInTheDocument(); expect(setApiConfig).toHaveBeenCalledWith({ apiConfig: { actionTypeId: '.gen-ai', @@ -151,16 +144,13 @@ describe('ConnectorSelectorInline', () => { ); - fireEvent.click(getByTestId('connectorSelectorPlaceholderButton')); fireEvent.click(getByTestId('connector-selector')); - fireEvent.click(getByTestId('addNewConnectorButton')); expect(getByTestId('connector-selector')).toBeInTheDocument(); expect(setApiConfig).not.toHaveBeenCalled(); }); diff --git a/x-pack/packages/kbn-elastic-assistant/impl/connectorland/connector_selector_inline/connector_selector_inline.tsx b/x-pack/packages/kbn-elastic-assistant/impl/connectorland/connector_selector_inline/connector_selector_inline.tsx index ebf762530af11..19e5db98a74fa 100644 --- a/x-pack/packages/kbn-elastic-assistant/impl/connectorland/connector_selector_inline/connector_selector_inline.tsx +++ b/x-pack/packages/kbn-elastic-assistant/impl/connectorland/connector_selector_inline/connector_selector_inline.tsx @@ -5,7 +5,7 @@ * 2.0. */ -import { EuiButtonEmpty, EuiFlexGroup, EuiFlexItem, EuiText } from '@elastic/eui'; +import { EuiFlexGroup, EuiFlexItem, EuiText } from '@elastic/eui'; import React, { useCallback, useState } from 'react'; import { css } from '@emotion/css'; @@ -13,8 +13,6 @@ import { euiThemeVars } from '@kbn/ui-theme'; import type { AttackDiscoveryStats } from '@kbn/elastic-assistant-common'; import { AIConnector, ConnectorSelector } from '../connector_selector'; import { Conversation } from '../../..'; -import { useLoadConnectors } from '../use_load_connectors'; -import * as i18n from '../translations'; import { useAssistantContext } from '../../assistant_context'; import { useConversation } from '../../assistant/use_conversation'; import { getGenAiConfig } from '../helpers'; @@ -25,7 +23,6 @@ interface Props { isDisabled?: boolean; selectedConnectorId?: string; selectedConversation?: Conversation; - isFlyoutMode: boolean; onConnectorIdSelected?: (connectorId: string) => void; onConnectorSelected?: (conversation: Conversation) => void; stats?: AttackDiscoveryStats | null; @@ -53,14 +50,6 @@ const inputDisplayClassName = css` text-overflow: ellipsis; `; -const placeholderButtonClassName = css` - overflow: hidden; - text-overflow: ellipsis; - max-width: 400px; - font-weight: normal; - padding: 0 14px 0 0; -`; - /** * A compact wrapper of the ConnectorSelector component used in the Settings modal. */ @@ -69,29 +58,16 @@ export const ConnectorSelectorInline: React.FC = React.memo( isDisabled = false, selectedConnectorId, selectedConversation, - isFlyoutMode, - onConnectorIdSelected, onConnectorSelected, stats = null, }) => { const [isOpen, setIsOpen] = useState(false); - const { assistantAvailability, http } = useAssistantContext(); + const { assistantAvailability } = useAssistantContext(); const { setApiConfig } = useConversation(); - const { data: aiConnectors } = useLoadConnectors({ - http, - }); - - const selectedConnectorName = - (aiConnectors ?? []).find((c) => c.id === selectedConnectorId)?.name ?? - i18n.INLINE_CONNECTOR_PLACEHOLDER; const localIsDisabled = isDisabled || !assistantAvailability.hasConnectorsReadPrivilege; - const onConnectorClick = useCallback(() => { - setIsOpen(!isOpen); - }, [isOpen]); - const onChange = useCallback( async (connector: AIConnector) => { const connectorId = connector.id; @@ -129,40 +105,6 @@ export const ConnectorSelectorInline: React.FC = React.memo( [selectedConversation, setApiConfig, onConnectorIdSelected, onConnectorSelected] ); - if (isFlyoutMode) { - return ( - - - ( - - {displayText} - - )} - isOpen={isOpen} - isDisabled={localIsDisabled} - selectedConnectorId={selectedConnectorId} - setIsOpen={setIsOpen} - onConnectorSelectionChange={onChange} - isFlyoutMode={isFlyoutMode} - stats={stats} - /> - - - ); - } - return ( = React.memo( responsive={false} > - {isOpen ? ( - ( - - {displayText} - - )} - isOpen - isDisabled={localIsDisabled} - selectedConnectorId={selectedConnectorId} - setIsOpen={setIsOpen} - onConnectorSelectionChange={onChange} - isFlyoutMode={isFlyoutMode} - stats={stats} - /> - ) : ( - - ( + - {selectedConnectorName} - - - )} + {displayText} + + )} + isOpen={isOpen} + isDisabled={localIsDisabled} + selectedConnectorId={selectedConnectorId} + setIsOpen={setIsOpen} + onConnectorSelectionChange={onChange} + stats={stats} + /> ); diff --git a/x-pack/packages/kbn-elastic-assistant/impl/connectorland/connector_setup/helpers.tsx b/x-pack/packages/kbn-elastic-assistant/impl/connectorland/connector_setup/helpers.tsx deleted file mode 100644 index cb11ca51047f0..0000000000000 --- a/x-pack/packages/kbn-elastic-assistant/impl/connectorland/connector_setup/helpers.tsx +++ /dev/null @@ -1,33 +0,0 @@ -/* - * 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 { Conversation } from '../../assistant_context/types'; - -/** - * Removes all presentation data from the conversation - * @param conversation - */ -export const clearPresentationData = (conversation: Conversation): Conversation => { - const { messages, ...restConversation } = conversation; - return { - ...restConversation, - messages: messages.map((message) => { - const { presentation, ...restMessages } = message; - return { - ...restMessages, - presentation: undefined, - }; - }), - }; -}; - -/** - * Returns true if the conversation has no presentation data - * @param conversation - */ -export const conversationHasNoPresentationData = (conversation: Conversation): boolean => - !conversation.messages.some((message) => message.presentation !== undefined); diff --git a/x-pack/packages/kbn-elastic-assistant/impl/connectorland/connector_setup/index.test.tsx b/x-pack/packages/kbn-elastic-assistant/impl/connectorland/connector_setup/index.test.tsx index cf46b5886a389..b6eaa4578d4a0 100644 --- a/x-pack/packages/kbn-elastic-assistant/impl/connectorland/connector_setup/index.test.tsx +++ b/x-pack/packages/kbn-elastic-assistant/impl/connectorland/connector_setup/index.test.tsx @@ -6,19 +6,15 @@ */ import React from 'react'; -import { useConnectorSetup } from '.'; -import { act, renderHook } from '@testing-library/react-hooks'; import { fireEvent, render } from '@testing-library/react'; import { welcomeConvo } from '../../mock/conversation'; import { TestProviders } from '../../mock/test_providers/test_providers'; -import { EuiCommentList } from '@elastic/eui'; +import { ConnectorSetup } from '.'; -const onSetupComplete = jest.fn(); const onConversationUpdate = jest.fn(); const defaultProps = { conversation: welcomeConvo, - onSetupComplete, onConversationUpdate, }; const newConnector = { actionTypeId: '.gen-ai', name: 'cool name' }; @@ -50,121 +46,40 @@ jest.mock('../../assistant/use_conversation', () => ({ })); jest.spyOn(global, 'clearTimeout'); -describe('useConnectorSetup', () => { +describe('ConnectorSetup', () => { beforeEach(() => { jest.clearAllMocks(); }); - it('should render comments and prompts', async () => { - await act(async () => { - const { result, waitForNextUpdate } = renderHook(() => useConnectorSetup(defaultProps), { - wrapper: ({ children }) => {children}, - }); - await waitForNextUpdate(); - expect( - result.current.comments.map((c) => ({ username: c.username, timestamp: c.timestamp })) - ).toEqual([ - { - username: 'You', - timestamp: `at: ${new Date('2024-03-18T18:59:18.174Z').toLocaleString()}`, - }, - { - username: 'Assistant', - timestamp: `at: ${new Date('2024-03-19T18:59:18.174Z').toLocaleString()}`, - }, - ]); - - expect(result.current.prompt.props['data-test-subj']).toEqual('prompt'); + it('should render action type selector', async () => { + const { getByTestId } = render(, { + wrapper: TestProviders, }); + + expect(getByTestId('modal-mock')).toBeInTheDocument(); }); - it('should set api config for each conversation when new connector is saved', async () => { - await act(async () => { - const { result, waitForNextUpdate } = renderHook(() => useConnectorSetup(defaultProps), { - wrapper: ({ children }) => {children}, - }); - await waitForNextUpdate(); - const { getByTestId, queryByTestId, rerender } = render(result.current.prompt, { - wrapper: TestProviders, - }); - expect(getByTestId('connectorButton')).toBeInTheDocument(); - expect(queryByTestId('skip-setup-button')).not.toBeInTheDocument(); - fireEvent.click(getByTestId('connectorButton')); - rerender(result.current.prompt); - fireEvent.click(getByTestId('modal-mock')); - expect(setApiConfig).toHaveBeenCalledTimes(1); + it('should set api config for each conversation when new connector is saved', async () => { + const { getByTestId } = render(, { + wrapper: TestProviders, }); + + fireEvent.click(getByTestId('modal-mock')); + expect(setApiConfig).toHaveBeenCalledTimes(1); }); it('should NOT set the api config for each conversation when a new connector is saved and updateConversationsOnSaveConnector is false', async () => { - await act(async () => { - const { result, waitForNextUpdate } = renderHook( - () => - useConnectorSetup({ - ...defaultProps, - updateConversationsOnSaveConnector: false, // <-- don't update the conversations - }), - { - wrapper: ({ children }) => {children}, - } - ); - await waitForNextUpdate(); - const { getByTestId, queryByTestId, rerender } = render(result.current.prompt, { + const { getByTestId } = render( + , + { wrapper: TestProviders, - }); - expect(getByTestId('connectorButton')).toBeInTheDocument(); - expect(queryByTestId('skip-setup-button')).not.toBeInTheDocument(); - fireEvent.click(getByTestId('connectorButton')); + } + ); - rerender(result.current.prompt); - fireEvent.click(getByTestId('modal-mock')); + fireEvent.click(getByTestId('modal-mock')); - expect(setApiConfig).not.toHaveBeenCalled(); - }); - }); - - it('should show skip button if message has presentation data', async () => { - await act(async () => { - const { result, waitForNextUpdate } = renderHook( - () => - useConnectorSetup({ - ...defaultProps, - conversation: { - ...defaultProps.conversation, - messages: [ - { - ...defaultProps.conversation.messages[0], - presentation: { - delay: 0, - stream: false, - }, - }, - ], - }, - }), - { - wrapper: ({ children }) => {children}, - } - ); - await waitForNextUpdate(); - const { getByTestId, queryByTestId } = render(result.current.prompt, { - wrapper: TestProviders, - }); - expect(getByTestId('skip-setup-button')).toBeInTheDocument(); - expect(queryByTestId('connectorButton')).not.toBeInTheDocument(); - }); - }); - it('should call onSetupComplete and setConversations when onHandleMessageStreamingComplete', async () => { - await act(async () => { - const { result, waitForNextUpdate } = renderHook(() => useConnectorSetup(defaultProps), { - wrapper: ({ children }) => {children}, - }); - await waitForNextUpdate(); - render(, { - wrapper: TestProviders, - }); - - expect(clearTimeout).toHaveBeenCalled(); - expect(onSetupComplete).toHaveBeenCalled(); - }); + expect(setApiConfig).not.toHaveBeenCalled(); }); }); diff --git a/x-pack/packages/kbn-elastic-assistant/impl/connectorland/connector_setup/index.tsx b/x-pack/packages/kbn-elastic-assistant/impl/connectorland/connector_setup/index.tsx index 81166bbf90fa1..a27da69709c38 100644 --- a/x-pack/packages/kbn-elastic-assistant/impl/connectorland/connector_setup/index.tsx +++ b/x-pack/packages/kbn-elastic-assistant/impl/connectorland/connector_setup/index.tsx @@ -5,181 +5,44 @@ * 2.0. */ -import React, { useCallback, useMemo, useRef, useState } from 'react'; -import type { EuiCommentProps } from '@elastic/eui'; -import { EuiAvatar, EuiBadge, EuiMarkdownFormat, EuiText, EuiTextAlign } from '@elastic/eui'; -import styled from '@emotion/styled'; -import { css } from '@emotion/react'; +import React, { useCallback, useMemo, useState } from 'react'; import { ActionConnector } from '@kbn/triggers-actions-ui-plugin/public/common/constants'; import { ActionType } from '@kbn/triggers-actions-ui-plugin/public'; import { AddConnectorModal } from '../add_connector_modal'; import { WELCOME_CONVERSATION } from '../../assistant/use_conversation/sample_conversations'; -import { Conversation, ClientMessage } from '../../..'; +import { Conversation } from '../../..'; import { useLoadActionTypes } from '../use_load_action_types'; -import { StreamingText } from '../../assistant/streaming_text'; -import { ConnectorButton } from '../connector_button'; import { useConversation } from '../../assistant/use_conversation'; -import { conversationHasNoPresentationData } from './helpers'; -import * as i18n from '../translations'; import { useAssistantContext } from '../../assistant_context'; import { useLoadConnectors } from '../use_load_connectors'; -import { AssistantAvatar } from '../../assistant/assistant_avatar/assistant_avatar'; import { getGenAiConfig } from '../helpers'; -const ConnectorButtonWrapper = styled.div` - margin-bottom: 10px; -`; - export interface ConnectorSetupProps { conversation?: Conversation; - isFlyoutMode?: boolean; - onSetupComplete?: () => void; onConversationUpdate?: ({ cId, cTitle }: { cId: string; cTitle: string }) => Promise; updateConversationsOnSaveConnector?: boolean; } -export const useConnectorSetup = ({ +export const ConnectorSetup = ({ conversation: defaultConversation, - isFlyoutMode, - onSetupComplete, onConversationUpdate, updateConversationsOnSaveConnector = true, -}: ConnectorSetupProps): { - comments: EuiCommentProps[]; - prompt: React.ReactElement; -} => { +}: ConnectorSetupProps) => { const conversation = useMemo( - () => - defaultConversation || { - ...WELCOME_CONVERSATION, - messages: !isFlyoutMode ? WELCOME_CONVERSATION.messages : [], - }, - [defaultConversation, isFlyoutMode] + () => defaultConversation || WELCOME_CONVERSATION, + [defaultConversation] ); const { setApiConfig } = useConversation(); - const bottomRef = useRef(null); // Access all conversations so we can add connector to all on initial setup const { actionTypeRegistry, http } = useAssistantContext(); - const { - data: connectors, - isSuccess: areConnectorsFetched, - refetch: refetchConnectors, - } = useLoadConnectors({ http }); - const isConnectorConfigured = areConnectorsFetched && !!connectors?.length; + const { refetch: refetchConnectors } = useLoadConnectors({ http }); - const [isConnectorModalVisible, setIsConnectorModalVisible] = useState(false); - const [showAddConnectorButton, setShowAddConnectorButton] = useState(() => { - // If no presentation data on messages, default to showing add connector button so it doesn't delay render and flash on screen - return conversationHasNoPresentationData(conversation); - }); const { data: actionTypes } = useLoadActionTypes({ http }); const [selectedActionType, setSelectedActionType] = useState(null); - const lastConversationMessageIndex = useMemo( - () => conversation.messages.length - 1, - [conversation.messages.length] - ); - - const [currentMessageIndex, setCurrentMessageIndex] = useState( - // If connector is configured or conversation has already been replayed show all messages immediately - isConnectorConfigured || conversationHasNoPresentationData(conversation) - ? lastConversationMessageIndex - : 0 - ); - - const streamingTimeoutRef = useRef(undefined); - - // Once streaming of previous message is complete, proceed to next message - const onHandleMessageStreamingComplete = useCallback(() => { - if (currentMessageIndex === lastConversationMessageIndex) { - clearTimeout(streamingTimeoutRef.current); - return; - } - streamingTimeoutRef.current = window.setTimeout(() => { - bottomRef.current?.scrollIntoView({ block: 'end' }); - return setCurrentMessageIndex(currentMessageIndex + 1); - }, conversation.messages[currentMessageIndex]?.presentation?.delay ?? 0); - return () => clearTimeout(streamingTimeoutRef.current); - }, [conversation.messages, currentMessageIndex, lastConversationMessageIndex]); - - // Show button to add connector after last message has finished streaming - const onHandleLastMessageStreamingComplete = useCallback(() => { - setShowAddConnectorButton(true); - bottomRef.current?.scrollIntoView({ block: 'end' }); - onSetupComplete?.(); - }, [onSetupComplete]); - - // Show button to add connector after last message has finished streaming - const handleSkipSetup = useCallback(() => { - setCurrentMessageIndex(lastConversationMessageIndex); - }, [lastConversationMessageIndex]); - - // Create EuiCommentProps[] from conversation messages - const commentBody = useCallback( - (message: ClientMessage, index: number, length: number) => { - // If timestamp is not set, set it to current time (will update conversation at end of setup) - if ( - conversation.messages[index].timestamp == null || - conversation.messages[index].timestamp.length === 0 - ) { - conversation.messages[index].timestamp = new Date().toISOString(); - } - const isLastMessage = index === length - 1; - const enableStreaming = - (message?.presentation?.stream ?? false) && currentMessageIndex !== length - 1; - return ( - - {(streamedText, isStreamingComplete) => ( - - {streamedText} - - - )} - - ); - }, - [ - conversation.messages, - currentMessageIndex, - onHandleLastMessageStreamingComplete, - onHandleMessageStreamingComplete, - ] - ); - - const comments = useMemo( - () => - conversation.messages.slice(0, currentMessageIndex + 1).map((message, index) => { - const isUser = message.role === 'user'; - const timestamp = `${i18n.CONNECTOR_SETUP_TIMESTAMP_AT}: ${new Date( - message.timestamp - ).toLocaleString()}`; - const commentProps: EuiCommentProps = { - username: isUser ? i18n.CONNECTOR_SETUP_USER_YOU : i18n.CONNECTOR_SETUP_USER_ASSISTANT, - children: commentBody(message, index, conversation.messages.length), - timelineAvatar: ( - - ), - timestamp, - }; - return commentProps; - }), - [commentBody, conversation.messages, currentMessageIndex] - ); - const onSaveConnector = useCallback( async (connector: ActionConnector) => { if (updateConversationsOnSaveConnector) { @@ -204,7 +67,6 @@ export const useConnectorSetup = ({ }); refetchConnectors?.(); - setIsConnectorModalVisible(false); } } else { refetchConnectors?.(); @@ -221,65 +83,17 @@ export const useConnectorSetup = ({ const handleClose = useCallback(() => { setSelectedActionType(null); - setIsConnectorModalVisible(false); }, []); - return { - comments: isFlyoutMode ? [] : comments, - prompt: isFlyoutMode ? ( -

- -
- ) : ( -
- {showAddConnectorButton && ( - - - - )} - {!showAddConnectorButton && ( - - - - {i18n.CONNECTOR_SETUP_SKIP} - - - - )} - {isConnectorModalVisible && ( - - )} -
- ), - }; + return ( + + ); }; diff --git a/x-pack/packages/kbn-elastic-assistant/impl/content/prompts/welcome/translations.ts b/x-pack/packages/kbn-elastic-assistant/impl/content/prompts/welcome/translations.ts index 387c1d01422f6..3324d09b50a5a 100644 --- a/x-pack/packages/kbn-elastic-assistant/impl/content/prompts/welcome/translations.ts +++ b/x-pack/packages/kbn-elastic-assistant/impl/content/prompts/welcome/translations.ts @@ -7,30 +7,6 @@ import { i18n } from '@kbn/i18n'; -export const WELCOME_GENERAL = i18n.translate( - 'xpack.elasticAssistant.securityAssistant.content.prompts.welcome.welcomeGeneralPrompt', - { - defaultMessage: - 'Welcome to your Elastic AI Assistant! I am your 100% open-code portal into your Elastic life. In time, I will be able to answer questions and provide assistance across all your information in Elastic, and oh-so much more. Till then, I hope this early preview will open your mind to the possibilities of what we can create when we work together, in the open. Cheers!', - } -); - -export const WELCOME_GENERAL_2 = i18n.translate( - 'xpack.elasticAssistant.securityAssistant.content.prompts.welcome.welcomeGeneral2Prompt', - { - defaultMessage: - "First things first, we'll need to set up a Generative AI Connector to get this chat experience going! With the Generative AI Connector, you'll be able to configure access to either an OpenAI service or an Amazon Bedrock service, but you better believe you'll be able to deploy your own models within your Elastic Cloud instance and use those here in the future... 😉", - } -); - -export const WELCOME_GENERAL_3 = i18n.translate( - 'xpack.elasticAssistant.securityAssistant.content.prompts.welcome.welcomeGeneral3Prompt', - { - defaultMessage: - 'Go ahead and click the add connector button below to continue the conversation!', - } -); - export const ENTERPRISE = i18n.translate( 'xpack.elasticAssistant.securityAssistant.content.prompts.welcome.enterprisePrompt', { diff --git a/x-pack/packages/kbn-elastic-assistant/impl/data_anonymization_editor/context_preview.tsx b/x-pack/packages/kbn-elastic-assistant/impl/data_anonymization_editor/context_preview.tsx index 91b676c491e47..49d5d0fe4d63d 100644 --- a/x-pack/packages/kbn-elastic-assistant/impl/data_anonymization_editor/context_preview.tsx +++ b/x-pack/packages/kbn-elastic-assistant/impl/data_anonymization_editor/context_preview.tsx @@ -48,6 +48,7 @@ const SelectedPromptContextPreviewComponent = ({ return ( { rawData: 'test-raw-data', }; - it('renders stats', () => { - render( - - - - ); - - expect(screen.getByTestId('stats')).toBeInTheDocument(); - }); - describe('when rawData is a string (non-anonymized data)', () => { it('renders the ReadOnlyContextViewer when rawData is (non-anonymized data)', () => { render( @@ -61,7 +45,6 @@ describe('DataAnonymizationEditor', () => { selectedPromptContext={mockSelectedPromptContext} setSelectedPromptContexts={jest.fn()} currentReplacements={{}} - isFlyoutMode={false} /> ); @@ -76,7 +59,6 @@ describe('DataAnonymizationEditor', () => { selectedPromptContext={mockSelectedPromptContext} setSelectedPromptContexts={jest.fn()} currentReplacements={{}} - isFlyoutMode={false} /> ); @@ -105,24 +87,17 @@ describe('DataAnonymizationEditor', () => { selectedPromptContext={selectedPromptContextWithAnonymized} setSelectedPromptContexts={setSelectedPromptContexts} currentReplacements={{}} - isFlyoutMode={false} /> ); }); - it('renders the ContextEditor when rawData is anonymized data', () => { - expect(screen.getByTestId('contextEditor')).toBeInTheDocument(); + it('renders the SelectedPromptContextPreview when rawData is anonymized data', () => { + expect(screen.getByTestId('selectedPromptContextPreview')).toBeInTheDocument(); }); it('does NOT render the ReadOnlyContextViewer when rawData is anonymized data', () => { expect(screen.queryByTestId('readOnlyContextViewer')).not.toBeInTheDocument(); }); - - it('calls setSelectedPromptContexts when a field is toggled', () => { - userEvent.click(screen.getAllByTestId('allowed')[0]); // toggle the first field - - expect(setSelectedPromptContexts).toBeCalled(); - }); }); }); diff --git a/x-pack/packages/kbn-elastic-assistant/impl/data_anonymization_editor/index.tsx b/x-pack/packages/kbn-elastic-assistant/impl/data_anonymization_editor/index.tsx index 1fd0e31c78767..0794ca4330350 100644 --- a/x-pack/packages/kbn-elastic-assistant/impl/data_anonymization_editor/index.tsx +++ b/x-pack/packages/kbn-elastic-assistant/impl/data_anonymization_editor/index.tsx @@ -5,7 +5,7 @@ * 2.0. */ -import { EuiPanel, EuiSpacer } from '@elastic/eui'; +import { EuiPanel } from '@elastic/eui'; import React, { useCallback, useMemo } from 'react'; import styled from '@emotion/styled'; import { AnonymizedData } from '@kbn/elastic-assistant-common/impl/data_anonymization/types'; @@ -14,9 +14,7 @@ import { BatchUpdateListItem } from './context_editor/types'; import { getIsDataAnonymizable, updateSelectedPromptContext } from './helpers'; import { ReadOnlyContextViewer } from './read_only_context_viewer'; import { ContextEditorFlyout } from './context_editor_flyout'; -import { ContextEditor } from './context_editor'; import { ReplacementsContextViewer } from './replacements_context_viewer'; -import { Stats } from './stats'; const EditorContainer = styled.div` overflow-x: auto; @@ -28,14 +26,12 @@ export interface Props { React.SetStateAction> >; currentReplacements: AnonymizedData['replacements'] | undefined; - isFlyoutMode: boolean; } const DataAnonymizationEditorComponent: React.FC = ({ selectedPromptContext, setSelectedPromptContexts, currentReplacements, - isFlyoutMode, }) => { const isDataAnonymizable = useMemo( () => getIsDataAnonymizable(selectedPromptContext.rawData), @@ -63,66 +59,27 @@ const DataAnonymizationEditorComponent: React.FC = ({ [selectedPromptContext, setSelectedPromptContexts] ); - if (isFlyoutMode) { - return ( - - - {typeof selectedPromptContext.rawData === 'string' ? ( - selectedPromptContext.replacements != null ? ( - - ) : ( - - ) - ) : ( - - )} - - - ); - } - return ( - - - - - {typeof selectedPromptContext.rawData === 'string' ? ( - selectedPromptContext.replacements != null ? ( - + + {typeof selectedPromptContext.rawData === 'string' ? ( + selectedPromptContext.replacements != null ? ( + + ) : ( + + ) ) : ( - - ) - ) : ( - - )} + + )} + ); }; diff --git a/x-pack/packages/kbn-elastic-assistant/impl/mock/get_anonymized_value/index.ts b/x-pack/packages/kbn-elastic-assistant/impl/mock/get_anonymized_value/index.ts index a6d5c4e5d3972..256f9776c4563 100644 --- a/x-pack/packages/kbn-elastic-assistant/impl/mock/get_anonymized_value/index.ts +++ b/x-pack/packages/kbn-elastic-assistant/impl/mock/get_anonymized_value/index.ts @@ -5,13 +5,6 @@ * 2.0. */ -import { Replacements } from '@kbn/elastic-assistant-common'; - /** This mock returns the reverse of `value` */ -export const mockGetAnonymizedValue = ({ - currentReplacements, - rawValue, -}: { - currentReplacements: Replacements | undefined; - rawValue: string; -}): string => rawValue.split('').reverse().join(''); +export const mockGetAnonymizedValue = ({ rawValue }: { rawValue: string }): string => + rawValue.split('').reverse().join(''); diff --git a/x-pack/packages/security-solution/ecs_data_quality_dashboard/impl/data_quality/data_quality_panel/body/data_quality_details/storage_details/helpers.ts b/x-pack/packages/security-solution/ecs_data_quality_dashboard/impl/data_quality/data_quality_panel/body/data_quality_details/storage_details/helpers.ts index 5b3860af44920..3eaf493222cb0 100644 --- a/x-pack/packages/security-solution/ecs_data_quality_dashboard/impl/data_quality/data_quality_panel/body/data_quality_details/storage_details/helpers.ts +++ b/x-pack/packages/security-solution/ecs_data_quality_dashboard/impl/data_quality/data_quality_panel/body/data_quality_details/storage_details/helpers.ts @@ -134,37 +134,34 @@ export const getFlattenedBuckets = ({ if (((isILMAvailable && ilmExplain != null) || !isILMAvailable) && stats != null) { return [ ...acc, - ...Object.entries(stats).reduce( - (validStats, [indexName, indexStats]) => { - const ilmPhase = getIlmPhase(ilmExplain?.[indexName], isILMAvailable); - const isSelectedPhase = - (isILMAvailable && ilmPhase != null && ilmPhasesMap[ilmPhase] != null) || - !isILMAvailable; - - if (isSelectedPhase) { - const incompatible = - results != null && results[indexName] != null - ? results[indexName].incompatible - : undefined; - const sizeInBytes = getSizeInBytes({ indexName, stats }); - const docsCount = getDocsCount({ stats, indexName }); - return [ - ...validStats, - { - ilmPhase, - incompatible, - indexName, - pattern, - sizeInBytes, - docsCount, - }, - ]; - } else { - return validStats; - } - }, - [] - ), + ...Object.entries(stats).reduce((validStats, [indexName]) => { + const ilmPhase = getIlmPhase(ilmExplain?.[indexName], isILMAvailable); + const isSelectedPhase = + (isILMAvailable && ilmPhase != null && ilmPhasesMap[ilmPhase] != null) || + !isILMAvailable; + + if (isSelectedPhase) { + const incompatible = + results != null && results[indexName] != null + ? results[indexName].incompatible + : undefined; + const sizeInBytes = getSizeInBytes({ indexName, stats }); + const docsCount = getDocsCount({ stats, indexName }); + return [ + ...validStats, + { + ilmPhase, + incompatible, + indexName, + pattern, + sizeInBytes, + docsCount, + }, + ]; + } else { + return validStats; + } + }, []), ]; } @@ -232,7 +229,7 @@ export const getLayersMultiDimensional = ({ groupByRollup: (d: Datum) => d.indexName, nodeLabel: (indexName: Datum) => indexName, shape: { - fillColor: (indexName: Key, sortIndex: number, node: Pick) => { + fillColor: (indexName: Key, _sortIndex: number, node: Pick) => { const pattern = getGroupFromPath(node.path) ?? ''; const flattenedBucket = pathToFlattenedBucketMap[`${pattern}${indexName}`]; diff --git a/x-pack/packages/security-solution/ecs_data_quality_dashboard/impl/data_quality/data_quality_panel/stat_label/index.tsx b/x-pack/packages/security-solution/ecs_data_quality_dashboard/impl/data_quality/data_quality_panel/stat_label/index.tsx index 31b4620fbb5f0..32402b49b570c 100644 --- a/x-pack/packages/security-solution/ecs_data_quality_dashboard/impl/data_quality/data_quality_panel/stat_label/index.tsx +++ b/x-pack/packages/security-solution/ecs_data_quality_dashboard/impl/data_quality/data_quality_panel/stat_label/index.tsx @@ -19,12 +19,11 @@ const Line2 = styled.span` const EMPTY = ' '; interface Props { - color?: string; line1?: string; line2?: string; } -export const StatLabel: React.FC = ({ color, line1 = EMPTY, line2 = EMPTY }) => ( +export const StatLabel: React.FC = ({ line1 = EMPTY, line2 = EMPTY }) => ( <> {line1} {line2} diff --git a/x-pack/packages/security-solution/ecs_data_quality_dashboard/impl/data_quality/data_quality_panel/tabs/ecs_compliant_tab/index.tsx b/x-pack/packages/security-solution/ecs_data_quality_dashboard/impl/data_quality/data_quality_panel/tabs/ecs_compliant_tab/index.tsx index b53567e709eb4..855ef75e80b84 100644 --- a/x-pack/packages/security-solution/ecs_data_quality_dashboard/impl/data_quality/data_quality_panel/tabs/ecs_compliant_tab/index.tsx +++ b/x-pack/packages/security-solution/ecs_data_quality_dashboard/impl/data_quality/data_quality_panel/tabs/ecs_compliant_tab/index.tsx @@ -26,15 +26,10 @@ const EmptyPromptContainer = styled.div` interface Props { indexName: string; - onAddToNewCase: (markdownComments: string[]) => void; partitionedFieldMetadata: PartitionedFieldMetadata; } -const EcsCompliantTabComponent: React.FC = ({ - indexName, - onAddToNewCase, - partitionedFieldMetadata, -}) => { +const EcsCompliantTabComponent: React.FC = ({ indexName, partitionedFieldMetadata }) => { const emptyPromptBody = useMemo(() => , []); const title = useMemo(() => , []); diff --git a/x-pack/packages/security-solution/ecs_data_quality_dashboard/impl/data_quality/data_quality_panel/tabs/helpers.tsx b/x-pack/packages/security-solution/ecs_data_quality_dashboard/impl/data_quality/data_quality_panel/tabs/helpers.tsx index 670357c3730f7..8790ab12591b3 100644 --- a/x-pack/packages/security-solution/ecs_data_quality_dashboard/impl/data_quality/data_quality_panel/tabs/helpers.tsx +++ b/x-pack/packages/security-solution/ecs_data_quality_dashboard/impl/data_quality/data_quality_panel/tabs/helpers.tsx @@ -212,11 +212,7 @@ export const getTabs = ({
), content: ( - + ), id: ECS_COMPLIANT_TAB_ID, name: i18n.ECS_COMPLIANT_FIELDS, diff --git a/x-pack/packages/security-solution/side_nav/src/solution_side_nav_panel.styles.ts b/x-pack/packages/security-solution/side_nav/src/solution_side_nav_panel.styles.ts index ca0f592f96a43..f5af4cd05ad24 100644 --- a/x-pack/packages/security-solution/side_nav/src/solution_side_nav_panel.styles.ts +++ b/x-pack/packages/security-solution/side_nav/src/solution_side_nav_panel.styles.ts @@ -69,7 +69,7 @@ export const SolutionSideNavCategoryTitleStyles = (euiTheme: EuiThemeComputed<{} font-weight: ${euiTheme.font.weight.medium}; `; -export const SolutionSideNavPanelLinksGroupStyles = (euiTheme: EuiThemeComputed<{}>) => css` +export const SolutionSideNavPanelLinksGroupStyles = () => css` padding-left: 0; padding-right: 0; `; diff --git a/x-pack/packages/security-solution/side_nav/src/solution_side_nav_panel.tsx b/x-pack/packages/security-solution/side_nav/src/solution_side_nav_panel.tsx index dfe2f643d4783..248121872018b 100644 --- a/x-pack/packages/security-solution/side_nav/src/solution_side_nav_panel.tsx +++ b/x-pack/packages/security-solution/side_nav/src/solution_side_nav_panel.tsx @@ -333,8 +333,7 @@ interface SolutionSideNavPanelItemsProps { */ const SolutionSideNavPanelItems: React.FC = React.memo( function SolutionSideNavPanelItems({ items, onClose }) { - const { euiTheme } = useEuiTheme(); - const panelLinksGroupClassNames = classNames(SolutionSideNavPanelLinksGroupStyles(euiTheme)); + const panelLinksGroupClassNames = classNames(SolutionSideNavPanelLinksGroupStyles()); return ( {items.map((item) => ( diff --git a/x-pack/plugins/security_solution/common/experimental_features.ts b/x-pack/plugins/security_solution/common/experimental_features.ts index 66b5f4bd948a1..e3225f65ea4b6 100644 --- a/x-pack/plugins/security_solution/common/experimental_features.ts +++ b/x-pack/plugins/security_solution/common/experimental_features.ts @@ -239,11 +239,6 @@ export const allowedExperimentalValues = Object.freeze({ */ unifiedManifestEnabled: true, - /** - * Enables Security AI Assistant's Flyout mode - */ - aiAssistantFlyoutMode: true, - /** * Enables the new modal for the value list items */ diff --git a/x-pack/plugins/security_solution/public/assistant/comment_actions/index.tsx b/x-pack/plugins/security_solution/public/assistant/comment_actions/index.tsx index df961ac223c4d..baf36e278b71f 100644 --- a/x-pack/plugins/security_solution/public/assistant/comment_actions/index.tsx +++ b/x-pack/plugins/security_solution/public/assistant/comment_actions/index.tsx @@ -23,16 +23,15 @@ import { useIsExperimentalFeatureEnabled } from '../../common/hooks/use_experime interface Props { message: ClientMessage; - isFlyoutMode: boolean; } -const CommentActionsComponent: React.FC = ({ message, isFlyoutMode }) => { +const CommentActionsComponent: React.FC = ({ message }) => { const toasts = useToasts(); const { cases } = useKibana().services; const dispatch = useDispatch(); const isModelEvaluationEnabled = useIsExperimentalFeatureEnabled('assistantModelEvaluation'); - const { showAssistantOverlay, traceOptions } = useAssistantContext(); + const { traceOptions } = useAssistantContext(); const associateNote = useCallback( (noteId: string) => dispatch(timelineActions.addNote({ id: TimelineId.active, noteId })), @@ -65,10 +64,6 @@ const CommentActionsComponent: React.FC = ({ message, isFlyoutMode }) => }); const onAddToExistingCase = useCallback(() => { - if (!isFlyoutMode) { - showAssistantOverlay({ showOverlay: false }); - } - selectCaseModal.open({ getAttachments: () => [ { @@ -78,7 +73,7 @@ const CommentActionsComponent: React.FC = ({ message, isFlyoutMode }) => }, ], }); - }, [content, isFlyoutMode, selectCaseModal, showAssistantOverlay]); + }, [content, selectCaseModal]); // Note: This feature is behind the `isModelEvaluationEnabled` FF. If ever released, this URL should be configurable // as APM data may not go to the same cluster where the Kibana instance is running diff --git a/x-pack/plugins/security_solution/public/assistant/get_comments/index.test.tsx b/x-pack/plugins/security_solution/public/assistant/get_comments/index.test.tsx index b59f14684a2ca..884af527f4be0 100644 --- a/x-pack/plugins/security_solution/public/assistant/get_comments/index.test.tsx +++ b/x-pack/plugins/security_solution/public/assistant/get_comments/index.test.tsx @@ -39,7 +39,6 @@ const testProps = { isFetchingResponse: false, currentConversation, showAnonymizedValues, - isFlyoutMode: false, }; describe('getComments', () => { it('Does not add error state message has no error', () => { diff --git a/x-pack/plugins/security_solution/public/assistant/get_comments/index.tsx b/x-pack/plugins/security_solution/public/assistant/get_comments/index.tsx index 10d5a15c800ae..8976c851c6e65 100644 --- a/x-pack/plugins/security_solution/public/assistant/get_comments/index.tsx +++ b/x-pack/plugins/security_solution/public/assistant/get_comments/index.tsx @@ -60,7 +60,6 @@ export const getComments = ({ refetchCurrentConversation, regenerateMessage, showAnonymizedValues, - isFlyoutMode, currentUserAvatar, setIsStreaming, }: { @@ -71,7 +70,6 @@ export const getComments = ({ refetchCurrentConversation: () => void; regenerateMessage: (conversationId: string) => void; showAnonymizedValues: boolean; - isFlyoutMode: boolean; currentUserAvatar?: UserAvatar; setIsStreaming: (isStreaming: boolean) => void; }): EuiCommentProps[] => { @@ -187,7 +185,7 @@ export const getComments = ({ return { ...messageProps, - actions: , + actions: , children: ( { @@ -31,16 +30,10 @@ export const AssistantOverlay: React.FC = () => { }); const { assistantAvailability } = useAssistantContext(); - const aiAssistantFlyoutMode = useIsExperimentalFeatureEnabled('aiAssistantFlyoutMode'); if (!assistantAvailability.hasAssistantPrivilege) { return null; } - return ( - - ); + return ; }; diff --git a/x-pack/plugins/security_solution/public/assistant/stack_management/management_settings.tsx b/x-pack/plugins/security_solution/public/assistant/stack_management/management_settings.tsx index 525315ca36eb2..31f3910fdab49 100644 --- a/x-pack/plugins/security_solution/public/assistant/stack_management/management_settings.tsx +++ b/x-pack/plugins/security_solution/public/assistant/stack_management/management_settings.tsx @@ -16,13 +16,10 @@ import { } from '@kbn/elastic-assistant'; import { useConversation } from '@kbn/elastic-assistant/impl/assistant/use_conversation'; import type { FetchConversationsResponse } from '@kbn/elastic-assistant/impl/assistant/api'; -import { useIsExperimentalFeatureEnabled } from '../../common/hooks/use_experimental_features'; const defaultSelectedConversationId = WELCOME_CONVERSATION_TITLE; export const ManagementSettings = React.memo(() => { - const isFlyoutMode = useIsExperimentalFeatureEnabled('aiAssistantFlyoutMode'); - const { baseConversations, http, @@ -49,8 +46,8 @@ export const ManagementSettings = React.memo(() => { const currentConversation = useMemo( () => conversations?.[defaultSelectedConversationId] ?? - getDefaultConversation({ cTitle: WELCOME_CONVERSATION_TITLE, isFlyoutMode }), - [conversations, getDefaultConversation, isFlyoutMode] + getDefaultConversation({ cTitle: WELCOME_CONVERSATION_TITLE }), + [conversations, getDefaultConversation] ); if (conversations) { @@ -58,7 +55,6 @@ export const ManagementSettings = React.memo(() => { diff --git a/x-pack/plugins/security_solution/public/attack_discovery/pages/header/index.test.tsx b/x-pack/plugins/security_solution/public/attack_discovery/pages/header/index.test.tsx index 938da7f930d51..4f242cedfc92e 100644 --- a/x-pack/plugins/security_solution/public/attack_discovery/pages/header/index.test.tsx +++ b/x-pack/plugins/security_solution/public/attack_discovery/pages/header/index.test.tsx @@ -38,7 +38,7 @@ describe('Header', () => { ); - const connectorSelector = screen.getByTestId('connectorSelectorPlaceholderButton'); + const connectorSelector = screen.getByTestId('addNewConnectorButton'); expect(connectorSelector).toBeInTheDocument(); }); @@ -61,7 +61,7 @@ describe('Header', () => { ); - const connectorSelector = screen.queryByTestId('connectorSelectorPlaceholderButton'); + const connectorSelector = screen.queryByTestId('addNewConnectorButton'); expect(connectorSelector).not.toBeInTheDocument(); }); diff --git a/x-pack/plugins/security_solution/public/attack_discovery/pages/header/index.tsx b/x-pack/plugins/security_solution/public/attack_discovery/pages/header/index.tsx index 78ad8db6d2f6e..fa4a9caa3dcb1 100644 --- a/x-pack/plugins/security_solution/public/attack_discovery/pages/header/index.tsx +++ b/x-pack/plugins/security_solution/public/attack_discovery/pages/header/index.tsx @@ -38,7 +38,6 @@ const HeaderComponent: React.FC = ({ onCancel, stats, }) => { - const isFlyoutMode = false; // always false for attack discovery const { hasAssistantPrivilege } = useAssistantAvailability(); const { euiTheme } = useEuiTheme(); const disabled = !hasAssistantPrivilege || connectorId == null; @@ -85,7 +84,6 @@ const HeaderComponent: React.FC = ({ {connectorsAreConfigured && ( { expect(bodyText).toHaveTextContent(FIRST_SET_UP); }); - - it('renders connector prompt', () => { - const connectorPrompt = screen.getByTestId('prompt'); - - expect(connectorPrompt).toBeInTheDocument(); - }); }); diff --git a/x-pack/plugins/security_solution/public/attack_discovery/pages/welcome/index.tsx b/x-pack/plugins/security_solution/public/attack_discovery/pages/welcome/index.tsx index 3f8488f6f64b4..7ab90b524bb93 100644 --- a/x-pack/plugins/security_solution/public/attack_discovery/pages/welcome/index.tsx +++ b/x-pack/plugins/security_solution/public/attack_discovery/pages/welcome/index.tsx @@ -6,21 +6,13 @@ */ import { AssistantAvatar } from '@kbn/elastic-assistant'; -import { useConnectorSetup } from '@kbn/elastic-assistant/impl/connectorland/connector_setup'; +import { ConnectorSetup } from '@kbn/elastic-assistant/impl/connectorland/connector_setup'; import { EuiEmptyPrompt, EuiFlexGroup, EuiFlexItem, EuiSpacer, EuiText } from '@elastic/eui'; import React, { useMemo } from 'react'; -import { noop } from 'lodash/fp'; import * as i18n from './translations'; const WelcomeComponent: React.FC = () => { - const { prompt: connectorPrompt } = useConnectorSetup({ - isFlyoutMode: true, // prevents the "Click to skip" button from showing - onConversationUpdate: async () => {}, - onSetupComplete: noop, // this callback cannot be used to select a connector, so it's not used - updateConversationsOnSaveConnector: false, // no conversation to update - }); - const title = useMemo( () => ( { - {connectorPrompt} + + {}} + updateConversationsOnSaveConnector={false} // no conversation to update + /> +
); }; diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/tabs/assistant/index.tsx b/x-pack/plugins/security_solution/public/timelines/components/timeline/tabs/assistant/index.tsx deleted file mode 100644 index a71b7c8231f59..0000000000000 --- a/x-pack/plugins/security_solution/public/timelines/components/timeline/tabs/assistant/index.tsx +++ /dev/null @@ -1,35 +0,0 @@ -/* - * 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 styled from 'styled-components'; -import { Assistant } from '@kbn/elastic-assistant'; -import type { Dispatch, SetStateAction } from 'react'; -import React, { memo } from 'react'; -import { TIMELINE_CONVERSATION_TITLE } from '../../../../../assistant/content/conversations/translations'; - -const AssistantTabContainer = styled.div` - overflow-y: auto; - width: 100%; -`; - -const AssistantTab: React.FC<{ - shouldRefocusPrompt: boolean; - setConversationTitle: Dispatch>; -}> = memo(({ shouldRefocusPrompt, setConversationTitle }) => ( - - - -)); - -AssistantTab.displayName = 'AssistantTab'; - -// eslint-disable-next-line import/no-default-export -export { AssistantTab as default }; diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/tabs/index.tsx b/x-pack/plugins/security_solution/public/timelines/components/timeline/tabs/index.tsx index 643a5b54be415..7f5ab6f316a62 100644 --- a/x-pack/plugins/security_solution/public/timelines/components/timeline/tabs/index.tsx +++ b/x-pack/plugins/security_solution/public/timelines/components/timeline/tabs/index.tsx @@ -6,17 +6,13 @@ */ import { EuiBadge, EuiSkeletonText, EuiTabs, EuiTab } from '@elastic/eui'; -import { css } from '@emotion/react'; import { isEmpty } from 'lodash/fp'; -import type { Ref, ReactElement, ComponentType, Dispatch, SetStateAction } from 'react'; -import React, { lazy, memo, Suspense, useCallback, useEffect, useMemo, useState } from 'react'; +import type { Ref, ReactElement, ComponentType } from 'react'; +import React, { lazy, memo, Suspense, useCallback, useEffect, useMemo } from 'react'; import { useDispatch } from 'react-redux'; import styled from 'styled-components'; import { useEsqlAvailability } from '../../../../common/hooks/esql/use_esql_availability'; -import { useIsExperimentalFeatureEnabled } from '../../../../common/hooks/use_experimental_features'; -import { useAssistantTelemetry } from '../../../../assistant/use_assistant_telemetry'; -import { useAssistantAvailability } from '../../../../assistant/use_assistant_availability'; import type { SessionViewConfig } from '../../../../../common/types'; import type { RowRenderer, TimelineId } from '../../../../../common/types/timeline'; import { TimelineTabs } from '../../../../../common/types/timeline'; @@ -41,7 +37,6 @@ import { } from './selectors'; import * as i18n from './translations'; import { useLicense } from '../../../../common/hooks/use_license'; -import { TIMELINE_CONVERSATION_TITLE } from '../../../../assistant/content/conversations/translations'; import { initializeTimelineSettings } from '../../../store/actions'; import { selectTimelineESQLSavedSearchId } from '../../../store/selectors'; @@ -96,7 +91,6 @@ interface BasicTimelineTab { type ActiveTimelineTabProps = BasicTimelineTab & { activeTimelineTab: TimelineTabs; showTimeline: boolean; - setConversationTitle: Dispatch>; }; const ActiveTimelineTab = memo( @@ -106,10 +100,8 @@ const ActiveTimelineTab = memo( rowRenderers, timelineId, timelineType, - setConversationTitle, showTimeline, }) => { - const { hasAssistantPrivilege } = useAssistantAvailability(); const { isTimelineEsqlEnabledByFeatureFlag, isEsqlAdvancedSettingEnabled } = useEsqlAvailability(); const timelineESQLSavedSearch = useShallowEqualSelector((state) => @@ -124,7 +116,6 @@ const ActiveTimelineTab = memo( } return isEsqlAdvancedSettingEnabled || timelineESQLSavedSearch != null; }, [isEsqlAdvancedSettingEnabled, isTimelineEsqlEnabledByFeatureFlag, timelineESQLSavedSearch]); - const aiAssistantFlyoutMode = useIsExperimentalFeatureEnabled('aiAssistantFlyoutMode'); const getTab = useCallback( (tab: TimelineTabs) => { switch (tab) { @@ -147,33 +138,6 @@ const ActiveTimelineTab = memo( [activeTimelineTab] ); - const getAssistantTab = useCallback(() => { - if (showTimeline) { - const AssistantTab = tabWithSuspense(lazy(() => import('./assistant'))); - return ( - - ); - } else { - return null; - } - }, [activeTimelineTab, setConversationTitle, showTimeline]); - /* Future developer -> why are we doing that * It is really expansive to re-render the QueryTab because the drag/drop * Therefore, we are only hiding its dom when switching to another tab @@ -228,7 +192,6 @@ const ActiveTimelineTab = memo( > {isGraphOrNotesTabs && getTab(activeTimelineTab)} - {hasAssistantPrivilege && !aiAssistantFlyoutMode ? getAssistantTab() : null} ); } @@ -271,8 +234,6 @@ const TabsContentComponent: React.FC = ({ sessionViewConfig, timelineDescription, }) => { - const aiAssistantFlyoutMode = useIsExperimentalFeatureEnabled('aiAssistantFlyoutMode'); - const { hasAssistantPrivilege } = useAssistantAvailability(); const dispatch = useDispatch(); const getActiveTab = useMemo(() => getActiveTabSelector(), []); const getShowTimeline = useMemo(() => getShowTimelineSelector(), []); @@ -312,9 +273,6 @@ const TabsContentComponent: React.FC = ({ const isEnterprisePlus = useLicense().isEnterprise(); - const [conversationTitle, setConversationTitle] = useState(TIMELINE_CONVERSATION_TITLE); - const { reportAssistantInvoked } = useAssistantTelemetry(); - const allTimelineNoteIds = useMemo(() => { const eventNoteIds = Object.values(eventIdToNoteIds).reduce( (acc, v) => [...acc, ...v], @@ -361,16 +319,6 @@ const TabsContentComponent: React.FC = ({ setActiveTab(TimelineTabs.session); }, [setActiveTab]); - const setSecurityAssistantAsActiveTab = useCallback(() => { - setActiveTab(TimelineTabs.securityAssistant); - if (activeTab !== TimelineTabs.securityAssistant) { - reportAssistantInvoked({ - conversationId: conversationTitle, - invokedBy: TIMELINE_CONVERSATION_TITLE, - }); - } - }, [activeTab, conversationTitle, reportAssistantInvoked, setActiveTab]); - const setEsqlAsActiveTab = useCallback(() => { dispatch( initializeTimelineSettings({ @@ -471,17 +419,6 @@ const TabsContentComponent: React.FC = ({ )} - {hasAssistantPrivilege && !aiAssistantFlyoutMode && ( - - {i18n.SECURITY_ASSISTANT} - - )} )} @@ -492,7 +429,6 @@ const TabsContentComponent: React.FC = ({ timelineId={timelineId} timelineType={timelineType} timelineDescription={timelineDescription} - setConversationTitle={setConversationTitle} showTimeline={showTimeline} /> diff --git a/x-pack/plugins/translations/translations/fr-FR.json b/x-pack/plugins/translations/translations/fr-FR.json index 0e63062476043..729e3b914f3b6 100644 --- a/x-pack/plugins/translations/translations/fr-FR.json +++ b/x-pack/plugins/translations/translations/fr-FR.json @@ -13310,7 +13310,6 @@ "xpack.elasticAssistant.assistant.settings.knowledgeBasedSettings.knowledgeBaseDescription": "Pour commencer, configurez ELSER dans {machineLearning}. {seeDocs}", "xpack.elasticAssistant.assistant.settings.knowledgeBaseSettings.knowledgeBaseInstalledDescription": "Initialisé sur `{kbIndexPattern}`", "xpack.elasticAssistant.assistant.settings.knowledgeBaseSettings.latestAndRiskiestOpenAlertsLabel": "Envoyez à l'Assistant d'IA des informations sur vos {alertsCount} alertes ouvertes ou confirmées les plus récentes et les plus risquées.", - "xpack.elasticAssistant.assistant.technicalPreview.tooltipContent": "Les réponses des systèmes d'IA ne sont pas toujours tout à fait exactes. Pour en savoir plus sur la fonctionnalité d'assistant et son utilisation, consultez {documentationLink}.", "xpack.elasticAssistant.dataAnonymizationEditor.contextEditor.selectAllFields": "Sélectionnez l'ensemble des {totalFields} champs", "xpack.elasticAssistant.dataAnonymizationEditor.contextEditor.selectedFields": "{selected} champs sélectionnés", "xpack.elasticAssistant.dataAnonymizationEditor.stats.allowedStat.allowedTooltip": "{allowed} champs sur {total} dans ce contexte sont autorisés à être inclus dans la conversation", @@ -13511,9 +13510,6 @@ "xpack.elasticAssistant.knowledgeBase.setupError": "Erreur lors de la configuration de la base de connaissances", "xpack.elasticAssistant.knowledgeBase.statusError": "Erreur lors de la récupération du statut de la base de connaissances", "xpack.elasticAssistant.securityAssistant.content.prompts.welcome.enterprisePrompt": "L'assistant d'IA d'Elastic n'est accessible qu'aux entreprises. Veuillez mettre votre licence à niveau pour bénéficier de cette fonctionnalité.", - "xpack.elasticAssistant.securityAssistant.content.prompts.welcome.welcomeGeneral2Prompt": "Avant toute chose, il faut configurer un Connecteur d'intelligence artificielle générative pour lancer cette expérience de chat ! Avec le connecteur d'IA générative, vous pourrez configurer l'accès à un service OpenAI ou à un service Amazon Bedrock, mais sachez que vous serez en mesure de déployer vos propres modèles au sein d'une instance Elastic Cloud et de les y utiliser à l'avenir... 😉", - "xpack.elasticAssistant.securityAssistant.content.prompts.welcome.welcomeGeneral3Prompt": "Cliquez sur le bouton \"Ajouter un connecteur\" ci-dessous pour continuer la conversation.", - "xpack.elasticAssistant.securityAssistant.content.prompts.welcome.welcomeGeneralPrompt": "Bienvenue sur votre assistant d’intelligence artificielle Elastic. Je suis votre portail 100 % open-code vers votre vie Elastic. Avec le temps, je serai capable de répondre à vos questions et de vous apporter mon aide concernant l’ensemble de vos informations contenues dans Elastic, et bien plus encore. En attendant, j’espère que cet aperçu anticipé vous donnera une idée de ce que nous pouvons créer en travaillant ensemble, en toute transparence. À bientôt !", "xpack.embeddableEnhanced.actions.panelNotifications.manyDrilldowns": "Le panneau comporte {count} recherches", "xpack.embeddableEnhanced.actions.panelNotifications.oneDrilldown": "Le panneau comporte 1 recherche", "xpack.embeddableEnhanced.Drilldowns": "Explorations", diff --git a/x-pack/plugins/translations/translations/ja-JP.json b/x-pack/plugins/translations/translations/ja-JP.json index e22254e169db7..2d88a1d937ef9 100644 --- a/x-pack/plugins/translations/translations/ja-JP.json +++ b/x-pack/plugins/translations/translations/ja-JP.json @@ -13289,7 +13289,6 @@ "xpack.elasticAssistant.assistant.settings.knowledgeBasedSettings.knowledgeBaseDescription": "{machineLearning}内でELSERを構成して開始します。{seeDocs}", "xpack.elasticAssistant.assistant.settings.knowledgeBaseSettings.knowledgeBaseInstalledDescription": "`{kbIndexPattern}`に初期化されました", "xpack.elasticAssistant.assistant.settings.knowledgeBaseSettings.latestAndRiskiestOpenAlertsLabel": "{alertsCount}件の最新の最もリスクが高い未解決または確認済みのアラートに関する情報をAI Assistantに送信します。", - "xpack.elasticAssistant.assistant.technicalPreview.tooltipContent": "AIシステムからの応答は、必ずしも完全に正確であるとは限りません。アシスタント機能とその使用方法の詳細については、{documentationLink}を参照してください。", "xpack.elasticAssistant.dataAnonymizationEditor.contextEditor.selectAllFields": "すべての{totalFields}フィールドを選択", "xpack.elasticAssistant.dataAnonymizationEditor.contextEditor.selectedFields": "選択した{selected}フィールド", "xpack.elasticAssistant.dataAnonymizationEditor.stats.allowedStat.allowedTooltip": "このコンテキストの{total}フィールドのうち{allowed}個を会話に含めることができます", @@ -13490,9 +13489,6 @@ "xpack.elasticAssistant.knowledgeBase.setupError": "ナレッジベースの設定エラー", "xpack.elasticAssistant.knowledgeBase.statusError": "ナレッジベースステータスの取得エラー", "xpack.elasticAssistant.securityAssistant.content.prompts.welcome.enterprisePrompt": "Elastic AI Assistantはエンタープライズユーザーのみご利用いただけます。この機能を使用するには、ライセンスをアップグレードしてください。", - "xpack.elasticAssistant.securityAssistant.content.prompts.welcome.welcomeGeneral2Prompt": "まず最初に、このチャットエクスペリエンスを開始するために生成AIコネクターを設定する必要があります。生成AIコネクターを使用すると、OpenAI ServiceまたはAmazon Bedrockサービスへのアクセスを設定できます。しかし、将来的にはElastic Cloudインスタンス内に独自のモデルをデプロイして、それをここで使うことができるようになると考えてください... 😉", - "xpack.elasticAssistant.securityAssistant.content.prompts.welcome.welcomeGeneral3Prompt": "会話を続けるには、以下の[コネクターの追加]ボタンをクリックしてください。", - "xpack.elasticAssistant.securityAssistant.content.prompts.welcome.welcomeGeneralPrompt": "Elastic AI Assistantへようこそ!Elasticを活用するための100%オープンコードのポータルです。いずれは、Elasticにあるすべての情報、そしてもっともっと多くのことについて、質問に答えたり、サポートを提供したりできるようになるでしょう。それまでは、この早期プレビューが、オープンな場で協力するときに生み出せるものの可能性を知るきっかけになることを願っています。どうぞよろしくお願いいたします。", "xpack.embeddableEnhanced.actions.panelNotifications.manyDrilldowns": "パネルには{count}個のドリルダウンがあります", "xpack.embeddableEnhanced.actions.panelNotifications.oneDrilldown": "パネルには 1 個のドリルダウンがあります", "xpack.embeddableEnhanced.Drilldowns": "ドリルダウン", diff --git a/x-pack/plugins/translations/translations/zh-CN.json b/x-pack/plugins/translations/translations/zh-CN.json index ca6d93a369053..bd78672523fc8 100644 --- a/x-pack/plugins/translations/translations/zh-CN.json +++ b/x-pack/plugins/translations/translations/zh-CN.json @@ -13315,7 +13315,6 @@ "xpack.elasticAssistant.assistant.settings.knowledgeBasedSettings.knowledgeBaseDescription": "在 {machineLearning} 中配置 ELSER 以开始。{seeDocs}", "xpack.elasticAssistant.assistant.settings.knowledgeBaseSettings.knowledgeBaseInstalledDescription": "已初始化为 `{kbIndexPattern}`", "xpack.elasticAssistant.assistant.settings.knowledgeBaseSettings.latestAndRiskiestOpenAlertsLabel": "发送有关 {alertsCount} 个最新和风险最高的未决或已确认告警的 AI 助手信息。", - "xpack.elasticAssistant.assistant.technicalPreview.tooltipContent": "来自 AI 系统的响应可能不会始终完全准确。有关辅助功能及其用法的详细信息,请参阅 {documentationLink}。", "xpack.elasticAssistant.dataAnonymizationEditor.contextEditor.selectAllFields": "选择所有 {totalFields} 个字段", "xpack.elasticAssistant.dataAnonymizationEditor.contextEditor.selectedFields": "已选定 {selected} 个字段", "xpack.elasticAssistant.dataAnonymizationEditor.stats.allowedStat.allowedTooltip": "允许在对话中包含此上下文中的 {allowed} 个(共 {total} 个)字段", @@ -13516,9 +13515,6 @@ "xpack.elasticAssistant.knowledgeBase.setupError": "设置知识库时出错", "xpack.elasticAssistant.knowledgeBase.statusError": "提取知识库状态时出错", "xpack.elasticAssistant.securityAssistant.content.prompts.welcome.enterprisePrompt": "Elastic AI 助手仅对企业用户可用。请升级许可证以使用此功能。", - "xpack.elasticAssistant.securityAssistant.content.prompts.welcome.welcomeGeneral2Prompt": "首先,我们需要设置生成式 AI 连接器以继续这种聊天体验!使用生成式 AI 连接器,您将能够配置 OpenAI 服务或 Amazon Bedrock 服务的访问权限,但请您相信,您将能够在 Elastic Cloud 实例中部署自己的模型,并于未来在此处使用那些模型……😉", - "xpack.elasticAssistant.securityAssistant.content.prompts.welcome.welcomeGeneral3Prompt": "接下来,单击下面的“添加连接器”按钮继续对话!", - "xpack.elasticAssistant.securityAssistant.content.prompts.welcome.welcomeGeneralPrompt": "欢迎使用 Elastic AI 助手!我是您的 100% 开放源代码门户,可帮助您熟练使用 Elastic。一段时间后,我将能够回答问题,并利用 Elastic 中的所有信息提供帮助等。到那时,我希望这个早期预览版本将为您打开思路,为我们的公开协作创造各种可能性。加油!", "xpack.embeddableEnhanced.actions.panelNotifications.manyDrilldowns": "面板有 {count} 个向下钻取", "xpack.embeddableEnhanced.actions.panelNotifications.oneDrilldown": "面板有 1 个向下钻取", "xpack.embeddableEnhanced.Drilldowns": "向下钻取",