[AiButton/Security] Migrate ai-related buttons to use custom styles

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%;
             `}
           >
-            <EuiButton
+            <AiButton
               aria-label={i18n.TRY_AI_AGENT}
               onClick={() => 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}
-            </EuiButton>
+            </AiButton>
           </span>
         </EuiToolTip>
       ) : (
-        <EuiButton
+        <AiButton
           aria-label={i18n.TRY_AI_AGENT}
           onClick={() => 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}
-        </EuiButton>
+        </AiButton>
       )}
     </EuiContextMenuItem>
   );

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

@@ -48,7 +48,7 @@ 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(<NewChat {...defaultProps} />);
 
     const newChatButton = screen.getByTestId('plusCircle');

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(<NewChatByTitle {...testProps} />);
+    const { getByTestId, queryByTestId, getByRole } = render(<NewChatByTitle {...testProps} />);
 
     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(<NewChatByTitle {...testProps} text={'Ask AI Assistant'} />);
+    const { getByTestId, getByRole } = render(
+      <NewChatByTitle {...testProps} text={'Ask AI Assistant'} />
+    );
 
     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');
   });
 

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<NewChatByTitleComponentProps> = ({
   const showOverlay = useCallback(() => showAssistantOverlay(true), [showAssistantOverlay]);
 
   return (
-    <EuiButtonEmpty
+    <AiButton
       aria-label={i18n.ASK_AI_ASSISTANT}
-      color={color}
       data-test-subj={BUTTON_TEST_ID}
       onClick={showOverlay}
       size={size}
+      variant="empty"
+      iconType="aiAssistantLogo"
+      iconOnly={!text}
     >
-      <EuiFlexGroup alignItems="center" gutterSize="s">
-        <EuiFlexItem grow={false}>
-          <AssistantIcon data-test-subj={BUTTON_ICON_TEST_ID} size="m" />
-        </EuiFlexItem>
-        {text && (
-          <EuiFlexItem data-test-subj={BUTTON_TEXT_TEST_ID} grow={false}>
-            {text}
-          </EuiFlexItem>
-        )}
-      </EuiFlexGroup>
-    </EuiButtonEmpty>
+      {text ? <span data-test-subj={BUTTON_TEXT_TEST_ID}>{text}</span> : null}
+    </AiButton>
   );
 };
 

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

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"
   ]
 }

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'

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<EuiButtonEmptyProps>) {
+export function RegenerateResponseButton(props: AiButtonProps) {
   return (
-    <EuiButtonEmpty
+    <AiButton
+      {...props}
+      iconType="sparkles"
       size="s"
+      variant="empty"
       data-test-subj="regenerateResponseButton"
-      iconType="sparkles"
-      {...props}
     >
       {i18n.translate('xpack.elasticAssistantPlugin.aiAssistant.regenerateResponseButtonLabel', {
         defaultMessage: 'Regenerate',
       })}
-    </EuiButtonEmpty>
+    </AiButton>
   );
 }

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",

x-pack/solutions/security/plugins/security_solution/moon.yml

@@ -287,6 +287,7 @@ dependsOn:
   - '@kbn/controls-constants'
   - '@kbn/anonymization-plugin'
   - '@kbn/anonymization-common'
+  - '@kbn/shared-ux-ai-components'
   - '@kbn/controls-schemas'
   - '@kbn/search-inference-endpoints'
   - '@kbn/shared-ux-column-presets'

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,34 +72,24 @@ export const NewAgentBuilderAttachment = memo(function NewAgentBuilderAttachment
   }
 
   const button = (
-    <EuiButtonEmpty
+    <AiButton
       aria-label={i18n.ADD_TO_CHAT}
-      color={color}
+      variant="empty"
       data-test-subj="newAgentBuilderAttachment"
       onClick={handleClick}
       size={size}
-      disabled={isDisabled}
+      iconType="productAgent"
+      isDisabled={isDisabled}
     >
-      <EuiFlexGroup alignItems="center" gutterSize="s">
-        <EuiFlexItem grow={false}>
-          <EuiIcon
-            type="productAgent"
-            color={color === 'primary' ? 'default' : color}
-            aria-hidden={true}
-          />
-        </EuiFlexItem>
-        <EuiFlexItem grow={false}>{i18n.ADD_TO_CHAT}</EuiFlexItem>
-      </EuiFlexGroup>
-    </EuiButtonEmpty>
+      {i18n.ADD_TO_CHAT}
+    </AiButton>
   );
 
   if (!shouldShowLicenseTooltip) {
     return button;
   }
 
   return (
-    <EuiToolTip content={i18n.UPGRADE_TO_ENTERPRISE_TO_USE_AGENT_BUILDER_CHAT}>
-      <span>{button}</span>
-    </EuiToolTip>
+    <EuiToolTip content={i18n.UPGRADE_TO_ENTERPRISE_TO_USE_AGENT_BUILDER_CHAT}>{button}</EuiToolTip>
   );
 });

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}
             >
-              <AssistantIcon
-                size="s"
-                css={css`
-                  vertical-align: inherit;
-                `}
-              />
-              {i18n.ASK_ASSISTANT_ERROR_BUTTON}
+              <AiButton
+                iconType="aiAssistantLogo"
+                size="xs"
+                variant="empty"
+                onClick={onShowOverlay}
+              >
+                {i18n.ASK_ASSISTANT_ERROR_BUTTON}
+              </AiButton>
             </NewChat>
           ),
         }}

x-pack/solutions/security/plugins/security_solution/tsconfig.json

@@ -289,6 +289,7 @@
     "@kbn/controls-constants",
     "@kbn/anonymization-plugin",
     "@kbn/anonymization-common",
+    "@kbn/shared-ux-ai-components",
     "@kbn/controls-schemas",
     "@kbn/search-inference-endpoints",
     "@kbn/shared-ux-column-presets",