@patternfly/chatbot 6.4.0-prerelease.5 → 6.4.0-prerelease.7

package/patternfly-docs/content/extensions/chatbot/examples/UI/ChatbotConversationEditing.tsx

@@ -0,0 +1,202 @@
+// From Cursor, with aid
+import React, { FunctionComponent, useState, useRef, useEffect } from 'react';
+import { ChatbotDisplayMode } from '@patternfly/chatbot/dist/dynamic/Chatbot';
+import ChatbotConversationHistoryNav, {
+  Conversation
+} from '@patternfly/chatbot/dist/dynamic/ChatbotConversationHistoryNav';
+import { ChatbotModal } from '@patternfly/chatbot/dist/dynamic/ChatbotModal';
+import {
+  Checkbox,
+  DropdownItem,
+  DropdownList,
+  Button,
+  TextInput,
+  Form,
+  FormGroup,
+  ModalHeader,
+  ModalBody,
+  ModalFooter
+} from '@patternfly/react-core';
+
+export const ChatbotHeaderTitleDemo: FunctionComponent = () => {
+  const [isDrawerOpen, setIsDrawerOpen] = useState(true);
+  const displayMode = ChatbotDisplayMode.embedded;
+
+  // Modal state
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const [editingConversationId, setEditingConversationId] = useState<string | number | null>(null);
+  const [editingText, setEditingText] = useState('');
+
+  // Ref for the text input
+  const textInputRef = useRef<HTMLInputElement>(null);
+
+  // Focus the text input when modal opens
+  useEffect(() => {
+    if (isModalOpen && textInputRef.current) {
+      textInputRef.current.focus();
+      // Move cursor to the end of the text
+      const length = textInputRef.current.value.length;
+      textInputRef.current.setSelectionRange(length, length);
+    }
+  }, [isModalOpen]);
+
+  const findConversationAndGroup = (conversations: { [key: string]: Conversation[] }, itemId: string | number) => {
+    for (const [groupKey, conversationList] of Object.entries(conversations)) {
+      const conversationIndex = conversationList.findIndex((conv) => conv.id === itemId);
+      if (conversationIndex !== -1) {
+        return { groupKey, conversationIndex, conversation: conversationList[conversationIndex] };
+      }
+    }
+    return null;
+  };
+
+  const onRenameClick = (itemId: string | number) => {
+    const result = findConversationAndGroup(conversations, itemId);
+    if (result) {
+      setEditingConversationId(itemId);
+      setEditingText(result.conversation.text);
+      setIsModalOpen(true);
+    }
+  };
+
+  const handleModalSave = () => {
+    if (editingConversationId) {
+      setConversations((prevConversations) => {
+        const result = findConversationAndGroup(prevConversations, editingConversationId);
+        if (!result) {
+          return prevConversations;
+        }
+
+        const { groupKey, conversationIndex } = result;
+        const newConversations = { ...prevConversations };
+        const newGroup = [...newConversations[groupKey]];
+
+        newGroup[conversationIndex] = { ...newGroup[conversationIndex], text: editingText };
+        newConversations[groupKey] = newGroup;
+
+        return newConversations;
+      });
+    }
+    handleModalClose();
+  };
+
+  const handleModalCancel = () => {
+    handleModalClose();
+  };
+
+  const handleModalClose = () => {
+    setIsModalOpen(false);
+    setEditingConversationId(null);
+    setEditingText('');
+  };
+
+  const handleTextInputKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
+    if (event.key === 'Enter') {
+      event.preventDefault();
+      handleModalSave();
+    }
+  };
+
+  const renderMenuItems = (itemId: string | number) => [
+    <DropdownList key={`list-${itemId}`}>
+      <DropdownItem value="Download" id="Download">
+        Download
+      </DropdownItem>
+      <DropdownItem value="Rename" id="Rename" onClick={() => onRenameClick(itemId)}>
+        Rename
+      </DropdownItem>
+      <DropdownItem value="Archive" id="Archive">
+        Archive
+      </DropdownItem>
+      <DropdownItem value="Delete" id="Delete">
+        Delete
+      </DropdownItem>
+    </DropdownList>
+  ];
+
+  const initialConversations: { [key: string]: Conversation[] } = {
+    Today: [{ id: '1', text: 'Red Hat products and services' }],
+    'This month': [
+      {
+        id: '2',
+        text: 'Enterprise Linux installation and setup'
+      },
+      { id: '3', text: 'Troubleshoot system crash' }
+    ],
+    March: [
+      { id: '4', text: 'Ansible security and updates' },
+      { id: '5', text: 'Red Hat certification' },
+      { id: '6', text: 'Lightspeed user documentation' }
+    ],
+    February: [
+      { id: '7', text: 'Crashing pod assistance' },
+      { id: '8', text: 'OpenShift AI pipelines' },
+      { id: '9', text: 'Updating subscription plan' },
+      { id: '10', text: 'Red Hat licensing options' }
+    ],
+    January: [
+      { id: '11', text: 'RHEL system performance' },
+      { id: '12', text: 'Manage user accounts' }
+    ]
+  };
+
+  const [conversations, setConversations] = useState(initialConversations);
+
+  // Create conversations with menu items dynamically
+  const conversationsWithMenuItems = () => {
+    const newConversations = { ...conversations };
+    Object.keys(newConversations).forEach((groupKey) => {
+      newConversations[groupKey] = newConversations[groupKey].map((conv) => ({
+        ...conv,
+        menuItems: renderMenuItems(conv.id)
+      }));
+    });
+    return newConversations;
+  };
+
+  return (
+    <>
+      <Checkbox
+        label="Display drawer"
+        isChecked={isDrawerOpen}
+        onChange={() => setIsDrawerOpen(!isDrawerOpen)}
+        id="drawer-actions-visible"
+        name="drawer-actions-visible"
+      ></Checkbox>
+      <ChatbotConversationHistoryNav
+        displayMode={displayMode}
+        onDrawerToggle={() => setIsDrawerOpen(!isDrawerOpen)}
+        isDrawerOpen={isDrawerOpen}
+        setIsDrawerOpen={setIsDrawerOpen}
+        conversations={conversationsWithMenuItems()}
+        drawerContent={<div>Drawer content</div>}
+      />
+
+      <ChatbotModal displayMode={displayMode} isOpen={isModalOpen} onClose={handleModalClose}>
+        <ModalHeader title="Rename Conversation" />
+        <ModalBody>
+          <Form>
+            <FormGroup label="Conversation Name" fieldId="conversation-name" isRequired>
+              <TextInput
+                isRequired
+                ref={textInputRef}
+                value={editingText}
+                onChange={(_, value) => setEditingText(value)}
+                onKeyDown={handleTextInputKeyDown}
+                id="conversation-name"
+              />
+            </FormGroup>
+          </Form>
+        </ModalBody>
+        <ModalFooter>
+          <Button key="save" variant="primary" onClick={handleModalSave}>
+            Save
+          </Button>
+          <Button key="cancel" variant="link" onClick={handleModalCancel}>
+            Cancel
+          </Button>
+        </ModalFooter>
+      </ChatbotModal>
+    </>
+  );
+};

package/patternfly-docs/content/extensions/chatbot/examples/UI/UI.md

@@ -86,7 +86,7 @@ import userAvatar from '../Messages/user_avatar.svg';
 import patternflyAvatar from '../Messages/patternfly_avatar.jpg';
 import termsAndConditionsHeader from './PF-TermsAndConditionsHeader.svg';
 import { CloseIcon, SearchIcon, OutlinedCommentsIcon } from '@patternfly/react-icons';
-import { FunctionComponent, FormEvent, useState, useRef, MouseEvent, isValidElement, cloneElement, Children, ReactNode, Ref, MouseEvent as ReactMouseEvent, CSSProperties} from 'react';
+import { FunctionComponent, FormEvent, useState, useRef, MouseEvent, isValidElement, cloneElement, Children, ReactNode, Ref, MouseEvent as ReactMouseEvent, CSSProperties, useEffect} from 'react';
 
 ## Structure
 
@@ -374,6 +374,19 @@ To help users track important conversations, add a "pin" option to the conversat
 
 ```
 
+### Renaming conversations in history drawer
+
+You can allow users to rename a conversation in the history drawer by implementing a modal that opens upon clicking a "Rename" (or similar) action. When doing so, you must ensure the following:
+
+- When the modal opens, focus is placed at the end of the text input.
+- When the modal closes, focus goes back to the action toggle that was previously opened.
+- Changes can be canceled via the **<kbd>Escape</kbd>** key or clicking a "Cancel" button.
+- Changes can be saved via the **<kbd>Enter</kbd>** key or by clicking a "Save" button.
+
+```js file="./ChatbotConversationEditing.tsx"
+
+```
+
 ### Drawer with active conversation
 
 If you're showing a conversation that is already active, you can set the `activeItemId` prop on your `<ChatbotConversationHistoryNav>` to apply an active visual state.

package/src/ChatbotConversationHistoryNav/ChatbotConversationHistoryDropdown.test.tsx

@@ -14,13 +14,13 @@ describe('ChatbotConversationHistoryDropdown', () => {
 
   it('should render the dropdown', () => {
     render(<ChatbotConversationHistoryDropdown menuItems={menuItems} menuClassName="custom-class" />);
-    expect(screen.queryByRole('menuitem', { name: /Conversation options/i })).toBeInTheDocument();
+    expect(screen.queryByRole('button', { name: /Conversation options/i })).toBeInTheDocument();
   });
 
   it('should display the dropdown menuItems', () => {
     render(<ChatbotConversationHistoryDropdown menuItems={menuItems} />);
 
-    const toggle = screen.queryByRole('menuitem', { name: /Conversation options/i })!;
+    const toggle = screen.queryByRole('button', { name: /Conversation options/i })!;
 
     expect(toggle).toBeInTheDocument();
     fireEvent.click(toggle);
@@ -33,7 +33,7 @@ describe('ChatbotConversationHistoryDropdown', () => {
 
   it('should invoke onSelect callback when menuitem is clicked', () => {
     render(<ChatbotConversationHistoryDropdown menuItems={menuItems} onSelect={onSelect} />);
-    const toggle = screen.queryByRole('menuitem', { name: /Conversation options/i })!;
+    const toggle = screen.queryByRole('button', { name: /Conversation options/i })!;
     fireEvent.click(toggle);
     fireEvent.click(screen.getByText('Rename'));
 
@@ -42,7 +42,7 @@ describe('ChatbotConversationHistoryDropdown', () => {
 
   it('should toggle the dropdown when menuitem is clicked', () => {
     render(<ChatbotConversationHistoryDropdown menuItems={menuItems} onSelect={onSelect} />);
-    const toggle = screen.queryByRole('menuitem', { name: /Conversation options/i })!;
+    const toggle = screen.queryByRole('button', { name: /Conversation options/i })!;
     fireEvent.click(toggle);
     fireEvent.click(screen.getByText('Delete'));
 
@@ -53,7 +53,7 @@ describe('ChatbotConversationHistoryDropdown', () => {
 
   it('should close the dropdown when user clicks outside', () => {
     render(<ChatbotConversationHistoryDropdown menuItems={menuItems} onSelect={onSelect} />);
-    const toggle = screen.queryByRole('menuitem', { name: /Conversation options/i })!;
+    const toggle = screen.queryByRole('button', { name: /Conversation options/i })!;
     fireEvent.click(toggle);
 
     expect(screen.queryByText('Delete')).toBeInTheDocument();
@@ -64,7 +64,7 @@ describe('ChatbotConversationHistoryDropdown', () => {
 
   it('should show the tooltip when the user hovers over the toggle button', async () => {
     render(<ChatbotConversationHistoryDropdown menuItems={menuItems} label="Actions dropdown" />);
-    const toggle = screen.queryByRole('menuitem', { name: /Actions dropdown/i })!;
+    const toggle = screen.queryByRole('button', { name: /Actions dropdown/i })!;
 
     fireEvent(
       toggle,

package/src/ChatbotConversationHistoryNav/ChatbotConversationHistoryDropdown.tsx

@@ -44,7 +44,6 @@ export const ChatbotConversationHistoryDropdown: FunctionComponent<ChatbotConver
         ref={toggleRef}
         isExpanded={isOpen}
         onClick={() => setIsOpen(!isOpen)}
-        role="menuitem"
       >
         <EllipsisIcon />
       </MenuToggle>

package/src/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.scss

@@ -6,10 +6,7 @@
     position: absolute;
     border-radius: var(--pf-t--global--border--radius--medium);
   }
-  // Drawer input
-  // ----------------------------------------------------------------------------
-  .pf-chatbot__input {
-  }
+
   // Drawer title
   // ----------------------------------------------------------------------------
   .pf-chatbot__title-container {
@@ -27,50 +24,61 @@
   }
   // Drawer menu
   // ----------------------------------------------------------------------------
-  .pf-v6-c-menu {
-    --pf-v6-c-menu--PaddingBlockStart: 0;
-    --pf-v6-c-menu--BackgroundColor: var(--pf-t--global--background--color--floating--default);
-    overflow: initial;
-    position: relative;
-  }
-  .pf-v6-c-menu__item-main {
-    --pf-v6-c-menu__item-main--ColumnGap: var(--pf-t--global--spacer--md);
+  .pf-chatbot__conversation-list {
+    --pf-v6-c-list--Gap: var(--pf-t--global--spacer--xs);
+
+    margin-block-start: var(--pf-t--global--spacer--md);
+    margin-block-end: var(--pf-t--global--spacer--md);
   }
-  .pf-chatbot__menu-item-header > .pf-v6-c-menu__group-title {
+
+  .pf-chatbot__conversation-list-header {
     color: var(--pf-t--global--text--color--subtle);
     font-weight: var(--pf-t--global--font--weight--body--bold);
     font-size: var(--pf-t--global--icon--size--font--sm);
-    --pf-v6-c-menu__group-title--PaddingInlineStart: var(--pf-t--global--spacer--sm);
-    --pf-v6-c-menu__group-title--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
+    padding-inline-start: var(--pf-t--global--spacer--sm);
+    padding-inline-end: var(--pf-t--global--spacer--sm);
     position: -webkit-sticky;
     position: sticky;
     top: 0;
     background-color: var(--pf-t--global--background--color--floating--default);
     z-index: var(--pf-t--global--z-index--md);
   }
-  .pf-chatbot__menu-item {
-    --pf-v6-c-menu__item--PaddingInlineStart: var(--pf-t--global--spacer--sm);
-    --pf-v6-c-menu__item--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
-    padding-block-start: var(--pf-t--global--spacer--xs);
-    padding-block-end: var(--pf-t--global--spacer--xs);
-    color: var(--pf-t--global--text--color--regular);
-    font-size: var(--pf-t--global--font--size--body--lg);
-    font-weight: var(--pf-t--global--font--weight--body--default);
-    border-radius: var(--pf-t--global--border--radius--small);
-  }
-  // allows focus state to have border radius
-  .pf-v6-c-menu__list-item.pf-chatbot__menu-item {
-    overflow: hidden;
+  .pf-chatbot__conversation-list-item {
+    & > span {
+      display: flex;
+      column-gap: var(--pf-t--global--spacer--sm);
+    }
+
+    & .pf-chatbot__conversation-history-item {
+      --pf-v6-c-button--JustifyContent: flex-start;
+      --pf-v6-c-button--FontSize: var(--pf-t--global--font--size--body--lg);
+      --pf-v6-c-button--m-link--Color: var(--pf-t--global--text--color--regular);
+      --pf-v6-c-button--m-link__icon--Color: var(--pf-t--global--icon--color--regular);
+      --pf-v6-c-button--m-link--hover--Color: var(--pf-t--global--text--color--regular--hover);
+      --pf-v6-c-button--m-link--hover__icon--Color: var(--pf-t--global--icon--color--regular);
+      --pf-v6-c-button--m-link--m-clicked--Color: var(--pf-t--global--text--color--regular--clicked);
+      --pf-v6-c-button--m-link--m-clicked__icon--Color: var(--pf-t--global--icon--color--regular);
+
+      column-gap: var(--pf-t--global--spacer--md);
+      flex-basis: 100%;
+
+      & .pf-v6-c-button__text {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+    }
   }
+
   .pf-chatbot__history-actions {
     transform: rotate(90deg);
   }
 
-  .pf-chatbot__menu-item--active {
+  .pf-chatbot__conversation-list-item--active {
     background-color: var(--pf-t--global--background--color--action--plain--clicked);
   }
 
-  button.pf-chatbot__menu-item--active {
+  button.pf-chatbot__conversation-list-item--active {
     background-color: initial;
   }
 }
@@ -233,8 +241,8 @@
     }
   }
 
-  .pf-chatbot__menu-item {
-    font-size: var(--pf-t--global--font--size--body--md);
+  .pf-chatbot__conversation-history-item {
+    --pf-v6-c-button--FontSize: var(--pf-t--global--font--size--body--md);
   }
 
   .pf-v6-c-drawer__head {

package/src/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.test.tsx

@@ -491,4 +491,90 @@ describe('ChatbotConversationHistoryNav', () => {
     const iconElement = container.querySelector('.pf-chatbot__title-icon');
     expect(iconElement).toBeInTheDocument();
   });
+
+  it('Passes titleProps to Title', () => {
+    render(
+      <ChatbotConversationHistoryNav
+        onDrawerToggle={onDrawerToggle}
+        isDrawerOpen={true}
+        displayMode={ChatbotDisplayMode.fullscreen}
+        setIsDrawerOpen={jest.fn()}
+        conversations={{ Today: initialConversations }}
+        titleProps={{ className: 'test' }}
+      />
+    );
+    expect(screen.getByRole('heading', { name: /Today/i })).toHaveClass('test');
+  });
+
+  it('Overrides Title heading level when titleProps.headingLevel is passed', () => {
+    render(
+      <ChatbotConversationHistoryNav
+        onDrawerToggle={onDrawerToggle}
+        isDrawerOpen={true}
+        displayMode={ChatbotDisplayMode.fullscreen}
+        setIsDrawerOpen={jest.fn()}
+        conversations={{ Today: initialConversations }}
+        titleProps={{ headingLevel: 'h2' }}
+      />
+    );
+    expect(screen.queryByRole('heading', { name: /Today/i, level: 4 })).not.toBeInTheDocument();
+    expect(screen.getByRole('heading', { name: /Today/i, level: 2 })).toBeInTheDocument();
+  });
+
+  it('Passes listProps to List when conversations is an array', () => {
+    render(
+      <ChatbotConversationHistoryNav
+        onDrawerToggle={onDrawerToggle}
+        isDrawerOpen={true}
+        displayMode={ChatbotDisplayMode.fullscreen}
+        setIsDrawerOpen={jest.fn()}
+        conversations={initialConversations}
+        listProps={{ className: 'test' }}
+      />
+    );
+    expect(screen.getByRole('list')).toHaveClass('test');
+  });
+
+  it('Passes listProps to List when conversations is an object', () => {
+    render(
+      <ChatbotConversationHistoryNav
+        onDrawerToggle={onDrawerToggle}
+        isDrawerOpen={true}
+        displayMode={ChatbotDisplayMode.fullscreen}
+        setIsDrawerOpen={jest.fn()}
+        conversations={{ Today: initialConversations }}
+        listProps={{ Today: { className: 'test' } }}
+      />
+    );
+    expect(screen.getByRole('list')).toHaveClass('test');
+  });
+
+  it('Passes listItemProps to ListItem', () => {
+    render(
+      <ChatbotConversationHistoryNav
+        onDrawerToggle={onDrawerToggle}
+        isDrawerOpen={true}
+        displayMode={ChatbotDisplayMode.fullscreen}
+        setIsDrawerOpen={jest.fn()}
+        conversations={[{ id: '1', text: 'ChatBot documentation', listItemProps: { className: 'test' } }]}
+      />
+    );
+    expect(screen.getByRole('listitem')).toHaveClass('test');
+  });
+
+  it('should be able to spread search input props when searchInputProps is passed', () => {
+    render(
+      <ChatbotConversationHistoryNav
+        onDrawerToggle={onDrawerToggle}
+        isDrawerOpen={true}
+        displayMode={ChatbotDisplayMode.fullscreen}
+        setIsDrawerOpen={jest.fn()}
+        conversations={initialConversations}
+        handleTextInputChange={jest.fn()}
+        searchInputProps={{ value: 'I am a sample search' }}
+      />
+    );
+
+    expect(screen.getByRole('dialog', { name: /Chat history I am a sample search/i })).toBeInTheDocument();
+  });
 });