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

package/src/SourcesCard/SourcesCard.tsx

@@ -10,14 +10,18 @@ import {
   ButtonVariant,
   Card,
   CardBody,
+  CardBodyProps,
   CardFooter,
+  CardFooterProps,
   CardProps,
   CardTitle,
+  CardTitleProps,
   ExpandableSection,
   ExpandableSectionVariant,
   Icon,
   pluralize,
-  Truncate
+  Truncate,
+  TruncateProps
 } from '@patternfly/react-core';
 import { ExternalLinkSquareAltIcon } from '@patternfly/react-icons';
 
@@ -34,6 +38,8 @@ export interface SourcesCardProps extends CardProps {
   sources: {
     /** Title of sources card */
     title?: string;
+    /** Subtitle of sources card */
+    subtitle?: string;
     /** Link to source */
     link: string;
     /** Body of sources card */
@@ -46,6 +52,10 @@ export interface SourcesCardProps extends CardProps {
     onClick?: React.MouseEventHandler<HTMLButtonElement>;
     /** Any additional props applied to the title of the Sources card  */
     titleProps?: ButtonProps;
+    /** Custom footer applied to the Sources card */
+    footer?: React.ReactNode;
+    /** Additional props passed to Truncate component */
+    truncateProps?: TruncateProps;
   }[];
   /** Label for the English word "source" */
   sourceWord?: string;
@@ -65,6 +75,12 @@ export interface SourcesCardProps extends CardProps {
   showMoreWords?: string;
   /** Label for English words "show less" */
   showLessWords?: string;
+  /** Additional props passed to card title */
+  cardTitleProps?: CardTitleProps;
+  /** Additional props passed to card body */
+  cardBodyProps?: CardBodyProps;
+  /** Additional props passed to card footer */
+  cardFooterProps?: CardFooterProps;
 }
 
 const SourcesCard: FunctionComponent<SourcesCardProps> = ({
@@ -82,6 +98,9 @@ const SourcesCard: FunctionComponent<SourcesCardProps> = ({
   showMoreWords = 'show more',
   showLessWords = 'show less',
   isCompact,
+  cardTitleProps,
+  cardBodyProps,
+  cardFooterProps,
   ...props
 }: SourcesCardProps) => {
   const [page, setPage] = useState(1);
@@ -96,9 +115,9 @@ const SourcesCard: FunctionComponent<SourcesCardProps> = ({
     onSetPage && onSetPage(_evt, newPage);
   };
 
-  const renderTitle = (title?: string) => {
+  const renderTitle = (title?: string, truncateProps?: TruncateProps) => {
     if (title) {
-      return <Truncate content={title} />;
+      return <Truncate content={title} {...truncateProps} />;
     }
     return `Source ${page}`;
   };
@@ -107,24 +126,32 @@ const SourcesCard: FunctionComponent<SourcesCardProps> = ({
     <div className="pf-chatbot__source">
       <span>{pluralize(sources.length, sourceWord, sourceWordPlural)}</span>
       <Card isCompact={isCompact} className="pf-chatbot__sources-card" {...props}>
-        <CardTitle className="pf-chatbot__sources-card-title">
-          <Button
-            component="a"
-            variant={ButtonVariant.link}
-            href={sources[page - 1].link}
-            icon={sources[page - 1].isExternal ? <ExternalLinkSquareAltIcon /> : undefined}
-            iconPosition="end"
-            isInline
-            rel={sources[page - 1].isExternal ? 'noreferrer' : undefined}
-            target={sources[page - 1].isExternal ? '_blank' : undefined}
-            onClick={sources[page - 1].onClick ?? undefined}
-            {...sources[page - 1].titleProps}
-          >
-            {renderTitle(sources[page - 1].title)}
-          </Button>
+        <CardTitle className="pf-chatbot__sources-card-title" {...cardTitleProps}>
+          <div className="pf-chatbot__sources-card-title-container">
+            <Button
+              component="a"
+              variant={ButtonVariant.link}
+              href={sources[page - 1].link}
+              icon={sources[page - 1].isExternal ? <ExternalLinkSquareAltIcon /> : undefined}
+              iconPosition="end"
+              isInline
+              rel={sources[page - 1].isExternal ? 'noreferrer' : undefined}
+              target={sources[page - 1].isExternal ? '_blank' : undefined}
+              onClick={sources[page - 1].onClick ?? undefined}
+              {...sources[page - 1].titleProps}
+            >
+              {renderTitle(sources[page - 1].title, sources[page - 1].truncateProps)}
+            </Button>
+            {sources[page - 1].subtitle && (
+              <span className="pf-chatbot__sources-card-subtitle">{sources[page - 1].subtitle}</span>
+            )}
+          </div>
         </CardTitle>
         {sources[page - 1].body && (
-          <CardBody className={`pf-chatbot__sources-card-body`}>
+          <CardBody
+            className={`pf-chatbot__sources-card-body ${sources[page - 1].footer ? 'pf-chatbot__compact-sources-card-body' : undefined}`}
+            {...cardBodyProps}
+          >
             {sources[page - 1].hasShowMore ? (
               // prevents extra VO announcements of button text - parent Message has aria-live
               <div aria-live="off">
@@ -143,68 +170,77 @@ const SourcesCard: FunctionComponent<SourcesCardProps> = ({
             )}
           </CardBody>
         )}
-        {sources.length > 1 && (
-          <CardFooter className="pf-chatbot__sources-card-footer-container">
-            <div className="pf-chatbot__sources-card-footer">
-              <nav className={`pf-chatbot__sources-card-footer-buttons ${className}`} aria-label={paginationAriaLabel}>
-                <Button
-                  variant={ButtonVariant.plain}
-                  isDisabled={isDisabled || page === 1}
-                  data-action="previous"
-                  onClick={(event) => {
-                    const newPage = page >= 1 ? page - 1 : 1;
-                    onPreviousClick && onPreviousClick(event, newPage);
-                    handleNewPage(event, newPage);
-                  }}
-                  aria-label={toPreviousPageAriaLabel}
-                >
-                  <Icon iconSize="lg">
-                    {/* these are inline because the viewBox that works in a round icon is different than the PatternFly default */}
-                    <svg
-                      className="pf-v6-svg"
-                      viewBox="0 0 280 500"
-                      fill="currentColor"
-                      aria-hidden="true"
-                      role="img"
-                      width="1em"
-                      height="1em"
-                    >
-                      <path d="M31.7 239l136-136c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9L127.9 256l96.4 96.4c9.4 9.4 9.4 24.6 0 33.9L201.7 409c-9.4 9.4-24.6 9.4-33.9 0l-136-136c-9.5-9.4-9.5-24.6-.1-34z"></path>
-                    </svg>
-                  </Icon>
-                </Button>
-                <span aria-hidden="true">
-                  {page}/{sources.length}
-                </span>
-                <Button
-                  variant={ButtonVariant.plain}
-                  isDisabled={isDisabled || page === sources.length}
-                  aria-label={toNextPageAriaLabel}
-                  data-action="next"
-                  onClick={(event) => {
-                    const newPage = page + 1 <= sources.length ? page + 1 : sources.length;
-                    onNextClick && onNextClick(event, newPage);
-                    handleNewPage(event, newPage);
-                  }}
-                >
-                  <Icon isInline iconSize="lg">
-                    {/* these are inline because the viewBox that works in a round icon is different than the PatternFly default */}
-                    <svg
-                      className="pf-v6-svg"
-                      viewBox="0 0 180 500"
-                      fill="currentColor"
-                      aria-hidden="true"
-                      role="img"
-                      width="1em"
-                      height="1em"
-                    >
-                      <path d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"></path>
-                    </svg>
-                  </Icon>
-                </Button>
-              </nav>
-            </div>
+        {sources[page - 1].footer ? (
+          <CardFooter className="pf-chatbot__sources-card-footer" {...cardFooterProps}>
+            {sources[page - 1].footer}
           </CardFooter>
+        ) : (
+          sources.length > 1 && (
+            <CardFooter className="pf-chatbot__sources-card-footer-container" {...cardFooterProps}>
+              <div className="pf-chatbot__sources-card-footer">
+                <nav
+                  className={`pf-chatbot__sources-card-footer-buttons ${className}`}
+                  aria-label={paginationAriaLabel}
+                >
+                  <Button
+                    variant={ButtonVariant.plain}
+                    isDisabled={isDisabled || page === 1}
+                    data-action="previous"
+                    onClick={(event) => {
+                      const newPage = page >= 1 ? page - 1 : 1;
+                      onPreviousClick && onPreviousClick(event, newPage);
+                      handleNewPage(event, newPage);
+                    }}
+                    aria-label={toPreviousPageAriaLabel}
+                  >
+                    <Icon iconSize="lg">
+                      {/* these are inline because the viewBox that works in a round icon is different than the PatternFly default */}
+                      <svg
+                        className="pf-v6-svg"
+                        viewBox="0 0 280 500"
+                        fill="currentColor"
+                        aria-hidden="true"
+                        role="img"
+                        width="1em"
+                        height="1em"
+                      >
+                        <path d="M31.7 239l136-136c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9L127.9 256l96.4 96.4c9.4 9.4 9.4 24.6 0 33.9L201.7 409c-9.4 9.4-24.6 9.4-33.9 0l-136-136c-9.5-9.4-9.5-24.6-.1-34z"></path>
+                      </svg>
+                    </Icon>
+                  </Button>
+                  <span aria-hidden="true">
+                    {page}/{sources.length}
+                  </span>
+                  <Button
+                    variant={ButtonVariant.plain}
+                    isDisabled={isDisabled || page === sources.length}
+                    aria-label={toNextPageAriaLabel}
+                    data-action="next"
+                    onClick={(event) => {
+                      const newPage = page + 1 <= sources.length ? page + 1 : sources.length;
+                      onNextClick && onNextClick(event, newPage);
+                      handleNewPage(event, newPage);
+                    }}
+                  >
+                    <Icon isInline iconSize="lg">
+                      {/* these are inline because the viewBox that works in a round icon is different than the PatternFly default */}
+                      <svg
+                        className="pf-v6-svg"
+                        viewBox="0 0 180 500"
+                        fill="currentColor"
+                        aria-hidden="true"
+                        role="img"
+                        width="1em"
+                        height="1em"
+                      >
+                        <path d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"></path>
+                      </svg>
+                    </Icon>
+                  </Button>
+                </nav>
+              </div>
+            </CardFooter>
+          )
         )}
       </Card>
     </div>

package/src/ToolResponse/ToolResponse.scss

@@ -0,0 +1,36 @@
+.pf-chatbot__tool-response {
+  --pf-v6-c-card--BorderColor: var(--pf-t--global--border--color--control--read-only);
+  overflow: unset;
+}
+
+.pf-chatbot__tool-response-expandable-section {
+  --pf-v6-c-expandable-section--Gap: var(--pf-t--global--spacer--xs);
+}
+
+.pf-chatbot__tool-response-section {
+  display: flex;
+  flex-direction: column;
+  gap: var(--pf-t--global--spacer--xs);
+}
+
+.pf-chatbot__tool-response-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__tool-response-body {
+  color: var(--pf-t--global--text--color--subtle);
+  margin-block-end: var(--pf-t--global--spacer--xs);
+}
+
+.pf-chatbot__tool-response-card {
+  --pf-v6-c-card--BorderColor: var(--pf-t--global--border--color--control--read-only);
+  --pf-v6-c-card--first-child--PaddingBlockStart: var(--pf-t--global--spacer--sm);
+  --pf-v6-c-card__title--not--last-child--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
+  --pf-v6-c-card--c-divider--child--PaddingBlockStart: var(--pf-t--global--spacer--sm);
+
+  .pf-v6-c-divider {
+    --pf-v6-c-divider--Color: var(--pf-t--global--border--color--control--read-only);
+  }
+}

package/src/ToolResponse/ToolResponse.test.tsx

@@ -0,0 +1,78 @@
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import ToolResponse from './ToolResponse';
+
+describe('ToolResponse', () => {
+  const defaultProps = {
+    toggleContent: 'Tool response: toolName',
+    cardTitle: 'Title',
+    cardBody: 'Body'
+  };
+
+  it('should render with required props only', () => {
+    render(<ToolResponse {...defaultProps} />);
+    expect(screen.getByText('Title')).toBeTruthy();
+    expect(screen.getByText('Body')).toBeTruthy();
+    expect(screen.getByText('Tool response: toolName')).toBeTruthy();
+  });
+
+  it('should render subheading when provided', () => {
+    const subheading = 'Tool execution result';
+    render(<ToolResponse {...defaultProps} subheading={subheading} />);
+    expect(screen.getByText(subheading)).toBeTruthy();
+  });
+
+  it('should render body content when provided', () => {
+    const body = 'This is the tool response body content';
+    render(<ToolResponse {...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>
+    );
+    const cardTitle = <strong>API Response</strong>;
+    const cardBody = (
+      <div>
+        <code>{"{ status: 'success' }"}</code>
+      </div>
+    );
+
+    render(<ToolResponse {...defaultProps} body={body} cardTitle={cardTitle} cardBody={cardBody} />);
+    expect(screen.getByText('Complex body content')).toBeTruthy();
+    expect(screen.getByText('Item 1')).toBeTruthy();
+    expect(screen.getByText('Item 2')).toBeTruthy();
+    expect(screen.getByText('API Response')).toBeTruthy();
+    expect(screen.getByText("{ status: 'success' }")).toBeTruthy();
+  });
+
+  it('should apply custom className from cardProps', () => {
+    const { container } = render(
+      <ToolResponse {...defaultProps} cardProps={{ className: 'custom-tool-response-class' }} />
+    );
+    expect(container.querySelector('.custom-tool-response-class')).toBeTruthy();
+  });
+
+  it('should pass through expandableSectionProps', () => {
+    render(<ToolResponse {...defaultProps} expandableSectionProps={{ className: 'custom-expandable-class' }} />);
+    expect(document.querySelector('.custom-expandable-class')).toBeTruthy();
+  });
+
+  it('should pass through toolResponseCardProps', () => {
+    render(<ToolResponse {...defaultProps} toolResponseCardProps={{ className: 'custom-card-class' }} />);
+    expect(document.querySelector('.custom-card-class')).toBeTruthy();
+  });
+
+  it('should not render subheading span when subheading is not provided', () => {
+    const { container } = render(<ToolResponse {...defaultProps} />);
+    const subheadingContainer = container.querySelector('.pf-chatbot__tool-response-subheading');
+    expect(subheadingContainer).toBeFalsy();
+  });
+});

package/src/ToolResponse/ToolResponse.tsx

@@ -0,0 +1,95 @@
+// ============================================================================
+// Tool Response Card
+// ============================================================================
+import {
+  Card,
+  CardBody,
+  CardBodyProps,
+  CardProps,
+  CardTitle,
+  CardTitleProps,
+  Divider,
+  DividerProps,
+  ExpandableSection,
+  ExpandableSectionProps
+} from '@patternfly/react-core';
+import { useState, type FunctionComponent } from 'react';
+
+export interface ToolResponseProps {
+  /** Toggle content shown for expandable section */
+  toggleContent: React.ReactNode;
+  /** 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;
+  /** Content passed into tool response card body */
+  cardBody: React.ReactNode;
+  /** Content passed into tool response card title */
+  cardTitle: React.ReactNode;
+  /** Additional props passed to main card */
+  cardProps?: CardProps;
+  /** Additional props passed to main card body */
+  cardBodyProps?: CardBodyProps;
+  /** Additional props passed to tool response card */
+  toolResponseCardProps?: CardProps;
+  /** Additional props passed to tool response card body */
+  toolResponseCardBodyProps?: CardBodyProps;
+  /** Additional props passed to tool response card divider */
+  toolResponseCardDividerProps?: DividerProps;
+  /** Additional props passed to tool response card title */
+  toolResponseCardTitleProps?: CardTitleProps;
+}
+
+export const ToolResponse: FunctionComponent<ToolResponseProps> = ({
+  body,
+  cardProps,
+  expandableSectionProps,
+  subheading,
+  cardBody,
+  cardTitle,
+  cardBodyProps,
+  toggleContent,
+  toolResponseCardBodyProps,
+  toolResponseCardDividerProps,
+  toolResponseCardProps,
+  toolResponseCardTitleProps
+}: ToolResponseProps) => {
+  const [isExpanded, setIsExpanded] = useState(true);
+
+  const onToggle = (_event: React.MouseEvent, isExpanded: boolean) => {
+    setIsExpanded(isExpanded);
+  };
+
+  return (
+    <Card isCompact className="pf-chatbot__tool-response" {...cardProps}>
+      <CardBody {...cardBodyProps}>
+        <ExpandableSection
+          toggleContent={toggleContent}
+          onToggle={onToggle}
+          isExpanded={isExpanded}
+          isIndented
+          className="pf-chatbot__tool-response-expandable-section"
+          {...expandableSectionProps}
+        >
+          <div className="pf-chatbot__tool-response-section">
+            {subheading && (
+              <div className="pf-chatbot__tool-response-subheading">
+                <span>{subheading}</span>
+              </div>
+            )}
+            {body && <div className="pf-chatbot__tool-response-body">{body}</div>}
+            <Card isCompact className="pf-chatbot__tool-response-card" {...toolResponseCardProps}>
+              <CardTitle {...toolResponseCardTitleProps}>{cardTitle}</CardTitle>
+              <Divider {...toolResponseCardDividerProps} />
+              <CardBody {...toolResponseCardBodyProps}>{cardBody}</CardBody>
+            </Card>
+          </div>
+        </ExpandableSection>
+      </CardBody>
+    </Card>
+  );
+};
+
+export default ToolResponse;

package/src/ToolResponse/index.ts

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

package/src/index.ts

@@ -42,6 +42,9 @@ export * from './CodeModal';
 export { default as Compare } from './Compare';
 export * from './Compare';
 
+export { default as DeepThinking } from './DeepThinking';
+export * from './DeepThinking';
+
 export { default as FileDetails } from './FileDetails';
 export * from './FileDetails';
 
@@ -51,6 +54,12 @@ export * from './FileDetailsLabel';
 export { default as FileDropZone } from './FileDropZone';
 export * from './FileDropZone';
 
+export { default as FilePreview } from './FilePreview';
+export * from './FilePreview';
+
+export { default as ImagePreview } from './ImagePreview';
+export * from './ImagePreview';
+
 export { default as LoadingMessage } from './LoadingMessage';
 export * from './LoadingMessage';
 
@@ -84,5 +93,8 @@ export * from './SourcesCard';
 export { default as TermsOfUse } from './TermsOfUse';
 export * from './TermsOfUse';
 
+export { default as ToolResponse } from './ToolResponse';
+export * from './ToolResponse';
+
 export { default as tracking } from './tracking';
 export * from './tracking';

package/src/main.scss

@@ -11,9 +11,12 @@
 @import './ChatbotWelcomePrompt/ChatbotWelcomePrompt';
 @import './CodeModal/CodeModal';
 @import './Compare/Compare';
+@import './DeepThinking/DeepThinking';
 @import './FileDetails/FileDetails';
 @import './FileDetailsLabel/FileDetailsLabel';
 @import './FileDropZone/FileDropZone';
+@import './FilePreview/FilePreview.scss';
+@import './ImagePreview/ImagePreview';
 @import './Message/Message';
 @import './Message/CodeBlockMessage/CodeBlockMessage';
 @import './Message/ImageMessage/ImageMessage';
@@ -33,8 +36,21 @@
 @import './SourcesCard/SourcesCard.scss';
 @import './SourceDetailsMenuItem/SourceDetailsMenuItem';
 @import './TermsOfUse/TermsOfUse';
+@import './ToolResponse/ToolResponse';
 
 .ws-full-page-utils {
   left: 0 !important;
   right: auto !important;
 }
+
+// hide from view but not assistive technologies
+// https://css-tricks.com/inclusively-hidden/
+.pf-chatbot-m-hidden {
+  clip: rect(0 0 0 0);
+  clip-path: inset(50%);
+  height: 1px;
+  overflow: hidden;
+  position: absolute;
+  white-space: nowrap;
+  width: 1px;
+}