From e0786738c950870c49b4899937cc3904a1b8ef97 Mon Sep 17 00:00:00 2001 From: Clint Andrew Hall Date: Wed, 18 Dec 2024 08:51:45 -0600 Subject: [PATCH] [ai][assistant] Refactor search to use new Assistant logo and beacon (#204287) > A follow-up to #203879 ## Summary This PR integrates the new Assistant Icon, Beacon, and Avatar into solutions and packages owned by Search. In most cases this was a 1:1 replacement, but in a few, Icon was replaced with Beacon or Beacon was added 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 <42973632+kibanamachine@users.noreply.github.com> --- .../kbn-ai-assistant/src/chat/chat_header.tsx | 4 ++-- .../src/chat/chat_item_avatar.tsx | 20 +++---------------- .../src/chat/welcome_message.tsx | 7 ++++--- .../packages/kbn-ai-assistant/tsconfig.json | 1 + .../public/components/nav_control/index.tsx | 5 +++-- x-pack/plugins/search_assistant/tsconfig.json | 3 ++- 6 files changed, 15 insertions(+), 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 index c4b4fcba0329f..2488323842a10 100644 --- 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 ? ( ) : ( - + )} 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 index ae78d55dd43ff..0c6b6bf5de04d 100644 --- 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,10 +7,10 @@ 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 | undefined; @@ -18,13 +18,6 @@ interface ChatAvatarProps { 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 ( - - ); + return ; case MessageRole.System: return ; 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 index 2ce11d16905af..0783c7f64620a 100644 --- 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} > + + + - ) : null} - - diff --git a/x-pack/packages/kbn-ai-assistant/tsconfig.json b/x-pack/packages/kbn-ai-assistant/tsconfig.json index 159a38f67f426..c23f92085c28d 100644 --- a/x-pack/packages/kbn-ai-assistant/tsconfig.json +++ b/x-pack/packages/kbn-ai-assistant/tsconfig.json @@ -38,5 +38,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 index a341fdbe81412..f75eff1042eb6 100644 --- 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 ? : } + {chatService.loading ? : } {chatService.value && diff --git a/x-pack/plugins/search_assistant/tsconfig.json b/x-pack/plugins/search_assistant/tsconfig.json index 30002038bbc2d..f29f624ab46ea 100644 --- 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/**/*",