@patternfly/chatbot 6.4.0-prerelease.2 → 6.4.0-prerelease.20

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
@@ -71,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()));
@@ -168,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

@@ -97,6 +97,14 @@ export const ChatbotHeaderPinDemo: FunctionComponent = () => {
       }
       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) => {
@@ -136,7 +144,8 @@ export const ChatbotHeaderPinDemo: FunctionComponent = () => {
           pinnedItems.push({
             ...conv,
             menuItems: createMenuItems(conv.id),
-            icon: <ThumbtackIcon />
+            icon: <ThumbtackIcon />,
+            dropdownId: `pin-demo-${conv.id}-dropdown`
           });
         }
       });
@@ -153,7 +162,8 @@ export const ChatbotHeaderPinDemo: FunctionComponent = () => {
         .filter((conv) => !pinnedConversations.has(conv.id))
         .map((conv) => ({
           ...conv,
-          menuItems: createMenuItems(conv.id)
+          menuItems: createMenuItems(conv.id),
+          dropdownId: `pin-demo-${conv.id}-dropdown`
         }));
 
       if (unpinnedConversations.length > 0) {

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

@@ -61,7 +61,8 @@ 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';
@@ -78,13 +79,15 @@ 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';
+import FilePreview from '@patternfly/chatbot/dist/dynamic/FilePreview';
 
 ## Structure
 
@@ -184,9 +187,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 +201,7 @@ Your `<ChatbotHeader>` code structure should look like this:
 <ChatbotHeader>
   <ChatbotHeaderMain>
     <ChatbotHeaderMenu ... />
+    <ChatbotHeaderNewChatButton ... />
     <ChatbotHeaderTitle ... />
   </ChatbotHeaderMain>
   <ChatbotHeaderActions>
@@ -221,6 +226,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.
@@ -369,6 +375,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/patternfly-docs/content/extensions/chatbot/examples/demos/Chatbot.md

@@ -45,7 +45,7 @@ ChatbotHeaderTitle,
 ChatbotHeaderActions,
 ChatbotHeaderSelectorDropdown,
 ChatbotHeaderOptionsDropdown,
-ChatbotHeaderCloseButton
+ChatbotHeaderCloseButton,
 } from '@patternfly/chatbot/dist/dynamic/ChatbotHeader';
 
 import ExpandIcon from '@patternfly/react-icons/dist/esm/icons/expand-icon';

package/patternfly-docs/patternfly-docs.config.js

@@ -2,7 +2,7 @@
 module.exports = {
   sideNavItems: [{ section: 'PatternFly-AI' }],
   topNavItems: [],
-  hasDarkThemeSwitcher: true,
+  hasThemeSwitcher: true,
   hasRTLSwitcher: true,
   port: 8006
 };

package/src/Chatbot/Chatbot.scss

@@ -16,10 +16,17 @@
   z-index: var(--pf-t--global--z-index--md);
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-
-  // Hide chatbot
+  transition:
+    opacity 0.3s ease-out,
+    transform 0.3s ease-out;
   &--hidden {
     pointer-events: none;
+    opacity: 0;
+    transform: translateY(16px);
+  }
+  &--visible {
+    opacity: 1;
+    transform: translateY(0);
   }
 
   // 32 rem is the width of the overlay chatbot plus the insets

package/src/Chatbot/Chatbot.tsx

@@ -4,7 +4,6 @@
 import type { Ref, FunctionComponent } from 'react';
 
 import { forwardRef } from 'react';
-import { motion } from 'framer-motion';
 
 export interface ChatbotProps {
   /** Content to be displayed in the chatbot */
@@ -40,36 +39,24 @@ const ChatbotBase: FunctionComponent<ChatbotProps> = ({
   ariaLabel,
   isCompact,
   ...props
-}: ChatbotProps) => {
-  // Configure animations
-  const motionChatbot = {
-    visible: { opacity: 1, y: 0 },
-    hidden: { opacity: 0, y: '16px' }
-  };
-
-  return (
-    <motion.div
-      className={`pf-chatbot pf-chatbot--${displayMode} ${!isVisible ? 'pf-chatbot--hidden' : ''}  ${isCompact ? 'pf-m-compact' : ''} ${className ?? ''}`}
-      variants={motionChatbot}
-      initial="hidden"
-      animate={isVisible ? 'visible' : 'hidden'}
-      {...props}
-    >
-      {/* Ref is intended for use with skip to chatbot links, etc. */}
-      {/* Motion.div does not accept refs */}
-      {isVisible ? (
-        <section
-          aria-label={ariaLabel ?? 'Chatbot'}
-          className={`pf-chatbot-container pf-chatbot-container--${displayMode} ${!isVisible ? 'pf-chatbot-container--hidden' : ''}`}
-          tabIndex={-1}
-          ref={innerRef}
-        >
-          {children}
-        </section>
-      ) : undefined}
-    </motion.div>
-  );
-};
+}: ChatbotProps) => (
+  <div
+    className={`pf-chatbot pf-chatbot--${displayMode} ${!isVisible ? 'pf-chatbot--hidden' : 'pf-chatbot--visible'}  ${isCompact ? 'pf-m-compact' : ''} ${className ?? ''}`}
+    {...props}
+  >
+    {/* Ref is intended for use with skip to chatbot links, etc. */}
+    {isVisible ? (
+      <section
+        aria-label={ariaLabel ?? 'Chatbot'}
+        className={`pf-chatbot-container pf-chatbot-container--${displayMode} ${!isVisible ? 'pf-chatbot-container--hidden' : ''}`}
+        tabIndex={-1}
+        ref={innerRef}
+      >
+        {children}
+      </section>
+    ) : undefined}
+  </div>
+);
 
 const Chatbot = forwardRef((props: ChatbotProps, ref: Ref<HTMLDivElement>) => (
   <ChatbotBase innerRef={ref} {...props} />

package/src/ChatbotConversationHistoryNav/ChatbotConversationHistoryDropdown.tsx

@@ -19,13 +19,16 @@ export interface ChatbotConversationHistoryDropdownProps extends Omit<DropdownPr
   label?: string;
   /** Callback for when user selects item. */
   onSelect?: (event?: React.MouseEvent, value?: string | number) => void;
+  /** Id applied to dropdown menu toggle */
+  id?: string;
 }
 
 export const ChatbotConversationHistoryDropdown: FunctionComponent<ChatbotConversationHistoryDropdownProps> = ({
   menuItems,
   menuClassName,
   onSelect,
-  label
+  label,
+  id
 }: ChatbotConversationHistoryDropdownProps) => {
   const [isOpen, setIsOpen] = useState(false);
 
@@ -44,6 +47,7 @@ export const ChatbotConversationHistoryDropdown: FunctionComponent<ChatbotConver
         ref={toggleRef}
         isExpanded={isOpen}
         onClick={() => setIsOpen(!isOpen)}
+        id={id}
         role="menuitem"
       >
         <EllipsisIcon />

package/src/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.scss

@@ -2,28 +2,43 @@
 // Chatbot Header - Menu
 // ============================================================================
 .pf-chatbot__history {
+  // hide from view but not assistive technologies
+  // https://css-tricks.com/inclusively-hidden/
+  .pf-chatbot__filter-announcement {
+    clip: rect(0 0 0 0);
+    clip-path: inset(50%);
+    height: 1px;
+    overflow: hidden;
+    position: absolute;
+    white-space: nowrap;
+    width: 1px;
+  }
+
   .pf-chatbot__drawer-backdrop {
     position: absolute;
     border-radius: var(--pf-t--global--border--radius--medium);
   }
-  // Drawer input
-  // ----------------------------------------------------------------------------
-  .pf-chatbot__input {
-  }
+
   // Drawer title
   // ----------------------------------------------------------------------------
-  .pf-chatbot__title-container {
+  .pf-chatbot__heading-container {
     padding-inline-start: var(--pf-t--global--spacer--lg);
     padding-inline-end: var(--pf-t--global--spacer--lg);
     display: flex;
     flex-direction: column;
     row-gap: var(--pf-t--global--spacer--sm);
   }
-  // Drawer title icon
-  // ----------------------------------------------------------------------------
-  .pf-chatbot__title-icon {
-    padding-inline-end: var(--pf-t--global--spacer--md);
-    padding-inline-start: var(--pf-t--global--spacer--sm);
+  .pf-chatbot__title {
+    font-size: var(--pf-v6-c-title--m-h3--FontSize);
+    font-weight: var(--pf-v6-c-title--m-h3--FontWeight);
+    line-height: var(--pf-v6-c-title--m-h3--LineHeight);
+  }
+  .pf-chatbot__title-container {
+    display: flex;
+    flex-direction: row;
+    align-items: baseline;
+    justify-content: flex-start;
+    gap: var(--pf-t--global--spacer--gap--text-to-element--default);
   }
   // Drawer menu
   // ----------------------------------------------------------------------------
@@ -36,6 +51,7 @@
   .pf-v6-c-menu__item-main {
     --pf-v6-c-menu__item-main--ColumnGap: var(--pf-t--global--spacer--md);
   }
+
   .pf-chatbot__menu-item-header > .pf-v6-c-menu__group-title {
     color: var(--pf-t--global--text--color--subtle);
     font-weight: var(--pf-t--global--font--weight--body--bold);
@@ -48,6 +64,7 @@
     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);
@@ -62,6 +79,7 @@
   .pf-v6-c-menu__list-item.pf-chatbot__menu-item {
     overflow: hidden;
   }
+
   .pf-chatbot__history-actions {
     transform: rotate(90deg);
   }