[8.x] [ai][assistant] Refactor Security solution properties to use ne…

…w Assistant logo and beacon (#204286) (#205409)

# Backport

This will backport the following commits from `main` to `8.x`:
- [[ai][assistant] Refactor Security solution properties to use new
Assistant logo and beacon
(#204286)](#204286)

<!--- Backport version: 9.4.3 -->

### Questions ?
Please refer to the [Backport tool
documentation](https://github.com/sqren/backport)

<!--BACKPORT [{"author":{"name":"Clint Andrew
Hall","email":"clint.hall@elastic.co"},"sourceCommit":{"committedDate":"2025-01-02T16:27:17Z","message":"[ai][assistant]
Refactor Security solution properties to use new Assistant logo and
beacon (#204286)\n\n> A follow-up to #203879 \r\n\r\n##
Summary\r\n\r\nThis PR integrates the new Assistant Icon, Beacon, and
Avatar into\r\nsolutions and packages owned by Security. In most cases
this was a 1:1\r\nreplacement, but in a few, Icon was replaced with
Beacon for\r\nconsistency, (e.g. welcome screens, upsells,
etc)\r\n\r\nNote: the scaling of the icon/avatar _before_ was one
different from\r\nEUI. The new components match EUI directly and
represent a 2x scale\r\nchange (e.g. 's' becomes 'l', 'm' becomes 'xl',
etc).\r\n\r\n---------\r\n\r\nCo-authored-by: kibanamachine
<42973632+kibanamachine@users.noreply.github.com>","sha":"de0dc5282476c1983e90d0872fdd9909b6cdf984","branchLabelMapping":{"^v9.0.0$":"main","^v8.18.0$":"8.x","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["review","release_note:skip","v9.0.0","backport:prev-minor"],"title":"[ai][assistant]
Refactor Security solution properties to use new Assistant logo and
beacon","number":204286,"url":"https://github.com/elastic/kibana/pull/204286","mergeCommit":{"message":"[ai][assistant]
Refactor Security solution properties to use new Assistant logo and
beacon (#204286)\n\n> A follow-up to #203879 \r\n\r\n##
Summary\r\n\r\nThis PR integrates the new Assistant Icon, Beacon, and
Avatar into\r\nsolutions and packages owned by Security. In most cases
this was a 1:1\r\nreplacement, but in a few, Icon was replaced with
Beacon for\r\nconsistency, (e.g. welcome screens, upsells,
etc)\r\n\r\nNote: the scaling of the icon/avatar _before_ was one
different from\r\nEUI. The new components match EUI directly and
represent a 2x scale\r\nchange (e.g. 's' becomes 'l', 'm' becomes 'xl',
etc).\r\n\r\n---------\r\n\r\nCo-authored-by: kibanamachine
<42973632+kibanamachine@users.noreply.github.com>","sha":"de0dc5282476c1983e90d0872fdd9909b6cdf984"}},"sourceBranch":"main","suggestedTargetBranches":[],"targetPullRequestStates":[{"branch":"main","label":"v9.0.0","branchLabelMappingKey":"^v9.0.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/204286","number":204286,"mergeCommit":{"message":"[ai][assistant]
Refactor Security solution properties to use new Assistant logo and
beacon (#204286)\n\n> A follow-up to #203879 \r\n\r\n##
Summary\r\n\r\nThis PR integrates the new Assistant Icon, Beacon, and
Avatar into\r\nsolutions and packages owned by Security. In most cases
this was a 1:1\r\nreplacement, but in a few, Icon was replaced with
Beacon for\r\nconsistency, (e.g. welcome screens, upsells,
etc)\r\n\r\nNote: the scaling of the icon/avatar _before_ was one
different from\r\nEUI. The new components match EUI directly and
represent a 2x scale\r\nchange (e.g. 's' becomes 'l', 'm' becomes 'xl',
etc).\r\n\r\n---------\r\n\r\nCo-authored-by: kibanamachine
<42973632+kibanamachine@users.noreply.github.com>","sha":"de0dc5282476c1983e90d0872fdd9909b6cdf984"}}]}]
BACKPORT-->

---------

Co-authored-by: Clint Andrew Hall <clint.hall@elastic.co>

x-pack/platform/packages/shared/ai-assistant/icon/__stories__/beacon.stories.tsx

@@ -19,6 +19,11 @@ export default {
       options: ['original', 's', 'm', 'l', 'xl', 'xxl'],
       defaultValue: 'xxl',
     },
+    backgroundColor: {
+      control: 'select',
+      options: ['body', 'emptyShade', 'lightShade', 'darkShade'],
+      defaultValue: 'body',
+    },
   },
 } as ComponentMeta<typeof Component>;
 

x-pack/platform/packages/shared/ai-assistant/icon/avatar.tsx

@@ -9,7 +9,6 @@ import React from 'react';
 import { EuiAvatar, EuiAvatarProps } from '@elastic/eui';
 
 import { AssistantIcon } from './icon';
-import { useStyles } from './avatar.styles';
 
 /**
  * Avatar component for the AI Assistant.
@@ -23,11 +22,9 @@ export type AssistantAvatarProps = Omit<
  * A `EuiAvatar` component customized for the AI Assistant.
  */
 export const AssistantAvatar = ({
-  css,
   color = 'plain',
   size = 'm',
   ...props
 }: AssistantAvatarProps) => {
-  const { root } = useStyles();
-  return <EuiAvatar {...{ ...props, color, size }} css={[root, css]} iconType={AssistantIcon} />;
+  return <EuiAvatar {...{ ...props, color, size }} iconType={AssistantIcon} />;
 };

x-pack/platform/packages/shared/kbn-ai-assistant/src/chat/welcome_message.tsx

@@ -80,7 +80,7 @@ export function WelcomeMessage({
         className={fullHeightClassName}
       >
         <EuiFlexItem grow={false}>
-          <AssistantBeacon backgroundColor="ghost" size="xl" />
+          <AssistantBeacon backgroundColor="emptyShade" size="xl" />
         </EuiFlexItem>
         <EuiFlexItem grow className={centerMaxWidthClassName}>
           <EuiSpacer size={['xl', 'l'].includes(breakpoint!) ? 'l' : 's'} />

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

@@ -9,7 +9,7 @@ import React, { Dispatch, SetStateAction } from 'react';
 import { EuiFlexGroup, EuiFlexItem, EuiPanel, EuiText } from '@elastic/eui';
 import { css } from '@emotion/react';
 import { PromptResponse } from '@kbn/elastic-assistant-common';
-import { AssistantAnimatedIcon } from '../assistant_animated_icon';
+import { AssistantBeacon } from '@kbn/ai-assistant-icon';
 import { SystemPrompt } from '../prompt_editor/system_prompt';
 import { SetupKnowledgeBaseButton } from '../../knowledge_base/setup_knowledge_base_button';
 import * as i18n from '../translations';
@@ -41,7 +41,7 @@ export const EmptyConvo: React.FC<Props> = ({
         >
           <EuiFlexGroup alignItems="center" justifyContent="center" direction="column">
             <EuiFlexItem grow={false}>
-              <AssistantAnimatedIcon />
+              <AssistantBeacon backgroundColor="emptyShade" size="xl" />
             </EuiFlexItem>
             <EuiFlexItem grow={false}>
               <EuiText>

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

@@ -18,7 +18,7 @@ import { HttpSetup } from '@kbn/core-http-browser';
 import { euiThemeVars } from '@kbn/ui-theme';
 import { css } from '@emotion/react';
 import { PromptResponse } from '@kbn/elastic-assistant-common';
-import { AssistantAnimatedIcon } from '../assistant_animated_icon';
+import { AssistantBeacon } from '@kbn/ai-assistant-icon';
 import { EmptyConvo } from './empty_convo';
 import { WelcomeSetup } from './welcome_setup';
 import { Conversation } from '../../..';
@@ -102,7 +102,10 @@ export const AssistantBody: FunctionComponent<Props> = ({
     <EuiFlexGroup direction="column" justifyContent="spaceBetween">
       <EuiFlexItem grow={false}>
         {isLoading ? (
-          <EuiEmptyPrompt data-test-subj="animatedLogo" icon={<AssistantAnimatedIcon />} />
+          <EuiEmptyPrompt
+            data-test-subj="animatedLogo"
+            icon={<AssistantBeacon backgroundColor="emptyShade" />}
+          />
         ) : isWelcomeSetup ? (
           <WelcomeSetup
             currentConversation={currentConversation}

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

@@ -8,8 +8,8 @@
 import React from 'react';
 import { EuiFlexGroup, EuiFlexItem, EuiPanel, EuiText } from '@elastic/eui';
 import { css } from '@emotion/react';
+import { AssistantBeacon } from '@kbn/ai-assistant-icon';
 import { Conversation } from '../../..';
-import { AssistantAnimatedIcon } from '../assistant_animated_icon';
 import { ConnectorSetup } from '../../connectorland/connector_setup';
 import * as i18n from '../translations';
 
@@ -38,7 +38,7 @@ export const WelcomeSetup: React.FC<Props> = ({
             data-test-subj="welcome-setup"
           >
             <EuiFlexItem grow={false}>
-              <AssistantAnimatedIcon />
+              <AssistantBeacon backgroundColor="emptyShade" />
             </EuiFlexItem>
             <EuiFlexItem grow={false}>
               <EuiText>

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

@@ -8,9 +8,9 @@
 import React, { useCallback, useEffect, useState } from 'react';
 import { EuiFlexGroup, EuiFlexItem, EuiInlineEditTitle } from '@elastic/eui';
 import { css } from '@emotion/react';
+import { AssistantIcon } from '@kbn/ai-assistant-icon';
 import { DataStreamApis } from '../use_data_stream_apis';
 import type { Conversation } from '../../..';
-import { AssistantAvatar } from '../assistant_avatar/assistant_avatar';
 import { useConversation } from '../use_conversation';
 import { NEW_CHAT } from '../conversations/conversation_sidepanel/translations';
 
@@ -51,7 +51,7 @@ export const AssistantTitle: React.FC<{
   return (
     <EuiFlexGroup gutterSize="m" alignItems="center">
       <EuiFlexItem grow={false}>
-        <AssistantAvatar data-test-subj="titleIcon" size={'s'} />
+        <AssistantIcon data-test-subj="titleIcon" size="l" />
       </EuiFlexItem>
       <EuiFlexItem
         css={css`

x-pack/platform/packages/shared/kbn-elastic-assistant/index.ts

@@ -71,9 +71,6 @@ export { useAssistantOverlay } from './impl/assistant/use_assistant_overlay';
 /** a helper that enriches content returned from a query with action buttons */
 export { analyzeMarkdown } from './impl/assistant/use_conversation/helpers';
 
-/** Default Elastic AI Assistant logo, can be removed once included in EUI **/
-export { AssistantAvatar } from './impl/assistant/assistant_avatar/assistant_avatar';
-
 export { ConnectorSelectorInline } from './impl/connectorland/connector_selector_inline/connector_selector_inline';
 
 export {

x-pack/platform/packages/shared/kbn-elastic-assistant/tsconfig.json

@@ -34,5 +34,6 @@
     "@kbn/zod",
     "@kbn/data-views-plugin",
     "@kbn/user-profile-components",
+    "@kbn/ai-assistant-icon",
   ]
 }

x-pack/platform/plugins/shared/integration_assistant/public/components/create_integration/create_integration_assistant/header/header.tsx

@@ -5,16 +5,9 @@
  * 2.0.
  */
 
-import {
-  EuiAvatar,
-  EuiFlexGroup,
-  EuiFlexItem,
-  EuiSpacer,
-  EuiText,
-  useEuiTheme,
-} from '@elastic/eui';
+import { EuiFlexGroup, EuiFlexItem, EuiSpacer, EuiText, useEuiTheme } from '@elastic/eui';
 import { css } from '@emotion/react';
-import { AssistantAvatar } from '@kbn/elastic-assistant';
+import { AssistantAvatar } from '@kbn/ai-assistant-icon';
 import { KibanaPageTemplate } from '@kbn/shared-ux-page-kibana-template';
 import React from 'react';
 import { useActions } from '../state';
@@ -40,8 +33,8 @@ interface HeaderProps {
 }
 export const Header = React.memo<HeaderProps>(({ currentStep, isGenerating }) => {
   const { setStep } = useActions();
-  const { euiTheme } = useEuiTheme();
   const avatarCss = useAvatarCss();
+
   return (
     <KibanaPageTemplate.Header>
       <EuiFlexGroup direction="column" alignItems="center">
@@ -56,13 +49,7 @@ export const Header = React.memo<HeaderProps>(({ currentStep, isGenerating }) =>
                 justifyContent="center"
               >
                 <EuiFlexItem grow={false}>
-                  <EuiAvatar
-                    name={i18n.ASSISTANT_AVATAR}
-                    size="m"
-                    iconType={AssistantAvatar}
-                    color={euiTheme.colors.emptyShade}
-                    css={avatarCss}
-                  />
+                  <AssistantAvatar css={avatarCss} name={i18n.ASSISTANT_AVATAR} />
                 </EuiFlexItem>
                 <EuiFlexItem>
                   <EuiText>

x-pack/platform/plugins/shared/integration_assistant/public/components/create_integration/create_integration_landing/integration_assistant_card.tsx

@@ -15,7 +15,7 @@ import {
   EuiTitle,
   EuiBetaBadge,
 } from '@elastic/eui';
-import { AssistantAvatar } from '@kbn/elastic-assistant';
+import { AssistantIcon } from '@kbn/ai-assistant-icon';
 import { useAuthorization } from '../../../common/hooks/use_authorization';
 import { MissingPrivilegesTooltip } from '../../../common/components/authorization';
 import { useNavigate, Page } from '../../../common/hooks/use_navigate';
@@ -28,7 +28,7 @@ export const IntegrationAssistantCard = React.memo(() => {
     <EuiPanel hasBorder={true} paddingSize="l">
       <EuiFlexGroup direction="row" gutterSize="l" alignItems="center" justifyContent="center">
         <EuiFlexItem grow={false}>
-          <AssistantAvatar />
+          <AssistantIcon />
         </EuiFlexItem>
         <EuiFlexItem>
           <EuiFlexGroup

x-pack/platform/plugins/shared/integration_assistant/tsconfig.json

@@ -44,5 +44,6 @@
     "@kbn/utils",
     "@kbn/zod",
     "@kbn/tooling-log",
+    "@kbn/ai-assistant-icon"
   ]
 }

x-pack/solutions/security/packages/ecs_data_quality_dashboard/impl/data_quality_panel/actions/chat/index.tsx

@@ -6,9 +6,10 @@
  */
 
 import React, { FC, useCallback } from 'react';
-import { AssistantAvatar, NewChat } from '@kbn/elastic-assistant';
+import { NewChat } from '@kbn/elastic-assistant';
 import styled from 'styled-components';
 
+import { AssistantIcon } from '@kbn/ai-assistant-icon';
 import {
   DATA_QUALITY_DASHBOARD_CONVERSATION_ID,
   DATA_QUALITY_PROMPT_CONTEXT_PILL,
@@ -44,7 +45,7 @@ const ChatActionComponent: FC<Props> = ({ indexName, markdownComment }) => {
       iconType={null}
     >
       <StyledLinkText>
-        <AssistantAvatar size="xs" />
+        <AssistantIcon />
         {ASK_ASSISTANT}
       </StyledLinkText>
     </NewChat>

x-pack/solutions/security/packages/ecs_data_quality_dashboard/tsconfig.json

@@ -26,5 +26,6 @@
     "@kbn/core",
     "@kbn/core-notifications-browser",
     "@kbn/core-notifications-browser-mocks",
+    "@kbn/ai-assistant-icon",
   ]
 }

x-pack/solutions/security/packages/upselling/sections/attack_discovery/index.tsx

@@ -5,10 +5,10 @@
  * 2.0.
  */
 
-import { EuiEmptyPrompt, EuiFlexGroup, EuiFlexItem, EuiSpacer, EuiText } from '@elastic/eui';
 import React, { useMemo } from 'react';
+import { EuiEmptyPrompt, EuiFlexGroup, EuiFlexItem, EuiSpacer, EuiText } from '@elastic/eui';
+import { AssistantBeacon } from '@kbn/ai-assistant-icon';
 
-import { AssistantAvatar } from './assistant_avatar/assistant_avatar';
 import * as i18n from './translations';
 
 interface Props {
@@ -30,7 +30,7 @@ const AttackDiscoveryUpsellingSectionComponent: React.FC<Props> = ({
     () => (
       <EuiFlexGroup alignItems="center" direction="column" gutterSize="none">
         <EuiFlexItem data-test-subj="assistantAvatar" grow={false}>
-          <AssistantAvatar size="m" />
+          <AssistantBeacon backgroundColor="emptyShade" />
           <EuiSpacer size="m" />
         </EuiFlexItem>
 

x-pack/solutions/security/packages/upselling/tsconfig.json

@@ -20,6 +20,7 @@
     "@kbn/i18n",
     "@kbn/security-solution-navigation",
     "@kbn/shared-ux-page-kibana-template",
+    "@kbn/ai-assistant-icon",
   ],
   "exclude": [
     "target/**/*"

x-pack/solutions/security/plugins/security_solution/public/assistant/get_comments/index.tsx

@@ -9,7 +9,7 @@ import type { ClientMessage, GetAssistantMessages } from '@kbn/elastic-assistant
 import { EuiAvatar, EuiLoadingSpinner } from '@elastic/eui';
 import React from 'react';
 
-import { AssistantAvatar } from '@kbn/elastic-assistant';
+import { AssistantAvatar } from '@kbn/ai-assistant-icon';
 import type { Replacements } from '@kbn/elastic-assistant-common';
 import { replaceAnonymizedValuesWithOriginalValues } from '@kbn/elastic-assistant-common';
 import styled from '@emotion/styled';
@@ -117,9 +117,7 @@ export const getComments: GetAssistantMessages = ({
       ? [
           {
             username: i18n.SYSTEM,
-            timelineAvatar: (
-              <EuiAvatar name="machine" size="l" color="subdued" iconType={AssistantAvatar} />
-            ),
+            timelineAvatar: <AssistantAvatar name="machine" size="l" color="subdued" />,
             timestamp:
               currentConversation.messages[0].timestamp.length === 0
                 ? new Date().toLocaleString()
@@ -148,7 +146,7 @@ export const getComments: GetAssistantMessages = ({
         timelineAvatar: isUser ? (
           <UserAvatar />
         ) : (
-          <EuiAvatar name="machine" size="l" color="subdued" iconType={AssistantAvatar} />
+          <AssistantAvatar name="machine" size="l" color="subdued" />
         ),
         timestamp: i18n.AT(
           message.timestamp.length === 0

x-pack/solutions/security/plugins/security_solution/public/assistant/header_link.tsx

@@ -10,7 +10,7 @@ import React, { useCallback } from 'react';
 
 import { i18n } from '@kbn/i18n';
 import { useAssistantContext } from '@kbn/elastic-assistant/impl/assistant_context';
-import { AssistantAvatar } from '@kbn/elastic-assistant';
+import { AssistantIcon } from '@kbn/ai-assistant-icon';
 
 const isMac = navigator.platform.toLowerCase().indexOf('mac') >= 0;
 
@@ -45,7 +45,7 @@ export const AssistantHeaderLink = () => {
       <EuiHeaderLink data-test-subj="assistantHeaderLink" color="primary" onClick={showOverlay}>
         <EuiFlexGroup gutterSize="s" alignItems="center">
           <EuiFlexItem grow={false}>
-            <AssistantAvatar size="xs" />
+            <AssistantIcon size="m" />
           </EuiFlexItem>
           <EuiFlexItem grow={false}>{LINK_LABEL}</EuiFlexItem>
         </EuiFlexGroup>

x-pack/solutions/security/plugins/security_solution/public/attack_discovery/pages/results/attack_discovery_panel/title/index.tsx

@@ -6,14 +6,14 @@
  */
 
 import { EuiFlexGroup, EuiFlexItem, EuiSkeletonTitle, EuiTitle, useEuiTheme } from '@elastic/eui';
-import { AssistantAvatar } from '@kbn/elastic-assistant';
 import {
   replaceAnonymizedValuesWithOriginalValues,
   type Replacements,
 } from '@kbn/elastic-assistant-common';
 import { css } from '@emotion/react';
 
 import React, { useMemo } from 'react';
+import { AssistantIcon } from '@kbn/ai-assistant-icon';
 
 const AVATAR_SIZE = 24; // px
 
@@ -55,11 +55,11 @@ const TitleComponent: React.FC<Props> = ({
         data-test-subj="assistantAvatar"
         grow={false}
       >
-        <AssistantAvatar
+        <AssistantIcon
           css={css`
             transform: translate(5px, 5px);
           `}
-          size="xxs"
+          size="s"
         />
       </EuiFlexItem>
 

x-pack/solutions/security/plugins/security_solution/public/attack_discovery/pages/results/attack_discovery_panel/view_in_ai_assistant/index.tsx

@@ -5,11 +5,11 @@
  * 2.0.
  */
 
-import { AssistantAvatar } from '@kbn/elastic-assistant';
 import type { AttackDiscovery, Replacements } from '@kbn/elastic-assistant-common';
 import { EuiButton, EuiButtonEmpty, EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
 import React from 'react';
 
+import { AssistantIcon } from '@kbn/ai-assistant-icon';
 import * as i18n from './translations';
 import { useViewInAiAssistant } from './use_view_in_ai_assistant';
 
@@ -48,7 +48,7 @@ const ViewInAiAssistantComponent: React.FC<Props> = ({
     >
       <EuiFlexGroup alignItems="center" gutterSize="xs">
         <EuiFlexItem data-test-subj="assistantAvatar" grow={false}>
-          <AssistantAvatar size="xs" />
+          <AssistantIcon size="m" />
         </EuiFlexItem>
         <EuiFlexItem data-test-subj="viewInAiAssistantLabel" grow={false}>
           {i18n.VIEW_IN_AI_ASSISTANT}