Chatbot attachments

Demos

Attach via upload button in message bar

This demo displays unique attachment features, including:

  1. <ChatbotContent> and <MessageBox> components that contain:
  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>
Attach via upload button in message bar screenshot

Attach via menu of options in message bar

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>
Attach via menu of options in message bar screenshot