@patternfly/chatbot 2.2.0-prerelease.1 → 2.2.0-prerelease.11

package/src/Compare/Compare.scss

@@ -0,0 +1,72 @@
+.pf-chatbot__compare-container {
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  height: 100%;
+}
+.pf-chatbot__compare-toggle {
+  width: 100%;
+
+  .pf-v6-c-toggle-group__button {
+    width: 100%;
+    display: flex;
+    justify-content: center;
+  }
+}
+.pf-chatbot__compare {
+  display: flex;
+  height: 100%;
+  width: 100%;
+
+  @media screen and (max-width: 900px) {
+    overflow-y: auto;
+  }
+
+  .pf-chatbot__compare-item:first-of-type {
+    border-right: 1px solid var(--pf-t--global--border--color--default);
+
+    @media screen and (max-width: 900px) {
+      border-right: 0px;
+    }
+  }
+}
+
+.pf-chatbot__compare-item {
+  flex: 1;
+
+  .pf-chatbot--embedded .pf-chatbot__messagebox {
+    width: 100%;
+  }
+
+  .pf-chatbot__content {
+    padding: 0;
+  }
+
+  .pf-chatbot.pf-chatbot--embedded {
+    @media screen and (max-width: 900px) {
+      height: 100%;
+    }
+  }
+}
+.pf-chatbot__compare-item-hidden {
+  display: block;
+
+  @media screen and (max-width: 900px) {
+    display: none;
+  }
+}
+
+.pf-chatbot__compare-mobile-controls {
+  padding: var(--pf-t--global--spacer--md) var(--pf-t--global--spacer--lg) 0 var(--pf-t--global--spacer--lg);
+  display: none;
+  background-color: var(--pf-t--global--background--color--secondary--default);
+  position: sticky;
+  top: 0;
+  z-index: 9999;
+
+  @media screen and (max-width: 900px) {
+    display: flex;
+    flex-direction: column;
+    gap: var(--pf-t--global--spacer--md);
+  }
+}

package/src/Compare/Compare.test.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import Compare from './Compare';
+
+const firstChild = (
+  <div>
+    <h1>Child 1</h1>
+  </div>
+);
+
+const secondChild = (
+  <div>
+    <h1>Child 2</h1>
+  </div>
+);
+
+describe('Compare', () => {
+  it('should render compare correctly', () => {
+    render(
+      <Compare
+        firstChildDisplayName="Child 1"
+        secondChildDisplayName="Child 2"
+        firstChild={firstChild}
+        secondChild={secondChild}
+      />
+    );
+    expect(screen.getByRole('heading', { name: /Child 1/i })).toBeTruthy();
+    expect(screen.getByRole('heading', { name: /Child 2/i })).toBeTruthy();
+  });
+});

package/src/Compare/Compare.tsx

@@ -0,0 +1,98 @@
+import React, { PropsWithChildren } from 'react';
+import { ToggleGroup, ToggleGroupItem } from '@patternfly/react-core';
+
+interface CompareProps {
+  /** First of two children to render */
+  firstChild: React.ReactNode;
+  /** Second of two children to render */
+  secondChild: React.ReactNode;
+  /** Display name for first child, used in mobile toggle */
+  firstChildDisplayName: string;
+  /** Display name for second child, used in mobile toggle */
+  secondChildDisplayName: string;
+  /** Aria label for mobile toggle group */
+  toggleGroupAriaLabel?: string;
+  /** Callback for when mobile toggle is used */
+  onToggleClick?: (event: MouseEvent | React.MouseEvent<any, MouseEvent> | React.KeyboardEvent<Element>) => void;
+}
+
+export const Compare = ({
+  firstChild,
+  secondChild,
+  firstChildDisplayName,
+  secondChildDisplayName,
+  onToggleClick,
+  toggleGroupAriaLabel = 'Select which chatbot to display'
+}: PropsWithChildren<CompareProps>) => {
+  const [isSelected, setIsSelected] = React.useState('toggle-group-chatbot-1');
+  const [showFirstChatbot, setShowFirstChatbot] = React.useState(true);
+  const [showSecondChatbot, setShowSecondChatbot] = React.useState(false);
+
+  React.useEffect(() => {
+    // we want to show the first if we switch to the mobile toggle view
+    // and reset/switch back to normal otherwise
+    const updateChatbotVisibility = () => {
+      if (window.innerWidth >= 901) {
+        setShowFirstChatbot(true);
+        setShowSecondChatbot(true);
+      } else {
+        setShowFirstChatbot(true);
+        setShowSecondChatbot(false);
+        setIsSelected('toggle-group-chatbot-1');
+      }
+    };
+    window.addEventListener('resize', updateChatbotVisibility);
+
+    return () => {
+      window.removeEventListener('resize', updateChatbotVisibility);
+    };
+  }, []);
+
+  // this only happens on mobile
+  const handleChildToggleClick = (
+    event: MouseEvent | React.MouseEvent<any, MouseEvent> | React.KeyboardEvent<Element>
+  ) => {
+    const id = event.currentTarget.id;
+    setIsSelected(id);
+    setShowSecondChatbot(!showSecondChatbot);
+    setShowFirstChatbot(!showFirstChatbot);
+    onToggleClick && onToggleClick(event);
+  };
+
+  return (
+    <>
+      <div className="pf-chatbot__compare-mobile-controls">
+        <ToggleGroup aria-label={toggleGroupAriaLabel}>
+          <ToggleGroupItem
+            className="pf-chatbot__compare-toggle"
+            text={firstChildDisplayName}
+            buttonId="toggle-group-chatbot-1"
+            isSelected={isSelected === 'toggle-group-chatbot-1'}
+            onChange={handleChildToggleClick}
+          />
+          <ToggleGroupItem
+            className="pf-chatbot__compare-toggle"
+            text={secondChildDisplayName}
+            buttonId="toggle-group-chatbot-2"
+            isSelected={isSelected === 'toggle-group-chatbot-2'}
+            onChange={handleChildToggleClick}
+          />
+        </ToggleGroup>
+      </div>
+      <div className="pf-chatbot__compare">
+        <div
+          className={`pf-chatbot__compare-item ${!showFirstChatbot ? 'pf-chatbot__compare-item-hidden' : undefined}`}
+        >
+          {firstChild}
+        </div>
+        <div
+          className={`pf-chatbot__compare-item ${!showSecondChatbot ? 'pf-chatbot__compare-item-hidden' : undefined}`}
+        >
+          {secondChild}
+        </div>
+      </div>
+    </>
+  );
+};
+
+export default Compare;

package/src/Compare/index.ts

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

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

@@ -9,7 +9,7 @@ exports[`FileDropZone should render file drop zone 1`] = `
   >
     <input
       multiple=""
-      style="display: none;"
+      style="border: 0px; clip: rect(0px, 0px, 0px, 0px); clip-path: inset(50%); height: 1px; margin: 0px -1px -1px 0px; overflow: hidden; padding: 0px; position: absolute; width: 1px; white-space: nowrap;"
       tabindex="-1"
       type="file"
     />

package/src/Message/ListMessage/OrderedListMessage.tsx

@@ -6,9 +6,9 @@ import React from 'react';
 import { ExtraProps } from 'react-markdown';
 import { List, ListComponent, OrderType } from '@patternfly/react-core';
 
-const OrderedListMessage = ({ children }: JSX.IntrinsicElements['ol'] & ExtraProps) => (
+const OrderedListMessage = ({ children, start }: JSX.IntrinsicElements['ol'] & ExtraProps) => (
   <div className="pf-chatbot__message-ordered-list">
-    <List component={ListComponent.ol} type={OrderType.number}>
+    <List component={ListComponent.ol} type={OrderType.number} start={start}>
       {children}
     </List>
   </div>

package/src/Message/Message.scss

@@ -95,20 +95,6 @@
     display: grid;
     gap: var(--pf-t--global--spacer--sm);
   }
-
-  &-quick-response {
-    .pf-v6-c-label {
-      --pf-v6-c-label--FontSize: var(--pf-t--global--font--size--md);
-
-      @media screen and (min-width: 401px) and (max-width: 600px) {
-        --pf-v6-c-label__text--MaxWidth: 20ch;
-      }
-
-      @media screen and (max-width: 400px) {
-        --pf-v6-c-label__text--MaxWidth: 15ch;
-      }
-    }
-  }
 }
 
 // Attachments

package/src/Message/Message.test.tsx

@@ -3,6 +3,8 @@ import { render, screen } from '@testing-library/react';
 import '@testing-library/jest-dom';
 import Message from './Message';
 import userEvent from '@testing-library/user-event';
+import { monitorSampleAppQuickStart } from './QuickStarts/monitor-sampleapp-quickstart';
+import { monitorSampleAppQuickStartWithImage } from './QuickStarts/monitor-sampleapp-quickstart-with-image';
 
 const ALL_ACTIONS = [
   { label: /Good response/i },
@@ -53,6 +55,22 @@ spec:
 
 const INLINE_CODE = `Here is an inline code - \`() => void\``;
 
+const ORDERED_LIST_WITH_CODE = `
+1. Item 1
+2. Item 2
+
+\`\`\`yaml
+- name: Hello World Playbook
+  hosts: localhost
+  tasks:
+    - name: Print Hello World
+      ansible.builtin.debug:
+        msg: "Hello, World!"
+\`\`\`
+
+3. Item 3
+`;
+
 const checkListItemsRendered = () => {
   const items = ['Item 1', 'Item 2', 'Item 3'];
   expect(screen.getAllByRole('listitem')).toHaveLength(3);
@@ -344,6 +362,12 @@ describe('Message', () => {
     expect(screen.getByText('Here is an ordered list:')).toBeTruthy();
     checkListItemsRendered();
   });
+  it('should render ordered lists correctly if there is interstitial content', () => {
+    render(<Message avatar="./img" role="user" name="User" content={ORDERED_LIST_WITH_CODE} />);
+    checkListItemsRendered();
+    const list = screen.getAllByRole('list')[1];
+    expect(list).toHaveAttribute('start', '3');
+  });
   it('should render inline code', () => {
     render(<Message avatar="./img" role="user" name="User" content={INLINE_CODE} />);
     expect(screen.getByText(/() => void/i)).toBeTruthy();
@@ -415,4 +439,56 @@ describe('Message', () => {
     expect(screen.getByRole('img')).toHaveClass('test');
     expect(screen.getByRole('img')).toHaveClass('pf-chatbot__message-avatar');
   });
+  it('should handle QuickStart tile correctly', () => {
+    render(
+      <Message
+        avatar="./img"
+        role="user"
+        name="User"
+        content="Hi"
+        quickStarts={{
+          quickStart: monitorSampleAppQuickStart,
+          onSelectQuickStart: (id) => alert(id)
+        }}
+      />
+    );
+    expect(screen.getByRole('button', { name: 'Monitoring your sample application' })).toBeTruthy();
+    expect(screen.getByRole('heading', { name: '1 Prerequisite' })).toBeTruthy();
+    expect(screen.getByRole('button', { name: 'Show prerequisites' })).toBeTruthy();
+    expect(screen.getByRole('button', { name: 'Start' })).toBeTruthy();
+  });
+  it('should handle click on QuickStart tile correctly', async () => {
+    const spy = jest.fn();
+    render(
+      <Message
+        avatar="./img"
+        role="user"
+        name="User"
+        content="Hi"
+        quickStarts={{
+          quickStart: monitorSampleAppQuickStart,
+          onSelectQuickStart: (id) => spy(id)
+        }}
+      />
+    );
+    await userEvent.click(screen.getByRole('button', { name: 'Monitoring your sample application' }));
+    expect(spy).toHaveBeenCalledTimes(1);
+    expect(spy).toHaveBeenCalledWith(monitorSampleAppQuickStart.metadata.name);
+  });
+  it('should handle QuickStart tile with image correctly', async () => {
+    const spy = jest.fn();
+    render(
+      <Message
+        avatar="./img"
+        role="user"
+        name="User"
+        content="Hi"
+        quickStarts={{
+          quickStart: monitorSampleAppQuickStartWithImage,
+          onSelectQuickStart: (id) => spy(id)
+        }}
+      />
+    );
+    expect(screen.getAllByRole('img')[1]).toHaveAttribute('src', 'test.png');
+  });
 });

package/src/Message/Message.tsx

@@ -6,16 +6,7 @@ import React from 'react';
 
 import Markdown from 'react-markdown';
 import remarkGfm from 'remark-gfm';
-import {
-  Avatar,
-  AvatarProps,
-  Label,
-  LabelGroup,
-  LabelGroupProps,
-  LabelProps,
-  Timestamp,
-  Truncate
-} from '@patternfly/react-core';
+import { Avatar, AvatarProps, Label, LabelGroupProps, Timestamp, Truncate } from '@patternfly/react-core';
 import MessageLoading from './MessageLoading';
 import CodeBlockMessage from './CodeBlockMessage/CodeBlockMessage';
 import TextMessage from './TextMessage/TextMessage';
@@ -25,12 +16,10 @@ import SourcesCard, { SourcesCardProps } from '../SourcesCard';
 import ListItemMessage from './ListMessage/ListItemMessage';
 import UnorderedListMessage from './ListMessage/UnorderedListMessage';
 import OrderedListMessage from './ListMessage/OrderedListMessage';
+import QuickStartTile from './QuickStarts/QuickStartTile';
+import { QuickStart, QuickstartAction } from './QuickStarts/types';
+import QuickResponse from './QuickResponse/QuickResponse';
 
-export interface QuickResponse extends Omit<LabelProps, 'children'> {
-  content: string;
-  id: string;
-  onClick: () => void;
-}
 export interface MessageAttachment {
   /** Name of file attached to the message */
   name: string;
@@ -89,6 +78,19 @@ export interface MessageProps extends Omit<React.HTMLProps<HTMLDivElement>, 'rol
   hasRoundAvatar?: boolean;
   /** Any additional props applied to the avatar, for additional customization  */
   avatarProps?: Omit<AvatarProps, 'alt'>;
+  /** Props for QuickStart card */
+  quickStarts?: {
+    quickStart: QuickStart;
+    onSelectQuickStart: (id?: string) => void;
+    minuteWord?: string;
+    minuteWordPlural?: string;
+    prerequisiteWord?: string;
+    prerequisiteWordPlural?: string;
+    quickStartButtonAriaLabel?: string;
+    className?: string;
+    onClick?: () => void;
+    action?: QuickstartAction;
+  };
 }
 
 export const Message: React.FunctionComponent<MessageProps> = ({
@@ -108,6 +110,7 @@ export const Message: React.FunctionComponent<MessageProps> = ({
   attachments,
   hasRoundAvatar = true,
   avatarProps,
+  quickStarts,
   ...props
 }: MessageProps) => {
   let avatarClassName;
@@ -119,6 +122,7 @@ export const Message: React.FunctionComponent<MessageProps> = ({
   // Keep timestamps consistent between Timestamp component and aria-label
   const date = new Date();
   const dateString = timestamp ?? `${date.toLocaleDateString()} ${date.toLocaleTimeString()}`;
+
   return (
     <section
       aria-label={`Message from ${role} - ${dateString}`}
@@ -156,7 +160,7 @@ export const Message: React.FunctionComponent<MessageProps> = ({
                   p: TextMessage,
                   code: ({ children }) => <CodeBlockMessage {...codeBlockProps}>{children}</CodeBlockMessage>,
                   ul: UnorderedListMessage,
-                  ol: OrderedListMessage,
+                  ol: (props) => <OrderedListMessage {...props} />,
                   li: ListItemMessage
                 }}
                 remarkPlugins={[remarkGfm]}
@@ -165,18 +169,23 @@ export const Message: React.FunctionComponent<MessageProps> = ({
               </Markdown>
             )}
             {!isLoading && sources && <SourcesCard {...sources} />}
+            {quickStarts && quickStarts.quickStart && (
+              <QuickStartTile
+                quickStart={quickStarts.quickStart}
+                onSelectQuickStart={quickStarts.onSelectQuickStart}
+                minuteWord={quickStarts.minuteWord}
+                minuteWordPlural={quickStarts.minuteWordPlural}
+                prerequisiteWord={quickStarts.prerequisiteWord}
+                prerequisiteWordPlural={quickStarts.prerequisiteWordPlural}
+                quickStartButtonAriaLabel={quickStarts.quickStartButtonAriaLabel}
+              />
+            )}
             {!isLoading && actions && <ResponseActions actions={actions} />}
             {!isLoading && quickResponses && (
-              <LabelGroup
-                className={`pf-chatbot__message-quick-response ${quickResponseContainerProps?.className}`}
-                {...quickResponseContainerProps}
-              >
-                {quickResponses.map(({ id, onClick, content, ...props }: QuickResponse) => (
-                  <Label variant="outline" color="blue" key={id} onClick={onClick} {...props}>
-                    {content}
-                  </Label>
-                ))}
-              </LabelGroup>
+              <QuickResponse
+                quickResponses={quickResponses}
+                quickResponseContainerProps={quickResponseContainerProps}
+              />
             )}
           </div>
           {attachments && (

package/src/Message/QuickResponse/QuickResponse.scss

@@ -0,0 +1,33 @@
+.pf-chatbot__message-quick-response {
+  .pf-v6-c-label {
+    --pf-v6-c-label--FontSize: var(--pf-t--global--font--size--md);
+
+    @media screen and (min-width: 401px) and (max-width: 600px) {
+      --pf-v6-c-label__text--MaxWidth: 20ch;
+    }
+
+    @media screen and (max-width: 400px) {
+      --pf-v6-c-label__text--MaxWidth: 15ch;
+    }
+  }
+
+  .pf-chatbot__message-quick-response--selected {
+    .pf-v6-c-label__content:is(:hover, :focus) {
+      --pf-v6-c-label--m-clickable--hover--BorderWidth: 0;
+      --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-blue--BackgroundColor);
+    }
+  }
+
+  .pf-chatbot__message-quick-response--selected:hover,
+  .pf-chatbot__message-quick-response--selected:focus {
+    --pf-v6-c-label--m-clickable--hover--BorderWidth: 0;
+    --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-blue--BackgroundColor);
+  }
+
+  // active state right before selection
+  .pf-v6-c-label.pf-m-blue.pf-m-clickable .pf-v6-c-label__content:is(:active) {
+    --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-blue--BackgroundColor);
+    --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-blue--BackgroundColor);
+    --pf-v6-c-label--m-clickable--hover--BorderWidth: 0;
+  }
+}

package/src/Message/QuickResponse/QuickResponse.tsx

@@ -0,0 +1,50 @@
+import React from 'react';
+import { Label, LabelGroup, LabelGroupProps, LabelProps } from '@patternfly/react-core';
+import { CheckIcon } from '@patternfly/react-icons';
+
+export interface QuickResponse extends Omit<LabelProps, 'children'> {
+  content: string;
+  id: string;
+  onClick: () => void;
+}
+
+export interface QuickResponseProps {
+  /** Props for quick responses */
+  quickResponses: QuickResponse[];
+  /** Props for quick responses container */
+  quickResponseContainerProps?: Omit<LabelGroupProps, 'ref'>;
+}
+
+export const QuickResponse: React.FunctionComponent<QuickResponseProps> = ({
+  quickResponses,
+  quickResponseContainerProps = { numLabels: 5 }
+}: QuickResponseProps) => {
+  const [selectedQuickResponse, setSelectedQuickResponse] = React.useState<string>();
+
+  const handleQuickResponseClick = (id: string, onClick?: () => void) => {
+    setSelectedQuickResponse(id);
+    onClick && onClick();
+  };
+  return (
+    <LabelGroup
+      className={`pf-chatbot__message-quick-response ${quickResponseContainerProps?.className}`}
+      {...quickResponseContainerProps}
+    >
+      {quickResponses.map(({ id, onClick, content, className, ...props }: QuickResponse) => (
+        <Label
+          variant={id === selectedQuickResponse ? undefined : 'outline'}
+          icon={id === selectedQuickResponse ? <CheckIcon /> : undefined}
+          color="blue"
+          key={id}
+          onClick={() => handleQuickResponseClick(id, onClick)}
+          className={`${id === selectedQuickResponse ? 'pf-chatbot__message-quick-response--selected' : ''} ${className ? className : ''}`}
+          {...props}
+        >
+          {content}
+        </Label>
+      ))}
+    </LabelGroup>
+  );
+};
+
+export default QuickResponse;

package/src/Message/QuickStarts/FallbackImg.tsx

@@ -0,0 +1,24 @@
+import * as React from 'react';
+
+interface FallbackImgProps {
+  /** Image source */
+  src: string;
+  /** Alt text for image */
+  alt?: string;
+  /** ClassName applied to image */
+  className?: string;
+  /** Fallback */
+  fallback?: React.ReactNode;
+}
+
+const FallbackImg: React.FC<FallbackImgProps> = ({ src, alt, className, fallback }) => {
+  const [isSrcValid, setIsSrcValid] = React.useState<boolean>(true);
+
+  if (src && isSrcValid) {
+    return <img className={className} src={src} alt={alt} onError={() => setIsSrcValid(false)} />;
+  }
+
+  return <>{fallback}</>;
+};
+
+export default FallbackImg;

package/src/Message/QuickStarts/QuickStartTile.scss

@@ -0,0 +1,25 @@
+.pf-chatbot__quickstarts-tile {
+  min-width: 360px;
+  max-width: 650px;
+  width: 100%;
+
+  @media screen and (max-width: 700px) {
+    max-width: 100%;
+    min-width: initial;
+  }
+  // some icons provided to catalog tiles might have no defined height/width. Without this style, in those cases
+  // the icons would have a height and width of 0.
+  .pf-v6-c-card__header-main {
+    .pf-v6-c-icon__content {
+      display: contents;
+    }
+  }
+}
+
+.pf-v6-theme-dark {
+  .pf-chatbot__quickstarts-tile {
+    .pfext-catalog-item-icon__img {
+      filter: brightness(1.5) invert(1) hue-rotate(180deg) saturate(4);
+    }
+  }
+}