diff --git a/x-pack/plugins/observability_ai_assistant/public/components/chat/chat_body.tsx b/x-pack/plugins/observability_ai_assistant/public/components/chat/chat_body.tsx index a97b0987ba3935..3a6b16b5ebc82d 100644 --- a/x-pack/plugins/observability_ai_assistant/public/components/chat/chat_body.tsx +++ b/x-pack/plugins/observability_ai_assistant/public/components/chat/chat_body.tsx @@ -114,17 +114,19 @@ export function ChatBody({ return ( - - - + {onToggleExpandConversationList ? ( + + + + ) : null} diff --git a/x-pack/plugins/observability_ai_assistant/public/components/chat/chat_prompt_editor.tsx b/x-pack/plugins/observability_ai_assistant/public/components/chat/chat_prompt_editor.tsx index f59f4f7fa56e78..a49da7665c9a28 100644 --- a/x-pack/plugins/observability_ai_assistant/public/components/chat/chat_prompt_editor.tsx +++ b/x-pack/plugins/observability_ai_assistant/public/components/chat/chat_prompt_editor.tsx @@ -206,7 +206,9 @@ export function ChatPromptEditor({ onSubmit, disabled, loading }: ChatPromptEdit aria-label="Submit" isLoading={loading} disabled={selectedFunction ? false : !prompt || loading || disabled} - display={prompt ? 'fill' : 'base'} + display={ + selectedFunction ? (functionPayload ? 'fill' : 'base') : prompt ? 'fill' : 'base' + } iconType="kqlFunction" size="m" onClick={handleSubmit} diff --git a/x-pack/plugins/observability_ai_assistant/public/components/message_panel/message_text.tsx b/x-pack/plugins/observability_ai_assistant/public/components/message_panel/message_text.tsx index 76be222d6fed29..f3f2ecca681948 100644 --- a/x-pack/plugins/observability_ai_assistant/public/components/message_panel/message_text.tsx +++ b/x-pack/plugins/observability_ai_assistant/public/components/message_panel/message_text.tsx @@ -11,6 +11,7 @@ import { css } from '@emotion/css'; import type { Parent, Text, InlineCode, Code } from 'mdast'; import ReactMarkdown from 'react-markdown'; import { EuiText } from '@elastic/eui'; +import { euiThemeVars } from '@kbn/ui-theme'; interface Props { content: string; @@ -19,6 +20,15 @@ interface Props { const containerClassName = css` overflow-wrap: break-word; + + code { + display: block; + background: ${euiThemeVars.euiColorLightestShade}; + white-space: pre; + margin-top: 8px; + margin-bottom: 8px; + padding: 8px; + } `; const cursorCss = css` diff --git a/x-pack/plugins/observability_ai_assistant/public/hooks/use_timeline.ts b/x-pack/plugins/observability_ai_assistant/public/hooks/use_timeline.ts index 25e6b624fbd88e..4fc2cb8093289a 100644 --- a/x-pack/plugins/observability_ai_assistant/public/hooks/use_timeline.ts +++ b/x-pack/plugins/observability_ai_assistant/public/hooks/use_timeline.ts @@ -130,9 +130,12 @@ export function useTimeline({ nextMessages.concat({ '@timestamp': new Date().toISOString(), message: { - role: MessageRole.User, + role: MessageRole.System, name, - content: JSON.stringify(message.content), + content: `The following data was returned by the function: + \`\`\` + ${JSON.stringify(message.content, null, 4)} + \`\`\``, data: JSON.stringify(message.data), }, }) diff --git a/x-pack/plugins/observability_ai_assistant/public/utils/get_timeline_items_from_conversation.ts b/x-pack/plugins/observability_ai_assistant/public/utils/get_timeline_items_from_conversation.ts index a32117690eff7d..276a7f23dadeee 100644 --- a/x-pack/plugins/observability_ai_assistant/public/utils/get_timeline_items_from_conversation.ts +++ b/x-pack/plugins/observability_ai_assistant/public/utils/get_timeline_items_from_conversation.ts @@ -39,12 +39,12 @@ export function getTimelineItemsfromConversation({ let title: string; if (hasFunction) { - title = i18n.translate('xpkac.observabilityAiAssistant.suggestedFunctionEvent', { + title = i18n.translate('xpack.observabilityAiAssistant.suggestedFunctionEvent', { defaultMessage: 'suggested a function', }); } else if (isSystemPrompt) { title = i18n.translate('xpack.observabilityAiAssistant.addedSystemPromptEvent', { - defaultMessage: 'added a prompt', + defaultMessage: 'returned data', }); } else { title = ''; @@ -58,7 +58,15 @@ export function getTimelineItemsfromConversation({ canGiveFeedback: message.message.role === MessageRole.Assistant, loading: false, title, - content: message.message.content, + content: hasFunction + ? `I have requested your system performs the function _${ + message.message.function_call?.name + }_ with the payload + \`\`\` + ${JSON.stringify(JSON.parse(message.message.function_call?.arguments || ''), null, 4)} + \`\`\` + and return its results for me to look at.` + : message.message.content, currentUser, };