Messages

This demo displays unique attachment features, including:

1. <ChatbotContent> and <MessageBox> components that contain:
   • An initial user <Message> with an attachment.
   • The ability to preview or edit the attachment using the <PreviewAttachment> and <AttachmentEdit> components.
   • A PatternFly <Alert>, customized to be sticky within the ChatBot window, which provides success or error messages for attachments.
2. <ChatbotContent> and <ChatbotFooter>, wrapped in a <FileDropZone> component to support drag and drop attachments. The footer also:
   • Displays attached files, using a <FileDetailsLabel> component.
   • Demonstrates custom handling of file uploads, using the handleAttach in <MessageBar> and handleFileDrop in <FileDropZone>.

This demo includes broader ChatBot features, including:

1. A <ChatbotToggle> that controls the <Chatbot> container.
2. A <ChatbotHeader> that updates based on the display mode, with sub-components (including a <ChatbotHeaderTitle>).
3. The ability to swap display modes via the <ChatbotHeaderOptionsDropdown>
4. A <ChatbotContent> and <MessageBox> with:
   • A <ChatbotWelcomePrompt>
   • The ability to preview or edit the attachment.
   • An initial bot message
5. A <ChatbotFooter> with a <ChatbotFootnote> and a <MessageBar>

This demo displays unique attachment features, including:

1. <ChatbotContent> and <MessageBox> components that contain:

   • A PatternFly <Alert> to provide success or error messages for attachments.

2. <ChatbotContent> and <ChatbotFooter>, wrapped in a <FileDropZone> component to support drag and drop attachments. The footer also:

   • Displays attached files, using a <FileDetailsLabel> component.
   • Demonstrates custom handling of file uploads, using the handleAttach in <MessageBar> and handleFileDrop in <FileDropZone>.
   • Demonstrates how to define the attachMenuProps in the <MessageBar> to create a menu that allows users to select the source of an item they're attaching.

This demo includes broader ChatBot features, including:

1. A <ChatbotToggle> that controls the <Chatbot> container.
2. A <ChatbotContent> and <MessageBox> with:
   • A <ChatbotWelcomePrompt>
   • An initial user message and initial bot message
3. A <ChatbotFooter> with a <ChatbotFootnote> and a <MessageBar>