@patternfly/chatbot 6.3.0 → 6.4.0-prerelease.3

package/patternfly-docs/content/extensions/chatbot/examples/Messages/UserMessage.tsx

@@ -1,4 +1,4 @@
-import { Fragment, useState, CSSProperties, FunctionComponent, MouseEvent } from 'react';
+import { Fragment, useState, useRef, useEffect, CSSProperties, FunctionComponent, MouseEvent, Ref } from 'react';
 import Message from '@patternfly/chatbot/dist/dynamic/Message';
 import userAvatar from './user_avatar.svg';
 import {
@@ -12,12 +12,32 @@ import {
 import { rehypeCodeBlockToggle } from '@patternfly/chatbot/dist/esm/Message/Plugins/rehypeCodeBlockToggle';
 
 export const UserMessageExample: FunctionComponent = () => {
-  const [variant, setVariant] = useState<string>('Code');
-  const [isEditable, setIsEditable] = useState<boolean>(true);
+  const messageInputRef = useRef<HTMLTextAreaElement>(null);
+  const editButtonRef = useRef<HTMLButtonElement>(null);
+  const [variant, setVariant] = useState<string | number | undefined>('Code');
   const [isOpen, setIsOpen] = useState<boolean>(false);
   const [selected, setSelected] = useState<string>('Message content type');
   const [isExpandable, setIsExpanded] = useState(false);
 
+  const [isEditable, setIsEditable] = useState<boolean>(false);
+  const prevIsEditable = useRef<boolean>(false);
+
+  useEffect(() => {
+    if (isEditable && messageInputRef?.current) {
+      messageInputRef.current.focus();
+      const messageLength = messageInputRef.current.value.length;
+      // Mimic the behavior of the textarea when the user clicks on a label to place the cursor at the end of the input value
+      messageInputRef.current.setSelectionRange(messageLength, messageLength);
+    }
+
+    // We only want to re-focus the edit action button if the user has previously clicked on it,
+    // and prevent it from receiving focus on page load
+    if (prevIsEditable.current && !isEditable && editButtonRef?.current) {
+      editButtonRef.current.focus();
+      prevIsEditable.current = false;
+    }
+  }, [isEditable]);
+
   /* eslint-disable indent */
   const renderContent = () => {
     switch (variant) {
@@ -180,6 +200,11 @@ _Italic text, formatted with single underscores_
     setIsOpen(!isOpen);
   };
 
+  const onUpdateOrCancelEdit = () => {
+    prevIsEditable.current = isEditable;
+    setIsEditable(false);
+  };
+
   const toggle = (toggleRef: Ref<MenuToggleElement>) => (
     <MenuToggle
       className="pf-v6-u-mb-md"
@@ -212,6 +237,17 @@ _Italic text, formatted with single underscores_
         avatar={userAvatar}
         avatarProps={{ isBordered: true }}
       />
+      <Message
+        name="User"
+        role="user"
+        isEditable={isEditable}
+        onEditUpdate={onUpdateOrCancelEdit}
+        onEditCancel={onUpdateOrCancelEdit}
+        actions={{ edit: { onClick: () => setIsEditable(true), innerRef: editButtonRef } }}
+        content="This is a user message with an edit action."
+        avatar={userAvatar}
+        inputRef={messageInputRef}
+      />
       <Select
         id="single-select"
         isOpen={isOpen}
@@ -235,7 +271,6 @@ _Italic text, formatted with single underscores_
           <SelectOption value="Table">Table</SelectOption>
           <SelectOption value="Image">Image</SelectOption>
           <SelectOption value="Error">Error</SelectOption>
-          <SelectOption value="Editable">Editable</SelectOption>
         </SelectList>
       </Select>
       <Message
@@ -246,10 +281,7 @@ _Italic text, formatted with single underscores_
         tableProps={
           variant === 'Table' ? { 'aria-label': 'App information and user roles for user messages' } : undefined
         }
-        isEditable={variant === 'Editable' ? isEditable : false}
         error={variant === 'Error' ? error : undefined}
-        onEditUpdate={() => setIsEditable(false)}
-        onEditCancel={() => setIsEditable(false)}
         codeBlockProps={{ isExpandable, expandableSectionProps: { truncateMaxLines: isExpandable ? 1 : undefined } }}
         // In this example, custom plugin will override any custom expandedText or collapsedText attributes provided
         // The purpose of this plugin is to provide unique link names for the code blocks

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

@@ -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
@@ -109,6 +110,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 +160,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);
         }}

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

@@ -0,0 +1,196 @@
+// 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;
+    });
+  };
+
+  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 />
+          });
+        }
+      });
+    });
+
+    // 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)
+        }));
+
+      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,6 +79,7 @@ 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';
@@ -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,14 @@ 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"
+
+```
+
 ### 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/patternfly-docs/content/extensions/chatbot/examples/demos/Chatbot.md

@@ -44,7 +44,8 @@ ChatbotHeaderMenu,
 ChatbotHeaderTitle,
 ChatbotHeaderActions,
 ChatbotHeaderSelectorDropdown,
-ChatbotHeaderOptionsDropdown
+ChatbotHeaderOptionsDropdown,
+ChatbotHeaderCloseButton,
 } from '@patternfly/chatbot/dist/dynamic/ChatbotHeader';
 
 import ExpandIcon from '@patternfly/react-icons/dist/esm/icons/expand-icon';
@@ -59,6 +60,7 @@ import userAvatar from '../Messages/user_avatar.svg';
 import patternflyAvatar from '../Messages/patternfly_avatar.jpg';
 import { getTrackingProviders } from "@patternfly/chatbot/dist/dynamic/tracking";
 import { useEffect,useCallback, useRef, useState, FunctionComponent, MouseEvent } from 'react';
+import saveAs from 'file-saver';
 
 ### Basic ChatBot
 
@@ -129,6 +131,22 @@ This demo displays a ChatBot in a static, inline drawer. This demo includes:
 
 ```
 
+### Display mode switcher
+
+This demo showcases how the ChatBot can be rendered in different display modes to suit various application layouts. It demonstrates how to dynamically change the page structure in response to the user's selection. This demo includes:
+
+1. The ability to switch between overlay, drawer, and fullscreen modes using the [`<ChatbotHeaderOptionsDropdown>`](/patternfly-ai/chatbot/ui#header-options) in the header.
+2. A conditional page layout that renders the ChatBot for each display mode option:
+    - **Overlay:** As a floating window on top of the page content.
+    - **Drawer:** Inside an inline PatternFly `<Drawer>` as a side panel.
+    - **Fullscreen:** As a top-level component that covers the entire screen for an embedded experience.
+3. Logic to show or hide the `<ChatbotToggle>` button, which is only present in the default overlay mode.
+4. A [basic ChatBot](#basic-chatbot) with a header, welcome prompt, and message bar to populate the different layouts.
+
+```js file="./ChatbotDisplayMode.tsx" isFullscreen
+
+```
+
 ### Comparing ChatBots
 
 To let users compare how different ChatBots respond to the same prompt, you can add multiple ChatBots within the same window. The following demo illustrates a comparison view pattern that allows users to toggle between different conversations in a single ChatBot window.
@@ -149,3 +167,17 @@ Your code structure should look like this:
 ```js file="./EmbeddedComparisonChatbot.tsx" isFullscreen
 
 ```
+
+### Chat transcripts
+
+This demo illustrates how you could add downloadable transcripts to your ChatBot, which outline conversation details in a Markdown file. This approach allows users to easily share information from a conversation with others. 
+
+A message transcript includes details from a single chat message. To download a sample message transcript in this demo, click the "Download" action under a bot message.
+
+A conversation transcript includes details from the entirety of a ChatBot conversation. To download a sample conversation transcript in this demo, open the chat history menu and click "Download" in the options menu for the conversation.
+
+In this example, file download is implemented with [file-saver](https://www.npmjs.com/package/file-saver).
+
+```js file="./ChatbotTranscripts.tsx" isFullscreen
+
+```