@patternfly/chatbot 2.1.0-prerelease.17

package/src/PreviewAttachment/PreviewAttachment.tsx

@@ -0,0 +1,67 @@
+// ============================================================================
+// Preview Attachment - Chatbot Code Snippet Viewer
+// ============================================================================
+import React from 'react';
+import CodeModal from '../CodeModal';
+import { ChatbotDisplayMode } from '../Chatbot';
+
+export interface PreviewAttachmentProps {
+  /** Text shown in code editor */
+  code: string;
+  /** Filename, including extension, of file shown in modal */
+  fileName: string;
+  /** Function called when edit button is clicked */
+  onEdit: (event: React.MouseEvent | MouseEvent | KeyboardEvent) => void;
+  /** Function called when dismiss button is clicked */
+  onDismiss?: (event: React.MouseEvent | MouseEvent | KeyboardEvent) => void;
+  /** Function called when modal is toggled */
+  handleModalToggle: (event: React.MouseEvent | MouseEvent | KeyboardEvent) => void;
+  /** Whether modal is open */
+  isModalOpen: boolean;
+  /** Title of modal */
+  title?: string;
+  /** Display mode for the Chatbot parent; this influences the styles applied */
+  displayMode?: ChatbotDisplayMode;
+}
+
+export const PreviewAttachment: React.FunctionComponent<PreviewAttachmentProps> = ({
+  fileName,
+  code,
+  handleModalToggle,
+  isModalOpen,
+  onDismiss = undefined,
+  onEdit,
+  title = 'Preview attachment',
+  displayMode = ChatbotDisplayMode.default
+}: PreviewAttachmentProps) => {
+  const handleEdit = (_event: React.MouseEvent | MouseEvent | KeyboardEvent) => {
+    handleModalToggle(_event);
+    onEdit(_event);
+  };
+
+  const handleDismiss = (_event: React.MouseEvent | MouseEvent | KeyboardEvent) => {
+    handleModalToggle(_event);
+    onDismiss && onDismiss(_event);
+  };
+
+  return (
+    <CodeModal
+      codeEditorControlClassName="pf-chatbot__code-modal--controls"
+      code={code}
+      fileName={fileName}
+      handleModalToggle={handleModalToggle}
+      isCopyEnabled
+      isLineNumbersVisible={false}
+      isModalOpen={isModalOpen}
+      onPrimaryAction={handleEdit}
+      onSecondaryAction={handleDismiss}
+      primaryActionBtn="Edit"
+      secondaryActionBtn="Dismiss"
+      title={title}
+      isReadOnly
+      displayMode={displayMode}
+    />
+  );
+};
+
+export default PreviewAttachment;

package/src/PreviewAttachment/index.ts

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

package/src/ResponseActions/ResponseActionButton.tsx

@@ -0,0 +1,56 @@
+import React from 'react';
+import { Button, Icon, Tooltip, TooltipProps } from '@patternfly/react-core';
+
+export interface ResponseActionButtonProps {
+  /** Aria-label for the button. Defaults to the value of the tooltipContent if none provided */
+  ariaLabel?: string;
+  /** Icon for the button */
+  icon: React.ReactNode;
+  /** On-click handler for the button */
+  onClick?: ((event: MouseEvent | React.MouseEvent<Element, MouseEvent> | KeyboardEvent) => void) | undefined;
+  /** Class name for the button */
+  className?: string;
+  /** Props to control if the attach button should be disabled */
+  isDisabled?: boolean;
+  /** Content shown in the tooltip */
+  tooltipContent?: string;
+  /** Props to control the PF Tooltip component */
+  tooltipProps?: TooltipProps;
+}
+
+export const ResponseActionButton: React.FunctionComponent<ResponseActionButtonProps> = ({
+  ariaLabel,
+  className,
+  icon,
+  isDisabled,
+  onClick,
+  tooltipContent,
+  tooltipProps
+}) => (
+  <Tooltip
+    id={`pf-chatbot__tooltip-response-action-${tooltipContent}`}
+    content={tooltipContent}
+    position="bottom"
+    entryDelay={tooltipProps?.entryDelay || 0}
+    exitDelay={tooltipProps?.exitDelay || 0}
+    distance={tooltipProps?.distance || 8}
+    animationDuration={tooltipProps?.animationDuration || 0}
+    {...tooltipProps}
+  >
+    <Button
+      variant="plain"
+      className={`pf-chatbot__button--response-action ${className ?? ''}`}
+      aria-label={ariaLabel ?? tooltipContent}
+      icon={
+        <Icon isInline size="lg">
+          {icon}
+        </Icon>
+      }
+      isDisabled={isDisabled}
+      onClick={onClick}
+      size="sm"
+    ></Button>
+  </Tooltip>
+);
+
+export default ResponseActionButton;

package/src/ResponseActions/ResponseActions.scss

@@ -0,0 +1,26 @@
+.pf-chatbot__response-actions {
+  display: grid;
+  gap: var(--pf-t--global--spacer--xs);
+  grid-template-columns: repeat(auto-fit, minmax(0, max-content));
+
+  .pf-v6-c-button {
+    border-radius: var(--pf-t--global--border--radius--pill);
+    width: 2.3125rem;
+    height: 2.3125rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    .pf-v6-c-button__icon {
+      color: var(--pf-t--global--icon--color--subtle);
+    }
+
+    // Interactive states
+    &:hover,
+    &:focus {
+      .pf-v6-c-button__icon {
+        color: var(--pf-t--global--icon--color--subtle);
+      }
+    }
+  }
+}

package/src/ResponseActions/ResponseActions.test.tsx

@@ -0,0 +1,59 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import ResponseActions from './ResponseActions';
+import userEvent from '@testing-library/user-event';
+
+const ALL_ACTIONS = [
+  { type: 'positive', label: 'Good response' },
+  { type: 'negative', label: 'Bad response' },
+  { type: 'copy', label: 'Copy' },
+  { type: 'share', label: 'Share' },
+  { type: 'listen', label: 'Listen' }
+];
+
+describe('ResponseActions', () => {
+  it('should render buttons correctly', () => {
+    ALL_ACTIONS.forEach(({ type, label }) => {
+      render(<ResponseActions actions={{ [type]: { onClick: jest.fn() } }} />);
+      expect(screen.getByRole('button', { name: label })).toBeTruthy();
+    });
+  });
+
+  it('should be able to call onClick correctly', async () => {
+    ALL_ACTIONS.forEach(async ({ type, label }) => {
+      const spy = jest.fn();
+      render(<ResponseActions actions={{ [type]: { onClick: spy } }} />);
+      await userEvent.click(screen.getByRole('button', { name: label }));
+      expect(spy).toHaveBeenCalledTimes(1);
+    });
+  });
+
+  it('should be able to change aria labels', () => {
+    const actions = [
+      { type: 'positive', ariaLabel: 'Thumbs up' },
+      { type: 'negative', ariaLabel: 'Thumbs down' },
+      { type: 'copy', ariaLabel: 'Copy the message' },
+      { type: 'share', ariaLabel: 'Share it with friends' },
+      { type: 'listen', ariaLabel: 'Listen up' }
+    ];
+    actions.forEach(({ type, ariaLabel }) => {
+      render(<ResponseActions actions={{ [type]: { onClick: jest.fn(), ariaLabel } }} />);
+      expect(screen.getByRole('button', { name: ariaLabel })).toBeTruthy();
+    });
+  });
+
+  it('should be able to disable buttons', () => {
+    ALL_ACTIONS.forEach(({ type, label }) => {
+      render(<ResponseActions actions={{ [type]: { onClick: jest.fn(), isDisabled: true } }} />);
+      expect(screen.getByRole('button', { name: label })).toBeDisabled();
+    });
+  });
+
+  it('should be able to add class to buttons', () => {
+    ALL_ACTIONS.forEach(({ type, label }) => {
+      render(<ResponseActions actions={{ [type]: { onClick: jest.fn(), className: 'test' } }} />);
+      expect(screen.getByRole('button', { name: label })).toHaveClass('test');
+    });
+  });
+});

package/src/ResponseActions/ResponseActions.tsx

@@ -0,0 +1,115 @@
+import React from 'react';
+import {
+  ExternalLinkAltIcon,
+  VolumeUpIcon,
+  OutlinedThumbsUpIcon,
+  OutlinedThumbsDownIcon,
+  OutlinedCopyIcon
+} from '@patternfly/react-icons';
+import ResponseActionButton from './ResponseActionButton';
+import { TooltipProps } from '@patternfly/react-core';
+
+export interface ActionProps {
+  /** Aria-label for the button */
+  ariaLabel?: string;
+  /** On-click handler for the button */
+  onClick?: ((event: MouseEvent | React.MouseEvent<Element, MouseEvent> | KeyboardEvent) => void) | undefined;
+  /** Class name for the button */
+  className?: string;
+  /** Props to control if the attach button should be disabled */
+  isDisabled?: boolean;
+  /** Content shown in the tooltip */
+  tooltipContent?: string;
+  /** Props to control the PF Tooltip component */
+  tooltipProps?: TooltipProps;
+  /** Icon for custom response action */
+  icon?: React.ReactNode;
+}
+
+export interface ResponseActionProps {
+  /** Props for message actions, such as feedback (positive or negative), copy button, share, and listen */
+  actions: Record<string, ActionProps | undefined> & {
+    positive?: ActionProps;
+    negative?: ActionProps;
+    copy?: ActionProps;
+    share?: ActionProps;
+    listen?: ActionProps;
+  };
+}
+
+export const ResponseActions: React.FunctionComponent<ResponseActionProps> = ({ actions }) => {
+  const { positive, negative, copy, share, listen, ...additionalActions } = actions;
+  return (
+    <div className="pf-chatbot__response-actions">
+      {positive && (
+        <ResponseActionButton
+          ariaLabel={positive.ariaLabel ?? 'Good response'}
+          onClick={positive.onClick}
+          className={positive.className}
+          isDisabled={positive.isDisabled}
+          tooltipContent={positive.tooltipContent ?? 'Good response'}
+          tooltipProps={positive.tooltipProps}
+          icon={<OutlinedThumbsUpIcon />}
+        ></ResponseActionButton>
+      )}
+      {negative && (
+        <ResponseActionButton
+          ariaLabel={negative.ariaLabel ?? 'Bad response'}
+          onClick={negative.onClick}
+          className={negative.className}
+          isDisabled={negative.isDisabled}
+          tooltipContent={negative.tooltipContent ?? 'Bad response'}
+          tooltipProps={negative.tooltipProps}
+          icon={<OutlinedThumbsDownIcon />}
+        ></ResponseActionButton>
+      )}
+      {copy && (
+        <ResponseActionButton
+          ariaLabel={copy.ariaLabel ?? 'Copy'}
+          onClick={copy.onClick}
+          className={copy.className}
+          isDisabled={copy.isDisabled}
+          tooltipContent={copy.tooltipContent ?? 'Copy'}
+          tooltipProps={copy.tooltipProps}
+          icon={<OutlinedCopyIcon />}
+        ></ResponseActionButton>
+      )}
+      {share && (
+        <ResponseActionButton
+          ariaLabel={share.ariaLabel ?? 'Share'}
+          onClick={share.onClick}
+          className={share.className}
+          isDisabled={share.isDisabled}
+          tooltipContent={share.tooltipContent ?? 'Share'}
+          tooltipProps={share.tooltipProps}
+          icon={<ExternalLinkAltIcon />}
+        ></ResponseActionButton>
+      )}
+      {listen && (
+        <ResponseActionButton
+          ariaLabel={listen.ariaLabel ?? 'Listen'}
+          onClick={listen.onClick}
+          className={listen.className}
+          isDisabled={listen.isDisabled}
+          tooltipContent={listen.tooltipContent ?? 'Listen'}
+          tooltipProps={listen.tooltipProps}
+          icon={<VolumeUpIcon />}
+        ></ResponseActionButton>
+      )}
+      {Object.keys(additionalActions).map((action) => (
+        <ResponseActionButton
+          key={action}
+          ariaLabel={additionalActions[action]?.ariaLabel}
+          onClick={additionalActions[action]?.onClick}
+          className={additionalActions[action]?.className}
+          isDisabled={additionalActions[action]?.isDisabled}
+          tooltipContent={additionalActions[action]?.tooltipContent}
+          tooltipProps={additionalActions[action]?.tooltipProps}
+          icon={additionalActions[action]?.icon}
+        />
+      ))}
+    </div>
+  );
+};
+
+export default ResponseActions;

package/src/ResponseActions/index.ts

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

package/src/SourceDetailsMenuItem/SourceDetailsMenuItem.scss

@@ -0,0 +1,33 @@
+.pf-chatbot__source-details-subhead {
+  color: var(--pf-t--global--text--color--subtle);
+  font-size: var(--pf-t--global--icon--size--font--xs);
+  font-weight: 500;
+}
+
+.pf-chatbot__source-details-heading {
+  font-size: var(--pf-t--global--font--size--body--default);
+  word-wrap: break-word;
+}
+
+.pf-chatbot__source-details-icon {
+  width: 100%;
+}
+
+// this is only used in demo code
+.pf-chatbot__source-details-icon > .pf-v6-c-icon__content > svg {
+  width: 24px;
+  color: var(--pf-t--global--icon--color--status--custom--default);
+}
+.pf-chatbot-source-details-dropdown-item:hover {
+  .pf-chatbot__source-details-icon > .pf-v6-c-icon__content > svg {
+    color: var(--pf-t--global--icon--color--status--custom--hover);
+  }
+}
+
+.pf-chatbot__source-details {
+  flex-direction: row;
+}
+
+.pf-chatbot__source-details-text {
+  max-width: 20rem;
+}

package/src/SourceDetailsMenuItem/SourceDetailsMenuItem.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import { Icon, Flex, Stack, StackItem } from '@patternfly/react-core';
+
+export interface SourceDetailsMenuItemProps extends React.HTMLProps<HTMLDivElement> {
+  /** Icon */
+  icon: React.ReactNode;
+  /** Name of source */
+  name: string;
+  /** Description of source */
+  type?: string;
+}
+
+export const SourceDetailsMenuItem: React.FunctionComponent<SourceDetailsMenuItemProps> = ({
+  icon,
+  name,
+  type,
+  ...props
+}: SourceDetailsMenuItemProps) => (
+  <Flex className="pf-chatbot__source-details" gap={{ default: 'gapSm' }} {...props}>
+    <Flex
+      justifyContent={{ default: 'justifyContentCenter' }}
+      alignItems={{ default: 'alignItemsCenter' }}
+      alignSelf={{ default: 'alignSelfCenter' }}
+    >
+      <Icon className="pf-chatbot__source-details-icon">{icon}</Icon>
+    </Flex>
+    <Stack className="pf-chatbot__source-details-text">
+      <StackItem>
+        <span className="pf-chatbot__source-details-heading">{name}</span>
+      </StackItem>
+      {type && <StackItem className="pf-chatbot__source-details-subhead">{type}</StackItem>}
+    </Stack>
+  </Flex>
+);
+
+export default SourceDetailsMenuItem;

package/src/SourceDetailsMenuItem/index.ts

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

package/src/SourcesCard/SourcesCard.scss

@@ -0,0 +1,74 @@
+.pf-chatbot__source {
+  display: flex;
+  flex-direction: column;
+  gap: var(--pf-t--global--spacer--sm);
+  padding-block-start: var(--pf-t--global--spacer--sm);
+  max-width: 22.5rem;
+}
+
+.pf-chatbot__sources-card {
+  box-shadow: var(--pf-t--global--box-shadow--sm);
+}
+
+.pf-chatbot__sources-card-body {
+  display: block;
+  display: -webkit-box;
+  height: 2.8125rem;
+  -webkit-line-clamp: 2;
+  line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  margin-bottom: var(--pf-t--global--spacer--md);
+}
+
+.pf-chatbot__sources-card-no-footer {
+  margin-bottom: var(--pf-t--global--spacer--lg);
+}
+
+.pf-chatbot__sources-card-footer-container {
+  border-top: var(--pf-t--global--border--width--regular) solid var(--pf-t--global--border--color--default);
+  padding: var(--pf-t--global--spacer--sm) var(--pf-t--global--spacer--md) var(--pf-t--global--spacer--sm)
+    var(--pf-t--global--spacer--sm);
+  .pf-chatbot__sources-card-footer {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    &-buttons {
+      display: flex;
+      gap: var(--pf-t--global--spacer--xs);
+      align-items: center;
+
+      .pf-v6-c-button {
+        border-radius: var(--pf-t--global--border--radius--pill);
+        padding: var(--pf-t--global--spacer--sm);
+        width: 2.31rem;
+        height: 2.31rem;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+      button:disabled,
+      button[disabled] {
+        .pf-v6-c-icon__content {
+          color: var(--pf-t--global--icon--color--disabled);
+        }
+      }
+      .pf-v6-c-button__text {
+        display: flex;
+        align-items: center;
+      }
+      // Interactive states
+      .pf-v6-c-button:hover,
+      .pf-v6-c-button:focus {
+        .pf-v6-c-button__icon {
+          color: var(--pf-t--chatbot--icon--fill--hover);
+        }
+      }
+      .pf-v6-c-button__icon {
+        color: var(--pf-t--chatbot--icon--fill);
+      }
+    }
+  }
+}