Fix dark theme playground (elastic#190492)

- Fix header and message on DARK Mode - Update python code example <img width="1404" alt="image" src="https://github.com/user-attachments/assets/34ef7b19-acf9-4dfd-af31-e742fba6901f"> (cherry picked from commit 4c77c7a) # Conflicts: # x-pack/plugins/search_playground/public/components/message_list/assistant_message.tsx
yansavitski · Sep 2, 2024 · 6af9c90 · 6af9c90
1 parent 44f30cc
commit 6af9c90
Show file tree

Hide file tree

Showing 6 changed files with 20 additions and 23 deletions.
diff --git a/x-pack/plugins/search_playground/public/components/header.tsx b/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"

diff --git a/x-pack/plugins/search_playground/public/components/message_list/assistant_message.tsx b/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"

diff --git a/x-pack/plugins/search_playground/public/components/message_list/system_message.tsx b/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,

diff --git a/x-pack/plugins/search_playground/public/components/message_list/user_message.tsx b/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', {

diff --git a/...layground/public/components/view_code/examples/__snapshots__/py_lang_client.test.tsx.snap b/...layground/public/components/view_code/examples/__snapshots__/py_lang_client.test.tsx.snap
diff --git a/x-pack/plugins/search_playground/public/components/view_code/examples/py_lang_client.tsx b/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)