mirror of
https://github.com/elastic/kibana.git
synced 2025-04-23 17:28:26 -04:00
[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)
This commit is contained in:
parent
39ce60a399
commit
8a73528ab1
3 changed files with 47 additions and 19 deletions
|
@ -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}>
|
||||
|
|
|
@ -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}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
|
|
@ -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,
|
||||
() => {}
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue