@patternfly/chatbot 1.0.0

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

@@ -0,0 +1,121 @@
+import { useState, FunctionComponent, MouseEvent as ReactMouseEvent, Ref, CSSProperties } from 'react';
+import {
+  Button,
+  ModalBody,
+  ModalFooter,
+  ModalHeader,
+  MenuToggle,
+  MenuToggleElement,
+  Select,
+  SelectList,
+  SelectOption,
+  Stack
+} from '@patternfly/react-core';
+import { ChatbotModal } from '@patternfly/chatbot/dist/dynamic/ChatbotModal';
+import Chatbot, { ChatbotDisplayMode } from '@patternfly/chatbot/dist/dynamic/Chatbot';
+
+export const ChatbotModalExample: FunctionComponent = () => {
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const [displayMode, setDisplayMode] = useState(ChatbotDisplayMode.default);
+  const [isOpen, setIsOpen] = useState(false);
+  const [selected, setSelected] = useState<string>('Select display mode');
+
+  const handleModalToggle = (_event: ReactMouseEvent | MouseEvent | KeyboardEvent) => {
+    setIsModalOpen(!isModalOpen);
+  };
+
+  const onSelect = (_event: ReactMouseEvent<Element, MouseEvent> | undefined, value: string | number | undefined) => {
+    setSelected(value as string);
+    setIsOpen(false);
+    if (value === 'Default') {
+      setDisplayMode(ChatbotDisplayMode.default);
+    }
+    if (value === 'Docked') {
+      setDisplayMode(ChatbotDisplayMode.docked);
+    }
+    if (value === 'Fullscreen') {
+      setDisplayMode(ChatbotDisplayMode.fullscreen);
+    }
+    if (value === 'Embedded') {
+      setDisplayMode(ChatbotDisplayMode.embedded);
+    }
+  };
+
+  const onToggleClick = () => {
+    setIsOpen(!isOpen);
+  };
+
+  const toggle = (toggleRef: Ref<MenuToggleElement>) => (
+    <MenuToggle
+      ref={toggleRef}
+      onClick={onToggleClick}
+      isExpanded={isOpen}
+      style={
+        {
+          width: '200px'
+        } as CSSProperties
+      }
+    >
+      {selected}
+    </MenuToggle>
+  );
+
+  return (
+    <>
+      <div
+        style={{
+          position: 'fixed',
+          padding: 'var(--pf-t--global--spacer--lg)',
+          zIndex: '601',
+          boxShadow: 'var(--pf-t--global--box-shadow--lg)'
+        }}
+      >
+        <Stack hasGutter>
+          <Select
+            id="single-select"
+            isOpen={isOpen}
+            selected={selected}
+            onSelect={onSelect}
+            onOpenChange={(isOpen) => setIsOpen(isOpen)}
+            toggle={toggle}
+            shouldFocusToggleOnSelect
+          >
+            <SelectList>
+              <SelectOption value="Default">Default</SelectOption>
+              <SelectOption value="Docked">Docked</SelectOption>
+              <SelectOption value="Fullscreen">Fullscreen</SelectOption>
+              <SelectOption value="Embedded">Embedded</SelectOption>
+            </SelectList>
+          </Select>
+          <Button onClick={handleModalToggle}>Launch modal</Button>
+        </Stack>
+      </div>
+      <Chatbot displayMode={displayMode} isVisible></Chatbot>
+      <ChatbotModal
+        isOpen={isModalOpen}
+        displayMode={displayMode}
+        onClose={handleModalToggle}
+        ouiaId="ChatbotModal"
+        aria-labelledby="basic-modal-title"
+        aria-describedby="modal-box-body-basic"
+      >
+        <ModalHeader title="Basic modal" labelId="basic-modal-title" />
+        <ModalBody id="modal-box-body-basic">
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
+          magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+          consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
+          pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id
+          est laborum.
+        </ModalBody>
+        <ModalFooter>
+          <Button key="confirm" variant="primary" onClick={handleModalToggle}>
+            Confirm
+          </Button>
+          <Button key="cancel" variant="link" onClick={handleModalToggle}>
+            Cancel
+          </Button>
+        </ModalFooter>
+      </ChatbotModal>
+    </>
+  );
+};

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

@@ -0,0 +1,13 @@
+import { FunctionComponent, useState } from 'react';
+import ChatbotToggle from '@patternfly/chatbot/dist/dynamic/ChatbotToggle';
+
+export const BasicDemo: FunctionComponent = () => {
+  const [chatbotVisible, setChatbotVisible] = useState<boolean>(false);
+  return (
+    <ChatbotToggle
+      tooltipLabel="Chatbot"
+      isChatbotVisible={chatbotVisible}
+      onToggleChatbot={() => setChatbotVisible(!chatbotVisible)}
+    />
+  );
+};

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

@@ -0,0 +1,142 @@
+import { useState, useRef, FunctionComponent } from 'react';
+
+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 userAvatar from '../Messages/user_avatar.svg';
+import { FormGroup, Radio } from '@patternfly/react-core';
+
+export const ChatbotWelcomeInteractionDemo: FunctionComponent = () => {
+  const [messages, setMessages] = useState<MessageProps[]>([]);
+  const [isSendButtonDisabled, setIsSendButtonDisabled] = useState(false);
+  const [announcement, setAnnouncement] = useState<string>();
+  const [position, setPosition] = useState<'top' | 'bottom'>('top');
+  const scrollToBottomRef = useRef<HTMLDivElement>(null);
+  const isVisible = true;
+  const displayMode = ChatbotDisplayMode.default;
+
+  // 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 = (message: string) => {
+    setIsSendButtonDisabled(true);
+    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
+    messages.forEach((message) => newMessages.push(message));
+    // It's important to set a timestamp prop since the Message components re-render.
+    // The timestamps re-render with them.
+    const date = new Date();
+    newMessages.push({
+      id: generateId(),
+      role: 'user',
+      content: message,
+      name: 'User',
+      avatar: userAvatar,
+      timestamp: date.toLocaleString(),
+      avatarProps: { isBordered: true }
+    });
+    newMessages.push({
+      id: generateId(),
+      role: 'bot',
+      content: 'API response goes here',
+      name: 'Bot',
+      isLoading: true,
+      timestamp: date.toLocaleString()
+    });
+    setMessages(newMessages);
+    // make announcement to assistive devices that new messages have been added
+    setAnnouncement(`Message from User: ${message}. Message from Bot 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 goes here',
+        name: 'Bot',
+        isLoading: false,
+        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
+          download: { onClick: () => console.log('Download') },
+          // eslint-disable-next-line no-console
+          listen: { onClick: () => console.log('Listen') }
+        }
+      });
+      setMessages(loadedMessages);
+      // make announcement to assistive devices that new message has loaded
+      setAnnouncement(`Message from Bot: API response goes here`);
+      setIsSendButtonDisabled(false);
+    }, 5000);
+  };
+
+  return (
+    <>
+      <FormGroup role="radiogroup" isInline fieldId="basic-form-radio-group" label="Position">
+        <Radio
+          isChecked={position === 'top'}
+          onChange={() => setPosition('top')}
+          name="basic-inline-radio"
+          label="Top"
+          id="top"
+        />
+        <Radio
+          isChecked={position === 'bottom'}
+          onChange={() => setPosition('bottom')}
+          name="basic-inline-radio"
+          label="Bottom"
+          id="bottom"
+        />
+      </FormGroup>
+      <Chatbot displayMode={displayMode} isVisible={isVisible}>
+        <ChatbotContent>
+          {/* Update the announcement prop on MessageBox whenever a new message is sent
+        so that users of assistive devices receive sufficient context  */}
+          <MessageBox announcement={announcement} position={position}>
+            {messages.length === 0 && (
+              <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 
+          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; 
+          see: https://github.com/patternfly/chatbot/issues/201#issuecomment-2400725173 */}
+            {messages.map((message, index) => {
+              if (index === messages.length - 1) {
+                return (
+                  <>
+                    <div ref={scrollToBottomRef}></div>
+                    <Message key={message.id} {...message} />
+                  </>
+                );
+              }
+              return <Message key={message.id} {...message} />;
+            })}
+          </MessageBox>
+        </ChatbotContent>
+        <ChatbotFooter>
+          <MessageBar onSendMessage={handleSend} hasMicrophoneButton isSendButtonDisabled={isSendButtonDisabled} />
+        </ChatbotFooter>
+      </Chatbot>
+    </>
+  );
+};

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

@@ -0,0 +1,38 @@
+import { FunctionComponent, useState } from 'react';
+
+import ChatbotWelcomePrompt from '@patternfly/chatbot/dist/dynamic/ChatbotWelcomePrompt';
+import { Checkbox } from '@patternfly/react-core';
+
+export const ChatbotWelcomePromptExample: FunctionComponent = () => {
+  const [showWelcomePrompts, setShowWelcomePrompts] = useState(true);
+
+  const welcomePrompts = [
+    {
+      title: 'Set up account',
+      message: 'Choose the necessary settings and preferences for your account.'
+    },
+    {
+      title: 'Troubleshoot issue',
+      message: 'Find documentation and instructions to resolve your issue.'
+    }
+  ];
+
+  return (
+    <>
+      <Checkbox
+        isChecked={showWelcomePrompts}
+        onChange={() => {
+          setShowWelcomePrompts(!showWelcomePrompts);
+        }}
+        name="showWelcomePrompts"
+        label="Show welcome prompts"
+        id="showWelcomePrompts"
+      />
+      <ChatbotWelcomePrompt
+        title="Hi, ChatBot User!"
+        description="How can I help you today?"
+        {...(showWelcomePrompts && { prompts: welcomePrompts })}
+      />
+    </>
+  );
+};

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

@@ -0,0 +1,141 @@
+import {
+  useRef,
+  useState,
+  FunctionComponent,
+  MouseEvent,
+  CSSProperties,
+  Ref,
+  MouseEvent as ReactMouseEvent
+} from 'react';
+import {
+  Button,
+  SkipToContent,
+  MenuToggle,
+  MenuToggleElement,
+  Select,
+  SelectList,
+  SelectOption,
+  Stack
+} from '@patternfly/react-core';
+import Onboarding from '@patternfly/chatbot/dist/dynamic/Onboarding';
+import Chatbot, { ChatbotDisplayMode } from '@patternfly/chatbot/dist/dynamic/Chatbot';
+
+export const OnboardingExample: FunctionComponent = () => {
+  const [isModalOpen, setIsModalOpen] = useState(true);
+  const [displayMode, setDisplayMode] = useState(ChatbotDisplayMode.default);
+  const chatbotRef = useRef<HTMLDivElement>(null);
+  const termsRef = useRef<HTMLDivElement>(null);
+  const [isOpen, setIsOpen] = useState(false);
+  const [selected, setSelected] = useState<string>('Select display mode');
+
+  const handleSkipToContent = (e) => {
+    e.preventDefault();
+    if (!isModalOpen && chatbotRef.current) {
+      chatbotRef.current.focus();
+    }
+    if (isModalOpen && termsRef.current) {
+      termsRef.current.focus();
+    }
+  };
+
+  const handleModalToggle = (_event: MouseEvent | MouseEvent | KeyboardEvent) => {
+    setIsModalOpen(!isModalOpen);
+  };
+
+  const onPrimaryAction = () => {
+    // eslint-disable-next-line no-console
+    console.log('Clicked primary action');
+  };
+
+  const onSecondaryAction = () => {
+    // eslint-disable-next-line no-console
+    console.log('Clicked secondary action');
+  };
+  const onSelect = (_event: ReactMouseEvent<Element, MouseEvent> | undefined, value: string | number | undefined) => {
+    setSelected(value as string);
+    setIsOpen(false);
+    if (value === 'Default') {
+      setDisplayMode(ChatbotDisplayMode.default);
+    }
+    if (value === 'Docked') {
+      setDisplayMode(ChatbotDisplayMode.docked);
+    }
+    if (value === 'Fullscreen') {
+      setDisplayMode(ChatbotDisplayMode.fullscreen);
+    }
+    if (value === 'Embedded') {
+      setDisplayMode(ChatbotDisplayMode.embedded);
+    }
+  };
+
+  const onToggleClick = () => {
+    setIsOpen(!isOpen);
+  };
+
+  const toggle = (toggleRef: Ref<MenuToggleElement>) => (
+    <MenuToggle
+      ref={toggleRef}
+      onClick={onToggleClick}
+      isExpanded={isOpen}
+      style={
+        {
+          width: '200px'
+        } as CSSProperties
+      }
+      aria-label={selected === 'Select display mode' ? 'Select display mode' : `Display mode, ${selected}`}
+    >
+      {selected}
+    </MenuToggle>
+  );
+
+  const body = 'Simplify your Red Hat journey with personalized assistance and seamless problem-solving.';
+
+  return (
+    <>
+      <SkipToContent style={{ zIndex: '999' }} onClick={handleSkipToContent} href="#">
+        Skip to chatbot
+      </SkipToContent>
+      <div
+        style={{
+          position: 'fixed',
+          padding: 'var(--pf-t--global--spacer--lg)',
+          zIndex: '601',
+          boxShadow: 'var(--pf-t--global--box-shadow--lg)'
+        }}
+      >
+        <Stack hasGutter>
+          <Select
+            id="single-select"
+            isOpen={isOpen}
+            selected={selected}
+            onSelect={onSelect}
+            onOpenChange={(isOpen) => setIsOpen(isOpen)}
+            toggle={toggle}
+            shouldFocusToggleOnSelect
+          >
+            <SelectList>
+              <SelectOption value="Default">Default</SelectOption>
+              <SelectOption value="Docked">Docked</SelectOption>
+              <SelectOption value="Fullscreen">Fullscreen</SelectOption>
+              <SelectOption value="Embedded">Embedded</SelectOption>
+            </SelectList>
+          </Select>
+          <Button onClick={handleModalToggle}>Toggle modal</Button>
+        </Stack>
+      </div>
+      <Chatbot ref={chatbotRef} displayMode={displayMode} isVisible isCompact></Chatbot>
+      <Onboarding
+        ref={termsRef}
+        displayMode={displayMode}
+        isModalOpen={isModalOpen}
+        handleModalToggle={handleModalToggle}
+        onPrimaryAction={onPrimaryAction}
+        onSecondaryAction={onSecondaryAction}
+        title="Redefine work in the age of AI"
+        isCompact
+      >
+        {body}
+      </Onboarding>
+    </>
+  );
+};