@patternfly/chatbot 6.3.0-prerelease.8 → 6.3.0

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

@@ -1,13 +1,32 @@
-import React from 'react';
-import { Button, FormGroup, Radio, SkipToContent } from '@patternfly/react-core';
+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: React.FunctionComponent = () => {
-  const [isModalOpen, setIsModalOpen] = React.useState(true);
-  const [displayMode, setDisplayMode] = React.useState(ChatbotDisplayMode.default);
-  const chatbotRef = React.useRef<HTMLDivElement>(null);
-  const termsRef = React.useRef<HTMLDivElement>(null);
+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();
@@ -19,7 +38,7 @@ export const TermsOfUseCompactExample: React.FunctionComponent = () => {
     }
   };
 
-  const handleModalToggle = (_event: React.MouseEvent | MouseEvent | KeyboardEvent) => {
+  const handleModalToggle = (_event: ReactMouseEvent | MouseEvent | KeyboardEvent) => {
     setIsModalOpen(!isModalOpen);
   };
 
@@ -33,6 +52,42 @@ export const TermsOfUseCompactExample: React.FunctionComponent = () => {
     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>
@@ -87,37 +142,25 @@ export const TermsOfUseCompactExample: 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>
-        <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>
+          <Button onClick={handleModalToggle}>Launch modal</Button>
+        </Stack>
       </div>
       <Chatbot ref={chatbotRef} displayMode={displayMode} isVisible></Chatbot>
       <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
 
@@ -399,6 +400,7 @@ 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
 
 ```
@@ -416,6 +418,7 @@ 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
 
 ```

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,6 +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
 

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">
@@ -135,7 +132,7 @@ const initialMessages: MessageProps[] = [
       positive: { onClick: () => tracking.trackSingleItem(actionEventName, { response: 'Good response' }) },
       negative: { onClick: () => tracking.trackSingleItem(actionEventName, { response: 'Bad response' }) },
       copy: { onClick: () => tracking.trackSingleItem(actionEventName, { response: 'Copy' }) },
-      share: { onClick: () => tracking.trackSingleItem(actionEventName, { response: 'Share' }) },
+      download: { onClick: () => tracking.trackSingleItem(actionEventName, { response: 'Download' }) },
       listen: { onClick: () => tracking.trackSingleItem(actionEventName, { response: 'Listen' }) }
     }
   }
@@ -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);
@@ -275,7 +269,7 @@ export const ChatbotDemo: React.FunctionComponent = () => {
           positive: { onClick: () => tracking.trackSingleItem(actionEvent2, { response: 'Good response' }) },
           negative: { onClick: () => tracking.trackSingleItem(actionEvent2, { response: 'Bad response' }) },
           copy: { onClick: () => tracking.trackSingleItem(actionEvent2, { response: 'Copy' }) },
-          share: { onClick: () => tracking.trackSingleItem(actionEvent2, { response: 'Share' }) },
+          download: { onClick: () => tracking.trackSingleItem(actionEvent2, { response: 'Download' }) },
           listen: { onClick: () => tracking.trackSingleItem(actionEvent2, { response: 'Listen' }) }
         }
       });

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);
@@ -138,10 +138,17 @@ export const BasicDemo: React.FunctionComponent = () => {
         }, 1000);
       })
       .catch((error: DOMException) => {
+        setShowAlert(true);
         setError(`Failed to read file: ${error.message}`);
       });
   };
 
+  const handleAttachRejected = () => {
+    setFile(undefined);
+    setShowAlert(true);
+    setError('This demo only supports file extensions .txt, .json, .yaml, and .yaml. Please try a different file.');
+  };
+
   const handleFileDrop = (event: DropEvent, data: File[]) => {
     handleFile(data);
   };
@@ -218,7 +225,17 @@ 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']
+          }}
+          onAttachRejected={handleAttachRejected}
+        >
           <ChatbotContent>
             <MessageBox>
               {showAlert && (
@@ -245,7 +262,17 @@ export const BasicDemo: React.FunctionComponent = () => {
                 <FileDetailsLabel fileName={file.name} isLoading={isLoadingFile} onClose={onClose} />
               </div>
             )}
-            <MessageBar onSendMessage={handleSend} hasAttachButton handleAttach={handleAttach} />
+            <MessageBar
+              onSendMessage={handleSend}
+              hasAttachButton
+              handleAttach={handleAttach}
+              allowedFileTypes={{
+                'text/plain': ['.txt'],
+                'application/json': ['.json'],
+                'application/yaml': ['.yaml', '.yml']
+              }}
+              onAttachRejected={handleAttachRejected}
+            />
             <ChatbotFootnote label="ChatBot uses AI. Check for mistakes." />
           </ChatbotFooter>
         </FileDropZone>

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[]) => {
@@ -127,6 +127,7 @@ export const AttachmentMenuDemo: React.FunctionComponent = () => {
   // Attachments
   // --------------------------------------------------------------------------
   const handleFileDrop = (event: DropEvent, data: File[]) => {
+    setIsOpen(false);
     setFile(data[0]);
     setIsLoadingFile(true);
     setTimeout(() => {
@@ -162,18 +163,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));
       }
     });