[8.x] [ai][assistant] Refactor search to use new Assistant logo and b…

…eacon (#204287) (#204772) # Backport This will backport the following commits from `main` to `8.x`: - [[ai][assistant] Refactor search to use new Assistant logo and beacon (#204287)](#204287)  ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sqren/backport)
elastic · Dec 18, 2024 · 8c436c2 · 8c436c2
1 parent f142284
commit 8c436c2
Show file tree

Hide file tree

Showing 6 changed files with 15 additions and 25 deletions.
diff --git a/x-pack/packages/kbn-ai-assistant/src/chat/chat_header.tsx b/x-pack/packages/kbn-ai-assistant/src/chat/chat_header.tsx
@@ -19,7 +19,7 @@ import {
 } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { css } from '@emotion/css';
-import { AssistantAvatar } from '@kbn/observability-ai-assistant-plugin/public';
+import { AssistantIcon } from '@kbn/ai-assistant-icon';
 import { ChatActionsMenu } from './chat_actions_menu';
 import type { UseGenAIConnectorsResult } from '../hooks/use_genai_connectors';
 import { FlyoutPositionMode } from './chat_flyout';
@@ -94,7 +94,7 @@ export function ChatHeader({
           {loading ? (
             <EuiLoadingSpinner size={breakpoint === 'xs' ? 'm' : 'l'} />
           ) : (
-            <AssistantAvatar size={breakpoint === 'xs' ? 'xs' : 's'} />
+            <AssistantIcon size={breakpoint === 'xs' ? 'm' : 'l'} />
           )}
         </EuiFlexItem>
 

diff --git a/x-pack/packages/kbn-ai-assistant/src/chat/chat_item_avatar.tsx b/x-pack/packages/kbn-ai-assistant/src/chat/chat_item_avatar.tsx
@@ -7,24 +7,17 @@
 
 import React from 'react';
 import { UserAvatar } from '@kbn/user-profile-components';
-import { css } from '@emotion/css';
 import { EuiAvatar, EuiLoadingSpinner } from '@elastic/eui';
 import type { AuthenticatedUser } from '@kbn/security-plugin/common';
-import { AssistantAvatar, MessageRole } from '@kbn/observability-ai-assistant-plugin/public';
+import { MessageRole } from '@kbn/observability-ai-assistant-plugin/public';
+import { AssistantAvatar } from '@kbn/ai-assistant-icon';
 
 interface ChatAvatarProps {
   currentUser?: Pick<AuthenticatedUser, 'full_name' | 'username'> | undefined;
   role: MessageRole;
   loading: boolean;
 }
 
-const assistantAvatarClassName = css`
-  svg {
-    width: 16px;
-    height: 16px;
-  }
-`;
-
 export function ChatItemAvatar({ currentUser, role, loading }: ChatAvatarProps) {
   const isLoading = loading || !currentUser;
 
@@ -39,14 +32,7 @@ export function ChatItemAvatar({ currentUser, role, loading }: ChatAvatarProps)
     case MessageRole.Assistant:
     case MessageRole.Elastic:
     case MessageRole.Function:
-      return (
-        <EuiAvatar
-          name="Elastic Assistant"
-          iconType={AssistantAvatar}
-          color="subdued"
-          className={assistantAvatarClassName}
-        />
-      );
+      return <AssistantAvatar name="Elastic Assistant" color="subdued" size="m" />;
 
     case MessageRole.System:
       return <EuiAvatar name="system" iconType="dot" color="subdued" />;

diff --git a/x-pack/packages/kbn-ai-assistant/src/chat/welcome_message.tsx b/x-pack/packages/kbn-ai-assistant/src/chat/welcome_message.tsx
@@ -11,6 +11,7 @@ import { EuiFlexGroup, EuiFlexItem, EuiSpacer, useCurrentEuiBreakpoint } from '@
 import type { ActionConnector } from '@kbn/triggers-actions-ui-plugin/public';
 import { GenerativeAIForObservabilityConnectorFeatureId } from '@kbn/actions-plugin/common';
 import { isSupportedConnectorType } from '@kbn/observability-ai-assistant-plugin/public';
+import { AssistantBeacon } from '@kbn/ai-assistant-icon';
 import type { UseKnowledgeBaseResult } from '../hooks/use_knowledge_base';
 import type { UseGenAIConnectorsResult } from '../hooks/use_genai_connectors';
 import { Disclaimer } from './disclaimer';
@@ -78,9 +79,11 @@ export function WelcomeMessage({
         gutterSize="none"
         className={fullHeightClassName}
       >
+        <EuiFlexItem grow={false}>
+          <AssistantBeacon backgroundColor="ghost" size="xl" />
+        </EuiFlexItem>
         <EuiFlexItem grow className={centerMaxWidthClassName}>
           <EuiSpacer size={['xl', 'l'].includes(breakpoint!) ? 'l' : 's'} />
-
           <WelcomeMessageConnectors
             connectors={connectors}
             onSetupConnectorClick={handleConnectorClick}
@@ -89,10 +92,8 @@ export function WelcomeMessage({
             <WelcomeMessageKnowledgeBase connectors={connectors} knowledgeBase={knowledgeBase} />
           ) : null}
         </EuiFlexItem>
-
         <EuiFlexItem grow={false}>
           <StarterPrompts onSelectPrompt={onSelectPrompt} />
-
           <EuiSpacer size="l" />
           <Disclaimer />
         </EuiFlexItem>

diff --git a/x-pack/packages/kbn-ai-assistant/tsconfig.json b/x-pack/packages/kbn-ai-assistant/tsconfig.json
@@ -39,5 +39,6 @@
     "@kbn/share-plugin",
     "@kbn/ai-assistant-common",
     "@kbn/storybook",
+    "@kbn/ai-assistant-icon",
   ]
 }
diff --git a/x-pack/plugins/search_assistant/public/components/nav_control/index.tsx b/x-pack/plugins/search_assistant/public/components/nav_control/index.tsx
@@ -5,7 +5,7 @@
  * 2.0.
  */
 import React, { useEffect, useRef, useState } from 'react';
-import { AssistantAvatar, useAbortableAsync } from '@kbn/observability-ai-assistant-plugin/public';
+import { useAbortableAsync } from '@kbn/observability-ai-assistant-plugin/public';
 import { EuiButton, EuiLoadingSpinner, EuiToolTip, useEuiTheme } from '@elastic/eui';
 import { css } from '@emotion/react';
 import { v4 } from 'uuid';
@@ -19,6 +19,7 @@ import type { CoreStart } from '@kbn/core/public';
 import { KibanaContextProvider } from '@kbn/kibana-react-plugin/public';
 import { KibanaThemeProvider } from '@kbn/react-kibana-context-theme';
 import { RedirectAppLinks } from '@kbn/shared-ux-link-redirect-app';
+import { AssistantIcon } from '@kbn/ai-assistant-icon';
 
 interface NavControlWithProviderDeps {
   coreStart: CoreStart;
@@ -123,7 +124,7 @@ export function NavControl() {
           fullWidth={false}
           minWidth={0}
         >
-          {chatService.loading ? <EuiLoadingSpinner size="s" /> : <AssistantAvatar size="xs" />}
+          {chatService.loading ? <EuiLoadingSpinner size="s" /> : <AssistantIcon size="m" />}
         </EuiButton>
       </EuiToolTip>
       {chatService.value &&

diff --git a/x-pack/plugins/search_assistant/tsconfig.json b/x-pack/plugins/search_assistant/tsconfig.json
@@ -28,7 +28,8 @@
     "@kbn/licensing-plugin",
     "@kbn/ml-plugin",
     "@kbn/share-plugin",
-    "@kbn/triggers-actions-ui-plugin"
+    "@kbn/triggers-actions-ui-plugin",
+    "@kbn/ai-assistant-icon"
   ],
   "exclude": [
     "target/**/*",