[Observability AI Assistant] Fix double plusses (#177314)

elastic · Feb 21, 2024 · f21bee4 · f21bee4
1 parent 418ff27
commit f21bee4
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 13 deletions.
diff --git a/x-pack/plugins/observability_ai_assistant/public/components/buttons/new_chat_button.tsx b/x-pack/plugins/observability_ai_assistant/public/components/buttons/new_chat_button.tsx
@@ -4,21 +4,40 @@
  * 2.0; you may not use this file except in compliance with the Elastic License
  * 2.0.
  */
-import React from 'react';
-import { EuiButton } from '@elastic/eui';
+import React, { SVGProps } from 'react';
+import { EuiButton, EuiButtonIcon } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 
-export function NewChatButton(props: React.ComponentProps<typeof EuiButton>) {
-  return (
-    <EuiButton
-      data-test-subj="observabilityAiAssistantNewChatButton"
-      fill
-      iconType="discuss"
-      {...props}
-    >
+export function NewChatButton(
+  props: React.ComponentProps<typeof EuiButton> & { collapsed?: boolean }
+) {
+  return !props.collapsed ? (
+    <EuiButton data-test-subj="observabilityAiAssistantNewChatButton" fill {...props}>
+      <EuiIconNewChat style={{ fill: 'white' }} />
       {i18n.translate('xpack.observabilityAiAssistant.newChatButton', {
         defaultMessage: 'New chat',
       })}
     </EuiButton>
+  ) : (
+    <EuiButtonIcon
+      data-test-subj="observabilityAiAssistantNewChatButtonButton"
+      iconType={EuiIconNewChat}
+      size="xs"
+      {...props}
+    />
+  );
+}
+
+// To-do: replace with Eui icon once https://github.com/elastic/eui/pull/7524 is merged.
+export function EuiIconNewChat({ ...props }: SVGProps<SVGSVGElement>) {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" width={16} height={16} viewBox="0 0 16 16" {...props}>
+      <path d="M8 4a.5.5 0 0 1 .5.5V6H10a.5.5 0 0 1 0 1H8.5v1.5a.5.5 0 0 1-1 0V7H6a.5.5 0 0 1 0-1h1.5V4.5A.5.5 0 0 1 8 4Z" />
+      <path
+        fillRule="evenodd"
+        d="M1 4a2.5 2.5 0 0 1 2.5-2.5h9A2.5 2.5 0 0 1 15 4v5a2.5 2.5 0 0 1-2.5 2.5H7.707L4.5 14.707V11.5h-1A2.5 2.5 0 0 1 1 9V4Zm2.5-1.5A1.5 1.5 0 0 0 2 4v5a1.5 1.5 0 0 0 1.5 1.5h2v1.793L7.293 10.5H12.5A1.5 1.5 0 0 0 14 9V4a1.5 1.5 0 0 0-1.5-1.5h-9Z"
+        clipRule="evenodd"
+      />
+    </svg>
   );
 }
diff --git a/x-pack/plugins/observability_ai_assistant/public/components/chat/chat_flyout.tsx b/x-pack/plugins/observability_ai_assistant/public/components/chat/chat_flyout.tsx
@@ -29,6 +29,7 @@ import { ChatBody } from './chat_body';
 import { ConversationList } from './conversation_list';
 import type { Message } from '../../../common/types';
 import { ChatInlineEditingContent } from './chat_inline_edit';
+import { NewChatButton } from '../buttons/new_chat_button';
 
 const CONVERSATIONS_SIDEBAR_WIDTH = 260;
 const CONVERSATIONS_SIDEBAR_WIDTH_COLLAPSED = 34;
@@ -110,7 +111,7 @@ export function ChatFlyout({
 
   const newChatButtonClassName = css`
     position: absolute;
-    bottom: 31px;
+    bottom: 30px;
     margin-left: ${conversationsExpanded
       ? CONVERSATIONS_SIDEBAR_WIDTH - CONVERSATIONS_SIDEBAR_WIDTH_COLLAPSED
       : 5}px;
@@ -228,13 +229,13 @@ export function ChatFlyout({
                     )}
                     display="block"
                   >
-                    <EuiButtonIcon
+                    <NewChatButton
                       aria-label={i18n.translate(
                         'xpack.observabilityAiAssistant.chatFlyout.euiButtonIcon.newChatLabel',
                         { defaultMessage: 'New chat' }
                       )}
+                      collapsed
                       data-test-subj="observabilityAiAssistantNewChatFlyoutButton"
-                      iconType="plusInCircle"
                       onClick={handleClickNewChat}
                     />
                   </EuiToolTip>