@patternfly/chatbot 2.2.0 → 6.3.0-prerelease.1

package/patternfly-docs/content/extensions/chatbot/examples/Messages/BotMessage.tsx

@@ -2,35 +2,44 @@ import React from 'react';
 import Message from '@patternfly/chatbot/dist/dynamic/Message';
 import patternflyAvatar from './patternfly_avatar.jpg';
 import squareImg from './PF-social-color-square.svg';
-import { AlertActionLink, Form, FormGroup, Radio } from '@patternfly/react-core';
+import {
+  AlertActionLink,
+  MenuToggle,
+  MenuToggleElement,
+  Select,
+  SelectList,
+  SelectOption
+} from '@patternfly/react-core';
 
 export const BotMessageExample: React.FunctionComponent = () => {
-  const [variant, setVariant] = React.useState('code');
+  const [variant, setVariant] = React.useState<string>('Code');
+  const [isOpen, setIsOpen] = React.useState(false);
+  const [selected, setSelected] = React.useState<string>('Message content type');
 
   /* eslint-disable indent */
   const renderContent = () => {
     switch (variant) {
-      case 'code':
+      case 'Code':
         return code;
-      case 'heading':
+      case 'Heading':
         return heading;
-      case 'emphasis':
+      case 'Emphasis':
         return emphasis;
-      case 'blockQuotes':
+      case 'Block quotes':
         return blockQuotes;
-      case 'orderedList':
+      case 'Ordered list':
         return orderedList;
-      case 'unorderedList':
+      case 'Unordered list':
         return unorderedList;
-      case 'moreComplexList':
+      case 'More complex list':
         return moreComplexList;
-      case 'inlineCode':
+      case 'Inline code':
         return inlineCode;
-      case 'link':
+      case 'Link':
         return link;
-      case 'table':
+      case 'Table':
         return table;
-      case 'image':
+      case 'Image':
         return image;
       default:
         return;
@@ -155,6 +164,32 @@ _Italic text, formatted with single underscores_
     )
   };
 
+  const onSelect = (_event: React.MouseEvent<Element, MouseEvent> | undefined, value: string | number | undefined) => {
+    setVariant(value);
+    setSelected(value as string);
+    setIsOpen(false);
+  };
+
+  const onToggleClick = () => {
+    setIsOpen(!isOpen);
+  };
+
+  const toggle = (toggleRef: React.Ref<MenuToggleElement>) => (
+    <MenuToggle
+      className="pf-v6-u-mb-md"
+      ref={toggleRef}
+      onClick={onToggleClick}
+      isExpanded={isOpen}
+      style={
+        {
+          width: '200px'
+        } as React.CSSProperties
+      }
+    >
+      {selected}
+    </MenuToggle>
+  );
+
   return (
     <>
       <Message
@@ -193,104 +228,39 @@ _Italic text, formatted with single underscores_
         timestamp="1 hour ago"
       />
       <Message name="Bot" role="bot" avatar={patternflyAvatar} content="Example content" isLoading />
-
-      <Form>
-        <FormGroup role="radiogroup" isInline fieldId="bot-message-type" label="Message content type">
-          <Radio
-            isChecked={variant === 'code'}
-            onChange={() => setVariant('code')}
-            name="bot-message-type"
-            label="Code"
-            id="code"
-          />
-          <Radio
-            isChecked={variant === 'inlineCode'}
-            onChange={() => setVariant('inlineCode')}
-            name="bot-message-type"
-            label="Inline code"
-            id="inline-code"
-          />
-          <Radio
-            isChecked={variant === 'heading'}
-            onChange={() => setVariant('heading')}
-            name="bot-message-type"
-            label="Heading"
-            id="heading"
-          />
-          <Radio
-            isChecked={variant === 'blockQuotes'}
-            onChange={() => setVariant('blockQuotes')}
-            name="bot-message-type"
-            label="Block quote"
-            id="block-quotes"
-          />
-          <Radio
-            isChecked={variant === 'emphasis'}
-            onChange={() => setVariant('emphasis')}
-            name="bot-message-type"
-            label="Emphasis"
-            id="emphasis"
-          />
-          <Radio
-            isChecked={variant === 'link'}
-            onChange={() => setVariant('link')}
-            name="bot-message-type"
-            label="Link"
-            id="link"
-          />
-          <Radio
-            isChecked={variant === 'unorderedList'}
-            onChange={() => setVariant('unorderedList')}
-            name="bot-message-type"
-            label="Unordered list"
-            id="unordered-list"
-          />
-          <Radio
-            isChecked={variant === 'orderedList'}
-            onChange={() => setVariant('orderedList')}
-            name="bot-message-type"
-            label="Ordered list"
-            id="ordered-list"
-          />
-          <Radio
-            isChecked={variant === 'moreComplexList'}
-            onChange={() => setVariant('moreComplexList')}
-            name="bot-message-type"
-            label="More complex list"
-            id="more-complex-list"
-          />
-          <Radio
-            isChecked={variant === 'table'}
-            onChange={() => setVariant('table')}
-            name="bot-message-type"
-            label="Table"
-            id="table"
-          />
-          <Radio
-            isChecked={variant === 'image'}
-            onChange={() => setVariant('image')}
-            name="bot-message-type"
-            label="Image"
-            id="image"
-          />
-          <Radio
-            isChecked={variant === 'error'}
-            onChange={() => setVariant('error')}
-            name="bot-message-error"
-            label="Error"
-            id="error"
-          />
-        </FormGroup>
-      </Form>
+      <Select
+        id="single-select"
+        isOpen={isOpen}
+        selected={selected}
+        onSelect={onSelect}
+        onOpenChange={(isOpen) => setIsOpen(isOpen)}
+        toggle={toggle}
+        shouldFocusToggleOnSelect
+      >
+        <SelectList>
+          <SelectOption value="Code">Code</SelectOption>
+          <SelectOption value="Inline code">Inline code</SelectOption>
+          <SelectOption value="Heading">Heading</SelectOption>
+          <SelectOption value="Block quotes">Block quotes</SelectOption>
+          <SelectOption value="Emphasis">Emphasis</SelectOption>
+          <SelectOption value="Link">Link</SelectOption>
+          <SelectOption value="Unordered list">Unordered list</SelectOption>
+          <SelectOption value="Ordered list">Ordered list</SelectOption>
+          <SelectOption value="More complex list">More complex list</SelectOption>
+          <SelectOption value="Table">Table</SelectOption>
+          <SelectOption value="Image">Image</SelectOption>
+          <SelectOption value="Error">Error</SelectOption>
+        </SelectList>
+      </Select>
       <Message
         name="Bot"
         role="bot"
         avatar={patternflyAvatar}
         content={renderContent()}
         tableProps={
-          variant === 'table' ? { 'aria-label': 'App information and user roles for bot messages' } : undefined
+          variant === 'Table' ? { 'aria-label': 'App information and user roles for bot messages' } : undefined
         }
-        error={variant === 'error' ? error : undefined}
+        error={variant === 'Error' ? error : undefined}
       />
     </>
   );

package/patternfly-docs/content/extensions/chatbot/examples/Messages/FileDetailsLabel.tsx

@@ -1,52 +1,63 @@
 import React from 'react';
 import FileDetailsLabel from '@patternfly/chatbot/dist/dynamic/FileDetailsLabel';
-import { Radio } from '@patternfly/react-core/dist/dynamic/Radio';
-import { FormGroup } from '@patternfly/react-core/dist/dynamic/FormGroup';
-import { Stack } from '@patternfly/react-core/dist/dynamic/Stack';
+import { Stack, MenuToggle, MenuToggleElement, Select, SelectList, SelectOption } from '@patternfly/react-core';
 
 export const FileDetailsLabelExample: React.FunctionComponent = () => {
-  const [variant, setVariant] = React.useState('plain');
+  const [variant, setVariant] = React.useState<string>('plain');
+  const [isOpen, setIsOpen] = React.useState<boolean>(false);
+  const [selected, setSelected] = React.useState<string>('Variant');
+
+  const onSelect = (_event: React.MouseEvent<Element, MouseEvent> | undefined, value: string | number | undefined) => {
+    setVariant(value);
+    setSelected(value as string);
+    setIsOpen(false);
+  };
+
+  const onToggleClick = () => {
+    setIsOpen(!isOpen);
+  };
+
+  const toggle = (toggleRef: React.Ref<MenuToggleElement>) => (
+    <MenuToggle
+      ref={toggleRef}
+      onClick={onToggleClick}
+      isExpanded={isOpen}
+      style={
+        {
+          width: '200px'
+        } as React.CSSProperties
+      }
+    >
+      {selected}
+    </MenuToggle>
+  );
 
   return (
     <Stack hasGutter>
-      <FormGroup role="radiogroup" isInline fieldId="basic-form-radio-group" label="Variant">
-        <Radio
-          isChecked={variant === 'plain'}
-          onChange={() => setVariant('plain')}
-          name="basic-inline-radio"
-          label="Plain"
-          id="plain"
-        />
-        <Radio
-          isChecked={variant === 'closeable'}
-          onChange={() => setVariant('closeable')}
-          name="basic-inline-radio"
-          label="Closeable"
-          id="closeable"
-        />
-        <Radio
-          isChecked={variant === 'clickable'}
-          onChange={() => setVariant('clickable')}
-          name="basic-inline-radio"
-          label="Clickable"
-          id="clickable"
-        />
-        <Radio
-          isChecked={variant === 'loading'}
-          onChange={() => setVariant('loading')}
-          name="basic-inline-radio"
-          label="Loading"
-          id="loading"
-        />
-      </FormGroup>
+      <Select
+        id="single-select"
+        isOpen={isOpen}
+        selected={selected}
+        onSelect={onSelect}
+        onOpenChange={(isOpen) => setIsOpen(isOpen)}
+        toggle={toggle}
+        shouldFocusToggleOnSelect
+      >
+        <SelectList>
+          <SelectOption value="Plain">Plain</SelectOption>
+          <SelectOption value="Closeable">Closeable</SelectOption>
+          <SelectOption value="Clickable">Clickable</SelectOption>
+          <SelectOption value="Loading">Loading</SelectOption>
+        </SelectList>
+      </Select>
       <div className="pf-chatbot__file-details-example">
         <FileDetailsLabel
           fileName="auth-operator.yml"
           // eslint-disable-next-line no-console
-          {...(variant === 'closeable' && { onClose: () => console.log('clicked close button!') })}
+          {...(variant === 'Closeable' && { onClose: () => console.log('clicked close button!') })}
           // eslint-disable-next-line no-console
-          {...(variant === 'clickable' && { onClick: () => console.log('clicked entire button!') })}
-          {...(variant === 'loading' && { isLoading: true })}
+          {...(variant === 'Clickable' && { onClick: () => console.log('clicked entire button!') })}
+          {...(variant === 'Loading' && { isLoading: true })}
         />
       </div>
     </Stack>

package/patternfly-docs/content/extensions/chatbot/examples/Messages/MessageWithQuickResponses.tsx

@@ -40,5 +40,15 @@ export const MessageWithQuickResponsesExample: React.FunctionComponent = () => (
         { id: '5', content: 'Something else', onClick: () => alert('Clicked id 5') }
       ]}
     />
+    <Message
+      name="Bot"
+      role="bot"
+      avatar={patternflyAvatar}
+      content="Did you clear your cache?"
+      quickResponses={[
+        { id: '1', content: 'Yes', isDisabled: true },
+        { id: '2', content: 'No', onClick: () => alert('Clicked no') }
+      ]}
+    />
   </>
 );

package/patternfly-docs/content/extensions/chatbot/examples/Messages/MessageWithSources.tsx

@@ -14,23 +14,26 @@ export const MessageWithSourcesExample: React.FunctionComponent = () => {
         name="Bot"
         role="bot"
         avatar={patternflyAvatar}
-        content="Example with sources"
+        content="This example has a body description that's within the recommended limit of 2 lines:"
         sources={{
           sources: [
             {
               title: 'Getting started with Red Hat OpenShift',
               link: '#',
-              body: 'Red Hat OpenShift on IBM Cloud is a managed offering to create your own cluster of compute hosts where you can deploy and manage containerized apps on IBM Cloud ...'
+              body: 'Red Hat OpenShift on IBM Cloud is a managed offering to create your own cluster of compute hosts where you can deploy and manage containerized apps on IBM Cloud ...',
+              isExternal: true
             },
             {
               title: 'Azure Red Hat OpenShift documentation',
               link: '#',
-              body: 'Microsoft Azure Red Hat OpenShift allows you to deploy a production ready Red Hat OpenShift cluster in Azure ...'
+              body: 'Microsoft Azure Red Hat OpenShift allows you to deploy a production ready Red Hat OpenShift cluster in Azure ...',
+              isExternal: true
             },
             {
               title: 'OKD Documentation: Home',
               link: '#',
-              body: 'OKD is a distribution of Kubernetes optimized for continuous application development and multi-tenant deployment. OKD also serves as the upstream code base upon ...'
+              body: 'OKD is a distribution of Kubernetes optimized for continuous application development and multi-tenant deployment. OKD also serves as the upstream code base upon ...',
+              isExternal: true
             }
           ],
           onSetPage
@@ -40,18 +43,49 @@ export const MessageWithSourcesExample: React.FunctionComponent = () => {
         name="Bot"
         role="bot"
         avatar={patternflyAvatar}
-        content="Example with very long sources"
+        content="This example has a body description that's longer than the recommended limit of 2 lines, with a link to load the rest of the description:"
+        sources={{
+          sources: [
+            {
+              title: 'Getting started with Red Hat OpenShift',
+              link: '#',
+              body: 'Red Hat OpenShift on IBM Cloud is a managed offering to create your own cluster of compute hosts where you can deploy and manage containerized apps on IBM Cloud.',
+              hasShowMore: true
+            },
+            {
+              title: 'Azure Red Hat OpenShift documentation',
+              link: '#',
+              body: 'Microsoft Azure Red Hat OpenShift allows you to deploy a production ready Red Hat OpenShift cluster in Azure.',
+              hasShowMore: true
+            },
+            {
+              title: 'OKD Documentation: Home',
+              link: '#',
+              body: 'OKD is a distribution of Kubernetes optimized for continuous application development and multi-tenant deployment. OKD also serves as the upstream code base upon.',
+              hasShowMore: true
+            }
+          ],
+          onSetPage
+        }}
+      />
+      <Message
+        name="Bot"
+        role="bot"
+        avatar={patternflyAvatar}
+        content="This example has a truncated title:"
         sources={{
           sources: [
             {
               title: 'Getting started with Red Hat OpenShift AI and other products',
               link: '#',
-              body: 'Red Hat OpenShift on IBM Cloud is a managed offering to create your own cluster of compute hosts where you can deploy and manage containerized apps on IBM Cloud ...'
+              body: 'Red Hat OpenShift on IBM Cloud is a managed offering to create your own cluster of compute hosts where you can deploy and manage containerized apps on IBM Cloud ...',
+              isExternal: true
             },
             {
               title: 'Azure Red Hat OpenShift documentation | Red Hat',
               link: '#',
-              body: 'Microsoft Azure Red Hat OpenShift allows you to deploy a production ready Red Hat OpenShift cluster in Azure ...'
+              body: 'Microsoft Azure Red Hat OpenShift allows you to deploy a production ready Red Hat OpenShift cluster in Azure ...',
+              isExternal: true
             }
           ],
           onSetPage
@@ -61,13 +95,14 @@ export const MessageWithSourcesExample: React.FunctionComponent = () => {
         name="Bot"
         role="bot"
         avatar={patternflyAvatar}
-        content="Example with only 1 source"
+        content="This example only includes 1 source:"
         sources={{
           sources: [
             {
               title: 'Getting started with Red Hat OpenShift',
               link: '#',
-              body: 'Red Hat OpenShift on IBM Cloud is a managed offering to create your own cluster of compute hosts where you can deploy and manage containerized apps on IBM Cloud ...'
+              body: 'Red Hat OpenShift on IBM Cloud is a managed offering to create your own cluster of compute hosts where you can deploy and manage containerized apps on IBM Cloud ...',
+              isExternal: true
             }
           ],
           onSetPage
@@ -77,17 +112,19 @@ export const MessageWithSourcesExample: React.FunctionComponent = () => {
         name="Bot"
         role="bot"
         avatar={patternflyAvatar}
-        content="Example with sources that include a title and link"
+        content="This example has a title and no body description:"
         sources={{
           sources: [
-            { title: 'Getting started with Red Hat OpenShift', link: '#' },
+            { title: 'Getting started with Red Hat OpenShift', link: '#', isExternal: true },
             {
               title: 'Azure Red Hat OpenShift documentation',
-              link: '#'
+              link: '#',
+              isExternal: true
             },
             {
               title: 'OKD Documentation: Home',
-              link: '#'
+              link: '#',
+              isExternal: true
             }
           ],
           onSetPage
@@ -97,7 +134,7 @@ export const MessageWithSourcesExample: React.FunctionComponent = () => {
         name="Bot"
         role="bot"
         avatar={patternflyAvatar}
-        content="Example with link-only sources (not recommended)"
+        content="This example displays the source as a link, without a title (not recommended)"
         sources={{
           sources: [
             {

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

@@ -142,7 +142,9 @@ To add quick actions, pass `quickResponses` to `<Message>`. This can be overridd
 
 If you are using Retrieval-Augmented Generation, you may want to display sources in a message. Passing `sources` to `<Message>` allows you to paginate between the sources you provide.
 
-The API for a source requires a link at minimum, but we strongly recommend providing a more descriptive title and body description so users have enough context. The title is limited to 1 line and the body is limited to 2 lines.
+If a source will open outside of the ChatBot window, add an external link icon via `isExternal`.
+
+The API for a source requires a link at minimum, but we strongly recommend providing a more descriptive title and body description so users have enough context. For the best clarity and readability, we strongly recommend limiting the title to 1 line and the body to 2 lines. If the body description is more than 2 lines, use the "long sources" or "very long sources" variant.
 
 ```js file="./MessageWithSources.tsx"