@patternfly/chatbot 2.2.0-prerelease.3 → 2.2.0-prerelease.30

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

@@ -34,22 +34,22 @@ import userAvatar from '../Messages/user_avatar.svg';
 import patternflyAvatar from '../Messages/patternfly_avatar.jpg';
 
 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/'
     }
   }
@@ -129,12 +129,12 @@ const initialMessages: MessageProps[] = [
 
 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.'
   }
 ];
 
@@ -436,8 +436,8 @@ 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.

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

@@ -36,18 +36,26 @@ interface ModalData {
 }
 
 export const BasicDemo: React.FunctionComponent = () => {
-  const onAttachmentClose = (attachmentId: string) => {
-    const index = messages.findIndex((message) => message.attachmentId === attachmentId);
+  const onAttachmentClose = (event, name, id) => {
     const updatedMessages: MessageProps[] = [];
-    if (index >= 0) {
-      messages.forEach((message) => updatedMessages.push(message));
-      delete updatedMessages[index].attachmentName;
-      delete updatedMessages[index].attachmentId;
-      delete updatedMessages[index].onAttachmentClick;
-      delete updatedMessages[index].onAttachmentClose;
-      setMessages(updatedMessages);
-    }
+    messages.map((message) => {
+      if (message.attachments) {
+        const filteredAttachments = message.attachments.filter((attachment) => attachment.id !== id);
+        message.attachments = filteredAttachments;
+        updatedMessages.push(message);
+      } else {
+        updatedMessages.push(message);
+      }
+    });
+    setMessages(updatedMessages);
   };
+
+  const onAttachmentClick = () => {
+    setCurrentModalData({ fileName: 'auth-operator.yml', code: 'test' });
+    setIsEditModalOpen(false);
+    setIsPreviewModalOpen(true);
+  };
+
   const initialMessages: MessageProps[] = [
     {
       role: 'user',
@@ -55,14 +63,7 @@ export const BasicDemo: React.FunctionComponent = () => {
       name: 'User',
       avatar: userAvatar,
       avatarProps: { isBordered: true },
-      attachmentName: 'auth-operator.yml',
-      attachmentId: '1',
-      onAttachmentClose,
-      onAttachmentClick: () => {
-        setCurrentModalData({ fileName: 'auth-operator.yml', code: 'test' });
-        setIsEditModalOpen(false);
-        setIsPreviewModalOpen(true);
-      }
+      attachments: [{ name: 'auth-operator.yml', id: '1', onClick: onAttachmentClick, onClose: onAttachmentClose }]
     },
     {
       role: 'bot',
@@ -230,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} />
               ))}
@@ -243,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>

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

@@ -42,22 +42,22 @@ import userAvatar from '../Messages/user_avatar.svg';
 import patternflyAvatar from '../Messages/patternfly_avatar.jpg';
 
 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/'
     }
   }
@@ -137,12 +137,12 @@ const initialMessages: MessageProps[] = [
 
 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.'
   }
 ];
 
@@ -400,8 +400,8 @@ export const EmbeddedChatbotDemo: 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.

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

@@ -0,0 +1,206 @@
+import React from 'react';
+
+import {
+  Page,
+  Masthead,
+  MastheadMain,
+  MastheadBrand,
+  MastheadLogo,
+  PageSidebarBody,
+  PageSidebar,
+  MastheadToggle,
+  PageToggleButton
+} from '@patternfly/react-core';
+import Chatbot, { ChatbotDisplayMode } from '@patternfly/chatbot/dist/dynamic/Chatbot';
+import ChatbotContent from '@patternfly/chatbot/dist/dynamic/ChatbotContent';
+import ChatbotWelcomePrompt from '@patternfly/chatbot/dist/dynamic/ChatbotWelcomePrompt';
+import ChatbotFooter from '@patternfly/chatbot/dist/dynamic/ChatbotFooter';
+import MessageBar from '@patternfly/chatbot/dist/dynamic/MessageBar';
+import MessageBox from '@patternfly/chatbot/dist/dynamic/MessageBox';
+import Message, { MessageProps } from '@patternfly/chatbot/dist/dynamic/Message';
+import ChatbotHeader, { ChatbotHeaderMain } from '@patternfly/chatbot/dist/dynamic/ChatbotHeader';
+import Compare from '@patternfly/chatbot/dist/dynamic/Compare';
+import { BarsIcon } from '@patternfly/react-icons';
+import userAvatar from '../Messages/user_avatar.svg';
+import patternflyAvatar from '../Messages/patternfly_avatar.jpg';
+
+export const CompareChild = ({ name, input, hasNewInput, setIsSendButtonDisabled }) => {
+  const [messages, setMessages] = React.useState<MessageProps[]>([]);
+  const [announcement, setAnnouncement] = React.useState<string>();
+  const scrollToBottomRef = React.useRef<HTMLDivElement>(null);
+  const displayMode = ChatbotDisplayMode.embedded;
+
+  // you will likely want to come up with your own unique id function; this is for demo purposes only
+  const generateId = () => {
+    const id = Date.now() + Math.random();
+    return id.toString();
+  };
+
+  const handleSend = (input: string) => {
+    const date = new Date();
+    const newMessages: MessageProps[] = [];
+    messages.forEach((message) => newMessages.push(message));
+    newMessages.push({
+      avatar: userAvatar,
+      avatarProps: { isBordered: true },
+      id: generateId(),
+      name: 'You',
+      role: 'user',
+      content: input,
+      timestamp: `${date?.toLocaleDateString()} ${date?.toLocaleTimeString()}`
+    });
+    newMessages.push({
+      avatar: patternflyAvatar,
+      id: generateId(),
+      name,
+      role: 'bot',
+      timestamp: `${date?.toLocaleDateString()} ${date?.toLocaleTimeString()}`,
+      isLoading: true
+    });
+    setMessages(newMessages);
+    // make announcement to assistive devices that new messages have been added
+    setAnnouncement(`Message from You: ${input}. Message from ${name} is loading.`);
+
+    // this is for demo purposes only; in a real situation, there would be an API response we would wait for
+    setTimeout(() => {
+      const loadedMessages: 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
+      newMessages.forEach((message) => loadedMessages.push(message));
+      loadedMessages.pop();
+      loadedMessages.push({
+        id: generateId(),
+        role: 'bot',
+        content: `API response from ${name} goes here`,
+        name,
+        avatar: patternflyAvatar,
+        isLoading: false,
+        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') }
+        },
+        timestamp: date.toLocaleString()
+      });
+      setMessages(loadedMessages);
+      // make announcement to assistive devices that new message has loaded
+      setAnnouncement(`Message from ${name}: API response goes here`);
+      setIsSendButtonDisabled(false);
+    }, 5000);
+  };
+
+  React.useEffect(() => {
+    if (input) {
+      handleSend(input);
+    }
+  }, [hasNewInput]);
+
+  // Auto-scrolls to the latest message
+  React.useEffect(() => {
+    // don't scroll the first load, but scroll if there's a current stream or a new source has popped up
+    if (messages.length > 0) {
+      scrollToBottomRef.current?.scrollIntoView();
+    }
+  }, [messages]);
+
+  return (
+    <Chatbot displayMode={displayMode}>
+      <ChatbotHeader>
+        <ChatbotHeaderMain>{name}</ChatbotHeaderMain>
+      </ChatbotHeader>
+      <ChatbotContent>
+        <MessageBox ariaLabel={`Scrollable message log for ${name}`} announcement={announcement}>
+          <ChatbotWelcomePrompt title="Hi, ChatBot User!" description="How can I help you today?" />
+          {messages.map((message) => (
+            <Message key={message.id} {...message} />
+          ))}
+          <div ref={scrollToBottomRef}></div>
+        </MessageBox>
+      </ChatbotContent>
+    </Chatbot>
+  );
+};
+
+export const EmbeddedComparisonChatbotDemo: React.FunctionComponent = () => {
+  const [input, setInput] = React.useState<string>();
+  const [hasNewInput, setHasNewInput] = React.useState(false);
+  const [isSidebarOpen, setIsSidebarOpen] = React.useState(false);
+  const [isSendButtonDisabled, setIsSendButtonDisabled] = React.useState(false);
+
+  const handleSend = (value: string) => {
+    setInput(value);
+    setHasNewInput(!hasNewInput);
+    setIsSendButtonDisabled(true);
+  };
+
+  const masthead = (
+    <Masthead>
+      <MastheadMain>
+        <MastheadToggle>
+          <PageToggleButton
+            variant="plain"
+            aria-label="Global navigation"
+            isSidebarOpen={isSidebarOpen}
+            onSidebarToggle={() => setIsSidebarOpen(!isSidebarOpen)}
+            id="fill-nav-toggle"
+          >
+            <BarsIcon />
+          </PageToggleButton>
+        </MastheadToggle>
+        <MastheadBrand>
+          <MastheadLogo href="https://patternfly.org" target="_blank">
+            Logo
+          </MastheadLogo>
+        </MastheadBrand>
+      </MastheadMain>
+    </Masthead>
+  );
+
+  const sidebar = (
+    <PageSidebar isSidebarOpen={isSidebarOpen} id="fill-sidebar">
+      <PageSidebarBody>Navigation</PageSidebarBody>
+    </PageSidebar>
+  );
+
+  return (
+    <Page masthead={masthead} sidebar={sidebar} isContentFilled>
+      <div className="pf-chatbot__compare-container">
+        <Compare
+          firstChild={
+            <CompareChild
+              input={input}
+              hasNewInput={hasNewInput}
+              name="ChatBot 1"
+              setIsSendButtonDisabled={setIsSendButtonDisabled}
+            />
+          }
+          secondChild={
+            <CompareChild
+              input={input}
+              hasNewInput={hasNewInput}
+              name="ChatBot 2"
+              setIsSendButtonDisabled={setIsSendButtonDisabled}
+            />
+          }
+          firstChildDisplayName="ChatBot 1"
+          secondChildDisplayName="ChatBot 2"
+        />
+        <ChatbotFooter>
+          <MessageBar
+            onSendMessage={handleSend}
+            hasAttachButton={false}
+            alwayShowSendButton
+            isSendButtonDisabled={isSendButtonDisabled}
+          />
+        </ChatbotFooter>
+      </div>
+    </Page>
+  );
+};

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

@@ -0,0 +1,104 @@
+import React from 'react';
+import Message from '@patternfly/chatbot/dist/dynamic/Message';
+import patternflyAvatar from '../Messages/patternfly_avatar.jpg';
+
+export const MessageWithFeedbackExample: React.FunctionComponent = () => {
+  const [showUserFeedbackForm, setShowUserFeedbackForm] = React.useState(false);
+  const [showCompletionForm, setShowCompletionForm] = React.useState(false);
+  const [launchButton, setLaunchButton] = React.useState<string>();
+  const positiveRef = React.useRef<HTMLButtonElement>(null);
+  const negativeRef = React.useRef<HTMLButtonElement>(null);
+  const feedbackId = 'user-feedback-form';
+  const completeId = 'user-feedback-received';
+
+  const getCurrentCard = () => {
+    if (showUserFeedbackForm) {
+      return feedbackId;
+    }
+    if (showCompletionForm) {
+      return completeId;
+    }
+  };
+
+  const isExpanded = showUserFeedbackForm || showCompletionForm;
+
+  const focusLaunchButton = () => {
+    if (launchButton === 'positive') {
+      positiveRef.current?.focus();
+    }
+    if (launchButton === 'negative') {
+      negativeRef.current?.focus();
+    }
+  };
+
+  return (
+    <Message
+      name="Bot"
+      role="bot"
+      avatar={patternflyAvatar}
+      content="Bot message with user feedback flow; click on a message action to launch the feedback flow. Click submit to see the thank-you message."
+      actions={{
+        positive: {
+          onClick: () => {
+            setShowUserFeedbackForm(true);
+            setShowCompletionForm(false);
+            setLaunchButton('positive');
+          },
+          /* These are important for accessibility */
+          'aria-expanded': isExpanded,
+          'aria-controls': getCurrentCard(),
+          ref: positiveRef
+        },
+        negative: {
+          onClick: () => {
+            setShowUserFeedbackForm(true);
+            setShowCompletionForm(false);
+            setLaunchButton('negative');
+          },
+          /* These are important for accessibility */
+          'aria-expanded': isExpanded,
+          'aria-controls': getCurrentCard(),
+          ref: negativeRef
+        }
+      }}
+      userFeedbackForm={
+        showUserFeedbackForm
+          ? /* eslint-disable indent */
+            {
+              quickResponses: [
+                { id: '1', content: 'Helpful information' },
+                { id: '2', content: 'Easy to understand' },
+                { id: '3', content: 'Resolved my issue' }
+              ],
+              onSubmit: (quickResponse, additionalFeedback) => {
+                alert(`Selected ${quickResponse} and received the additional feedback: ${additionalFeedback}`);
+                setShowUserFeedbackForm(false);
+                setShowCompletionForm(true);
+                focusLaunchButton();
+              },
+              hasTextArea: true,
+              onClose: () => {
+                setShowUserFeedbackForm(false);
+                focusLaunchButton();
+              },
+              id: feedbackId
+            }
+          : undefined
+        /* eslint-enable indent */
+      }
+      userFeedbackComplete={
+        showCompletionForm
+          ? /* eslint-disable indent */
+            {
+              onClose: () => {
+                setShowCompletionForm(false);
+                focusLaunchButton();
+              },
+              id: completeId
+            }
+          : undefined
+        /* eslint-enable indent */
+      }
+    />
+  );
+};