mirror of
https://github.com/elastic/kibana.git
synced 2025-04-23 09:19:04 -04:00
[chore] Delete deprecated avatars (#205448)
## Summary As titled. Delete deprecated avatars, replace stray usage. <img width="1021" alt="Screenshot 2025-01-02 at 4 38 33 PM" src="https://github.com/user-attachments/assets/01e8045c-5209-4926-a5da-f04aa65ac76e" />
This commit is contained in:
Clint Andrew Hall
GitHub
parent
72d3f7b89c
commit
292111b0d6
6 changed files with 2 additions and 283 deletions
|
|
@ -1,135 +0,0 @@
|
|||
/*
|
||||
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
|
||||
* or more contributor license agreements. Licensed under the Elastic License
|
||||
* 2.0; you may not use this file except in compliance with the Elastic License
|
||||
* 2.0.
|
||||
*/
|
||||
|
||||
import React from 'react';
|
||||
import styled from '@emotion/styled';
|
||||
import { AssistantAvatar } from './assistant_avatar/assistant_avatar';
|
||||
|
||||
const Container = styled.div`
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-top: ${({ theme }) => theme.euiTheme.size.xxl};
|
||||
margin-bottom: ${({ theme }) => theme.euiTheme.size.l};
|
||||
|
||||
:before,
|
||||
:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
}
|
||||
`;
|
||||
|
||||
const Animation = styled.div`
|
||||
width: 99%;
|
||||
height: 99%;
|
||||
border-radius: 50px;
|
||||
z-index: 1;
|
||||
position: relative;
|
||||
|
||||
&:before,
|
||||
&:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border: inherit;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 0;
|
||||
border: 1px solid ${(props) => props.theme.euiTheme.colors.borderBasePlain};
|
||||
border-radius: inherit;
|
||||
animation: 4s cubic-bezier(0.42, 0, 0.37, 1) 0.5s infinite normal none running pulsing;
|
||||
}
|
||||
&:after {
|
||||
animation: 4s cubic-bezier(0.42, 0, 0.37, 1) 0.5s infinite normal none running pulsing1;
|
||||
}
|
||||
|
||||
@keyframes pulsing {
|
||||
0% {
|
||||
opacity: 1;
|
||||
transform: scaleY(1) scaleX(1);
|
||||
}
|
||||
20% {
|
||||
opacity: 0.5;
|
||||
}
|
||||
70% {
|
||||
opacity: 0.2;
|
||||
transform: scaleY(2) scaleX(2);
|
||||
}
|
||||
80% {
|
||||
opacity: 0;
|
||||
transform: scaleY(2) scaleX(2);
|
||||
}
|
||||
90% {
|
||||
opacity: 0;
|
||||
transform: scaleY(1) scaleX(1);
|
||||
}
|
||||
}
|
||||
@keyframes pulsing1 {
|
||||
0% {
|
||||
opacity: 1;
|
||||
transform: scaleY(1) scaleX(1);
|
||||
}
|
||||
15% {
|
||||
opacity: 1;
|
||||
transform: scaleY(1) scaleX(1);
|
||||
}
|
||||
40% {
|
||||
opacity: 0.5;
|
||||
}
|
||||
70% {
|
||||
opacity: 0.2;
|
||||
transform: scaleY(1.5) scaleX(1.5);
|
||||
}
|
||||
80% {
|
||||
opacity: 0;
|
||||
transform: scaleY(1.5) scaleX(1.5);
|
||||
}
|
||||
90% {
|
||||
opacity: 0;
|
||||
transform: scaleY(1) scaleX(1);
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
const AvatarWrapper = styled.span`
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 2;
|
||||
background: #fff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 50%;
|
||||
|
||||
:before,
|
||||
:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
}
|
||||
`;
|
||||
|
||||
/**
|
||||
* @deprecated This component will soon be replaced by `AssistantBeacon` from `@kbn/ai-assistant-icon`.
|
||||
*/
|
||||
export const AssistantAnimatedIcon = React.memo(() => (
|
||||
<Container>
|
||||
<Animation />
|
||||
<AvatarWrapper>
|
||||
<AssistantAvatar size="m" />
|
||||
</AvatarWrapper>
|
||||
</Container>
|
||||
));
|
||||
|
||||
AssistantAnimatedIcon.displayName = 'AssistantAnimatedIcon';
|
||||
|
|
@ -1,49 +0,0 @@
|
|||
/*
|
||||
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
|
||||
* or more contributor license agreements. Licensed under the Elastic License
|
||||
* 2.0; you may not use this file except in compliance with the Elastic License
|
||||
* 2.0.
|
||||
*/
|
||||
|
||||
import React, { ReactNode } from 'react';
|
||||
|
||||
export interface AssistantAvatarProps {
|
||||
size?: keyof typeof sizeMap;
|
||||
// Required for EuiAvatar `iconType` prop
|
||||
// eslint-disable-next-line react/no-unused-prop-types
|
||||
children?: ReactNode;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
export const sizeMap = {
|
||||
xl: 64,
|
||||
l: 48,
|
||||
m: 32,
|
||||
s: 24,
|
||||
xs: 16,
|
||||
xxs: 12,
|
||||
};
|
||||
|
||||
/**
|
||||
* Default Elastic AI Assistant logo
|
||||
*
|
||||
* @deprecated This component will soon be replaced by `AssistantIcon` from `@kbn/ai-assistant-icon`.
|
||||
*/
|
||||
export const AssistantAvatar = ({ className, size = 's' }: AssistantAvatarProps) => (
|
||||
<svg
|
||||
className={className}
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width={sizeMap[size]}
|
||||
height={sizeMap[size]}
|
||||
viewBox="0 0 64 64"
|
||||
fill="none"
|
||||
>
|
||||
<path fill="#F04E98" d="M36 28h24v36H36V28Z" />
|
||||
<path fill="#00BFB3" d="M4 46c0-9.941 8.059-18 18-18h6v36h-6c-9.941 0-18-8.059-18-18Z" />
|
||||
<path
|
||||
fill="#343741"
|
||||
d="M60 12c0 6.627-5.373 12-12 12s-12-5.373-12-12S41.373 0 48 0s12 5.373 12 12Z"
|
||||
/>
|
||||
<path fill="#FA744E" d="M6 23C6 10.85 15.85 1 28 1v22H6Z" />
|
||||
</svg>
|
||||
);
|
||||
|
|
@ -1,49 +0,0 @@
|
|||
/*
|
||||
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
|
||||
* or more contributor license agreements. Licensed under the Elastic License
|
||||
* 2.0; you may not use this file except in compliance with the Elastic License
|
||||
* 2.0.
|
||||
*/
|
||||
import { useEuiTheme } from '@elastic/eui';
|
||||
import React, { ReactNode } from 'react';
|
||||
|
||||
export interface AssistantAvatarProps {
|
||||
size?: keyof typeof sizeMap;
|
||||
children?: ReactNode;
|
||||
css?: React.SVGProps<SVGElement>['css'];
|
||||
className?: string;
|
||||
}
|
||||
|
||||
export const sizeMap = {
|
||||
xl: 64,
|
||||
l: 48,
|
||||
m: 32,
|
||||
s: 24,
|
||||
xs: 16,
|
||||
};
|
||||
|
||||
/** @deprecated This component will soon be replaced by `AssistantIcon` from `@kbn/ai-assistant-icon`. */
|
||||
export function AssistantAvatar({ size = 's', css, className }: AssistantAvatarProps) {
|
||||
const { euiTheme } = useEuiTheme();
|
||||
const sizePx = sizeMap[size];
|
||||
|
||||
return (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width={sizePx}
|
||||
height={sizePx}
|
||||
viewBox="0 0 64 64"
|
||||
fill="none"
|
||||
css={css}
|
||||
className={className}
|
||||
>
|
||||
<path fill="#F04E98" d="M36 28h24v36H36V28Z" />
|
||||
<path fill="#00BFB3" d="M4 46c0-9.941 8.059-18 18-18h6v36h-6c-9.941 0-18-8.059-18-18Z" />
|
||||
<path
|
||||
fill={euiTheme.colors.textParagraph}
|
||||
d="M60 12c0 6.627-5.373 12-12 12s-12-5.373-12-12S41.373 0 48 0s12 5.373 12 12Z"
|
||||
/>
|
||||
<path fill="#FA744E" d="M6 23C6 10.85 15.85 1 28 1v22H6Z" />
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
|
@ -32,7 +32,6 @@ export type {
|
|||
};
|
||||
|
||||
export { aiAssistantCapabilities } from '../common/capabilities';
|
||||
export { AssistantAvatar } from './components/assistant_avatar';
|
||||
export { ConnectorSelectorBase } from './components/connector_selector/connector_selector_base';
|
||||
export { useAbortableAsync, type AbortableAsyncState } from './hooks/use_abortable_async';
|
||||
export { useGenAIConnectorsWithoutContext } from './hooks/use_genai_connectors';
|
||||
|
|
|
|||
|
|
@ -19,8 +19,8 @@ import {
|
|||
} from '@elastic/eui';
|
||||
import React from 'react';
|
||||
import { i18n } from '@kbn/i18n';
|
||||
import { AssistantAvatar } from '@kbn/observability-ai-assistant-plugin/public';
|
||||
import { css } from '@emotion/css';
|
||||
import { AssistantIcon } from '@kbn/ai-assistant-icon';
|
||||
|
||||
export function RootCauseAnalysisCallout({
|
||||
onClick,
|
||||
|
|
@ -46,7 +46,7 @@ export function RootCauseAnalysisCallout({
|
|||
`}
|
||||
>
|
||||
<EuiFlexGroup direction="row" alignItems="center" justifyContent="center">
|
||||
<AssistantAvatar />
|
||||
<AssistantIcon size="l" />
|
||||
<EuiFlexItem grow={false}>
|
||||
<EuiTitle size="xs">
|
||||
<h2>
|
||||
|
|
|
|||
|
|
@ -1,47 +0,0 @@
|
|||
/*
|
||||
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
|
||||
* or more contributor license agreements. Licensed under the Elastic License
|
||||
* 2.0; you may not use this file except in compliance with the Elastic License
|
||||
* 2.0.
|
||||
*/
|
||||
|
||||
import React from 'react';
|
||||
|
||||
interface Props {
|
||||
className?: string;
|
||||
size?: keyof typeof sizeMap;
|
||||
}
|
||||
|
||||
export const sizeMap = {
|
||||
xl: 64,
|
||||
l: 48,
|
||||
m: 32,
|
||||
s: 24,
|
||||
xs: 16,
|
||||
xxs: 12,
|
||||
};
|
||||
|
||||
/**
|
||||
* Default Elastic AI Assistant logo
|
||||
*
|
||||
* @deprecated This component will soon be replaced by `AssistantIcon` from `@kbn/ai-assistant-icon`.
|
||||
*/
|
||||
export const AssistantAvatar = ({ className, size = 's' }: Props) => (
|
||||
<svg
|
||||
className={className}
|
||||
fill="none"
|
||||
height={sizeMap[size]}
|
||||
role="img"
|
||||
viewBox="0 0 64 64"
|
||||
width={sizeMap[size]}
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path fill="#F04E98" d="M36 28h24v36H36V28Z" />
|
||||
<path fill="#00BFB3" d="M4 46c0-9.941 8.059-18 18-18h6v36h-6c-9.941 0-18-8.059-18-18Z" />
|
||||
<path
|
||||
fill="#343741"
|
||||
d="M60 12c0 6.627-5.373 12-12 12s-12-5.373-12-12S41.373 0 48 0s12 5.373 12 12Z"
|
||||
/>
|
||||
<path fill="#FA744E" d="M6 23C6 10.85 15.85 1 28 1v22H6Z" />
|
||||
</svg>
|
||||
);
|
||||
Loading…
Add table
Add a link
Reference in a new issue