diff --git a/x-pack/packages/kbn-ai-assistant/src/chat/chat_body.tsx b/x-pack/packages/kbn-ai-assistant/src/chat/chat_body.tsx index 12cb747d148c4..b8ea673483372 100644 --- a/x-pack/packages/kbn-ai-assistant/src/chat/chat_body.tsx +++ b/x-pack/packages/kbn-ai-assistant/src/chat/chat_body.tsx @@ -7,6 +7,7 @@ import { EuiCallOut, + euiCanAnimate, EuiFlexGroup, EuiFlexItem, EuiHorizontalRule, @@ -14,6 +15,7 @@ import { euiScrollBarStyles, EuiSpacer, useEuiTheme, + UseEuiTheme, } from '@elastic/eui'; import { css, keyframes } from '@emotion/css'; import { i18n } from '@kbn/i18n'; @@ -28,7 +30,6 @@ import { type Feedback, } from '@kbn/observability-ai-assistant-plugin/public'; import type { AuthenticatedUser } from '@kbn/security-plugin/common'; -import { euiThemeVars } from '@kbn/ui-theme'; import { findLastIndex } from 'lodash'; import React, { useCallback, useEffect, useRef, useState } from 'react'; import type { UseKnowledgeBaseResult } from '../hooks/use_knowledge_base'; @@ -56,14 +57,16 @@ const timelineClassName = (scrollBarStyles: string) => css` ${scrollBarStyles} `; -const promptEditorClassname = css` +const promptEditorClassname = (euiTheme: UseEuiTheme['euiTheme']) => css` overflow: hidden; - transition: height ${euiThemeVars.euiAnimSpeedFast} ${euiThemeVars.euiAnimSlightResistance}; + ${euiCanAnimate} { + transition: height ${euiTheme.animation.fast} ${euiTheme.animation.resistance}; + } `; -const incorrectLicenseContainer = css` +const incorrectLicenseContainer = (euiTheme: UseEuiTheme['euiTheme']) => css` height: 100%; - padding: ${euiThemeVars.euiPanelPaddingModifiers.paddingMedium}; + padding: ${euiTheme.size.base}; `; const chatBodyContainerClassNameWithError = css` @@ -86,11 +89,13 @@ const fadeInAnimation = keyframes` } `; -const animClassName = css` +const animClassName = (euiTheme: UseEuiTheme['euiTheme']) => css` height: 100%; opacity: 0; - animation: ${fadeInAnimation} ${euiThemeVars.euiAnimSpeedNormal} - ${euiThemeVars.euiAnimSlightBounce} ${euiThemeVars.euiAnimSpeedNormal} forwards; + ${euiCanAnimate} { + animation: ${fadeInAnimation} ${euiTheme.animation.normal} ${euiTheme.animation.bounce} + ${euiTheme.animation.normal} forwards; + } `; const containerClassName = css` @@ -127,8 +132,9 @@ export function ChatBody({ }) { const license = useLicense(); const hasCorrectLicense = license?.hasAtLeast('enterprise'); - const euiTheme = useEuiTheme(); - const scrollBarStyles = euiScrollBarStyles(euiTheme); + const theme = useEuiTheme(); + const scrollBarStyles = euiScrollBarStyles(theme); + const { euiTheme } = theme; const chatService = useAIAssistantChatService(); @@ -310,7 +316,7 @@ export function ChatBody({ if (!hasCorrectLicense && !initialConversationId) { footer = ( <> - + @@ -347,7 +353,7 @@ export function ChatBody({ hasBorder={false} hasShadow={false} paddingSize="m" - className={animClassName} + className={animClassName(euiTheme)} > {connectors.connectors?.length === 0 || messages.length === 1 ? ( diff --git a/x-pack/packages/kbn-ai-assistant/src/chat/chat_header.tsx b/x-pack/packages/kbn-ai-assistant/src/chat/chat_header.tsx index e55daf640082e..c4b4fcba0329f 100644 --- a/x-pack/packages/kbn-ai-assistant/src/chat/chat_header.tsx +++ b/x-pack/packages/kbn-ai-assistant/src/chat/chat_header.tsx @@ -104,7 +104,9 @@ export function ChatHeader({ size={breakpoint === 'xs' ? 'xs' : 's'} value={newTitle} className={css` - color: ${!!title ? theme.euiTheme.colors.text : theme.euiTheme.colors.subduedText}; + color: ${!!title + ? theme.euiTheme.colors.textParagraph + : theme.euiTheme.colors.textSubdued}; `} inputAriaLabel={i18n.translate('xpack.aiAssistant.chatHeader.editConversationInput', { defaultMessage: 'Edit conversation', diff --git a/x-pack/packages/kbn-ai-assistant/src/chat/chat_item_title.tsx b/x-pack/packages/kbn-ai-assistant/src/chat/chat_item_title.tsx index d6a26b0287e46..e38db02730867 100644 --- a/x-pack/packages/kbn-ai-assistant/src/chat/chat_item_title.tsx +++ b/x-pack/packages/kbn-ai-assistant/src/chat/chat_item_title.tsx @@ -5,9 +5,9 @@ * 2.0. */ -import { euiThemeVars } from '@kbn/ui-theme'; import React, { ReactNode } from 'react'; import { css } from '@emotion/react'; +import { useEuiTheme } from '@elastic/eui'; interface ChatItemTitleProps { actionsTrigger?: ReactNode; @@ -15,11 +15,14 @@ interface ChatItemTitleProps { } export function ChatItemTitle({ actionsTrigger, title }: ChatItemTitleProps) { + const { euiTheme } = useEuiTheme(); + const containerCSS = css` position: absolute; top: 2; - right: ${euiThemeVars.euiSizeS}; + right: ${euiTheme.size.s}; `; + return ( <> {title} diff --git a/x-pack/packages/kbn-ai-assistant/src/chat/incorrect_license_panel.tsx b/x-pack/packages/kbn-ai-assistant/src/chat/incorrect_license_panel.tsx index c7d9c649f49c2..136f8d5918fb7 100644 --- a/x-pack/packages/kbn-ai-assistant/src/chat/incorrect_license_panel.tsx +++ b/x-pack/packages/kbn-ai-assistant/src/chat/incorrect_license_panel.tsx @@ -15,21 +15,22 @@ import { EuiPanel, EuiText, EuiTitle, + useEuiTheme, } from '@elastic/eui'; import { css } from '@emotion/css'; import { i18n } from '@kbn/i18n'; -import { euiThemeVars } from '@kbn/ui-theme'; import { elasticAiAssistantImage } from '@kbn/observability-ai-assistant-plugin/public'; import { UPGRADE_LICENSE_TITLE } from '../i18n'; import { useLicenseManagementLocator } from '../hooks/use_license_management_locator'; -const incorrectLicenseContainer = css` - height: 100%; - padding: ${euiThemeVars.euiPanelPaddingModifiers.paddingMedium}; -`; - export function IncorrectLicensePanel() { const handleNavigateToLicenseManagement = useLicenseManagementLocator(); + const { euiTheme } = useEuiTheme(); + + const incorrectLicenseContainer = css` + height: 100%; + padding: ${euiTheme.size.base}; + `; return ( diff --git a/x-pack/packages/kbn-ai-assistant/src/chat/welcome_message_connectors.tsx b/x-pack/packages/kbn-ai-assistant/src/chat/welcome_message_connectors.tsx index af358c49f2c51..376ea8ad58aed 100644 --- a/x-pack/packages/kbn-ai-assistant/src/chat/welcome_message_connectors.tsx +++ b/x-pack/packages/kbn-ai-assistant/src/chat/welcome_message_connectors.tsx @@ -15,9 +15,10 @@ import { EuiSpacer, EuiText, EuiIconTip, + useEuiTheme, + euiCanAnimate, } from '@elastic/eui'; import { i18n } from '@kbn/i18n'; -import { euiThemeVars } from '@kbn/ui-theme'; import { isHttpFetchError } from '@kbn/core-http-browser'; import type { UseGenAIConnectorsResult } from '../hooks/use_genai_connectors'; @@ -30,10 +31,6 @@ const fadeInAnimation = keyframes` } `; -const fadeInClassName = css` - animation: ${fadeInAnimation} ${euiThemeVars.euiAnimSpeedNormal} ease-in-out; -`; - export function WelcomeMessageConnectors({ connectors, onSetupConnectorClick, @@ -41,6 +38,14 @@ export function WelcomeMessageConnectors({ connectors: UseGenAIConnectorsResult; onSetupConnectorClick?: () => void; }) { + const { euiTheme } = useEuiTheme(); + + const fadeInClassName = css` + ${euiCanAnimate} { + animation: ${fadeInAnimation} ${euiTheme.animation.normal} ease-in-out; + } + `; + if (connectors.error) { const isForbiddenError = isHttpFetchError(connectors.error) && diff --git a/x-pack/packages/kbn-ai-assistant/src/conversation/conversation_view.tsx b/x-pack/packages/kbn-ai-assistant/src/conversation/conversation_view.tsx index fb74ff7647a21..4e705b183aeba 100644 --- a/x-pack/packages/kbn-ai-assistant/src/conversation/conversation_view.tsx +++ b/x-pack/packages/kbn-ai-assistant/src/conversation/conversation_view.tsx @@ -6,7 +6,6 @@ */ import { EuiFlexGroup, EuiFlexItem, EuiLoadingSpinner, EuiSpacer, useEuiTheme } from '@elastic/eui'; import { css } from '@emotion/css'; -import { euiThemeVars } from '@kbn/ui-theme'; import React, { useEffect, useState } from 'react'; import ReactDOM from 'react-dom'; import type { AssistantScope } from '@kbn/ai-assistant-common'; @@ -105,7 +104,7 @@ export const ConversationView: React.FC = ({ const conversationListContainerName = css` min-width: 250px; width: 250px; - border-right: solid 1px ${euiThemeVars.euiColorLightShade}; + border-right: solid 1px ${euiTheme.border.color}; `; const sidebarContainerClass = css` @@ -117,8 +116,8 @@ export const ConversationView: React.FC = ({ height: calc(100% - 56px); background-color: ${euiTheme.colors.lightestShade}; width: ${isSecondSlotVisible ? SECOND_SLOT_CONTAINER_WIDTH : 0}px; - border-top: solid 1px ${euiThemeVars.euiColorLightShade}; - border-left: solid 1px ${euiThemeVars.euiColorLightShade}; + border-top: solid 1px ${euiTheme.border.color}; + border-left: solid 1px ${euiTheme.border.color}; .euiFlyoutHeader { padding: ${euiTheme.size.m}; diff --git a/x-pack/packages/kbn-ai-assistant/tsconfig.json b/x-pack/packages/kbn-ai-assistant/tsconfig.json index 286bf8d5d1012..5ba1b161bccba 100644 --- a/x-pack/packages/kbn-ai-assistant/tsconfig.json +++ b/x-pack/packages/kbn-ai-assistant/tsconfig.json @@ -22,7 +22,6 @@ "@kbn/triggers-actions-ui-plugin", "@kbn/actions-plugin", "@kbn/i18n-react", - "@kbn/ui-theme", "@kbn/core", "@kbn/observability-ai-assistant-plugin", "@kbn/security-plugin", diff --git a/x-pack/plugins/observability_solution/observability_ai_assistant/public/components/assistant_avatar.tsx b/x-pack/plugins/observability_solution/observability_ai_assistant/public/components/assistant_avatar.tsx index c9b0b21e70bcd..1ad8cd4d476c3 100644 --- a/x-pack/plugins/observability_solution/observability_ai_assistant/public/components/assistant_avatar.tsx +++ b/x-pack/plugins/observability_solution/observability_ai_assistant/public/components/assistant_avatar.tsx @@ -4,6 +4,7 @@ * 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 { @@ -22,7 +23,9 @@ export const sizeMap = { }; export function AssistantAvatar({ size = 's', css, className }: AssistantAvatarProps) { + const { euiTheme } = useEuiTheme(); const sizePx = sizeMap[size]; + return ( diff --git a/x-pack/plugins/observability_solution/observability_ai_assistant/public/components/chat/chat_item_controls.tsx b/x-pack/plugins/observability_solution/observability_ai_assistant/public/components/chat/chat_item_controls.tsx index 2b8487fa45c9d..d2aa7a6379447 100644 --- a/x-pack/plugins/observability_solution/observability_ai_assistant/public/components/chat/chat_item_controls.tsx +++ b/x-pack/plugins/observability_solution/observability_ai_assistant/public/components/chat/chat_item_controls.tsx @@ -6,7 +6,7 @@ */ import React from 'react'; -import { EuiFlexGroup, EuiFlexItem, EuiHorizontalRule, EuiPanel, useEuiTheme } from '@elastic/eui'; +import { EuiFlexGroup, EuiFlexItem, EuiHorizontalRule, EuiPanel } from '@elastic/eui'; import { css } from '@emotion/css'; import { Feedback, FeedbackButtons } from '../buttons/feedback_buttons'; import { StopGeneratingButton } from '../buttons/stop_generating_button'; @@ -34,8 +34,6 @@ export function ChatItemControls({ onRegenerateClick: () => void; onStopGeneratingClick: () => void; }) { - const { euiTheme } = useEuiTheme(); - const displayFeedback = !error && canGiveFeedback; const displayRegenerate = !loading && canRegenerate; @@ -64,7 +62,7 @@ export function ChatItemControls({ return controls ? ( <> - + {controls} diff --git a/x-pack/plugins/observability_solution/observability_ai_assistant/public/components/insight/insight_base.tsx b/x-pack/plugins/observability_solution/observability_ai_assistant/public/components/insight/insight_base.tsx index 97f2e0a71a0c6..ed7f13b936507 100644 --- a/x-pack/plugins/observability_solution/observability_ai_assistant/public/components/insight/insight_base.tsx +++ b/x-pack/plugins/observability_solution/observability_ai_assistant/public/components/insight/insight_base.tsx @@ -82,7 +82,7 @@ export function InsightBase({ position="right" /> - + {description} diff --git a/x-pack/plugins/stack_connectors/public/connector_types/inference/additional_options_fields.tsx b/x-pack/plugins/stack_connectors/public/connector_types/inference/additional_options_fields.tsx index 7a3b1abfd800b..fad8ed2f65978 100644 --- a/x-pack/plugins/stack_connectors/public/connector_types/inference/additional_options_fields.tsx +++ b/x-pack/plugins/stack_connectors/public/connector_types/inference/additional_options_fields.tsx @@ -111,7 +111,7 @@ export const AdditionalOptionsConnectorFields: React.FC