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
We use cookies on our websites to deliver our online services. Details about how we use cookies and how you may disable them are set out in our Privacy Statement. By using this website you agree to our use of cookies.