From d8382df12d810d263e0fd91d0648675664d53990 Mon Sep 17 00:00:00 2001 From: "paulina.shakirova" Date: Thu, 26 Mar 2026 18:58:33 +0100 Subject: [PATCH 1/4] [AiButton] Migrate ai-related buttons to use custom styles --- .../plugins/elastic_assistant/moon.yml | 1 + .../buttons/regenerate_response_button.tsx | 14 +++++----- .../plugins/elastic_assistant/tsconfig.json | 1 + .../plugins/security_solution/moon.yml | 1 + .../new_agent_builder_attachment.tsx | 27 +++++++------------ .../components/ai_assistant/index.tsx | 19 +++++++------ .../plugins/security_solution/tsconfig.json | 1 + 7 files changed, 29 insertions(+), 35 deletions(-) diff --git a/x-pack/solutions/security/plugins/elastic_assistant/moon.yml b/x-pack/solutions/security/plugins/elastic_assistant/moon.yml index ba5de9a53bc5a..b69ff80b89b1d 100644 --- a/x-pack/solutions/security/plugins/elastic_assistant/moon.yml +++ b/x-pack/solutions/security/plugins/elastic_assistant/moon.yml @@ -76,6 +76,7 @@ dependsOn: - '@kbn/security-solution-navigation' - '@kbn/rison' - '@kbn/search-errors' + - '@kbn/shared-ux-ai-components' - '@kbn/securitysolution-t-grid' - '@kbn/triggers-actions-ui-plugin' - '@kbn/discover-plugin' diff --git a/x-pack/solutions/security/plugins/elastic_assistant/public/src/components/get_comments/stream/buttons/regenerate_response_button.tsx b/x-pack/solutions/security/plugins/elastic_assistant/public/src/components/get_comments/stream/buttons/regenerate_response_button.tsx index 3b5fdc935a411..f134757fcf85e 100644 --- a/x-pack/solutions/security/plugins/elastic_assistant/public/src/components/get_comments/stream/buttons/regenerate_response_button.tsx +++ b/x-pack/solutions/security/plugins/elastic_assistant/public/src/components/get_comments/stream/buttons/regenerate_response_button.tsx @@ -5,22 +5,22 @@ * 2.0. */ -import type { EuiButtonEmptyProps } from '@elastic/eui'; -import { EuiButtonEmpty } from '@elastic/eui'; import React from 'react'; import { i18n } from '@kbn/i18n'; +import { AiButton, type AiButtonProps } from '@kbn/shared-ux-ai-components'; -export function RegenerateResponseButton(props: Partial) { +export function RegenerateResponseButton(props: AiButtonProps) { return ( - {i18n.translate('xpack.elasticAssistantPlugin.aiAssistant.regenerateResponseButtonLabel', { defaultMessage: 'Regenerate', })} - + ); } diff --git a/x-pack/solutions/security/plugins/elastic_assistant/tsconfig.json b/x-pack/solutions/security/plugins/elastic_assistant/tsconfig.json index f371dacfe8925..3dce6dba2fc71 100644 --- a/x-pack/solutions/security/plugins/elastic_assistant/tsconfig.json +++ b/x-pack/solutions/security/plugins/elastic_assistant/tsconfig.json @@ -74,6 +74,7 @@ "@kbn/security-solution-navigation", "@kbn/rison", "@kbn/search-errors", + "@kbn/shared-ux-ai-components", "@kbn/securitysolution-t-grid", "@kbn/triggers-actions-ui-plugin", "@kbn/discover-plugin", diff --git a/x-pack/solutions/security/plugins/security_solution/moon.yml b/x-pack/solutions/security/plugins/security_solution/moon.yml index bddbd3e89d0eb..6ac430eb6fc8d 100644 --- a/x-pack/solutions/security/plugins/security_solution/moon.yml +++ b/x-pack/solutions/security/plugins/security_solution/moon.yml @@ -286,6 +286,7 @@ dependsOn: - '@kbn/controls-constants' - '@kbn/anonymization-plugin' - '@kbn/anonymization-common' + - '@kbn/shared-ux-ai-components' - '@kbn/controls-schemas' tags: - plugin diff --git a/x-pack/solutions/security/plugins/security_solution/public/agent_builder/components/new_agent_builder_attachment.tsx b/x-pack/solutions/security/plugins/security_solution/public/agent_builder/components/new_agent_builder_attachment.tsx index 758d12c869a84..8e2895085fe01 100644 --- a/x-pack/solutions/security/plugins/security_solution/public/agent_builder/components/new_agent_builder_attachment.tsx +++ b/x-pack/solutions/security/plugins/security_solution/public/agent_builder/components/new_agent_builder_attachment.tsx @@ -6,7 +6,8 @@ */ import type { EuiButtonColor } from '@elastic/eui'; -import { EuiButtonEmpty, EuiFlexGroup, EuiFlexItem, EuiIcon, EuiToolTip } from '@elastic/eui'; +import { EuiToolTip } from '@elastic/eui'; +import { AiButton } from '@kbn/shared-ux-ai-components'; import React, { memo, useCallback } from 'react'; import type { EuiButtonEmptySizes } from '@elastic/eui/src/components/button/button_empty/button_empty'; import type { AgentBuilderAddToChatTelemetry } from '../hooks/use_report_add_to_chat'; @@ -71,25 +72,17 @@ export const NewAgentBuilderAttachment = memo(function NewAgentBuilderAttachment } const button = ( - - - - - - {i18n.ADD_TO_CHAT} - - + {i18n.ADD_TO_CHAT} + ); if (!shouldShowLicenseTooltip) { @@ -97,8 +90,6 @@ export const NewAgentBuilderAttachment = memo(function NewAgentBuilderAttachment } return ( - - {button} - + {button} ); }); diff --git a/x-pack/solutions/security/plugins/security_solution/public/detection_engine/rule_creation_ui/components/ai_assistant/index.tsx b/x-pack/solutions/security/plugins/security_solution/public/detection_engine/rule_creation_ui/components/ai_assistant/index.tsx index 25d966d402c4e..f25c65228bc63 100644 --- a/x-pack/solutions/security/plugins/security_solution/public/detection_engine/rule_creation_ui/components/ai_assistant/index.tsx +++ b/x-pack/solutions/security/plugins/security_solution/public/detection_engine/rule_creation_ui/components/ai_assistant/index.tsx @@ -10,9 +10,7 @@ import { EuiSpacer } from '@elastic/eui'; import { FormattedMessage } from '@kbn/i18n-react'; import { NewChat } from '@kbn/elastic-assistant'; - -import { AssistantIcon } from '@kbn/ai-assistant-icon'; -import { css } from '@emotion/react'; +import { AiButton } from '@kbn/shared-ux-ai-components'; import { SecurityAgentBuilderAttachments } from '../../../../../common/constants'; import { METRIC_TYPE, TELEMETRY_EVENT, track } from '../../../../common/lib/telemetry'; import { useAssistantAvailability } from '../../../../assistant/use_assistant_availability'; @@ -154,13 +152,14 @@ Proposed solution should be valid and must not contain new line symbols (\\n)`; isAssistantEnabled={isAssistantEnabled} onExportCodeBlock={handleOnExportCodeBlock} > - - {i18n.ASK_ASSISTANT_ERROR_BUTTON} + + {i18n.ASK_ASSISTANT_ERROR_BUTTON} + ), }} diff --git a/x-pack/solutions/security/plugins/security_solution/tsconfig.json b/x-pack/solutions/security/plugins/security_solution/tsconfig.json index dd6fd5715343f..8c8168301c1c8 100644 --- a/x-pack/solutions/security/plugins/security_solution/tsconfig.json +++ b/x-pack/solutions/security/plugins/security_solution/tsconfig.json @@ -288,6 +288,7 @@ "@kbn/controls-constants", "@kbn/anonymization-plugin", "@kbn/anonymization-common", + "@kbn/shared-ux-ai-components" "@kbn/controls-schemas" ] } From 3f1d97606527a3fcd720026f02eea06b98464681 Mon Sep 17 00:00:00 2001 From: "paulina.shakirova" Date: Thu, 26 Mar 2026 19:14:04 +0100 Subject: [PATCH 2/4] part 2 --- .../try_ai_agent_context_menu_item.tsx | 15 ++++++------ .../impl/new_chat/index.test.tsx | 12 ++++------ .../impl/new_chat_by_title/index.test.tsx | 12 ++++++---- .../impl/new_chat_by_title/index.tsx | 23 ++++++------------- 4 files changed, 27 insertions(+), 35 deletions(-) diff --git a/x-pack/platform/packages/shared/kbn-elastic-assistant/impl/assistant/settings/settings_context_menu/try_ai_agent_context_menu_item.tsx b/x-pack/platform/packages/shared/kbn-elastic-assistant/impl/assistant/settings/settings_context_menu/try_ai_agent_context_menu_item.tsx index bab72c9e39967..6f85f648df928 100644 --- a/x-pack/platform/packages/shared/kbn-elastic-assistant/impl/assistant/settings/settings_context_menu/try_ai_agent_context_menu_item.tsx +++ b/x-pack/platform/packages/shared/kbn-elastic-assistant/impl/assistant/settings/settings_context_menu/try_ai_agent_context_menu_item.tsx @@ -6,9 +6,10 @@ */ import React, { useEffect, useRef } from 'react'; -import { EuiButton, EuiContextMenuItem, EuiToolTip } from '@elastic/eui'; +import { EuiContextMenuItem, EuiToolTip } from '@elastic/eui'; import { css } from '@emotion/react'; import { AGENT_BUILDER_EVENT_TYPES } from '@kbn/agent-builder-common'; +import { AiButton } from '@kbn/shared-ux-ai-components'; import type { AnalyticsServiceStart } from '@kbn/core-analytics-browser'; import * as i18n from './translations'; @@ -42,11 +43,11 @@ export const TryAIAgentContextMenuItem: React.FC<{ width: 100%; `} > - handleOpenAIAgentModal('security_settings_menu')} iconType="productAgent" - color="accent" + variant="base" size="s" fullWidth isDisabled={!hasAgentBuilderManagePrivilege} @@ -56,15 +57,15 @@ export const TryAIAgentContextMenuItem: React.FC<{ `} > {i18n.TRY_AI_AGENT} - + ) : ( - handleOpenAIAgentModal('security_settings_menu')} iconType="productAgent" - color="accent" + variant="base" size="s" fullWidth isDisabled={!hasAgentBuilderManagePrivilege} @@ -74,7 +75,7 @@ export const TryAIAgentContextMenuItem: React.FC<{ `} > {i18n.TRY_AI_AGENT} - + )} ); diff --git a/x-pack/platform/packages/shared/kbn-elastic-assistant/impl/new_chat/index.test.tsx b/x-pack/platform/packages/shared/kbn-elastic-assistant/impl/new_chat/index.test.tsx index 9dd420c0086d4..cbb7577465754 100644 --- a/x-pack/platform/packages/shared/kbn-elastic-assistant/impl/new_chat/index.test.tsx +++ b/x-pack/platform/packages/shared/kbn-elastic-assistant/impl/new_chat/index.test.tsx @@ -48,12 +48,11 @@ describe('NewChat', () => { jest.clearAllMocks(); }); - it('renders the default New Chat button with a discuss icon', () => { + it('renders the default New Chat button with an assistant (AiButton) icon', () => { render(); - const newChatButton = screen.getByTestId('newChat'); - - expect(newChatButton.querySelector('[data-euiicon-type="discuss"]')).toBeInTheDocument(); + expect(screen.getByTestId('newChat')).toBeInTheDocument(); + expect(screen.getByRole('button', { name: 'Chat' })).toBeInTheDocument(); }); it('does not render the default New Chat button with a discuss icon when assistant is not visible', () => { @@ -71,9 +70,8 @@ describe('NewChat', () => { it('renders the default New Chat button even if the Assistant is disabled', () => { render(); - const newChatButton = screen.getByTestId('newChat'); - - expect(newChatButton.querySelector('[data-euiicon-type="discuss"]')).toBeInTheDocument(); + expect(screen.getByTestId('newChat')).toBeInTheDocument(); + expect(screen.getByRole('button', { name: 'Chat' })).toBeInTheDocument(); }); it('renders the default "New Chat" text when children are NOT provided', () => { diff --git a/x-pack/platform/packages/shared/kbn-elastic-assistant/impl/new_chat_by_title/index.test.tsx b/x-pack/platform/packages/shared/kbn-elastic-assistant/impl/new_chat_by_title/index.test.tsx index 68371599fa78f..015e2b47f2d94 100644 --- a/x-pack/platform/packages/shared/kbn-elastic-assistant/impl/new_chat_by_title/index.test.tsx +++ b/x-pack/platform/packages/shared/kbn-elastic-assistant/impl/new_chat_by_title/index.test.tsx @@ -9,7 +9,7 @@ import React from 'react'; import { render } from '@testing-library/react'; import userEvent from '@testing-library/user-event'; -import { BUTTON_ICON_TEST_ID, BUTTON_TEST_ID, BUTTON_TEXT_TEST_ID, NewChatByTitle } from '.'; +import { BUTTON_TEST_ID, BUTTON_TEXT_TEST_ID, NewChatByTitle } from '.'; const testProps = { showAssistantOverlay: jest.fn(), @@ -21,18 +21,20 @@ describe('NewChatByTitle', () => { }); it('should render icon only by default', () => { - const { getByTestId, queryByTestId } = render(); + const { getByTestId, queryByTestId, getByRole } = render(); expect(getByTestId(BUTTON_TEST_ID)).toBeInTheDocument(); - expect(getByTestId(BUTTON_ICON_TEST_ID)).toBeInTheDocument(); + expect(getByRole('button', { name: 'Ask AI Assistant' })).toBeInTheDocument(); expect(queryByTestId(BUTTON_TEXT_TEST_ID)).not.toBeInTheDocument(); }); it('should render the button with icon and text', () => { - const { getByTestId } = render(); + const { getByTestId, getByRole } = render( + + ); expect(getByTestId(BUTTON_TEST_ID)).toBeInTheDocument(); - expect(getByTestId(BUTTON_ICON_TEST_ID)).toBeInTheDocument(); + expect(getByRole('button', { name: 'Ask AI Assistant' })).toBeInTheDocument(); expect(getByTestId(BUTTON_TEXT_TEST_ID)).toHaveTextContent('Ask AI Assistant'); }); diff --git a/x-pack/platform/packages/shared/kbn-elastic-assistant/impl/new_chat_by_title/index.tsx b/x-pack/platform/packages/shared/kbn-elastic-assistant/impl/new_chat_by_title/index.tsx index 1f7b1218c55e0..446e20b2e5b68 100644 --- a/x-pack/platform/packages/shared/kbn-elastic-assistant/impl/new_chat_by_title/index.tsx +++ b/x-pack/platform/packages/shared/kbn-elastic-assistant/impl/new_chat_by_title/index.tsx @@ -6,14 +6,12 @@ */ import type { EuiButtonColor } from '@elastic/eui'; -import { EuiButtonEmpty, EuiFlexGroup, EuiFlexItem } from '@elastic/eui'; import React, { useCallback } from 'react'; -import { AssistantIcon } from '@kbn/ai-assistant-icon'; +import { AiButton } from '@kbn/shared-ux-ai-components'; import type { EuiButtonEmptySizes } from '@elastic/eui/src/components/button/button_empty/button_empty'; import * as i18n from './translations'; export const BUTTON_TEST_ID = 'newChatByTitle'; -export const BUTTON_ICON_TEST_ID = 'newChatByTitleIcon'; export const BUTTON_TEXT_TEST_ID = 'newChatByTitleText'; export interface NewChatByTitleComponentProps { @@ -45,24 +43,17 @@ const NewChatByTitleComponent: React.FC = ({ const showOverlay = useCallback(() => showAssistantOverlay(true), [showAssistantOverlay]); return ( - - - - - - {text && ( - - {text} - - )} - - + {text ? {text} : null} + ); }; From c14ec228454cdf72a97958e3ac20187bc11deac7 Mon Sep 17 00:00:00 2001 From: "paulina.shakirova" Date: Fri, 27 Mar 2026 10:18:51 +0100 Subject: [PATCH 3/4] fix tsconfig not loading --- .../platform/packages/shared/kbn-elastic-assistant/moon.yml | 2 +- .../packages/shared/kbn-elastic-assistant/tsconfig.json | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/x-pack/platform/packages/shared/kbn-elastic-assistant/moon.yml b/x-pack/platform/packages/shared/kbn-elastic-assistant/moon.yml index fdf0933ba4285..df11cb66241ae 100644 --- a/x-pack/platform/packages/shared/kbn-elastic-assistant/moon.yml +++ b/x-pack/platform/packages/shared/kbn-elastic-assistant/moon.yml @@ -56,8 +56,8 @@ dependsOn: - '@kbn/kibana-react-plugin' - '@kbn/core-analytics-browser' - '@kbn/shared-ux-utility' - - '@kbn/shared-ux-ai-components' - '@kbn/inference-connectors' + - '@kbn/shared-ux-ai-components' tags: - shared-browser - package diff --git a/x-pack/platform/packages/shared/kbn-elastic-assistant/tsconfig.json b/x-pack/platform/packages/shared/kbn-elastic-assistant/tsconfig.json index 5bf11266da9fb..225db6106e668 100644 --- a/x-pack/platform/packages/shared/kbn-elastic-assistant/tsconfig.json +++ b/x-pack/platform/packages/shared/kbn-elastic-assistant/tsconfig.json @@ -56,7 +56,7 @@ "@kbn/kibana-react-plugin", "@kbn/core-analytics-browser", "@kbn/shared-ux-utility", - "@kbn/shared-ux-ai-components", - "@kbn/inference-connectors" + "@kbn/inference-connectors", + "@kbn/shared-ux-ai-components" ] } From 442eedc5cfda52c657da9675f292ae082bb76c94 Mon Sep 17 00:00:00 2001 From: "paulina.shakirova" Date: Fri, 27 Mar 2026 12:25:54 +0100 Subject: [PATCH 4/4] add comma to tsconfig --- .../solutions/security/plugins/security_solution/tsconfig.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/x-pack/solutions/security/plugins/security_solution/tsconfig.json b/x-pack/solutions/security/plugins/security_solution/tsconfig.json index 8c8168301c1c8..47c56f8b97377 100644 --- a/x-pack/solutions/security/plugins/security_solution/tsconfig.json +++ b/x-pack/solutions/security/plugins/security_solution/tsconfig.json @@ -288,7 +288,7 @@ "@kbn/controls-constants", "@kbn/anonymization-plugin", "@kbn/anonymization-common", - "@kbn/shared-ux-ai-components" + "@kbn/shared-ux-ai-components", "@kbn/controls-schemas" ] }