@patternfly/chatbot 2.1.0-prerelease.17

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

@@ -0,0 +1,10 @@
+import React from 'react';
+import { MessageBar } from '@patternfly/chatbot/dist/dynamic/MessageBar';
+
+export const ChatbotMessageBarStop: React.FunctionComponent = () => {
+  const handleSend = (message) => alert(message);
+
+  const handleStopButton = () => alert('Stop button clicked');
+
+  return <MessageBar handleStopButton={handleStopButton} hasStopButton onSendMessage={handleSend} />;
+};

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

@@ -0,0 +1,84 @@
+import React from 'react';
+import { Button, FormGroup, ModalBody, ModalFooter, ModalHeader, Radio } from '@patternfly/react-core';
+import { ChatbotModal } from '@patternfly/chatbot/dist/dynamic/ChatbotModal';
+import Chatbot, { ChatbotDisplayMode } from '@patternfly/chatbot/dist/dynamic/Chatbot';
+
+export const ChatbotModalExample: React.FunctionComponent = () => {
+  const [isModalOpen, setIsModalOpen] = React.useState(false);
+  const [displayMode, setDisplayMode] = React.useState(ChatbotDisplayMode.default);
+
+  const handleModalToggle = (_event: React.MouseEvent | MouseEvent | KeyboardEvent) => {
+    setIsModalOpen(!isModalOpen);
+  };
+
+  return (
+    <>
+      <div
+        style={{
+          position: 'fixed',
+          padding: 'var(--pf-t--global--spacer--lg)',
+          zIndex: '601',
+          boxShadow: 'var(--pf-t--global--box-shadow--lg)'
+        }}
+      >
+        <FormGroup role="radiogroup" isInline fieldId="basic-form-radio-group" label="Display mode">
+          <Radio
+            isChecked={displayMode === ChatbotDisplayMode.default}
+            onChange={() => setDisplayMode(ChatbotDisplayMode.default)}
+            name="basic-inline-radio"
+            label="Default"
+            id="default"
+          />
+          <Radio
+            isChecked={displayMode === ChatbotDisplayMode.docked}
+            onChange={() => setDisplayMode(ChatbotDisplayMode.docked)}
+            name="basic-inline-radio"
+            label="Docked"
+            id="docked"
+          />
+          <Radio
+            isChecked={displayMode === ChatbotDisplayMode.fullscreen}
+            onChange={() => setDisplayMode(ChatbotDisplayMode.fullscreen)}
+            name="basic-inline-radio"
+            label="Fullscreen"
+            id="fullscreen"
+          />
+          <Radio
+            isChecked={displayMode === ChatbotDisplayMode.embedded}
+            onChange={() => setDisplayMode(ChatbotDisplayMode.embedded)}
+            name="basic-inline-radio"
+            label="Embedded"
+            id="embedded"
+          />
+        </FormGroup>
+        <Button onClick={handleModalToggle}>Launch modal</Button>
+      </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 React from 'react';
+import ChatbotToggle from '@patternfly/chatbot/dist/dynamic/ChatbotToggle';
+
+export const BasicDemo: React.FunctionComponent = () => {
+  const [chatbotVisible, setChatbotVisible] = React.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,144 @@
+import React 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.jpg';
+import patternflyAvatar from '../Messages/patternfly_avatar.jpg';
+import { FormGroup, Radio } from '@patternfly/react-core';
+
+export const ChatbotWelcomeInteractionDemo: React.FunctionComponent = () => {
+  const [messages, setMessages] = React.useState<MessageProps[]>([]);
+  const [isSendButtonDisabled, setIsSendButtonDisabled] = React.useState(false);
+  const [announcement, setAnnouncement] = React.useState<string>();
+  const [position, setPosition] = React.useState<'top' | 'bottom'>('top');
+  const scrollToBottomRef = React.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()
+    });
+    newMessages.push({
+      id: generateId(),
+      role: 'bot',
+      content: 'API response goes here',
+      name: 'Bot',
+      isLoading: true,
+      avatar: patternflyAvatar,
+      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,
+        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') }
+        }
+      });
+      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="Hello, Chatbot User" description="How may 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 React from 'react';
+
+import ChatbotWelcomePrompt from '@patternfly/chatbot/dist/dynamic/ChatbotWelcomePrompt';
+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: 'Topic 2',
+      message: 'Helpful prompt for Topic 2'
+    }
+  ];
+
+  return (
+    <>
+      <Checkbox
+        isChecked={showWelcomePrompts}
+        onChange={() => {
+          setShowWelcomePrompts(!showWelcomePrompts);
+        }}
+        name="showWelcomePrompts"
+        label="Show welcome prompts"
+        id="showWelcomePrompts"
+      />
+      <ChatbotWelcomePrompt
+        title="Hello, Chatbot User"
+        description="How may I help you today?"
+        {...(showWelcomePrompts && { prompts: welcomePrompts })}
+      />
+    </>
+  );
+};

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

@@ -0,0 +1,89 @@
+import React from 'react';
+import ChatbotToggle from '@patternfly/chatbot/dist/dynamic/ChatbotToggle';
+
+export const BasicDemo: React.FunctionComponent = () => {
+  const [chatbotVisible, setChatbotVisible] = React.useState<boolean>(false);
+
+  const closedToggleIcon: () => JSX.Element = () => (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      id="Layer_1"
+      data-name="Layer 1"
+      viewBox="0 0 40.62 36.55"
+      style={{ height: '2.5rem', width: '2.5rem' }}
+    >
+      <defs>
+        <style>
+          {`
+          .cls-1 {
+            stroke-width: 0px;
+          }
+          .eye {
+            transform-origin: 50%;
+            -webkit-transform-origin: 50%;
+            -webkit-animation: blink 5s infinite;
+            animation: blink 5s infinite;
+          }
+          @-webkit-keyframes blink {
+            0%, 100% {
+              transform: scale(1, 0.05);
+            }
+            5%, 95% {
+              transform: scale(1, 1);
+            }
+          }
+          @keyframes blink {
+            0%, 100% {
+              transform: scale(1, 0.05);
+            }
+            5%, 95% {
+              transform: scale(1, 1);
+            }
+          }
+        `}
+        </style>
+      </defs>
+      <path
+        fill="currentColor"
+        id="mouth"
+        className="cls-1"
+        d="m17.09,30.4c-.6,0-1.2-.2-1.7-.6l-2.2-1.6s-.4-.6.1-1.1c.4-.6,1.2-.4,1.2-.4,0,0,1.2.9,2.1,1.5.3.2.7.3,1,.3l9.3.1s.7.1.7,1.1c0,.6-.7.9-.7.9h-9.8v-.2Z"
+      />
+      <path
+        fill="currentColor"
+        id="right_ear"
+        data-name="right ear"
+        className="cls-1"
+        d="m37.29,15.6c1.7,0,3,1.3,3,3v6c0,1.7-1.3,3-3,3h-1v-12h1Z"
+      />
+      <path
+        fill="currentColor"
+        id="left_ear"
+        data-name="left ear"
+        className="cls-1"
+        d="m3.29,15.6h1v12h-1c-1.7,0-3-1.3-3-3v-6c0-1.7,1.4-3,3-3Z"
+      />
+      <circle fill="currentColor" className="cls-1 eye" cx="26.1" cy="18.3" r="2.4" />
+      <circle fill="currentColor" className="cls-1 eye" cx="14.5" cy="18.3" r="2.4" />
+      <circle fill="currentColor" className="cls-1" cx="14" cy="4" r="1.6">
+        <animate attributeName="cx" begin="0s" dur="2s" values="13.5;27;13.5" repeatCount="indefinite" />
+      </circle>
+      <g id="antennas_copy" data-name="antennas copy">
+        <path
+          fill="currentColor"
+          className="cls-1"
+          d="m29.59,9.1h-.7l1.1-2.4h.5c1.4,0,2.5-1.1,2.5-2.5s-1.1-2.5-2.5-2.5-2.5,1.1-2.5,2.5c0,.8.4,1.4.9,1.9l-1.4,3h-14.3l-1.4-3c.5-.5.8-1.1.8-1.8,0-1.4-1.1-2.5-2.5-2.5s-2.5,1.1-2.5,2.5,1.1,2.5,2.5,2.5c.2,0,.4,0,.6-.1l1.1,2.4h-.9c-2.8,0-5.2,2.3-5.2,5.2v16.7c0,2.8,2.3,5.2,5.2,5.2h18.7c2.8,0,5.2-2.3,5.2-5.2V14.2c0-2.8-2.3-5.1-5.2-5.1Zm3.1,21.8c0,1.7-1.4,3.1-3.1,3.1H10.99c-1.7,0-3.1-1.4-3.1-3.1V14.2c0-1.7,1.4-3.1,3.1-3.1h18.7c1.7,0,3.1,1.4,3.1,3.1v16.7h-.1Z"
+        />
+      </g>
+    </svg>
+  );
+
+  return (
+    <ChatbotToggle
+      toolTipLabel="Virtual assistant"
+      isChatbotVisible={chatbotVisible}
+      onToggleChatbot={() => setChatbotVisible(!chatbotVisible)}
+      closedToggleIcon={closedToggleIcon}
+    />
+  );
+};

package/patternfly-docs/content/extensions/chatbot/examples/UI/PF-HorizontalLogo-Color.svg

@@ -0,0 +1,29 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="679px" height="158px" viewBox="0 0 679 158" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>PF-HorizontalLogo-Color </title>
+    <defs>
+        <linearGradient x1="68%" y1="2.25860997e-13%" x2="32%" y2="100%" id="linearGradient-1">
+            <stop stop-color="#2B9AF3" offset="0%"></stop>
+            <stop stop-color="#73BCF7" stop-opacity="0.502212631" offset="100%"></stop>
+        </linearGradient>
+    </defs>
+    <g id="PF-HorizontalLogo-Color" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="PatternFly-Copy-11" transform="translate(206.000000, 45.750000)" fill="#151515" fill-rule="nonzero">
+            <path d="M0,65.25 L0,2.25 L33.21,2.25 C37.35,2.25 41.025,3.135 44.235,4.905 C47.445,6.675 49.98,9.09 51.84,12.15 C53.7,15.21 54.63,18.72 54.63,22.68 C54.63,26.46 53.7,29.865 51.84,32.895 C49.98,35.925 47.43,38.31 44.19,40.05 C40.95,41.79 37.29,42.66 33.21,42.66 L15.48,42.66 L15.48,65.25 L0,65.25 Z M15.48,29.88 L31.41,29.88 C33.69,29.88 35.52,29.22 36.9,27.9 C38.28,26.58 38.97,24.87 38.97,22.77 C38.97,20.61 38.28,18.855 36.9,17.505 C35.52,16.155 33.69,15.48 31.41,15.48 L15.48,15.48 L15.48,29.88 Z" id="Shape"></path>
+            <path d="M77.04,66.06 C73.68,66.06 70.695,65.43 68.085,64.17 C65.475,62.91 63.435,61.17 61.965,58.95 C60.495,56.73 59.76,54.18 59.76,51.3 C59.76,46.74 61.485,43.215 64.935,40.725 C68.385,38.235 73.2,36.99 79.38,36.99 C83.1,36.99 86.7,37.44 90.18,38.34 L90.18,36 C90.18,31.26 87.15,28.89 81.09,28.89 C77.49,28.89 72.69,30.15 66.69,32.67 L61.47,21.96 C69.15,18.48 76.56,16.74 83.7,16.74 C90.3,16.74 95.43,18.315 99.09,21.465 C102.75,24.615 104.58,29.04 104.58,34.74 L104.58,65.25 L90.18,65.25 L90.18,62.37 C88.26,63.69 86.235,64.635 84.105,65.205 C81.975,65.775 79.62,66.06 77.04,66.06 Z M73.62,51.03 C73.62,52.53 74.28,53.7 75.6,54.54 C76.92,55.38 78.75,55.8 81.09,55.8 C84.69,55.8 87.72,55.05 90.18,53.55 L90.18,47.43 C87.42,46.71 84.54,46.35 81.54,46.35 C79.02,46.35 77.07,46.755 75.69,47.565 C74.31,48.375 73.62,49.53 73.62,51.03 Z" id="Shape"></path>
+            <path d="M137.25,65.88 C125.73,65.88 119.97,60.84 119.97,50.76 L119.97,29.79 L110.34,29.79 L110.34,17.64 L119.97,17.64 L119.97,5.4 L134.55,2.25 L134.55,17.64 L147.87,17.64 L147.87,29.79 L134.55,29.79 L134.55,47.88 C134.55,49.98 135.015,51.465 135.945,52.335 C136.875,53.205 138.51,53.64 140.85,53.64 C143.01,53.64 145.2,53.31 147.42,52.65 L147.42,64.44 C146.1,64.86 144.42,65.205 142.38,65.475 C140.34,65.745 138.63,65.88 137.25,65.88 Z" id="Path"></path>
+            <path d="M177.57,65.88 C166.05,65.88 160.29,60.84 160.29,50.76 L160.29,29.79 L150.66,29.79 L150.66,17.64 L160.29,17.64 L160.29,5.4 L174.87,2.25 L174.87,17.64 L188.19,17.64 L188.19,29.79 L174.87,29.79 L174.87,47.88 C174.87,49.98 175.335,51.465 176.265,52.335 C177.195,53.205 178.83,53.64 181.17,53.64 C183.33,53.64 185.52,53.31 187.74,52.65 L187.74,64.44 C186.42,64.86 184.74,65.205 182.7,65.475 C180.66,65.745 178.95,65.88 177.57,65.88 Z" id="Path"></path>
+            <path d="M217.62,66.15 C212.76,66.15 208.365,65.055 204.435,62.865 C200.505,60.675 197.4,57.72 195.12,54 C192.84,50.28 191.7,46.11 191.7,41.49 C191.7,36.87 192.795,32.7 194.985,28.98 C197.175,25.26 200.16,22.305 203.94,20.115 C207.72,17.925 211.92,16.83 216.54,16.83 C221.22,16.83 225.36,17.955 228.96,20.205 C232.56,22.455 235.395,25.53 237.465,29.43 C239.535,33.33 240.57,37.8 240.57,42.84 L240.57,46.44 L206.64,46.44 C207.6,48.66 209.1,50.475 211.14,51.885 C213.18,53.295 215.58,54 218.34,54 C222.42,54 225.6,52.8 227.88,50.4 L237.51,58.95 C234.51,61.47 231.435,63.3 228.285,64.44 C225.135,65.58 221.58,66.15 217.62,66.15 Z M206.37,36.27 L226.26,36.27 C225.48,33.99 224.205,32.16 222.435,30.78 C220.665,29.4 218.61,28.71 216.27,28.71 C213.87,28.71 211.8,29.37 210.06,30.69 C208.32,32.01 207.09,33.87 206.37,36.27 Z" id="Shape"></path>
+            <path d="M247.41,65.25 L247.41,17.64 L261.99,17.64 L261.99,22.41 C265.23,18.51 269.4,16.56 274.5,16.56 C277.08,16.62 278.91,17.01 279.99,17.73 L279.99,30.42 C277.95,29.46 275.64,28.98 273.06,28.98 C270.78,28.98 268.665,29.505 266.715,30.555 C264.765,31.605 263.19,33.09 261.99,35.01 L261.99,65.25 L247.41,65.25 Z" id="Path"></path>
+            <path d="M286.29,65.25 L286.29,17.64 L300.87,17.64 L300.87,20.88 C304.47,18.12 308.73,16.74 313.65,16.74 C317.37,16.74 320.655,17.55 323.505,19.17 C326.355,20.79 328.59,23.04 330.21,25.92 C331.83,28.8 332.64,32.13 332.64,35.91 L332.64,65.25 L318.06,65.25 L318.06,37.89 C318.06,35.25 317.28,33.15 315.72,31.59 C314.16,30.03 312.06,29.25 309.42,29.25 C305.76,29.25 302.91,30.51 300.87,33.03 L300.87,65.25 L286.29,65.25 Z" id="Path"></path>
+            <polygon id="Path" points="342 65.25 342 2.25 392.04 2.25 392.04 15.66 357.48 15.66 357.48 27.45 380.52 27.45 380.52 40.41 357.48 40.41 357.48 65.25"></polygon>
+            <polygon id="Path" points="399.96 65.25 399.96 2.25 414.54 0 414.54 65.25"></polygon>
+            <path d="M429.21,84.69 C428.07,84.69 426.96,84.645 425.88,84.555 C424.8,84.465 423.9,84.33 423.18,84.15 L423.18,71.73 C424.38,71.97 425.88,72.09 427.68,72.09 C432.36,72.09 435.51,70.05 437.13,65.97 L437.13,65.88 L418.86,17.64 L434.97,17.64 L445.5,47.61 L457.74,17.64 L473.49,17.64 L452.16,67.68 C450.42,71.82 448.5,75.135 446.4,77.625 C444.3,80.115 441.87,81.915 439.11,83.025 C436.35,84.135 433.05,84.69 429.21,84.69 Z" id="Path"></path>
+        </g>
+        <g id="Logo" transform="translate(0.000000, 0.000000)">
+            <path d="M61.826087,0 L158,0 L158,96.173913 L147.695652,96.173913 C100.271201,96.173913 61.826087,57.7287992 61.826087,10.3043478 L61.826087,0 L61.826087,0 Z" id="Rectangle-Copy-17" fill="#0066CC"></path>
+            <path d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z" id="Path-2" fill="url(#linearGradient-1)"></path>
+            <path d="M123.652174,-30.9130435 L30.9130435,123.652174 L103.652174,123.652174 C114.697869,123.652174 123.652174,114.697869 123.652174,103.652174 L123.652174,-30.9130435 L123.652174,-30.9130435 Z" id="Path-2" fill="url(#linearGradient-1)" transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "></path>
+        </g>
+    </g>
+</svg>

package/patternfly-docs/content/extensions/chatbot/examples/UI/PF-HorizontalLogo-Reverse.svg

@@ -0,0 +1,28 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="679px" height="158px" viewBox="0 0 679 158" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>PF-HorizontalLogo-Reverse </title>
+    <defs>
+        <linearGradient x1="100%" y1="1.31838984e-13%" x2="40.4021492%" y2="59.4473677%" id="linearGradient-1">
+            <stop stop-color="#FFFFFF" offset="0%"></stop>
+            <stop stop-color="#FFFFFF" stop-opacity="0.498497596" offset="100%"></stop>
+        </linearGradient>
+    </defs>
+    <g id="PF-HorizontalLogo-Reverse" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Group" transform="translate(-0.000000, 0.000000)">
+            <path d="M61.7658863,0 L157.846154,0 L157.846154,96.0802676 C104.782487,96.0802676 61.7658863,53.0636665 61.7658863,0 L61.7658863,0 L61.7658863,0 Z" id="Rectangle-Copy-15" fill="#FFFFFF" opacity="0.401297433"></path>
+            <path d="M158,1.84777167 L158,138 C158,149.045695 149.045695,158 138,158 L66.3656919,158 L158,1.84777167 Z M156.152228,3.55271368e-13 L-9.37916411e-13,91.6343081 L-9.37916411e-13,20 C-9.09494702e-13,8.954305 8.954305,3.55271368e-13 20,3.41060513e-13 L156.152228,3.55271368e-13 Z" id="Combined-Shape-Copy-4" fill="url(#linearGradient-1)"></path>
+        </g>
+        <g id="PatternFly-Copy-11" transform="translate(206.000000, 45.750000)" fill="#FFFFFF" fill-rule="nonzero">
+            <path d="M0,65.25 L0,2.25 L33.21,2.25 C37.35,2.25 41.025,3.135 44.235,4.905 C47.445,6.675 49.98,9.09 51.84,12.15 C53.7,15.21 54.63,18.72 54.63,22.68 C54.63,26.46 53.7,29.865 51.84,32.895 C49.98,35.925 47.43,38.31 44.19,40.05 C40.95,41.79 37.29,42.66 33.21,42.66 L15.48,42.66 L15.48,65.25 L0,65.25 Z M15.48,29.88 L31.41,29.88 C33.69,29.88 35.52,29.22 36.9,27.9 C38.28,26.58 38.97,24.87 38.97,22.77 C38.97,20.61 38.28,18.855 36.9,17.505 C35.52,16.155 33.69,15.48 31.41,15.48 L15.48,15.48 L15.48,29.88 Z" id="Shape"></path>
+            <path d="M77.04,66.06 C73.68,66.06 70.695,65.43 68.085,64.17 C65.475,62.91 63.435,61.17 61.965,58.95 C60.495,56.73 59.76,54.18 59.76,51.3 C59.76,46.74 61.485,43.215 64.935,40.725 C68.385,38.235 73.2,36.99 79.38,36.99 C83.1,36.99 86.7,37.44 90.18,38.34 L90.18,36 C90.18,31.26 87.15,28.89 81.09,28.89 C77.49,28.89 72.69,30.15 66.69,32.67 L61.47,21.96 C69.15,18.48 76.56,16.74 83.7,16.74 C90.3,16.74 95.43,18.315 99.09,21.465 C102.75,24.615 104.58,29.04 104.58,34.74 L104.58,65.25 L90.18,65.25 L90.18,62.37 C88.26,63.69 86.235,64.635 84.105,65.205 C81.975,65.775 79.62,66.06 77.04,66.06 Z M73.62,51.03 C73.62,52.53 74.28,53.7 75.6,54.54 C76.92,55.38 78.75,55.8 81.09,55.8 C84.69,55.8 87.72,55.05 90.18,53.55 L90.18,47.43 C87.42,46.71 84.54,46.35 81.54,46.35 C79.02,46.35 77.07,46.755 75.69,47.565 C74.31,48.375 73.62,49.53 73.62,51.03 Z" id="Shape"></path>
+            <path d="M137.25,65.88 C125.73,65.88 119.97,60.84 119.97,50.76 L119.97,29.79 L110.34,29.79 L110.34,17.64 L119.97,17.64 L119.97,5.4 L134.55,2.25 L134.55,17.64 L147.87,17.64 L147.87,29.79 L134.55,29.79 L134.55,47.88 C134.55,49.98 135.015,51.465 135.945,52.335 C136.875,53.205 138.51,53.64 140.85,53.64 C143.01,53.64 145.2,53.31 147.42,52.65 L147.42,64.44 C146.1,64.86 144.42,65.205 142.38,65.475 C140.34,65.745 138.63,65.88 137.25,65.88 Z" id="Path"></path>
+            <path d="M177.57,65.88 C166.05,65.88 160.29,60.84 160.29,50.76 L160.29,29.79 L150.66,29.79 L150.66,17.64 L160.29,17.64 L160.29,5.4 L174.87,2.25 L174.87,17.64 L188.19,17.64 L188.19,29.79 L174.87,29.79 L174.87,47.88 C174.87,49.98 175.335,51.465 176.265,52.335 C177.195,53.205 178.83,53.64 181.17,53.64 C183.33,53.64 185.52,53.31 187.74,52.65 L187.74,64.44 C186.42,64.86 184.74,65.205 182.7,65.475 C180.66,65.745 178.95,65.88 177.57,65.88 Z" id="Path"></path>
+            <path d="M217.62,66.15 C212.76,66.15 208.365,65.055 204.435,62.865 C200.505,60.675 197.4,57.72 195.12,54 C192.84,50.28 191.7,46.11 191.7,41.49 C191.7,36.87 192.795,32.7 194.985,28.98 C197.175,25.26 200.16,22.305 203.94,20.115 C207.72,17.925 211.92,16.83 216.54,16.83 C221.22,16.83 225.36,17.955 228.96,20.205 C232.56,22.455 235.395,25.53 237.465,29.43 C239.535,33.33 240.57,37.8 240.57,42.84 L240.57,46.44 L206.64,46.44 C207.6,48.66 209.1,50.475 211.14,51.885 C213.18,53.295 215.58,54 218.34,54 C222.42,54 225.6,52.8 227.88,50.4 L237.51,58.95 C234.51,61.47 231.435,63.3 228.285,64.44 C225.135,65.58 221.58,66.15 217.62,66.15 Z M206.37,36.27 L226.26,36.27 C225.48,33.99 224.205,32.16 222.435,30.78 C220.665,29.4 218.61,28.71 216.27,28.71 C213.87,28.71 211.8,29.37 210.06,30.69 C208.32,32.01 207.09,33.87 206.37,36.27 Z" id="Shape"></path>
+            <path d="M247.41,65.25 L247.41,17.64 L261.99,17.64 L261.99,22.41 C265.23,18.51 269.4,16.56 274.5,16.56 C277.08,16.62 278.91,17.01 279.99,17.73 L279.99,30.42 C277.95,29.46 275.64,28.98 273.06,28.98 C270.78,28.98 268.665,29.505 266.715,30.555 C264.765,31.605 263.19,33.09 261.99,35.01 L261.99,65.25 L247.41,65.25 Z" id="Path"></path>
+            <path d="M286.29,65.25 L286.29,17.64 L300.87,17.64 L300.87,20.88 C304.47,18.12 308.73,16.74 313.65,16.74 C317.37,16.74 320.655,17.55 323.505,19.17 C326.355,20.79 328.59,23.04 330.21,25.92 C331.83,28.8 332.64,32.13 332.64,35.91 L332.64,65.25 L318.06,65.25 L318.06,37.89 C318.06,35.25 317.28,33.15 315.72,31.59 C314.16,30.03 312.06,29.25 309.42,29.25 C305.76,29.25 302.91,30.51 300.87,33.03 L300.87,65.25 L286.29,65.25 Z" id="Path"></path>
+            <polygon id="Path" points="342 65.25 342 2.25 392.04 2.25 392.04 15.66 357.48 15.66 357.48 27.45 380.52 27.45 380.52 40.41 357.48 40.41 357.48 65.25"></polygon>
+            <polygon id="Path" points="399.96 65.25 399.96 2.25 414.54 0 414.54 65.25"></polygon>
+            <path d="M429.21,84.69 C428.07,84.69 426.96,84.645 425.88,84.555 C424.8,84.465 423.9,84.33 423.18,84.15 L423.18,71.73 C424.38,71.97 425.88,72.09 427.68,72.09 C432.36,72.09 435.51,70.05 437.13,65.97 L437.13,65.88 L418.86,17.64 L434.97,17.64 L445.5,47.61 L457.74,17.64 L473.49,17.64 L452.16,67.68 C450.42,71.82 448.5,75.135 446.4,77.625 C444.3,80.115 441.87,81.915 439.11,83.025 C436.35,84.135 433.05,84.69 429.21,84.69 Z" id="Path"></path>
+        </g>
+    </g>
+</svg>

package/patternfly-docs/content/extensions/chatbot/examples/UI/PF-IconLogo-Color.svg

@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="158px" height="158px" viewBox="0 0 158 158" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>PF-IconLogo-color </title>
+    <defs>
+        <linearGradient x1="68%" y1="2.25860997e-13%" x2="32%" y2="100%" id="linearGradient-1">
+            <stop stop-color="#2B9AF3" offset="0%"></stop>
+            <stop stop-color="#73BCF7" stop-opacity="0.502212631" offset="100%"></stop>
+        </linearGradient>
+    </defs>
+    <g id="PF-IconLogo-color" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Logo">
+            <path d="M61.826087,0 L158,0 L158,96.173913 L147.695652,96.173913 C100.271201,96.173913 61.826087,57.7287992 61.826087,10.3043478 L61.826087,0 L61.826087,0 Z" id="Rectangle-Copy-17" fill="#0066CC"></path>
+            <path d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z" id="Path-2" fill="url(#linearGradient-1)"></path>
+            <path d="M123.652174,-30.9130435 L30.9130435,123.652174 L103.652174,123.652174 C114.697869,123.652174 123.652174,114.697869 123.652174,103.652174 L123.652174,-30.9130435 L123.652174,-30.9130435 Z" id="Path-2" fill="url(#linearGradient-1)" transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "></path>
+        </g>
+    </g>
+</svg>

package/patternfly-docs/content/extensions/chatbot/examples/UI/PF-IconLogo-Reverse.svg

@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="158px" height="158px" viewBox="0 0 158 158" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>PF-IconLogo-Reverse </title>
+    <defs>
+        <linearGradient x1="100%" y1="1.31838984e-13%" x2="40.4021492%" y2="59.4473677%" id="linearGradient-1">
+            <stop stop-color="#FFFFFF" offset="0%"></stop>
+            <stop stop-color="#FFFFFF" stop-opacity="0.498497596" offset="100%"></stop>
+        </linearGradient>
+    </defs>
+    <g id="PF-IconLogo-Reverse" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Group">
+            <path d="M61.7658863,0 L157.846154,0 L157.846154,96.0802676 C104.782487,96.0802676 61.7658863,53.0636665 61.7658863,0 L61.7658863,0 L61.7658863,0 Z" id="Rectangle-Copy-15" fill="#FFFFFF" opacity="0.4"></path>
+            <path d="M158,1.84777167 L158,138 C158,149.045695 149.045695,158 138,158 L66.3656919,158 L158,1.84777167 Z M156.152228,3.55271368e-13 L-9.37916411e-13,91.6343081 L-9.37916411e-13,20 C-9.09494702e-13,8.954305 8.954305,3.55271368e-13 20,3.41060513e-13 L156.152228,3.55271368e-13 Z" id="Combined-Shape-Copy-4" fill="url(#linearGradient-1)"></path>
+        </g>
+    </g>
+</svg>

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

@@ -0,0 +1,40 @@
+import React from 'react';
+
+import { SkipToContent } from '@patternfly/react-core';
+import ChatbotToggle from '@patternfly/chatbot/dist/dynamic/ChatbotToggle';
+import Chatbot, { ChatbotDisplayMode } from '@patternfly/chatbot/dist/dynamic/Chatbot';
+
+export const ChatbotDemo: React.FunctionComponent = () => {
+  const [chatbotVisible, setChatbotVisible] = React.useState<boolean>(true);
+  const toggleRef = React.useRef<HTMLButtonElement>(null);
+  const chatbotRef = React.useRef<HTMLDivElement>(null);
+  const displayMode = ChatbotDisplayMode.default;
+
+  const handleSkipToContent = (e) => {
+    e.preventDefault();
+    if (!chatbotVisible && toggleRef.current) {
+      toggleRef.current.focus();
+    }
+    if (chatbotVisible && chatbotRef.current) {
+      chatbotRef.current.focus();
+    }
+  };
+
+  return (
+    <>
+      <SkipToContent onClick={handleSkipToContent} href="#">
+        Skip to chatbot
+      </SkipToContent>
+      <ChatbotToggle
+        toolTipLabel="Chatbot"
+        isChatbotVisible={chatbotVisible}
+        onToggleChatbot={() => setChatbotVisible(!chatbotVisible)}
+        id="chatbot-toggle"
+        ref={toggleRef}
+      />
+      <Chatbot isVisible={chatbotVisible} displayMode={displayMode} ref={chatbotRef}>
+        &nbsp;
+      </Chatbot>
+    </>
+  );
+};