[ai][assistant] Refactor Security solution properties to use new Assi…

…stant logo and beacon (elastic#204286) > A follow-up to elastic#203879 ## Summary This PR integrates the new Assistant Icon, Beacon, and Avatar into solutions and packages owned by Security. In most cases this was a 1:1 replacement, but in a few, Icon was replaced with Beacon for consistency, (e.g. welcome screens, upsells, etc) Note: the scaling of the icon/avatar _before_ was one different from EUI. The new components match EUI directly and represent a 2x scale change (e.g. 's' becomes 'l', 'm' becomes 'xl', etc). --------- Co-authored-by: kibanamachine <[email protected]>
pheyos · Jan 2, 2025 · de0dc52 · de0dc52
1 parent 750a0f3
commit de0dc52
Show file tree

Hide file tree

Showing 29 changed files with 69 additions and 93 deletions.
diff --git a/x-pack/platform/packages/shared/ai-assistant/icon/__stories__/beacon.stories.tsx b/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>;
 

diff --git a/x-pack/platform/packages/shared/ai-assistant/icon/avatar.styles.ts b/x-pack/platform/packages/shared/ai-assistant/icon/avatar.styles.ts
diff --git a/x-pack/platform/packages/shared/ai-assistant/icon/avatar.tsx b/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} />;
 };
diff --git a/x-pack/platform/packages/shared/kbn-ai-assistant/src/chat/welcome_message.tsx b/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'} />

diff --git a/...tform/packages/shared/kbn-elastic-assistant/impl/assistant/assistant_body/empty_convo.tsx b/...tform/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>

diff --git a/...ck/platform/packages/shared/kbn-elastic-assistant/impl/assistant/assistant_body/index.tsx b/...ck/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}

diff --git a/...orm/packages/shared/kbn-elastic-assistant/impl/assistant/assistant_body/welcome_setup.tsx b/...orm/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>

diff --git a/...k/platform/packages/shared/kbn-elastic-assistant/impl/assistant/assistant_title/index.tsx b/...k/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`

diff --git a/x-pack/platform/packages/shared/kbn-elastic-assistant/index.ts b/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 {

diff --git a/x-pack/platform/packages/shared/kbn-elastic-assistant/tsconfig.json b/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",
   ]
 }
diff --git a/...stant/public/components/create_integration/create_integration_assistant/header/header.tsx b/...stant/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>

diff --git a/...c/components/create_integration/create_integration_landing/integration_assistant_card.tsx b/...c/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

diff --git a/x-pack/platform/plugins/shared/integration_assistant/tsconfig.json b/x-pack/platform/plugins/shared/integration_assistant/tsconfig.json
@@ -44,5 +44,6 @@
     "@kbn/utils",
     "@kbn/zod",
     "@kbn/tooling-log",
+    "@kbn/ai-assistant-icon"
   ]
 }
diff --git a/...curity/packages/ecs_data_quality_dashboard/impl/data_quality_panel/actions/chat/index.tsx b/...curity/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>

diff --git a/x-pack/solutions/security/packages/ecs_data_quality_dashboard/tsconfig.json b/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",
   ]
 }
diff --git a/x-pack/solutions/security/packages/upselling/sections/attack_discovery/index.tsx b/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>
 

diff --git a/x-pack/solutions/security/packages/upselling/tsconfig.json b/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/**/*"

diff --git a/x-pack/solutions/security/plugins/security_solution/public/assistant/get_comments/index.tsx b/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

diff --git a/x-pack/solutions/security/plugins/security_solution/public/assistant/header_link.tsx b/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>

diff --git a/...ity_solution/public/attack_discovery/pages/results/attack_discovery_panel/title/index.tsx b/...ity_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>
 

diff --git a/...blic/attack_discovery/pages/results/attack_discovery_panel/view_in_ai_assistant/index.tsx b/...blic/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}