### Project Setup and Build Commands

Source: https://github.com/patternfly/chatbot/blob/main/README.md

Commands for installing project dependencies and building the project for production or development.

```sh
npm install
npm run build
```

--------------------------------

### Add Quick Start Tiles to Chatbot Messages

Source: https://github.com/patternfly/chatbot/blob/main/packages/module/patternfly-docs/content/extensions/chatbot/examples/Messages/Messages.md

Explains how to integrate quick start tiles into chatbot messages using the `quickStarts` prop on the `<Message>` component. This allows users to initiate predefined actions directly from the chat interface. The implementation supports an `onSelectQuickStart` callback to capture user interaction with the tiles.

```javascript
/*
 * This example shows how to add quick start tiles to chatbot messages.
 * It utilizes the 'quickStarts' prop on a <Message> component.
 * The 'quickStarts' prop expects an array of objects, each representing a quick start.
 * An 'onSelectQuickStart' prop can be provided to handle selection events.
 */

// Example usage within a React component:
// <Message quickStarts={[
//   {
//     title: 'Get Started',
//     description: 'Begin your journey with our quick start guide.',
//     onSelect: () => console.log('Quick start selected')
//   }
// ]}>
//   Here's a quick way to get started!
// </Message>

```

--------------------------------

### Chatbot Welcome Prompt Example

Source: https://github.com/patternfly/chatbot/blob/main/packages/module/patternfly-docs/content/extensions/chatbot/examples/UI/UI.md

Shows how to include optional welcome prompts to guide users and provide specific direction within the chatbot conversation flow.

```tsx
/*
  This file demonstrates the implementation of optional welcome prompts
  to guide users and provide specific direction in the chatbot.
*/
// Placeholder for actual component code

```

--------------------------------

### Screenshot Generation Commands

Source: https://github.com/patternfly/chatbot/blob/main/README.md

Steps to install dependencies, build the project, navigate to a specific package, build and serve documentation, and then generate screenshots.

```sh
npm install
npm run build
cd packages/module
npm run docs:build
npm run docs:serve
npm run docs:screenshots
```

--------------------------------

### Required Dependencies

Source: https://github.com/patternfly/chatbot/blob/main/packages/module/patternfly-docs/content/extensions/chatbot/examples/Analytics/Analytics.md

Depending on your project setup, you may need to install specific analytics provider libraries. This example shows common dependencies for Segment and Posthog.

```JSON
{
  "dependencies": {
    "@segment/analytics-next": "^1.76.0",
    "posthog-js": "^1.194.4"
  }
}
```

--------------------------------

### Development Server Commands

Source: https://github.com/patternfly/chatbot/blob/main/README.md

Commands to start the development server for local development and testing.

```sh
npm run start
```

--------------------------------

### Install ChatBot Extension with npm

Source: https://github.com/patternfly/chatbot/blob/main/README.md

Installs the PatternFly chatbot extension package using npm. Ensure this is added as a dependency to your project.

```bash
npm install @patternfly/chatbot --save
```

--------------------------------

### Chatbot Welcome Message Interaction

Source: https://github.com/patternfly/chatbot/blob/main/packages/module/patternfly-docs/content/extensions/chatbot/examples/UI/UI.md

Provides an example of how to implement a welcome message within the chatbot interface. It highlights the use of the announcement prop on MessageBox for assistive technology.

```tsx
/*
  This file demonstrates the implementation of a welcome message
  within the chatbot interface, including considerations for
  accessibility announcements.
*/
// Placeholder for actual component code

```

--------------------------------

### Export ChatBot Component and Interfaces

Source: https://github.com/patternfly/chatbot/blob/main/README.md

Example of an index file for a new component, exporting the component as default and all necessary interfaces for external use.

```typescript
export { default } from './MyComponent';
export * from './MyComponent';
```

--------------------------------

### Basic ChatBot Implementation with PatternFly Components

Source: https://github.com/patternfly/chatbot/blob/main/packages/module/patternfly-docs/content/extensions/chatbot/examples/demos/Chatbot.md

Demonstrates a basic PatternFly ChatBot setup, including a toggle, header with display mode switching, content with welcome prompts and messages, and a footer with a message bar. It utilizes various PatternFly AI ChatBot components and React hooks for functionality like auto-scrolling and message handling.

```typescript
import ChatbotToggle from '@patternfly/chatbot/dist/dynamic/ChatbotToggle';
import Chatbot, { ChatbotDisplayMode } from '@patternfly/chatbot/dist/dynamic/Chatbot';
import ChatbotContent from '@patternfly/chatbot/dist/dynamic/ChatbotContent';
import ChatbotWelcomePrompt from '@patternfly/chatbot/dist/dynamic/ChatbotWelcomePrompt';
import ChatbotFooter, { ChatbotFootnote } from '@patternfly/chatbot/dist/dynamic/ChatbotFooter';
import MessageBar from '@patternfly/chatbot/dist/dynamic/MessageBar';
import MessageBox from '@patternfly/chatbot/dist/dynamic/MessageBox';
import Message from '@patternfly/chatbot/dist/dynamic/Message';
import Compare from '@patternfly/chatbot/dist/dynamic/Compare';
import ChatbotConversationHistoryNav from '@patternfly/chatbot/dist/dynamic/ChatbotConversationHistoryNav';

import ChatbotHeader, {
  ChatbotHeaderMain,
  ChatbotHeaderMenu,
  ChatbotHeaderTitle,
  ChatbotHeaderActions,
  ChatbotHeaderSelectorDropdown,
  ChatbotHeaderOptionsDropdown,
  ChatbotHeaderCloseButton
} from '@patternfly/chatbot/dist/dynamic/ChatbotHeader';

import ExpandIcon from '@patternfly/react-icons/dist/esm/icons/expand-icon';
import OpenDrawerRightIcon from '@patternfly/react-icons/dist/esm/icons/open-drawer-right-icon';
import OutlinedWindowRestoreIcon from '@patternfly/react-icons/dist/esm/icons/outlined-window-restore-icon';
import { BarsIcon } from '@patternfly/react-icons/dist/esm/icons/bars-icon';
import PFHorizontalLogoColor from '../UI/PF-HorizontalLogo-Color.svg';
import PFHorizontalLogoReverse from '../UI/PF-HorizontalLogo-Reverse.svg';
import PFIconLogoColor from '../UI/PF-IconLogo-Color.svg';
import PFIconLogoReverse from '../UI/PF-IconLogo-Reverse.svg';
import userAvatar from '../Messages/user_avatar.svg';
import patternflyAvatar from '../Messages/patternfly_avatar.jpg';
import { getTrackingProviders } from "@patternfly/chatbot/dist/dynamic/tracking";
import { useEffect,useCallback, useRef, useState, FunctionComponent, MouseEvent } from 'react';
import saveAs from 'file-saver';

// This is a placeholder for the actual code from './Chatbot.tsx'
// The provided text indicates the existence of this file but not its content.
console.log('Basic Chatbot component loaded');

```

--------------------------------

### ChatBot Component Usage Example (React/JSX)

Source: https://github.com/patternfly/chatbot/blob/main/README.md

Example of how to use a custom chatbot component, passing props like 'customLabel'. This snippet is typically referenced from a markdown file.

```jsx
import type { FunctionComponent } from 'react';

const MyComponentExample: FunctionComponent = () => (
  <MyComponent customLabel="My label">
);

export default BatteryLowExample;
```

--------------------------------

### Basic Chatbot Toggle

Source: https://github.com/patternfly/chatbot/blob/main/packages/module/patternfly-docs/content/extensions/chatbot/examples/UI/UI.md

Provides a basic example of a toggle component used to open and close the chatbot window, allowing users to manage its visibility as needed.

```tsx
/*
  This file demonstrates the basic implementation of a toggle
  component for opening and closing the chatbot window.
*/
// Placeholder for actual component code

```

--------------------------------

### Bot Message Example

Source: https://github.com/patternfly/chatbot/blob/main/packages/module/patternfly-docs/content/extensions/chatbot/examples/Messages/Messages.md

Demonstrates a bot message with AI labeling, default date/timestamp, and customizable avatar props. The content prop is passed to a Markdown component which translates text into PatternFly Content and CodeBlock components.

```tsx
import Message from '@patternfly/chatbot/dist/dynamic/Message';
import { RobotIcon } from '@patternfly/react-icons/dist/esm/icons/robot-icon';
import patternflyAvatar from './patternfly_avatar.jpg';

// Example usage:
<Message
  avatar={<RobotIcon />}
  avatarProps={{
    src: patternflyAvatar,
    alt: 'Bot avatar'
  }}
  timestamp="2023-10-27 10:00 AM"
  content="This is a bot message."
/>
```

--------------------------------

### Create New ChatBot Component (React/TypeScript)

Source: https://github.com/patternfly/chatbot/blob/main/README.md

Example of creating a new React component for the chatbot extension. It includes defining props, the component itself, and exporting it as a default.

```typescript
import type { FunctionComponent } from 'react';
import { Text } from '@patternfly/react-core';

// do not forget to export your component's interface
// always place the component's interface above the component itself in the code
export interface MyComponentProps {
  text: String;
}

// do not use the named export of your component, just a default one
const MyComponent: FunctionComponent<MyComponentProps> = () => {

  return (
    <Text>
      This is my new component
    </Text>
  );
};

export default MyComponent;
```

--------------------------------

### Terms of Use Modal

Source: https://github.com/patternfly/chatbot/blob/main/packages/module/patternfly-docs/content/extensions/chatbot/examples/UI/UI.md

Describes a modal component for displaying terms and conditions, based on PatternFly's modal. It adapts to the ChatBot's display mode and supports an optional header image via `image` and `altText` props. Includes focus management examples.

```tsx
import React from 'react';
import { TermsOfUse } from '@patternfly/react-chatbot';

const MyTermsOfUseModal = () => (
  <TermsOfUse
    title="Terms of Use"
    content="Your terms and conditions text here."
    // Optional: image="/path/to/image.png"
    // Optional: altText="Terms of Use Image"
    // Optional: onConfirm={() => console.log('Confirmed')}
    // Optional: onCancel={() => console.log('Cancelled')}
  />
);
```

--------------------------------

### Embedded ChatBot Implementation

Source: https://github.com/patternfly/chatbot/blob/main/packages/module/patternfly-docs/content/extensions/chatbot/examples/demos/Chatbot.md

Demonstrates an embedded ChatBot designed to be placed within a product page. It includes a PatternFly page structure, a main ChatBot container, header, content with messages, and a footer with a message bar. This setup allows for features like speech-to-text and message loading states.

```tsx
import React from 'react';
import { Page, PageSidebar, PageSection, PageSectionVariants } from '@patternfly/react-core';
import { Chatbot } from '@patternfly/react-chatbot';

// Assuming necessary imports for Page, Sidebar, Chatbot components and their sub-components

const EmbeddedChatbotPage: React.FunctionComponent = () => {
  // Placeholder for sidebar content
  const sidebar = (
    <PageSidebar>
      {/* Sidebar content */}
    </PageSidebar>
  );

  // Placeholder for main content, including the Chatbot
  const mainContent = (
    <PageSection type={PageSectionVariants.light} isFilled>
      {/* Main page content */}
      <Chatbot />
    </PageSection>
  );

  return (
    <Page sidebar={sidebar}>
      {mainContent}
    </Page>
  );
};

export default EmbeddedChatbotPage;
```

--------------------------------

### Chatbot Structure Example

Source: https://github.com/patternfly/chatbot/blob/main/packages/module/patternfly-docs/content/extensions/chatbot/examples/UI/UI.md

Illustrates the basic hierarchical structure of the Chatbot component, including the conversation history navigation within the drawer content. It highlights the placement of message boxes and footer elements.

```tsx
<Chatbot>
  <ChatbotConversationHistoryNav
    ...
    drawerContent={
        <>
            <ChatbotContent>
                <ChatbotMessageBox>
                ...
                <ChatbotMessageBox>
            </ChatbotContent>
            <ChatbotFooter ... />
        </>
    }>
  </ChatbotConversationHistoryNav>
</Chatbot>
```

--------------------------------

### Message with Response Actions Example

Source: https://github.com/patternfly/chatbot/blob/main/packages/module/patternfly-docs/content/extensions/chatbot/examples/Messages/Messages.md

Shows how to add interactive actions to messages, such as feedback (good/bad), copy/share controls, edit actions (for user messages), and a listen action. The component itself does not handle the logic for these actions; it must be implemented by the consuming application.

```tsx
import Message from '@patternfly/chatbot/dist/dynamic/Message';
import AttachmentEdit from '@patternfly/chatbot/dist/dynamic/AttachmentEdit';
import FileDetails from '@patternfly/chatbot/dist/dynamic/FileDetails';
import FileDetailsLabel from '@patternfly/chatbot/dist/dynamic/FileDetailsLabel';
import FileDropZone from '@patternfly/chatbot/dist/dynamic/FileDropZone';
import { PreviewAttachment } from '@patternfly/chatbot/dist/dynamic/PreviewAttachment';
import ChatbotAlert from '@patternfly/chatbot/dist/dynamic/ChatbotAlert';
import { CSSProperties, useState, Fragment, FunctionComponent, MouseEvent as ReactMouseEvent, KeyboardEvent as ReactKeyboardEvent, Ref, isValidElement, cloneElement, Children, ReactNode, useRef, useEffect } from 'react';

// Example usage with feedback and copy/share actions:
<Message
  content="This is a message with actions."
  actions={[
    { id: 'feedback-good', label: 'Good', onClick: () => console.log('Feedback good') },
    { id: 'feedback-bad', label: 'Bad', onClick: () => console.log('Feedback bad') },
    { id: 'copy', label: 'Copy', onClick: () => console.log('Copy content') },
    { id: 'share', label: 'Share', onClick: () => console.log('Share content') }
  ]}
/>

// Example usage with edit action (typically for user messages):
<Message
  isUserMessage
  content="This is my message."
  actions={[
    { id: 'edit', label: 'Edit', onClick: () => console.log('Edit message') }
  ]}
/>

// Example usage with attachments and file upload:
<Message
  content="Here are the files."
  attachments={[
    {
      id: 'file1',
      name: 'document.pdf',
      size: '1.2MB',
      status: 'uploaded',
      details: <FileDetailsLabel label="PDF" />
    }
  ]}
  onAttachmentDelete={(id) => console.log(`Delete attachment ${id}`)}
/>

<FileDropZone
  onDropAccepted={(files) => console.log('Accepted files:', files)}
  onDropRejected={(files) => console.log('Rejected files:', files)}
/>

<AttachmentEdit
  file={{
    id: 'file2',
    name: 'image.png',
    size: '500KB',
    status: 'uploading',
    details: <FileDetails label="PNG" />
  }}
  onClose={() => console.log('Close attachment edit')}
/>

<PreviewAttachment
  file={{
    id: 'file3',
    name: 'report.docx',
    size: '800KB',
    status: 'uploaded',
    preview: <img src="path/to/preview.jpg" alt="Preview" />
  }}
/>

<ChatbotAlert
  title="Important Update"
  variant="info"
  content="Please review the latest changes."
/>
```

--------------------------------

### Compact ChatBot Implementation with PatternFly

Source: https://github.com/patternfly/chatbot/blob/main/packages/module/patternfly-docs/content/extensions/chatbot/examples/demos/Chatbot.md

Presents a compact version of the PatternFly ChatBot, showcasing a simplified layout suitable for smaller interfaces. This demo likely uses the same core components as the basic version but with different configurations or styling for a more condensed user experience.

```typescript
// This is a placeholder for the actual code from './ChatbotCompact.tsx'
// The provided text indicates the existence of this file but not its content.
console.log('Compact Chatbot component loaded');

```

--------------------------------

### Accessibility Testing Commands

Source: https://github.com/patternfly/chatbot/blob/main/README.md

Commands to build documentation, serve it, run accessibility tests, and serve the accessibility report.

```sh
npm run build:docs
npm run serve:docs
npm run test:a11y
npm run serve:a11y
```

--------------------------------

### Initialize Analytics Tracking

Source: https://github.com/patternfly/chatbot/blob/main/packages/module/patternfly-docs/content/extensions/chatbot/examples/Analytics/Analytics.md

Configure analytics providers and API keys for your ChatBot. The `initProps` object defines active providers, API keys, and optional configurations like CDN hosts or integrations. Setting `verbose` to `true` enables console debugging.

```TypeScript
const initProps: InitProps = {
  verbose: false,
  activeProviders: ['Segment', 'Umami', 'Posthog', 'Console' ], 
  segmentKey: 'TODO-key', // TODO add your key here
//  segmentCdn: 'https://my.org/cdn',  // Set up segment cdn (optional)
//  segmentIntegrations: { // Provide Segment integrations (optional)
//          'Segment.io': {
//            apiHost: 'my.api.host/api/v1',
//            protocol: 'https'
//          }
//        },

  posthogKey: 'TODO-key',
  umamiKey: 'TODO-umami-key',
  umamiHostUrl: 'http://localhost:3000', // TODO where is your JS provider?
  'umami-data-domains': 'TODO umami data domain',
  something: 'test'
};
```

--------------------------------

### Get Tracking API Instance

Source: https://github.com/patternfly/chatbot/blob/main/packages/module/patternfly-docs/content/extensions/chatbot/examples/Analytics/Analytics.md

Obtain an instance of the `trackingAPI` by calling the static `getTrackingProviders` method with your initialized properties. This API instance is used to emit analytics events.

```TypeScript
const trackingAPI = getTrackingProviders(initProps);
```

--------------------------------

### ChatBot Component Testing Guidelines

Source: https://github.com/patternfly/chatbot/blob/main/README.md

Outlines testing strategies for new components, including unit tests with React Testing Library, component tests with Cypress, and E2E tests.

```bash
- use React Testing Library for unit testing
- add unit tests to a `[ComponentName].test.tsx` file to your component's directory
- make sure all the core functionality is covered using Cypress component or E2E tests
- add component tests to `cypress/component/[ComponentName].cy.tsx` file and E2E tests to `cypress/e2e/[ComponentName].spec.cy.ts`
- add `ouiaId` to component props definition with a default value of the component name (for subcomponents, let's use `ComponentName-element-specification` naming convention e.g. `ouiaId="VirtualAssistant-send-button"`)
```

--------------------------------

### ChatBot in Drawer Implementation

Source: https://github.com/patternfly/chatbot/blob/main/packages/module/patternfly-docs/content/extensions/chatbot/examples/demos/Chatbot.md

Showcases a ChatBot integrated into a static, inline drawer. This configuration places the ChatBot beside page content without overlaying it, suitable for side panel integrations. The drawer implementation itself is left to the product's specific design.

```tsx
import React from 'react';
import { Page, PageSidebar, PageSection, PageSectionVariants } from '@patternfly/react-core';
import { Chatbot } from '@patternfly/react-chatbot';
import { Drawer, DrawerContent, DrawerContentBody, DrawerPanelContent, DrawerPanelBody } from '@patternfly/react-core';

// Assuming necessary imports for Page, Sidebar, Chatbot, Drawer components

const ChatbotInDrawerPage: React.FunctionComponent = () => {
  // Placeholder for sidebar content
  const sidebar = (
    <PageSidebar>
      {/* Sidebar content */}
    </PageSidebar>
  );

  // Chatbot component
  const chatbot = (
    <Chatbot />
  );

  // Drawer panel content
  const drawerPanelContent = (
    <DrawerPanelContent>
      <DrawerPanelBody>
        {chatbot}
      </DrawerPanelBody>
    </DrawerPanelContent>
  );

  // Main page content
  const mainContent = (
    <PageSection type={PageSectionVariants.light} isFilled>
      {/* Main page content */}
    </PageSection>
  );

  return (
    <Page sidebar={sidebar}>
      <Drawer>
        <DrawerContent panelContent={drawerPanelContent}>
          <DrawerContentBody>
            {mainContent}
          </DrawerContentBody>
        </DrawerContent>
      </Drawer>
    </Page>
  );
};

export default ChatbotInDrawerPage;
```

--------------------------------

### Chatbot Message Bar with Speech Recognition in Different Language

Source: https://github.com/patternfly/chatbot/blob/main/packages/module/patternfly-docs/content/extensions/chatbot/examples/UI/UI.md

Shows how to configure the MessageBar's speech recognition locale, defaulting to en-US. It provides an example of setting the locale to 'ja-JP' for Japanese speech recognition.

```tsx

```

--------------------------------

### Implement Messages with Quick Responses

Source: https://github.com/patternfly/chatbot/blob/main/packages/module/patternfly-docs/content/extensions/chatbot/examples/Messages/Messages.md

Describes how to offer clickable quick response options for chatbot messages using PatternFly labels within a label group. It explains that up to 5 labels can be displayed, and only one response can be selected at a time. The `quickResponses` prop for `<Message>` is detailed, along with options to customize the label group and individual labels via `quickResponseContainerProps` and `quickResponses` props.

```tsx
```tsx
// ./MessageWithQuickResponses.tsx
// This file shows how to implement quick response actions for chatbot messages.
// It demonstrates using PatternFly labels within a label group to provide clickable responses.
// The example covers configuring the number of visible labels and overriding default label group or label props.
```
```

--------------------------------

### ChatBot Comparison View

Source: https://github.com/patternfly/chatbot/blob/main/packages/module/patternfly-docs/content/extensions/chatbot/examples/demos/Chatbot.md

Illustrates a pattern for comparing responses from multiple ChatBots within a single window. The structure involves a container that holds multiple chatbot instances, allowing users to toggle between different conversations.

```tsx
import React from 'react';
import { Page, PageSection, PageSectionVariants } from '@patternfly/react-core';
import { Chatbot, ChatbotFooter } from '@patternfly/react-chatbot';
import { MessageBar } from '@patternfly/react-chatbot'; // Assuming MessageBar is part of chatbot or a related component

// Assuming a 'Compare' component exists for managing multiple chatbots
// import Compare from './Compare'; 

const EmbeddedComparisonChatbotPage: React.FunctionComponent = () => {
  // Placeholder for main content, including comparison setup
  const mainContent = (
    <PageSection type={PageSectionVariants.light} isFilled>
      <div className="pf-chatbot__compare-container">
        {/* <Compare /> */}
        {/* Placeholder for multiple Chatbot instances */}
        <Chatbot />
        <Chatbot />
        <ChatbotFooter>
          <MessageBar />
        </ChatbotFooter>
      </div>
    </PageSection>
  );

  return (
    <Page>
      {mainContent}
    </Page>
  );
};

export default EmbeddedComparisonChatbotPage;
```

--------------------------------

### Message Dividers Example

Source: https://github.com/patternfly/chatbot/blob/main/packages/module/patternfly-docs/content/extensions/chatbot/examples/Messages/Messages.md

Illustrates how to use message dividers to provide contextual updates. The default divider can show timestamps for significant conversation gaps, while `variant="fullWidth"` can announce events like an agent joining.

```tsx
import MessageDivider from '@patternfly/chatbot/dist/dynamic/MessageDivider';

// Example usage for a timestamp divider:
<MessageDivider timestamp="2023-10-27 10:05 AM" />

// Example usage for a full-width divider:
<MessageDivider variant="fullWidth" content="Agent has joined the chat" />
```

--------------------------------

### Chat Transcripts Download

Source: https://github.com/patternfly/chatbot/blob/main/packages/module/patternfly-docs/content/extensions/chatbot/examples/demos/Chatbot.md

Demonstrates how to implement downloadable chat transcripts for a ChatBot. This feature allows users to save conversation details in a Markdown file, facilitating easy sharing. It utilizes the 'file-saver' library for handling file downloads.

```tsx
import React from 'react';
import { Page, PageSection, PageSectionVariants } from '@patternfly/react-core';
import { Chatbot, Message, ChatbotFooter } from '@patternfly/react-chatbot';
import { MessageBar } from '@patternfly/react-chatbot';
import { Button } from '@patternfly/react-core';
import { saveAs } from 'file-saver';

// Mock function to generate transcript content
const generateTranscript = (messages: Message[]): string => {
  let transcript = '# Chat Transcript\n\n';
  messages.forEach(msg => {
    transcript += `**${msg.sender}:** ${msg.content}\n\n`;
  });
  return transcript;
};

const ChatbotTranscriptsPage: React.FunctionComponent = () => {
  const [messages, setMessages] = React.useState<Message[]>([]);

  const handleSendMessage = (text: string) => {
    const newMessage: Message = { id: Date.now().toString(), sender: 'user', content: text };
    setMessages([...messages, newMessage]);
    // Simulate bot response
    setTimeout(() => {
      const botMessage: Message = { id: (Date.now() + 1).toString(), sender: 'bot', content: `Echo: ${text}` };
      setMessages(prev => [...prev, botMessage]);
    }, 1000);
  };

  const handleDownloadTranscript = () => {
    const transcriptContent = generateTranscript(messages);
    const blob = new Blob([transcriptContent], { type: 'text/markdown;charset=utf-8' });
    saveAs(blob, 'chatbot_transcript.md');
  };

  // Placeholder for main content, including Chatbot and download button
  const mainContent = (
    <PageSection type={PageSectionVariants.light} isFilled>
      <Chatbot messages={messages} onSendMessage={handleSendMessage} />
      <Button onClick={handleDownloadTranscript} variant="secondary">Download Transcript</Button>
    </PageSection>
  );

  return (
    <Page>
      {mainContent}
    </Page>
  );
};

export default ChatbotTranscriptsPage;
```

--------------------------------

### ChatBot Display Mode Switching

Source: https://github.com/patternfly/chatbot/blob/main/packages/module/patternfly-docs/content/extensions/chatbot/examples/demos/Chatbot.md

Demonstrates dynamic switching of the ChatBot's display mode between overlay, drawer, and fullscreen. This involves conditional page layout adjustments and controlling the visibility of UI elements like the ChatBot toggle button.

```tsx
import React, { useState } from 'react';
import { Page, PageSidebar, PageSection, PageSectionVariants } from '@patternfly/react-core';
import { Chatbot, ChatbotDisplayMode } from '@patternfly/react-chatbot';
import { Drawer, DrawerContent, DrawerContentBody, DrawerPanelContent, DrawerPanelBody } from '@patternfly/react-core';

// Assuming necessary imports for Page, Sidebar, Chatbot, Drawer, HeaderOptionsDropdown, ChatbotToggle components

const ChatbotDisplayModePage: React.FunctionComponent = () => {
  const [displayMode, setDisplayMode] = useState<ChatbotDisplayMode>('overlay'); // Default mode

  // Placeholder for sidebar content
  const sidebar = (
    <PageSidebar>
      {/* Sidebar content */}
    </PageSidebar>
  );

  // Header with display mode switcher (simplified)
  const header = (
    <header>
      {/* Masthead content */}
      {/* <ChatbotHeaderOptionsDropdown currentMode={displayMode} onSelect={setDisplayMode} /> */}
    </header>
  );

  // Chatbot component with dynamic display mode
  const chatbot = (
    <Chatbot displayMode={displayMode} />
  );

  // Conditional rendering based on display mode
  let content;
  switch (displayMode) {
    case 'drawer':
      content = (
        <Drawer>
          <DrawerContent panelContent={<DrawerPanelContent><DrawerPanelBody>{chatbot}</DrawerPanelBody></DrawerPanelContent>}>
            <DrawerContentBody>
              <PageSection type={PageSectionVariants.light} isFilled>Page content in drawer mode</PageSection>
            </DrawerContentBody>
          </DrawerContent>
        </Drawer>
      );
      break;
    case 'fullscreen':
      content = (
        <PageSection type={PageSectionVariants.light} isFilled>
          {chatbot}
        </PageSection>
      );
      break;
    case 'overlay':
    default:
      content = (
        <PageSection type={PageSectionVariants.light} isFilled>
          Page content in overlay mode
          {/* <ChatbotToggle /> */}
        </PageSection>
      );
      break;
  }

  return (
    <Page header={header} sidebar={sidebar}>
      {content}
    </Page>
  );
};

export default ChatbotDisplayModePage;
```

--------------------------------

### Chatbot Header Drawer with Simple Menu

Source: https://github.com/patternfly/chatbot/blob/main/packages/module/patternfly-docs/content/extensions/chatbot/examples/UI/UI.md

Presents a simplified use case for the drawer, displaying a basic list of menu items. This showcases the component's flexibility for navigation or simple action lists.

```tsx
import React from 'react';
import { ChatbotHeaderDrawer, MenuItems } from '@patternfly/react-chatbot';

const simpleMenuItems: MenuItems = [
  { key: 'item1', content: 'Menu Item 1' },
  { key: 'item2', content: 'Menu Item 2' },
];

const MySimpleMenuDrawer = () => (
  <ChatbotHeaderDrawer
    menuItems={simpleMenuItems}
  />
);
```

--------------------------------

### Chatbot Attachment via Menu Options

Source: https://github.com/patternfly/chatbot/blob/main/packages/module/patternfly-docs/content/extensions/chatbot/examples/demos/AttachmentDemos.md

Demonstrates how to enable attachment selection via a menu in the MessageBar. This includes defining `attachMenuProps` to allow users to choose the source of their attachments and handling file uploads through custom logic.

```typescript
import React from 'react';
import {
  Chatbot,
  ChatbotContent,
  ChatbotFooter,
  ChatbotHeader,
  ChatbotHeaderOptionsDropdown,
  ChatbotHeaderTitle,
  ChatbotToggle,
  ChatbotWelcomePrompt,
  FileDetailsLabel,
  FileDropZone,
  Message,
  MessageBar,
  MessageBox,
} from '@patternfly/react-chatbot';
import { Alert } from '@patternfly/react-core';

const ChatbotAttachmentMenuDemo = () => {
  // Placeholder for actual attachment handling logic
  const handleAttach = (files: File[]) => {
    console.log('Files attached:', files);
  };

  const handleFileDrop = (files: File[]) => {
    console.log('Files dropped:', files);
  };

  const attachMenuItems = [
    { key: 'upload', label: 'Upload from computer' },
    { key: 'camera', label: 'Take photo' },
    { key: 'record', label: 'Record video' },
  ];

  return (
    <Chatbot>
      <ChatbotHeader>
        <ChatbotHeaderTitle>Chatbot</ChatbotHeaderTitle>
        <ChatbotHeaderOptionsDropdown />
      </ChatbotHeader>
      <ChatbotContent>
        <ChatbotWelcomePrompt />
        <Message messageType="user">User message with attachment option.</Message>
        <Message messageType="bot">Initial bot message.</Message>
        <Alert isSticky variant="info" title="Attachment menu enabled.">
          Select an option to attach a file.
        </Alert>
      </ChatbotContent>
      <ChatbotFooter>
        <FileDropZone onDrop={handleFileDrop}>
          <MessageBar
            onAttach={handleAttach}
            attachMenuProps={{ items: attachMenuItems }}
          />
          <FileDetailsLabel fileName="image.png" fileSize="500KB" />
        </FileDropZone>
      </ChatbotFooter>
      <ChatbotToggle />
    </Chatbot>
  );
};

export default ChatbotAttachmentMenuDemo;
```

--------------------------------

### Compact Chatbot Settings Form

Source: https://github.com/patternfly/chatbot/blob/main/packages/module/patternfly-docs/content/extensions/chatbot/examples/UI/UI.md

This snippet demonstrates how to make the chatbot's settings menu more compact by reducing the spacing between menu contents. It involves passing the `isCompact` prop to the `<SettingsForm>` component.

```js
/*
 * CompactSettings.tsx
 * This file provides the SettingsForm component, which can be configured for a compact layout.
 */

// Example usage of SettingsForm with isCompact prop:
// import React from 'react';
// import { SettingsForm } from './CompactSettings';
// 
// const App = () => {
//   return (
//     <SettingsForm isCompact />
//   );
// };
// 
// export default App;

```

--------------------------------

### Testing and Linting Commands

Source: https://github.com/patternfly/chatbot/blob/main/README.md

Commands to execute automated tests and run the linter to check code quality.

```sh
npm run test
npm run lint
```

--------------------------------

### Display Sources in Chatbot Messages

Source: https://github.com/patternfly/chatbot/blob/main/packages/module/patternfly-docs/content/extensions/chatbot/examples/Messages/Messages.md

Demonstrates how to display sources alongside chatbot messages, particularly useful for Retrieval-Augmented Generation. The `<Message>` component accepts a `sources` prop for pagination and an `isExternal` prop to indicate external links. Source objects require a `link` and benefit from descriptive `title` and `body` properties for user context.

```javascript
/*
 * This example demonstrates how to display sources in chatbot messages.
 * It assumes the existence of a <Message> component that accepts a 'sources' prop.
 * Each source object should have at least a 'link' property.
 * For better user experience, include 'title' and 'body' properties.
 * The 'isExternal' prop can be used to add an external link icon.
 */

// Example usage within a React component:
// <Message sources={[
//   {
//     title: 'Example Source Title',
//     body: 'A brief description of the source content.',
//     link: 'https://example.com/source',
//     isExternal: true
//   }
// ]}>
//   Chatbot response content
// </Message>

```

--------------------------------

### Chatbot Header Basic Configuration

Source: https://github.com/patternfly/chatbot/blob/main/packages/module/patternfly-docs/content/extensions/chatbot/examples/UI/UI.md

Demonstrates header options for a chatbot, allowing toggling of features like menus, logos (left-aligned or centered), selector dropdowns for AI models, and options dropdowns for display modes.

```tsx

```

--------------------------------

### Skip to Chatbot Content Button

Source: https://github.com/patternfly/chatbot/blob/main/packages/module/patternfly-docs/content/extensions/chatbot/examples/UI/UI.md

Demonstrates the implementation of a 'Skip to chatbot' button, leveraging PatternFly's skip to content component to improve page navigation and accessibility for users.

```tsx
/*
  This file demonstrates the implementation of a 'Skip to chatbot'
  button using PatternFly's skip to content component.
*/
// Placeholder for actual component code

```