[8.15] Fix dark theme playground (#190492) (#191902)

# Backport

This will backport the following commits from `main` to `8.15`:
- [Fix dark theme playground
(#190492)](#190492)

<!--- Backport version: 8.9.8 -->

### Questions ?
Please refer to the [Backport tool
documentation](https://github.com/sqren/backport)

<!--BACKPORT [{"author":{"name":"Yan
Savitski","email":"[email protected]"},"sourceCommit":{"committedDate":"2024-08-29T12:47:32Z","message":"Fix
dark theme playground (#190492)\n\n- Fix header and message on DARK
Mode\r\n- Update python code example\r\n<img width=\"1404\"
alt=\"image\"\r\nsrc=\"https://github.com/user-attachments/assets/34ef7b19-acf9-4dfd-af31-e742fba6901f\">","sha":"4c77c7a57c2a4d7c604314afc31a9a5ff3062e9d","branchLabelMapping":{"^v8.16.0$":"main","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["release_note:skip","Team:EnterpriseSearch","v8.15.0","v8.16.0"],"number":190492,"url":"https://github.com/elastic/kibana/pull/190492","mergeCommit":{"message":"Fix
dark theme playground (#190492)\n\n- Fix header and message on DARK
Mode\r\n- Update python code example\r\n<img width=\"1404\"
alt=\"image\"\r\nsrc=\"https://github.com/user-attachments/assets/34ef7b19-acf9-4dfd-af31-e742fba6901f\">","sha":"4c77c7a57c2a4d7c604314afc31a9a5ff3062e9d"}},"sourceBranch":"main","suggestedTargetBranches":["8.15"],"targetPullRequestStates":[{"branch":"8.15","label":"v8.15.0","labelRegex":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"},{"branch":"main","label":"v8.16.0","labelRegex":"^v8.16.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/190492","number":190492,"mergeCommit":{"message":"Fix
dark theme playground (#190492)\n\n- Fix header and message on DARK
Mode\r\n- Update python code example\r\n<img width=\"1404\"
alt=\"image\"\r\nsrc=\"https://github.com/user-attachments/assets/34ef7b19-acf9-4dfd-af31-e742fba6901f\">","sha":"4c77c7a57c2a4d7c604314afc31a9a5ff3062e9d"}}]}]
BACKPORT-->

x-pack/plugins/search_playground/public/components/header.tsx

@@ -56,7 +56,7 @@ export const Header: React.FC<HeaderProps> = ({
     <EuiPageTemplate.Header
       css={{
         '.euiPageHeaderContent > .euiFlexGroup': { flexWrap: 'wrap' },
-        backgroundColor: euiTheme.colors.ghost,
+        backgroundColor: euiTheme.colors.emptyShade,
       }}
       paddingSize="s"
       data-test-subj="chat-playground-home-page"

x-pack/plugins/search_playground/public/components/message_list/assistant_message.tsx

@@ -49,6 +49,15 @@ export const AssistantMessage: React.FC<AssistantMessageProps> = ({ message }) =
   const username = i18n.translate('xpack.searchPlayground.chat.message.assistant.username', {
     defaultMessage: 'AI',
   });
+  const AIMessageWrapperCSS = css`
+    .euiAvatar {
+      background-color: ${euiTheme.colors.emptyShade};
+    },
+    .euiCommentEvent {
+      border: ${euiTheme.border.thin};
+      border-radius: ${euiTheme.border.radius.medium};
+    },
+`;
 
   return (
     <>
@@ -58,13 +67,7 @@ export const AssistantMessage: React.FC<AssistantMessageProps> = ({ message }) =
           timelineAvatar="dot"
           data-test-subj="retrieval-docs-comment"
           eventColor="subdued"
-          css={{
-            '.euiAvatar': { backgroundColor: euiTheme.colors.ghost },
-            '.euiCommentEvent': {
-              border: euiTheme.border.thin,
-              borderRadius: euiTheme.border.radius.medium,
-            },
-          }}
+          css={AIMessageWrapperCSS}
           event={
             <>
               <EuiText size="s">
@@ -107,13 +110,7 @@ export const AssistantMessage: React.FC<AssistantMessageProps> = ({ message }) =
           timelineAvatar="dot"
           data-test-subj="retrieval-docs-comment-no-docs"
           eventColor="subdued"
-          css={{
-            '.euiAvatar': { backgroundColor: euiTheme.colors.ghost },
-            '.euiCommentEvent': {
-              border: euiTheme.border.thin,
-              borderRadius: euiTheme.border.radius.medium,
-            },
-          }}
+          css={AIMessageWrapperCSS}
           event={
             <>
               <EuiText size="s">
@@ -163,9 +160,9 @@ export const AssistantMessage: React.FC<AssistantMessageProps> = ({ message }) =
           })
         }
         css={{
-          '.euiAvatar': { backgroundColor: euiTheme.colors.ghost },
+          '.euiAvatar': { backgroundColor: euiTheme.colors.emptyShade },
           '.euiCommentEvent__body': {
-            backgroundColor: euiTheme.colors.ghost,
+            backgroundColor: euiTheme.colors.emptyShade,
           },
         }}
         eventColor="subdued"

x-pack/plugins/search_playground/public/components/message_list/system_message.tsx

@@ -32,7 +32,7 @@ export const SystemMessage: React.FC<SystemMessageProps> = ({ content }) => {
       timelineAvatar="dot"
       eventColor="subdued"
       css={{
-        '.euiAvatar': { backgroundColor: euiTheme.colors.ghost },
+        '.euiAvatar': { backgroundColor: euiTheme.colors.emptyShade },
         '.euiCommentEvent': {
           border: euiTheme.border.thin,
           borderRadius: euiTheme.border.radius.medium,

x-pack/plugins/search_playground/public/components/message_list/user_message.tsx

@@ -34,7 +34,7 @@ export const UserMessage: React.FC<UserMessageProps> = ({ content, createdAt })
       eventColor="subdued"
       css={{
         '.euiCommentEvent__body': {
-          backgroundColor: euiTheme.colors.ghost,
+          backgroundColor: euiTheme.colors.emptyShade,
         },
       }}
       username={i18n.translate('xpack.searchPlayground.chat.message.user.name', {

x-pack/plugins/search_playground/public/components/view_code/examples/py_lang_client.tsx

@@ -28,7 +28,7 @@ openai_client = OpenAI(
 
 index_source_fields = ${JSON.stringify(formValues.source_fields, null, 4)}
 
-def get_elasticsearch_results(query):
+def get_elasticsearch_results():
     es_query = ${getESQuery({
       ...formValues.elasticsearch_query,
       size: formValues.doc_size,
@@ -71,7 +71,7 @@ def generate_openai_completion(user_prompt, question):
 
 if __name__ == "__main__":
     question = "my question"
-    elasticsearch_results = get_elasticsearch_results(question)
+    elasticsearch_results = get_elasticsearch_results()
     context_prompt = create_openai_prompt(elasticsearch_results)
     openai_completion = generate_openai_completion(context_prompt, question)
     print(openai_completion)