Merge branch 'obs-ai-assistant-2' of github.com:dgieselaar/kibana int…

…o obs-ai-assistant-2
CoenWarmer · Aug 10, 2023 · 798a2b7 · 798a2b7
2 parents 668b2ba + 90dc879
commit 798a2b7
Show file tree

Hide file tree

Showing 7 changed files with 336 additions and 282 deletions.
diff --git a/x-pack/plugins/observability_ai_assistant/common/types.ts b/x-pack/plugins/observability_ai_assistant/common/types.ts
@@ -28,7 +28,7 @@ export interface Message {
  function_call?: {
  name: string;
  arguments?: string;
- trigger: MessageRole.Assistant | MessageRole.User | MessageRole.Elastic;
+ trigger: MessageRole;
  };
  data?: string;
  };

diff --git a/x-pack/plugins/observability_ai_assistant/public/components/chat/chat_item.tsx b/x-pack/plugins/observability_ai_assistant/public/components/chat/chat_item.tsx
@@ -32,6 +32,10 @@ export interface ChatItemProps extends ChatTimelineItem {
 }
 
 const normalMessageClassName = css`
+ .euiCommentEvent__header {
+ padding: 4px 8px;
+ }
+
  .euiCommentEvent__body {
  padding: 0;
  }
@@ -42,17 +46,17 @@ const normalMessageClassName = css`
 `;
 
 const noPanelMessageClassName = css`
+ .euiCommentEvent {
+ border: none;
+ }
+
  .euiCommentEvent__header {
  background: transparent;
  border-block-end: none;
  }
 
  .euiCommentEvent__body {
- padding: 0;
- }
-
- .euiCommentEvent {
- border: none;
+ display: none;
  }
 `;
 
@@ -89,6 +93,10 @@ export function ChatItem({
  const actions = [canCopy, collapsed, canCopy].filter(Boolean);
 
  const noBodyMessageClassName = css`
+ .euiCommentEvent__header {
+ padding: 4px 8px;
+ }
+
  .euiCommentEvent__body {
  padding: 0;
  height: ${expanded ? 'fit-content' : '0px'};
@@ -105,8 +113,8 @@ export function ChatItem({
  };
 
  const handleToggleEdit = () => {
- if (collapsed) {
- setExpanded(false);
+ if (collapsed && !expanded) {
+ setExpanded(true);
  }
  setEditing(!editing);
  };
@@ -155,9 +163,10 @@ export function ChatItem({
  actions={
  <ChatItemActions
  canCopy={canCopy}
- collapsed={collapsed}
  canEdit={canEdit}
- isCollapsed={expanded}
+ collapsed={collapsed}
+ editing={editing}
+ expanded={expanded}
  onCopyToClipboard={handleCopyToClipboard}
  onToggleEdit={handleToggleEdit}
  onToggleExpand={handleToggleExpand}

diff --git a/x-pack/plugins/observability_ai_assistant/public/components/chat/chat_item_actions.tsx b/x-pack/plugins/observability_ai_assistant/public/components/chat/chat_item_actions.tsx
@@ -9,26 +9,21 @@ import React, { useEffect, useState } from 'react';
 import { i18n } from '@kbn/i18n';
 import { EuiButtonIcon, EuiPopover, EuiText } from '@elastic/eui';
 
-export interface ChatItemAction {
- id: string;
- label: string;
- icon: string;
- handler: () => void;
-}
-
 export function ChatItemActions({
+ canCopy,
  canEdit,
  collapsed,
- canCopy,
- isCollapsed,
+ editing,
+ expanded,
  onToggleEdit,
  onToggleExpand,
  onCopyToClipboard,
 }: {
+ canCopy: boolean;
  canEdit: boolean;
  collapsed: boolean;
- canCopy: boolean;
- isCollapsed: boolean;
+ editing: boolean;
+ expanded: boolean;
  onToggleEdit: () => void;
  onToggleExpand: () => void;
  onCopyToClipboard: () => void;
@@ -47,85 +42,73 @@ export function ChatItemActions({
  };
  }, [isPopoverOpen]);
 
- const actions: ChatItemAction[] = [
- ...(canEdit
- ? [
- {
- id: 'edit',
- icon: 'documentEdit',
- label: '',
- handler: () => {
- onToggleEdit();
- },
- },
- ]
- : []),
- ...(collapsed
- ? [
- {
- id: 'expand',
- icon: isCollapsed ? 'eyeClosed' : 'eye',
- label: '',
- handler: () => {
- onToggleExpand();
- },
- },
- ]
- : []),
- ...(canCopy
- ? [
- {
- id: 'copy',
- icon: 'copyClipboard',
- label: i18n.translate(
- 'xpack.observabilityAiAssistant.chatTimeline.actions.copyMessage',
- {
- defaultMessage: 'Copied message',
- }
- ),
- handler: () => {
- onCopyToClipboard();
- },
- },
- ]
- : []),
- ];
  return (
  <>
- {actions.map(({ id, icon, label, handler }) =>
- label ? (
- <EuiPopover
- key={id}
- button={
- <EuiButtonIcon
- aria-label={label}
- key={id}
- iconType={icon}
- onClick={() => {
- setIsPopoverOpen(id);
- handler();
- }}
- color="text"
- />
+ {canEdit ? (
+ <EuiButtonIcon
+ aria-label={i18n.translate(
+ 'xpack.observabilityAiAssistant.chatTimeline.actions.editPrompt',
+ {
+ defaultMessage: 'Edit prompt',
+ }
+ )}
+ color="text"
+ display={editing ? 'fill' : 'empty'}
+ iconType="documentEdit"
+ onClick={onToggleEdit}
+ />
+ ) : null}
+
+ {collapsed ? (
+ <EuiButtonIcon
+ aria-label={i18n.translate(
+ 'xpack.observabilityAiAssistant.chatTimeline.actions.inspectPrompt',
+ {
+ defaultMessage: 'Inspect prompt',
  }
- isOpen={isPopoverOpen === id}
- closePopover={() => setIsPopoverOpen(undefined)}
- panelPaddingSize="s"
- >
- <EuiText size="s">
- <p>{label}</p>
- </EuiText>
- </EuiPopover>
- ) : (
- <EuiButtonIcon
- aria-label={label}
- key={id}
- iconType={icon}
- onClick={handler}
- color="text"
- />
- )
- )}
+ )}
+ color="text"
+ display={expanded ? 'fill' : 'empty'}
+ iconType={expanded ? 'eyeClosed' : 'eye'}
+ onClick={onToggleExpand}
+ />
+ ) : null}
+
+ {canCopy ? (
+ <EuiPopover
+ button={
+ <EuiButtonIcon
+ aria-label={i18n.translate(
+ 'xpack.observabilityAiAssistant.chatTimeline.actions.copyMessage',
+ {
+ defaultMessage: 'Copy message',
+ }
+ )}
+ color="text"
+ iconType="copyClipboard"
+ display={isPopoverOpen === 'copy' ? 'fill' : 'empty'}
+ onClick={() => {
+ setIsPopoverOpen('copy');
+ onCopyToClipboard();
+ }}
+ />
+ }
+ isOpen={isPopoverOpen === 'copy'}
+ panelPaddingSize="s"
+ closePopover={() => setIsPopoverOpen(undefined)}
+ >
+ <EuiText size="s">
+ <p>
+ {i18n.translate(
+ 'xpack.observabilityAiAssistant.chatTimeline.actions.copyMessageSuccessful',
+ {
+ defaultMessage: 'Copied message',
+ }
+ )}
+ </p>
+ </EuiText>
+ </EuiPopover>
+ ) : null}
  </>
  );
 }