Use smaller and compressed varients of buttons and form components

CHANGELOG.md

@@ -24,4 +24,5 @@ Inspired from [Keep a Changelog](https://keepachangelog.com/en/1.0.0/)
 - Reset chat and reload history after data source change ([#194](https://github.com/opensearch-project/dashboards-assistant/pull/194))
 - Add experimental feature to support text to visualization ([#218](https://github.com/opensearch-project/dashboards-assistant/pull/218))
 - Be compatible with ML configuration index mapping change ([#239](https://github.com/opensearch-project/dashboards-assistant/pull/239))
-- Support context aware alert analysis by reusing incontext insight component([#215](https://github.com/opensearch-project/dashboards-assistant/pull/215))
+- Support context aware alert analysis by reusing incontext insight component([#215](https://github.com/opensearch-project/dashboards-assistant/pull/215))
+Use smaller and compressed variants of buttons and form components ([#250](https://github.com/opensearch-project/dashboards-assistant/pull/250))

public/components/chat_experimental_badge.tsx

@@ -6,7 +6,7 @@
 import React, { useState } from 'react';
 import {
   EuiPopover,
-  EuiButtonIcon,
+  EuiSmallButtonIcon,
   EuiTitle,
   EuiHorizontalRule,
   EuiText,
@@ -32,7 +32,7 @@ export const ChatExperimentalBadge = ({ onClick }: ChatExperimentalBadgeProps) =
     <EuiPopover
       isOpen={visible}
       button={
-        <EuiButtonIcon
+        <EuiSmallButtonIcon
           color="text"
           iconType="beaker"
           onClick={handleIconClick}

public/components/chat_window_header_title.tsx

@@ -9,7 +9,7 @@ import {
   EuiFlexGroup,
   EuiFlexItem,
   EuiPopover,
-  EuiButtonIcon,
+  EuiSmallButtonIcon,
   EuiToolTip,
 } from '@elastic/eui';
 import React, { useCallback, useMemo, useState } from 'react';
@@ -125,7 +125,7 @@ export const ChatWindowHeaderTitle = React.memo(() => {
           <EuiPopover
             id="conversationTitle"
             button={
-              <EuiButtonIcon
+              <EuiSmallButtonIcon
                 onClick={onButtonClick}
                 aria-label="toggle chat context menu"
                 color="text"

public/components/edit_conversation_name_modal.tsx

@@ -5,7 +5,7 @@
 
 import React, { useCallback, useRef } from 'react';
 
-import { EuiConfirmModal, EuiFieldText, EuiSpacer, EuiText } from '@elastic/eui';
+import { EuiConfirmModal, EuiCompressedFieldText, EuiSpacer, EuiText } from '@elastic/eui';
 import { useCore } from '../contexts/core_context';
 import { usePatchConversation } from '../hooks';
 
@@ -65,7 +65,7 @@ export const EditConversationNameModal = ({
         <p>Please enter a new name for your conversation.</p>
       </EuiText>
       <EuiSpacer size="xs" />
-      <EuiFieldText
+      <EuiCompressedFieldText
         inputRef={titleInputRef}
         defaultValue={defaultTitle}
         aria-label="Conversation name input"

public/components/incontext_insight/index.tsx

@@ -8,11 +8,11 @@ import './index.scss';
 import { i18n } from '@osd/i18n';
 import {
   EuiWrappingPopover,
-  EuiButton,
-  EuiFieldText,
+  EuiSmallButton,
+  EuiCompressedFieldText,
   EuiFlexGroup,
   EuiFlexItem,
-  EuiFormRow,
+  EuiCompressedFormRow,
   EuiPopoverTitle,
   EuiText,
   EuiPopoverFooter,
@@ -23,7 +23,7 @@ import {
   EuiPanel,
   keys,
   EuiIcon,
-  EuiButtonIcon,
+  EuiSmallButtonIcon,
 } from '@elastic/eui';
 import React, { Children, isValidElement, useEffect, useRef, useState } from 'react';
 import { IncontextInsight as IncontextInsightInput } from '../../types';
@@ -202,8 +202,8 @@ export const IncontextInsight = ({ children, httpSetup }: IncontextInsightProps)
     return (
       <EuiFlexGroup gutterSize="xs">
         <EuiFlexItem grow={6}>
-          <EuiFormRow>
-            <EuiFieldText
+          <EuiCompressedFormRow>
+            <EuiCompressedFieldText
               placeholder="Ask a question"
               value={userQuestion}
               autoFocus
@@ -215,10 +215,10 @@ export const IncontextInsight = ({ children, httpSetup }: IncontextInsightProps)
                 }
               }}
             />
-          </EuiFormRow>
+          </EuiCompressedFormRow>
         </EuiFlexItem>
         <EuiFlexItem grow={false}>
-          <EuiButton
+          <EuiSmallButton
             fill
             iconType="returnKey"
             iconSide="right"
@@ -228,7 +228,7 @@ export const IncontextInsight = ({ children, httpSetup }: IncontextInsightProps)
             }}
           >
             Go
-          </EuiButton>
+          </EuiSmallButton>
         </EuiFlexItem>
       </EuiFlexGroup>
     );
@@ -318,7 +318,7 @@ export const IncontextInsight = ({ children, httpSetup }: IncontextInsightProps)
             </EuiFlexItem>
             <EuiFlexItem grow={false}>
               <div>
-                <EuiButtonIcon
+                <EuiSmallButtonIcon
                   title={i18n.translate('assistantDashboards.incontextInsight.closeAssistant', {
                     defaultMessage: 'Close assistant popover',
                   })}

public/components/invite_message.tsx

@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import { EuiButton, EuiEmptyPrompt, EuiLink } from '@elastic/eui';
+import { EuiSmallButton, EuiEmptyPrompt, EuiLink } from '@elastic/eui';
 import React from 'react';
 
 export const InviteMessage: React.FC = () => {
@@ -28,9 +28,9 @@ export const InviteMessage: React.FC = () => {
         </>
       }
       actions={
-        <EuiButton color="primary" fill href={mailtoLink}>
+        <EuiSmallButton color="primary" fill href={mailtoLink}>
           Request invite
-        </EuiButton>
+        </EuiSmallButton>
       }
     />
   );

public/components/notebook/notebook_name_modal.tsx

@@ -4,15 +4,15 @@
  */
 
 import {
-  EuiButton,
-  EuiButtonEmpty,
+  EuiSmallButton,
+  EuiSmallButtonEmpty,
   EuiLink,
-  EuiFormRow,
+  EuiCompressedFormRow,
   EuiModal,
   EuiModalBody,
   EuiModalFooter,
   EuiModalHeader,
-  EuiFieldText,
+  EuiCompressedFieldText,
   EuiModalHeaderTitle,
 } from '@elastic/eui';
 import React, { useState, useCallback } from 'react';
@@ -71,20 +71,20 @@ export const NotebookNameModal = ({ onClose, saveChat }: NotebookNameModalProps)
         </EuiModalHeader>
 
         <EuiModalBody>
-          <EuiFormRow label="Please enter a name for your notebook.">
-            <EuiFieldText
+          <EuiCompressedFormRow label="Please enter a name for your notebook.">
+            <EuiCompressedFieldText
               value={name}
               onChange={(e) => setName(e.target.value)}
               aria-label="Notebook name input"
             />
-          </EuiFormRow>
+          </EuiCompressedFormRow>
         </EuiModalBody>
 
         <EuiModalFooter>
-          <EuiButtonEmpty onClick={onClose} data-test-subj="cancelSaveToNotebookButton">
+          <EuiSmallButtonEmpty onClick={onClose} data-test-subj="cancelSaveToNotebookButton">
             Cancel
-          </EuiButtonEmpty>
-          <EuiButton
+          </EuiSmallButtonEmpty>
+          <EuiSmallButton
             type="submit"
             fill
             isLoading={loading}
@@ -93,7 +93,7 @@ export const NotebookNameModal = ({ onClose, saveChat }: NotebookNameModalProps)
             data-test-subj="confirmSaveToNotebookButton"
           >
             Confirm name
-          </EuiButton>
+          </EuiSmallButton>
         </EuiModalFooter>
       </EuiModal>
     </>

public/tabs/chat/chat_page_content.tsx

@@ -4,7 +4,7 @@
  */
 
 import {
-  EuiButton,
+  EuiSmallButton,
   EuiEmptyPrompt,
   EuiFlexGroup,
   EuiFlexItem,
@@ -69,14 +69,14 @@ export const ChatPageContent: React.FC<ChatPageContentProps> = React.memo((props
           body={props.messagesLoadingError.message}
           titleSize="l"
           actions={
-            <EuiButton
+            <EuiSmallButton
               className="llm-chat-error-refresh-button"
               fill
               iconType="refresh"
               onClick={props.onRefresh}
             >
               Refresh
-            </EuiButton>
+            </EuiSmallButton>
           }
         />
       </>

public/tabs/chat/messages/message_bubble.tsx

@@ -5,7 +5,7 @@
 
 import {
   EuiAvatar,
-  EuiButtonIcon,
+  EuiSmallButtonIcon,
   EuiCopy,
   EuiFlexGroup,
   EuiFlexItem,
@@ -184,7 +184,7 @@ export const MessageBubble: React.FC<MessageBubbleProps> = React.memo((props) =>
                   <EuiFlexItem grow={false}>
                     <EuiCopy textToCopy={props.message.content ?? ''}>
                       {(copy) => (
-                        <EuiButtonIcon
+                        <EuiSmallButtonIcon
                           aria-label="copy message"
                           title="copy message"
                           onClick={copy}
@@ -197,7 +197,7 @@ export const MessageBubble: React.FC<MessageBubbleProps> = React.memo((props) =>
                 )}
                 {props.showRegenerate && props.interaction?.interaction_id ? (
                   <EuiFlexItem grow={false}>
-                    <EuiButtonIcon
+                    <EuiSmallButtonIcon
                       aria-label="regenerate message"
                       onClick={() => props.onRegenerate?.(props.interaction?.interaction_id || '')}
                       title="regenerate message"
@@ -211,7 +211,7 @@ export const MessageBubble: React.FC<MessageBubbleProps> = React.memo((props) =>
                   <>
                     {feedbackResult !== false ? (
                       <EuiFlexItem grow={false}>
-                        <EuiButtonIcon
+                        <EuiSmallButtonIcon
                           aria-label="feedback thumbs up"
                           color={feedbackResult === true ? 'primary' : 'text'}
                           iconType="thumbsUp"
@@ -221,7 +221,7 @@ export const MessageBubble: React.FC<MessageBubbleProps> = React.memo((props) =>
                     ) : null}
                     {feedbackResult !== true ? (
                       <EuiFlexItem grow={false}>
-                        <EuiButtonIcon
+                        <EuiSmallButtonIcon
                           aria-label="feedback thumbs down"
                           color={feedbackResult === false ? 'primary' : 'text'}
                           iconType="thumbsDown"
@@ -233,7 +233,7 @@ export const MessageBubble: React.FC<MessageBubbleProps> = React.memo((props) =>
                 )}
                 {props.message.interactionId ? (
                   <EuiFlexItem grow={false}>
-                    <EuiButtonIcon
+                    <EuiSmallButtonIcon
                       aria-label="How was this generated?"
                       data-test-subj={`trace-icon-${props.message.interactionId}`}
                       onClick={() => {

public/tabs/history/chat_history_list.tsx

@@ -5,7 +5,7 @@
 
 import React, { useCallback } from 'react';
 import {
-  EuiButtonIcon,
+  EuiSmallButtonIcon,
   EuiFlexGroup,
   EuiFlexItem,
   EuiHorizontalRule,
@@ -75,15 +75,15 @@ export const ChatHistoryListItem = ({
         <EuiFlexItem grow={false}>
           <EuiFlexGroup gutterSize="s" responsive={false}>
             <EuiFlexItem grow={false}>
-              <EuiButtonIcon
+              <EuiSmallButtonIcon
                 onClick={handleEditClick}
                 iconType="pencil"
                 aria-label="Edit conversation name"
                 color="text"
               />
             </EuiFlexItem>
             <EuiFlexItem grow={false}>
-              <EuiButtonIcon
+              <EuiSmallButtonIcon
                 onClick={handleDeleteClick}
                 iconType="trash"
                 color="danger"

public/tabs/history/chat_history_page.tsx

@@ -12,7 +12,7 @@ import {
   EuiSpacer,
   EuiText,
   EuiTitle,
-  EuiButtonIcon,
+  EuiSmallButtonIcon,
   EuiFlexGroup,
   EuiFlexItem,
 } from '@elastic/eui';
@@ -148,7 +148,7 @@ export const ChatHistoryPage: React.FC<ChatHistoryPageProps> = React.memo((props
             {flyoutFullScreen ? (
               <EuiFlexGroup gutterSize="none" justifyContent="flexEnd">
                 <EuiFlexItem grow={false}>
-                  <EuiButtonIcon
+                  <EuiSmallButtonIcon
                     aria-label="full screen back"
                     iconType="cross"
                     onClick={handleBack}

public/tabs/history/chat_history_search_list.tsx

@@ -4,7 +4,7 @@
  */
 
 import {
-  EuiFieldSearch,
+  EuiCompressedFieldSearch,
   EuiFieldSearchProps,
   EuiPanel,
   EuiSpacer,
@@ -81,7 +81,7 @@ export const ChatHistorySearchList = ({
   );
   return (
     <>
-      <EuiFieldSearch
+      <EuiCompressedFieldSearch
         placeholder="Search by conversation name"
         value={search}
         onChange={onSearchChange}