@patternfly/chatbot 6.9.0-prerelease.1 → 6.9.0-prerelease.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/chatbot",
-  "version": "6.9.0-prerelease.1",
+  "version": "6.9.0-prerelease.3",
   "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",
@@ -35,13 +35,13 @@
   "dependencies": {
     "@patternfly/react-code-editor": "^6.6.0",
     "@patternfly/react-core": "^6.6.0",
-    "@patternfly/react-icons": "^6.6.0",
+    "@patternfly/react-icons": "6.6.1-prerelease.2",
     "@patternfly/react-styles": "^6.6.0",
     "@patternfly/react-table": "^6.6.0",
     "@segment/analytics-next": "^1.76.0",
     "clsx": "^2.1.0",
     "path-browserify": "^1.0.1",
-    "posthog-js": "^1.194.4",
+    "posthog-js": "^1.298.0",
     "react-markdown": "^9.0.1",
     "rehype-external-links": "^3.0.0",
     "rehype-highlight": "^7.0.0",

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

@@ -49,6 +49,7 @@ Explore our documentation, which covers both the components you'll need to build
     - [Primary color background](/extensions/chatbot/overview/demo#primary-color-background)
     - [Display mode switcher](/extensions/chatbot/overview/demo#display-mode-switcher)
     - [Chat transcripts](/extensions/chatbot/overview/demo#chat-transcripts)
+    - [Canvas](/patterns/canvas/demo)
 - [Analytics](/extensions/chatbot/analytics): Tracking for ChatBot interactions
 - [Customizing messages](/extensions/chatbot/customizing-messages): Details for the implementation of custom messages
 - [Tree-shaking](/extensions/chatbot/tree-shaking): Bundle size optimization and import best practices

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

@@ -98,7 +98,7 @@ When using the providers, you might need to add additional dependencies to your
 ```nolive
 "dependencies": {
   "@segment/analytics-next": "^1.76.0",
-  "posthog-js": "^1.194.4"
+  "posthog-js": "^1.298.0"
 ```
 
 Depending on your local setup, this might not be necessary. For example, if you pull the ChatBot codebase as a dependency into your project, you don't need to add it as an additional dependency in your package.json.

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

@@ -78,6 +78,37 @@ export const MessageWithSourcesExample: FunctionComponent = () => {
           ]
         }}
       />
+      <Message
+        name="Bot"
+        role="bot"
+        content="This example has a PatternFly label above the title:"
+        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,
+              headerContent: <Label>Documentation</Label>
+            },
+            {
+              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,
+              headerContent: <Label>Knowledge base</Label>
+            },
+            {
+              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,
+              headerContent: <Label>Tutorial</Label>
+            }
+          ],
+          onSetPage
+        }}
+      />
       <Message
         name="Bot"
         role="bot"

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

@@ -237,6 +237,8 @@ If a source will open outside of the ChatBot window, add an external link icon v
 
 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.
 
+To display extra content above a source title, such as a [PatternFly label](/components/label), pass `headerContent`.
+
 ```js file="./MessageWithSources.tsx"
 
 ```

package/patternfly-docs/content/extensions/chatbot/examples/demos/Canvas.md

@@ -0,0 +1,110 @@
+---
+id: Canvas
+section: patterns
+source: demo
+---
+
+import { useState, useRef, useCallback, useEffect, FunctionComponent, ReactNode } from 'react';
+import {
+Brand,
+Divider,
+Drawer,
+DrawerActions,
+DrawerCloseButton,
+DrawerContent,
+DrawerContentBody,
+DrawerHead,
+DrawerPanelContent,
+DropdownItem,
+DropdownList,
+Flex,
+FlexItem,
+Label,
+MenuToggle,
+Popover,
+Select,
+SelectList,
+SelectOption,
+Title,
+Tooltip
+} from '@patternfly/react-core';
+import { CodeEditor, CodeEditorControl, Language } from '@patternfly/react-code-editor';
+import Chatbot, { ChatbotDisplayMode } from '@patternfly/chatbot/dist/dynamic/Chatbot';
+import ChatbotContent from '@patternfly/chatbot/dist/dynamic/ChatbotContent';
+import ChatbotFooter, { ChatbotFootnote } from '@patternfly/chatbot/dist/dynamic/ChatbotFooter';
+import MessageBar from '@patternfly/chatbot/dist/dynamic/MessageBar';
+import MessageBox from '@patternfly/chatbot/dist/dynamic/MessageBox';
+import Message from '@patternfly/chatbot/dist/dynamic/Message';
+import ChatbotConversationHistoryNav from '@patternfly/chatbot/dist/dynamic/ChatbotConversationHistoryNav';
+import ChatbotHeader, {
+ChatbotHeaderActions,
+ChatbotHeaderCloseButton,
+ChatbotHeaderMain,
+ChatbotHeaderMenu,
+ChatbotHeaderTitle
+} from '@patternfly/chatbot/dist/dynamic/ChatbotHeader';
+import RhUiImageFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-image-fill-icon';
+import RhUiAddIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-add-icon';
+import RhUiTaskFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-task-fill-icon';
+import RhUiNotificationFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-notification-fill-icon';
+import RhUiCalendarFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-calendar-fill-icon';
+import RhUiExportIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-export-icon';
+import RhUiRedoIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-redo-icon';
+import RhUiUndoIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-undo-icon';
+import RhUiServerUploadFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-server-upload-fill-icon';
+import RhUiAiEditIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-ai-edit-icon';
+import RhUiAiInfoIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-ai-info-icon';
+import { useDropzone } from 'react-dropzone';
+import PFIconLogoColor from '../UI/PF-IconLogo-Color.svg';
+import PFIconLogoReverse from '../UI/PF-IconLogo-Reverse.svg';
+import userAvatar from '../Messages/user_avatar.svg';
+
+**Canvas** lets users work with generated or editable content alongside a conversation. Canvas content is fully flexible, allowing you to render any content suitable for your use case. It is recommended to only utilize canvas mode with a fullscreen Chatbot.
+
+## Composable structure
+
+When utilizing a canvas layout, it's recommended to use a PatternFly [drawer](/components/drawer). You must apply the `pf-chatbot__canvas*` classes from `@patternfly/chatbot` so the drawer matches ChatBot backgrounds and fills the fullscreen layout.
+
+The general recommended structure is as follows:
+
+```noLive
+<Chatbot displayMode={ChatbotDisplayMode.fullscreen}>
+  <div className="pf-chatbot__canvas">
+    <Drawer className="pf-chatbot__canvas-drawer" isExpanded={...} isInline position="end">
+      <DrawerContent panelContent={/* CodeEditor or other canvas content */}>
+        <DrawerContentBody className="pf-chatbot__canvas-body">
+          <div className="pf-chatbot__canvas-column">
+            <ChatbotHeader .../>
+            <ChatbotContent ... />
+            <ChatbotFooter ... >
+          </div>
+        </DrawerContentBody>
+      </DrawerContent>
+    </Drawer>
+  </div>
+</Chatbot>
+```
+
+## Class names
+
+| Class name | Purpose |
+| --- | --- |
+| `pf-chatbot__canvas` | Container for the fullscreen canvas layout and its background. |
+| `pf-chatbot__canvas-drawer` | Styles the drawer that contains the canvas panel. |
+| `pf-chatbot__canvas-section` | Styles the section used within the drawer for focus. |
+| `pf-chatbot__canvas-body` | Ensures the drawer content body fills the available height. |
+| `pf-chatbot__canvas-column` | Arranges the canvas header, content, and footer vertically. |
+| `pf-chatbot__canvas-panel` | Styles the canvas drawer panel and removes the default panel spacing. |
+| `pf-chatbot__canvas-panel-body` | Provides the canvas panel content area and its spacing. |
+| `pf-chatbot__canvas-head` | Styles and positions the canvas panel header and close action. |
+| `pf-chatbot__canvas-editor` | Makes the code editor fill the available canvas space. |
+
+## Demos
+
+### With code editor
+
+This demo shows canvas mode being used to render a PatternFly [code editor](/components/code-editor). Canvas mode is launched by clicking a file chip below a message or the "Canvas" label below the message bar. You can also enable or disable canvas mode from the attach menu and dismiss the label to exit canvas mode.
+
+```js file="./Canvas.tsx" isFullscreen
+
+```