@patternfly/chatbot 2.2.0-prerelease.8 → 2.2.0

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 })}
       />
     </>

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import ChatbotToggle from '@patternfly/virtual-assistant/dist/dynamic/ChatbotToggle';
+import ChatbotToggle from '@patternfly/chatbot/dist/dynamic/ChatbotToggle';
 
 export const SquareChatbotToggle: React.FunctionComponent = () => {
   const [chatbotVisible, setChatbotVisible] = React.useState<boolean>(false);

package/patternfly-docs/content/extensions/chatbot/examples/UI/UI.md

@@ -102,11 +102,9 @@ The "embedded" display mode is meant to be used within a [PatternFly page](/comp
 ### Content and message box
 
 The `<ChatbotContent>` component is the container that is placed within the `<Chatbot>`, between the [`<ChatbotHeader>`](/patternfly-ai/chatbot/ui#header) and [`<ChatbotFooter>`.](/patternfly-ai/chatbot/ui#footer)
-<br />
-<br />
+
 `<ChatbotContent>` usually contains a `<ChatbotMessageBox>` for displaying messages.
-<br />
-<br />
+
 Your code structure should look like this:
 
 ```noLive
@@ -144,8 +142,7 @@ To provide users with a more specific direction, you can also include optional w
 ### Skip to content
 
 To provide page context, we recommend using a "Skip to chatbot" button. This allows you to skip past other content on the page, directly to the ChatBot content, using a [PatternFly skip to content component](/components/skip-to-content). To display this button, you must tab into the main window.
-<br />
-<br />
+
 When using default or docked modes, we recommend putting focus on the toggle if the ChatBot is closed, and the ChatBot when it is open. For fullscreen and embedded, we recommend putting the focus on the first focusable item in the ChatBot, such as a menu toggle. This can be seen in our more fully-featured demos for the [default, embedded, and fullscreen ChatBot](/patternfly-ai/chatbot/overview/demo#basic-chatbot) and the [embedded ChatBot](/patternfly-ai/chatbot/overview/demo#embedded-chatbot).
 
 ```js file="./SkipToContent.tsx" isFullscreen
@@ -371,6 +368,24 @@ If you're showing a conversation that is already active, you can set the `active
 
 ```
 
+### Resizable drawer
+
+By default, the conversation history drawer has a fixed width (384px) and a focus trap. To provide users with more flexibility as they navigate their conversation history, or to better support embedded ChatBots on tablet-sized devices or smaller browser windows, you can instead make the drawer resizable. By default, even resizable drawers will still open to their full width on mobile devices.
+
+In this example, the drawer can be resized up to the max size of the parent and resized down to 200px wide. To customize this behavior further (including width, style, and focus behavior) use PatternFly [`<Drawer>` props](/components/drawer#props), [`<DrawerPanelContent>` props](/components/drawer/#drawerpanelcontent), or any other drawer subcomponents.
+
+```js file="./ChatbotHeaderDrawerResizable.tsx"
+
+```
+
+### Drawer with simple menu
+
+The drawer can also be used to display a list of basic menu items.
+
+```js file="./ChatbotHeaderDrawerNavigation.tsx"
+
+```
+
 ### Terms of use
 
 Based on the [PatternFly modal](/components/modal), this modal adapts to the ChatBot display mode and is meant to display terms and conditions for using a ChatBot in your project. The image in the header can be toggled on or off depending on whether the `image` and `altText` props are provided.

package/patternfly-docs/content/extensions/chatbot/examples/demos/AttachmentDemos.md

@@ -47,6 +47,20 @@ import patternflyAvatar from '../Messages/patternfly_avatar.jpg';
 
 ## Demos
 
+### Message feedback
+
+When a user selects a positive or negative message action, you can display a message feedback card that acknowledges their response and provides space for additional written feedback. These cards can be manually dismissed via the close button and the thank-you card can be configured to time out automatically.
+
+The following example demonstrates a full feedback flow, which accepts written feedback submission and displays a thank you card.
+
+It also demonstrates how to handle focus appropriately for accessibility. The card will be focused when it appears in the DOM. When the card closes, place the focus back on the launching button. To provide additional context on what the button controls, you can also add `aria-expanded` and `aria-controls` attributes to the feedback buttons.
+
+It is also important to announce when new content appears onscreen for accessibility purposes. `isLiveRegion` is set to true by default on `<Message>` so it will make appropriate announcements for you when the feedback card appears.
+
+```js file="./Feedback.tsx"
+
+```
+
 ### Attach via upload button in message bar
 
 This demo displays unique attachment features, including:

package/patternfly-docs/content/extensions/chatbot/examples/demos/Chatbot.md

@@ -21,7 +21,8 @@ propComponents:
     'ChatbotFootnote',
     'MessageBox',
     'Message',
-    'MessageBarWithAttachMenuProps'
+    'MessageBarWithAttachMenuProps',
+    'CompareProps'
   ]
 sortValue: 2
 ---
@@ -34,6 +35,7 @@ import ChatbotFooter, { ChatbotFootnote } from '@patternfly/chatbot/dist/dynamic
 import MessageBar from '@patternfly/chatbot/dist/dynamic/MessageBar';
 import MessageBox from '@patternfly/chatbot/dist/dynamic/MessageBox';
 import Message from '@patternfly/chatbot/dist/dynamic/Message';
+import Compare from '@patternfly/chatbot/dist/dynamic/Compare';
 import ChatbotConversationHistoryNav from '@patternfly/chatbot/dist/dynamic/ChatbotConversationHistoryNav';
 
 import ChatbotHeader, {
@@ -55,6 +57,8 @@ import PFIconLogoColor from '../UI/PF-IconLogo-Color.svg';
 import PFIconLogoReverse from '../UI/PF-IconLogo-Reverse.svg';
 import userAvatar from '../Messages/user_avatar.svg';
 import patternflyAvatar from '../Messages/patternfly_avatar.jpg';
+import { getTrackingProviders } from "@patternfly/chatbot/dist/dynamic/tracking";
+
 
 ### Basic ChatBot
 
@@ -103,3 +107,37 @@ This demo displays an embedded ChatBot. Embedded ChatBots are meant to be placed
 ```js file="./EmbeddedChatbot.tsx" isFullscreen
 
 ```
+
+### Inline drawer ChatBot
+
+This demo displays a ChatBot in a static, inline drawer. This demo includes:
+
+1. An empty [PatternFly page](/components/page) with a sidebar and masthead.
+2. A [basic ChatBot](#basic-chatbot), placed beside the page content. It does not overlay the page content, cannot be minimized, and does not allow you to change the display mode by default.
+
+**Note:** The inline drawer ChatBot is built to fit and perform within a drawer, but the implementation of the drawer is up to you. This drawer can look different for each product, but will often be placed to the side of the page, inline with the page content.
+
+```js file="./ChatbotInDrawer.tsx" isFullscreen
+
+```
+
+### Comparing ChatBots
+
+To let users compare how different ChatBots respond to the same prompt, you can add multiple ChatBots within the same window. The following demo illustrates a comparison view pattern that allows users to toggle between different conversations in a single ChatBot window.
+<br /><br />
+Your code structure should look like this:
+
+```noLive
+<Page ... >
+  <div className="pf-chatbot__compare-container">
+    <Compare ... />
+    <ChatbotFooter ... >
+      <MessageBar ... />
+    </ChatbotFooter>
+  </div>
+</Page>
+```
+
+```js file="./EmbeddedComparisonChatbot.tsx" isFullscreen
+
+```

package/patternfly-docs/content/extensions/chatbot/examples/demos/Chatbot.tsx

@@ -32,24 +32,26 @@ import PFIconLogoColor from '../UI/PF-IconLogo-Color.svg';
 import PFIconLogoReverse from '../UI/PF-IconLogo-Reverse.svg';
 import userAvatar from '../Messages/user_avatar.svg';
 import patternflyAvatar from '../Messages/patternfly_avatar.jpg';
+import { getTrackingProviders } from '@patternfly/chatbot/dist/dynamic/tracking';
+import { InitProps } from '@patternfly/chatbot/dist/dynamic/tracking';
 
 const footnoteProps = {
-  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/'
     }
   }
@@ -95,6 +97,20 @@ export default MessageLoading;
 // The timestamps re-render with them.
 const date = new Date();
 
+const initProps: InitProps = {
+  segmentKey: 'TODO-key', // TODO add your key here
+  posthogKey: 'TODO-key',
+  umamiKey: 'TODO-key',
+  umamiHostUrl: 'http://localhost:3000', // TODO where is your JS provider?
+  console: true,
+  something: 'test'
+};
+
+const tracking = getTrackingProviders(initProps);
+tracking.identify('user-123'); // TODO get real user id
+tracking.trackPageView(window.document.documentURI);
+
+const actionEventName = 'MessageAction';
 const initialMessages: MessageProps[] = [
   {
     id: '1',
@@ -113,28 +129,23 @@ const initialMessages: MessageProps[] = [
     avatar: patternflyAvatar,
     timestamp: date.toLocaleString(),
     actions: {
-      // eslint-disable-next-line no-console
-      positive: { onClick: () => console.log('Good response') },
-      // eslint-disable-next-line no-console
-      negative: { onClick: () => console.log('Bad response') },
-      // eslint-disable-next-line no-console
-      copy: { onClick: () => console.log('Copy') },
-      // eslint-disable-next-line no-console
-      share: { onClick: () => console.log('Share') },
-      // eslint-disable-next-line no-console
-      listen: { onClick: () => console.log('Listen') }
+      positive: { onClick: () => tracking.trackSingleItem(actionEventName, { response: 'Good response' }) },
+      negative: { onClick: () => tracking.trackSingleItem(actionEventName, { response: 'Bad response' }) },
+      copy: { onClick: () => tracking.trackSingleItem(actionEventName, { response: 'Copy' }) },
+      share: { onClick: () => tracking.trackSingleItem(actionEventName, { response: 'Share' }) },
+      listen: { onClick: () => tracking.trackSingleItem(actionEventName, { response: 'Listen' }) }
     }
   }
 ];
 
 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.'
   }
 ];
 
@@ -164,6 +175,7 @@ const initialConversations = {
   ]
 };
 
+const actionEvent2 = 'ActionEvent2';
 export const ChatbotDemo: React.FunctionComponent = () => {
   const [chatbotVisible, setChatbotVisible] = React.useState<boolean>(true);
   const [displayMode, setDisplayMode] = React.useState<ChatbotDisplayMode>(ChatbotDisplayMode.default);
@@ -180,7 +192,7 @@ export const ChatbotDemo: React.FunctionComponent = () => {
   const chatbotRef = React.useRef<HTMLDivElement>(null);
   const historyRef = React.useRef<HTMLButtonElement>(null);
 
-  // Autu-scrolls to the latest message
+  // Auto-scrolls to the latest message
   React.useEffect(() => {
     // don't scroll the first load - in this demo, we know we start with two messages
     if (messages.length > 2) {
@@ -193,6 +205,7 @@ export const ChatbotDemo: React.FunctionComponent = () => {
     value: string | number | undefined
   ) => {
     setSelectedModel(value as string);
+    tracking.trackSingleItem('ModelSelected', { model: value });
   };
 
   const onSelectDisplayMode = (
@@ -210,6 +223,7 @@ export const ChatbotDemo: React.FunctionComponent = () => {
 
   const handleSend = (message: string) => {
     setIsSendButtonDisabled(true);
+    tracking.trackSingleItem('UserInputReceived', { text: message });
     const newMessages: MessageProps[] = [];
     // We can't use structuredClone since messages contains functions, but we can't mutate
     // items that are going into state or the UI won't update correctly
@@ -255,21 +269,17 @@ export const ChatbotDemo: React.FunctionComponent = () => {
         avatar: patternflyAvatar,
         timestamp: date.toLocaleString(),
         actions: {
-          // eslint-disable-next-line no-console
-          positive: { onClick: () => console.log('Good response') },
-          // eslint-disable-next-line no-console
-          negative: { onClick: () => console.log('Bad response') },
-          // eslint-disable-next-line no-console
-          copy: { onClick: () => console.log('Copy') },
-          // eslint-disable-next-line no-console
-          share: { onClick: () => console.log('Share') },
-          // eslint-disable-next-line no-console
-          listen: { onClick: () => console.log('Listen') }
+          positive: { onClick: () => tracking.trackSingleItem(actionEvent2, { response: 'Good response' }) },
+          negative: { onClick: () => tracking.trackSingleItem(actionEvent2, { response: 'Bad response' }) },
+          copy: { onClick: () => tracking.trackSingleItem(actionEvent2, { response: 'Copy' }) },
+          share: { onClick: () => tracking.trackSingleItem(actionEvent2, { response: 'Share' }) },
+          listen: { onClick: () => tracking.trackSingleItem(actionEvent2, { response: 'Listen' }) }
         }
       });
       setMessages(loadedMessages);
       // make announcement to assistive devices that new message has loaded
       setAnnouncement(`Message from Bot: API response goes here`);
+      tracking.trackSingleItem('BotResponded', { undefined });
       setIsSendButtonDisabled(false);
     }, 5000);
   };
@@ -339,7 +349,10 @@ export const ChatbotDemo: React.FunctionComponent = () => {
       <ChatbotToggle
         tooltipLabel="Chatbot"
         isChatbotVisible={chatbotVisible}
-        onToggleChatbot={() => setChatbotVisible(!chatbotVisible)}
+        onToggleChatbot={function () {
+          setChatbotVisible(!chatbotVisible);
+          tracking.trackSingleItem('Chatbot Visible', { isVisible: !chatbotVisible }); // TODO correct?
+        }}
         id="chatbot-toggle"
         ref={toggleRef}
       />
@@ -436,14 +449,14 @@ export const ChatbotDemo: React.FunctionComponent = () => {
                  so that users of assistive devices receive sufficient context  */}
                 <MessageBox announcement={announcement}>
                   <ChatbotWelcomePrompt
-                    title="Hello, Chatbot User"
-                    description="How may I help you today?"
+                    title="Hi, ChatBot User!"
+                    description="How can I help you today?"
                     prompts={welcomePrompts}
                   />
                   {/* 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 
+                  You can instead choose to move the div with scrollToBottomRef on it below
                   the map of messages, so that users are forced to scroll to the bottom.
-                  If you are using streaming, you will want to take a different approach; 
+                  If you are using streaming, you will want to take a different approach;
                   see: https://github.com/patternfly/chatbot/issues/201#issuecomment-2400725173 */}
                   {messages.map((message, index) => {
                     if (index === messages.length - 1) {

package/patternfly-docs/content/extensions/chatbot/examples/demos/ChatbotAttachment.tsx

@@ -231,7 +231,7 @@ export const BasicDemo: React.FunctionComponent = () => {
                   {error}
                 </ChatbotAlert>
               )}
-              <ChatbotWelcomePrompt title="Hello, Chatbot User" description="How may I help you today?" />
+              <ChatbotWelcomePrompt title="Hi, ChatBot User!" description="How can I help you today?" />
               {messages.map((message) => (
                 <Message key={message.name} {...message} />
               ))}
@@ -244,7 +244,7 @@ export const BasicDemo: React.FunctionComponent = () => {
               </div>
             )}
             <MessageBar onSendMessage={handleSend} hasAttachButton handleAttach={handleAttach} />
-            <ChatbotFootnote label="Lightspeed uses AI. Check for mistakes." />
+            <ChatbotFootnote label="ChatBot uses AI. Check for mistakes." />
           </ChatbotFooter>
         </FileDropZone>
       </Chatbot>

package/patternfly-docs/content/extensions/chatbot/examples/demos/ChatbotAttachmentMenu.tsx

@@ -209,7 +209,7 @@ export const AttachmentMenuDemo: React.FunctionComponent = () => {
   return (
     <>
       {/* this is required for react-dropzone to work in Safari and Firefox */}
-      <input {...getInputProps()} />
+      <input {...getInputProps()} hidden />
       <ChatbotToggle
         tooltipLabel="Chatbot"
         isChatbotVisible={chatbotVisible}
@@ -232,7 +232,7 @@ export const AttachmentMenuDemo: React.FunctionComponent = () => {
                     {error}
                   </ChatbotAlert>
                 )}
-                <ChatbotWelcomePrompt title="Hello, Chatbot User" description="How may I help you today?" />
+                <ChatbotWelcomePrompt title="Hi, ChatBot User!" description="How can I help you today?" />
                 {messages.map((message) => (
                   <Message key={message.name} {...message} />
                 ))}
@@ -259,7 +259,7 @@ export const AttachmentMenuDemo: React.FunctionComponent = () => {
                   onAttachMenuToggleClick: onToggleClick
                 }}
               />
-              <ChatbotFootnote label="Lightspeed uses AI. Check for mistakes." />
+              <ChatbotFootnote label="ChatBot uses AI. Check for mistakes." />
             </ChatbotFooter>
           </>
         </FileDropZone>