@patternfly/chatbot 1.0.0

package/src/ToolResponse/ToolResponse.test.tsx

@@ -0,0 +1,227 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+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();
+  });
+
+  it('should not render card when cardTitle and cardBody are not provided', () => {
+    const { container } = render(<ToolResponse {...defaultProps} cardTitle={undefined} cardBody={undefined} />);
+    expect(container.querySelector('.pf-chatbot__tool-response-card')).toBeFalsy();
+  });
+
+  it('should render card when only cardTitle is provided', () => {
+    const { container } = render(<ToolResponse {...defaultProps} cardBody={undefined} />);
+    expect(container.querySelector('.pf-chatbot__tool-response-card')).toBeTruthy();
+  });
+
+  it('should render card when only cardBody is provided', () => {
+    const { container } = render(<ToolResponse {...defaultProps} cardTitle={undefined} />);
+    expect(container.querySelector('.pf-chatbot__tool-response-card')).toBeTruthy();
+  });
+
+  it('should render divider when cardBody and cardTitle are provided', () => {
+    const { container } = render(<ToolResponse {...defaultProps} />);
+    expect(container.querySelector('.pf-v6-c-divider')).toBeTruthy();
+  });
+
+  it('should not render divider when only cardBody is provided', () => {
+    const { container } = render(<ToolResponse {...defaultProps} cardTitle={undefined} />);
+    expect(container.querySelector('.pf-v6-c-divider')).toBeFalsy();
+  });
+
+  it('should not render divider when only cardTitle is provided', () => {
+    const { container } = render(<ToolResponse {...defaultProps} cardBody={undefined} />);
+    expect(container.querySelector('.pf-v6-c-divider')).toBeFalsy();
+  });
+
+  it('Renders expanded by default', () => {
+    render(<ToolResponse {...defaultProps} />);
+
+    expect(screen.getByRole('button', { name: defaultProps.toggleContent })).toHaveAttribute('aria-expanded', 'true');
+    expect(screen.getByText(defaultProps.cardTitle)).toBeVisible();
+    expect(screen.getByText(defaultProps.cardBody)).toBeVisible();
+  });
+
+  it('Renders collapsed when isDefaultExpanded is false', () => {
+    render(<ToolResponse isDefaultExpanded={false} {...defaultProps} />);
+
+    expect(screen.getByRole('button', { name: defaultProps.toggleContent })).toHaveAttribute('aria-expanded', 'false');
+    expect(screen.getByText(defaultProps.cardTitle)).not.toBeVisible();
+    expect(screen.getByText(defaultProps.cardBody)).not.toBeVisible();
+  });
+
+  it('expandableSectionProps.isExpanded overrides isDefaultExpanded', () => {
+    render(<ToolResponse {...defaultProps} isDefaultExpanded={false} expandableSectionProps={{ isExpanded: true }} />);
+
+    expect(screen.getByRole('button', { name: defaultProps.toggleContent })).toHaveAttribute('aria-expanded', 'true');
+    expect(screen.getByText(defaultProps.cardTitle)).toBeVisible();
+    expect(screen.getByText(defaultProps.cardBody)).toBeVisible();
+  });
+
+  it('expandableSectionProps.onToggle overrides internal onToggle behavior', async () => {
+    const user = userEvent.setup();
+    const customOnToggle = jest.fn();
+
+    render(
+      <ToolResponse {...defaultProps} isDefaultExpanded={false} expandableSectionProps={{ onToggle: customOnToggle }} />
+    );
+
+    const toggleButton = screen.getByRole('button', { name: defaultProps.toggleContent });
+    expect(toggleButton).toHaveAttribute('aria-expanded', 'false');
+
+    await user.click(toggleButton);
+
+    expect(customOnToggle).toHaveBeenCalledTimes(1);
+    expect(toggleButton).toHaveAttribute('aria-expanded', 'false');
+    expect(screen.getByText(defaultProps.cardTitle)).not.toBeVisible();
+    expect(screen.getByText(defaultProps.cardBody)).not.toBeVisible();
+  });
+
+  it('should render toggleContent as markdown when isToggleContentMarkdown is true', () => {
+    const toggleContent = '**Bold toggle**';
+    const { container } = render(
+      <ToolResponse {...defaultProps} toggleContent={toggleContent} isToggleContentMarkdown />
+    );
+    expect(container.querySelector('strong')).toBeTruthy();
+    expect(screen.getByText('Bold toggle')).toBeTruthy();
+  });
+
+  it('should not render toggleContent as markdown when isToggleContentMarkdown is false', () => {
+    const toggleContent = '**Bold toggle**';
+    render(<ToolResponse {...defaultProps} toggleContent={toggleContent} />);
+    expect(screen.getByText('**Bold toggle**')).toBeTruthy();
+  });
+
+  it('should render subheading as markdown when isSubheadingMarkdown is true', () => {
+    const subheading = '**Bold subheading**';
+    const { container } = render(<ToolResponse {...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(<ToolResponse {...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(<ToolResponse {...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(<ToolResponse {...defaultProps} body={body} />);
+    expect(screen.getByText('**Bold body**')).toBeTruthy();
+  });
+
+  it('should render cardTitle as markdown when isCardTitleMarkdown is true', () => {
+    const cardTitle = '**Bold card title**';
+    const { container } = render(<ToolResponse {...defaultProps} cardTitle={cardTitle} isCardTitleMarkdown />);
+    expect(container.querySelector('strong')).toBeTruthy();
+    expect(screen.getByText('Bold card title')).toBeTruthy();
+  });
+
+  it('should not render cardTitle as markdown when isCardTitleMarkdown is false', () => {
+    const cardTitle = '**Bold card title**';
+    render(<ToolResponse {...defaultProps} cardTitle={cardTitle} />);
+    expect(screen.getByText('**Bold card title**')).toBeTruthy();
+  });
+
+  it('should render cardBody as markdown when isCardBodyMarkdown is true', () => {
+    const cardBody = '**Bold card body**';
+    const { container } = render(<ToolResponse {...defaultProps} cardBody={cardBody} isCardBodyMarkdown />);
+    expect(container.querySelector('strong')).toBeTruthy();
+    expect(screen.getByText('Bold card body')).toBeTruthy();
+  });
+
+  it('should not render cardBody as markdown when isCardBodyMarkdown is false', () => {
+    const cardBody = '**Bold card body**';
+    render(<ToolResponse {...defaultProps} cardBody={cardBody} />);
+    expect(screen.getByText('**Bold card body**')).toBeTruthy();
+  });
+
+  it('should pass markdownContentProps to MarkdownContent component', () => {
+    const body = '**Bold body**';
+    const { container } = render(
+      <ToolResponse {...defaultProps} body={body} isBodyMarkdown markdownContentProps={{ isPrimary: true }} />
+    );
+    expect(container.querySelector('.pf-m-primary')).toBeTruthy();
+  });
+});

package/src/ToolResponse/ToolResponse.tsx

@@ -0,0 +1,172 @@
+// ============================================================================
+// Tool Response Card
+// ============================================================================
+import {
+  Card,
+  CardBody,
+  CardBodyProps,
+  CardProps,
+  CardTitle,
+  CardTitleProps,
+  Divider,
+  DividerProps,
+  ExpandableSection,
+  ExpandableSectionProps
+} from '@patternfly/react-core';
+import { useState, type FunctionComponent } from 'react';
+import MarkdownContent from '../MarkdownContent';
+import type { MarkdownContentProps } from '../MarkdownContent';
+
+export interface ToolResponseProps {
+  /** 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;
+  /** 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;
+  /** 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;
+  /** Whether to enable markdown rendering for cardBody. When true and cardBody is a string, it will be parsed as markdown. */
+  isCardBodyMarkdown?: boolean;
+  /** Whether to enable markdown rendering for cardTitle. When true and cardTitle is a string, it will be parsed as markdown. */
+  isCardTitleMarkdown?: 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;
+}
+
+export const ToolResponse: FunctionComponent<ToolResponseProps> = ({
+  body,
+  cardProps,
+  expandableSectionProps,
+  subheading,
+  cardBody,
+  cardTitle,
+  cardBodyProps,
+  toggleContent,
+  isDefaultExpanded = true,
+  toolResponseCardBodyProps,
+  toolResponseCardDividerProps,
+  toolResponseCardProps,
+  toolResponseCardTitleProps,
+  isToggleContentMarkdown,
+  isSubheadingMarkdown,
+  isBodyMarkdown,
+  isCardBodyMarkdown,
+  isCardTitleMarkdown,
+  markdownContentProps,
+  shouldRetainStyles = false
+}: ToolResponseProps) => {
+  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 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;
+  };
+
+  const renderCardTitle = () => {
+    if (!cardTitle) {
+      return null;
+    }
+    if (isCardTitleMarkdown && typeof cardTitle === 'string') {
+      return <MarkdownContent shouldRetainStyles={shouldRetainStyles} content={cardTitle} {...markdownContentProps} />;
+    }
+    return cardTitle;
+  };
+
+  const renderCardBody = () => {
+    if (!cardBody) {
+      return null;
+    }
+    if (isCardBodyMarkdown && typeof cardBody === 'string') {
+      return <MarkdownContent shouldRetainStyles={shouldRetainStyles} content={cardBody} {...markdownContentProps} />;
+    }
+    return cardBody;
+  };
+
+  return (
+    <Card isCompact className="pf-chatbot__tool-response" {...cardProps}>
+      <CardBody {...cardBodyProps}>
+        <ExpandableSection
+          toggleContent={renderToggleContent()}
+          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>{renderSubheading()}</span>
+              </div>
+            )}
+            {body && <div className="pf-chatbot__tool-response-body">{renderBody()}</div>}
+            {(cardTitle || cardBody) && (
+              <Card isCompact className="pf-chatbot__tool-response-card" {...toolResponseCardProps}>
+                {cardTitle && <CardTitle {...toolResponseCardTitleProps}>{renderCardTitle()}</CardTitle>}
+                {cardTitle && cardBody && <Divider {...toolResponseCardDividerProps} />}
+                {cardBody && <CardBody {...toolResponseCardBodyProps}>{renderCardBody()}</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/__mocks__/monaco-editor.ts

@@ -0,0 +1,19 @@
+const mockEditor = {
+  layout: jest.fn(),
+  focus: jest.fn(),
+  dispose: jest.fn(),
+  getModel: jest.fn(),
+  updateOptions: jest.fn()
+};
+
+const mockModel = {
+  updateOptions: jest.fn(),
+  dispose: jest.fn()
+};
+
+module.exports = {
+  editor: {
+    create: jest.fn(() => mockEditor),
+    getModels: jest.fn(() => [mockModel])
+  }
+};

package/src/__mocks__/rehype-external-links.ts

@@ -0,0 +1,3 @@
+const rehypeExternalLinks = jest.fn((children) => children);
+
+export default rehypeExternalLinks;

package/src/__mocks__/rehype-highlight.ts

@@ -0,0 +1,3 @@
+const rehypeHighlight = () => (tree) => tree;
+
+export default rehypeHighlight;

package/src/__mocks__/rehype-sanitize.ts

@@ -0,0 +1,3 @@
+const rehypeSanitize = jest.fn(() => null);
+
+export default rehypeSanitize;

package/src/__mocks__/rehype-unwrap-images.tsx

@@ -0,0 +1,3 @@
+const rehypeUnwrapImages = jest.fn(() => null);
+
+export default rehypeUnwrapImages;

package/src/index.ts

@@ -0,0 +1,112 @@
+// this file is autogenerated by generate-index.js, modifying it manually will have no effect
+
+export { default as AttachmentEdit } from './AttachmentEdit';
+export * from './AttachmentEdit';
+
+export { default as AttachMenu } from './AttachMenu';
+export * from './AttachMenu';
+
+export { default as Chatbot } from './Chatbot';
+export * from './Chatbot';
+
+export { default as ChatbotAlert } from './ChatbotAlert';
+export * from './ChatbotAlert';
+
+export { default as ChatbotContent } from './ChatbotContent';
+export * from './ChatbotContent';
+
+export { default as ChatbotConversationHistoryNav } from './ChatbotConversationHistoryNav';
+export * from './ChatbotConversationHistoryNav';
+
+export { default as ChatbotFooter } from './ChatbotFooter';
+export * from './ChatbotFooter';
+
+export { default as ChatbotHeader } from './ChatbotHeader';
+export * from './ChatbotHeader';
+
+export { default as ChatbotModal } from './ChatbotModal';
+export * from './ChatbotModal';
+
+export { default as ChatbotPopover } from './ChatbotPopover';
+export * from './ChatbotPopover';
+
+export { default as ChatbotToggle } from './ChatbotToggle';
+export * from './ChatbotToggle';
+
+export { default as ChatbotWelcomePrompt } from './ChatbotWelcomePrompt';
+export * from './ChatbotWelcomePrompt';
+
+export { default as CodeModal } from './CodeModal';
+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';
+
+export { default as FileDetailsLabel } from './FileDetailsLabel';
+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';
+
+export { default as MarkdownContent } from './MarkdownContent';
+export * from './MarkdownContent';
+
+export { default as Message } from './Message';
+export * from './Message';
+
+export { default as MessageBar } from './MessageBar';
+export * from './MessageBar';
+
+export { default as MessageBox } from './MessageBox';
+export * from './MessageBox';
+
+export { default as MessageDivider } from './MessageDivider';
+export * from './MessageDivider';
+
+export { default as Onboarding } from './Onboarding';
+export * from './Onboarding';
+
+export { default as PreviewAttachment } from './PreviewAttachment';
+export * from './PreviewAttachment';
+
+export { default as ResponseActions } from './ResponseActions';
+export * from './ResponseActions';
+
+export { default as Settings } from './Settings';
+export * from './Settings';
+
+export { default as SourceDetailsMenuItem } from './SourceDetailsMenuItem';
+export * from './SourceDetailsMenuItem';
+
+export { default as SourcesCard } from './SourcesCard';
+export * from './SourcesCard';
+
+export { default as SourcesCardBase } from './SourcesCardBase';
+export * from './SourcesCardBase';
+
+export { default as TermsOfUse } from './TermsOfUse';
+export * from './TermsOfUse';
+
+export { default as ToolCall } from './ToolCall';
+export * from './ToolCall';
+
+export { default as ToolResponse } from './ToolResponse';
+export * from './ToolResponse';
+
+export { default as tracking } from './tracking';
+export * from './tracking';

package/src/main.scss

@@ -0,0 +1,54 @@
+@import './AttachMenu/AttachMenu';
+@import './Chatbot/Chatbot';
+@import './ChatbotAlert/ChatbotAlert';
+@import './ChatbotContent/ChatbotContent';
+@import './ChatbotConversationHistoryNav/ChatbotConversationHistoryNav';
+@import './ChatbotFooter/ChatbotFooter';
+@import './ChatbotHeader/ChatbotHeader';
+@import './ChatbotModal/ChatbotModal';
+@import './ChatbotPopover/ChatbotPopover';
+@import './ChatbotToggle/ChatbotToggle';
+@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';
+@import './Message/LinkMessage/LinkMessage';
+@import './Message/TextMessage/TextMessage';
+@import './Message/ListMessage/ListMessage';
+@import './Message/TableMessage/TableMessage';
+@import './Message/MessageLoading';
+@import './Message/QuickStarts/QuickStartTile';
+@import './Message/QuickResponse/QuickResponse';
+@import './Message/UserFeedback/UserFeedback';
+@import './MessageBar/MessageBar';
+@import './MessageBox/MessageBox';
+@import './MessageDivider/MessageDivider';
+@import './MessageBox/JumpButton';
+@import './Onboarding/Onboarding';
+@import './ResponseActions/ResponseActions';
+@import './Settings/Settings';
+@import './SourcesCard/SourcesCard.scss';
+@import './SourceDetailsMenuItem/SourceDetailsMenuItem';
+@import './TermsOfUse/TermsOfUse';
+@import './ToolResponse/ToolResponse';
+@import './ToolCall/ToolCall';
+
+// 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;
+}

package/src/tracking/console_tracking_provider.ts

@@ -0,0 +1,34 @@
+import { InitProps, TrackingSpi } from './tracking_spi';
+import { TrackingApi, TrackingEventProperties } from './tracking_api';
+
+export class ConsoleTrackingProvider implements TrackingSpi, TrackingApi {
+  private verbose = false;
+  trackPageView(url: string | undefined) {
+    if (this.verbose) {
+      // eslint-disable-next-line no-console
+      console.log('ConsoleProvider pageView ', url);
+    }
+  }
+
+  initialize(props: InitProps): void {
+    this.verbose = props.verbose;
+    if (this.verbose) {
+      // eslint-disable-next-line no-console
+      console.log('ConsoleProvider initialize');
+    }
+  }
+
+  identify(userID: string, userProperties: TrackingEventProperties = {}): void {
+    if (this.verbose) {
+      // eslint-disable-next-line no-console
+      console.log('ConsoleProvider identify ', userID, userProperties);
+    }
+  }
+
+  trackSingleItem(item: string, properties?: TrackingEventProperties): void {
+    if (this.verbose) {
+      // eslint-disable-next-line no-console
+      console.log('ConsoleProvider: ' + item, properties);
+    }
+  }
+}

package/src/tracking/index.ts

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