@patternfly/chatbot 1.0.0

package/src/Compare/Compare.tsx

@@ -0,0 +1,99 @@
+import type { MouseEvent as ReactMouseEvent, KeyboardEvent as ReactKeyboardEvent, PropsWithChildren } from 'react';
+import { useEffect, useState } 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] = useState('toggle-group-chatbot-1');
+  const [showFirstChatbot, setShowFirstChatbot] = useState(true);
+  const [showSecondChatbot, setShowSecondChatbot] = useState(false);
+
+  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 | ReactMouseEvent<any, MouseEvent> | ReactKeyboardEvent<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/DeepThinking/DeepThinking.scss

@@ -0,0 +1,24 @@
+.pf-chatbot__deep-thinking {
+  --pf-v6-c-card--BorderColor: var(--pf-t--global--border--color--default);
+  overflow: unset;
+}
+
+.pf-chatbot__deep-thinking-expandable-section {
+  --pf-v6-c-expandable-section--Gap: var(--pf-t--global--spacer--xs);
+}
+
+.pf-chatbot__deep-thinking-section {
+  display: flex;
+  flex-direction: column;
+  gap: var(--pf-t--global--spacer--xs);
+}
+
+.pf-chatbot__deep-thinking-subheading {
+  font-size: var(--pf-t--global--font--size--body--sm);
+  font-weight: var(--pf-t--global--font--weight--body--default);
+  color: var(--pf-t--global--text--color--subtle);
+}
+
+.pf-chatbot__deep-thinking-body {
+  color: var(--pf-t--global--text--color--subtle);
+}

package/src/DeepThinking/DeepThinking.test.tsx

@@ -0,0 +1,193 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import '@testing-library/jest-dom';
+import DeepThinking from './DeepThinking';
+
+describe('DeepThinking', () => {
+  const defaultProps = {
+    toggleContent: 'Show thinking'
+  };
+
+  it('should render with required props only', () => {
+    render(<DeepThinking {...defaultProps} />);
+    expect(screen.getByText('Show thinking')).toBeTruthy();
+  });
+
+  it('should render subheading when provided', () => {
+    const subheading = 'Thought for 3 seconds';
+    render(<DeepThinking {...defaultProps} subheading={subheading} />);
+    expect(screen.getByText(subheading)).toBeTruthy();
+  });
+
+  it('should render body content when provided', () => {
+    const body = "Here's why I think that";
+    render(<DeepThinking {...defaultProps} body={body} />);
+    expect(screen.getByText(body)).toBeTruthy();
+  });
+
+  it('should render with complex content including React elements', () => {
+    const body = (
+      <div>
+        <p>Complex body content</p>
+        <ul>
+          <li>Item 1</li>
+          <li>Item 2</li>
+        </ul>
+      </div>
+    );
+
+    render(<DeepThinking {...defaultProps} body={body} />);
+    expect(screen.getByText('Complex body content')).toBeTruthy();
+    expect(screen.getByText('Item 1')).toBeTruthy();
+    expect(screen.getByText('Item 2')).toBeTruthy();
+  });
+
+  it('should apply custom className from cardProps', () => {
+    const { container } = render(
+      <DeepThinking {...defaultProps} cardProps={{ className: 'custom-tool-response-class' }} />
+    );
+    expect(container.querySelector('.custom-tool-response-class')).toBeTruthy();
+  });
+
+  it('should pass through expandableSectionProps', () => {
+    render(<DeepThinking {...defaultProps} expandableSectionProps={{ className: 'custom-expandable-class' }} />);
+    expect(document.querySelector('.custom-expandable-class')).toBeTruthy();
+  });
+
+  it('should not render subheading span when subheading is not provided', () => {
+    const { container } = render(<DeepThinking {...defaultProps} />);
+    const subheadingContainer = container.querySelector('.pf-chatbot__tool-response-subheading');
+    expect(subheadingContainer).toBeFalsy();
+  });
+
+  it('should pass through cardBodyProps', () => {
+    render(
+      <DeepThinking {...defaultProps} body="Thinking content" cardBodyProps={{ className: 'custom-card-body-class' }} />
+    );
+
+    const cardBody = screen.getByText('Thinking content').closest('.pf-v6-c-card__body');
+    expect(cardBody).toHaveClass('custom-card-body-class');
+  });
+
+  it('Renders expanded by default', () => {
+    render(<DeepThinking {...defaultProps} body="Thinking content" />);
+
+    expect(screen.getByRole('button', { name: defaultProps.toggleContent })).toHaveAttribute('aria-expanded', 'true');
+    expect(screen.getByText('Thinking content')).toBeVisible();
+  });
+
+  it('Renders collapsed when isDefaultExpanded is false', () => {
+    render(<DeepThinking isDefaultExpanded={false} {...defaultProps} body="Thinking content" />);
+
+    expect(screen.getByRole('button', { name: defaultProps.toggleContent })).toHaveAttribute('aria-expanded', 'false');
+    expect(screen.getByText('Thinking content')).not.toBeVisible();
+  });
+
+  it('expandableSectionProps.isExpanded overrides isDefaultExpanded', () => {
+    render(
+      <DeepThinking
+        {...defaultProps}
+        isDefaultExpanded={false}
+        body="Thinking content"
+        expandableSectionProps={{ isExpanded: true }}
+      />
+    );
+
+    expect(screen.getByRole('button', { name: defaultProps.toggleContent })).toHaveAttribute('aria-expanded', 'true');
+    expect(screen.getByText('Thinking content')).toBeVisible();
+  });
+
+  it('expandableSectionProps.onToggle overrides internal onToggle behavior', async () => {
+    const user = userEvent.setup();
+    const customOnToggle = jest.fn();
+
+    render(
+      <DeepThinking
+        {...defaultProps}
+        isDefaultExpanded={false}
+        body="Thinking content"
+        expandableSectionProps={{ onToggle: customOnToggle }}
+      />
+    );
+
+    const toggleButton = screen.getByRole('button', { name: defaultProps.toggleContent });
+    expect(toggleButton).toHaveAttribute('aria-expanded', 'false');
+
+    await user.click(toggleButton);
+
+    expect(customOnToggle).toHaveBeenCalled();
+    expect(toggleButton).toHaveAttribute('aria-expanded', 'false');
+    expect(screen.getByText('Thinking content')).not.toBeVisible();
+  });
+
+  it('should render toggleContent as markdown when isToggleContentMarkdown is true', () => {
+    const toggleContent = '**Bold thinking**';
+    const { container } = render(<DeepThinking toggleContent={toggleContent} isToggleContentMarkdown />);
+    expect(container.querySelector('strong')).toBeTruthy();
+    expect(screen.getByText('Bold thinking')).toBeTruthy();
+  });
+
+  it('should not render toggleContent as markdown when isToggleContentMarkdown is false', () => {
+    const toggleContent = '**Bold thinking**';
+    const { container } = render(<DeepThinking toggleContent={toggleContent} />);
+    expect(container.querySelector('strong')).toBeFalsy();
+    expect(screen.getByText('**Bold thinking**')).toBeTruthy();
+  });
+
+  it('should render subheading as markdown when isSubheadingMarkdown is true', () => {
+    const subheading = '**Bold subheading**';
+    const { container } = render(<DeepThinking {...defaultProps} subheading={subheading} isSubheadingMarkdown />);
+    expect(container.querySelector('strong')).toBeTruthy();
+    expect(screen.getByText('Bold subheading')).toBeTruthy();
+  });
+
+  it('should not render subheading as markdown when isSubheadingMarkdown is false', () => {
+    const subheading = '**Bold subheading**';
+    render(<DeepThinking {...defaultProps} subheading={subheading} />);
+    expect(screen.getByText('**Bold subheading**')).toBeTruthy();
+  });
+
+  it('should render body as markdown when isBodyMarkdown is true', () => {
+    const body = '**Bold body**';
+    const { container } = render(<DeepThinking {...defaultProps} body={body} isBodyMarkdown />);
+    expect(container.querySelector('strong')).toBeTruthy();
+    expect(screen.getByText('Bold body')).toBeTruthy();
+  });
+
+  it('should not render body as markdown when isBodyMarkdown is false', () => {
+    const body = '**Bold body**';
+    render(<DeepThinking {...defaultProps} body={body} />);
+    expect(screen.getByText('**Bold body**')).toBeTruthy();
+  });
+
+  it('should pass markdownContentProps to MarkdownContent component', () => {
+    const body = '**Bold body**';
+    const { container } = render(
+      <DeepThinking {...defaultProps} body={body} isBodyMarkdown markdownContentProps={{ isPrimary: true }} />
+    );
+    expect(container.querySelector('.pf-m-primary')).toBeTruthy();
+  });
+
+  it('should render spinner when isLoading is true', () => {
+    render(<DeepThinking {...defaultProps} isLoading />);
+    expect(screen.getByLabelText('Contents')).toBeInTheDocument();
+  });
+
+  it('should not render spinner when isLoading is false', () => {
+    render(<DeepThinking {...defaultProps} />);
+    expect(screen.queryByLabelText('Contents')).not.toBeInTheDocument();
+  });
+
+  it('should pass spinnerProps to Spinner component', () => {
+    render(<DeepThinking {...defaultProps} isLoading spinnerProps={{ 'aria-label': 'Custom label' }} />);
+    expect(screen.getByLabelText('Custom label')).toBeInTheDocument();
+  });
+
+  it('should not render spinner when isToggleContentMarkdown is true', () => {
+    const toggleContent = '**Bold thinking**';
+    render(<DeepThinking toggleContent={toggleContent} isToggleContentMarkdown isLoading />);
+
+    expect(screen.queryByLabelText('Contents')).not.toBeInTheDocument();
+    expect(screen.getByText('Bold thinking')).toBeInTheDocument();
+  });
+});

package/src/DeepThinking/DeepThinking.tsx

@@ -0,0 +1,130 @@
+// ============================================================================
+// Deep Thinking
+// ============================================================================
+import {
+  Card,
+  CardBody,
+  CardBodyProps,
+  CardProps,
+  ExpandableSection,
+  ExpandableSectionProps,
+  Spinner,
+  SpinnerProps
+} from '@patternfly/react-core';
+import { useState, type FunctionComponent } from 'react';
+import MarkdownContent from '../MarkdownContent';
+import type { MarkdownContentProps } from '../MarkdownContent';
+
+export interface DeepThinkingProps {
+  /** Toggle content shown for expandable section  */
+  toggleContent: React.ReactNode;
+  /** Flag indicating whether the expandable content is expanded by default. */
+  isDefaultExpanded?: boolean;
+  /** Additional props passed to expandable section */
+  expandableSectionProps?: Omit<ExpandableSectionProps, 'ref'>;
+  /** Subheading rendered inside expandable section */
+  subheading?: string;
+  /** Body text rendered inside expandable section */
+  body?: React.ReactNode | string;
+  /** Additional props passed to main card */
+  cardProps?: CardProps;
+  /** Additional props passed to main card body */
+  cardBodyProps?: CardBodyProps;
+  /** Whether to enable markdown rendering for toggleContent. When true and toggleContent is a string, it will be parsed as markdown. */
+  isToggleContentMarkdown?: boolean;
+  /** Whether to enable markdown rendering for subheading. When true, subheading will be parsed as markdown. */
+  isSubheadingMarkdown?: boolean;
+  /** Whether to enable markdown rendering for body. When true and body is a string, it will be parsed as markdown. */
+  isBodyMarkdown?: boolean;
+  /** Props passed to MarkdownContent component when markdown is enabled */
+  markdownContentProps?: Omit<MarkdownContentProps, 'content'>;
+  /** Whether to retain styles in the MarkdownContent component. Defaults to false. */
+  shouldRetainStyles?: boolean;
+  /** Flag indicating whether the deep thinking is loading or not. */
+  isLoading?: boolean;
+  /** Additional props for the spinner component when isLoading is true. */
+  spinnerProps?: SpinnerProps;
+}
+
+export const DeepThinking: FunctionComponent<DeepThinkingProps> = ({
+  body,
+  cardProps,
+  expandableSectionProps,
+  subheading,
+  toggleContent,
+  isDefaultExpanded = true,
+  cardBodyProps,
+  isToggleContentMarkdown,
+  isSubheadingMarkdown,
+  isBodyMarkdown,
+  markdownContentProps,
+  shouldRetainStyles = false,
+  isLoading = false,
+  spinnerProps
+}: DeepThinkingProps) => {
+  const [isExpanded, setIsExpanded] = useState(isDefaultExpanded);
+
+  const onToggle = (_event: React.MouseEvent, isExpanded: boolean) => {
+    setIsExpanded(isExpanded);
+  };
+
+  const renderToggleContent = () => {
+    if (isToggleContentMarkdown && typeof toggleContent === 'string') {
+      return (
+        <MarkdownContent shouldRetainStyles={shouldRetainStyles} content={toggleContent} {...markdownContentProps} />
+      );
+    }
+    return (
+      <>
+        {isLoading && <Spinner diameter="1em" isInline style={{ marginInlineEnd: '8px' }} {...spinnerProps} />}
+        {toggleContent}
+      </>
+    );
+  };
+
+  const renderSubheading = () => {
+    if (!subheading) {
+      return null;
+    }
+    if (isSubheadingMarkdown) {
+      return <MarkdownContent shouldRetainStyles={shouldRetainStyles} content={subheading} {...markdownContentProps} />;
+    }
+    return subheading;
+  };
+
+  const renderBody = () => {
+    if (!body) {
+      return null;
+    }
+    if (isBodyMarkdown && typeof body === 'string') {
+      return <MarkdownContent shouldRetainStyles={shouldRetainStyles} content={body} {...markdownContentProps} />;
+    }
+    return body;
+  };
+
+  return (
+    <Card isCompact className="pf-chatbot__deep-thinking" {...cardProps}>
+      <CardBody {...cardBodyProps}>
+        <ExpandableSection
+          toggleContent={renderToggleContent()}
+          onToggle={onToggle}
+          isExpanded={isExpanded}
+          isIndented
+          className="pf-chatbot__deep-thinking-expandable-section"
+          {...expandableSectionProps}
+        >
+          <div className="pf-chatbot__deep-thinking-section">
+            {subheading && (
+              <div className="pf-chatbot__deep-thinking-subheading">
+                <span>{renderSubheading()}</span>
+              </div>
+            )}
+            {body && <div className="pf-chatbot__deep-thinking-body">{renderBody()}</div>}
+          </div>
+        </ExpandableSection>
+      </CardBody>
+    </Card>
+  );
+};
+
+export default DeepThinking;

package/src/DeepThinking/index.ts

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

package/src/FileDetails/FileDetails.scss

@@ -0,0 +1,35 @@
+.pf-chatbot__code-language {
+  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: var(--pf-t--global--font--weight--body--bold);
+}
+
+.pf-chatbot__code-icon {
+  color: var(--pf-t--global--icon--color--status--custom--default);
+  width: 24px;
+  height: 24px;
+}
+
+.pf-chatbot__image-icon {
+  color: var(--pf-t--global--icon--color--status--info--default);
+  width: 24px;
+  height: 24px;
+}
+
+.pf-chatbot__code-fileName {
+  font-size: var(--pf-t--global--font--size--body--default);
+}
+
+.pf-chatbot__code-file-size {
+  color: var(--pf-t--global--text--color--subtle);
+}
+
+// This is used in demos only
+.pf-chatbot__file-details-example {
+  background: var(--pf-t--global--background--color--secondary--default);
+  height: 100px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}

package/src/FileDetails/FileDetails.test.tsx

@@ -0,0 +1,38 @@
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import FileDetails from './FileDetails';
+
+describe('FileDetails', () => {
+  it('should render file details', () => {
+    const { container } = render(<FileDetails fileName="test.txt" />);
+    expect(container).toMatchSnapshot();
+  });
+
+  it('should render file details correctly if an extension we support is passed in', () => {
+    render(<FileDetails fileName="test.txt" languageTestId="language" />);
+    expect(screen.getByText('test')).toBeTruthy();
+    expect(screen.queryByText('test.txt')).toBeFalsy();
+    expect(screen.getByText('TEXT')).toBeTruthy();
+    expect(screen.getByTestId('language')).toBeTruthy();
+  });
+  it('should skip language if we do not support an extension', () => {
+    render(<FileDetails fileName="test.joke" languageTestId="language" />);
+    expect(screen.getByText('test')).toBeTruthy();
+    expect(screen.queryByTestId('language')).toBeFalsy();
+  });
+  it('should support image formats by rendering extension differently', () => {
+    render(<FileDetails fileName="test.svg" languageTestId="language" />);
+    expect(screen.getByText('test')).toBeTruthy();
+    expect(screen.queryByText('test.svg')).toBeFalsy();
+    expect(screen.queryByTestId('language')).toBeFalsy();
+  });
+  it('should handle truncation differently', () => {
+    render(<FileDetails fileName="test.svg" languageTestId="language" hasTruncation={false} />);
+    expect(screen.getByText('test.svg')).toBeTruthy();
+    expect(screen.queryByTestId('language')).toBeFalsy();
+  });
+  it('should include file size if prop passed in', () => {
+    render(<FileDetails fileName="test.joke" languageTestId="language" fileSize="100MB" />);
+    expect(screen.getByText('100MB')).toBeTruthy();
+  });
+});