@patternfly/chatbot 2.2.0-prerelease.8 → 2.2.0

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/FileDetails/FileDetails.scss

@@ -2,7 +2,7 @@
   color: var(--pf-t--global--text--color--subtle);
   display: flex; // this is needed for when FileDetailsLabel is clickable
   font-size: var(--pf-t--global--icon--size--font--xs);
-  font-weight: 500;
+  font-weight: var(--pf-t--global--font--weight--body--bold);
 }
 
 .pf-chatbot__code-icon {

package/src/FileDetailsLabel/FileDetailsLabel.scss

@@ -7,10 +7,10 @@
 
 .pf-chatbot__file-label {
   padding: var(--pf-t--global--spacer--sm) var(--pf-t--global--spacer--md) var(--pf-t--global--spacer--sm)
-    var(--pf-t--global--spacer--md);
+    var(--pf-t--global--spacer--md) !important;
   gap: var(--pf-t--global--spacer--sm);
   --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-t--global--background--color--primary--hover);
-  --pf-v6-c-label--MaxWidth: 12rem;
+  --pf-v6-c-label--MaxWidth: 12rem !important;
   .pf-v6-c-truncate {
     max-width: 9ch;
   }

package/src/Message/CodeBlockMessage/CodeBlockMessage.scss

@@ -36,15 +36,15 @@
       justify-content: space-between;
       width: 100%;
       font-size: var(--pf-t--global--font--size--sm);
-      font-weight: 500;
+      font-weight: var(--pf-t--global--font--weight--body--bold);
     }
 
     .pf-chatbot__button--copy.pf-v6-c-button {
-      color: var(--pf-t--color--white);
+      color: var(--pf-t--color--white); // same in light + dark theme
 
       &:hover,
       &:focus {
-        color: var(--pf-t--color--white);
+        color: var(--pf-t--color--white); // same in light + dark theme
       }
     }
   }
@@ -77,6 +77,6 @@
 }
 
 .pf-chatbot__message-inline-code {
-  background-color: var(--pf-t--chatbot--code--background);
+  background-color: var(--pf-t--global--background--color--tertiary--default);
   font-size: var(--pf-t--global--font--size--body--default);
 }

package/src/Message/ErrorMessage/ErrorMessage.tsx

@@ -0,0 +1,14 @@
+// ============================================================================
+// Chatbot Main - Message - Content - Error
+// ============================================================================
+
+import React from 'react';
+import { Alert, AlertProps } from '@patternfly/react-core';
+
+const ErrorMessage = ({ title, actionLinks, children, ...props }: AlertProps) => (
+  <Alert isInline variant="danger" title={title} actionLinks={actionLinks} {...props}>
+    {children}
+  </Alert>
+);
+
+export default ErrorMessage;

package/src/Message/ImageMessage/ImageMessage.scss

@@ -0,0 +1,9 @@
+.pf-chatbot__message-image {
+  border-radius: var(--pf-t--global--border--radius--small);
+  max-width: 37.5rem; // 600px
+  max-height: 25rem; // 400px
+  min-height: 6.25rem; // 100px
+  // with rehypePlugins={[rehypeUnwrapImages]}, image is not wrapped in p if it is by itself
+  // however, if in a paragraph tag as part of other content, it should be a block element
+  display: block;
+}

package/src/Message/ImageMessage/ImageMessage.tsx

@@ -0,0 +1,14 @@
+// ============================================================================
+// Chatbot Main - Message - Content - Image
+// ============================================================================
+
+import React from 'react';
+import { ExtraProps } from 'react-markdown';
+
+const ImageMessage = ({ children, ...props }: JSX.IntrinsicElements['img'] & ExtraProps) => (
+  <img className="pf-chatbot__message-image" {...props}>
+    {children}
+  </img>
+);
+
+export default ImageMessage;

package/src/Message/LinkMessage/LinkMessage.tsx

@@ -0,0 +1,34 @@
+// ============================================================================
+// Chatbot Main - Message - Content - Link
+// ============================================================================
+
+import React from 'react';
+import { Button, ButtonProps } from '@patternfly/react-core';
+import { ExternalLinkSquareAltIcon } from '@patternfly/react-icons';
+
+const LinkMessage = ({ children, target, href, ...props }: ButtonProps) => {
+  if (target === '_blank') {
+    return (
+      <Button
+        component="a"
+        variant="link"
+        href={href}
+        icon={<ExternalLinkSquareAltIcon />}
+        iconPosition="end"
+        isInline
+        target={target}
+        {...props}
+      >
+        {children}
+      </Button>
+    );
+  }
+
+  return (
+    <Button isInline component="a" href={href} variant="link" {...props}>
+      {children}
+    </Button>
+  );
+};
+
+export default LinkMessage;

package/src/Message/ListMessage/ListMessage.scss

@@ -5,21 +5,21 @@
 .pf-chatbot__message-ordered-list,
 .pf-chatbot__message-unordered-list {
   width: fit-content;
-  padding: var(--pf-t--chatbot-message--type--padding) 0 var(--pf-t--chatbot-message--type--padding) 0;
-  border-radius: var(--pf-t--chatbot-message--type--border--radius);
+  padding: var(--pf-t--global--spacer--sm) 0 var(--pf-t--global--spacer--sm) 0;
+  border-radius: var(--pf-t--global--border--radius--small);
 
   .pf-v6-c-list,
   ul,
   li {
-    font-size: var(--pf-t--chatbot--font-size);
+    font-size: var(--pf-t--global--font--size--md);
   }
 }
 
 .pf-chatbot__message--user {
   .pf-chatbot__message-ordered-list,
   .pf-chatbot__message-unordered-list {
-    background-color: var(--pf-t--chatbot-message--type--background--color--primary);
-    color: var(--pf-t--chatbot-message--type--text--color--primary);
-    padding: var(--pf-t--chatbot-message--type--padding);
+    background-color: var(--pf-t--global--color--brand--default);
+    color: var(--pf-t--global--text--color--on-brand--default);
+    padding: var(--pf-t--global--spacer--sm);
   }
 }

package/src/Message/Message.scss

@@ -2,14 +2,6 @@
 // Chatbot Message
 // ============================================================================
 .pf-chatbot__message {
-  --pf-t--chatbot-message--type--background--color--default: var(--pf-t--global--background--color--tertiary--default);
-  --pf-t--chatbot-message--type--background--color--primary: var(--pf-t--global--color--brand--default);
-  --pf-t--chatbot-message--type--padding: var(--pf-t--global--spacer--sm);
-  --pf-t--chatbot-message--type--text--color--default: var(--pf-t--global--text--color--regular);
-  --pf-t--chatbot-message--type--text--color--primary: var(--pf-t--global--text--color--inverse);
-  --pf-t--chatbot-message--type--border--radius: var(--pf-t--global--border--radius--small);
-  --pf-t--chatbot-message--meta--label--color: var(--pf-t--global--border--color--on-secondary);
-
   display: flex;
   align-items: flex-start;
   gap: var(--pf-t--global--spacer--lg);
@@ -63,12 +55,12 @@
 
     // Badge
     .pf-v6-c-label {
-      --pf-v6-c-label--m-outline--BorderColor: var(--pf-t--chatbot-message--meta--label--color);
+      --pf-v6-c-label--m-outline--BorderColor: var(--pf-t--global--border--color--on-secondary);
       --pf-v6-c-label--FontSize: var(--pf-t--global--font--size--xs);
-      font-weight: 500;
+      font-weight: var(--pf-t--global--font--weight--body--bold);
 
       .pf-v6-c-label__content {
-        --pf-v6-c-label--Color: var(--pf-t--chatbot-message--meta--label--color);
+        --pf-v6-c-label--Color: var(--pf-t--global--border--color--on-secondary);
       }
     }
 
@@ -88,27 +80,13 @@
     flex-direction: column;
     align-items: flex-start;
     gap: var(--pf-t--global--font--size--sm);
-    color: var(--pf-t--chatbot-message--type--text--color--default);
+    color: var(--pf-t--global--text--color--regular);
   }
 
   &-and-actions {
     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