[Obs AI Assistant] Unify AI Assistant Nav Button (#212598)

## Summary

Unifies the display of the AI Assistant Button in classic and solution
navigations.
- Previously, the button only displayed an icon. Now it displays the
label as well
- Updated tooltip content to show keyboard shortcut to align with the
Security AI Assistant

## Stateful - Classic Navigation:


![image](https://github.com/user-attachments/assets/13d49bd2-08d4-44ff-9252-8e1fba261f1e)

## Serverless


![image](https://github.com/user-attachments/assets/8340194f-bfb1-4e0a-a4fa-6c8dfc7cfe65)


### Checklist

- [x] Any text added follows [EUI's writing
guidelines](https://elastic.github.io/eui/#/guidelines/writing), uses
sentence case text and includes [i18n
support](https://github.com/elastic/kibana/blob/main/src/platform/packages/shared/kbn-i18n/README.md)
- [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)

x-pack/solutions/observability/plugins/observability_ai_assistant_app/public/components/nav_control/index.tsx

@@ -6,8 +6,14 @@
  */
 import React, { useEffect, useRef, useState } from 'react';
 import { useAbortableAsync } from '@kbn/observability-ai-assistant-plugin/public';
-import { EuiButton, EuiButtonEmpty, EuiLoadingSpinner, EuiToolTip } from '@elastic/eui';
-import { css } from '@emotion/react';
+import {
+  EuiButton,
+  EuiButtonEmpty,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiLoadingSpinner,
+  EuiToolTip,
+} from '@elastic/eui';
 import { v4 } from 'uuid';
 import useObservable from 'react-use/lib/useObservable';
 import { i18n } from '@kbn/i18n';
@@ -20,7 +26,6 @@ import {
 } from '@kbn/ai-assistant';
 import { AssistantIcon } from '@kbn/ai-assistant-icon';
 import { useKibana } from '../../hooks/use_kibana';
-import { useTheme } from '../../hooks/use_theme';
 import { useNavControlScreenContext } from '../../hooks/use_nav_control_screen_context';
 import { SharedProviders } from '../../utils/shared_providers';
 import { ObservabilityAIAssistantAppPluginStartDependencies } from '../../types';
@@ -127,16 +132,6 @@ export function NavControl({ isServerless }: { isServerless?: boolean }) {
     hideConversationList: false,
   };
 
-  const theme = useTheme();
-
-  const buttonCss = css`
-    padding: 0px 8px;
-
-    svg path {
-      fill: ${theme.colors.darkestShade};
-    }
-  `;
-
   useEffect(() => {
     const keyboardListener = (event: KeyboardEvent) => {
       if (event.ctrlKey && event.code === 'Semicolon') {
@@ -153,44 +148,45 @@ export function NavControl({ isServerless }: { isServerless?: boolean }) {
     };
   }, [service.conversations]);
 
+  const EuiButtonBasicOrEmpty = isServerless ? EuiButtonEmpty : EuiButton;
+
+  const buttonContent: React.ReactNode = (
+    <EuiFlexGroup gutterSize="s" alignItems="center">
+      <EuiFlexItem grow={false}>
+        <AssistantIcon size="m" />
+      </EuiFlexItem>
+      <EuiFlexItem grow={false}>
+        {i18n.translate('xpack.observabilityAiAssistant.navControl.assistantNavLink', {
+          defaultMessage: 'AI Assistant',
+        })}
+      </EuiFlexItem>
+    </EuiFlexGroup>
+  );
+
   return (
     <>
-      <EuiToolTip content={buttonLabel}>
-        {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" /> : <AssistantIcon size="m" />}
-          </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" /> : <AssistantIcon size="m" />}
-          </EuiButton>
+      <EuiToolTip
+        content={i18n.translate(
+          'xpack.observabilityAiAssistant.navControl.openTheAIAssistantPopoverLabel',
+          { defaultMessage: 'Keyboard shortcut Ctrl ;' }
         )}
+      >
+        <EuiButtonBasicOrEmpty
+          aria-label={i18n.translate(
+            'xpack.observabilityAiAssistant.navControl.assistantNavLinkAriaLabel',
+            { defaultMessage: 'Open the AI Assistant' }
+          )}
+          data-test-subj="observabilityAiAssistantAppNavControlButton"
+          onClick={() => {
+            service.conversations.openNewConversation({
+              messages: [],
+            });
+          }}
+          color="primary"
+          size="s"
+        >
+          {chatService.loading ? <EuiLoadingSpinner size="s" /> : buttonContent}
+        </EuiButtonBasicOrEmpty>
       </EuiToolTip>
       {chatService.value ? (
         <ObservabilityAIAssistantChatServiceContext.Provider value={chatService.value}>
@@ -221,8 +217,3 @@ export function NavControl({ isServerless }: { isServerless?: boolean }) {
     </>
   );
 }
-
-const buttonLabel = i18n.translate(
-  'xpack.observabilityAiAssistant.navControl.openTheAIAssistantPopoverLabel',
-  { defaultMessage: 'Open the AI Assistant' }
-);