@patternfly/chatbot 6.4.0-prerelease.4 → 6.4.0-prerelease.6

package/src/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.tsx

@@ -8,6 +8,7 @@ import { useRef, Fragment } from 'react';
 // Import PatternFly components
 import {
   Button,
+  ButtonProps,
   Drawer,
   DrawerPanelContent,
   DrawerContent,
@@ -18,13 +19,10 @@ import {
   DrawerCloseButton,
   DrawerContentBody,
   SearchInput,
-  Menu,
-  MenuList,
-  MenuGroup,
-  MenuItem,
-  MenuContent,
-  MenuItemProps,
-  MenuProps,
+  List,
+  ListItem,
+  ListItemProps,
+  Title,
   DrawerPanelContentProps,
   DrawerContentProps,
   DrawerContentBodyProps,
@@ -33,9 +31,10 @@ import {
   DrawerCloseButtonProps,
   DrawerPanelBodyProps,
   SkeletonProps,
-  Title,
   Icon,
-  ButtonProps
+  MenuProps, // Remove in next breaking change
+  TitleProps,
+  ListProps
 } from '@patternfly/react-core';
 
 import { OutlinedClockIcon, OutlinedCommentAltIcon, PenToSquareIcon } from '@patternfly/react-icons';
@@ -61,8 +60,10 @@ export interface Conversation {
   label?: string;
   /** Callback for when user selects item. */
   onSelect?: (event?: React.MouseEvent, value?: string | number) => void;
-  /** Additional props passed to conversation menu item */
-  additionalProps?: MenuItemProps;
+  /** Additional props passed to conversation button item */
+  additionalProps?: ButtonProps;
+  /** Additional props passed to conversation list item */
+  listItemProps?: Omit<ListItemProps, 'children'>;
 }
 export interface ChatbotConversationHistoryNavProps extends DrawerProps {
   /** Function called to toggle drawer */
@@ -79,6 +80,10 @@ export interface ChatbotConversationHistoryNavProps extends DrawerProps {
   conversations: Conversation[] | { [key: string]: Conversation[] };
   /** Additional button props for new chat button. */
   newChatButtonProps?: ButtonProps;
+  /** Additional props applied to all conversation list headers */
+  titleProps?: Partial<TitleProps>;
+  /** Additional props applied to conversation list. If conversations is an object, you should pass an object of ListProps for each group. */
+  listProps?: ListProps | { [key: string]: ListProps };
   /** Text shown in blue button */
   newChatButtonText?: string;
   /** Callback function for when blue button is clicked. Omit to hide blue "new chat button" */
@@ -97,7 +102,7 @@ export interface ChatbotConversationHistoryNavProps extends DrawerProps {
   reverseButtonOrder?: boolean;
   /** Custom test id for the drawer actions */
   drawerActionsTestId?: string;
-  /** Additional props applied to menu  */
+  /** @deprecated Additional props applied to list container  */
   menuProps?: MenuProps;
   /** Additional props applied to panel */
   drawerPanelContentProps?: DrawerPanelContentProps;
@@ -136,6 +141,8 @@ export const ChatbotConversationHistoryNav: FunctionComponent<ChatbotConversatio
   activeItemId,
   onSelectActiveItem,
   conversations,
+  titleProps,
+  listProps,
   newChatButtonText = 'New chat',
   drawerContent,
   onNewChat,
@@ -146,7 +153,6 @@ export const ChatbotConversationHistoryNav: FunctionComponent<ChatbotConversatio
   displayMode,
   reverseButtonOrder = false,
   drawerActionsTestId = 'chatbot-nav-drawer-actions',
-  menuProps,
   drawerPanelContentProps,
   drawerContentProps,
   drawerContentBodyProps,
@@ -170,55 +176,59 @@ export const ChatbotConversationHistoryNav: FunctionComponent<ChatbotConversatio
   };
 
   const getNavItem = (conversation: Conversation) => (
-    <MenuItem
-      className={`pf-chatbot__menu-item ${activeItemId && activeItemId === conversation.id ? 'pf-chatbot__menu-item--active' : ''}`}
-      itemId={conversation.id}
+    <ListItem
+      className={`pf-chatbot__conversation-list-item ${activeItemId && activeItemId === conversation.id ? 'pf-chatbot__conversation-list-item--active' : ''}`}
       key={conversation.id}
-      {...(conversation.noIcon ? {} : { icon: conversation.icon ?? <OutlinedCommentAltIcon /> })}
-      /* eslint-disable indent */
-      {...(conversation.menuItems
-        ? {
-            actions: (
-              <ConversationHistoryDropdown
-                menuClassName={conversation.menuClassName}
-                onSelect={conversation.onSelect}
-                menuItems={conversation.menuItems}
-                label={conversation.label}
-              />
-            )
-          }
-        : {})}
-      {...conversation.additionalProps}
+      {...conversation.listItemProps}
       /* eslint-enable indent */
     >
-      {conversation.text}
-    </MenuItem>
+      <>
+        <Button
+          className="pf-chatbot__conversation-history-item"
+          variant="link"
+          {...conversation.additionalProps}
+          {...(conversation.noIcon ? {} : { icon: conversation.icon ?? <OutlinedCommentAltIcon /> })}
+          onClick={(event) => onSelectActiveItem?.(event, conversation.id)}
+        >
+          {conversation.text}
+        </Button>
+        {conversation.menuItems && (
+          <ConversationHistoryDropdown
+            menuClassName={conversation.menuClassName}
+            onSelect={conversation.onSelect}
+            menuItems={conversation.menuItems}
+            label={conversation.label}
+          />
+        )}
+      </>
+    </ListItem>
   );
 
-  const buildMenu = () => {
+  const buildConversations = () => {
     if (Array.isArray(conversations)) {
-      // Render for array of MenuItemObject
       return (
-        <MenuList>
+        <List className="pf-chatbot__conversation-list" isPlain {...listProps}>
           {conversations.map((conversation) => (
             <Fragment key={conversation.id}>{getNavItem(conversation)}</Fragment>
           ))}
-        </MenuList>
+        </List>
       );
     } else {
-      // Render for object with NavItemObject arrays as values
       return (
-        <>
+        <div>
           {Object.keys(conversations).map((navGroup) => (
-            <MenuGroup className="pf-chatbot__menu-item-header" label={navGroup} key={navGroup}>
-              <MenuList>
+            <section key={navGroup}>
+              <Title headingLevel="h4" className="pf-chatbot__conversation-list-header" {...titleProps}>
+                {navGroup}
+              </Title>
+              <List className="pf-chatbot__conversation-list" isPlain {...listProps?.[navGroup]}>
                 {conversations[navGroup].map((conversation) => (
                   <Fragment key={conversation.id}>{getNavItem(conversation)}</Fragment>
                 ))}
-              </MenuList>
-            </MenuGroup>
+              </List>
+            </section>
           ))}
-        </>
+        </div>
       );
     }
   };
@@ -238,11 +248,7 @@ export const ChatbotConversationHistoryNav: FunctionComponent<ChatbotConversatio
     if (noResultsState) {
       return <HistoryEmptyState {...noResultsState} />;
     }
-    return (
-      <Menu isPlain onSelect={onSelectActiveItem} activeItemId={activeItemId} {...menuProps}>
-        <MenuContent>{buildMenu()}</MenuContent>
-      </Menu>
-    );
+    return <>{buildConversations()}</>;
   };
 
   const renderDrawerContent = () => (

package/src/ChatbotModal/ChatbotModal.scss

@@ -20,7 +20,7 @@
     padding-block-end: var(--pf-t--global--spacer--xl);
   }
   .pf-v6-c-modal-box__header {
-    padding-block-end: var(--pf-t--global--spacer--lg);
+    padding-block-end: var(--pf-t--global--spacer--sm);
   }
 }
 

package/src/MessageBar/MessageBar.tsx

@@ -141,6 +141,7 @@ export const MessageBarBase: FunctionComponent<MessageBarProps> = ({
   const [message, setMessage] = useState<string | number>(value ?? '');
   const [isListeningMessage, setIsListeningMessage] = useState<boolean>(false);
   const [hasSentMessage, setHasSentMessage] = useState(false);
+  const [isComposing, setIsComposing] = useState(false);
   const inputRef = useRef<HTMLTextAreaElement>(null);
   const textareaRef = (innerRef as React.RefObject<HTMLTextAreaElement>) ?? inputRef;
   const attachButtonRef = useRef<HTMLButtonElement>(null);
@@ -285,21 +286,38 @@ export const MessageBarBase: FunctionComponent<MessageBarProps> = ({
 
   const handleKeyDown = useCallback(
     (event: ReactKeyboardEvent) => {
-      if (event.key === 'Enter' && !event.shiftKey) {
+      // Japanese and other languages may use IME for character input.
+      // In these cases, enter is used to select the final input, so we need to check for composition end instead.
+      // See more info at https://www.stum.de/2016/06/24/handling-ime-events-in-javascript/
+      // Chrome, Edge, and Firefox seem to work well with just the compose event.
+      // Safari is a little bit special. We need to handle 229 as well in this case.
+      const nativeEvent = event.nativeEvent as KeyboardEvent;
+      const isCompositionKey = nativeEvent.which === 229;
+      const isCurrentlyComposing = isComposing || isCompositionKey;
+
+      if (event.key === 'Enter' && !isCurrentlyComposing && !event.shiftKey) {
         event.preventDefault();
         if (!isSendButtonDisabled && !hasStopButton) {
           handleSend(message);
         }
       }
-      if (event.key === 'Enter' && event.shiftKey) {
+      if (event.key === 'Enter' && !isCurrentlyComposing && event.shiftKey) {
         if (textareaRef.current) {
           handleNewLine(textareaRef.current);
         }
       }
     },
-    [isSendButtonDisabled, hasStopButton, handleSend, message]
+    [isSendButtonDisabled, hasStopButton, handleSend, message, isComposing]
   );
 
+  const handleCompositionStart = useCallback(() => {
+    setIsComposing(true);
+  }, []);
+
+  const handleCompositionEnd = useCallback(() => {
+    setIsComposing(false);
+  }, []);
+
   const handleAttachMenuToggle = () => {
     attachMenuProps?.setIsAttachMenuOpen && attachMenuProps?.setIsAttachMenuOpen(!attachMenuProps?.isAttachMenuOpen);
     attachMenuProps?.onAttachMenuToggleClick();
@@ -402,6 +420,8 @@ export const MessageBarBase: FunctionComponent<MessageBarProps> = ({
           placeholder={isListeningMessage ? listeningText : placeholder}
           ref={textareaRef}
           onKeyDown={handleKeyDown}
+          onCompositionStart={handleCompositionStart}
+          onCompositionEnd={handleCompositionEnd}
           {...props}
         />
       </div>