[ai][assistant] Refactor security to use new Assistant logo and beacon

clintandrewhall · Dec 13, 2024 · 9414bf0 · 9414bf0
1 parent 07a6902
commit 9414bf0
Show file tree

Hide file tree

Showing 21 changed files with 51 additions and 80 deletions.
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="ghost" />
             </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="ghost" />}
+          />
         ) : 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="ghost" />
             </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/...stant/public/components/create_integration/create_integration_assistant/header/header.tsx b/...stant/public/components/create_integration/create_integration_assistant/header/header.tsx
@@ -5,30 +5,15 @@
  * 2.0.
  */
 
-import {
-  EuiAvatar,
-  EuiFlexGroup,
-  EuiFlexItem,
-  EuiSpacer,
-  EuiText,
-  useEuiTheme,
-} from '@elastic/eui';
+import { EuiFlexGroup, EuiFlexItem, EuiSpacer, EuiText } 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';
 import { Steps } from './steps';
 import * as i18n from './translations';
 
-const useAvatarCss = () => {
-  const { euiTheme } = useEuiTheme();
-  return css`
-    border: 1px solid ${euiTheme.colors.lightShade};
-    padding: ${euiTheme.size.xs};
-  `;
-};
-
 const contentCss = css`
   width: 100%;
   max-width: 730px;
@@ -40,8 +25,7 @@ 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 +40,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 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/plugins/security_solution/public/assistant/get_comments/index.tsx b/x-pack/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/plugins/security_solution/public/assistant/header_link.tsx b/x-pack/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 { AssistantBeacon } 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
+        <AssistantBeacon
           css={css`
             transform: translate(5px, 5px);
           `}
-          size="xxs"
+          size="l"
         />
       </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 { AssistantBeacon } 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" />
+          <AssistantBeacon />
         </EuiFlexItem>
         <EuiFlexItem data-test-subj="viewInAiAssistantLabel" grow={false}>
           {i18n.VIEW_IN_AI_ASSISTANT}

diff --git a/...curity_solution/public/attack_discovery/pages/results/empty_states/empty_prompt/index.tsx b/...curity_solution/public/attack_discovery/pages/results/empty_states/empty_prompt/index.tsx
@@ -5,7 +5,6 @@
  * 2.0.
  */
 
-import { AssistantAvatar } from '@kbn/elastic-assistant';
 import {
   EuiEmptyPrompt,
   EuiFlexGroup,
@@ -19,6 +18,7 @@ import {
 import { css } from '@emotion/react';
 import React, { useMemo } from 'react';
 
+import { AssistantBeacon } from '@kbn/ai-assistant-icon';
 import { AnimatedCounter } from './animated_counter';
 import { Generate } from '../generate';
 import * as i18n from './translations';
@@ -50,7 +50,7 @@ const EmptyPromptComponent: React.FC<Props> = ({
         gutterSize="none"
       >
         <EuiFlexItem data-test-subj="emptyPromptAvatar" grow={false}>
-          <AssistantAvatar size="m" />
+          <AssistantBeacon size="xl" backgroundColor="emptyShade" />
           <EuiSpacer size="m" />
         </EuiFlexItem>
 

diff --git a/.../security_solution/public/attack_discovery/pages/results/empty_states/no_alerts/index.tsx b/.../security_solution/public/attack_discovery/pages/results/empty_states/no_alerts/index.tsx
@@ -5,7 +5,6 @@
  * 2.0.
  */
 
-import { AssistantAvatar } from '@kbn/elastic-assistant';
 import {
   EuiEmptyPrompt,
   EuiFlexGroup,
@@ -16,6 +15,7 @@ import {
 } from '@elastic/eui';
 import React, { useMemo } from 'react';
 
+import { AssistantIcon } from '@kbn/ai-assistant-icon';
 import * as i18n from './translations';
 import { Generate } from '../generate';
 
@@ -35,7 +35,7 @@ const NoAlertsComponent: React.FC<Props> = ({ isDisabled, isLoading, onGenerate
         gutterSize="none"
       >
         <EuiFlexItem data-test-subj="emptyPromptAvatar" grow={false}>
-          <AssistantAvatar size="m" />
+          <AssistantIcon size="xl" />
           <EuiSpacer size="m" />
         </EuiFlexItem>
 

diff --git a/...ns/security_solution/public/attack_discovery/pages/results/empty_states/welcome/index.tsx b/...ns/security_solution/public/attack_discovery/pages/results/empty_states/welcome/index.tsx
@@ -5,11 +5,11 @@
  * 2.0.
  */
 
-import { AssistantAvatar } from '@kbn/elastic-assistant';
 import { ConnectorSetup } from '@kbn/elastic-assistant/impl/connectorland/connector_setup';
 import { EuiEmptyPrompt, EuiFlexGroup, EuiFlexItem, EuiSpacer, EuiText } from '@elastic/eui';
 import React, { useMemo } from 'react';
 
+import { AssistantIcon } from '@kbn/ai-assistant-icon';
 import * as i18n from './translations';
 
 const WelcomeComponent: React.FC = () => {
@@ -22,7 +22,7 @@ const WelcomeComponent: React.FC = () => {
         gutterSize="none"
       >
         <EuiFlexItem data-test-subj="emptyPromptAvatar" grow={false}>
-          <AssistantAvatar size="m" />
+          <AssistantIcon size="xl" />
           <EuiSpacer size="m" />
         </EuiFlexItem>
 

diff --git a/...urity_solution/public/detection_engine/rule_creation_ui/components/ai_assistant/index.tsx b/...urity_solution/public/detection_engine/rule_creation_ui/components/ai_assistant/index.tsx
@@ -9,8 +9,9 @@ import React, { useCallback } from 'react';
 import { EuiSpacer } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n-react';
 
-import { NewChat, AssistantAvatar } from '@kbn/elastic-assistant';
+import { NewChat } from '@kbn/elastic-assistant';
 
+import { AssistantIcon } from '@kbn/ai-assistant-icon';
 import { METRIC_TYPE, TELEMETRY_EVENT, track } from '../../../../common/lib/telemetry';
 import { useAssistantAvailability } from '../../../../assistant/use_assistant_availability';
 import * as i18nAssistant from '../../../../detections/pages/detection_engine/translations';
@@ -116,7 +117,7 @@ Proposed solution should be valid and must not contain new line symbols (\\n)`;
               isAssistantEnabled={isAssistantEnabled}
               onExportCodeBlock={handleOnExportCodeBlock}
             >
-              <AssistantAvatar size="xxs" /> {i18n.ASK_ASSISTANT_ERROR_BUTTON}
+              <AssistantIcon size="s" /> {i18n.ASK_ASSISTANT_ERROR_BUTTON}
             </NewChat>
           ),
         }}

diff --git a/...nagement/pages/endpoint_hosts/view/details/components/insights/workflow_insights_scan.tsx b/...nagement/pages/endpoint_hosts/view/details/components/insights/workflow_insights_scan.tsx
@@ -8,7 +8,6 @@
 import React, { useCallback, useMemo } from 'react';
 import { EuiButton, EuiFlexGroup, EuiFlexItem, EuiPanel, EuiText } from '@elastic/eui';
 import {
-  AssistantAvatar,
   DEFEND_INSIGHTS_STORAGE_KEY,
   ConnectorSelectorInline,
   DEFAULT_ASSISTANT_NAMESPACE,
@@ -17,6 +16,7 @@ import {
 import { noop } from 'lodash/fp';
 import useLocalStorage from 'react-use/lib/useLocalStorage';
 import { some } from 'lodash';
+import { AssistantIcon } from '@kbn/ai-assistant-icon';
 import { useSpaceId } from '../../../../../../../common/hooks/use_space_id';
 import { WORKFLOW_INSIGHTS } from '../../../translations';
 import { useKibana } from '../../../../../../../common/lib/kibana';
@@ -106,7 +106,7 @@ export const WorkflowInsightsScanSection = ({
         <EuiFlexItem grow={false}>
           <EuiFlexGroup alignItems="center" gutterSize="s">
             <EuiFlexItem grow={false}>
-              <AssistantAvatar size={'xs'} />
+              <AssistantIcon size="m" />
             </EuiFlexItem>
             <EuiFlexItem grow={false}>
               <EuiText size="s">

diff --git a/...s/security_solution/public/onboarding/components/onboarding_body/cards/assistant/index.ts b/...s/security_solution/public/onboarding/components/onboarding_body/cards/assistant/index.ts
@@ -6,7 +6,7 @@
  */
 
 import React from 'react';
-import { AssistantAvatar } from '@kbn/elastic-assistant';
+import { AssistantIcon } from '@kbn/ai-assistant-icon';
 import type { OnboardingCardConfig } from '../../../../types';
 import { OnboardingCardId } from '../../../../constants';
 import { ASSISTANT_CARD_TITLE } from './translations';
@@ -16,7 +16,7 @@ import type { AssistantCardMetadata } from './types';
 export const assistantCardConfig: OnboardingCardConfig<AssistantCardMetadata> = {
   id: OnboardingCardId.assistant,
   title: ASSISTANT_CARD_TITLE,
-  icon: AssistantAvatar,
+  icon: AssistantIcon,
   Component: React.lazy(
     () =>
       import(