@patternfly/chatbot 6.8.0-prerelease.4 → 6.8.0-prerelease.6

package/src/Message/QuickStarts/QuickStartTile.tsx

@@ -1,6 +1,4 @@
 import type { FC, ReactNode } from 'react';
-import RocketIcon from '@patternfly/react-icons/dist/js/icons/rocket-icon';
-import OutlinedBookmarkIcon from '@patternfly/react-icons/dist/js/icons/outlined-bookmark-icon';
 import {
   Card,
   CardBody,
@@ -14,11 +12,11 @@ import {
   Label,
   pluralize
 } from '@patternfly/react-core';
-import OutlinedClockIcon from '@patternfly/react-icons/dist/js/icons/outlined-clock-icon';
 import QuickStartTileHeader from './QuickStartTileHeader';
 import QuickStartTileDescription from './QuickStartTileDescription';
 import { QuickStart, QuickstartAction } from './types';
 import FallbackImg from './FallbackImg';
+import { RhUiBookmarkIcon, RhUiClockIcon, RhUiRocketFillIcon } from '@patternfly/react-icons';
 
 export const camelize = (str: string) =>
   str.replace(/(?:^\w|[A-Z]|\b\w|\s+)/g, function (match, index) {
@@ -77,7 +75,12 @@ export const QuickStartTile: FC<QuickStartTileProps> = ({
   } else {
     quickStartIcon = (
       <Icon size="2xl">
-        <FallbackImg src={icon as string} alt="" className="pfext-catalog-item-icon__img" fallback={<RocketIcon />} />
+        <FallbackImg
+          src={icon as string}
+          alt=""
+          className="pfext-catalog-item-icon__img"
+          fallback={<RhUiRocketFillIcon />}
+        />
       </Icon>
     );
   }
@@ -91,7 +94,7 @@ export const QuickStartTile: FC<QuickStartTileProps> = ({
     onClick && onClick();
   };
 
-  const ActionIcon = action?.icon || OutlinedBookmarkIcon;
+  const ActionIcon = action?.icon || RhUiBookmarkIcon;
   const additionalAction = action ? (
     <Button
       aria-label={action['aria-label']}
@@ -125,7 +128,7 @@ export const QuickStartTile: FC<QuickStartTileProps> = ({
           <Flex spaceItems={{ default: 'spaceItemsSm' }}>
             {type && <Label color={type.color}>{type.text}</Label>}
             {durationMinutes && (
-              <Label variant="outline" data-test="duration" icon={<OutlinedClockIcon />}>
+              <Label variant="outline" data-test="duration" icon={<RhUiClockIcon />}>
                 {pluralize(durationMinutes, minuteWord, minuteWordPlural)}
               </Label>
             )}

package/src/MessageBar/AttachButton.tsx

@@ -8,7 +8,7 @@ import { forwardRef } from 'react';
 // Import PatternFly components
 import { Button, ButtonProps, Icon, Tooltip, TooltipProps } from '@patternfly/react-core';
 import { Accept, DropEvent, DropzoneOptions, FileError, FileRejection, useDropzone } from 'react-dropzone';
-import { PaperclipIcon } from '@patternfly/react-icons/dist/esm/icons/paperclip-icon';
+import { RhUiPaperClipIcon } from '@patternfly/react-icons';
 
 export interface AttachButtonProps extends ButtonProps {
   /** Callback for when button is clicked */
@@ -74,7 +74,7 @@ const AttachButtonBase: FunctionComponent<AttachButtonProps> = ({
   onAttachRejected,
   validator,
   dropzoneProps,
-  icon = <PaperclipIcon />,
+  icon = <RhUiPaperClipIcon />,
   ...props
 }: AttachButtonProps) => {
   const { open, getInputProps } = useDropzone({

package/src/MessageBar/MessageBar.test.tsx

@@ -6,7 +6,7 @@ import {
   MenuSearchInputProps,
   MenuSearchProps
 } from '@patternfly/react-core';
-import { BellIcon, CalendarAltIcon, ClipboardIcon, CodeIcon } from '@patternfly/react-icons';
+import { RhUiAttentionBellIcon, RhUiCalendarIcon, RhUiClipboardIcon, RhUiCodeIcon } from '@patternfly/react-icons';
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { createRef } from 'react';
@@ -43,19 +43,19 @@ const ATTACH_MENU_ITEMS = [
   </DropdownList>,
   <DropdownGroup key="group2">
     <DropdownList>
-      <DropdownItem value="Alerts" id="1" icon={<BellIcon />}>
+      <DropdownItem value="Alerts" id="1" icon={<RhUiAttentionBellIcon />}>
         Alerts
       </DropdownItem>
-      <DropdownItem value="Events" id="2" icon={<CalendarAltIcon />}>
+      <DropdownItem value="Events" id="2" icon={<RhUiCalendarIcon />}>
         Events
       </DropdownItem>
-      <DropdownItem value="Logs" id="3" icon={<ClipboardIcon />}>
+      <DropdownItem value="Logs" id="3" icon={<RhUiClipboardIcon />}>
         Logs
       </DropdownItem>
-      <DropdownItem value="YAML - Status" id="4" icon={<CodeIcon />}>
+      <DropdownItem value="YAML - Status" id="4" icon={<RhUiCodeIcon />}>
         YAML - Status
       </DropdownItem>
-      <DropdownItem value="YAML - All contents" id="5" icon={<CodeIcon />}>
+      <DropdownItem value="YAML - All contents" id="5" icon={<RhUiCodeIcon />}>
         YAML - All contents
       </DropdownItem>
     </DropdownList>

package/src/MessageBar/MicrophoneButton.tsx

@@ -2,14 +2,9 @@
 // Chatbot Footer - Message Bar - Microphone
 // ============================================================================
 import type { FunctionComponent } from 'react';
-
 import { useState, useCallback, useEffect } from 'react';
-
-// Import PatternFly components
 import { Button, ButtonProps, Tooltip, TooltipProps, Icon } from '@patternfly/react-core';
-
-// Import FontAwesome icons
-import { MicrophoneIcon } from '@patternfly/react-icons/dist/esm/icons/microphone-icon';
+import { RhUiMicrophoneFillIcon } from '@patternfly/react-icons';
 
 export interface MicrophoneButtonProps extends ButtonProps {
   /** Boolean check if the browser is listening to speech or not */
@@ -112,7 +107,7 @@ export const MicrophoneButton: FunctionComponent<MicrophoneButtonProps> = ({
         onClick={isListening ? stopListening : startListening}
         icon={
           <Icon iconSize={isCompact ? 'lg' : 'xl'} isInline>
-            <MicrophoneIcon />
+            <RhUiMicrophoneFillIcon />
           </Icon>
         }
         size={isCompact ? 'sm' : undefined}

package/src/MessageBox/JumpButton.tsx

@@ -2,12 +2,8 @@
 // Chatbot Main - Messages - Jump to Top
 // ============================================================================
 import type { FunctionComponent } from 'react';
-
-// Import PatternFly components
 import { Button, Tooltip, Icon, TooltipProps, ButtonProps } from '@patternfly/react-core';
-
-import { ArrowUpIcon } from '@patternfly/react-icons/dist/esm/icons/arrow-up-icon';
-import { ArrowDownIcon } from '@patternfly/react-icons/dist/esm/icons/arrow-down-icon';
+import { RhMicronsArrowDownIcon, RhMicronsArrowUpIcon } from '@patternfly/react-icons';
 
 export interface JumpButtonProps {
   /** Position of the Jump Button(top/bottom) */
@@ -44,7 +40,7 @@ const JumpButton: FunctionComponent<JumpButtonProps> = ({
         {...jumpButtonProps}
       >
         <Icon iconSize="lg" isInline>
-          {position === 'top' ? <ArrowUpIcon /> : <ArrowDownIcon />}
+          {position === 'top' ? <RhMicronsArrowUpIcon /> : <RhMicronsArrowDownIcon />}
         </Icon>
       </Button>
     </Tooltip>

package/src/SourcesCard/SourcesCard.scss

@@ -79,25 +79,12 @@
       justify-content: space-between;
       flex: 1;
 
-      .pf-v6-c-button {
-        border-radius: var(--pf-t--global--border--radius--pill);
-        padding: var(--pf-t--global--spacer--sm);
-        width: 2.31rem;
-        height: 2.31rem;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-      }
       button:disabled,
       button[disabled] {
         .pf-v6-c-icon__content {
           color: var(--pf-t--global--icon--color--disabled);
         }
       }
-      .pf-v6-c-button__text {
-        display: flex;
-        align-items: center;
-      }
       // Interactive states
       .pf-v6-c-button:hover,
       .pf-v6-c-button:focus {

package/src/SourcesCardBase/SourcesCardBase.tsx

@@ -23,11 +23,10 @@ import {
   CardTitleProps,
   ExpandableSection,
   ExpandableSectionVariant,
-  Icon,
   Truncate,
   TruncateProps
 } from '@patternfly/react-core';
-import { ExternalLinkSquareAltIcon } from '@patternfly/react-icons';
+import { RhMicronsCaretLeftIcon, RhMicronsCaretRightIcon, RhMicronsExternalLinkIcon } from '@patternfly/react-icons';
 
 export interface SourcesCardBaseProps extends CardProps {
   /** Additional classes for the pagination navigation container. */
@@ -139,7 +138,7 @@ const SourcesCardBase: FunctionComponent<SourcesCardBaseProps> = ({
               component="a"
               variant={ButtonVariant.link}
               href={source.link}
-              icon={source.isExternal ? <ExternalLinkSquareAltIcon /> : undefined}
+              icon={source.isExternal ? <RhMicronsExternalLinkIcon /> : undefined}
               iconPosition="end"
               isInline
               rel={source.isExternal ? 'noreferrer' : undefined}
@@ -202,7 +201,7 @@ const SourcesCardBase: FunctionComponent<SourcesCardBaseProps> = ({
               component="a"
               variant={ButtonVariant.link}
               href={sources[page - 1].link}
-              icon={sources[page - 1].isExternal ? <ExternalLinkSquareAltIcon /> : undefined}
+              icon={sources[page - 1].isExternal ? <RhMicronsExternalLinkIcon /> : undefined}
               iconPosition="end"
               isInline
               rel={sources[page - 1].isExternal ? 'noreferrer' : undefined}
@@ -254,6 +253,7 @@ const SourcesCardBase: FunctionComponent<SourcesCardBaseProps> = ({
                 >
                   <Button
                     variant={ButtonVariant.plain}
+                    isCircle
                     isDisabled={isDisabled || page === 1}
                     data-action="previous"
                     onClick={(event) => {
@@ -263,26 +263,14 @@ const SourcesCardBase: FunctionComponent<SourcesCardBaseProps> = ({
                     }}
                     aria-label={toPreviousPageAriaLabel}
                   >
-                    <Icon iconSize="lg">
-                      {/* these are inline because the viewBox that works in a round icon is different than the PatternFly default */}
-                      <svg
-                        className="pf-v6-svg"
-                        viewBox="0 0 280 500"
-                        fill="currentColor"
-                        aria-hidden="true"
-                        role="img"
-                        width="1em"
-                        height="1em"
-                      >
-                        <path d="M31.7 239l136-136c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9L127.9 256l96.4 96.4c9.4 9.4 9.4 24.6 0 33.9L201.7 409c-9.4 9.4-24.6 9.4-33.9 0l-136-136c-9.5-9.4-9.5-24.6-.1-34z"></path>
-                      </svg>
-                    </Icon>
+                    <RhMicronsCaretLeftIcon />
                   </Button>
                   <span aria-hidden="true">
                     {page}/{sources.length}
                   </span>
                   <Button
                     variant={ButtonVariant.plain}
+                    isCircle
                     isDisabled={isDisabled || page === sources.length}
                     aria-label={toNextPageAriaLabel}
                     data-action="next"
@@ -292,20 +280,7 @@ const SourcesCardBase: FunctionComponent<SourcesCardBaseProps> = ({
                       handleNewPage(event, newPage);
                     }}
                   >
-                    <Icon isInline iconSize="lg">
-                      {/* these are inline because the viewBox that works in a round icon is different than the PatternFly default */}
-                      <svg
-                        className="pf-v6-svg"
-                        viewBox="0 0 180 500"
-                        fill="currentColor"
-                        aria-hidden="true"
-                        role="img"
-                        width="1em"
-                        height="1em"
-                      >
-                        <path d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"></path>
-                      </svg>
-                    </Icon>
+                    <RhMicronsCaretRightIcon />
                   </Button>
                 </nav>
               </div>

package/src/index.ts

@@ -60,9 +60,6 @@ export * from './FilePreview';
 export { default as ImagePreview } from './ImagePreview';
 export * from './ImagePreview';
 
-export { default as LoadingMessage } from './LoadingMessage';
-export * from './LoadingMessage';
-
 export { default as MarkdownContent } from './MarkdownContent';
 export * from './MarkdownContent';
 

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

@@ -1,149 +0,0 @@
-import { useState, isValidElement, cloneElement, Children, FunctionComponent, ReactNode } from 'react';
-import AttachMenu from '@patternfly/chatbot/dist/dynamic/AttachMenu';
-import SourceDetailsMenuItem from '@patternfly/chatbot/dist/dynamic/SourceDetailsMenuItem';
-import { Button, Divider, DropdownGroup, DropdownItem, DropdownList } from '@patternfly/react-core';
-import { BellIcon, CodeIcon, ClipboardIcon, CalendarAltIcon, UploadIcon } from '@patternfly/react-icons';
-import PaperclipIcon from './PaperclipIcon';
-
-const initialMenuItems = [
-  <DropdownList key="list-1">
-    <DropdownItem className="pf-chatbot-source-details-dropdown-item" value="auth-operator Pod" id="0">
-      <SourceDetailsMenuItem
-        icon={
-          <svg width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg">
-            <path
-              d="M0 12.5C0 5.87258 5.37258 0.5 12 0.5C18.6274 0.5 24 5.87258 24 12.5C24 19.1274 18.6274 24.5 12 24.5C5.37258 24.5 0 19.1274 0 12.5Z"
-              fill="currentColor"
-            />
-            <g clipPath="url(#clip0_3280_27488)">
-              <path
-                d="M8.25 8.75C8.25 7.92266 8.92266 7.25 9.75 7.25H12C14.0719 7.25 15.75 8.92812 15.75 11C15.75 13.0719 14.0719 14.75 12 14.75H9.75V17C9.75 17.4148 9.41484 17.75 9 17.75C8.58516 17.75 8.25 17.4148 8.25 17V14V8.75ZM9.75 13.25H12C13.2422 13.25 14.25 12.2422 14.25 11C14.25 9.75781 13.2422 8.75 12 8.75H9.75V13.25Z"
-                fill="white"
-              />
-            </g>
-            <defs>
-              <clipPath id="clip0_3280_27488">
-                <rect width="7.5" height="12" fill="white" transform="translate(8.25 6.5)" />
-              </clipPath>
-            </defs>
-          </svg>
-        }
-        name="auth-operator"
-        type="Pod"
-      />
-    </DropdownItem>
-  </DropdownList>,
-  <DropdownGroup key="group2">
-    <DropdownList>
-      <DropdownItem value="Alerts" id="1" icon={<BellIcon />}>
-        Alerts
-      </DropdownItem>
-      <DropdownItem value="Events" id="2" icon={<CalendarAltIcon />}>
-        Events
-      </DropdownItem>
-      <DropdownItem value="Logs" id="3" icon={<ClipboardIcon />}>
-        Logs
-      </DropdownItem>
-      <DropdownItem value="YAML - Status" id="4" icon={<CodeIcon />}>
-        YAML - Status
-      </DropdownItem>
-      <DropdownItem value="YAML - All contents" id="5" icon={<CodeIcon />}>
-        YAML - All contents
-      </DropdownItem>
-    </DropdownList>
-  </DropdownGroup>
-];
-
-const uploadMenuItems = [
-  <Divider key="divider" />,
-  <DropdownList key="list-2">
-    <DropdownItem key="upload" value="upload" id="upload" icon={<UploadIcon />}>
-      Upload from computer
-    </DropdownItem>
-  </DropdownList>
-];
-
-export const AttachmentMenuExample: FunctionComponent = () => {
-  const [isOpen, setIsOpen] = useState<boolean>(false);
-  const [userFacingMenuItems, setUserFacingMenuItems] = useState<ReactNode>([]);
-
-  const onToggleClick = () => {
-    setIsOpen(!isOpen);
-    setUserFacingMenuItems(initialMenuItems.concat(uploadMenuItems));
-  };
-
-  const findMatchingElements = (elements: ReactNode[], targetValue: string) => {
-    let matchingElements = [] as ReactNode[];
-
-    elements.forEach((element) => {
-      if (isValidElement(element)) {
-        // Check if the element's value matches the targetValue
-        if (element.props.value && element.props.value.toLowerCase().includes(targetValue.toLowerCase())) {
-          matchingElements.push(cloneElement(element, { key: element.props.value }));
-        }
-
-        // Recursively check the element's children
-        const children = Children.toArray(element.props.children);
-        matchingElements = matchingElements.concat(findMatchingElements(children, targetValue));
-      }
-    });
-
-    return matchingElements;
-  };
-
-  const onTextChange = (textValue: string) => {
-    if (textValue === '') {
-      setUserFacingMenuItems(initialMenuItems.concat(uploadMenuItems));
-      return;
-    }
-
-    const newMenuItems = findMatchingElements(initialMenuItems, textValue);
-    // this is necessary because the React nodes we find traversing the recursive search
-    // aren't correctly wrapped in a DropdownList. This leads to problems with the
-    // auth-operator item where it winds up floating in a bad place in the DOM and never
-    // gets removed
-    setUserFacingMenuItems(
-      <>
-        <DropdownList>
-          {newMenuItems.length === 0 ? (
-            <DropdownItem key="no-items">No results found</DropdownItem>
-          ) : (
-            newMenuItems.map((item) => item)
-          )}
-        </DropdownList>
-        {uploadMenuItems.map((item) => item)}
-      </>
-    );
-  };
-
-  return (
-    <AttachMenu
-      filteredItems={userFacingMenuItems}
-      isOpen={isOpen}
-      onOpenChange={(isOpen) => setIsOpen(isOpen)}
-      onOpenChangeKeys={['Escape']}
-      // eslint-disable-next-line no-console
-      onSelect={(_ev, value) => console.log('selected', value)}
-      handleTextInputChange={onTextChange}
-      popperProps={{ direction: 'up', distance: 8 }}
-      searchInputPlaceholder="Search cluster resources..."
-      toggle={(toggleRef) => (
-        <Button
-          style={{
-            alignItems: 'center',
-            borderRadius: '50%',
-            display: 'flex',
-            height: '48px',
-            justifyContent: 'center',
-            padding: '0',
-            width: '48px',
-            lineHeight: '1rem'
-          }}
-          ref={toggleRef}
-          onClick={onToggleClick}
-          icon={<img src={PaperclipIcon} alt="Add an attachment" />}
-        />
-      )}
-    />
-  );
-};

package/patternfly-docs/content/extensions/chatbot/examples/Messages/PaperclipIcon.svg

@@ -1,10 +0,0 @@
-<svg width="18" height="20" viewBox="0 0 18 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g clip-path="url(#clip0_3934_2737)">
-<path d="M14.4766 3.27344C13.5234 2.32031 11.9766 2.32031 11.0234 3.27344L3.83594 10.4609C2.19141 12.1055 2.19141 14.7695 3.83594 16.4141C5.48047 18.0586 8.14453 18.0586 9.78906 16.4141L15.7266 10.4766C16.1523 10.0508 16.8477 10.0508 17.2734 10.4766C17.6992 10.9023 17.6992 11.5977 17.2734 12.0234L11.3359 17.9609C8.83594 20.4609 4.78906 20.4609 2.28906 17.9609C-0.210938 15.4609 -0.210938 11.4141 2.28906 8.91406L9.47656 1.72656C11.2852 -0.0820313 14.2148 -0.0820313 16.0234 1.72656C17.832 3.53516 17.832 6.46484 16.0234 8.27344L9.14844 15.1484C8.03125 16.2656 6.21875 16.2656 5.10156 15.1484C3.98438 14.0312 3.98438 12.2188 5.10156 11.1016L10.7266 5.47656C11.1523 5.05078 11.8477 5.05078 12.2734 5.47656C12.6992 5.90234 12.6992 6.59766 12.2734 7.02344L6.64844 12.6484C6.38672 12.9102 6.38672 13.3398 6.64844 13.6016C6.91016 13.8633 7.33984 13.8633 7.60156 13.6016L14.4766 6.72656C15.4297 5.77344 15.4297 4.22656 14.4766 3.27344Z" fill="white"/>
-</g>
-<defs>
-<clipPath id="clip0_3934_2737">
-<rect width="17.5" height="20" fill="white" transform="translate(0.25)"/>
-</clipPath>
-</defs>
-</svg>