Chatbot entry UI redesign

CHANGELOG.md

@@ -7,6 +7,7 @@ Inspired from [Keep a Changelog](https://keepachangelog.com/en/1.0.0/)
 ### Features
 
 - introduces Pipeline to execute asynchronous operations ([#376](https://github.com/opensearch-project/dashboards-assistant/pull/376))
+- Chatbot entry UI redesign ([#396](https://github.com/opensearch-project/dashboards-assistant/pull/396))
 
 ### Enhancements
 

public/chat_header_button.test.tsx

@@ -4,12 +4,13 @@
  */
 
 import React from 'react';
-import { act, render, fireEvent, screen } from '@testing-library/react';
+import { act, render, fireEvent, screen, waitFor } from '@testing-library/react';
+import { BehaviorSubject } from 'rxjs';
 
 import { HeaderChatButton } from './chat_header_button';
-import { applicationServiceMock } from '../../../src/core/public/mocks';
+import { applicationServiceMock, chromeServiceMock } from '../../../src/core/public/mocks';
+import { HeaderVariant } from '../../../src/core/public';
 import { AssistantActions } from './types';
-import { BehaviorSubject } from 'rxjs';
 import * as coreContextExports from './contexts/core_context';
 import { MountWrapper } from '../../../src/core/public/utils';
 
@@ -51,6 +52,7 @@ jest.mock('./services', () => {
   };
 });
 
+const chromeStartMock = chromeServiceMock.createStartContract();
 const sideCarHideMock = jest.fn(() => {
   const element = document.getElementById('sidecar-mock-div');
   if (element) {
@@ -64,6 +66,9 @@ const sideCarRefMock = {
 
 // mock sidecar open,hide and show
 jest.spyOn(coreContextExports, 'useCore').mockReturnValue({
+  services: {
+    chrome: chromeStartMock,
+  },
   overlays: {
     // @ts-ignore
     sidecar: () => {
@@ -236,4 +241,21 @@ describe('<HeaderChatButton />', () => {
     expect(sideCarHideMock).toHaveBeenCalled();
     expect(sideCarRefMock.close).toHaveBeenCalled();
   });
+
+  it('should render toggle chat flyout button icon', () => {
+    chromeStartMock.getHeaderVariant$.mockReturnValue(
+      new BehaviorSubject(HeaderVariant.APPLICATION)
+    );
+    render(
+      <HeaderChatButton
+        application={applicationServiceMock.createStartContract()}
+        messageRenderers={{}}
+        actionExecutors={{}}
+        assistantActions={{} as AssistantActions}
+        currentAccount={{ username: 'test_user' }}
+        inLegacyHeader={false}
+      />
+    );
+    expect(screen.getByLabelText('toggle chat flyout button icon')).toBeInTheDocument();
+  });
 });

public/chat_header_button.tsx

@@ -3,12 +3,12 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import { EuiBadge, EuiFieldText, EuiIcon } from '@elastic/eui';
+import { EuiBadge, EuiFieldText, EuiIcon, EuiButtonIcon } from '@elastic/eui';
 import classNames from 'classnames';
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { useEffectOnce } from 'react-use';
+import { useEffectOnce, useObservable } from 'react-use';
 
-import { ApplicationStart, SIDECAR_DOCKED_MODE } from '../../../src/core/public';
+import { ApplicationStart, HeaderVariant, SIDECAR_DOCKED_MODE } from '../../../src/core/public';
 import { getIncontextInsightRegistry } from './services';
 import { ChatFlyout } from './chat_flyout';
 import { ChatContext, IChatContext } from './contexts/chat_context';
@@ -32,9 +32,12 @@ interface HeaderChatButtonProps {
   actionExecutors: Record<string, ActionExecutor>;
   assistantActions: AssistantActions;
   currentAccount: UserAccount;
+  inLegacyHeader?: boolean;
 }
 
 export const HeaderChatButton = (props: HeaderChatButtonProps) => {
+  const core = useCore();
+  const { inLegacyHeader } = props;
   const sideCarRef = useRef<{ close: Function }>();
   const [appId, setAppId] = useState<string>();
   const [conversationId, setConversationId] = useState<string>();
@@ -50,8 +53,10 @@ export const HeaderChatButton = (props: HeaderChatButtonProps) => {
   const flyoutVisibleRef = useRef(flyoutVisible);
   flyoutVisibleRef.current = flyoutVisible;
   const registry = getIncontextInsightRegistry();
+  const headerVariant = useObservable(core.services.chrome.getHeaderVariant$());
+  const isSingleLineHeader = headerVariant === HeaderVariant.APPLICATION;
+
   const [sidecarDockedMode, setSidecarDockedMode] = useState(DEFAULT_SIDECAR_DOCKED_MODE);
-  const core = useCore();
   const flyoutFullScreen = sidecarDockedMode === SIDECAR_DOCKED_MODE.TAKEOVER;
   const flyoutMountPoint = useRef(null);
   usePatchFixedStyle();
@@ -226,46 +231,63 @@ export const HeaderChatButton = (props: HeaderChatButtonProps) => {
 
   return (
     <>
-      <div className={classNames('llm-chat-header-icon-wrapper')}>
+      {!inLegacyHeader && isSingleLineHeader && (
+        <EuiButtonIcon
+          className={classNames(['eui-hideFor--xl', 'eui-hideFor--xxl', 'eui-hideFor--xxxl'])}
+          iconType={getLogoIcon('gradient')}
+          onClick={() => setFlyoutVisible(!flyoutVisible)}
+          display="base"
+          size="s"
+          aria-label="toggle chat flyout button icon"
+        />
+      )}
+      <div
+        className={classNames({
+          'llm-chat-header-icon-wrapper': true,
+          'eui-hideFor--l': isSingleLineHeader,
+          'eui-hideFor--m': isSingleLineHeader,
+          'eui-hideFor--s': isSingleLineHeader,
+          'eui-hideFor--xs': isSingleLineHeader,
+          'in-legacy-header': inLegacyHeader,
+        })}
+      >
         <EuiFieldText
           aria-label="chat input"
           inputRef={inputRef}
           compressed
           onFocus={() => setInputFocus(true)}
           onBlur={() => setInputFocus(false)}
-          placeholder="Ask question"
+          placeholder="Ask a question"
           onKeyPress={onKeyPress}
           onKeyUp={onKeyUp}
-          prepend={
-            <EuiIcon
-              aria-label="toggle chat flyout icon"
-              type={getLogoIcon('gray')}
-              size="m"
-              onClick={() => setFlyoutVisible(!flyoutVisible)}
-            />
-          }
-          append={
-            <span className="llm-chat-header-shortcut">
-              {inputFocus ? (
-                <EuiBadge
-                  title="press enter to chat"
-                  className="llm-chat-header-shortcut-enter"
-                  color="hollow"
-                >
-                  ⏎
-                </EuiBadge>
-              ) : (
-                <EuiBadge
-                  title="press Ctrl + / to start typing"
-                  className="llm-chat-header-shortcut-cmd"
-                  color="hollow"
-                >
-                  Ctrl + /
-                </EuiBadge>
-              )}
-            </span>
-          }
+          className="llm-chat-header-text-input"
+        />
+        <EuiIcon
+          aria-label="toggle chat flyout icon"
+          type={getLogoIcon(inputFocus ? 'gradient' : 'gray')}
+          size="m"
+          onClick={() => setFlyoutVisible(!flyoutVisible)}
+          className="llm-chat-toggle-icon"
         />
+        <span className="llm-chat-header-shortcut">
+          {inputFocus ? (
+            <EuiBadge
+              color="hollow"
+              title="press enter to chat"
+              className="llm-chat-header-shortcut-enter"
+            >
+              ⏎
+            </EuiBadge>
+          ) : (
+            <EuiBadge
+              color="hollow"
+              title="press Ctrl + / to start typing"
+              className="llm-chat-header-shortcut-cmd"
+            >
+              Ctrl + /
+            </EuiBadge>
+          )}
+        </span>
         <ChatContext.Provider value={chatContextValue}>
           <ChatStateProvider>
             <SetContext assistantActions={props.assistantActions} />

public/index.scss

@@ -4,25 +4,14 @@
  */
 
 .llm-chat-header-icon-wrapper {
-  margin: 0 8px;
-  height: 48px;
   display: flex;
   align-items: center;
+  position: relative;
+  width: 200px;
 
-  .euiFormControlLayout__prepend {
-    background-color: transparent !important;
-    width: 36px !important;
-  }
-
-  .euiFieldText {
-    width: 96px;
-    transition: width 0.3s ease-in-out;
-
-    &:focus {
-      width: 250px;
-      background-image: none;
-      background-color: transparent;
-    }
+  &.in-legacy-header{
+    margin: 0 $euiSizeS;
+    height: $euiSizeL * 2;
   }
 
   .euiIcon {
@@ -31,27 +20,19 @@
     }
   }
 
-  .llm-chat-header-shortcut {
-    display: flex;
-    align-items: center;
-    padding-right: 6px;
+  .llm-chat-header-text-input{
+    padding-left: $euiSizeXL;
+    padding-right: $euiSizeL * 2;
   }
 
-  &::after {
-    content: '';
-    display: block;
+  .llm-chat-toggle-icon{
     position: absolute;
-    top: 4px;
-    bottom: 4px;
-    left: 4px;
-    right: 4px;
-    border-radius: 9px;
-    z-index: -1;
+    left: $euiSizeS;
   }
-}
-.llm-chat-header-icon-wrapper-selected {
-  &::after {
-    background-color: $ouiColorPrimary;
+
+  .llm-chat-header-shortcut{
+    position: absolute;
+    right: $euiSizeS;
   }
 }
 

public/plugin.tsx

@@ -246,20 +246,38 @@ export class AssistantPlugin
           });
         }
 
-        coreStart.chrome.navControls.registerRight({
-          order: 10000,
-          mount: toMountPoint(
-            <CoreContext.Provider>
-              <HeaderChatButton
-                application={coreStart.application}
-                messageRenderers={messageRenderers}
-                actionExecutors={actionExecutors}
-                assistantActions={assistantActions}
-                currentAccount={{ username }}
-              />
-            </CoreContext.Provider>
-          ),
-        });
+        if (coreStart.chrome.navGroup.getNavGroupEnabled()) {
+          coreStart.chrome.navControls.registerPrimaryHeaderRight({
+            order: 10000,
+            mount: toMountPoint(
+              <CoreContext.Provider>
+                <HeaderChatButton
+                  application={coreStart.application}
+                  messageRenderers={messageRenderers}
+                  actionExecutors={actionExecutors}
+                  assistantActions={assistantActions}
+                  currentAccount={{ username }}
+                />
+              </CoreContext.Provider>
+            ),
+          });
+        } else {
+          coreStart.chrome.navControls.registerRight({
+            order: 10000,
+            mount: toMountPoint(
+              <CoreContext.Provider>
+                <HeaderChatButton
+                  application={coreStart.application}
+                  messageRenderers={messageRenderers}
+                  actionExecutors={actionExecutors}
+                  assistantActions={assistantActions}
+                  currentAccount={{ username }}
+                  inLegacyHeader
+                />
+              </CoreContext.Provider>
+            ),
+          });
+        }
       };
       setupChat();
     }