@patternfly/chatbot 6.3.2 → 6.4.0-prerelease.10

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/ChatbotHeaderBasic.tsx

@@ -17,7 +17,8 @@ import {
   ChatbotHeaderActions,
   ChatbotHeaderTitle,
   ChatbotHeaderOptionsDropdown,
-  ChatbotHeaderSelectorDropdown
+  ChatbotHeaderSelectorDropdown,
+  ChatbotHeaderNewChatButton
 } from '@patternfly/chatbot/dist/dynamic/ChatbotHeader';
 import { ChatbotDisplayMode } from '@patternfly/chatbot/dist/dynamic/Chatbot';
 import OutlinedWindowRestoreIcon from '@patternfly/react-icons/dist/esm/icons/outlined-window-restore-icon';
@@ -31,6 +32,7 @@ export const BasicDemo: FunctionComponent = () => {
   const [selectedModel, setSelectedModel] = useState('Granite Code 7B');
   const [showAll, setShowAll] = useState<boolean>(true);
   const [showMenu, setShowMenu] = useState<boolean>(true);
+  const [showNewChatButton, setShowNewChatButton] = useState<boolean>(true);
   const [showLogo, setShowLogo] = useState<boolean>(false);
   const [showCenteredLogo, setShowCenteredLogo] = useState<boolean>(true);
   const [showSelectorDropdown, setShowSelectorDropdown] = useState<boolean>(true);
@@ -58,9 +60,10 @@ export const BasicDemo: FunctionComponent = () => {
     <Stack hasGutter>
       <FormGroup role="radiogroup" isInline fieldId="header-variant-form-radio-group" label="Variant">
         <Checkbox
-          isChecked={showMenu && showCenteredLogo && showSelectorDropdown && showOptionsDropdown}
+          isChecked={showMenu && showNewChatButton && showCenteredLogo && showSelectorDropdown && showOptionsDropdown}
           onChange={() => {
             setShowMenu(true);
+            setShowNewChatButton(true);
             setShowCenteredLogo(true);
             setShowSelectorDropdown(true);
             setShowOptionsDropdown(true);
@@ -80,6 +83,16 @@ export const BasicDemo: FunctionComponent = () => {
           label="With menu"
           id="menu"
         />
+        <Checkbox
+          isChecked={showNewChatButton}
+          onChange={() => {
+            setShowNewChatButton(!showNewChatButton);
+            showAll && setShowAll(!showAll);
+          }}
+          name="basic-inline-radio"
+          label="With new chat button"
+          id="new-chat-button"
+        />
         <Checkbox
           isChecked={showLogo}
           onChange={() => {
@@ -124,9 +137,10 @@ export const BasicDemo: FunctionComponent = () => {
       </FormGroup>
 
       <ChatbotHeader>
-        {(showMenu || showLogo || showCenteredLogo) && (
+        {(showMenu || showNewChatButton || showLogo || showCenteredLogo) && (
           <ChatbotHeaderMain>
             {showMenu && <ChatbotHeaderMenu onMenuToggle={() => alert('Menu toggle clicked')} />}
+            {showNewChatButton && <ChatbotHeaderNewChatButton onClick={() => alert('New chat button clicked')} />}
             {(showLogo || showCenteredLogo) && (
               <ChatbotHeaderTitle>{showCenteredLogo ? <Bullseye>{title}</Bullseye> : title}</ChatbotHeaderTitle>
             )}

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

@@ -1,4 +1,4 @@
-import { useState, FunctionComponent } from 'react';
+import { useState, useEffect, useRef, FunctionComponent } from 'react';
 import { ChatbotDisplayMode } from '@patternfly/chatbot/dist/dynamic/Chatbot';
 import ChatbotConversationHistoryNav, {
   Conversation
@@ -62,6 +62,7 @@ const EMPTY_STATE = {
 export const ChatbotHeaderTitleDemo: FunctionComponent = () => {
   const [isOpen, setIsOpen] = useState(true);
   const [isButtonOrderReversed, setIsButtonOrderReversed] = useState(false);
+  const [isNewChatButtonDisabled, setIsNewChatButtonDisabled] = useState(false);
   const [isCompact, setIsCompact] = useState(false);
   const [conversations, setConversations] = useState<Conversation[] | { [key: string]: Conversation[] }>(
     initialConversations
@@ -70,8 +71,28 @@ export const ChatbotHeaderTitleDemo: FunctionComponent = () => {
   const [hasError, setHasError] = useState(false);
   const [isEmpty, setIsEmpty] = useState(false);
   const [hasNoResults, setHasNoResults] = useState(false);
+  const [announcement, setAnnouncement] = useState('');
+  const [debouncedAnnouncement, setDebouncedAnnouncement] = useState('');
+  const announcementTimeoutRef = useRef<NodeJS.Timeout>();
   const displayMode = ChatbotDisplayMode.embedded;
 
+  // Debounce announcement updates to prevent screen reader overload
+  useEffect(() => {
+    if (announcementTimeoutRef.current) {
+      clearTimeout(announcementTimeoutRef.current);
+    }
+
+    announcementTimeoutRef.current = setTimeout(() => {
+      setDebouncedAnnouncement(announcement);
+    }, 500);
+
+    return () => {
+      if (announcementTimeoutRef.current) {
+        clearTimeout(announcementTimeoutRef.current);
+      }
+    };
+  }, [announcement]);
+
   const findMatchingItems = (targetValue: string) => {
     const filteredConversations = Object.entries(initialConversations).reduce((acc, [key, items]) => {
       const filteredItems = items.filter((item) => item.text.toLowerCase().includes(targetValue.toLowerCase()));
@@ -109,6 +130,13 @@ export const ChatbotHeaderTitleDemo: FunctionComponent = () => {
         id="drawer-actions-visible"
         name="drawer-actions-visible"
       ></Checkbox>
+      <Checkbox
+        label="Disable new chat button"
+        isChecked={isNewChatButtonDisabled}
+        onChange={() => setIsNewChatButtonDisabled(!isNewChatButtonDisabled)}
+        id="drawer-actions-disabled"
+        name="drawer-actions-disabled"
+      ></Checkbox>
       <Checkbox
         label="Show loading state"
         isChecked={isLoading}
@@ -152,6 +180,7 @@ export const ChatbotHeaderTitleDemo: FunctionComponent = () => {
         // eslint-disable-next-line no-console
         onSelectActiveItem={(e, selectedItem) => console.log(`Selected history item with id ${selectedItem}`)}
         conversations={conversations}
+        newChatButtonProps={{ isDisabled: isNewChatButtonDisabled }}
         onNewChat={() => {
           setIsOpen(!isOpen);
         }}
@@ -159,12 +188,23 @@ export const ChatbotHeaderTitleDemo: FunctionComponent = () => {
         handleTextInputChange={(value: string) => {
           if (value === '') {
             setConversations(initialConversations);
+            setAnnouncement('');
+            setDebouncedAnnouncement('');
+            setHasNoResults(false);
+          } else {
+            // this is where you would perform search on the items in the drawer
+            // and update the state
+            const newConversations: { [key: string]: Conversation[] } = findMatchingItems(value);
+            const totalCount = Object.values(newConversations).flat().length;
+            const newAnnouncement =
+              totalCount === 1
+                ? `${totalCount} conversation matches "${value}"`
+                : `${totalCount} conversations match "${value}"`;
+            setAnnouncement(newAnnouncement);
+            setConversations(newConversations);
           }
-          // this is where you would perform search on the items in the drawer
-          // and update the state
-          const newConversations: { [key: string]: Conversation[] } = findMatchingItems(value);
-          setConversations(newConversations);
         }}
+        searchInputScreenReaderText={debouncedAnnouncement}
         drawerContent={<div>Drawer content</div>}
         isLoading={isLoading}
         errorState={hasError ? ERROR : undefined}

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

@@ -0,0 +1,206 @@
+// Assisted by: Cursor
+import React, { FunctionComponent, useState } from 'react';
+import { ChatbotDisplayMode } from '@patternfly/chatbot/dist/dynamic/Chatbot';
+import ChatbotConversationHistoryNav, {
+  Conversation
+} from '@patternfly/chatbot/dist/dynamic/ChatbotConversationHistoryNav';
+import { Checkbox, DropdownItem, DropdownList } from '@patternfly/react-core';
+import { ThumbtackIcon } from '@patternfly/react-icons';
+
+// Sample conversations
+const initialConversations: { [key: string]: Conversation[] } = {
+  Today: [
+    {
+      id: '1',
+      text: 'Red Hat products and services',
+      label: 'Conversation options for "Red Hat products and services"'
+    }
+  ],
+  'This month': [
+    {
+      id: '2',
+      text: 'Enterprise Linux installation and setup',
+      label: 'Conversation options for "Enterprise Linux installation and setup"'
+    },
+    {
+      id: '3',
+      text: 'Troubleshoot system crash',
+      label: 'Conversation options for "Troubleshoot system crash"'
+    }
+  ],
+  March: [
+    {
+      id: '4',
+      text: 'Ansible security and updates',
+      label: 'Conversation options for "Ansible security and updates"'
+    },
+    {
+      id: '5',
+      text: 'Red Hat certification',
+      label: 'Conversation options for "Red Hat certification"'
+    },
+    {
+      id: '6',
+      text: 'Lightspeed user documentation',
+      label: 'Conversation options for "Lightspeed user documentation"'
+    }
+  ],
+  February: [
+    {
+      id: '7',
+      text: 'Crashing pod assistance',
+      label: 'Conversation options for "Crashing pod assistance"'
+    },
+    {
+      id: '8',
+      text: 'OpenShift AI pipelines',
+      label: 'Conversation options for "OpenShift AI pipelines"'
+    },
+    {
+      id: '9',
+      text: 'Updating subscription plan',
+      label: 'Conversation options for "Updating subscription plan"'
+    },
+    {
+      id: '10',
+      text: 'Red Hat licensing options',
+      label: 'Conversation options for "Red Hat licensing options"'
+    }
+  ],
+  January: [
+    {
+      id: '11',
+      text: 'RHEL system performance',
+      label: 'Conversation options for "RHEL system performance"'
+    },
+    {
+      id: '12',
+      text: 'Manage user accounts',
+      label: 'Conversation options for "Manage user accounts"'
+    }
+  ]
+};
+
+export const ChatbotHeaderPinDemo: FunctionComponent = () => {
+  const [isDrawerOpen, setIsDrawerOpen] = useState(true);
+  const [isCompact, setIsCompact] = useState(false);
+  const [pinnedConversations, setPinnedConversations] = useState<Set<string>>(new Set());
+  const displayMode = ChatbotDisplayMode.embedded;
+
+  const handlePinToggle = (conversationId: string) => {
+    setPinnedConversations((prev) => {
+      const newPinned = new Set(prev);
+      if (newPinned.has(conversationId)) {
+        newPinned.delete(conversationId);
+      } else {
+        newPinned.add(conversationId);
+      }
+      return newPinned;
+    });
+
+    // Focus the conversation input after pin/unpin action
+    setTimeout(() => {
+      const dropdown = document.getElementById(`pin-demo-${conversationId}-dropdown`);
+      if (dropdown) {
+        dropdown.focus();
+      }
+    }, 100);
+  };
+
+  const createMenuItems = (conversationId: string) => {
+    const isPinned = pinnedConversations.has(conversationId);
+
+    return [
+      <DropdownList key={`${conversationId}-menu`} aria-label="Conversation options">
+        <DropdownItem
+          value={isPinned ? 'Unpin' : 'Pin'}
+          id={isPinned ? 'Unpin' : 'Pin'}
+          onClick={() => handlePinToggle(conversationId)}
+        >
+          {isPinned ? 'Unpin' : 'Pin'}
+        </DropdownItem>
+        <DropdownItem value="Delete" id="Delete">
+          Delete
+        </DropdownItem>
+        <DropdownItem value="Rename" id="Rename">
+          Rename
+        </DropdownItem>
+        <DropdownItem value="Archive" id="Archive">
+          Archive
+        </DropdownItem>
+      </DropdownList>
+    ];
+  };
+
+  // Reorganize conversations to show pinned ones at the top
+  const organizeConversations = () => {
+    const organized: { [key: string]: Conversation[] } = {};
+    const pinnedItems: Conversation[] = [];
+
+    // Collect all pinned conversations first
+    Object.entries(initialConversations).forEach(([_period, conversations]) => {
+      conversations.forEach((conv) => {
+        if (pinnedConversations.has(conv.id)) {
+          pinnedItems.push({
+            ...conv,
+            menuItems: createMenuItems(conv.id),
+            icon: <ThumbtackIcon />,
+            dropdownId: `pin-demo-${conv.id}-dropdown`
+          });
+        }
+      });
+    });
+
+    // Add pinned section if there are pinned items
+    if (pinnedItems.length > 0) {
+      organized.Pinned = pinnedItems;
+    }
+
+    // Add unpinned conversations
+    Object.entries(initialConversations).forEach(([period, conversations]) => {
+      const unpinnedConversations = conversations
+        .filter((conv) => !pinnedConversations.has(conv.id))
+        .map((conv) => ({
+          ...conv,
+          menuItems: createMenuItems(conv.id),
+          dropdownId: `pin-demo-${conv.id}-dropdown`
+        }));
+
+      if (unpinnedConversations.length > 0) {
+        organized[period] = unpinnedConversations;
+      }
+    });
+
+    return organized;
+  };
+
+  const conversations = organizeConversations();
+
+  return (
+    <>
+      <Checkbox
+        label="Display drawer"
+        isChecked={isDrawerOpen}
+        onChange={() => setIsDrawerOpen(!isDrawerOpen)}
+        id="drawer-pin-visible"
+        name="drawer-pin-visible"
+      ></Checkbox>
+      <Checkbox
+        label="Show compact version"
+        isChecked={isCompact}
+        onChange={() => setIsCompact(!isCompact)}
+        id="drawer-pin-compact"
+        name="drawer-pin-compact"
+      ></Checkbox>
+      <ChatbotConversationHistoryNav
+        displayMode={displayMode}
+        onDrawerToggle={() => setIsDrawerOpen(!isDrawerOpen)}
+        isDrawerOpen={isDrawerOpen}
+        setIsDrawerOpen={setIsDrawerOpen}
+        conversations={conversations}
+        drawerContent={<div>Drawer content</div>}
+        isCompact={isCompact}
+      />
+    </>
+  );
+};

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

@@ -61,14 +61,15 @@ ChatbotHeaderMenu,
 ChatbotHeaderActions,
 ChatbotHeaderTitle,
 ChatbotHeaderOptionsDropdown,
-ChatbotHeaderSelectorDropdown
+ChatbotHeaderSelectorDropdown,
+ChatbotHeaderNewChatButton
 } from '@patternfly/chatbot/dist/dynamic/ChatbotHeader';
 import { ChatbotFooter, ChatbotFootnote } from '@patternfly/chatbot/dist/dynamic/ChatbotFooter';
 import { MessageBar } from '@patternfly/chatbot/dist/dynamic/MessageBar';
 import SourceDetailsMenuItem from '@patternfly/chatbot/dist/dynamic/SourceDetailsMenuItem';
 import { ChatbotModal } from '@patternfly/chatbot/dist/dynamic/ChatbotModal';
 import SettingsForm from '@patternfly/chatbot/dist/dynamic/Settings';
-import { BellIcon, CalendarAltIcon, ClipboardIcon, CodeIcon, UploadIcon } from '@patternfly/react-icons';
+import { BellIcon, CalendarAltIcon, ClipboardIcon, CodeIcon, ThumbtackIcon, UploadIcon } from '@patternfly/react-icons';
 import { useDropzone } from 'react-dropzone';
 
 import ChatbotConversationHistoryNav from '@patternfly/chatbot/dist/dynamic/ChatbotConversationHistoryNav';
@@ -78,13 +79,14 @@ import OutlinedWindowRestoreIcon from '@patternfly/react-icons/dist/esm/icons/ou
 import ExpandIcon from '@patternfly/react-icons/dist/esm/icons/expand-icon';
 import OpenDrawerRightIcon from '@patternfly/react-icons/dist/esm/icons/open-drawer-right-icon';
 import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';
+import PenToSquareIcon from '@patternfly/react-icons/dist/esm/icons/pen-to-square-icon';
 import PFHorizontalLogoColor from './PF-HorizontalLogo-Color.svg';
 import PFHorizontalLogoReverse from './PF-HorizontalLogo-Reverse.svg';
 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
 
@@ -184,9 +186,10 @@ The ChatBot header is persistent, and contains the title for the ChatBot window,
 
 The `<ChatbotHeader>` has 2 sections:
 
-- `<ChatbotHeaderMain>` contains the title and an optional menu toggle:
+- `<ChatbotHeaderMain>` contains the title and an optional menu toggle or new chat button:
   - `<ChatbotHeaderTitle>` handles the layout and display of a title or image at different responsive sizes.
   - `<ChatbotHeaderMenu>` (optional) is placed on the left side of the header and used to toggle a chat history menu.
+  - `<ChatbotHeaderNewChatButton>` (optional) is placed on the left side of the header and used to initiate a new chat.
 - `<ChatbotHeaderActions>` contains any additional controls:
   - The `<ChatbotHeaderSelectorDropdown>` component is a standard PatternFly dropdown that matches the ChatBot styles.
   - The `<ChatbotHeaderOptionsDropdown>` component is a dropdown with a menu toggle that is intended to be used to update ChatBot settings (like the display mode).
@@ -197,6 +200,7 @@ Your `<ChatbotHeader>` code structure should look like this:
 <ChatbotHeader>
   <ChatbotHeaderMain>
     <ChatbotHeaderMenu ... />
+    <ChatbotHeaderNewChatButton ... />
     <ChatbotHeaderTitle ... />
   </ChatbotHeaderMain>
   <ChatbotHeaderActions>
@@ -221,6 +225,7 @@ There are a variety of options and customizations you can make to the header, to
 In this example, select the respective checkbox to toggle these features:
 
 - **Menu:** Users can select the menu toggle to open a menu of additional options or actions.
+- **New chat button:** Used to start a new chat session. The header button can be used in addition to or in place of a new chat button within the [conversation history drawer](/patternfly-ai/chatbot/ui/#drawer-with-search-and-new-chat-button).
 - **Left-aligned logo**
 - **Centered logo**
 - **Selector dropdown:** Users can choose from preselected options in a dropdown menu. For example, they can toggle between AI models.
@@ -361,6 +366,27 @@ Actions can be added to conversations with `menuItems`. Optionally, you can also
 
 ```
 
+### Pinning conversations
+
+To help users track important conversations, add a "pin" option to the conversation action menus. This action moves a conversation to a dedicated "pinned" section at the top of the history drawer for quick access. Pinned items should contain an "unpin" option, so that users can remove pinned conversations as needed.
+
+```js file="./ChatbotHeaderDrawerWithPin.tsx"
+
+```
+
+### 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.