@patternfly/chatbot 1.0.0

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

@@ -0,0 +1,58 @@
+import { FunctionComponent } from 'react';
+
+import Message from '@patternfly/chatbot/dist/dynamic/Message';
+
+export const MessageWithMultipleActionGroups: FunctionComponent = () => (
+  <>
+    <Message
+      name="Bot"
+      role="bot"
+      content="This message contains multiple action groups, each with their own selection persistence: \n1. Feedback actions (thumbs up/down) with persistent selections \n2. Utility actions (copy, download) with non-persistent selections \n3. Listen action with persistent selection"
+      actions={[
+        {
+          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') }
+          },
+          persistActionSelection: true
+        },
+        {
+          actions: {
+            // eslint-disable-next-line no-console
+            copy: { onClick: () => console.log('Copy') },
+            // eslint-disable-next-line no-console
+            download: { onClick: () => console.log('Download') }
+          },
+          persistActionSelection: false
+        },
+        {
+          actions: {
+            // eslint-disable-next-line no-console
+            listen: { onClick: () => console.log('Listen') }
+          },
+          persistActionSelection: true
+        }
+      ]}
+    />
+    <Message
+      name="Bot"
+      role="bot"
+      content="This message contains multiple action groups, both of which persist selections."
+      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
+          listen: { onClick: () => console.log('Listen') }
+        }
+      ]}
+      persistActionSelection={true}
+    />
+  </>
+);

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

@@ -0,0 +1,20 @@
+import { FunctionComponent } from 'react';
+
+import Message from '@patternfly/chatbot/dist/dynamic/Message';
+
+export const MessageWithPersistedActions: FunctionComponent = () => (
+  <Message
+    name="Bot"
+    role="bot"
+    content="I updated your account with those settings. You're ready to set up your first dashboard! Click a button and then click outside the message - notice the selection persists."
+    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
+      listen: { onClick: () => console.log('Listen') }
+    }}
+    persistActionSelection
+  />
+);

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

@@ -0,0 +1,81 @@
+import { FunctionComponent } from 'react';
+import Message from '@patternfly/chatbot/dist/dynamic/Message';
+import { CopyIcon, WrenchIcon } from '@patternfly/react-icons';
+
+export const MessageWithQuickResponsesExample: FunctionComponent = () => (
+  <>
+    <Message
+      name="Bot"
+      role="bot"
+      content="Did you clear your cache?"
+      quickResponses={[
+        { id: '1', content: 'Yes', onClick: () => alert('Clicked yes') },
+        { id: '2', content: 'No', onClick: () => alert('Clicked no') }
+      ]}
+    />
+    <Message
+      name="Bot"
+      role="bot"
+      content="What browser are you noticing the issue in?"
+      quickResponses={[
+        { id: '1', content: 'Microsoft Edge', onClick: () => alert('Clicked Edge') },
+        { id: '2', content: 'Google Chrome', onClick: () => alert('Clicked Chrome') },
+        { id: '3', content: 'Mozilla Firefox', onClick: () => alert('Clicked Firefox') },
+        { id: '4', content: 'Apple Safari', onClick: () => alert('Clicked Safari') },
+        { id: '5', content: 'Internet Explorer', onClick: () => alert('Clicked Internet Explorer') }
+      ]}
+    />
+    <Message
+      name="Bot"
+      role="bot"
+      content="Welcome back, User! How can I help you today?"
+      quickResponses={[
+        { id: '1', content: 'Help me with an access issue', onClick: () => alert('Clicked id 1') },
+        { id: '2', content: 'Show my critical vulnerabilities', onClick: () => alert('Clicked id 2') },
+        { id: '3', content: 'Create new integrations', onClick: () => alert('Clicked id 3') },
+        { id: '4', content: 'Get recommendations from an advisor', onClick: () => alert('Clicked id 4') },
+        { id: '5', content: 'Something else', onClick: () => alert('Clicked id 5') }
+      ]}
+    />
+    <Message
+      name="Bot"
+      role="bot"
+      content="Did you clear your cache?"
+      quickResponses={[
+        { id: '1', content: 'Yes', isDisabled: true },
+        { id: '2', content: 'No', onClick: () => alert('Clicked no') }
+      ]}
+    />
+    <Message
+      name="Bot"
+      role="bot"
+      content="Welcome back, User! How can I help you today?"
+      quickResponses={[
+        { id: '1', content: 'Help me with an access issue', onClick: () => alert('Clicked id 1') },
+        { id: '2', content: 'Show my critical vulnerabilities', onClick: () => alert('Clicked id 2') },
+        { id: '3', content: 'Create new integrations', onClick: () => alert('Clicked id 3') },
+        { id: '4', content: 'Get recommendations from an advisor', onClick: () => alert('Clicked id 4') },
+        { id: '5', content: 'Something else', onClick: () => alert('Clicked id 5') }
+      ]}
+    />
+    <Message
+      name="Bot"
+      role="bot"
+      content="Example with compact responses"
+      quickResponses={[
+        { id: '1', content: 'Yes', onClick: () => alert('Clicked id 1') },
+        { id: '2', content: 'No', onClick: () => alert('Clicked id 2') }
+      ]}
+      isCompact
+    />
+    <Message
+      name="Bot"
+      role="bot"
+      content="Example with icons"
+      quickResponses={[
+        { id: '1', content: 'Update your settings', onClick: () => alert('Clicked yes'), icon: <WrenchIcon /> },
+        { id: '2', content: 'Copy', onClick: () => alert('Clicked no'), icon: <CopyIcon /> }
+      ]}
+    />
+  </>
+);

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

@@ -0,0 +1,38 @@
+import { FunctionComponent } from 'react';
+import Message from '@patternfly/chatbot/dist/dynamic/Message';
+import { explorePipelinesQuickStart } from './explore-pipeline-quickstart.ts';
+import { monitorSampleAppQuickStart } from '@patternfly/chatbot/src/Message/QuickStarts/monitor-sampleapp-quickstart.ts';
+import { QuickStart } from '@patternfly/chatbot/dist/esm/Message/QuickStarts/types';
+
+export const MessageWithQuickStartExample: FunctionComponent = () => (
+  <>
+    <Message
+      name="Bot"
+      role="bot"
+      content="Follow this quick guide to install the Pipelines Operator."
+      quickStarts={{
+        quickStart: explorePipelinesQuickStart as QuickStart,
+        onSelectQuickStart: (id) => alert(id)
+      }}
+    />
+    <Message
+      name="Bot"
+      role="bot"
+      content="This quick start tile includes prerequisites and a default icon."
+      quickStarts={{
+        quickStart: monitorSampleAppQuickStart,
+        onSelectQuickStart: (id) => alert(id)
+      }}
+    />
+    <Message
+      name="Bot"
+      role="bot"
+      content="This quick start tile is compact"
+      quickStarts={{
+        quickStart: monitorSampleAppQuickStart,
+        onSelectQuickStart: (id) => alert(id)
+      }}
+      isCompact
+    />
+  </>
+);

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

@@ -0,0 +1,43 @@
+import { FunctionComponent } from 'react';
+
+import Message from '@patternfly/chatbot/dist/dynamic/Message';
+
+export const ResponseActionExample: FunctionComponent = () => (
+  <>
+    <Message
+      name="Bot"
+      role="bot"
+      content="I updated your account with those settings. You're ready to set up your first dashboard!"
+      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') }
+      }}
+    />
+    <Message
+      name="Bot"
+      role="bot"
+      showActionsOnInteraction
+      content="This message has response actions visually hidden until you hover over the message via mouse, or an action would receive focus via keyboard."
+      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') }
+      }}
+    />
+  </>
+);

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

@@ -0,0 +1,273 @@
+import { FunctionComponent, MouseEvent as ReactMouseEvent, KeyboardEvent as ReactKeyboardEvent } from 'react';
+import Message from '@patternfly/chatbot/dist/dynamic/Message';
+import { Button, Flex, FlexItem, Label, Popover } from '@patternfly/react-core';
+import { OutlinedQuestionCircleIcon } from '@patternfly/react-icons';
+
+export const MessageWithSourcesExample: FunctionComponent = () => {
+  const onSetPage = (_event: ReactMouseEvent | ReactKeyboardEvent | MouseEvent, newPage: number) => {
+    // eslint-disable-next-line no-console
+    console.log(`Page changed to ${newPage}`);
+  };
+
+  const date = new Date();
+
+  const datePart = date.toLocaleDateString('en', {
+    year: 'numeric',
+    month: 'short',
+    day: 'numeric'
+  });
+
+  const timePart = date.toLocaleTimeString('en', {
+    hour: '2-digit',
+    minute: '2-digit',
+    hour12: true
+  });
+
+  const formattedDate = `${datePart}, ${timePart}`;
+
+  return (
+    <>
+      <Message
+        name="Bot"
+        role="bot"
+        content="This example has a custom subtitle and footer with no pagination"
+        sources={{
+          sources: [
+            {
+              title: 'Getting started with Red Hat OpenShift',
+              subtitle: 'Red Hat knowledge base',
+              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 ...',
+              isExternal: true,
+              footer: (
+                <Flex className="pf-chatbot__sources-card-subtle" gap={{ default: 'gapXs' }}>
+                  <FlexItem alignSelf={{ default: 'alignSelfStretch' }}>
+                    <Flex justifyContent={{ default: 'justifyContentSpaceBetween' }}>
+                      <FlexItem>
+                        <Label color="green">Confidence 93%</Label>
+                      </FlexItem>
+                      <FlexItem>
+                        <Popover
+                          headerContent={
+                            <Flex gap={{ default: 'gapXs' }}>
+                              <FlexItem>
+                                <OutlinedQuestionCircleIcon />
+                              </FlexItem>
+                              <FlexItem>Why this confidence score?</FlexItem>
+                            </Flex>
+                          }
+                          bodyContent={
+                            <>
+                              A high confidence score indicates a strong match. The system found significant overlap in
+                              key data points, including text content, names, dates, and organizational details, with a
+                              high degree of certainty. This match is highly reliable.
+                            </>
+                          }
+                        >
+                          <Button variant="link" icon={<OutlinedQuestionCircleIcon />}>
+                            Learn about this score
+                          </Button>
+                        </Popover>
+                      </FlexItem>
+                    </Flex>
+                  </FlexItem>
+                  <FlexItem>{`Last updated: ${formattedDate}`}</FlexItem>
+                </Flex>
+              )
+            }
+          ]
+        }}
+      />
+      <Message
+        name="Bot"
+        role="bot"
+        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 ...',
+              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 ...',
+              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 ...',
+              isExternal: true
+            }
+          ],
+          onSetPage
+        }}
+      />
+      <Message
+        name="Bot"
+        role="bot"
+        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"
+        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 ...',
+              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 ...',
+              isExternal: true
+            }
+          ],
+          onSetPage
+        }}
+      />
+      <Message
+        name="Bot"
+        role="bot"
+        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 ...',
+              isExternal: true
+            }
+          ],
+          onSetPage
+        }}
+      />
+      <Message
+        name="Bot"
+        role="bot"
+        content="This example has a title and no body description:"
+        sources={{
+          sources: [
+            { title: 'Getting started with Red Hat OpenShift', link: '#', isExternal: true },
+            {
+              title: 'Azure Red Hat OpenShift documentation',
+              link: '#',
+              isExternal: true
+            },
+            {
+              title: 'OKD Documentation: Home',
+              link: '#',
+              isExternal: true
+            }
+          ],
+          onSetPage
+        }}
+      />
+      <Message
+        name="Bot"
+        role="bot"
+        content="This example displays the source as a link, without a title (not recommended)"
+        sources={{
+          sources: [
+            {
+              link: '#'
+            },
+            {
+              link: '#'
+            },
+            {
+              link: '#'
+            }
+          ],
+          onSetPage
+        }}
+      />
+      <Message
+        name="Bot"
+        role="bot"
+        content="This example displays a compact sources card"
+        sources={{
+          sources: [
+            {
+              link: '#'
+            },
+            {
+              link: '#'
+            },
+            {
+              link: '#'
+            }
+          ],
+          onSetPage
+        }}
+        isCompact
+      />
+
+      <Message
+        name="Bot"
+        role="bot"
+        content="This example demonstrates the non-paginated layout option. When enabled, all source cards are displayed in a flex layout that wraps automatically based on available space:"
+        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.',
+              isExternal: true,
+              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.',
+              isExternal: true
+            },
+            {
+              title: 'OKD Documentation: Home',
+              link: '#',
+              body: 'OKD is a distribution of Kubernetes optimized for continuous application development and multi-tenant deployment.',
+              isExternal: true
+            },
+            {
+              title: 'Red Hat OpenShift Container Platform',
+              link: '#',
+              body: 'Red Hat OpenShift Container Platform is a Kubernetes platform that provides a cloud-like experience anywhere it is deployed.',
+              isExternal: true
+            }
+          ],
+          layout: 'wrap'
+        }}
+      />
+    </>
+  );
+};

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

@@ -0,0 +1,54 @@
+import { FunctionComponent, useState } from 'react';
+import Message from '@patternfly/chatbot/dist/dynamic/Message';
+import { Checkbox, Flex, FlexItem } from '@patternfly/react-core';
+
+export const MessageWithToolCallExample: FunctionComponent = () => {
+  const [toolCallsAreLoading, setToolCallsAreLoading] = useState(false);
+  return (
+    <Flex direction={{ default: 'column' }} spaceItems={{ default: 'spaceItemsXl' }}>
+      <Checkbox
+        label="Tool calls are loading"
+        id="tool-calls-are-loading"
+        isChecked={toolCallsAreLoading}
+        onChange={() => {
+          setToolCallsAreLoading(!toolCallsAreLoading);
+        }}
+      />
+      <FlexItem>
+        <Message
+          name="Bot"
+          role="bot"
+          content="This example has a static tool call title:"
+          toolCall={{
+            titleText: "Calling 'awesome_tool'",
+            loadingText: "Loading 'awesome_tool'",
+            isLoading: toolCallsAreLoading
+          }}
+        />
+        <Message
+          name="Bot"
+          role="bot"
+          content="This example has an expandable tool call title, with an additional description:"
+          toolCall={{
+            titleText: "Calling 'awesome_tool_expansion'",
+            expandableContent: 'This is the expandable content for the tool call.',
+            isLoading: toolCallsAreLoading,
+            loadingText: "Loading 'awesome_tool_expansion'"
+          }}
+        />
+        <Message
+          name="Bot"
+          role="bot"
+          content="This example has an expandable tool call that is expanded by default:"
+          toolCall={{
+            isDefaultExpanded: true,
+            titleText: "Calling 'awesome_tool_expansion'",
+            expandableContent: 'This is the expandable content for the tool call.',
+            isLoading: toolCallsAreLoading,
+            loadingText: "Loading 'awesome_tool_expansion'"
+          }}
+        />
+      </FlexItem>
+    </Flex>
+  );
+};