[Observability AI Assistant] Fix dark mode (#179716)

x-pack/plugins/lens/public/app_plugin/shared/edit_on_the_fly/get_edit_lens_configuration.tsx

@@ -6,7 +6,7 @@
  */
 
 import React, { useCallback, useState } from 'react';
-import { EuiFlyout, EuiLoadingSpinner, EuiOverlayMask } from '@elastic/eui';
+import { EuiFlyout, EuiLoadingSpinner, EuiOverlayMask, EuiThemeProvider } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { I18nProvider } from '@kbn/i18n-react';
 import { Provider } from 'react-redux';
@@ -99,6 +99,7 @@ export async function getEditLensConfiguration(
     startDependencies,
     getLensAttributeService(coreStart, startDependencies)
   );
+  const theme = coreStart.theme.getTheme();
 
   return ({
     attributes,
@@ -223,13 +224,15 @@ export async function getEditLensConfiguration(
 
     return getWrapper(
       <Provider store={lensStore}>
-        <I18nProvider>
-          <KibanaContextProvider services={lensServices}>
-            <RootDragDropProvider>
-              <LensEditConfigurationFlyout {...configPanelProps} />
-            </RootDragDropProvider>
-          </KibanaContextProvider>
-        </I18nProvider>
+        <EuiThemeProvider colorMode={theme.darkMode ? 'dark' : 'light'}>
+          <I18nProvider>
+            <KibanaContextProvider services={lensServices}>
+              <RootDragDropProvider>
+                <LensEditConfigurationFlyout {...configPanelProps} />
+              </RootDragDropProvider>
+            </KibanaContextProvider>
+          </I18nProvider>
+        </EuiThemeProvider>
       </Provider>
     );
   };

x-pack/plugins/lens/public/trigger_actions/open_lens_config/edit_action_helpers.ts

@@ -45,6 +45,7 @@ export async function executeEditAction({
   const rootEmbeddable = embeddable.getRoot();
   const overlayTracker = tracksOverlays(rootEmbeddable) ? rootEmbeddable : undefined;
   const ConfigPanel = await embeddable.openConfingPanel(startDependencies, isNewPanel, deletePanel);
+
   if (ConfigPanel) {
     const handle = overlays.openFlyout(
       toMountPoint(

x-pack/plugins/observability_solution/observability_ai_assistant_app/public/components/buttons/new_chat_button.tsx

@@ -4,7 +4,7 @@
  * 2.0; you may not use this file except in compliance with the Elastic License
  * 2.0.
  */
-import React, { SVGProps } from 'react';
+import React from 'react';
 import { EuiButton, EuiButtonIcon } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 
@@ -13,8 +13,11 @@ export function NewChatButton(
 ) {
   const { collapsed, ...nextProps } = props;
   return !props.collapsed ? (
-    <EuiButton data-test-subj="observabilityAiAssistantNewChatButton" fill {...nextProps}>
-      <EuiIconNewChat style={{ fill: 'white' }} />
+    <EuiButton
+      data-test-subj="observabilityAiAssistantNewChatButton"
+      iconType="newChat"
+      {...nextProps}
+    >
       {i18n.translate('xpack.observabilityAiAssistant.newChatButton', {
         defaultMessage: 'New chat',
       })}
@@ -22,23 +25,9 @@ export function NewChatButton(
   ) : (
     <EuiButtonIcon
       data-test-subj="observabilityAiAssistantNewChatButtonButton"
-      iconType={EuiIconNewChat}
+      iconType="newChat"
       size="xs"
       {...nextProps}
     />
   );
 }
-
-// To-do: replace with Eui icon once https://github.com/elastic/eui/pull/7524 is merged.
-export function EuiIconNewChat({ ...props }: SVGProps<SVGSVGElement>) {
-  return (
-    <svg xmlns="http://www.w3.org/2000/svg" width={16} height={16} viewBox="0 0 16 16" {...props}>
-      <path d="M8 4a.5.5 0 0 1 .5.5V6H10a.5.5 0 0 1 0 1H8.5v1.5a.5.5 0 0 1-1 0V7H6a.5.5 0 0 1 0-1h1.5V4.5A.5.5 0 0 1 8 4Z" />
-      <path
-        fillRule="evenodd"
-        d="M1 4a2.5 2.5 0 0 1 2.5-2.5h9A2.5 2.5 0 0 1 15 4v5a2.5 2.5 0 0 1-2.5 2.5H7.707L4.5 14.707V11.5h-1A2.5 2.5 0 0 1 1 9V4Zm2.5-1.5A1.5 1.5 0 0 0 2 4v5a1.5 1.5 0 0 0 1.5 1.5h2v1.793L7.293 10.5H12.5A1.5 1.5 0 0 0 14 9V4a1.5 1.5 0 0 0-1.5-1.5h-9Z"
-        clipRule="evenodd"
-      />
-    </svg>
-  );
-}

x-pack/plugins/observability_solution/observability_ai_assistant_app/public/components/chat/chat_body.tsx

@@ -90,6 +90,11 @@ const animClassName = css`
     ${euiThemeVars.euiAnimSlightBounce} ${euiThemeVars.euiAnimSpeedNormal} forwards;
 `;
 
+const containerClassName = css`
+  min-width: 0;
+  max-height: 100%;
+`;
+
 const PADDING_AND_BORDER = 32;
 
 export function ChatBody({
@@ -154,12 +159,6 @@ export function ChatBody({
     }
   }
 
-  const containerClassName = css`
-    background: white;
-    min-width: 0;
-    max-height: 100%;
-  `;
-
   const headerContainerClassName = css`
     padding-right: ${showLinkToConversationsApp ? '32px' : '0'};
   `;