@patternfly/chatbot 6.3.0-prerelease.2 → 6.3.0-prerelease.21

package/src/Message/CodeBlockMessage/CodeBlockMessage.tsx

@@ -1,37 +1,80 @@
 // ============================================================================
 // Chatbot Main - Message - Content - Code Block
 // ============================================================================
-import React from 'react';
+import { useState, useRef, useId, useCallback, useEffect } from 'react';
 import SyntaxHighlighter from 'react-syntax-highlighter';
 import { obsidian } from 'react-syntax-highlighter/dist/esm/styles/hljs';
 // Import PatternFly components
-import { CodeBlock, CodeBlockAction, CodeBlockCode, Button, Tooltip } from '@patternfly/react-core';
+import {
+  CodeBlock,
+  CodeBlockAction,
+  CodeBlockCode,
+  Button,
+  Tooltip,
+  ExpandableSection,
+  ExpandableSectionToggle,
+  ExpandableSectionProps,
+  ExpandableSectionToggleProps,
+  ExpandableSectionVariant
+} from '@patternfly/react-core';
 
 import { CheckIcon } from '@patternfly/react-icons/dist/esm/icons/check-icon';
 import { CopyIcon } from '@patternfly/react-icons/dist/esm/icons/copy-icon';
-import { ExtraProps } from 'react-markdown';
+import { ExpandableSectionForSyntaxHighlighter } from './ExpandableSectionForSyntaxHighlighter';
+
+export interface CodeBlockMessageProps {
+  /** Content rendered in code block */
+  children?: React.ReactNode;
+  /** Aria label applied to code block */
+  'aria-label'?: string;
+  /** Class name applied to code block */
+  className?: string;
+  /** Whether code block is expandable */
+  isExpandable?: boolean;
+  /** Additional props passed to expandable section if isExpandable is applied */
+  expandableSectionProps?: Omit<ExpandableSectionProps, 'ref'>;
+  /** Additional props passed to expandable toggle if isExpandable is applied */
+  expandableSectionToggleProps?: ExpandableSectionToggleProps;
+  /** Link text applied to expandable toggle when expanded */
+  expandedText?: string;
+  /** Link text applied to expandable toggle when collapsed */
+  collapsedText?: string;
+}
 
 const CodeBlockMessage = ({
   children,
   className,
   'aria-label': ariaLabel,
+  isExpandable = false,
+  expandableSectionProps,
+  expandableSectionToggleProps,
+  expandedText = 'Show less',
+  collapsedText = 'Show more',
   ...props
-}: JSX.IntrinsicElements['code'] & ExtraProps) => {
-  const [copied, setCopied] = React.useState(false);
+}: CodeBlockMessageProps) => {
+  const [copied, setCopied] = useState(false);
+  const [isExpanded, setIsExpanded] = useState(false);
 
-  const buttonRef = React.useRef();
-  const tooltipID = React.useId();
+  const buttonRef = useRef();
+  const tooltipID = useId();
+  const toggleId = useId();
+  const contentId = useId();
+  const codeBlockRef = useRef<HTMLDivElement>(null);
 
   const language = /language-(\w+)/.exec(className || '')?.[1];
 
+  const onToggle = (isExpanded) => {
+    setIsExpanded(isExpanded);
+  };
+
   // Handle clicking copy button
-  const handleCopy = React.useCallback((event, text) => {
+  const handleCopy = useCallback((event, text) => {
     navigator.clipboard.writeText(text.toString());
     setCopied(true);
   }, []);
 
   // Reset copied state
-  React.useEffect(() => {
+  useEffect(() => {
     if (copied) {
       const timer = setTimeout(() => {
         setCopied(false);
@@ -56,7 +99,7 @@ const CodeBlockMessage = ({
         {language && <div className="pf-chatbot__message-code-block-language">{language}</div>}
         <Button
           ref={buttonRef}
-          aria-label={ariaLabel ?? 'Copy code button'}
+          aria-label={ariaLabel ?? 'Copy code'}
           variant="plain"
           className="pf-chatbot__button--copy"
           onClick={(event) => handleCopy(event, children)}
@@ -69,17 +112,61 @@ const CodeBlockMessage = ({
   );
 
   return (
-    <div className="pf-chatbot__message-code-block">
+    <div className="pf-chatbot__message-code-block" ref={codeBlockRef}>
       <CodeBlock actions={actions}>
         <CodeBlockCode>
-          {language ? (
-            <SyntaxHighlighter {...props} language={language} style={obsidian} PreTag="div" CodeTag="div" wrapLongLines>
-              {String(children).replace(/\n$/, '')}
-            </SyntaxHighlighter>
-          ) : (
-            <>{children}</>
-          )}
+          <>
+            {language ? (
+              // SyntaxHighlighter doesn't work with ExpandableSection because it targets the direct child
+              // Forked for now and adjusted to match what we need
+              <ExpandableSectionForSyntaxHighlighter
+                variant={ExpandableSectionVariant.truncate}
+                isExpanded={isExpanded}
+                isDetached
+                toggleId={toggleId}
+                contentId={contentId}
+                language={language}
+                {...expandableSectionProps}
+              >
+                <SyntaxHighlighter
+                  {...props}
+                  language={language}
+                  style={obsidian}
+                  PreTag="div"
+                  CodeTag="div"
+                  wrapLongLines
+                >
+                  {String(children).replace(/\n$/, '')}
+                </SyntaxHighlighter>
+              </ExpandableSectionForSyntaxHighlighter>
+            ) : (
+              <ExpandableSection
+                variant={ExpandableSectionVariant.truncate}
+                isExpanded={isExpanded}
+                isDetached
+                toggleId={toggleId}
+                contentId={contentId}
+                {...expandableSectionProps}
+              >
+                {children}
+              </ExpandableSection>
+            )}
+          </>
         </CodeBlockCode>
+        {isExpandable && (
+          <ExpandableSectionToggle
+            isExpanded={isExpanded}
+            onToggle={onToggle}
+            direction="up"
+            toggleId={toggleId}
+            contentId={contentId}
+            hasTruncatedContent
+            className="pf-chatbot__message-code-toggle"
+            {...expandableSectionToggleProps}
+          >
+            {isExpanded ? expandedText : collapsedText}
+          </ExpandableSectionToggle>
+        )}
       </CodeBlock>
     </div>
   );

package/src/Message/CodeBlockMessage/ExpandableSectionForSyntaxHighlighter.tsx

@@ -0,0 +1,220 @@
+import { Component, createRef } from 'react';
+import styles from '@patternfly/react-styles/css/components/ExpandableSection/expandable-section';
+import { css } from '@patternfly/react-styles';
+import lineClamp from '@patternfly/react-tokens/dist/esm/c_expandable_section_m_truncate__content_LineClamp';
+import { debounce, getResizeObserver, getUniqueId, PickOptional } from '@patternfly/react-core';
+
+export enum ExpandableSectionVariant {
+  default = 'default',
+  truncate = 'truncate'
+}
+
+/** The main expandable section component. */
+
+export interface ExpandableSectionProps extends Omit<React.HTMLProps<HTMLDivElement>, 'onToggle'> {
+  /** Content rendered inside the expandable section. */
+  children?: React.ReactNode;
+  /** Additional classes added to the expandable section. */
+  className?: string;
+  /** Id of the content of the expandable section. When passing in the isDetached property, this
+   * property's value should match the contentId property of the expandable section toggle sub-component.
+   */
+  contentId?: string;
+  /** Id of the toggle of the expandable section, which provides an accessible name to the
+   * expandable section content via the aria-labelledby attribute. When the isDetached property
+   * is also passed in, the value of this property must match the toggleId property of the
+   * expandable section toggle sub-component.
+   */
+  toggleId?: string;
+  /** Display size variant. Set to "lg" for disclosure styling. */
+  displaySize?: 'default' | 'lg';
+  /** Indicates the expandable section has a detached toggle. */
+  isDetached?: boolean;
+  /** Flag to indicate if the content is expanded. */
+  isExpanded?: boolean;
+  /** Flag to indicate if the content is indented. */
+  isIndented?: boolean;
+  /** Flag to indicate the width of the component is limited. Set to "true" for disclosure styling. */
+  isWidthLimited?: boolean;
+  /** Truncates the expandable content to the specified number of lines when using the
+   * "truncate" variant.
+   */
+  truncateMaxLines?: number;
+  /** Determines the variant of the expandable section. When passing in "truncate" as the
+   * variant, the expandable content will be truncated after 3 lines by default.
+   */
+  variant?: 'default' | 'truncate';
+  language?: string;
+}
+
+interface ExpandableSectionState {
+  isExpanded: boolean;
+  hasToggle: boolean;
+  previousWidth: number | undefined;
+}
+
+const setLineClamp = (element: HTMLDivElement | null, lines?: number, language?: string, isExpanded?: boolean) => {
+  if (!element || !lines || lines < 1 || typeof isExpanded === 'undefined') {
+    return;
+  }
+
+  if (language) {
+    const selector = `.language-${language.toLowerCase()}`;
+    const childElement = element.querySelector(selector) as HTMLDivElement;
+
+    if (!childElement) {
+      return;
+    }
+    if (isExpanded) {
+      // Reset all truncation-related styles to their default values
+      childElement.style.removeProperty('-webkit-line-clamp');
+      childElement.style.removeProperty('display');
+      childElement.style.removeProperty('-webkit-box-orient');
+      childElement.style.removeProperty('overflow');
+    } else {
+      childElement.style.setProperty('-webkit-line-clamp', lines.toString());
+      childElement.style.setProperty('display', '-webkit-box');
+      childElement.style.setProperty('-webkit-box-orient', 'vertical');
+      childElement.style.setProperty('overflow', 'hidden');
+    }
+  }
+};
+
+class ExpandableSectionForSyntaxHighlighter extends Component<ExpandableSectionProps, ExpandableSectionState> {
+  static displayName = 'ExpandableSection';
+  constructor(props: ExpandableSectionProps) {
+    super(props);
+
+    this.state = {
+      isExpanded: props.isExpanded ?? false,
+      hasToggle: true,
+      previousWidth: undefined
+    };
+  }
+
+  expandableContentRef = createRef<HTMLDivElement>();
+  /* eslint-disable-next-line */
+  observer: any = () => {};
+
+  static defaultProps: PickOptional<ExpandableSectionProps> = {
+    className: '',
+    isDetached: false,
+    displaySize: 'default',
+    isWidthLimited: false,
+    isIndented: false,
+    variant: 'default'
+  };
+
+  componentDidMount() {
+    if (this.props.variant === ExpandableSectionVariant.truncate) {
+      const expandableContent = this.expandableContentRef.current;
+      if (expandableContent) {
+        this.setState({ previousWidth: expandableContent.offsetWidth });
+        this.observer = getResizeObserver(expandableContent, this.handleResize, false);
+
+        if (this.props.truncateMaxLines) {
+          setLineClamp(expandableContent, this.props.truncateMaxLines, this.props.language, this.state.isExpanded);
+        }
+      }
+
+      this.checkToggleVisibility();
+    }
+  }
+
+  componentDidUpdate(prevProps: ExpandableSectionProps) {
+    if (
+      this.props.variant === ExpandableSectionVariant.truncate &&
+      (prevProps.truncateMaxLines !== this.props.truncateMaxLines ||
+        prevProps.children !== this.props.children ||
+        prevProps.isExpanded !== this.props.isExpanded)
+    ) {
+      const expandableContent = this.expandableContentRef.current;
+      setLineClamp(expandableContent, this.props.truncateMaxLines, this.props.language, this.props.isExpanded);
+      this.checkToggleVisibility();
+    }
+  }
+
+  componentWillUnmount() {
+    if (this.props.variant === ExpandableSectionVariant.truncate) {
+      this.observer();
+    }
+  }
+
+  checkToggleVisibility = () => {
+    if (this.expandableContentRef?.current) {
+      const maxLines = this.props.truncateMaxLines || parseInt(lineClamp.value);
+      const totalLines =
+        this.expandableContentRef.current.scrollHeight /
+        parseInt(getComputedStyle(this.expandableContentRef.current).lineHeight);
+
+      this.setState({
+        hasToggle: totalLines > maxLines
+      });
+    }
+  };
+
+  resize = () => {
+    if (this.expandableContentRef.current) {
+      const { offsetWidth } = this.expandableContentRef.current;
+      if (this.state.previousWidth !== offsetWidth) {
+        this.setState({ previousWidth: offsetWidth });
+        this.checkToggleVisibility();
+      }
+    }
+  };
+  handleResize = debounce(this.resize, 250);
+
+  render() {
+    const {
+      className,
+      children,
+      isExpanded,
+      isDetached,
+      displaySize,
+      isWidthLimited,
+      isIndented,
+      contentId,
+      toggleId,
+      variant,
+      ...props
+    } = this.props;
+
+    if (isDetached && !toggleId) {
+      /* eslint-disable no-console */
+      console.warn(
+        'ExpandableSection: The toggleId value must be passed in and must match the toggleId of the ExpandableSectionToggle.'
+      );
+    }
+
+    const uniqueContentId = contentId || getUniqueId('expandable-section-content');
+    const uniqueToggleId = toggleId || getUniqueId('expandable-section-toggle');
+
+    return (
+      <div
+        className={css(
+          styles.expandableSection,
+          isExpanded && styles.modifiers.expanded,
+          displaySize === 'lg' && styles.modifiers.displayLg,
+          isWidthLimited && styles.modifiers.limitWidth,
+          isIndented && styles.modifiers.indented,
+          variant === ExpandableSectionVariant.truncate && styles.modifiers.truncate,
+          className
+        )}
+        {...props}
+      >
+        <div
+          ref={this.expandableContentRef}
+          className={css(styles.expandableSectionContent)}
+          hidden={variant !== ExpandableSectionVariant.truncate && !isExpanded}
+          id={uniqueContentId}
+          aria-labelledby={uniqueToggleId}
+          role="region"
+        >
+          {children}
+        </div>
+      </div>
+    );
+  }
+}
+
+export { ExpandableSectionForSyntaxHighlighter };

package/src/Message/ErrorMessage/ErrorMessage.tsx

@@ -2,7 +2,6 @@
 // Chatbot Main - Message - Content - Error
 // ============================================================================
 
-import React from 'react';
 import { Alert, AlertProps } from '@patternfly/react-core';
 
 const ErrorMessage = ({ title, actionLinks, children, ...props }: AlertProps) => (

package/src/Message/ImageMessage/ImageMessage.tsx

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

package/src/Message/LinkMessage/LinkMessage.tsx

@@ -2,7 +2,6 @@
 // Chatbot Main - Message - Content - Link
 // ============================================================================
 
-import React from 'react';
 import { Button, ButtonProps } from '@patternfly/react-core';
 import { ExternalLinkSquareAltIcon } from '@patternfly/react-icons';
 

package/src/Message/ListMessage/ListItemMessage.tsx

@@ -2,7 +2,6 @@
 // Chatbot Main - Message - Content - List
 // ============================================================================
 
-import React from 'react';
 import { ExtraProps } from 'react-markdown';
 import { ListItem } from '@patternfly/react-core';
 

package/src/Message/ListMessage/OrderedListMessage.tsx

@@ -2,7 +2,6 @@
 // Chatbot Main - Message - Content - List
 // ============================================================================
 
-import React from 'react';
 import { ExtraProps } from 'react-markdown';
 import { List, ListComponent, OrderType } from '@patternfly/react-core';
 

package/src/Message/ListMessage/UnorderedListMessage.tsx

@@ -2,7 +2,6 @@
 // Chatbot Main - Message - Content - List
 // ============================================================================
 
-import React from 'react';
 import { ExtraProps } from 'react-markdown';
 import { List } from '@patternfly/react-core';
 

package/src/Message/Message.scss

@@ -104,3 +104,30 @@
 @import './MessageLoading';
 @import './CodeBlockMessage/CodeBlockMessage';
 @import './TextMessage/TextMessage';
+
+// ============================================================================
+// Information density styles
+// ============================================================================
+.pf-chatbot.pf-m-compact {
+  .pf-chatbot__message {
+    gap: var(--pf-t--global--spacer--md);
+    padding-bottom: var(--pf-t--global--spacer--sm);
+
+    .pf-chatbot__message-contents  {
+      gap: var(--pf-t--global--spacer--xs);
+    }
+  }
+
+  .pf-chatbot__message-name {
+    font-size: var(--pf-t--global--font--size--xs);
+  }
+
+  .pf-chatbot__message-avatar.pf-chatbot__message-avatar--round.pf-v6-c-avatar {
+    --pf-v6-c-avatar--Width: 2rem;
+    --pf-v6-c-avatar--Height: 2rem;
+  }
+
+  .pf-chatbot__message-contents {
+    gap: var(--pf-t--global--spacer--xs);
+  }
+}

package/src/Message/Message.test.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import { Fragment } from 'react';
 import { render, screen } from '@testing-library/react';
 import '@testing-library/jest-dom';
 import Message from './Message';
@@ -142,18 +142,20 @@ const EMPTY_TABLE = `
 
 const IMAGE = `![Multi-colored wavy lines on a black background](https://cdn.dribbble.com/userupload/10651749/file/original-8a07b8e39d9e8bf002358c66fce1223e.gif)`;
 
+const INLINE_IMAGE = `inline text ![Multi-colored wavy lines on a black background](https://cdn.dribbble.com/userupload/10651749/file/original-8a07b8e39d9e8bf002358c66fce1223e.gif)`;
+
 const ERROR = {
   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 checkListItemsRendered = () => {
@@ -334,6 +336,27 @@ describe('Message', () => {
     await userEvent.click(quickResponse);
     expect(spy).toHaveBeenCalledTimes(1);
   });
+  it('should be able to handle isCompact', async () => {
+    render(
+      <Message
+        avatar="./img"
+        role="bot"
+        name="Bot"
+        content="Hi"
+        quickResponses={[
+          {
+            id: '1',
+            content: 'Yes',
+            onClick: jest.fn(),
+            className: 'test'
+          }
+        ]}
+        isCompact
+      />
+    );
+    const parent = screen.getByRole('button', { name: /Yes/i }).parentNode;
+    expect(parent).toHaveClass('pf-m-compact');
+  });
   it('should be able to show more than 1 quick response', async () => {
     const spy = jest.fn();
     render(
@@ -405,6 +428,8 @@ describe('Message', () => {
           // eslint-disable-next-line no-console
           share: { onClick: () => console.log('Share') },
           // eslint-disable-next-line no-console
+          download: { onClick: () => console.log('Download') },
+          // eslint-disable-next-line no-console
           listen: { onClick: () => console.log('Listen') }
         }}
       />
@@ -431,6 +456,8 @@ describe('Message', () => {
           // eslint-disable-next-line no-console
           share: { onClick: () => console.log('Share') },
           // eslint-disable-next-line no-console
+          download: { onClick: () => console.log('Download') },
+          // eslint-disable-next-line no-console
           listen: { onClick: () => console.log('Listen') }
         }}
       />
@@ -464,7 +491,37 @@ describe('Message', () => {
   it('should render code correctly', () => {
     render(<Message avatar="./img" role="user" name="User" content={CODE_MESSAGE} />);
     expect(screen.getByText('Here is some YAML code:')).toBeTruthy();
-    expect(screen.getByRole('button', { name: 'Copy code button' })).toBeTruthy();
+    expect(screen.getByRole('button', { name: 'Copy code' })).toBeTruthy();
+    expect(screen.getByText(/yaml/)).toBeTruthy();
+    expect(screen.getByText(/apiVersion:/i)).toBeTruthy();
+    expect(screen.getByText(/helm.openshift.io\/v1beta1/i)).toBeTruthy();
+    expect(screen.getByText(/metadata:/i)).toBeTruthy();
+    expect(screen.getByText(/name:/i)).toBeTruthy();
+    expect(screen.getByText(/azure-sample-repo0oooo00ooo/i)).toBeTruthy();
+    expect(screen.getByText(/spec/i)).toBeTruthy();
+    expect(screen.getByText(/connectionConfig:/i)).toBeTruthy();
+    expect(screen.getByText(/url:/i)).toBeTruthy();
+    expect(
+      screen.getByText(/https:\/\/raw.githubusercontent.com\/Azure-Samples\/helm-charts\/master\/docs/i)
+    ).toBeTruthy();
+  });
+  it('should render expandable code correctly', () => {
+    render(
+      <Message avatar="./img" role="user" name="User" content={CODE_MESSAGE} codeBlockProps={{ isExpandable: true }} />
+    );
+    expect(screen.getByText('Here is some YAML code:')).toBeTruthy();
+    expect(screen.getByRole('button', { name: 'Copy code' })).toBeTruthy();
+    expect(screen.getByText(/yaml/)).toBeTruthy();
+    expect(screen.getByText(/apiVersion/i)).toBeTruthy();
+    expect(screen.getByRole('button', { name: /Show more/i })).toBeTruthy();
+  });
+  it('should handle click on expandable code correctly', async () => {
+    render(
+      <Message avatar="./img" role="user" name="User" content={CODE_MESSAGE} codeBlockProps={{ isExpandable: true }} />
+    );
+    const button = screen.getByRole('button', { name: /Show more/i });
+    await userEvent.click(button);
+    expect(screen.getByRole('button', { name: /Show less/i })).toBeTruthy();
     expect(screen.getByText(/yaml/)).toBeTruthy();
     expect(screen.getByText(/apiVersion:/i)).toBeTruthy();
     expect(screen.getByText(/helm.openshift.io\/v1beta1/i)).toBeTruthy();
@@ -482,8 +539,8 @@ describe('Message', () => {
     // need explicit setup since RTL stubs clipboard if you do this
     const user = userEvent.setup();
     render(<Message avatar="./img" role="user" name="User" content={CODE_MESSAGE} />);
-    expect(screen.getByRole('button', { name: 'Copy code button' })).toBeTruthy();
-    await user.click(screen.getByRole('button', { name: 'Copy code button' }));
+    expect(screen.getByRole('button', { name: 'Copy code' })).toBeTruthy();
+    await user.click(screen.getByRole('button', { name: 'Copy code' }));
     const clipboardText = await navigator.clipboard.readText();
     expect(clipboardText.trim()).toEqual(CODE.trim());
   });
@@ -766,6 +823,13 @@ describe('Message', () => {
     render(<Message avatar="./img" role="user" name="User" content={IMAGE} />);
     expect(screen.getByRole('img', { name: /Multi-colored wavy lines on a black background/i })).toBeTruthy();
   });
+  it('inline image parent should have class pf-chatbot__message-and-actions', () => {
+    render(<Message avatar="./img" role="user" name="User" content={INLINE_IMAGE} />);
+    expect(screen.getByRole('img', { name: /Multi-colored wavy lines on a black background/i })).toBeTruthy();
+    expect(
+      screen.getByRole('img', { name: /Multi-colored wavy lines on a black background/i }).parentElement
+    ).toHaveClass('pf-chatbot__message-and-actions');
+  });
   it('should handle external links correctly', () => {
     render(<Message avatar="./img" role="user" name="User" content={`[PatternFly](https://www.patternfly.org/)`} />);
     // we are mocking rehype libraries, so we can't test target _blank addition on links directly with RTL