diff --git a/packages/module/patternfly-docs/content/extensions/chatbot/about-chatbot.md b/packages/module/patternfly-docs/content/extensions/chatbot/about-chatbot.md deleted file mode 100644 index 7651faaec..000000000 --- a/packages/module/patternfly-docs/content/extensions/chatbot/about-chatbot.md +++ /dev/null @@ -1,44 +0,0 @@ ---- -section: extensions -subsection: ChatBot -id: Overview -sortValue: 1 -source: About ---- - -**Note:** The PatternFly ChatBot extension lives in its own package [`@patternfly/chatbot`](https://www.npmjs.com/package/@patternfly/chatbot) - -It is important to leverage AI in a way that improves the experiences of your users. In alignment with our [AI principles](/ai/about-ai#ai-principles) and [ethical design guidelines,](/ai/ai-guidelines) we've created this ChatBot extension. The PatternFly ChatBot contains a React implementation of an AI ChatBot, to provide your users with access to convenient and persistent help. - -_Only use this ChatBot when it adds value to your users' experiences._ Don't use it simply for the sake of novelty—your users will only be excited to interact with a new ChatBot feature if it directly helps them reach their goals. - -## ChatBot demos - -To illustrate the capabilities of the ChatBot, including more complex interaction patterns, we've created these demos: -- [Basic ChatBot](/extensions/chatbot/overview/demo#basic-chatbot) -- [Embedded ChatBot](/extensions/chatbot/overview/demo#embedded-chatbot) -- [Comparing ChatBots](/extensions/chatbot/overview/demo/#comparing-chatbots) -- [Message feedback](/extensions/chatbot/messages/demo#message-feedback) -- [ChatBot attachments via file upload](/extensions/chatbot/messages/demo#attach-via-upload-button-in-message-bar) -- [ChatBot attachments via built-in menu](/extensions/chatbot/messages/demo#attach-via-menu-of-options-in-message-bar) - -To learn how to write for ChatBot experiences, refer to our [conversation design guidelines](/ai/conversation-design/#writing-for-chatbots). - -To learn how to design ChatBot experiences, [refer to the design guidelines](/extensions/chatbot/overview/design-guidelines). - -Explore our documentation, which covers both ChatBot UI components and message-related components: -- UI - - [Structural elements](/extensions/chatbot/ui#structure) - - [Toggle](/extensions/chatbot/ui#toggle) - - [Header](/extensions/chatbot/ui#header) - - [Footer](/extensions/chatbot/ui#footer) - - [Navigation](/extensions/chatbot/ui#navigation) - - [Modals](/extensions/chatbot/ui#modals) -- Messages - - [Bot and user messages](/extensions/chatbot/messages) - - [File attachments](/extensions/chatbot/messages#attachments) -- Analytics support - - [Overview](/extensions/chatbot/analytics) - - -We will continue to grow and evolve our ChatBot. If you notice a bug or have any suggestions, feel free to file an issue in our [GitHub repository!](https://github.com/patternfly/chatbot/issues) Make sure to check if there is already a pre-existing issue before creating a new one. diff --git a/packages/module/patternfly-docs/content/extensions/chatbot/chatbot.md b/packages/module/patternfly-docs/content/extensions/chatbot/chatbot.md new file mode 100644 index 000000000..a7e17ecea --- /dev/null +++ b/packages/module/patternfly-docs/content/extensions/chatbot/chatbot.md @@ -0,0 +1,57 @@ +--- +id: Overview +title: ChatBot overview +section: extensions +subsection: ChatBot +sortValue: 1 +source: ChatBot +--- + +**Note:** The PatternFly ChatBot extension lives in its own package [`@patternfly/chatbot`](https://www.npmjs.com/package/@patternfly/chatbot). + +The PatternFly **ChatBot** extension contains a React implementation of an AI-focused chatbot, providing users with access to convenient and persistent help. This extension is intended to remain in alignment with our [AI principles and design guidelines](/ai/overview). + +*Only use this ChatBot when it adds value to your users' experiences.* Don't use it simply for the sake of novelty—it must directly help users reach their goals. + +--- + +## How do I use ChatBot? + +To get started: +1. Install the `@patternfly/chatbot` package by following [the README instructions](https://github.com/patternfly/chatbot). +2. To use a ChatBot component in your project, import the ChatBot and the component you need. For example: `import ChatbotWelcomePrompt from '@patternfly/chatbot/dist/dynamic/ChatbotWelcomePrompt';` +3. To build out and customize your ChatBot experience, refer to our extensive documentation on PatternFly.org. + +## What does a built-out ChatBot look like? + +To illustrate holistic ChatBot solutions, we offer these interactive demos: +- [Basic ChatBot](/extensions/chatbot/overview/demo#basic-chatbot): A standard ChatBot that can swap between display modes. +- [Compact ChatBot](/extensions/chatbot/overview/demo#compact-chatbot): A compact version of a standard ChatBot that allows for more information density. +- [Embedded ChatBot](/extensions/chatbot/overview/demo#embedded-chatbot): A ChatBot experience that can be embedded into a page within an application. +- [Inline drawer ChatBot](/extensions/chatbot/overview/demo#inline-drawer-chatbot): A ChatBot placed within a drawer that is inline with page content, rather than one that overlays the page. + +## How do I build a ChatBot for my product? + +To learn how to design ChatBot experiences, refer to [the design guidelines](/extensions/chatbot/overview/design-guidelines) and our [conversation design guidelines](/ai/conversation-design/). + +Explore our documentation, which covers both the components you'll need to build your ChatBot and the guidance to follow for different functionality: +- UI: Structural, core components + - [Structural elements](/extensions/chatbot/ui#structure) + - [Toggle](/extensions/chatbot/ui#toggle) + - [Header](/extensions/chatbot/ui#header) + - [Footer](/extensions/chatbot/ui#footer) + - [Navigation](/extensions/chatbot/ui#navigation) + - [Modals](/extensions/chatbot/ui#modals) +- Messages: Components that customize features related to the conversation + - [Bot and user messages](/extensions/chatbot/messages) + - [File attachments](/extensions/chatbot/messages#file-attachments) +- Patterns: More opinionated implementation solutions for common use cases + - [Primary color background](/extensions/chatbot/overview/demo#primary-color-background) + - [Display mode switcher](/extensions/chatbot/overview/demo#display-mode-switcher) + - [Chat transcripts](/extensions/chatbot/overview/demo#chat-transcripts) +- [Analytics](/extensions/chatbot/analytics): Tracking for ChatBot interactions +- [Customizing messages](/extensions/chatbot/customizing-messages): Details for the implementation of custom messages + +--- + +We will continue to grow and evolve our ChatBot. If you notice a bug or have any suggestions, feel free to file an issue in our [GitHub repository!](https://github.com/patternfly/chatbot/issues) Make sure to check if there is already a pre-existing issue before creating a new one. \ No newline at end of file