Merge pull request elastic#21 from CoenWarmer/storybook

CoenWarmer · Aug 3, 2023 · ff5ffc2 · ff5ffc2
2 parents 0496387 + 41b0df5
commit ff5ffc2
Show file tree

Hide file tree

Showing 5 changed files with 42 additions and 17 deletions.
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
@@ -114,17 +114,19 @@ export function ChatBody({
   return (
     <EuiFlexGroup direction="column" gutterSize="none" className={containerClassName}>
       <EuiFlexItem grow={false}>
-        <EuiPanel
-          hasShadow={false}
-          hasBorder={false}
-          borderRadius="none"
-          css={{ borderBottom: `solid 1px ${euiTheme.border.color}` }}
-        >
-          <HideExpandConversationListButton
-            isExpanded={Boolean(isConversationListExpanded)}
-            onClick={onToggleExpandConversationList}
-          />
-        </EuiPanel>
+        {onToggleExpandConversationList ? (
+          <EuiPanel
+            hasShadow={false}
+            hasBorder={false}
+            borderRadius="none"
+            css={{ borderBottom: `solid 1px ${euiTheme.border.color}` }}
+          >
+            <HideExpandConversationListButton
+              isExpanded={Boolean(isConversationListExpanded)}
+              onClick={onToggleExpandConversationList}
+            />
+          </EuiPanel>
+        ) : null}
       </EuiFlexItem>
       <EuiFlexItem grow={false}>
         <EuiPanel hasBorder={false} hasShadow={false} paddingSize="m">

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
@@ -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
@@ -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
@@ -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/...k/plugins/observability_ai_assistant/public/utils/get_timeline_items_from_conversation.ts b/...k/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,
       };