[Obs AI Assistant] Update AI Assistant icon for Serverless (#202861)

## Summary ### Problem The Obs AI Assistant icon doesn't look as expected in serverless top navigation. ### Solution Update button CSS for Obs AI Assistant top nav icon for serverless. No changes to the classic navigation. ### Checklist - [x] The PR description includes the appropriate Release Notes section, and the correct `release_note:*` label is applied per the [guidelines](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)
elastic · Dec 5, 2024 · 8a73528 · 8a73528
1 parent 39ce60a
commit 8a73528
Show file tree

Hide file tree

Showing 3 changed files with 47 additions and 19 deletions.
diff --git a/...rvability_solution/observability_ai_assistant_app/public/components/nav_control/index.tsx b/...rvability_solution/observability_ai_assistant_app/public/components/nav_control/index.tsx
@@ -6,7 +6,7 @@
  */
 import React, { useEffect, useRef, useState } from 'react';
 import { AssistantAvatar, useAbortableAsync } from '@kbn/observability-ai-assistant-plugin/public';
-import { EuiButton, EuiLoadingSpinner, EuiToolTip } from '@elastic/eui';
+import { EuiButton, EuiButtonEmpty, EuiLoadingSpinner, EuiToolTip } from '@elastic/eui';
 import { css } from '@emotion/react';
 import { v4 } from 'uuid';
 import useObservable from 'react-use/lib/useObservable';
@@ -24,12 +24,14 @@ interface NavControlWithProviderDeps {
   appService: AIAssistantAppService;
   coreStart: CoreStart;
   pluginsStart: ObservabilityAIAssistantAppPluginStartDependencies;
+  isServerless?: boolean;
 }
 
 export const NavControlWithProvider = ({
   appService,
   coreStart,
   pluginsStart,
+  isServerless,
 }: NavControlWithProviderDeps) => {
   return (
     <SharedProviders
@@ -38,12 +40,12 @@ export const NavControlWithProvider = ({
       service={appService}
       theme$={coreStart.theme.theme$}
     >
-      <NavControl />
+      <NavControl isServerless={isServerless} />
     </SharedProviders>
   );
 };
 
-export function NavControl() {
+export function NavControl({ isServerless }: { isServerless?: boolean }) {
   const service = useAIAssistantAppService();
 
   const {
@@ -140,22 +142,41 @@ export function NavControl() {
   return (
     <>
       <EuiToolTip content={buttonLabel}>
-        <EuiButton
-          aria-label={buttonLabel}
-          data-test-subj="observabilityAiAssistantAppNavControlButton"
-          css={buttonCss}
-          onClick={() => {
-            service.conversations.openNewConversation({
-              messages: [],
-            });
-          }}
-          color="primary"
-          size="s"
-          fullWidth={false}
-          minWidth={0}
-        >
-          {chatService.loading ? <EuiLoadingSpinner size="s" /> : <AssistantAvatar size="xs" />}
-        </EuiButton>
+        {isServerless ? (
+          <EuiButtonEmpty
+            aria-label={buttonLabel}
+            data-test-subj="observabilityAiAssistantAppNavControlButton"
+            css={css`
+              padding: 0px 8px;
+            `}
+            onClick={() => {
+              service.conversations.openNewConversation({
+                messages: [],
+              });
+            }}
+            color="primary"
+            size="s"
+          >
+            {chatService.loading ? <EuiLoadingSpinner size="s" /> : <AssistantAvatar size="xs" />}
+          </EuiButtonEmpty>
+        ) : (
+          <EuiButton
+            aria-label={buttonLabel}
+            data-test-subj="observabilityAiAssistantAppNavControlButton"
+            css={buttonCss}
+            onClick={() => {
+              service.conversations.openNewConversation({
+                messages: [],
+              });
+            }}
+            color="primary"
+            size="s"
+            fullWidth={false}
+            minWidth={0}
+          >
+            {chatService.loading ? <EuiLoadingSpinner size="s" /> : <AssistantAvatar size="xs" />}
+          </EuiButton>
+        )}
       </EuiToolTip>
       {chatService.value ? (
         <ObservabilityAIAssistantChatServiceContext.Provider value={chatService.value}>

diff --git a/...olution/observability_ai_assistant_app/public/components/nav_control/lazy_nav_control.tsx b/...olution/observability_ai_assistant_app/public/components/nav_control/lazy_nav_control.tsx
@@ -20,12 +20,14 @@ interface NavControlInitiatorProps {
   appService: AIAssistantAppService;
   coreStart: CoreStart;
   pluginsStart: ObservabilityAIAssistantAppPluginStartDependencies;
+  isServerless?: boolean;
 }
 
 export const NavControlInitiator = ({
   appService,
   coreStart,
   pluginsStart,
+  isServerless,
 }: NavControlInitiatorProps) => {
   const { isVisible } = useIsNavControlVisible({ coreStart, pluginsStart });
 
@@ -38,6 +40,7 @@ export const NavControlInitiator = ({
       appService={appService}
       coreStart={coreStart}
       pluginsStart={pluginsStart}
+      isServerless={isServerless}
     />
   );
 };
diff --git a/x-pack/plugins/observability_solution/observability_ai_assistant_app/public/plugin.tsx b/x-pack/plugins/observability_solution/observability_ai_assistant_app/public/plugin.tsx
@@ -41,10 +41,13 @@ export class ObservabilityAIAssistantAppPlugin
 {
   logger: Logger;
   appService: AIAssistantAppService | undefined;
+  isServerless: boolean;
 
   constructor(context: PluginInitializerContext<ConfigSchema>) {
     this.logger = context.logger.get();
+    this.isServerless = context.env.packageInfo.buildFlavor === 'serverless';
   }
+
   setup(
     coreSetup: CoreSetup,
     _: ObservabilityAIAssistantAppPluginSetupDependencies
@@ -111,6 +114,7 @@ export class ObservabilityAIAssistantAppPlugin
               appService={appService}
               coreStart={coreStart}
               pluginsStart={pluginsStart}
+              isServerless={this.isServerless}
             />,
             element,
             () => {}