@patternfly/chatbot 6.8.0-prerelease.3 → 6.8.0-prerelease.5

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>

package/src/LoadingMessage/LoadingMessage.test.tsx

@@ -1,15 +0,0 @@
-import { render, screen } from '@testing-library/react';
-import '@testing-library/jest-dom';
-import LoadingMessage from './LoadingMessage';
-
-describe('LoadingMessage', () => {
-  it('should render loading message', () => {
-    const { container } = render(<LoadingMessage />);
-    expect(container).toMatchSnapshot();
-  });
-  it('should render loading message correctly', () => {
-    render(<LoadingMessage />);
-    expect(screen.getAllByText('.')).toBeTruthy();
-    expect(screen.getAllByText('.')).toHaveLength(3);
-  });
-});

package/src/LoadingMessage/LoadingMessage.tsx

@@ -1,27 +0,0 @@
-import type { FunctionComponent } from 'react';
-import { Icon, Split, SplitItem } from '@patternfly/react-core';
-
-import RobotIcon from '@patternfly/react-icons/dist/js/icons/robot-icon';
-
-export interface LoadingMessageProps {
-  icon?: React.ComponentType;
-}
-
-export const LoadingMessage: FunctionComponent<LoadingMessageProps> = ({ icon: IconComponent = RobotIcon }) => (
-  <Split>
-    <SplitItem>
-      <Icon size="lg" className="pf-v6-u-mr-sm pf-v6-u-pt-md">
-        <IconComponent />
-      </Icon>
-    </SplitItem>
-    <SplitItem className="pf-u-background-color-200">
-      <div className="pf-v6-u-display-flex pf-u-align-items-center">
-        <div>.</div>
-        <div>.</div>
-        <div>.</div>
-      </div>
-    </SplitItem>
-  </Split>
-);
-
-export default LoadingMessage;

package/src/LoadingMessage/__snapshots__/LoadingMessage.test.tsx.snap

@@ -1,64 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`LoadingMessage should render loading message 1`] = `
-<div>
-  <div
-    class="pf-v6-l-split"
-  >
-    <div
-      class="pf-v6-l-split__item"
-    >
-      <span
-        class="pf-v6-c-icon pf-m-lg pf-v6-u-mr-sm pf-v6-u-pt-md"
-      >
-        <span
-          class="pf-v6-c-icon__content"
-        >
-          <svg
-            aria-hidden="true"
-            class="pf-v6-svg"
-            fill="currentColor"
-            height="1em"
-            role="img"
-            width="1em"
-          >
-            <svg
-              class="pf-v6-icon-default"
-              viewBox="0 0 640 512"
-            >
-              <path
-                d="M32,224H64V416H32A31.96166,31.96166,0,0,1,0,384V256A31.96166,31.96166,0,0,1,32,224Zm512-48V448a64.06328,64.06328,0,0,1-64,64H160a64.06328,64.06328,0,0,1-64-64V176a79.974,79.974,0,0,1,80-80H288V32a32,32,0,0,1,64,0V96H464A79.974,79.974,0,0,1,544,176ZM264,256a40,40,0,1,0-40,40A39.997,39.997,0,0,0,264,256Zm-8,128H192v32h64Zm96,0H288v32h64ZM456,256a40,40,0,1,0-40,40A39.997,39.997,0,0,0,456,256Zm-8,128H384v32h64ZM640,256V384a31.96166,31.96166,0,0,1-32,32H576V224h32A31.96166,31.96166,0,0,1,640,256Z"
-              />
-            </svg>
-            <svg
-              class="pf-v6-icon-rh-ui"
-              viewBox="0 0 32 32"
-            >
-              <path
-                d="M29 22.5V29a1 1 0 1 1-2 0v-6H5v6a1 1 0 1 1-2 0v-6.5c0-.827.673-1.5 1.5-1.5h23c.827 0 1.5.673 1.5 1.5ZM3 11a1 1 0 0 1 1-1h2V5.5C6 4.673 6.673 4 7.5 4H12V2a1 1 0 1 1 2 0v2h4V2a1 1 0 1 1 2 0v2h4.5c.827 0 1.5.673 1.5 1.5V10h2a1 1 0 1 1 0 2h-2v4.5c0 .827-.673 1.5-1.5 1.5h-17c-.827 0-1.5-.673-1.5-1.5V12H4a1 1 0 0 1-1-1Zm5 5h16V6H8v10Zm5-6.612a1.626 1.626 0 1 0 .001 3.251A1.626 1.626 0 0 0 13 9.388Zm6-.01a1.626 1.626 0 1 0 .001 3.251A1.626 1.626 0 0 0 19 9.378Z"
-              />
-            </svg>
-          </svg>
-        </span>
-      </span>
-    </div>
-    <div
-      class="pf-v6-l-split__item pf-u-background-color-200"
-    >
-      <div
-        class="pf-v6-u-display-flex pf-u-align-items-center"
-      >
-        <div>
-          .
-        </div>
-        <div>
-          .
-        </div>
-        <div>
-          .
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;

package/src/LoadingMessage/index.ts

@@ -1,3 +0,0 @@
-export { default } from './LoadingMessage';
-
-export * from './LoadingMessage';