@patternfly/chatbot 2.2.0-prerelease.4 → 2.2.0-prerelease.41

package/patternfly-docs/content/extensions/chatbot/examples/Messages/explore-pipeline-quickstart.ts

@@ -0,0 +1,65 @@
+import userAvatar from './user_avatar.svg';
+
+export const explorePipelinesQuickStart = {
+  apiVersion: 'console.openshift.io/v1',
+  kind: 'QuickStarts',
+  metadata: {
+    name: 'explore-pipelines'
+  },
+  spec: {
+    version: 4.7,
+    displayName: `Installing the Pipelines Operator`,
+    durationMinutes: 10,
+    icon: userAvatar,
+    description: `Install the OpenShift® Pipelines Operator to build Pipelines using Tekton.`,
+    prerequisites: [''],
+    introduction: `OpenShift® Pipelines is a cloud-native, continuous integration and continuous delivery (CI/CD) solution based on Kubernetes resources. It uses Tekton building blocks to automate deployments across multiple Kubernetes distributions by abstracting away the underlying implementation details.
+* OpenShift Pipelines is a serverless CI/CD system that runs pipelines with all the required dependencies in isolated containers.
+* They are designed for decentralized teams that work on a microservice-based architecture.
+* They are defined using standard Custom Resource Definitions making them extensible and easy to integrate with the existing Kubernetes tools. This enables you to scale on-demand.
+* You can use OpenShift Pipelines to build images with Kubernetes tools such as Source-to-Image (S2I), Buildah, Buildpacks, and Kaniko that are portable across any Kubernetes platform.
+* You can use the Developer perspective to create and manage pipelines and view logs in your namespaces.
+
+To start using Pipelines, install the OpenShift® Pipelines Operator on your cluster.`,
+    tasks: [
+      {
+        title: `Installing the OpenShift Pipelines Operator`,
+        description: `### To install the OpenShift Pipelines Operator:
+
+1. From the **Administrator** perspective in the console navigation panel, click **Operators > OperatorHub**.
+2. In the **Filter by keyword** field, type \`OpenShift Pipelines Operator\`.
+3. If the tile has an Installed label, the Operator is already installed. Proceed to the next quick start to create a Pipeline.
+4. Click the **tile** to open the Operator details.
+5. At the top of the OpenShift Pipelines Operator panel that opens, click **Install**.
+6. Fill out the Operator subscription form by selecting the channel that matches your OpenShift cluster, and then click **Install**.
+7. On the **Installed Operators** page, wait for the OpenShift Pipelines Operator's status to change from **Installing** to **Succeeded**. `,
+        review: {
+          instructions: `#### To verify that the OpenShift Pipelines Operator is installed:
+1. From the **Operators** section of the navigation, go to the **Installed Operators** page.
+2. Verify that the **OpenShift Pipelines Operator** appears in the list of Operators.
+
+In the status column, is the status of the OpenShift Pipelines Operator **Succeeded**?`,
+          failedTaskHelp: `This task isn’t verified yet. Try the task again, or [read more](https://docs.openshift.com/container-platform/4.6/pipelines/installing-pipelines.html#op-installing-pipelines-operator-in-web-console_installing-pipelines) about this topic.`
+        },
+        summary: {
+          success: `You have installed the Pipelines Operator!`,
+          failed: `Try the steps again.`
+        }
+      }
+    ],
+    conclusion: `You successfully installed the OpenShift Pipelines Operator! If you want to learn how to deploy an application and associate a Pipeline with it, take the Creating a Pipeline quick start.`,
+    nextQuickStart: [`install-app-and-associate-pipeline`],
+    accessReviewResources: [
+      {
+        group: 'operators.coreos.com',
+        resource: 'operatorgroups',
+        verb: 'list'
+      },
+      {
+        group: 'packages.operators.coreos.com',
+        resource: 'packagemanifests',
+        verb: 'list'
+      }
+    ]
+  }
+};

package/patternfly-docs/content/extensions/chatbot/examples/UI/ChatbotFooter.tsx

@@ -8,7 +8,7 @@ export const ChatbotFooterExample: React.FunctionComponent = () => {
   return (
     <ChatbotFooter>
       <MessageBar onSendMessage={handleSend} hasMicrophoneButton hasAttachButton />
-      <ChatbotFootnote label="Lightspeed uses AI. Check for mistakes." />
+      <ChatbotFootnote label="ChatBot uses AI. Check for mistakes." />
     </ChatbotFooter>
   );
 };

package/patternfly-docs/content/extensions/chatbot/examples/UI/ChatbotFootnote.tsx

@@ -3,22 +3,22 @@ import { ChatbotFootnote } from '@patternfly/chatbot/dist/dynamic/ChatbotFooter'
 
 export const FootnoteDemo: React.FunctionComponent = () => (
   <ChatbotFootnote
-    label="Lightspeed uses AI. Check for mistakes."
+    label="ChatBot uses AI. Check for mistakes."
     popover={{
-      title: 'Verify accuracy',
-      description: `While Lightspeed strives for accuracy, there's always a possibility of errors. It's a good practice to verify critical information from reliable sources, especially if it's crucial for decision-making or actions.`,
+      title: 'Verify information',
+      description: `While ChatBot strives for accuracy, AI is experimental and can make mistakes. We cannot guarantee that all information provided by ChatBot is up to date or without error. You should always verify responses using reliable sources, especially for crucial information and decision making.`,
       bannerImage: {
         src: 'https://cdn.dribbble.com/userupload/10651749/file/original-8a07b8e39d9e8bf002358c66fce1223e.gif',
         alt: 'Example image for footnote popover'
       },
       cta: {
-        label: 'Got it',
+        label: 'Dismiss',
         onClick: () => {
           alert('Do something!');
         }
       },
       link: {
-        label: 'Learn more',
+        label: 'View AI policy',
         url: 'https://www.redhat.com/'
       }
     }}

package/patternfly-docs/content/extensions/chatbot/examples/UI/ChatbotHeaderBasic.tsx

@@ -121,7 +121,7 @@ export const BasicDemo: React.FunctionComponent = () => {
             showAll && setShowAll(!showAll);
           }}
           name="basic-inline-radio"
-          label="With options dropdown"
+          label="With settings dropdown"
           id="options-dropdown"
         />
       </FormGroup>

package/patternfly-docs/content/extensions/chatbot/examples/UI/ChatbotHeaderDrawer.tsx

@@ -3,7 +3,7 @@ import { ChatbotDisplayMode } from '@patternfly/chatbot/dist/dynamic/Chatbot';
 import ChatbotConversationHistoryNav, {
   Conversation
 } from '@patternfly/chatbot/dist/dynamic/ChatbotConversationHistoryNav';
-import { Checkbox } from '@patternfly/react-core';
+import { Checkbox, EmptyStateStatus, Spinner } from '@patternfly/react-core';
 
 const initialConversations: { [key: string]: Conversation[] } = {
   Today: [{ id: '1', text: 'Red Hat products and services' }],
@@ -31,12 +31,29 @@ const initialConversations: { [key: string]: Conversation[] } = {
   ]
 };
 
+const ERROR = {
+  bodyText: (
+    <>
+      To try again, check your connection and reload this page. If the issue persists,{' '}
+      <a href="">contact the support team</a>.
+    </>
+  ),
+  buttonText: 'Reload',
+  buttonIcon: <Spinner size="sm" />,
+  hasButton: true,
+  titleText: 'Could not load chat history',
+  status: EmptyStateStatus.danger,
+  onClick: () => alert('Clicked Reload')
+};
+
 export const ChatbotHeaderTitleDemo: React.FunctionComponent = () => {
   const [isOpen, setIsOpen] = React.useState(true);
-  const [isButtonOrderReversed, setIsbuttonOrderReversed] = React.useState(false);
+  const [isButtonOrderReversed, setIsButtonOrderReversed] = React.useState(false);
   const [conversations, setConversations] = React.useState<Conversation[] | { [key: string]: Conversation[] }>(
     initialConversations
   );
+  const [isLoading, setIsLoading] = React.useState(false);
+  const [hasError, setHasError] = React.useState(false);
   const displayMode = ChatbotDisplayMode.embedded;
 
   const findMatchingItems = (targetValue: string) => {
@@ -70,10 +87,24 @@ export const ChatbotHeaderTitleDemo: React.FunctionComponent = () => {
       <Checkbox
         label="Reverse action buttons"
         isChecked={isButtonOrderReversed}
-        onChange={() => setIsbuttonOrderReversed(!isButtonOrderReversed)}
+        onChange={() => setIsButtonOrderReversed(!isButtonOrderReversed)}
         id="drawer-actions-visible"
         name="drawer-actions-visible"
       ></Checkbox>
+      <Checkbox
+        label="Show loading state"
+        isChecked={isLoading}
+        onChange={() => setIsLoading(!isLoading)}
+        id="drawer-is-loading"
+        name="drawer-is-loading"
+      ></Checkbox>
+      <Checkbox
+        label="Show error state"
+        isChecked={hasError}
+        onChange={() => setHasError(!hasError)}
+        id="drawer-has-error"
+        name="drawer-has-error"
+      ></Checkbox>
       <ChatbotConversationHistoryNav
         displayMode={displayMode}
         onDrawerToggle={() => setIsOpen(!isOpen)}
@@ -96,6 +127,8 @@ export const ChatbotHeaderTitleDemo: React.FunctionComponent = () => {
           setConversations(newConversations);
         }}
         drawerContent={<div>Drawer content</div>}
+        isLoading={isLoading}
+        errorState={hasError ? ERROR : undefined}
       />
     </>
   );

package/patternfly-docs/content/extensions/chatbot/examples/UI/ChatbotHeaderDrawerNavigation.tsx

@@ -0,0 +1,67 @@
+import React from 'react';
+import { ChatbotDisplayMode } from '@patternfly/chatbot/dist/dynamic/Chatbot';
+import ChatbotConversationHistoryNav, {
+  Conversation
+} from '@patternfly/chatbot/dist/dynamic/ChatbotConversationHistoryNav';
+import { Checkbox } from '@patternfly/react-core';
+
+const initialConversations: Conversation[] = [
+  { id: '1', text: 'Red Hat products and services', noIcon: true },
+  {
+    id: '2',
+    text: 'Enterprise Linux installation and setup',
+    noIcon: true
+  },
+  { id: '3', text: 'Troubleshoot system crash', noIcon: true },
+  { id: '4', text: 'Ansible security and updates', noIcon: true },
+  { id: '5', text: 'Red Hat certification', noIcon: true },
+  { id: '6', text: 'Lightspeed user documentation', noIcon: true },
+  { id: '7', text: 'Crashing pod assistance', noIcon: true },
+  { id: '8', text: 'OpenShift AI pipelines', noIcon: true },
+  { id: '9', text: 'Updating subscription plan', noIcon: true },
+  { id: '10', text: 'Red Hat licensing options', noIcon: true },
+  { id: '11', text: 'RHEL system performance', noIcon: true },
+  { id: '12', text: 'Manage user accounts', noIcon: true }
+];
+
+export const ChatbotHeaderTitleDemo: React.FunctionComponent = () => {
+  const [isOpen, setIsOpen] = React.useState(true);
+  const [isButtonOrderReversed, setIsButtonOrderReversed] = React.useState(false);
+  const [conversations, setConversations] = React.useState<Conversation[] | { [key: string]: Conversation[] }>(
+    initialConversations
+  );
+  const displayMode = ChatbotDisplayMode.embedded;
+
+  return (
+    <>
+      <Checkbox
+        label="Display drawer"
+        isChecked={isOpen}
+        onChange={() => {
+          setIsOpen(!isOpen);
+          setConversations(initialConversations);
+        }}
+        id="navigation-drawer-visible"
+        name="navigation-drawer-visible"
+      />
+      <Checkbox
+        label="Reverse action buttons"
+        isChecked={isButtonOrderReversed}
+        onChange={() => setIsButtonOrderReversed(!isButtonOrderReversed)}
+        id="navigation-drawer-actions-visible"
+        name="navigation-drawer-actions-visible"
+      ></Checkbox>
+      <ChatbotConversationHistoryNav
+        displayMode={displayMode}
+        onDrawerToggle={() => setIsOpen(!isOpen)}
+        isDrawerOpen={isOpen}
+        setIsDrawerOpen={setIsOpen}
+        // eslint-disable-next-line no-console
+        onSelectActiveItem={(e, selectedItem) => console.log(`Selected history item with id ${selectedItem}`)}
+        conversations={conversations}
+        reverseButtonOrder={isButtonOrderReversed}
+        drawerContent={<div>Drawer content</div>}
+      />
+    </>
+  );
+};

package/patternfly-docs/content/extensions/chatbot/examples/UI/ChatbotHeaderDrawerResizable.tsx

@@ -0,0 +1,94 @@
+import React from 'react';
+import { ChatbotDisplayMode } from '@patternfly/chatbot/dist/dynamic/Chatbot';
+import ChatbotConversationHistoryNav, {
+  Conversation
+} from '@patternfly/chatbot/dist/dynamic/ChatbotConversationHistoryNav';
+import { Checkbox } from '@patternfly/react-core';
+
+const initialConversations: { [key: string]: Conversation[] } = {
+  Today: [{ id: '1', text: 'Red Hat products and services' }],
+  'This month': [
+    {
+      id: '2',
+      text: 'Enterprise Linux installation and setup'
+    },
+    { id: '3', text: 'Troubleshoot system crash' }
+  ],
+  March: [
+    { id: '4', text: 'Ansible security and updates' },
+    { id: '5', text: 'Red Hat certification' },
+    { id: '6', text: 'Lightspeed user documentation' }
+  ],
+  February: [
+    { id: '7', text: 'Crashing pod assistance' },
+    { id: '8', text: 'OpenShift AI pipelines' },
+    { id: '9', text: 'Updating subscription plan' },
+    { id: '10', text: 'Red Hat licensing options' }
+  ],
+  January: [
+    { id: '11', text: 'RHEL system performance' },
+    { id: '12', text: 'Manage user accounts' }
+  ]
+};
+
+export const ChatbotHeaderDrawerResizableDemo: React.FunctionComponent = () => {
+  const [isOpen, setIsOpen] = React.useState(true);
+  const [conversations, setConversations] = React.useState<Conversation[] | { [key: string]: Conversation[] }>(
+    initialConversations
+  );
+  const displayMode = ChatbotDisplayMode.embedded;
+
+  const findMatchingItems = (targetValue: string) => {
+    let filteredConversations = Object.entries(initialConversations).reduce((acc, [key, items]) => {
+      const filteredItems = items.filter((item) => item.text.toLowerCase().includes(targetValue.toLowerCase()));
+      if (filteredItems.length > 0) {
+        acc[key] = filteredItems;
+      }
+      return acc;
+    }, {});
+
+    // append message if no items are found
+    if (Object.keys(filteredConversations).length === 0) {
+      filteredConversations = [{ id: '13', noIcon: true, text: 'No results found' }];
+    }
+    return filteredConversations;
+  };
+
+  return (
+    <>
+      <Checkbox
+        label="Display drawer"
+        isChecked={isOpen}
+        onChange={() => {
+          setIsOpen(!isOpen);
+          setConversations(initialConversations);
+        }}
+        id="drawer-visible"
+        name="drawer-visible"
+      />
+      <ChatbotConversationHistoryNav
+        displayMode={displayMode}
+        onDrawerToggle={() => setIsOpen(!isOpen)}
+        isDrawerOpen={isOpen}
+        setIsDrawerOpen={setIsOpen}
+        // eslint-disable-next-line no-console
+        onSelectActiveItem={(e, selectedItem) => console.log(`Selected history item with id ${selectedItem}`)}
+        conversations={conversations}
+        onNewChat={() => {
+          setIsOpen(!isOpen);
+        }}
+        handleTextInputChange={(value: string) => {
+          if (value === '') {
+            setConversations(initialConversations);
+          }
+          // this is where you would perform search on the items in the drawer
+          // and update the state
+          const newConversations: { [key: string]: Conversation[] } = findMatchingItems(value);
+          setConversations(newConversations);
+        }}
+        drawerContent={<div>Drawer content</div>}
+        drawerPanelContentProps={{ isResizable: true, minSize: '200px' }}
+      />
+    </>
+  );
+};

package/patternfly-docs/content/extensions/chatbot/examples/UI/ChatbotMessageBarAttach.tsx

@@ -126,7 +126,7 @@ export const ChatbotMessageBarDefaultAttachExample: React.FunctionComponent = ()
   return (
     <>
       {/* this is required for react-dropzone to work in Safari and Firefox */}
-      <input {...getInputProps()} />
+      <input {...getInputProps()} hidden />
       <MessageBar
         onSendMessage={handleSend}
         attachMenuProps={{

package/patternfly-docs/content/extensions/chatbot/examples/UI/ChatbotWelcomeInteraction.tsx

@@ -116,7 +116,7 @@ export const ChatbotWelcomeInteractionDemo: React.FunctionComponent = () => {
         so that users of assistive devices receive sufficient context  */}
           <MessageBox announcement={announcement} position={position}>
             {messages.length === 0 && (
-              <ChatbotWelcomePrompt title="Hello, Chatbot User" description="How may I help you today?" />
+              <ChatbotWelcomePrompt title="Hi, ChatBot User!" description="How can I help you today?" />
             )}
             {/* This code block enables scrolling to the top of the last message.
           You can instead choose to move the div with scrollToBottomRef on it below 

package/patternfly-docs/content/extensions/chatbot/examples/UI/ChatbotWelcomePrompt.tsx

@@ -1,19 +1,19 @@
 import React from 'react';
 
 import ChatbotWelcomePrompt from '@patternfly/chatbot/dist/dynamic/ChatbotWelcomePrompt';
-import Checkbox from '@patternfly/react-core';
+import { Checkbox } from '@patternfly/react-core';
 
 export const ChatbotWelcomePromptExample: React.FunctionComponent = () => {
   const [showWelcomePrompts, setShowWelcomePrompts] = React.useState(true);
 
   const welcomePrompts = [
     {
-      title: 'Topic 1',
-      message: 'Helpful prompt for Topic 1'
+      title: 'Set up account',
+      message: 'Choose the necessary settings and preferences for your account.'
     },
     {
-      title: 'Topic 2',
-      message: 'Helpful prompt for Topic 2'
+      title: 'Troubleshoot issue',
+      message: 'Find documentation and instructions to resolve your issue.'
     }
   ];
 
@@ -29,8 +29,8 @@ export const ChatbotWelcomePromptExample: React.FunctionComponent = () => {
         id="showWelcomePrompts"
       />
       <ChatbotWelcomePrompt
-        title="Hello, Chatbot User"
-        description="How may I help you today?"
+        title="Hi, ChatBot User!"
+        description="How can I help you today?"
         {...(showWelcomePrompts && { prompts: welcomePrompts })}
       />
     </>