From 75b6d2ff7eae5749eacd2c7f01b6824b78f53f64 Mon Sep 17 00:00:00 2001 From: Patryk Kopycinski Date: Sun, 1 Dec 2024 22:36:13 +0100 Subject: [PATCH 1/2] Add support for borealis theme --- .../assistant/assistant_animated_icon.tsx | 194 ++++++++++-------- .../impl/assistant/assistant_body/index.tsx | 18 +- .../impl/assistant/assistant_header/index.tsx | 8 +- .../assistant_overlay/flyout_navigation.tsx | 37 +++- .../impl/assistant/chat_send/index.tsx | 11 +- .../impl/assistant/index.tsx | 12 +- .../selected_prompt_contexts/index.tsx | 21 +- .../prompt_editor/system_prompt/helpers.tsx | 47 +++-- .../select_system_prompt/index.tsx | 9 +- .../settings_context_menu.tsx | 6 +- .../connector_selector/index.tsx | 25 ++- .../connector_selector_inline.tsx | 6 +- .../index.tsx | 5 +- .../context_editor_modal/index.tsx | 4 +- .../context_preview.tsx | 31 ++- .../stats/allowed_stat/index.tsx | 8 +- .../stats/anonymized_stat/index.tsx | 8 +- .../stats/available_stat/index.tsx | 8 +- .../kbn-elastic-assistant/tsconfig.json | 3 +- .../get_comments/stream/message_text.tsx | 58 +++--- 20 files changed, 308 insertions(+), 211 deletions(-) diff --git a/x-pack/packages/kbn-elastic-assistant/impl/assistant/assistant_animated_icon.tsx b/x-pack/packages/kbn-elastic-assistant/impl/assistant/assistant_animated_icon.tsx index eeb6e83368acd..7ac2929bbb676 100644 --- a/x-pack/packages/kbn-elastic-assistant/impl/assistant/assistant_animated_icon.tsx +++ b/x-pack/packages/kbn-elastic-assistant/impl/assistant/assistant_animated_icon.tsx @@ -5,101 +5,119 @@ * 2.0. */ -import React from 'react'; +import React, { PropsWithChildren } from 'react'; import styled from '@emotion/styled'; -import { euiThemeVars } from '@kbn/ui-theme'; +import { css } from '@emotion/react'; +import { useEuiTheme } from '@elastic/eui'; 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: ${euiThemeVars.euiSizeXXL}; - margin-bottom: ${euiThemeVars.euiSizeL}; +const Container = ({ children }: PropsWithChildren) => { + const { euiTheme } = useEuiTheme(); + return ( +
+ {children} +
+ ); +}; -const Animation = styled.div` - width: 99%; - height: 99%; - border-radius: 50px; - z-index: 1; - position: relative; +const Animation = () => { + const { euiTheme } = useEuiTheme(); - &:before, - &:after { - content: ''; - position: absolute; - width: 100%; - height: 100%; - border: inherit; - top: 0; - left: 0; - z-index: 0; - border: 1px solid ${euiThemeVars.euiColorPrimary}; - 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; - } + return ( +
+ ); +}; const AvatarWrapper = styled.span` width: 100%; diff --git a/x-pack/packages/kbn-elastic-assistant/impl/assistant/assistant_body/index.tsx b/x-pack/packages/kbn-elastic-assistant/impl/assistant/assistant_body/index.tsx index 757f385db058c..8451e012f8927 100644 --- a/x-pack/packages/kbn-elastic-assistant/impl/assistant/assistant_body/index.tsx +++ b/x-pack/packages/kbn-elastic-assistant/impl/assistant/assistant_body/index.tsx @@ -13,9 +13,15 @@ import React, { useMemo, useRef, } from 'react'; -import { EuiEmptyPrompt, EuiFlexGroup, EuiFlexItem, EuiPanel, EuiText } from '@elastic/eui'; +import { + EuiEmptyPrompt, + EuiFlexGroup, + EuiFlexItem, + EuiPanel, + EuiText, + useEuiTheme, +} from '@elastic/eui'; import { HttpSetup } from '@kbn/core-http-browser'; -import { euiThemeVars } from '@kbn/ui-theme'; import { css } from '@emotion/react'; import { PromptResponse } from '@kbn/elastic-assistant-common'; import { AssistantAnimatedIcon } from '../assistant_animated_icon'; @@ -53,6 +59,8 @@ export const AssistantBody: FunctionComponent = ({ isWelcomeSetup, setIsSettingsModalVisible, }) => { + const { euiTheme } = useEuiTheme(); + const isEmptyConversation = useMemo( () => currentConversation?.messages.length === 0, [currentConversation?.messages.length] @@ -64,16 +72,16 @@ export const AssistantBody: FunctionComponent = ({ {i18n.DISCLAIMER} ), - [isEmptyConversation] + [euiTheme, isEmptyConversation] ); // Start Scrolling diff --git a/x-pack/packages/kbn-elastic-assistant/impl/assistant/assistant_header/index.tsx b/x-pack/packages/kbn-elastic-assistant/impl/assistant/assistant_header/index.tsx index 406ef8be16c73..e604fb142073c 100644 --- a/x-pack/packages/kbn-elastic-assistant/impl/assistant/assistant_header/index.tsx +++ b/x-pack/packages/kbn-elastic-assistant/impl/assistant/assistant_header/index.tsx @@ -14,9 +14,9 @@ import { EuiPanel, EuiToolTip, EuiSkeletonTitle, + useEuiTheme, } from '@elastic/eui'; import { css } from '@emotion/react'; -import { euiThemeVars } from '@kbn/ui-theme'; import { isEmpty } from 'lodash'; import { DataStreamApis } from '../use_data_stream_apis'; import { Conversation } from '../../..'; @@ -79,6 +79,8 @@ export const AssistantHeader: React.FC = ({ isAssistantEnabled, refetchPrompts, }) => { + const { euiTheme } = useEuiTheme(); + const showAnonymizedValuesChecked = useMemo( () => selectedConversation?.replacements != null && @@ -148,8 +150,8 @@ export const AssistantHeader: React.FC = ({ hasShadow={false} paddingSize="m" css={css` - padding-top: ${euiThemeVars.euiSizeS}; - padding-bottom: ${euiThemeVars.euiSizeS}; + padding-top: ${euiTheme.size.s}; + padding-bottom: ${euiTheme.size.s}; `} > diff --git a/x-pack/packages/kbn-elastic-assistant/impl/assistant/assistant_overlay/flyout_navigation.tsx b/x-pack/packages/kbn-elastic-assistant/impl/assistant/assistant_overlay/flyout_navigation.tsx index 89518940799ee..dad8d8960df08 100644 --- a/x-pack/packages/kbn-elastic-assistant/impl/assistant/assistant_overlay/flyout_navigation.tsx +++ b/x-pack/packages/kbn-elastic-assistant/impl/assistant/assistant_overlay/flyout_navigation.tsx @@ -6,11 +6,16 @@ */ import React, { memo, useCallback, useMemo } from 'react'; -import { EuiPanel, EuiFlexGroup, EuiFlexItem, EuiButtonIcon, EuiButtonEmpty } from '@elastic/eui'; +import { + EuiPanel, + EuiFlexGroup, + EuiFlexItem, + EuiButtonIcon, + EuiButtonEmpty, + useEuiTheme, +} from '@elastic/eui'; import { css } from '@emotion/react'; -import styled from '@emotion/styled'; import { i18n } from '@kbn/i18n'; -import { euiThemeVars } from '@kbn/ui-theme'; import { NEW_CHAT } from '../conversations/conversation_sidepanel/translations'; export interface FlyoutNavigationProps { @@ -22,13 +27,21 @@ export interface FlyoutNavigationProps { isAssistantEnabled: boolean; } -const VerticalSeparator = styled.div` - :before { - content: ''; - height: 100%; - border-left: 1px solid ${euiThemeVars.euiColorLightShade}; - } -`; +const VerticalSeparator = () => { + const { euiTheme } = useEuiTheme(); + + return ( +
+ ); +}; /** * Navigation menu on the right panel only, with expand/collapse button and option to @@ -44,6 +57,8 @@ export const FlyoutNavigation = memo( onConversationCreate, isAssistantEnabled, }) => { + const { euiTheme } = useEuiTheme(); + const onToggle = useCallback( () => setIsExpanded && setIsExpanded(!isExpanded), [isExpanded, setIsExpanded] @@ -84,7 +99,7 @@ export const FlyoutNavigation = memo( paddingSize="s" grow={false} css={css` - border-bottom: 1px solid ${euiThemeVars.euiColorLightShade}; + border-bottom: 1px solid ${euiTheme.colors.borderBasePlain}; `} > = ({ shouldRefocusPrompt, userPrompt, }) => { + const { euiTheme } = useEuiTheme(); + + console.error('eui', euiTheme); + // For auto-focusing prompt within timeline const promptTextAreaRef = useRef(null); useEffect(() => { @@ -77,9 +80,9 @@ export const ChatSend: React.FC = ({ css={css` right: 0; position: absolute; - margin-right: ${euiThemeVars.euiSizeS}; - margin-bottom: ${euiThemeVars.euiSizeS}; `} + // margin-right: ${euiTheme.size.s}; + // margin-bottom: ${euiTheme.size.s}; grow={false} > = ({ setChatHistoryVisible, shouldRefocusPrompt = false, }) => { + const { euiTheme } = useEuiTheme(); const { assistantAvailability: { isAssistantEnabled }, assistantTelemetry, @@ -378,7 +379,7 @@ const AssistantComponent: React.FC = ({ })} // Avoid comments going off the flyout css={css` - padding-bottom: ${euiThemeVars.euiSizeL}; + padding-bottom: ${euiTheme.size.l}; > li > div:nth-child(2) { overflow: hidden; @@ -402,6 +403,7 @@ const AssistantComponent: React.FC = ({ setIsStreaming, currentUserAvatar, currentSystemPrompt?.content, + euiTheme.size.l, selectedPromptContextsCount, ] ); @@ -425,7 +427,7 @@ const AssistantComponent: React.FC = ({ grow={false} css={css` inline-size: ${CONVERSATION_SIDE_PANEL_WIDTH}px; - border-right: 1px solid ${euiThemeVars.euiColorLightShade}; + border-right: 1px solid ${euiTheme.colors.borderBasePlain}; `} > = ({ = ({ {!isDisabled && ( = ({ setSelectedPromptContexts, currentReplacements, }) => { + const { euiTheme } = useEuiTheme(); + const unselectPromptContext = useCallback( (unselectedId: string) => { setSelectedPromptContexts((prev) => omit(unselectedId, prev)); @@ -64,13 +72,14 @@ const SelectedPromptContextsComponent: React.FC = ({ } id={id} paddingSize="s" + // background: ${euiTheme.colors.backgroundPage}; css={css` - background: ${euiThemeVars.euiPageBackgroundColor}; - border-radius: ${euiThemeVars.euiBorderRadius}; + background: red; + border-radius: ${euiTheme.border.radius}; > div:first-child { - color: ${euiThemeVars.euiColorPrimary}; - padding: ${euiThemeVars.euiFormControlPadding}; + color: ${euiTheme.colors.primary}; + padding: ${euiTheme.size.m}; } `} borders={'all'} diff --git a/x-pack/packages/kbn-elastic-assistant/impl/assistant/prompt_editor/system_prompt/helpers.tsx b/x-pack/packages/kbn-elastic-assistant/impl/assistant/prompt_editor/system_prompt/helpers.tsx index 7d54d347964e4..5f6e47f9ffef1 100644 --- a/x-pack/packages/kbn-elastic-assistant/impl/assistant/prompt_editor/system_prompt/helpers.tsx +++ b/x-pack/packages/kbn-elastic-assistant/impl/assistant/prompt_editor/system_prompt/helpers.tsx @@ -5,19 +5,27 @@ * 2.0. */ -import { EuiText, EuiToolTip } from '@elastic/eui'; +import { EuiText, EuiToolTip, useEuiTheme } from '@elastic/eui'; import type { EuiSuperSelectOption } from '@elastic/eui'; -import React from 'react'; -import styled from '@emotion/styled'; +import React, { PropsWithChildren } from 'react'; import { isEmpty } from 'lodash/fp'; -import { euiThemeVars } from '@kbn/ui-theme'; import { PromptResponse } from '@kbn/elastic-assistant-common'; import { css } from '@emotion/react'; import { EMPTY_PROMPT } from './translations'; -const Strong = styled.strong` - margin-right: ${euiThemeVars.euiSizeS}; -`; +const Strong = (props: PropsWithChildren) => { + const { euiTheme } = useEuiTheme(); + + return ( + + {props.children} + + ); +}; interface GetOptionFromPromptProps extends PromptResponse { content: string; @@ -25,23 +33,28 @@ interface GetOptionFromPromptProps extends PromptResponse { name: string; } -export const getOptionFromPrompt = ({ - content, - id, - name, -}: GetOptionFromPromptProps): EuiSuperSelectOption => ({ - value: id, - inputDisplay: ( +const InputDisplay = ({ name }: { name: string }) => { + const { euiTheme } = useEuiTheme(); + + return ( {name} - ), + ); +}; + +export const getOptionFromPrompt = ({ + content, + id, + name, +}: GetOptionFromPromptProps): EuiSuperSelectOption => ({ + value: id, + inputDisplay: , dropdownDisplay: ( <> {name} diff --git a/x-pack/packages/kbn-elastic-assistant/impl/assistant/prompt_editor/system_prompt/select_system_prompt/index.tsx b/x-pack/packages/kbn-elastic-assistant/impl/assistant/prompt_editor/system_prompt/select_system_prompt/index.tsx index c567e18a446f4..96106d4b94054 100644 --- a/x-pack/packages/kbn-elastic-assistant/impl/assistant/prompt_editor/system_prompt/select_system_prompt/index.tsx +++ b/x-pack/packages/kbn-elastic-assistant/impl/assistant/prompt_editor/system_prompt/select_system_prompt/index.tsx @@ -14,10 +14,10 @@ import { EuiFormRow, EuiSuperSelect, EuiToolTip, + useEuiTheme, } from '@elastic/eui'; import React, { useCallback, useMemo, useState } from 'react'; -import { euiThemeVars } from '@kbn/ui-theme'; import { PromptResponse, PromptTypeEnum, @@ -56,6 +56,7 @@ const SelectSystemPromptComponent: React.FC = ({ selectedPrompt, setIsSettingsModalVisible, }) => { + const { euiTheme } = useEuiTheme(); const { setSelectedSettingsTab } = useAssistantContext(); const allSystemPrompts = useMemo( () => allPrompts.filter((p) => p.promptType === PromptTypeEnum.system), @@ -128,7 +129,7 @@ const SelectSystemPromptComponent: React.FC = ({ = ({ inline-size: 16px; block-size: 16px; border-radius: 16px; - background: ${euiThemeVars.euiColorMediumShade}; + background: ${euiTheme.colors.backgroundBaseFormsControlDisabled}; :hover:not(:disabled) { - background: ${euiThemeVars.euiColorMediumShade}; + background: ${euiTheme.colors.backgroundBaseFormsControlDisabled}; transform: none; } diff --git a/x-pack/packages/kbn-elastic-assistant/impl/assistant/settings/settings_context_menu/settings_context_menu.tsx b/x-pack/packages/kbn-elastic-assistant/impl/assistant/settings/settings_context_menu/settings_context_menu.tsx index 7b55e994b47ad..cf393e221393a 100644 --- a/x-pack/packages/kbn-elastic-assistant/impl/assistant/settings/settings_context_menu/settings_context_menu.tsx +++ b/x-pack/packages/kbn-elastic-assistant/impl/assistant/settings/settings_context_menu/settings_context_menu.tsx @@ -15,9 +15,9 @@ import { EuiNotificationBadge, EuiPopover, EuiButtonIcon, + useEuiTheme, } from '@elastic/eui'; import { css } from '@emotion/react'; -import { euiThemeVars } from '@kbn/ui-theme'; import { KnowledgeBaseTour } from '../../../tour/knowledge_base'; import { AnonymizationSettingsManagement } from '../../../data_anonymization/settings/anonymization_settings_management'; import { useAssistantContext } from '../../../..'; @@ -32,6 +32,7 @@ interface Params { export const SettingsContextMenu: React.FC = React.memo( ({ isDisabled = false, onChatCleared }: Params) => { + const { euiTheme } = useEuiTheme(); const { navigateToApp, knowledgeBase } = useAssistantContext(); const [isPopoverOpen, setPopover] = useState(false); @@ -139,7 +140,7 @@ export const SettingsContextMenu: React.FC = React.memo( icon={'refresh'} data-test-subj={'clear-chat'} css={css` - color: ${euiThemeVars.euiColorDanger}; + color: ${euiTheme.colors.danger}; `} > {i18n.RESET_CONVERSATION} @@ -147,6 +148,7 @@ export const SettingsContextMenu: React.FC = React.memo( ], [ + euiTheme.colors.danger, handleNavigateToAnonymization, handleNavigateToKnowledgeBase, handleNavigateToSettings, diff --git a/x-pack/packages/kbn-elastic-assistant/impl/connectorland/connector_selector/index.tsx b/x-pack/packages/kbn-elastic-assistant/impl/connectorland/connector_selector/index.tsx index 3127ab7fe3911..265c0423ca1ef 100644 --- a/x-pack/packages/kbn-elastic-assistant/impl/connectorland/connector_selector/index.tsx +++ b/x-pack/packages/kbn-elastic-assistant/impl/connectorland/connector_selector/index.tsx @@ -5,14 +5,20 @@ * 2.0. */ -import { EuiButtonEmpty, EuiFlexGroup, EuiFlexItem, EuiSuperSelect, EuiText } from '@elastic/eui'; +import { + EuiButtonEmpty, + EuiFlexGroup, + EuiFlexItem, + EuiSuperSelect, + EuiText, + useEuiTheme, +} from '@elastic/eui'; import { css } from '@emotion/css'; import React, { Suspense, useCallback, useMemo, useState } from 'react'; import { ActionConnector, ActionType } from '@kbn/triggers-actions-ui-plugin/public'; import { OpenAiProviderType } from '@kbn/stack-connectors-plugin/common/openai/constants'; -import { euiThemeVars } from '@kbn/ui-theme'; import { some } from 'lodash'; import type { AttackDiscoveryStats } from '@kbn/elastic-assistant-common'; import { AttackDiscoveryStatusIndicator } from './attack_discovery_status_indicator'; @@ -25,13 +31,6 @@ import { AddConnectorModal } from '../add_connector_modal'; export const ADD_NEW_CONNECTOR = 'ADD_NEW_CONNECTOR'; -const placeholderCss = css` - .euiSuperSelectControl__placeholder { - color: ${euiThemeVars.euiColorPrimary}; - margin-right: ${euiThemeVars.euiSizeXS}; - } -`; - interface Props { isDisabled?: boolean; isOpen?: boolean; @@ -57,6 +56,7 @@ export const ConnectorSelector: React.FC = React.memo( setIsOpen, stats = null, }) => { + const { euiTheme } = useEuiTheme(); const { actionTypeRegistry, http, assistantAvailability } = useAssistantContext(); // Connector Modal State const [isConnectorModalVisible, setIsConnectorModalVisible] = useState(false); @@ -198,7 +198,12 @@ export const ConnectorSelector: React.FC = React.memo( ) : ( = React.memo( onConnectorSelected, stats = null, }) => { + const { euiTheme } = useEuiTheme(); const [isOpen, setIsOpen] = useState(false); const { assistantAvailability } = useAssistantContext(); const { setApiConfig } = useConversation(); @@ -120,7 +120,7 @@ export const ConnectorSelectorInline: React.FC = React.memo( {displayText} diff --git a/x-pack/packages/kbn-elastic-assistant/impl/data_anonymization/settings/anonymization_settings_management/index.tsx b/x-pack/packages/kbn-elastic-assistant/impl/data_anonymization/settings/anonymization_settings_management/index.tsx index 3b8758afdd215..d98027d24cfec 100644 --- a/x-pack/packages/kbn-elastic-assistant/impl/data_anonymization/settings/anonymization_settings_management/index.tsx +++ b/x-pack/packages/kbn-elastic-assistant/impl/data_anonymization/settings/anonymization_settings_management/index.tsx @@ -20,7 +20,6 @@ import { } from '@elastic/eui'; import React, { useCallback, useState } from 'react'; -import { euiThemeVars } from '@kbn/ui-theme'; import { Stats } from '../../../data_anonymization_editor/stats'; import { ContextEditor } from '../../../data_anonymization_editor/context_editor'; import * as i18n from '../anonymization_settings/translations'; @@ -138,7 +137,7 @@ const AnonymizationSettingsManagementComponent: React.FC = ({ isDataAnonymizable={true} anonymizationFields={updatedAnonymizationData.data} titleSize="m" - gap={euiThemeVars.euiSizeS} + gap={euiTheme.size.s} /> @@ -173,7 +172,7 @@ const AnonymizationSettingsManagementComponent: React.FC = ({ isDataAnonymizable={true} anonymizationFields={updatedAnonymizationData.data} titleSize="m" - gap={euiThemeVars.euiSizeS} + gap={euiTheme.size.s} /> diff --git a/x-pack/packages/kbn-elastic-assistant/impl/data_anonymization_editor/context_editor_modal/index.tsx b/x-pack/packages/kbn-elastic-assistant/impl/data_anonymization_editor/context_editor_modal/index.tsx index 652f6fd89b315..089ab30116cd8 100644 --- a/x-pack/packages/kbn-elastic-assistant/impl/data_anonymization_editor/context_editor_modal/index.tsx +++ b/x-pack/packages/kbn-elastic-assistant/impl/data_anonymization_editor/context_editor_modal/index.tsx @@ -25,7 +25,6 @@ import { } from '@elastic/eui'; import { i18n as I18n } from '@kbn/i18n'; import { css } from '@emotion/react'; -import { euiThemeVars } from '@kbn/ui-theme'; import { AnonymizationFieldResponse, PerformAnonymizationFieldsBulkActionRequestBody, @@ -48,6 +47,7 @@ export interface Props { } const SelectedPromptContextEditorModalComponent = ({ onClose, onSave, promptContext }: Props) => { + const { euiTheme } = useEuiTheme(); const { http, toasts } = useAssistantContext(); const [checked, setChecked] = useState(false); const checkboxId = useGeneratedHtmlId({ prefix: 'updateSettingPresetsCheckbox' }); @@ -187,7 +187,7 @@ const SelectedPromptContextEditorModalComponent = ({ onClose, onSave, promptCont diff --git a/x-pack/packages/kbn-elastic-assistant/impl/data_anonymization_editor/context_preview.tsx b/x-pack/packages/kbn-elastic-assistant/impl/data_anonymization_editor/context_preview.tsx index 49d5d0fe4d63d..1c21724295644 100644 --- a/x-pack/packages/kbn-elastic-assistant/impl/data_anonymization_editor/context_preview.tsx +++ b/x-pack/packages/kbn-elastic-assistant/impl/data_anonymization_editor/context_preview.tsx @@ -5,22 +5,35 @@ * 2.0. */ -import React, { useMemo } from 'react'; -import { EuiText } from '@elastic/eui'; +import React, { useMemo, PropsWithChildren } from 'react'; +import { EuiText, useEuiTheme } from '@elastic/eui'; import { getAnonymizedValue } from '@kbn/elastic-assistant-common'; import { getAnonymizedData } from '@kbn/elastic-assistant-common/impl/data_anonymization/get_anonymized_data'; import { getAnonymizedValues } from '@kbn/elastic-assistant-common/impl/data_anonymization/get_anonymized_values'; -import { euiThemeVars } from '@kbn/ui-theme'; import { css } from '@emotion/react'; import { AnonymizedData } from '@kbn/elastic-assistant-common/impl/data_anonymization/types'; -import styled from '@emotion/styled'; import { SelectedPromptContext } from '../assistant/prompt_context/types'; -const Strong = styled.strong<{ showRealValues: boolean }>` - color: ${(props) => - props.showRealValues ? euiThemeVars.euiColorSuccess : euiThemeVars.euiColorAccent}; - cursor: pointer; -`; +const Strong = ({ + children, + showRealValues, + onClick, +}: PropsWithChildren<{ showRealValues: boolean; onClick: () => void }>) => { + const { euiTheme } = useEuiTheme(); + + return ( + // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions, jsx-a11y/click-events-have-key-events + + {children} + + ); +}; export interface Props { selectedPromptContext: SelectedPromptContext; diff --git a/x-pack/packages/kbn-elastic-assistant/impl/data_anonymization_editor/stats/allowed_stat/index.tsx b/x-pack/packages/kbn-elastic-assistant/impl/data_anonymization_editor/stats/allowed_stat/index.tsx index 9d893cdaa65a2..9ebf4f98f45a5 100644 --- a/x-pack/packages/kbn-elastic-assistant/impl/data_anonymization_editor/stats/allowed_stat/index.tsx +++ b/x-pack/packages/kbn-elastic-assistant/impl/data_anonymization_editor/stats/allowed_stat/index.tsx @@ -5,10 +5,9 @@ * 2.0. */ -import { EuiStat, EuiToolTip } from '@elastic/eui'; +import { EuiStat, EuiToolTip, useEuiTheme } from '@elastic/eui'; import React, { useMemo } from 'react'; -import { euiThemeVars } from '@kbn/ui-theme'; import { css } from '@emotion/react'; import { TITLE_SIZE } from '../constants'; import * as i18n from './translations'; @@ -26,8 +25,9 @@ const AllowedStatComponent: React.FC = ({ total, inline, titleSize = TITLE_SIZE, - gap = euiThemeVars.euiSizeXS, + gap, }) => { + const { euiTheme } = useEuiTheme(); const tooltipContent = useMemo(() => i18n.ALLOWED_TOOLTIP({ allowed, total }), [allowed, total]); return ( @@ -38,7 +38,7 @@ const AllowedStatComponent: React.FC = ({ ? css` display: flex; align-items: center; - gap: ${gap}; + gap: ${gap || euiTheme.size.xs}; ` : null } diff --git a/x-pack/packages/kbn-elastic-assistant/impl/data_anonymization_editor/stats/anonymized_stat/index.tsx b/x-pack/packages/kbn-elastic-assistant/impl/data_anonymization_editor/stats/anonymized_stat/index.tsx index 74b3e631b7117..e07892d5fe14c 100644 --- a/x-pack/packages/kbn-elastic-assistant/impl/data_anonymization_editor/stats/anonymized_stat/index.tsx +++ b/x-pack/packages/kbn-elastic-assistant/impl/data_anonymization_editor/stats/anonymized_stat/index.tsx @@ -5,11 +5,10 @@ * 2.0. */ -import { EuiStat, EuiText, EuiToolTip } from '@elastic/eui'; +import { EuiStat, EuiText, EuiToolTip, useEuiTheme } from '@elastic/eui'; import React, { useMemo } from 'react'; import { css } from '@emotion/react'; -import { euiThemeVars } from '@kbn/ui-theme'; import { getColor, getTooltipContent } from './helpers'; import { TITLE_SIZE } from '../constants'; import * as i18n from './translations'; @@ -27,8 +26,9 @@ const AnonymizedStatComponent: React.FC = ({ isDataAnonymizable, inline, titleSize = TITLE_SIZE, - gap = euiThemeVars.euiSizeXS, + gap, }) => { + const { euiTheme } = useEuiTheme(); const color = useMemo(() => getColor(isDataAnonymizable), [isDataAnonymizable]); const tooltipContent = useMemo( @@ -53,7 +53,7 @@ const AnonymizedStatComponent: React.FC = ({ ? css` display: flex; align-items: center; - gap: ${gap}; + gap: ${gap || euiTheme.size.xs}; ` : null } diff --git a/x-pack/packages/kbn-elastic-assistant/impl/data_anonymization_editor/stats/available_stat/index.tsx b/x-pack/packages/kbn-elastic-assistant/impl/data_anonymization_editor/stats/available_stat/index.tsx index d29bfab02b897..0a0877895da57 100644 --- a/x-pack/packages/kbn-elastic-assistant/impl/data_anonymization_editor/stats/available_stat/index.tsx +++ b/x-pack/packages/kbn-elastic-assistant/impl/data_anonymization_editor/stats/available_stat/index.tsx @@ -5,11 +5,10 @@ * 2.0. */ -import { EuiStat, EuiToolTip } from '@elastic/eui'; +import { EuiStat, EuiToolTip, useEuiTheme } from '@elastic/eui'; import React, { useMemo } from 'react'; import { css } from '@emotion/react'; -import { euiThemeVars } from '@kbn/ui-theme'; import { TITLE_SIZE } from '../constants'; import * as i18n from './translations'; @@ -24,8 +23,9 @@ const AvailableStatComponent: React.FC = ({ total, inline, titleSize = TITLE_SIZE, - gap = euiThemeVars.euiSizeXS, + gap, }) => { + const { euiTheme } = useEuiTheme(); const tooltipContent = useMemo(() => i18n.AVAILABLE_TOOLTIP(total), [total]); return ( @@ -36,7 +36,7 @@ const AvailableStatComponent: React.FC = ({ ? css` display: flex; align-items: center; - gap: ${gap}; + gap: ${gap || euiTheme.size.xs}; ` : null } diff --git a/x-pack/packages/kbn-elastic-assistant/tsconfig.json b/x-pack/packages/kbn-elastic-assistant/tsconfig.json index 15009c7f702a5..b7370eb00efbd 100644 --- a/x-pack/packages/kbn-elastic-assistant/tsconfig.json +++ b/x-pack/packages/kbn-elastic-assistant/tsconfig.json @@ -6,7 +6,8 @@ "jest", "node", "react", - "@kbn/ambient-ui-types" + "@kbn/ambient-ui-types", + "@emotion/react/types/css-prop" ] }, "include": [ diff --git a/x-pack/plugins/security_solution/public/assistant/get_comments/stream/message_text.tsx b/x-pack/plugins/security_solution/public/assistant/get_comments/stream/message_text.tsx index ff526c33497c3..46defe4d515d2 100644 --- a/x-pack/plugins/security_solution/public/assistant/get_comments/stream/message_text.tsx +++ b/x-pack/plugins/security_solution/public/assistant/get_comments/stream/message_text.tsx @@ -15,12 +15,11 @@ import { getDefaultEuiMarkdownParsingPlugins, getDefaultEuiMarkdownProcessingPlugins, transparentize, + useEuiTheme, } from '@elastic/eui'; import { css } from '@emotion/css'; -import classNames from 'classnames'; import type { Code, InlineCode, Parent, Text } from 'mdast'; import React from 'react'; -import { euiThemeVars } from '@kbn/ui-theme'; import type { Node } from 'unist'; import { customCodeBlockLanguagePlugin } from '../custom_codeblock/custom_codeblock_markdown_plugin'; @@ -35,30 +34,37 @@ interface Props { const ANIMATION_TIME = 1; -const cursorCss = css` - @keyframes blink { - 0% { - opacity: 0; - } - 50% { - opacity: 1; - } - 100% { - opacity: 0; - } - } - - animation: blink ${ANIMATION_TIME}s infinite; - width: 10px; - height: 16px; - vertical-align: middle; - display: inline-block; - background: ${transparentize(euiThemeVars.euiColorDarkShade, 0.25)}; -`; - -const Cursor = () => ( - -); +const Cursor = () => { + const { euiTheme } = useEuiTheme(); + + return ( + + ); +}; // a weird combination of different whitespace chars to make sure it stays // invisible even when we cannot properly parse the text while still being From 99261a07cf2b90116c98520d80d84e1f6e469f85 Mon Sep 17 00:00:00 2001 From: Patryk Kopycinski Date: Mon, 9 Dec 2024 18:09:33 +0100 Subject: [PATCH 2/2] cleanup --- .../assistant/assistant_animated_icon.tsx | 193 ++++++++---------- .../assistant_overlay/flyout_navigation.tsx | 23 +-- .../prompt_editor/system_prompt/helpers.tsx | 19 +- .../context_preview.tsx | 33 +-- .../kbn-elastic-assistant/tsconfig.json | 1 + 5 files changed, 111 insertions(+), 158 deletions(-) diff --git a/x-pack/packages/kbn-elastic-assistant/impl/assistant/assistant_animated_icon.tsx b/x-pack/packages/kbn-elastic-assistant/impl/assistant/assistant_animated_icon.tsx index 7ac2929bbb676..46a28da4def99 100644 --- a/x-pack/packages/kbn-elastic-assistant/impl/assistant/assistant_animated_icon.tsx +++ b/x-pack/packages/kbn-elastic-assistant/impl/assistant/assistant_animated_icon.tsx @@ -5,119 +5,100 @@ * 2.0. */ -import React, { PropsWithChildren } from 'react'; +import React from 'react'; import styled from '@emotion/styled'; -import { css } from '@emotion/react'; -import { useEuiTheme } from '@elastic/eui'; import { AssistantAvatar } from './assistant_avatar/assistant_avatar'; -const Container = ({ children }: PropsWithChildren) => { - const { euiTheme } = useEuiTheme(); - return ( -
- {children} -
- ); -}; +const Container = styled.div` + display: inline-block; + position: relative; + width: 56px; + height: 56px; + display: flex; + justify-content: center; + align-items: center; + margin-top: ${(props) => props.theme.euiTheme.size.xxl}; + margin-bottom: ${(props) => props.theme.euiTheme.size.xxl}; -const Animation = () => { - const { euiTheme } = useEuiTheme(); + :before, + :after { + content: ''; + position: absolute; + } +`; - return ( -
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); - } - } - `} - /> - ); -}; + @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%; diff --git a/x-pack/packages/kbn-elastic-assistant/impl/assistant/assistant_overlay/flyout_navigation.tsx b/x-pack/packages/kbn-elastic-assistant/impl/assistant/assistant_overlay/flyout_navigation.tsx index dad8d8960df08..627def9d0996a 100644 --- a/x-pack/packages/kbn-elastic-assistant/impl/assistant/assistant_overlay/flyout_navigation.tsx +++ b/x-pack/packages/kbn-elastic-assistant/impl/assistant/assistant_overlay/flyout_navigation.tsx @@ -15,6 +15,7 @@ import { useEuiTheme, } from '@elastic/eui'; import { css } from '@emotion/react'; +import styled from '@emotion/styled'; import { i18n } from '@kbn/i18n'; import { NEW_CHAT } from '../conversations/conversation_sidepanel/translations'; @@ -27,21 +28,13 @@ export interface FlyoutNavigationProps { isAssistantEnabled: boolean; } -const VerticalSeparator = () => { - const { euiTheme } = useEuiTheme(); - - return ( -
- ); -}; +const VerticalSeparator = styled.div` + :before { + content: ''; + height: 100%; + border-left: 1px solid ${(props) => props.theme.euiTheme.colors.borderBasePlain}; + } +`; /** * Navigation menu on the right panel only, with expand/collapse button and option to diff --git a/x-pack/packages/kbn-elastic-assistant/impl/assistant/prompt_editor/system_prompt/helpers.tsx b/x-pack/packages/kbn-elastic-assistant/impl/assistant/prompt_editor/system_prompt/helpers.tsx index 5f6e47f9ffef1..60f745149a0e2 100644 --- a/x-pack/packages/kbn-elastic-assistant/impl/assistant/prompt_editor/system_prompt/helpers.tsx +++ b/x-pack/packages/kbn-elastic-assistant/impl/assistant/prompt_editor/system_prompt/helpers.tsx @@ -7,25 +7,16 @@ import { EuiText, EuiToolTip, useEuiTheme } from '@elastic/eui'; import type { EuiSuperSelectOption } from '@elastic/eui'; -import React, { PropsWithChildren } from 'react'; +import React from 'react'; +import styled from '@emotion/styled'; import { isEmpty } from 'lodash/fp'; import { PromptResponse } from '@kbn/elastic-assistant-common'; import { css } from '@emotion/react'; import { EMPTY_PROMPT } from './translations'; -const Strong = (props: PropsWithChildren) => { - const { euiTheme } = useEuiTheme(); - - return ( - - {props.children} - - ); -}; +const Strong = styled.strong` + margin-right: ${(props) => props.theme.euiTheme.size.s}; +`; interface GetOptionFromPromptProps extends PromptResponse { content: string; diff --git a/x-pack/packages/kbn-elastic-assistant/impl/data_anonymization_editor/context_preview.tsx b/x-pack/packages/kbn-elastic-assistant/impl/data_anonymization_editor/context_preview.tsx index 1c21724295644..f416d8a22c90f 100644 --- a/x-pack/packages/kbn-elastic-assistant/impl/data_anonymization_editor/context_preview.tsx +++ b/x-pack/packages/kbn-elastic-assistant/impl/data_anonymization_editor/context_preview.tsx @@ -5,36 +5,23 @@ * 2.0. */ -import React, { useMemo, PropsWithChildren } from 'react'; -import { EuiText, useEuiTheme } from '@elastic/eui'; +import React, { useMemo } from 'react'; +import { EuiText } from '@elastic/eui'; import { getAnonymizedValue } from '@kbn/elastic-assistant-common'; import { getAnonymizedData } from '@kbn/elastic-assistant-common/impl/data_anonymization/get_anonymized_data'; import { getAnonymizedValues } from '@kbn/elastic-assistant-common/impl/data_anonymization/get_anonymized_values'; import { css } from '@emotion/react'; import { AnonymizedData } from '@kbn/elastic-assistant-common/impl/data_anonymization/types'; +import styled from '@emotion/styled'; import { SelectedPromptContext } from '../assistant/prompt_context/types'; -const Strong = ({ - children, - showRealValues, - onClick, -}: PropsWithChildren<{ showRealValues: boolean; onClick: () => void }>) => { - const { euiTheme } = useEuiTheme(); - - return ( - // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions, jsx-a11y/click-events-have-key-events - - {children} - - ); -}; - +const Strong = styled.strong<{ showRealValues: boolean }>` + color: ${(props) => + props.showRealValues + ? props.theme.euiTheme.colors.success + : props.theme.euiTheme.colors.accent}; + cursor: pointer; +`; export interface Props { selectedPromptContext: SelectedPromptContext; showRealValues: boolean; diff --git a/x-pack/packages/kbn-elastic-assistant/tsconfig.json b/x-pack/packages/kbn-elastic-assistant/tsconfig.json index b7370eb00efbd..a66ff0a5d5418 100644 --- a/x-pack/packages/kbn-elastic-assistant/tsconfig.json +++ b/x-pack/packages/kbn-elastic-assistant/tsconfig.json @@ -13,6 +13,7 @@ "include": [ "**/*.ts", "**/*.tsx", + "../../../typings/emotion.d.ts" ], "exclude": [ "target/**/*"