@patternfly/chatbot 6.3.0-prerelease.9 → 6.4.0-prerelease.2

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

@@ -1,5 +1,4 @@
-import React 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 {
@@ -10,17 +9,40 @@ import {
   SelectList,
   SelectOption
 } from '@patternfly/react-core';
+import { rehypeCodeBlockToggle } from '@patternfly/chatbot/dist/esm/Message/Plugins/rehypeCodeBlockToggle';
+
+export const UserMessageExample: FunctionComponent = () => {
+  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);
+    }
 
-export const UserMessageExample: React.FunctionComponent = () => {
-  const [variant, setVariant] = React.useState<string>('Code');
-  const [isEditable, setIsEditable] = React.useState<boolean>(true);
-  const [isOpen, setIsOpen] = React.useState<boolean>(false);
-  const [selected, setSelected] = React.useState<string>('Message content type');
+    // 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) {
       case 'Code':
+      case 'Expandable code':
         return code;
       case 'Inline code':
         return inlineCode;
@@ -64,8 +86,6 @@ spec:
 Here is some JavaScript code:
 
 ~~~js
-import React from 'react';
-
 const MessageLoading = () => (
   <div className="pf-chatbot__message-loading">
     <span className="pf-chatbot__message-loading-dots">
@@ -154,28 +174,38 @@ _Italic text, formatted with single underscores_
     title: 'Could not load chat',
     children: 'Wait a few minutes and check your network settings. If the issue persists: ',
     actionLinks: (
-      <React.Fragment>
+      <Fragment>
         <AlertActionLink component="a" href="#">
           Start a new chat
         </AlertActionLink>
         <AlertActionLink component="a" href="#">
           Contact support
         </AlertActionLink>
-      </React.Fragment>
+      </Fragment>
     )
   };
 
-  const onSelect = (_event: React.MouseEvent<Element, MouseEvent> | undefined, value: string | number | undefined) => {
+  const onSelect = (_event: MouseEvent<Element, MouseEvent> | undefined, value: string | number | undefined) => {
     setVariant(value);
     setSelected(value as string);
     setIsOpen(false);
+    if (value === 'Expandable code') {
+      setIsExpanded(true);
+    } else {
+      setIsExpanded(false);
+    }
   };
 
   const onToggleClick = () => {
     setIsOpen(!isOpen);
   };
 
-  const toggle = (toggleRef: React.Ref<MenuToggleElement>) => (
+  const onUpdateOrCancelEdit = () => {
+    prevIsEditable.current = isEditable;
+    setIsEditable(false);
+  };
+
+  const toggle = (toggleRef: Ref<MenuToggleElement>) => (
     <MenuToggle
       className="pf-v6-u-mb-md"
       ref={toggleRef}
@@ -184,7 +214,7 @@ _Italic text, formatted with single underscores_
       style={
         {
           width: '200px'
-        } as React.CSSProperties
+        } as CSSProperties
       }
     >
       {selected}
@@ -207,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}
@@ -218,6 +259,7 @@ _Italic text, formatted with single underscores_
       >
         <SelectList>
           <SelectOption value="Code">Code</SelectOption>
+          <SelectOption value="Expandable code">Expandable code</SelectOption>
           <SelectOption value="Inline code">Inline code</SelectOption>
           <SelectOption value="Heading">Heading</SelectOption>
           <SelectOption value="Block quotes">Block quotes</SelectOption>
@@ -229,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
@@ -240,10 +281,12 @@ _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
+        // Because they are in the same message, this requires a custom plugin to parse the syntax tree
+        additionalRehypePlugins={[rehypeCodeBlockToggle]}
       />
     </>
   );

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import { Fragment, FunctionComponent } from 'react';
 
 import Message from '@patternfly/chatbot/dist/dynamic/Message';
 import userAvatar from './user_avatar.svg';
@@ -8,12 +8,12 @@ const UserActionEndContent = () => {
   // eslint-disable-next-line no-console
   const onClick = () => console.log('custom button click');
   return (
-    <React.Fragment>
+    <Fragment>
       <Button variant="secondary" ouiaId="Secondary" onClick={onClick}>
         End content button
       </Button>
       <Alert variant="danger" title="Danger alert title" ouiaId="DangerAlert" />
-    </React.Fragment>
+    </Fragment>
   );
 };
 
@@ -36,7 +36,7 @@ const BeforeMainContent = () => (
   </div>
 );
 
-export const UserMessageWithExtraContent: React.FunctionComponent = () => (
+export const UserMessageWithExtraContent: FunctionComponent = () => (
   <>
     <Message
       avatar={userAvatar}

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

@@ -1,14 +1,51 @@
-import React from 'react';
+import { FunctionComponent, useState, Ref, MouseEvent as ReactMouseEvent, CSSProperties } from 'react';
 
 import Chatbot, { ChatbotDisplayMode } from '@patternfly/chatbot/dist/dynamic/Chatbot';
-import { Radio } from '@patternfly/react-core/dist/dynamic/Radio';
 import { Checkbox } from '@patternfly/react-core/dist/dynamic/Checkbox';
-import { FormGroup } from '@patternfly/react-core/dist/dynamic/FormGroup';
 import { Stack } from '@patternfly/react-core/dist/dynamic/Stack';
+import { MenuToggle, MenuToggleElement, Select, SelectList, SelectOption } from '@patternfly/react-core';
 
-export const ChatbotContainerDemo: React.FunctionComponent = () => {
-  const [displayMode, setDisplayMode] = React.useState(ChatbotDisplayMode.default);
-  const [isVisible, setIsVisible] = React.useState(true);
+export const ChatbotContainerDemo: FunctionComponent = () => {
+  const [displayMode, setDisplayMode] = useState(ChatbotDisplayMode.default);
+  const [isVisible, setIsVisible] = useState(true);
+  const [isOpen, setIsOpen] = useState(false);
+  const [selected, setSelected] = useState<string>('Select display mode');
+
+  const onSelect = (_event: ReactMouseEvent<Element, MouseEvent> | undefined, value: string | number | undefined) => {
+    setSelected(value as string);
+    setIsOpen(false);
+    if (value === 'Overlay / default') {
+      setDisplayMode(ChatbotDisplayMode.default);
+    }
+    if (value === 'Docked') {
+      setDisplayMode(ChatbotDisplayMode.docked);
+    }
+    if (value === 'Fullscreen') {
+      setDisplayMode(ChatbotDisplayMode.fullscreen);
+    }
+    if (value === 'Embedded') {
+      setDisplayMode(ChatbotDisplayMode.embedded);
+    }
+  };
+
+  const onToggleClick = () => {
+    setIsOpen(!isOpen);
+  };
+
+  const toggle = (toggleRef: Ref<MenuToggleElement>) => (
+    <MenuToggle
+      ref={toggleRef}
+      onClick={onToggleClick}
+      isExpanded={isOpen}
+      style={
+        {
+          width: '200px'
+        } as CSSProperties
+      }
+    >
+      {selected}
+    </MenuToggle>
+  );
 
   return (
     <>
@@ -21,36 +58,22 @@ export const ChatbotContainerDemo: React.FunctionComponent = () => {
         }}
       >
         <Stack hasGutter>
-          <FormGroup role="radiogroup" isInline fieldId="displayModeRadios" label="Display mode">
-            <Radio
-              isChecked={displayMode === ChatbotDisplayMode.default}
-              onChange={() => setDisplayMode(ChatbotDisplayMode.default)}
-              name="basic-inline-radio"
-              label="Overlay / default"
-              id="default"
-            />
-            <Radio
-              isChecked={displayMode === ChatbotDisplayMode.docked}
-              onChange={() => setDisplayMode(ChatbotDisplayMode.docked)}
-              name="basic-inline-radio"
-              label="Docked"
-              id="docked"
-            />
-            <Radio
-              isChecked={displayMode === ChatbotDisplayMode.fullscreen}
-              onChange={() => setDisplayMode(ChatbotDisplayMode.fullscreen)}
-              name="basic-inline-radio"
-              label="Fullscreen"
-              id="fullscreen"
-            />
-            <Radio
-              isChecked={displayMode === ChatbotDisplayMode.embedded}
-              onChange={() => setDisplayMode(ChatbotDisplayMode.embedded)}
-              name="basic-inline-radio"
-              label="Embedded"
-              id="embedded"
-            />
-          </FormGroup>
+          <Select
+            id="single-select"
+            isOpen={isOpen}
+            selected={selected}
+            onSelect={onSelect}
+            onOpenChange={(isOpen) => setIsOpen(isOpen)}
+            toggle={toggle}
+            shouldFocusToggleOnSelect
+          >
+            <SelectList>
+              <SelectOption value="Overlay / default">Overlay / default</SelectOption>
+              <SelectOption value="Docked">Docked</SelectOption>
+              <SelectOption value="Fullscreen">Fullscreen</SelectOption>
+              <SelectOption value="Embedded">Embedded</SelectOption>
+            </SelectList>
+          </Select>
           <Checkbox
             label="Display chatbot container"
             isChecked={isVisible}

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

@@ -1,8 +1,8 @@
-import React from 'react';
+import { FunctionComponent } from 'react';
 import { ChatbotFooter, ChatbotFootnote } from '@patternfly/chatbot/dist/dynamic/ChatbotFooter';
 import { MessageBar } from '@patternfly/chatbot/dist/dynamic/MessageBar';
 
-export const ChatbotFooterExample: React.FunctionComponent = () => {
+export const ChatbotFooterExample: FunctionComponent = () => {
   const handleSend = (message) => alert(message);
 
   return (

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

@@ -1,7 +1,7 @@
-import React from 'react';
+import { FunctionComponent } from 'react';
 import { ChatbotFootnote } from '@patternfly/chatbot/dist/dynamic/ChatbotFooter';
 
-export const FootnoteDemo: React.FunctionComponent = () => (
+export const FootnoteDemo: FunctionComponent = () => (
   <ChatbotFootnote
     label="ChatBot uses AI. Check for mistakes."
     popover={{

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import { FunctionComponent, MouseEvent, useState } from 'react';
 import {
   Brand,
   Bullseye,
@@ -27,19 +27,16 @@ import OpenDrawerRightIcon from '@patternfly/react-icons/dist/esm/icons/open-dra
 import PFHorizontalLogoColor from './PF-HorizontalLogo-Color.svg';
 import PFHorizontalLogoReverse from './PF-HorizontalLogo-Reverse.svg';
 
-export const BasicDemo: React.FunctionComponent = () => {
-  const [selectedModel, setSelectedModel] = React.useState('Granite Code 7B');
-  const [showAll, setShowAll] = React.useState<boolean>(true);
-  const [showMenu, setShowMenu] = React.useState<boolean>(true);
-  const [showLogo, setShowLogo] = React.useState<boolean>(false);
-  const [showCenteredLogo, setShowCenteredLogo] = React.useState<boolean>(true);
-  const [showSelectorDropdown, setShowSelectorDropdown] = React.useState<boolean>(true);
-  const [showOptionsDropdown, setShowOptionsDropdown] = React.useState<boolean>(true);
+export const BasicDemo: FunctionComponent = () => {
+  const [selectedModel, setSelectedModel] = useState('Granite Code 7B');
+  const [showAll, setShowAll] = useState<boolean>(true);
+  const [showMenu, setShowMenu] = useState<boolean>(true);
+  const [showLogo, setShowLogo] = useState<boolean>(false);
+  const [showCenteredLogo, setShowCenteredLogo] = useState<boolean>(true);
+  const [showSelectorDropdown, setShowSelectorDropdown] = useState<boolean>(true);
+  const [showOptionsDropdown, setShowOptionsDropdown] = useState<boolean>(true);
 
-  const onSelectModel = (
-    _event: React.MouseEvent<Element, MouseEvent> | undefined,
-    value: string | number | undefined
-  ) => {
+  const onSelectModel = (_event: MouseEvent<Element, MouseEvent> | undefined, value: string | number | undefined) => {
     setSelectedModel(value as string);
   };
 

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import { useState, FunctionComponent } from 'react';
 import { ChatbotDisplayMode } from '@patternfly/chatbot/dist/dynamic/Chatbot';
 import ChatbotConversationHistoryNav, {
   Conversation
@@ -59,17 +59,18 @@ const EMPTY_STATE = {
   icon: OutlinedCommentsIcon
 };
 
-export const ChatbotHeaderTitleDemo: React.FunctionComponent = () => {
-  const [isOpen, setIsOpen] = React.useState(true);
-  const [isButtonOrderReversed, setIsButtonOrderReversed] = React.useState(false);
-  const [isCompact, setIsCompact] = React.useState(false);
-  const [conversations, setConversations] = React.useState<Conversation[] | { [key: string]: Conversation[] }>(
+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
   );
-  const [isLoading, setIsLoading] = React.useState(false);
-  const [hasError, setHasError] = React.useState(false);
-  const [isEmpty, setIsEmpty] = React.useState(false);
-  const [hasNoResults, setHasNoResults] = React.useState(false);
+  const [isLoading, setIsLoading] = useState(false);
+  const [hasError, setHasError] = useState(false);
+  const [isEmpty, setIsEmpty] = useState(false);
+  const [hasNoResults, setHasNoResults] = useState(false);
   const displayMode = ChatbotDisplayMode.embedded;
 
   const findMatchingItems = (targetValue: string) => {
@@ -109,6 +110,13 @@ export const ChatbotHeaderTitleDemo: React.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: React.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/ChatbotHeaderDrawerNavigation.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import { useState, FunctionComponent } from 'react';
 import { ChatbotDisplayMode } from '@patternfly/chatbot/dist/dynamic/Chatbot';
 import ChatbotConversationHistoryNav, {
   Conversation
@@ -24,10 +24,10 @@ const initialConversations: Conversation[] = [
   { id: '12', text: 'Manage user accounts', noIcon: true }
 ];
 
-export const ChatbotHeaderTitleDemo: React.FunctionComponent = () => {
-  const [isOpen, setIsOpen] = React.useState(true);
-  const [isButtonOrderReversed, setIsButtonOrderReversed] = React.useState(false);
-  const [conversations, setConversations] = React.useState<Conversation[] | { [key: string]: Conversation[] }>(
+export const ChatbotHeaderTitleDemo: FunctionComponent = () => {
+  const [isOpen, setIsOpen] = useState(true);
+  const [isButtonOrderReversed, setIsButtonOrderReversed] = useState(false);
+  const [conversations, setConversations] = useState<Conversation[] | { [key: string]: Conversation[] }>(
     initialConversations
   );
   const displayMode = ChatbotDisplayMode.embedded;

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import { useState, FunctionComponent } from 'react';
 import { ChatbotDisplayMode } from '@patternfly/chatbot/dist/dynamic/Chatbot';
 import ChatbotConversationHistoryNav, {
   Conversation
@@ -38,12 +38,12 @@ const NO_RESULTS = {
   icon: SearchIcon
 };
 
-export const ChatbotHeaderDrawerResizableDemo: React.FunctionComponent = () => {
-  const [isOpen, setIsOpen] = React.useState(true);
-  const [conversations, setConversations] = React.useState<Conversation[] | { [key: string]: Conversation[] }>(
+export const ChatbotHeaderDrawerResizableDemo: FunctionComponent = () => {
+  const [isOpen, setIsOpen] = useState(true);
+  const [conversations, setConversations] = useState<Conversation[] | { [key: string]: Conversation[] }>(
     initialConversations
   );
-  const [showNoResults, setShowNoResults] = React.useState(false);
+  const [showNoResults, setShowNoResults] = useState(false);
   const displayMode = ChatbotDisplayMode.embedded;
 
   const findMatchingItems = (targetValue: string) => {

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import { FunctionComponent, useState } from 'react';
 import { ChatbotDisplayMode } from '@patternfly/chatbot/dist/dynamic/Chatbot';
 import ChatbotConversationHistoryNav, {
   Conversation
@@ -7,8 +7,8 @@ import { Checkbox, DropdownItem, DropdownList } from '@patternfly/react-core';
 
 const menuItems = [
   <DropdownList key="list-1">
-    <DropdownItem value="Share" id="Share">
-      Share
+    <DropdownItem value="Download" id="Download">
+      Download
     </DropdownItem>
     <DropdownItem value="Rename" id="Rename">
       Rename
@@ -49,9 +49,9 @@ const conversations: { [key: string]: Conversation[] } = {
   ]
 };
 
-export const ChatbotHeaderTitleDemo: React.FunctionComponent = () => {
-  const [isDrawerOpen, setIsDrawerOpen] = React.useState(true);
-  const [isCompact, setIsCompact] = React.useState(false);
+export const ChatbotHeaderTitleDemo: FunctionComponent = () => {
+  const [isDrawerOpen, setIsDrawerOpen] = useState(true);
+  const [isCompact, setIsCompact] = useState(false);
   const displayMode = ChatbotDisplayMode.embedded;
 
   return (