Skip to content

Commit cae09d0

Browse files
angorayckibanamachineflorent-leborgneviduni94
authored
[8.18][Security Assistant] EIS usage callout (#221566) (#224107)
# Backport This will backport the following commits from `main` to `8.18`: - [Security Assistant] EIS usage callout #221566(#221566) --------- Co-authored-by: kibanamachine <[email protected]> Co-authored-by: florent-leborgne <[email protected]> Co-authored-by: Viduni Wickramarachchi <[email protected]>
1 parent 9799132 commit cae09d0

File tree

47 files changed

+1320
-179
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

47 files changed

+1320
-179
lines changed

‎src/platform/packages/shared/kbn-doc-links/src/get_doc_links.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -508,6 +508,7 @@ export const getDocLinks = ({ kibanaBranch, buildFlavor }: GetDocLinkOptions): D
508508
threatIntelInt: `${SECURITY_SOLUTION_DOCS}es-threat-intel-integrations.html`,
509509
endpointArtifacts: `${SECURITY_SOLUTION_DOCS}endpoint-artifacts.html`,
510510
eventMerging: `${SECURITY_SOLUTION_DOCS}endpoint-data-volume.html`,
511+
elasticAiFeatures: `${DOCS_WEBSITE_URL}solutions/security/ai`,
511512
policyResponseTroubleshooting: {
512513
full_disk_access: `${SECURITY_SOLUTION_DOCS}deploy-elastic-endpoint.html#enable-fda-endpoint`,
513514
macos_system_ext: `${SECURITY_SOLUTION_DOCS}deploy-elastic-endpoint.html#system-extension-endpoint`,

‎src/platform/packages/shared/kbn-doc-links/src/types.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -355,6 +355,7 @@ export interface DocLinks {
355355
readonly avcResults: string;
356356
readonly bidirectionalIntegrations: string;
357357
readonly trustedApps: string;
358+
readonly elasticAiFeatures: string;
358359
readonly eventFilters: string;
359360
readonly eventMerging: string;
360361
readonly blocklist: string;

‎x-pack/platform/packages/shared/kbn-elastic-assistant/impl/assistant/assistant_conversation_banner/elastic_llm_callout.test.tsx‎

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
/*
2+
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
3+
* or more contributor license agreements. Licensed under the Elastic License
4+
* 2.0; you may not use this file except in compliance with the Elastic License
5+
* 2.0.
6+
*/
7+
import React from 'react';
8+
import { render } from '@testing-library/react';
9+
import useLocalStorage from 'react-use/lib/useLocalStorage';
10+
import { ElasticLlmCallout } from './elastic_llm_callout';
11+
import { TestProviders } from '../../mock/test_providers/test_providers';
12+
13+
jest.mock('react-use/lib/useLocalStorage');
14+
15+
describe('ElasticLlmCallout', () => {
16+
const defaultProps = {
17+
showEISCallout: true,
18+
};
19+
20+
beforeEach(() => {
21+
jest.clearAllMocks();
22+
(useLocalStorage as jest.Mock).mockReturnValue([false, jest.fn()]);
23+
});
24+
25+
it('should not render when showEISCallout is false', () => {
26+
const { queryByTestId } = render(<ElasticLlmCallout showEISCallout={false} />, {
27+
wrapper: ({ children }) => <TestProviders>{children}</TestProviders>,
28+
});
29+
expect(queryByTestId('elasticLlmCallout')).not.toBeInTheDocument();
30+
});
31+
32+
it('should not render when tour is completed', () => {
33+
(useLocalStorage as jest.Mock).mockReturnValue([true, jest.fn()]);
34+
const { queryByTestId } = render(
35+
<TestProviders>
36+
<ElasticLlmCallout {...defaultProps} />
37+
</TestProviders>,
38+
{
39+
wrapper: ({ children }) => <TestProviders>{children}</TestProviders>,
40+
}
41+
);
42+
43+
expect(queryByTestId('elasticLlmCallout')).not.toBeInTheDocument();
44+
});
45+
46+
it('should render links', () => {
47+
const { queryByTestId } = render(
48+
<TestProviders>
49+
<ElasticLlmCallout {...defaultProps} />
50+
</TestProviders>,
51+
{ wrapper: ({ children }) => <TestProviders>{children}</TestProviders> }
52+
);
53+
expect(queryByTestId('elasticLlmUsageCostLink')).toHaveTextContent('additional costs incur');
54+
expect(queryByTestId('elasticLlmConnectorLink')).toHaveTextContent('connector');
55+
});
56+
57+
it('should show callout when showEISCallout changes to true', () => {
58+
const { rerender, queryByTestId } = render(
59+
<TestProviders>
60+
<ElasticLlmCallout showEISCallout={false} />
61+
</TestProviders>,
62+
{ wrapper: ({ children }) => <TestProviders>{children}</TestProviders> }
63+
);
64+
expect(queryByTestId('elasticLlmCallout')).not.toBeInTheDocument();
65+
66+
rerender(<ElasticLlmCallout showEISCallout={true} />);
67+
expect(queryByTestId('elasticLlmCallout')).toBeInTheDocument();
68+
});
69+
});

‎x-pack/platform/packages/shared/kbn-elastic-assistant/impl/assistant/assistant_conversation_banner/elastic_llm_callout.tsx‎

Lines changed: 104 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,104 @@
1+
/*
2+
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
3+
* or more contributor license agreements. Licensed under the Elastic License
4+
* 2.0; you may not use this file except in compliance with the Elastic License
5+
* 2.0.
6+
*/
7+
import React, { useCallback, useEffect, useState } from 'react';
8+
import useLocalStorage from 'react-use/lib/useLocalStorage';
9+
10+
import { css } from '@emotion/react';
11+
import { i18n } from '@kbn/i18n';
12+
import { FormattedMessage } from '@kbn/i18n-react';
13+
import { EuiCallOut, EuiLink, useEuiTheme } from '@elastic/eui';
14+
import { useAssistantContext } from '../../assistant_context';
15+
import { NEW_FEATURES_TOUR_STORAGE_KEYS } from '../../tour/const';
16+
import { useTourStorageKey } from '../../tour/common/hooks/use_tour_storage_key';
17+
18+
export const ElasticLlmCallout = ({ showEISCallout }: { showEISCallout: boolean }) => {
19+
const {
20+
getUrlForApp,
21+
docLinks: {
22+
links: {
23+
observability: { elasticManagedLlmUsageCost: ELASTIC_LLM_USAGE_COST_LINK },
24+
},
25+
},
26+
} = useAssistantContext();
27+
const { euiTheme } = useEuiTheme();
28+
const tourStorageKey = useTourStorageKey(
29+
NEW_FEATURES_TOUR_STORAGE_KEYS.CONVERSATION_CONNECTOR_ELASTIC_LLM
30+
);
31+
const [tourCompleted, setTourCompleted] = useLocalStorage<boolean>(tourStorageKey, false);
32+
const [showCallOut, setShowCallOut] = useState<boolean>(showEISCallout);
33+
34+
const onDismiss = useCallback(() => {
35+
setShowCallOut(false);
36+
setTourCompleted(true);
37+
}, [setTourCompleted]);
38+
39+
useEffect(() => {
40+
if (showEISCallout && !tourCompleted) {
41+
setShowCallOut(true);
42+
} else {
43+
setShowCallOut(false);
44+
}
45+
}, [showEISCallout, tourCompleted]);
46+
47+
if (!showCallOut) {
48+
return null;
49+
}
50+
51+
return (
52+
<EuiCallOut
53+
data-test-subj="elasticLlmCallout"
54+
onDismiss={onDismiss}
55+
iconType="iInCircle"
56+
title={i18n.translate('xpack.elasticAssistant.assistant.connectors.elasticLlmCallout.title', {
57+
defaultMessage: 'You are now using the Elastic Managed LLM connector',
58+
})}
59+
size="s"
60+
css={css`
61+
padding: ${euiTheme.size.s} !important;
62+
`}
63+
>
64+
<p>
65+
<FormattedMessage
66+
id="xpack.elasticAssistant.assistant.connectors.tour.elasticLlmDescription"
67+
defaultMessage="Elastic AI Assistant and other AI features are powered by an LLM. The Elastic Managed LLM connector is used by default ({costLink}) when no custom connectors are available. You can configure a {customConnector} if you prefer."
68+
values={{
69+
costLink: (
70+
<EuiLink
71+
data-test-subj="elasticLlmUsageCostLink"
72+
href={ELASTIC_LLM_USAGE_COST_LINK}
73+
target="_blank"
74+
rel="noopener noreferrer"
75+
external
76+
>
77+
<FormattedMessage
78+
id="xpack.elasticAssistant.assistant.eisCallout.extraCost.label"
79+
defaultMessage="additional costs incur"
80+
/>
81+
</EuiLink>
82+
),
83+
customConnector: (
84+
<EuiLink
85+
data-test-subj="elasticLlmConnectorLink"
86+
href={getUrlForApp('management', {
87+
path: `/insightsAndAlerting/triggersActionsConnectors/connectors`,
88+
})}
89+
target="_blank"
90+
rel="noopener noreferrer"
91+
external
92+
>
93+
<FormattedMessage
94+
id="xpack.elasticAssistant.assistant.eisCallout.connector.label"
95+
defaultMessage="custom connector"
96+
/>
97+
</EuiLink>
98+
),
99+
}}
100+
/>
101+
</p>
102+
</EuiCallOut>
103+
);
104+
};

‎x-pack/platform/packages/shared/kbn-elastic-assistant/impl/assistant/assistant_conversation_banner/index.test.tsx‎

Lines changed: 90 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,90 @@
1+
/*
2+
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
3+
* or more contributor license agreements. Licensed under the Elastic License
4+
* 2.0; you may not use this file except in compliance with the Elastic License
5+
* 2.0.
6+
*/
7+
import React from 'react';
8+
import { render, screen } from '@testing-library/react';
9+
import { AssistantConversationBanner } from '.';
10+
import { Conversation, useAssistantContext } from '../../..';
11+
import { customConvo } from '../../mock/conversation';
12+
import { AIConnector } from '../../connectorland/connector_selector';
13+
14+
jest.mock('../../..');
15+
16+
jest.mock('../../connectorland/connector_missing_callout', () => ({
17+
ConnectorMissingCallout: () => <div data-test-subj="connector-missing-callout" />,
18+
}));
19+
20+
jest.mock('./elastic_llm_callout', () => ({
21+
ElasticLlmCallout: () => <div data-test-subj="elastic-llm-callout" />,
22+
}));
23+
24+
describe('AssistantConversationBanner', () => {
25+
const setIsSettingsModalVisible = jest.fn();
26+
27+
beforeEach(() => {
28+
jest.clearAllMocks();
29+
});
30+
31+
it('renders ConnectorMissingCallout when shouldShowMissingConnectorCallout is true', () => {
32+
(useAssistantContext as jest.Mock).mockReturnValue({ inferenceEnabled: true });
33+
34+
render(
35+
<AssistantConversationBanner
36+
isSettingsModalVisible={false}
37+
setIsSettingsModalVisible={setIsSettingsModalVisible}
38+
shouldShowMissingConnectorCallout={true}
39+
currentConversation={undefined}
40+
connectors={[]}
41+
/>
42+
);
43+
44+
expect(screen.getByTestId('connector-missing-callout')).toBeInTheDocument();
45+
});
46+
47+
it('renders ElasticLlmCallout when Elastic LLM is enabled', () => {
48+
(useAssistantContext as jest.Mock).mockReturnValue({ inferenceEnabled: true });
49+
const mockConnectors = [
50+
{ id: 'mockLLM', actionTypeId: '.inference', isPreconfigured: true },
51+
] as AIConnector[];
52+
53+
const mockConversation = {
54+
...customConvo,
55+
id: 'mockConversation',
56+
apiConfig: {
57+
connectorId: 'mockLLM',
58+
actionTypeId: '.inference',
59+
},
60+
} as Conversation;
61+
62+
render(
63+
<AssistantConversationBanner
64+
isSettingsModalVisible={false}
65+
setIsSettingsModalVisible={setIsSettingsModalVisible}
66+
shouldShowMissingConnectorCallout={false}
67+
currentConversation={mockConversation}
68+
connectors={mockConnectors}
69+
/>
70+
);
71+
72+
expect(screen.getByTestId('elastic-llm-callout')).toBeInTheDocument();
73+
});
74+
75+
it('renders nothing when no conditions are met', () => {
76+
(useAssistantContext as jest.Mock).mockReturnValue({ inferenceEnabled: false });
77+
78+
const { container } = render(
79+
<AssistantConversationBanner
80+
isSettingsModalVisible={false}
81+
setIsSettingsModalVisible={setIsSettingsModalVisible}
82+
shouldShowMissingConnectorCallout={false}
83+
currentConversation={undefined}
84+
connectors={[]}
85+
/>
86+
);
87+
88+
expect(container).toBeEmptyDOMElement();
89+
});
90+
});

‎x-pack/platform/packages/shared/kbn-elastic-assistant/impl/assistant/assistant_conversation_banner/index.tsx‎

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
/*
2+
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
3+
* or more contributor license agreements. Licensed under the Elastic License
4+
* 2.0; you may not use this file except in compliance with the Elastic License
5+
* 2.0.
6+
*/
7+
8+
import React, { useMemo } from 'react';
9+
import { Conversation, useAssistantContext } from '../../..';
10+
import { isElasticManagedLlmConnector } from '../../connectorland/helpers';
11+
import { ConnectorMissingCallout } from '../../connectorland/connector_missing_callout';
12+
import { ElasticLlmCallout } from './elastic_llm_callout';
13+
import { AIConnector } from '../../connectorland/connector_selector';
14+
15+
export const AssistantConversationBanner = React.memo(
16+
({
17+
isSettingsModalVisible,
18+
setIsSettingsModalVisible,
19+
shouldShowMissingConnectorCallout,
20+
currentConversation,
21+
connectors,
22+
}: {
23+
isSettingsModalVisible: boolean;
24+
setIsSettingsModalVisible: React.Dispatch<React.SetStateAction<boolean>>;
25+
shouldShowMissingConnectorCallout: boolean;
26+
currentConversation: Conversation | undefined;
27+
connectors: AIConnector[] | undefined;
28+
}) => {
29+
const { inferenceEnabled } = useAssistantContext();
30+
const showEISCallout = useMemo(() => {
31+
if (inferenceEnabled && currentConversation && currentConversation.id !== '') {
32+
if (currentConversation?.apiConfig?.connectorId) {
33+
return connectors?.some(
34+
(c) =>
35+
c.id === currentConversation.apiConfig?.connectorId && isElasticManagedLlmConnector(c)
36+
);
37+
}
38+
}
39+
}, [inferenceEnabled, currentConversation, connectors]);
40+
if (shouldShowMissingConnectorCallout) {
41+
return (
42+
<ConnectorMissingCallout
43+
isConnectorConfigured={(connectors?.length ?? 0) > 0}
44+
isSettingsModalVisible={isSettingsModalVisible}
45+
setIsSettingsModalVisible={setIsSettingsModalVisible}
46+
/>
47+
);
48+
}
49+
50+
if (showEISCallout) {
51+
return <ElasticLlmCallout showEISCallout={showEISCallout} />;
52+
}
53+
54+
return null;
55+
}
56+
);
57+
58+
AssistantConversationBanner.displayName = 'AssistantConversationBanner';

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

Lines changed: 13 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,8 @@ import { AssistantSettingsModal } from '../settings/assistant_settings_modal';
2020
import { AIConnector } from '../../connectorland/connector_selector';
2121
import { SettingsContextMenu } from '../settings/settings_context_menu/settings_context_menu';
2222
import * as i18n from './translations';
23+
import { ElasticLLMCostAwarenessTour } from '../../tour/elastic_llm';
24+
import { NEW_FEATURES_TOUR_STORAGE_KEYS } from '../../tour/const';
2325

2426
interface OwnProps {
2527
selectedConversation: Conversation | undefined;
@@ -158,12 +160,18 @@ export const AssistantHeader: React.FC<Props> = ({
158160
<EuiFlexItem grow={false}>
159161
<EuiFlexGroup gutterSize="xs" alignItems={'center'}>
160162
<EuiFlexItem>
161-
<ConnectorSelectorInline
162-
isDisabled={isDisabled || selectedConversation === undefined}
163+
<ElasticLLMCostAwarenessTour
164+
isDisabled={isDisabled}
163165
selectedConnectorId={selectedConnectorId}
164-
selectedConversation={selectedConversation}
165-
onConnectorSelected={onConversationChange}
166-
/>
166+
storageKey={NEW_FEATURES_TOUR_STORAGE_KEYS.ELASTIC_LLM_USAGE_ASSISTANT_HEADER}
167+
>
168+
<ConnectorSelectorInline
169+
isDisabled={isDisabled || selectedConversation === undefined}
170+
selectedConnectorId={selectedConnectorId}
171+
selectedConversation={selectedConversation}
172+
onConnectorSelected={onConversationChange}
173+
/>
174+
</ElasticLLMCostAwarenessTour>
167175
</EuiFlexItem>
168176
<EuiFlexItem id={AI_ASSISTANT_SETTINGS_MENU_CONTAINER_ID}>
169177
<SettingsContextMenu

0 commit comments

Comments
 (0)