@patternfly/chatbot 6.3.0-prerelease.2 → 6.3.0-prerelease.20

package/patternfly-docs/content/extensions/chatbot/examples/UI/TermsOfUse.tsx

@@ -1,15 +1,35 @@
-import React from 'react';
-import { Button, Checkbox, FormGroup, Radio, SkipToContent } from '@patternfly/react-core';
+import {
+  useRef,
+  useState,
+  FunctionComponent,
+  MouseEvent,
+  CSSProperties,
+  Ref,
+  MouseEvent as ReactMouseEvent
+} from 'react';
+import {
+  Button,
+  Checkbox,
+  SkipToContent,
+  MenuToggle,
+  MenuToggleElement,
+  Select,
+  SelectList,
+  SelectOption,
+  Stack
+} from '@patternfly/react-core';
 import TermsOfUse from '@patternfly/chatbot/dist/dynamic/TermsOfUse';
 import Chatbot, { ChatbotDisplayMode } from '@patternfly/chatbot/dist/dynamic/Chatbot';
 import termsAndConditionsHeader from './PF-TermsAndConditionsHeader.svg';
 
-export const TermsOfUseExample: React.FunctionComponent = () => {
-  const [isModalOpen, setIsModalOpen] = React.useState(true);
-  const [displayMode, setDisplayMode] = React.useState(ChatbotDisplayMode.default);
-  const [hasImage, setHasImage] = React.useState(true);
-  const chatbotRef = React.useRef<HTMLDivElement>(null);
-  const termsRef = React.useRef<HTMLDivElement>(null);
+export const TermsOfUseExample: FunctionComponent = () => {
+  const [isModalOpen, setIsModalOpen] = useState(true);
+  const [displayMode, setDisplayMode] = useState(ChatbotDisplayMode.default);
+  const [hasImage, setHasImage] = useState(true);
+  const chatbotRef = useRef<HTMLDivElement>(null);
+  const termsRef = useRef<HTMLDivElement>(null);
+  const [isOpen, setIsOpen] = useState(false);
+  const [selected, setSelected] = useState<string>('Select display mode');
 
   const handleSkipToContent = (e) => {
     e.preventDefault();
@@ -21,7 +41,7 @@ export const TermsOfUseExample: React.FunctionComponent = () => {
     }
   };
 
-  const handleModalToggle = (_event: React.MouseEvent | MouseEvent | KeyboardEvent) => {
+  const handleModalToggle = (_event: MouseEvent | MouseEvent | KeyboardEvent) => {
     setIsModalOpen(!isModalOpen);
   };
 
@@ -34,6 +54,41 @@ export const TermsOfUseExample: React.FunctionComponent = () => {
     // eslint-disable-next-line no-console
     console.log('Clicked secondary action');
   };
+  const onSelect = (_event: ReactMouseEvent<Element, MouseEvent> | undefined, value: string | number | undefined) => {
+    setSelected(value as string);
+    setIsOpen(false);
+    if (value === 'Default') {
+      setDisplayMode(ChatbotDisplayMode.default);
+    }
+    if (value === 'Docked') {
+      setDisplayMode(ChatbotDisplayMode.docked);
+    }
+    if (value === 'Fullscreen') {
+      setDisplayMode(ChatbotDisplayMode.fullscreen);
+    }
+    if (value === 'Embedded') {
+      setDisplayMode(ChatbotDisplayMode.embedded);
+    }
+  };
+
+  const onToggleClick = () => {
+    setIsOpen(!isOpen);
+  };
+
+  const toggle = (toggleRef: Ref<MenuToggleElement>) => (
+    <MenuToggle
+      ref={toggleRef}
+      onClick={onToggleClick}
+      isExpanded={isOpen}
+      style={
+        {
+          width: '200px'
+        } as CSSProperties
+      }
+    >
+      {selected}
+    </MenuToggle>
+  );
 
   const introduction = (
     <>
@@ -89,45 +144,33 @@ export const TermsOfUseExample: React.FunctionComponent = () => {
           boxShadow: 'var(--pf-t--global--box-shadow--lg)'
         }}
       >
-        <FormGroup role="radiogroup" isInline fieldId="basic-form-radio-group" label="Display mode">
-          <Radio
-            isChecked={displayMode === ChatbotDisplayMode.default}
-            onChange={() => setDisplayMode(ChatbotDisplayMode.default)}
-            name="basic-inline-radio"
-            label="Default"
-            id="default"
-          />
-          <Radio
-            isChecked={displayMode === ChatbotDisplayMode.docked}
-            onChange={() => setDisplayMode(ChatbotDisplayMode.docked)}
-            name="basic-inline-radio"
-            label="Docked"
-            id="docked"
-          />
-          <Radio
-            isChecked={displayMode === ChatbotDisplayMode.fullscreen}
-            onChange={() => setDisplayMode(ChatbotDisplayMode.fullscreen)}
-            name="basic-inline-radio"
-            label="Fullscreen"
-            id="fullscreen"
-          />
-          <Radio
-            isChecked={displayMode === ChatbotDisplayMode.embedded}
-            onChange={() => setDisplayMode(ChatbotDisplayMode.embedded)}
-            name="basic-inline-radio"
-            label="Embedded"
-            id="embedded"
-          />
-        </FormGroup>
-        <Checkbox
-          isChecked={hasImage}
-          aria-label="Toggle whether terms and conditions has a header image"
-          id="toggle-header-image"
-          name="toggle-header-image"
-          label="Has image in header"
-          onChange={(_event, checked) => setHasImage(checked)}
-        ></Checkbox>
-        <Button onClick={handleModalToggle}>Launch modal</Button>
+        <Stack hasGutter>
+          <Select
+            id="single-select"
+            isOpen={isOpen}
+            selected={selected}
+            onSelect={onSelect}
+            onOpenChange={(isOpen) => setIsOpen(isOpen)}
+            toggle={toggle}
+            shouldFocusToggleOnSelect
+          >
+            <SelectList>
+              <SelectOption value="Default">Default</SelectOption>
+              <SelectOption value="Docked">Docked</SelectOption>
+              <SelectOption value="Fullscreen">Fullscreen</SelectOption>
+              <SelectOption value="Embedded">Embedded</SelectOption>
+            </SelectList>
+          </Select>
+          <Checkbox
+            isChecked={hasImage}
+            aria-label="Toggle whether terms and conditions has a header image"
+            id="toggle-header-image"
+            name="toggle-header-image"
+            label="Has image in header"
+            onChange={(_event, checked) => setHasImage(checked)}
+          ></Checkbox>
+          <Button onClick={handleModalToggle}>Launch modal</Button>
+        </Stack>
       </div>
       <Chatbot ref={chatbotRef} displayMode={displayMode} isVisible></Chatbot>
       <TermsOfUse

package/patternfly-docs/content/extensions/chatbot/examples/UI/TermsOfUseCompact.tsx

@@ -0,0 +1,179 @@
+import {
+  useRef,
+  useState,
+  FunctionComponent,
+  MouseEvent,
+  CSSProperties,
+  Ref,
+  MouseEvent as ReactMouseEvent
+} from 'react';
+import {
+  Button,
+  SkipToContent,
+  MenuToggle,
+  MenuToggleElement,
+  Select,
+  SelectList,
+  SelectOption,
+  Stack
+} from '@patternfly/react-core';
+import TermsOfUse from '@patternfly/chatbot/dist/dynamic/TermsOfUse';
+import Chatbot, { ChatbotDisplayMode } from '@patternfly/chatbot/dist/dynamic/Chatbot';
+
+export const TermsOfUseCompactExample: FunctionComponent = () => {
+  const [isModalOpen, setIsModalOpen] = useState(true);
+  const [displayMode, setDisplayMode] = useState(ChatbotDisplayMode.default);
+  const chatbotRef = useRef<HTMLDivElement>(null);
+  const termsRef = useRef<HTMLDivElement>(null);
+  const [isOpen, setIsOpen] = useState(false);
+  const [selected, setSelected] = useState<string>('Select display mode');
+
+  const handleSkipToContent = (e) => {
+    e.preventDefault();
+    if (!isModalOpen && chatbotRef.current) {
+      chatbotRef.current.focus();
+    }
+    if (isModalOpen && termsRef.current) {
+      termsRef.current.focus();
+    }
+  };
+
+  const handleModalToggle = (_event: ReactMouseEvent | MouseEvent | KeyboardEvent) => {
+    setIsModalOpen(!isModalOpen);
+  };
+
+  const onPrimaryAction = () => {
+    // eslint-disable-next-line no-console
+    console.log('Clicked primary action');
+  };
+
+  const onSecondaryAction = () => {
+    // eslint-disable-next-line no-console
+    console.log('Clicked secondary action');
+  };
+
+  const onSelect = (_event: ReactMouseEvent<Element, MouseEvent> | undefined, value: string | number | undefined) => {
+    setSelected(value as string);
+    setIsOpen(false);
+    if (value === 'Default') {
+      setDisplayMode(ChatbotDisplayMode.default);
+    }
+    if (value === 'Docked') {
+      setDisplayMode(ChatbotDisplayMode.docked);
+    }
+    if (value === 'Fullscreen') {
+      setDisplayMode(ChatbotDisplayMode.fullscreen);
+    }
+    if (value === 'Embedded') {
+      setDisplayMode(ChatbotDisplayMode.embedded);
+    }
+  };
+
+  const onToggleClick = () => {
+    setIsOpen(!isOpen);
+  };
+
+  const toggle = (toggleRef: Ref<MenuToggleElement>) => (
+    <MenuToggle
+      ref={toggleRef}
+      onClick={onToggleClick}
+      isExpanded={isOpen}
+      style={
+        {
+          width: '200px'
+        } as CSSProperties
+      }
+    >
+      {selected}
+    </MenuToggle>
+  );
+
+  const introduction = (
+    <>
+      <p>
+        Welcome to PatternFly! These terms and conditions outline the rules and regulations for the use of PatternFly's
+        website, located at <a href="https://patternfly.org">www.patternfly.org.</a>
+      </p>
+      <p>
+        By accessing this website, you are agreeing with our terms and conditions. If you do not agree to all of these
+        terms and conditions, do not continue to use PatternFly.
+      </p>
+    </>
+  );
+
+  const terminology = (
+    <>
+      <p>
+        The following terminology applies to these Terms and Conditions, Privacy Statement, Disclaimer Notice, and all
+        Agreements:
+      </p>
+      <ul>
+        <li>
+          "Client", "You", and "Your" refer to you, the person using this website who is compliant with the Company's
+          terms and conditions.
+        </li>
+        <li>
+          "The Company", "Ourselves", "We", "Our", and "Us", refer to our Company. "Party", "Parties", or "Us", refers
+          to both the Client and ourselves.
+        </li>
+      </ul>
+    </>
+  );
+
+  const body = (
+    <>
+      <h2>Introduction</h2>
+      {introduction}
+      <h2>Terminology</h2>
+      {terminology}
+    </>
+  );
+
+  return (
+    <>
+      <SkipToContent style={{ zIndex: '999' }} onClick={handleSkipToContent} href="#">
+        Skip to chatbot
+      </SkipToContent>
+      <div
+        style={{
+          position: 'fixed',
+          padding: 'var(--pf-t--global--spacer--lg)',
+          zIndex: '601',
+          boxShadow: 'var(--pf-t--global--box-shadow--lg)'
+        }}
+      >
+        <Stack hasGutter>
+          <Select
+            id="single-select"
+            isOpen={isOpen}
+            selected={selected}
+            onSelect={onSelect}
+            onOpenChange={(isOpen) => setIsOpen(isOpen)}
+            toggle={toggle}
+            shouldFocusToggleOnSelect
+          >
+            <SelectList>
+              <SelectOption value="Default">Default</SelectOption>
+              <SelectOption value="Docked">Docked</SelectOption>
+              <SelectOption value="Fullscreen">Fullscreen</SelectOption>
+              <SelectOption value="Embedded">Embedded</SelectOption>
+            </SelectList>
+          </Select>
+          <Button onClick={handleModalToggle}>Launch modal</Button>
+        </Stack>
+      </div>
+      <Chatbot ref={chatbotRef} displayMode={displayMode} isVisible></Chatbot>
+      <TermsOfUse
+        ref={termsRef}
+        displayMode={displayMode}
+        isModalOpen={isModalOpen}
+        handleModalToggle={handleModalToggle}
+        onPrimaryAction={onPrimaryAction}
+        onSecondaryAction={onSecondaryAction}
+        isCompact
+      >
+        {body}
+      </TermsOfUse>
+    </>
+  );
+};

package/patternfly-docs/content/extensions/chatbot/examples/UI/UI.md

@@ -84,6 +84,7 @@ import userAvatar from '../Messages/user_avatar.svg';
 import patternflyAvatar from '../Messages/patternfly_avatar.jpg';
 import termsAndConditionsHeader from './PF-TermsAndConditionsHeader.svg';
 import { CloseIcon, SearchIcon, OutlinedCommentsIcon } from '@patternfly/react-icons';
+import { FunctionComponent, FormEvent, useState, useRef, MouseEvent, isValidElement, cloneElement, Children, ReactNode, Ref, MouseEvent as ReactMouseEvent, CSSProperties} from 'react';
 
 ## Structure
 
@@ -396,6 +397,14 @@ This example also includes an example of how to use [skip to content](/patternfl
 
 ```
 
+### Compact terms of use
+
+To apply compact styling to the terms of use modal, pass `isCompact` to `<TermsOfUse>`. This will remove the header image and adjust the spacing of text, so that there is less white space in the modal.
+
+```js file="./TermsOfUseCompact.tsx" isFullscreen
+
+```
+
 ### Settings
 
 To contain user preference controls and other ChatBot setting options, you can create a separate settings page that can accept any number of buttons, dropdown menus, toggles, labels, and so on. This settings page will render all components appropriately within all 4 display modes.
@@ -406,6 +415,14 @@ In this demo, you can toggle the settings page by clicking the "Settings" button
 
 ```
 
+### Compact settings
+
+To make the settings menu compact, with less spacing between the menu contents, pass `isCompact` to the `<SettingsForm>`.
+
+```js file="./CompactSettings.tsx" isFullscreen
+
+```
+
 ## Modals
 
 ### Modal

package/patternfly-docs/content/extensions/chatbot/examples/demos/AttachmentDemos.md

@@ -44,6 +44,9 @@ 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 { FunctionComponent, useState, useRef, isValidElement, cloneElement, Children, ReactNode, MouseEvent } from 'react';
+import { getTrackingProviders } from "@patternfly/chatbot/dist/dynamic/tracking";
+import ChatbotConversationHistoryNav from '@patternfly/chatbot/dist/dynamic/ChatbotConversationHistoryNav';
 
 ## Demos
 
@@ -61,6 +64,40 @@ It is also important to announce when new content appears onscreen for accessibi
 
 ```
 
+### Message auto-scrolling
+
+This demo shows auto-scrolling functionality, which automatically scrolls to the bottom of the active chat.
+
+To enable auto-scroll behavior pass the `enableSmartScroll` prop to the [`<MessageBox>`](/patternfly-ai/chatbot/ui#message-box) component.
+
+When enabled:
+
+- Scroll position is automatically managed based on user interaction.
+- Scrolling is _not_ forced to the bottom when new messages arrive, unless explicitly triggered via the `scrollToBottom()` method.
+- If the user scrolls up or interacts with UI controls like "Back to top" or "Back to bottom", the component pauses auto-scroll to respect user intent.
+- Auto-scroll resumes only when the user scrolls back down manually or programmatically via the `scrollToBottom({resumeSmartScroll: true})` method.
+
+#### Imperative methods via `ref`
+
+When using `ref`, the `<MessageBox>` component exposes the following methods:
+
+- `scrollToBottom()`: Scrolls to the bottom of the message container.
+- `scrollToTop()`: Scrolls to the top of the message container.
+- `isSmartScrollActive()`: Returns `true` if smart auto-scroll is currently active.
+- Native `HTMLDivElement` methods like `scrollTo()`.
+
+This demo includes broader ChatBot features, including:
+
+1. A [`<ChatbotToggle>`](/patternfly-ai/chatbot/ui#toggle) that controls the [`<Chatbot>`](/patternfly-ai/chatbot/ui#container) container.
+2. A `<ChatbotContent>` and [`<MessageBox>`](/patternfly-ai/chatbot/ui#content-and-message-box) with:
+   - A `<ChatbotWelcomePrompt>`
+   - An initial user message and initial bot message
+3. A [`<ChatbotFooter>`](/patternfly-ai/chatbot/ui#footer) with a [`<ChatbotFootnote>`](/patternfly-ai/chatbot/ui#footnote-with-popover) and a `<MessageBar>`
+
+```js file="./ChatbotScrolling.tsx" isFullscreen
+
+```
+
 ### Attach via upload button in message bar
 
 This demo displays unique attachment features, including:

package/patternfly-docs/content/extensions/chatbot/examples/demos/Chatbot.md

@@ -58,7 +58,7 @@ 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';
 
 ### Basic ChatBot
 
@@ -87,6 +87,14 @@ This demo displays a basic ChatBot, which includes:
 
 ```
 
+### Compact ChatBot
+
+This demo displays a basic compact ChatBot
+
+```js file="./ChatbotCompact.tsx" isFullscreen
+
+```
+
 ### Embedded ChatBot
 
 This demo displays an embedded ChatBot. Embedded ChatBots are meant to be placed within a page in your product. This demo includes:

package/patternfly-docs/content/extensions/chatbot/examples/demos/Chatbot.tsx

@@ -1,5 +1,4 @@
-import React from 'react';
-
+import { useEffect, useRef, useState, FunctionComponent, MouseEvent } from 'react';
 import { Bullseye, Brand, DropdownList, DropdownItem, DropdownGroup, SkipToContent } from '@patternfly/react-core';
 
 import ChatbotToggle from '@patternfly/chatbot/dist/dynamic/ChatbotToggle';
@@ -80,8 +79,6 @@ spec:
 Here is some JavaScript code:
 
 ~~~js
-import React from 'react';
-
 const MessageLoading = () => (
   <div className="pf-chatbot__message-loading">
     <span className="pf-chatbot__message-loading-dots">
@@ -179,40 +176,37 @@ const initialConversations = {
 };
 
 const actionEvent2 = 'ActionEvent2';
-export const ChatbotDemo: React.FunctionComponent = () => {
-  const [chatbotVisible, setChatbotVisible] = React.useState<boolean>(true);
-  const [displayMode, setDisplayMode] = React.useState<ChatbotDisplayMode>(ChatbotDisplayMode.default);
-  const [messages, setMessages] = React.useState<MessageProps[]>(initialMessages);
-  const [selectedModel, setSelectedModel] = React.useState('Granite 7B');
-  const [isSendButtonDisabled, setIsSendButtonDisabled] = React.useState(false);
-  const [isDrawerOpen, setIsDrawerOpen] = React.useState(false);
-  const [conversations, setConversations] = React.useState<Conversation[] | { [key: string]: Conversation[] }>(
+export const ChatbotDemo: FunctionComponent = () => {
+  const [chatbotVisible, setChatbotVisible] = useState<boolean>(true);
+  const [displayMode, setDisplayMode] = useState<ChatbotDisplayMode>(ChatbotDisplayMode.default);
+  const [messages, setMessages] = useState<MessageProps[]>(initialMessages);
+  const [selectedModel, setSelectedModel] = useState('Granite 7B');
+  const [isSendButtonDisabled, setIsSendButtonDisabled] = useState(false);
+  const [isDrawerOpen, setIsDrawerOpen] = useState(false);
+  const [conversations, setConversations] = useState<Conversation[] | { [key: string]: Conversation[] }>(
     initialConversations
   );
-  const [announcement, setAnnouncement] = React.useState<string>();
-  const scrollToBottomRef = React.useRef<HTMLDivElement>(null);
-  const toggleRef = React.useRef<HTMLButtonElement>(null);
-  const chatbotRef = React.useRef<HTMLDivElement>(null);
-  const historyRef = React.useRef<HTMLButtonElement>(null);
+  const [announcement, setAnnouncement] = useState<string>();
+  const scrollToBottomRef = useRef<HTMLDivElement>(null);
+  const toggleRef = useRef<HTMLButtonElement>(null);
+  const chatbotRef = useRef<HTMLDivElement>(null);
+  const historyRef = useRef<HTMLButtonElement>(null);
 
   // Auto-scrolls to the latest message
-  React.useEffect(() => {
+  useEffect(() => {
     // don't scroll the first load - in this demo, we know we start with two messages
     if (messages.length > 2) {
       scrollToBottomRef.current?.scrollIntoView({ behavior: 'smooth' });
     }
   }, [messages]);
 
-  const onSelectModel = (
-    _event: React.MouseEvent<Element, MouseEvent> | undefined,
-    value: string | number | undefined
-  ) => {
+  const onSelectModel = (_event: MouseEvent<Element, MouseEvent> | undefined, value: string | number | undefined) => {
     setSelectedModel(value as string);
     tracking.trackSingleItem('ModelSelected', { model: value });
   };
 
   const onSelectDisplayMode = (
-    _event: React.MouseEvent<Element, MouseEvent> | undefined,
+    _event: MouseEvent<Element, MouseEvent> | undefined,
     value: string | number | undefined
   ) => {
     setDisplayMode(value as ChatbotDisplayMode);

package/patternfly-docs/content/extensions/chatbot/examples/demos/ChatbotAttachment.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import { useState, FunctionComponent, MouseEvent } from 'react';
 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';
@@ -37,7 +37,7 @@ interface ModalData {
   fileName: string;
 }
 
-export const BasicDemo: React.FunctionComponent = () => {
+export const BasicDemo: FunctionComponent = () => {
   const onAttachmentClose = (event, name, id) => {
     const updatedMessages: MessageProps[] = [];
     messages.map((message) => {
@@ -75,19 +75,19 @@ export const BasicDemo: React.FunctionComponent = () => {
     }
   ];
 
-  const [error, setError] = React.useState<string>();
-  const [chatbotVisible, setChatbotVisible] = React.useState<boolean>(true);
-  const [file, setFile] = React.useState<File>();
-  const [isLoadingFile, setIsLoadingFile] = React.useState<boolean>(false);
-  const [messages, setMessages] = React.useState<MessageProps[]>(initialMessages);
-  const [isPreviewModalOpen, setIsPreviewModalOpen] = React.useState<boolean>(false);
-  const [isEditModalOpen, setIsEditModalOpen] = React.useState<boolean>(false);
-  const [currentModalData, setCurrentModalData] = React.useState<ModalData>();
-  const [showAlert, setShowAlert] = React.useState<boolean>(false);
-  const [displayMode, setDisplayMode] = React.useState<ChatbotDisplayMode>(ChatbotDisplayMode.default);
+  const [error, setError] = useState<string>();
+  const [chatbotVisible, setChatbotVisible] = useState<boolean>(true);
+  const [file, setFile] = useState<File>();
+  const [isLoadingFile, setIsLoadingFile] = useState<boolean>(false);
+  const [messages, setMessages] = useState<MessageProps[]>(initialMessages);
+  const [isPreviewModalOpen, setIsPreviewModalOpen] = useState<boolean>(false);
+  const [isEditModalOpen, setIsEditModalOpen] = useState<boolean>(false);
+  const [currentModalData, setCurrentModalData] = useState<ModalData>();
+  const [showAlert, setShowAlert] = useState<boolean>(false);
+  const [displayMode, setDisplayMode] = useState<ChatbotDisplayMode>(ChatbotDisplayMode.default);
 
   const onSelectDisplayMode = (
-    _event: React.MouseEvent<Element, MouseEvent> | undefined,
+    _event: MouseEvent<Element, MouseEvent> | undefined,
     value: string | number | undefined
   ) => {
     setDisplayMode(value as ChatbotDisplayMode);
@@ -218,7 +218,16 @@ export const BasicDemo: React.FunctionComponent = () => {
             </ChatbotHeaderOptionsDropdown>
           </ChatbotHeaderActions>
         </ChatbotHeader>
-        <FileDropZone onFileDrop={handleFileDrop} displayMode={displayMode}>
+        <FileDropZone
+          onFileDrop={handleFileDrop}
+          displayMode={displayMode}
+          infoText="Allowed file types are .json, .txt and .yaml and maximum file size is 25 MB."
+          allowedFileTypes={{
+            'text/plain': ['.txt'],
+            'application/json': ['.json'],
+            'application/yaml': ['.yaml', '.yml']
+          }}
+        >
           <ChatbotContent>
             <MessageBox>
               {showAlert && (

package/patternfly-docs/content/extensions/chatbot/examples/demos/ChatbotAttachmentMenu.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import ChatbotToggle from '@patternfly/chatbot/dist/dynamic/ChatbotToggle';
 import Chatbot from '@patternfly/chatbot/dist/dynamic/Chatbot';
 import ChatbotContent from '@patternfly/chatbot/dist/dynamic/ChatbotContent';
@@ -18,6 +17,7 @@ import userAvatar from '../Messages/user_avatar.svg';
 import patternflyAvatar from '../Messages/patternfly_avatar.jpg';
 import '@patternfly/react-core/dist/styles/base.css';
 import '@patternfly/chatbot/dist/css/main.css';
+import { cloneElement, FunctionComponent, isValidElement, ReactNode, useState, Children } from 'react';
 
 const initialMenuItems = [
   <DropdownList key="list-1">
@@ -84,14 +84,14 @@ const messages: MessageProps[] = [
   }
 ];
 
-export const AttachmentMenuDemo: React.FunctionComponent = () => {
-  const [chatbotVisible, setChatbotVisible] = React.useState<boolean>(true);
-  const [file, setFile] = React.useState<File>();
-  const [isLoadingFile, setIsLoadingFile] = React.useState<boolean>(false);
-  const [userFacingMenuItems, setUserFacingMenuItems] = React.useState<React.ReactNode>([]);
-  const [error, setError] = React.useState<string>();
-  const [showAlert, setShowAlert] = React.useState<boolean>(false);
-  const [isOpen, setIsOpen] = React.useState<boolean>(false);
+export const AttachmentMenuDemo: FunctionComponent = () => {
+  const [chatbotVisible, setChatbotVisible] = useState<boolean>(true);
+  const [file, setFile] = useState<File>();
+  const [isLoadingFile, setIsLoadingFile] = useState<boolean>(false);
+  const [userFacingMenuItems, setUserFacingMenuItems] = useState<ReactNode>([]);
+  const [error, setError] = useState<string>();
+  const [showAlert, setShowAlert] = useState<boolean>(false);
+  const [isOpen, setIsOpen] = useState<boolean>(false);
 
   const { open, getInputProps } = useDropzone({
     onDropAccepted: (files: File[]) => {
@@ -162,18 +162,18 @@ export const AttachmentMenuDemo: React.FunctionComponent = () => {
     setUserFacingMenuItems(initialMenuItems.concat(uploadMenuItems));
   };
 
-  const findMatchingElements = (elements: React.ReactNode[], targetValue: string) => {
-    let matchingElements = [] as React.ReactNode[];
+  const findMatchingElements = (elements: ReactNode[], targetValue: string) => {
+    let matchingElements = [] as ReactNode[];
 
     elements.forEach((element) => {
-      if (React.isValidElement(element)) {
+      if (isValidElement(element)) {
         // Check if the element's value matches the targetValue
         if (element.props.value && element.props.value.toLowerCase().includes(targetValue.toLowerCase())) {
-          matchingElements.push(React.cloneElement(element, { key: element.props.value }));
+          matchingElements.push(cloneElement(element, { key: element.props.value }));
         }
 
         // Recursively check the element's children
-        const children = React.Children.toArray(element.props.children);
+        const children = Children.toArray(element.props.children);
         matchingElements = matchingElements.concat(findMatchingElements(children, targetValue));
       }
     });