@patternfly/chatbot 2.2.0-prerelease.39 → 2.2.0-prerelease.40

package/dist/cjs/SourcesCard/SourcesCard.d.ts

@@ -14,6 +14,7 @@ export interface SourcesCardProps extends CardProps {
         title?: string;
         link: string;
         body?: React.ReactNode | string;
+        isExternal?: boolean;
     }[];
     /** Label for the English word "source" */
     sourceWord?: string;

package/dist/cjs/SourcesCard/SourcesCard.js

@@ -20,6 +20,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importDefault(require("react"));
 // Import PatternFly components
 const react_core_1 = require("@patternfly/react-core");
+const react_icons_1 = require("@patternfly/react-icons");
 const SourcesCard = (_a) => {
     var { className, isDisabled, ofWord = 'of', paginationAriaLabel = 'Pagination', sources, sourceWord = 'source', sourceWordPlural = 'sources', toNextPageAriaLabel = 'Go to next page', toPreviousPageAriaLabel = 'Go to previous page', onNextClick, onPreviousClick, onSetPage } = _a, props = __rest(_a, ["className", "isDisabled", "ofWord", "paginationAriaLabel", "sources", "sourceWord", "sourceWordPlural", "toNextPageAriaLabel", "toPreviousPageAriaLabel", "onNextClick", "onPreviousClick", "onSetPage"]);
     const [page, setPage] = react_1.default.useState(1);
@@ -37,7 +38,7 @@ const SourcesCard = (_a) => {
         react_1.default.createElement("span", null, (0, react_core_1.pluralize)(sources.length, sourceWord, sourceWordPlural)),
         react_1.default.createElement(react_core_1.Card, Object.assign({ className: "pf-chatbot__sources-card" }, props),
             react_1.default.createElement(react_core_1.CardTitle, { className: "pf-chatbot__sources-card-title" },
-                react_1.default.createElement("a", { href: sources[page - 1].link }, renderTitle(sources[page - 1].title))),
+                react_1.default.createElement(react_core_1.Button, { component: "a", variant: react_core_1.ButtonVariant.link, href: sources[page - 1].link, icon: sources[page - 1].isExternal ? react_1.default.createElement(react_icons_1.ExternalLinkSquareAltIcon, null) : undefined, iconPosition: "end", isInline: true, rel: sources[page - 1].isExternal ? 'noreferrer' : undefined, target: sources[page - 1].isExternal ? '_blank' : undefined }, renderTitle(sources[page - 1].title))),
             sources[page - 1].body && (react_1.default.createElement(react_core_1.CardBody, { className: `pf-chatbot__sources-card-body ${sources.length === 1 && 'pf-chatbot__sources-card-no-footer'}` }, sources[page - 1].body)),
             sources.length > 1 && (react_1.default.createElement(react_core_1.CardFooter, { className: "pf-chatbot__sources-card-footer-container" },
                 react_1.default.createElement("div", { className: "pf-chatbot__sources-card-footer" },

package/dist/cjs/SourcesCard/SourcesCard.test.js

@@ -18,10 +18,6 @@ const user_event_1 = __importDefault(require("@testing-library/user-event"));
 require("@testing-library/jest-dom");
 const SourcesCard_1 = __importDefault(require("./SourcesCard"));
 describe('SourcesCard', () => {
-    it('should render card', () => {
-        const { container } = (0, react_2.render)(react_1.default.createElement(SourcesCard_1.default, { sources: [{ link: '' }] }));
-        expect(container).toMatchSnapshot();
-    });
     it('should render card correctly if one source with only a link is passed in', () => {
         (0, react_2.render)(react_1.default.createElement(SourcesCard_1.default, { sources: [{ link: '' }] }));
         expect(react_2.screen.getByText('1 source')).toBeTruthy();

package/dist/esm/SourcesCard/SourcesCard.d.ts

@@ -14,6 +14,7 @@ export interface SourcesCardProps extends CardProps {
         title?: string;
         link: string;
         body?: React.ReactNode | string;
+        isExternal?: boolean;
     }[];
     /** Label for the English word "source" */
     sourceWord?: string;

package/dist/esm/SourcesCard/SourcesCard.js

@@ -15,6 +15,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 import React from 'react';
 // Import PatternFly components
 import { Button, ButtonVariant, Card, CardBody, CardFooter, CardTitle, Icon, pluralize, Truncate } from '@patternfly/react-core';
+import { ExternalLinkSquareAltIcon } from '@patternfly/react-icons';
 const SourcesCard = (_a) => {
     var { className, isDisabled, ofWord = 'of', paginationAriaLabel = 'Pagination', sources, sourceWord = 'source', sourceWordPlural = 'sources', toNextPageAriaLabel = 'Go to next page', toPreviousPageAriaLabel = 'Go to previous page', onNextClick, onPreviousClick, onSetPage } = _a, props = __rest(_a, ["className", "isDisabled", "ofWord", "paginationAriaLabel", "sources", "sourceWord", "sourceWordPlural", "toNextPageAriaLabel", "toPreviousPageAriaLabel", "onNextClick", "onPreviousClick", "onSetPage"]);
     const [page, setPage] = React.useState(1);
@@ -32,7 +33,7 @@ const SourcesCard = (_a) => {
         React.createElement("span", null, pluralize(sources.length, sourceWord, sourceWordPlural)),
         React.createElement(Card, Object.assign({ className: "pf-chatbot__sources-card" }, props),
             React.createElement(CardTitle, { className: "pf-chatbot__sources-card-title" },
-                React.createElement("a", { href: sources[page - 1].link }, renderTitle(sources[page - 1].title))),
+                React.createElement(Button, { component: "a", variant: ButtonVariant.link, href: sources[page - 1].link, icon: sources[page - 1].isExternal ? React.createElement(ExternalLinkSquareAltIcon, null) : undefined, iconPosition: "end", isInline: true, rel: sources[page - 1].isExternal ? 'noreferrer' : undefined, target: sources[page - 1].isExternal ? '_blank' : undefined }, renderTitle(sources[page - 1].title))),
             sources[page - 1].body && (React.createElement(CardBody, { className: `pf-chatbot__sources-card-body ${sources.length === 1 && 'pf-chatbot__sources-card-no-footer'}` }, sources[page - 1].body)),
             sources.length > 1 && (React.createElement(CardFooter, { className: "pf-chatbot__sources-card-footer-container" },
                 React.createElement("div", { className: "pf-chatbot__sources-card-footer" },

package/dist/esm/SourcesCard/SourcesCard.test.js

@@ -13,10 +13,6 @@ import userEvent from '@testing-library/user-event';
 import '@testing-library/jest-dom';
 import SourcesCard from './SourcesCard';
 describe('SourcesCard', () => {
-    it('should render card', () => {
-        const { container } = render(React.createElement(SourcesCard, { sources: [{ link: '' }] }));
-        expect(container).toMatchSnapshot();
-    });
     it('should render card correctly if one source with only a link is passed in', () => {
         render(React.createElement(SourcesCard, { sources: [{ link: '' }] }));
         expect(screen.getByText('1 source')).toBeTruthy();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/chatbot",
-  "version": "2.2.0-prerelease.39",
+  "version": "2.2.0-prerelease.40",
   "description": "This library provides React components based on PatternFly 6 that can be used to build chatbots.",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",

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

@@ -20,17 +20,20 @@ export const MessageWithSourcesExample: React.FunctionComponent = () => {
             {
               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
@@ -46,12 +49,14 @@ export const MessageWithSourcesExample: React.FunctionComponent = () => {
             {
               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
@@ -67,7 +72,8 @@ export const MessageWithSourcesExample: React.FunctionComponent = () => {
             {
               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
@@ -80,14 +86,16 @@ export const MessageWithSourcesExample: React.FunctionComponent = () => {
         content="Example with sources that include a title and link"
         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

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

@@ -142,6 +142,8 @@ 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.
 
+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. The title is limited to 1 line and the body is limited to 2 lines.
 
 ```js file="./MessageWithSources.tsx"

package/src/SourcesCard/SourcesCard.test.tsx

@@ -5,11 +5,6 @@ import '@testing-library/jest-dom';
 import SourcesCard from './SourcesCard';
 
 describe('SourcesCard', () => {
-  it('should render card', () => {
-    const { container } = render(<SourcesCard sources={[{ link: '' }]} />);
-    expect(container).toMatchSnapshot();
-  });
-
   it('should render card correctly if one source with only a link is passed in', () => {
     render(<SourcesCard sources={[{ link: '' }]} />);
     expect(screen.getByText('1 source')).toBeTruthy();

package/src/SourcesCard/SourcesCard.tsx

@@ -16,6 +16,7 @@ import {
   pluralize,
   Truncate
 } from '@patternfly/react-core';
+import { ExternalLinkSquareAltIcon } from '@patternfly/react-icons';
 
 export interface SourcesCardProps extends CardProps {
   /** Additional classes for the pagination navigation container. */
@@ -27,7 +28,7 @@ export interface SourcesCardProps extends CardProps {
   /** Accessible label for the pagination component. */
   paginationAriaLabel?: string;
   /** Content rendered inside the paginated card */
-  sources: { title?: string; link: string; body?: React.ReactNode | string }[];
+  sources: { title?: string; link: string; body?: React.ReactNode | string; isExternal?: boolean }[];
   /** Label for the English word "source" */
   sourceWord?: string;
   /** Plural for sourceWord */
@@ -78,7 +79,18 @@ const SourcesCard: React.FunctionComponent<SourcesCardProps> = ({
       <span>{pluralize(sources.length, sourceWord, sourceWordPlural)}</span>
       <Card className="pf-chatbot__sources-card" {...props}>
         <CardTitle className="pf-chatbot__sources-card-title">
-          <a href={sources[page - 1].link}>{renderTitle(sources[page - 1].title)}</a>
+          <Button
+            component="a"
+            variant={ButtonVariant.link}
+            href={sources[page - 1].link}
+            icon={sources[page - 1].isExternal ? <ExternalLinkSquareAltIcon /> : undefined}
+            iconPosition="end"
+            isInline
+            rel={sources[page - 1].isExternal ? 'noreferrer' : undefined}
+            target={sources[page - 1].isExternal ? '_blank' : undefined}
+          >
+            {renderTitle(sources[page - 1].title)}
+          </Button>
         </CardTitle>
         {sources[page - 1].body && (
           <CardBody

package/src/SourcesCard/__snapshots__/SourcesCard.test.tsx.snap

@@ -1,34 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`SourcesCard should render card 1`] = `
-<div>
-  <div
-    class="pf-chatbot__source"
-  >
-    <span>
-      1 source
-    </span>
-    <div
-      class="pf-v6-c-card pf-chatbot__sources-card"
-      data-ouia-component-id="OUIA-Generated-Card-1"
-      data-ouia-component-type="PF6/Card"
-      data-ouia-safe="true"
-      id=""
-    >
-      <div
-        class="pf-v6-c-card__title"
-      >
-        <div
-          class="pf-v6-c-card__title-text pf-chatbot__sources-card-title"
-        >
-          <a
-            href=""
-          >
-            Source 1
-          </a>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;