github-mirrors/kibana
1
0
Fork 0
mirror of https://github.com/elastic/kibana.git synced 2025-04-24 17:59:23 -04:00
Code Issues Projects Releases Packages Wiki Activity

Fix dark theme playground (#190492)

Browse source 
- 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">
This commit is contained in:
Yan Savitski 2024-08-29 14:47:32 +02:00 • committed by GitHub
parent be8de5370c
commit 4c77c7a57c
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
6 changed files with 21 additions and 30 deletions
Download patch file Download diff file Expand all files Collapse all files

2
x-pack/plugins/search_playground/public/components/header.tsx
View file

@ -64,7 +64,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"

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

@ -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 (
<>
@ -59,13 +68,7 @@ export const AssistantMessage: React.FC<AssistantMessageProps> = ({ message }) =
timelineAvatar="dot"
data-test-subj="assistant-message-searching"
eventColor="subdued"
css={{
'.euiAvatar': { backgroundColor: euiTheme.colors.ghost },
'.euiCommentEvent': {
border: euiTheme.border.thin,
borderRadius: euiTheme.border.radius.medium,
},
}}
css={AIMessageWrapperCSS}
event={
<EuiText size="s">
<p>
@ -83,13 +86,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">
@ -133,13 +130,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">
@ -189,9 +180,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"

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

@ -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,

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

@ -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', {

4
x-pack/plugins/search_playground/public/components/view_code/examples/__snapshots__/py_lang_client.test.tsx.snap generated
View file

@ -28,7 +28,7 @@ index_source_fields = {
]
}
def get_elasticsearch_results(query):
def get_elasticsearch_results():
es_query = {
\\"query\\": {},
\\"size\\": 10
@ -82,7 +82,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)

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

@ -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)