diff --git a/packages/module/patternfly-docs/content/extensions/chatbot/chatbot.md b/packages/module/patternfly-docs/content/extensions/chatbot/chatbot.md index ff4f4fc4..cf4634fc 100644 --- a/packages/module/patternfly-docs/content/extensions/chatbot/chatbot.md +++ b/packages/module/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 diff --git a/packages/module/patternfly-docs/content/extensions/chatbot/examples/demos/Canvas.md b/packages/module/patternfly-docs/content/extensions/chatbot/examples/demos/Canvas.md new file mode 100644 index 00000000..e7fd7b35 --- /dev/null +++ b/packages/module/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 + +
+ + + +
+ + + +
+ + + +
+ +``` + +## 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 + +``` diff --git a/packages/module/patternfly-docs/content/extensions/chatbot/examples/demos/Canvas.tsx b/packages/module/patternfly-docs/content/extensions/chatbot/examples/demos/Canvas.tsx new file mode 100644 index 00000000..a4a03670 --- /dev/null +++ b/packages/module/patternfly-docs/content/extensions/chatbot/examples/demos/Canvas.tsx @@ -0,0 +1,609 @@ +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, { MessageProps } from '@patternfly/chatbot/dist/dynamic/Message'; +import ChatbotConversationHistoryNav, { + Conversation +} from '@patternfly/chatbot/dist/dynamic/ChatbotConversationHistoryNav'; +import ChatbotHeader, { + ChatbotHeaderActions, + ChatbotHeaderCloseButton, + ChatbotHeaderMain, + ChatbotHeaderMenu, + ChatbotHeaderTitle +} from '@patternfly/chatbot/dist/dynamic/ChatbotHeader'; +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 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 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 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 { 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'; +import '@patternfly/react-core/dist/styles/base.css'; +import '@patternfly/chatbot/dist/css/main.css'; + +const sampleCode = `apiVersion: v1 +kind: ConfigMap +metadata: + name: canvas-demo +data: + greeting: Hello, how can I help you today? +`; + +const date = new Date(); + +const initialMessages: MessageProps[] = [ + { + id: '1', + role: 'bot', + content: 'How can I help?', + name: 'Bot', + timestamp: date.toLocaleString() + }, + { + id: '2', + role: 'user', + content: 'I want to live edit YAML code using canvas mode', + name: 'You', + avatar: userAvatar, + avatarProps: { isBordered: true }, + timestamp: date.toLocaleString() + }, + { + id: '3', + role: 'bot', + content: 'The canvas mode text editor is ready. Edit, share or ask me to change something for you.', + name: 'Bot', + timestamp: date.toLocaleString(), + attachments: [{ name: 'canvas mode.yaml', id: 'canvas-mode' }] + } +]; + +const initialConversations = { + Today: [{ id: '1', text: 'I want to live edit YAML code using canvas mode' }], + 'This month': [ + { id: '2', text: 'Enterprise Linux installation and setup' }, + { id: '3', text: 'Troubleshoot system crash' } + ] +}; + +const footnoteProps = { + label: 'Always review AI-generated content prior to use.' +}; + +const modelOptions = ['GPT-4', 'GPT-3.5', 'Claude', 'Llama 2']; + +interface CanvasEditor { + trigger: (source: string, handlerId: string, payload?: unknown) => void; +} + +const iconLogo = ( + <> + + + +); + +export const Canvas: FunctionComponent = () => { + const [messages, setMessages] = useState(initialMessages); + const [announcement, setAnnouncement] = useState(); + const [isSendButtonDisabled, setIsSendButtonDisabled] = useState(false); + const [isAttachMenuOpen, setIsAttachMenuOpen] = useState(false); + const [isModelSelectOpen, setIsModelSelectOpen] = useState(false); + const [selectedModel, setSelectedModel] = useState('GPT-4'); + const [showCanvasLabel, setShowCanvasLabel] = useState(true); + const [isCanvasOpen, setIsCanvasOpen] = useState(true); + const [isGeneratedAiPopoverOpen, setIsGeneratedAiPopoverOpen] = useState(false); + const [isDrawerOpen, setIsDrawerOpen] = useState(false); + const [chatbotVisible, setChatbotVisible] = useState(true); + const [conversations, setConversations] = useState( + initialConversations + ); + const [code, setCode] = useState(sampleCode); + const scrollToBottomRef = useRef(null); + const historyRef = useRef(null); + const editorRef = useRef(null); + const messageInputRef = useRef(null); + const messageActionsRef = useRef(null); + const canvasSectionRef = useRef(null); + const wasCanvasOpen = useRef(isCanvasOpen); + const shouldFocusCanvasCloseButton = useRef(false); + const displayMode = ChatbotDisplayMode.fullscreen; + + const { open, getInputProps } = useDropzone({ + multiple: true, + // eslint-disable-next-line no-console + onDropAccepted: () => console.log('fileUploaded') + }); + + const generateId = () => { + const id = Date.now() + Math.random(); + return id.toString(); + }; + + const handleSend = useCallback( + (input: string) => { + const date = new Date(); + const newMessages: MessageProps[] = []; + messages.forEach((message) => newMessages.push(message)); + newMessages.push({ + avatar: userAvatar, + avatarProps: { isBordered: true }, + id: generateId(), + name: 'You', + role: 'user', + content: input, + timestamp: `${date?.toLocaleDateString()} ${date?.toLocaleTimeString()}` + }); + newMessages.push({ + id: generateId(), + name: 'Bot', + role: 'bot', + timestamp: `${date?.toLocaleDateString()} ${date?.toLocaleTimeString()}`, + isLoading: true + }); + setMessages(newMessages); + setAnnouncement(`Message from You: ${input}. Message from Bot is loading.`); + setIsSendButtonDisabled(true); + + setTimeout(() => { + const loadedMessages: MessageProps[] = []; + newMessages.forEach((message) => loadedMessages.push(message)); + loadedMessages.pop(); + loadedMessages.push({ + id: generateId(), + role: 'bot', + content: 'API response from Bot goes here', + name: 'Bot', + isLoading: false, + 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') } + }, + timestamp: date.toLocaleString() + }); + setMessages(loadedMessages); + setAnnouncement('Message from Bot: API response goes here'); + setIsSendButtonDisabled(false); + }, 5000); + }, + [messages] + ); + + useEffect(() => { + if (messages.length > 3) { + scrollToBottomRef.current?.scrollIntoView(); + } + }, [messages]); + + const onModelSelect = ( + _event: React.MouseEvent | undefined, + value: string | number | undefined + ) => { + setSelectedModel(value as string); + setIsModelSelectOpen(false); + }; + + const openCanvas = () => { + setShowCanvasLabel(true); + setIsCanvasOpen(true); + }; + + const closeCanvasMode = () => { + setShowCanvasLabel(false); + setIsCanvasOpen(false); + window.requestAnimationFrame(() => messageInputRef.current?.focus()); + }; + + const focusCanvasSection = () => { + canvasSectionRef.current?.focus(); + }; + + useEffect(() => { + const wasClosed = !wasCanvasOpen.current; + wasCanvasOpen.current = isCanvasOpen; + + if (isCanvasOpen && wasClosed) { + shouldFocusCanvasCloseButton.current = true; + } else if (!isCanvasOpen) { + shouldFocusCanvasCloseButton.current = false; + } + }, [isCanvasOpen]); + + const onCanvasExpand = () => { + if (shouldFocusCanvasCloseButton.current) { + shouldFocusCanvasCloseButton.current = false; + focusCanvasSection(); + } + }; + + const focusMessageActions = () => { + window.requestAnimationFrame(() => messageActionsRef.current?.focus()); + }; + + const handleGeneratedAiLabelKeyDown = (event: React.KeyboardEvent) => { + if (event.key === 'Enter' || event.key === ' ') { + event.preventDefault(); + event.currentTarget.click(); + } + }; + + const findMatchingItems = (targetValue: string) => { + let filteredConversations = Object.entries(initialConversations).reduce((acc, [key, items]) => { + const filteredItems = items.filter((item) => item.text.toLowerCase().includes(targetValue.toLowerCase())); + if (filteredItems.length > 0) { + acc[key] = filteredItems; + } + return acc; + }, {}); + + if (Object.keys(filteredConversations).length === 0) { + filteredConversations = [{ id: '13', noIcon: true, text: 'No results found' }]; + } + return filteredConversations; + }; + + const attachMenuItems: ReactNode = ( + <> + + }> + Alerts + + }> + Events + + }> + Logs + + + + + } onClick={open}> + Upload from computer + + }> + {`${isCanvasOpen ? 'Disable' : 'Enable'} canvas mode`} + + + + ); + + const customControls = [ + } + aria-label="Undo" + tooltipProps={{ + content: 'Undo', + // prevents VO announcements of both aria label and tooltip + aria: 'none' + }} + onClick={() => editorRef.current?.trigger('keyboard', 'undo', null)} + />, + } + aria-label="Redo" + tooltipProps={{ + content: 'Redo', + // prevents VO announcements of both aria label and tooltip + aria: 'none' + }} + onClick={() => editorRef.current?.trigger('keyboard', 'redo', null)} + />, + } + aria-label="Export" + tooltipProps={{ + content: 'Export', + // prevents VO announcements of both aria label and tooltip + aria: 'none' + }} + onClick={(value) => { + // eslint-disable-next-line no-console + console.log('Export', value); + }} + /> + ]; + + const panelContent = ( + +
+ + + + + Edit code + + + + + + + + What is canvas mode? + + } + bodyContent={ + <> +
+ This canvas is a collaborative workspace that blends AI-generated content with manual human edits. + You can accept an AI-generated baseline and immediately mold it with direct keystrokes, creating a + seamless partnership over a shared deliverable. +
+
Always review AI-generated code prior to use.
+ + } + onShow={() => setIsGeneratedAiPopoverOpen(true)} + onHide={() => setIsGeneratedAiPopoverOpen(false)} + > + + + + + + + + + + + + +
+
+ { + editorRef.current = editor; + }} + /> +
+
+
+ + ); + + return ( + <> + {/* This is required for react-dropzone to work in Safari and Firefox */} + + +
+ { + setIsDrawerOpen(!isDrawerOpen); + setConversations(initialConversations); + }} + isDrawerOpen={isDrawerOpen} + setIsDrawerOpen={setIsDrawerOpen} + activeItemId="1" + conversations={conversations} + drawerCloseButtonProps={{ 'aria-label': 'Close chat history' }} + onNewChat={() => { + setIsDrawerOpen(!isDrawerOpen); + setMessages([]); + setConversations(initialConversations); + }} + handleTextInputChange={(value: string) => { + if (value === '') { + setConversations(initialConversations); + } + const newConversations: { [key: string]: Conversation[] } = findMatchingItems(value); + setConversations(newConversations); + }} + drawerContent={ + + + +
+ + + setIsDrawerOpen(!isDrawerOpen)} + tooltipContent="Chat history" + menuAriaLabel="Chat history" + /> + {iconLogo} + + + setChatbotVisible(false)} + /> + + + + + {messages.map((message) => ( + ({ + ...attachment, + onClick: openCanvas + }))} + /> + ))} +
+ + + + { + // eslint-disable-next-line no-console + console.log('selected', value); + if (value === 'canvas') { + if (showCanvasLabel) { + closeCanvasMode(); + } else { + setShowCanvasLabel(true); + setIsCanvasOpen(true); + } + } + setIsAttachMenuOpen(false); + focusMessageActions(); + }, + onAttachMenuToggleClick: () => setIsAttachMenuOpen(!isAttachMenuOpen) + }} + buttonProps={{ + attach: { + innerRef: messageActionsRef, + icon: , + tooltipContent: 'Message actions', + 'aria-label': 'Message actions' + } + }} + additionalActions={ + <> + {showCanvasLabel && ( + + )} + + + } + /> + + +
+ + + + } + /> +
+ + + ); +}; diff --git a/packages/module/patternfly-docs/content/extensions/chatbot/examples/demos/Chatbot.md b/packages/module/patternfly-docs/content/extensions/chatbot/examples/demos/Chatbot.md index 356927d4..92924d61 100644 --- a/packages/module/patternfly-docs/content/extensions/chatbot/examples/demos/Chatbot.md +++ b/packages/module/patternfly-docs/content/extensions/chatbot/examples/demos/Chatbot.md @@ -48,11 +48,28 @@ ChatbotHeaderOptionsDropdown, ChatbotHeaderCloseButton, } from '@patternfly/chatbot/dist/dynamic/ChatbotHeader'; -import { RhUiExpandIcon, RhUiOpenDrawerRightIcon, RhUiMenuBarsIcon, RhUiRestoreWindowIcon } from '@patternfly/react-icons'; +import { RhUiExpandIcon, RhUiOpenDrawerRightIcon, RhUiMenuBarsIcon, RhUiRestoreWindowIcon, RhUiAiEditIcon } from '@patternfly/react-icons'; +import { CodeEditor, Language } from '@patternfly/react-code-editor'; +import { useDropzone } from 'react-dropzone'; +import RhUiAddIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-add-icon'; +import RhUiClipboardIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-clipboard-icon'; +import RhUiCodeIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-code-icon'; +import RhUiUploadIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-upload-icon'; import { BarsIcon } from '@patternfly/react-icons/dist/esm/icons/bars-icon'; import { RhUiBuildFillIcon, RhUiCopyFillIcon } from '@patternfly/react-icons'; +import RhUiImageFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-image-fill-icon'; import { Button, +Divider, +Drawer, +DrawerActions, +DrawerCloseButton, +DrawerContent, +DrawerContentBody, +DrawerHead, +DrawerPanelContent, +DropdownItem, +DropdownList, DescriptionList, DescriptionListDescription, DescriptionListGroup, @@ -61,7 +78,12 @@ ExpandableSection, ExpandableSectionVariant, Flex, FlexItem, -Label +Label, +MenuToggle, +Select, +SelectList, +SelectOption, +Title } from '@patternfly/react-core'; import PFHorizontalLogoColor from '../UI/PF-HorizontalLogo-Color.svg'; import PFHorizontalLogoReverse from '../UI/PF-HorizontalLogo-Reverse.svg'; @@ -70,7 +92,7 @@ import PFIconLogoReverse from '../UI/PF-IconLogo-Reverse.svg'; import userAvatar from '../Messages/user_avatar.svg'; import patternflyAvatar from '../Messages/patternfly_avatar.jpg'; import { getTrackingProviders } from "@patternfly/chatbot/dist/dynamic/tracking"; -import { useEffect,useCallback, useRef, useState, FunctionComponent, MouseEvent, MouseEvent as ReactMouseEvent } from 'react'; +import { useEffect,useCallback, useRef, useState, FunctionComponent, MouseEvent, MouseEvent as ReactMouseEvent, ReactNode } from 'react'; import saveAs from 'file-saver'; ### Basic ChatBot diff --git a/packages/module/patternfly-docs/patternfly-docs.config.js b/packages/module/patternfly-docs/patternfly-docs.config.js index a0e20351..811cf848 100644 --- a/packages/module/patternfly-docs/patternfly-docs.config.js +++ b/packages/module/patternfly-docs/patternfly-docs.config.js @@ -1,6 +1,6 @@ // This module is shared between NodeJS and babelled ES5 module.exports = { - sideNavItems: [{ section: 'extensions' }], + sideNavItems: [{ section: 'extensions' }, { section: 'patterns' }], topNavItems: [], hasThemeSwitcher: true, hasRTLSwitcher: true, diff --git a/packages/module/src/Canvas/Canvas.scss b/packages/module/src/Canvas/Canvas.scss new file mode 100644 index 00000000..7fb3ef27 --- /dev/null +++ b/packages/module/src/Canvas/Canvas.scss @@ -0,0 +1,138 @@ +// ============================================================================ +// Canvas +// ============================================================================ +.pf-chatbot__canvas { + --pf-chatbot__canvas--BackgroundColor: var(--pf-t--global--background--color--secondary--default); + --pf-chatbot__canvas--Padding: var(--pf-t--global--spacer--lg); + + display: flex; + flex-direction: column; + flex: 1; + min-height: 0; + height: 100%; + background-color: var(--pf-chatbot__canvas--BackgroundColor); +} + +:where(.pf-v6-theme-glass) .pf-chatbot__canvas { + --pf-chatbot__canvas--BackgroundColor: var(--pf-t--global--background--color--glass--primary--default); +} + +// Drawer +// ---------------------------------------------------------------------------- +.pf-chatbot__canvas-drawer { + flex: 1; + min-height: 0; + height: 100%; + background-color: var(--pf-chatbot__canvas--BackgroundColor); + --pf-v6-c-drawer__panel--Opacity: 1; + --pf-v6-c-drawer__panel--BackgroundColor: var(--pf-chatbot__canvas--BackgroundColor); + --pf-v6-c-drawer__panel--m-inline--BackgroundColor: var(--pf-chatbot__canvas--BackgroundColor); + --pf-v6-c-drawer__panel--m-inline--md--BackgroundColor: var(--pf-chatbot__canvas--BackgroundColor); + --pf-v6-c-drawer__panel--m-glass--BackgroundColor: var(--pf-chatbot__canvas--BackgroundColor); + --pf-v6-c-code-editor__main--BackgroundColor: var(--pf-chatbot__canvas--BackgroundColor); + + > .pf-v6-c-drawer__main, + > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel, + > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel .pf-v6-c-drawer__panel-main { + background-color: var(--pf-chatbot__canvas--BackgroundColor); + } +} + +@media screen and (min-width: 48rem) { + .pf-v6-c-drawer.pf-m-inline.pf-chatbot__canvas-drawer { + --pf-v6-c-drawer__panel--BackgroundColor: var(--pf-chatbot__canvas--BackgroundColor); + --pf-v6-c-drawer__panel--m-inline--md--BackgroundColor: var(--pf-chatbot__canvas--BackgroundColor); + } +} + +.pf-chatbot__canvas-body { + height: 100%; +} + +.pf-chatbot__canvas-column { + display: flex; + flex-direction: column; + height: 100%; + min-height: 0; +} + +// Panel +// ---------------------------------------------------------------------------- +.pf-chatbot__canvas-section { + display: flex; + flex-direction: column; + flex: 1; + min-height: 0; + height: 100%; +} + +.pf-chatbot__canvas-panel { + height: 100%; + overflow: hidden; + background-color: var(--pf-chatbot__canvas--BackgroundColor); + --pf-v6-c-drawer__panel--BackgroundColor: var(--pf-chatbot__canvas--BackgroundColor); + --pf-v6-c-drawer__panel--m-inline--BackgroundColor: var(--pf-chatbot__canvas--BackgroundColor); + --pf-v6-c-drawer__panel--m-inline--md--BackgroundColor: var(--pf-chatbot__canvas--BackgroundColor); + --pf-v6-c-drawer__panel--m-glass--BackgroundColor: var(--pf-chatbot__canvas--BackgroundColor); + --pf-v6-c-drawer__panel--PaddingBlockStart: 0; + --pf-v6-c-drawer__panel--PaddingBlockEnd: 0; + --pf-v6-c-drawer__panel--RowGap: 0; + + .pf-v6-c-drawer__panel-main { + display: flex; + flex-direction: column; + min-height: 0; + height: 100%; + } + + .pf-chatbot__canvas-panel-body { + display: flex; + flex-direction: column; + flex: 1; + min-height: 0; + padding-block-end: var(--pf-chatbot__canvas--Padding); + padding-inline: var(--pf-chatbot__canvas--Padding); + box-sizing: border-box; + background-color: var(--pf-chatbot__canvas--BackgroundColor); + } + + .pf-chatbot__canvas-head { + width: 100%; + grid-template-columns: minmax(0, 1fr) max-content; + --pf-v6-c-drawer__head--PaddingBlockStart: var(--pf-chatbot__canvas--Padding); + --pf-v6-c-drawer__head--PaddingBlockEnd: var(--pf-t--global--spacer--lg); + --pf-v6-c-drawer__head--PaddingInlineStart: var(--pf-chatbot__canvas--Padding); + --pf-v6-c-drawer__head--PaddingInlineEnd: var(--pf-chatbot__canvas--Padding); + + .pf-v6-c-drawer__actions { + grid-column: 2; + justify-self: end; + align-self: start; + width: max-content; + --pf-v6-c-drawer__actions--MarginBlockStart: 0; + --pf-v6-c-drawer__actions--MarginInlineEnd: 0; + + .pf-v6-c-button { + border-radius: var(--pf-t--global--border--radius--pill); + justify-content: center; + align-items: center; + + &::before { + border-radius: inherit; + } + } + } + } +} + +.pf-chatbot__canvas-editor { + display: flex; + flex: 1; + flex-direction: column; + min-height: 0; + height: 100%; + + .pf-v6-c-code-editor { + --pf-v6-c-code-editor__main--BackgroundColor: var(--pf-chatbot__canvas--BackgroundColor); + } +} diff --git a/packages/module/src/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.scss b/packages/module/src/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.scss index 052b7c2b..a4cf7fff 100644 --- a/packages/module/src/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.scss +++ b/packages/module/src/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.scss @@ -172,81 +172,91 @@ // Chatbot Header - Drawer // ---------------------------------------------------------------------------- +// Child combinators keep these rules off nested drawers such as canvas. .pf-chatbot__history.pf-v6-c-drawer { - --pf-v6-c-drawer__panel--MinWidth: 24rem; - --pf-v6-c-drawer__panel--xl--MinWidth: 24rem; height: 70vh; // Drawer panel - .pf-v6-c-drawer__panel { + > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel { + --pf-v6-c-drawer__panel--MinWidth: 24rem; + --pf-v6-c-drawer__panel--xl--MinWidth: 24rem; --pf-v6-c-drawer__panel--BackgroundColor: var(--pf-t--global--background--color--floating--default); + --pf-v6-c-drawer__panel--m-inline--BackgroundColor: var(--pf-t--global--background--color--floating--default); + --pf-v6-c-drawer__panel--m-inline--md--BackgroundColor: var(--pf-t--global--background--color--floating--default); --pf-v6-c-drawer__panel--PaddingBlockStart: var(--pf-t--global--spacer--lg); --pf-v6-c-drawer__panel--PaddingBlockEnd: var(--pf-t--global--spacer--lg); --pf-v6-c-drawer__panel--RowGap: var(--pf-t--global--spacer--gap--group-to-group--vertical--default); overflow-x: hidden; overflow-y: hidden; - } - // Drawer head - .pf-v6-c-drawer__head { - --pf-v6-c-drawer__head--PaddingBlockStart: 0; - --pf-v6-c-drawer__head--PaddingBlockEnd: 0; - --pf-v6-c-drawer__head--PaddingInlineStart: var(--pf-t--global--spacer--lg); - --pf-v6-c-drawer__head--PaddingInlineEnd: var(--pf-t--global--spacer--lg); + // Drawer head + .pf-v6-c-drawer__head { + --pf-v6-c-drawer__head--PaddingBlockStart: 0; + --pf-v6-c-drawer__head--PaddingBlockEnd: 0; + --pf-v6-c-drawer__head--PaddingInlineStart: var(--pf-t--global--spacer--lg); + --pf-v6-c-drawer__head--PaddingInlineEnd: var(--pf-t--global--spacer--lg); - display: flex; - align-items: center; - justify-content: space-between; - height: var(--pf-t--global--spacer--2xl); - } + display: flex; + align-items: center; + justify-content: space-between; + height: var(--pf-t--global--spacer--2xl); + } - // Drawer actions - .pf-v6-c-drawer__actions { - --pf-v6-c-drawer__actions--MarginBlockStart: 0; - --pf-v6-c-drawer__actions--MarginInlineEnd: 0; + // Drawer actions + .pf-v6-c-drawer__actions { + --pf-v6-c-drawer__actions--MarginBlockStart: 0; + --pf-v6-c-drawer__actions--MarginInlineEnd: 0; - display: flex; - align-items: center; - justify-content: space-between; - align-self: center; - width: 100%; - height: 100%; - } + display: flex; + align-items: center; + justify-content: space-between; + align-self: center; + width: 100%; + height: 100%; + } - .pf-v6-c-drawer__actions--reversed { - flex-direction: row-reverse; - } + .pf-v6-c-drawer__actions--reversed { + flex-direction: row-reverse; + } - // Close drawer - .pf-v6-c-drawer__close { - .pf-v6-c-button { - width: var(--pf-t--global--spacer--2xl); - height: var(--pf-t--global--spacer--2xl); - border-radius: var(--pf-t--global--border--radius--pill); - justify-content: center; - align-items: center; + // Close drawer + .pf-v6-c-drawer__close { + .pf-v6-c-button { + width: var(--pf-t--global--spacer--2xl); + height: var(--pf-t--global--spacer--2xl); + border-radius: var(--pf-t--global--border--radius--pill); + justify-content: center; + align-items: center; + } } - } - // Drawer body - .pf-v6-c-drawer__body { - --pf-v6-c-drawer__panel__body--PaddingBlockStart: 0; - --pf-v6-c-drawer__panel__body--PaddingBlockEnd: 0; - --pf-v6-c-drawer__panel__body--PaddingInlineStart: var(--pf-t--global--spacer--lg); - --pf-v6-c-drawer__panel__body--PaddingInlineEnd: var(--pf-t--global--spacer--lg); + // Drawer body + .pf-v6-c-drawer__body { + --pf-v6-c-drawer__panel__body--PaddingBlockStart: 0; + --pf-v6-c-drawer__panel__body--PaddingBlockEnd: 0; + --pf-v6-c-drawer__panel__body--PaddingInlineStart: var(--pf-t--global--spacer--lg); + --pf-v6-c-drawer__panel__body--PaddingInlineEnd: var(--pf-t--global--spacer--lg); + + overflow-y: auto; + display: flex; + flex-direction: column; + height: 70vh; + } + // Resizable drawer spacing is different - needs manual adjustment for gaps between buttons, inputs, etc. + &.pf-m-resizable { + .pf-v6-c-drawer__panel-main { + row-gap: var(--pf-v6-c-drawer__panel--RowGap); + } + } + } + + > .pf-v6-c-drawer__main > .pf-v6-c-drawer__content > .pf-v6-c-drawer__body { overflow-y: auto; display: flex; flex-direction: column; height: 70vh; } - - // Resizable drawer spacing is different - needs manual adjustment for gaps between buttons, inputs, etc. - .pf-v6-c-drawer__panel.pf-m-resizable { - .pf-v6-c-drawer__panel-main { - row-gap: var(--pf-v6-c-drawer__panel--RowGap); - } - } } .pf-chatbot:is(.pf-chatbot--drawer, .pf-chatbot--docked) .pf-chatbot__history { @@ -279,7 +289,9 @@ .pf-chatbot--fullscreen { .pf-chatbot__history.pf-v6-c-drawer { height: 100vh; - .pf-v6-c-drawer__body { + + > .pf-v6-c-drawer__main > .pf-v6-c-drawer__content > .pf-v6-c-drawer__body, + > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel .pf-v6-c-drawer__body { width: 100%; } } @@ -291,11 +303,14 @@ .pf-chatbot--embedded { .pf-chatbot__history.pf-v6-c-drawer { height: 100%; - .pf-v6-c-drawer__body { + + > .pf-v6-c-drawer__main > .pf-v6-c-drawer__content > .pf-v6-c-drawer__body, + > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel .pf-v6-c-drawer__body { width: 100%; height: 100%; } - .pf-v6-c-drawer__panel { + + > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel { height: 100%; } } @@ -327,37 +342,36 @@ } .pf-chatbot__history.pf-m-compact { - .pf-v6-c-drawer__main { - .pf-v6-c-drawer__panel { - --pf-v6-c-drawer__panel--PaddingBlockStart: var(--pf-t--global--spacer--sm); - --pf-v6-c-drawer__panel--PaddingBlockEnd: var(--pf-t--global--spacer--sm); - --pf-v6-c-drawer__head--PaddingInlineStart: var(--pf-t--global--spacer--md); - --pf-v6-c-drawer__head--PaddingInlineEnd: var(--pf-t--global--spacer--md); - --pf-v6-c-drawer__panel--RowGap: var(--pf-t--global--spacer--md); - } + > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel { + --pf-v6-c-drawer__panel--PaddingBlockStart: var(--pf-t--global--spacer--sm); + --pf-v6-c-drawer__panel--PaddingBlockEnd: var(--pf-t--global--spacer--sm); + --pf-v6-c-drawer__head--PaddingInlineStart: var(--pf-t--global--spacer--md); + --pf-v6-c-drawer__head--PaddingInlineEnd: var(--pf-t--global--spacer--md); + --pf-v6-c-drawer__panel--RowGap: var(--pf-t--global--spacer--md); .pf-v6-c-drawer__body { --pf-v6-c-drawer__panel__body--PaddingInlineStart: var(--pf-t--global--spacer--md); --pf-v6-c-drawer__panel__body--PaddingInlineEnd: var(--pf-t--global--spacer--md); } + + .pf-v6-c-drawer__head { + --pf-v6-c-drawer__head--PaddingInlineStart: var(--pf-t--global--spacer--lg); + --pf-v6-c-drawer__head--PaddingInlineEnd: var(--pf-t--global--spacer--lg); + } + + .pf-v6-c-drawer__close { + .pf-v6-c-button { + width: 2rem; + height: 2rem; + --pf-v6-c-button--m-plain--PaddingInlineEnd: var(--pf-t--global--spacer--xs); + --pf-v6-c-button--m-plain--PaddingInlineStart: var(--pf-t--global--spacer--xs); + --pf-v6-c-button--PaddingBlockStart: var(--pf-t--global--spacer--xs); + --pf-v6-c-button--PaddingBlockEnd: var(--pf-t--global--spacer--xs); + } + } } .pf-chatbot__menu-item { font-size: var(--pf-t--global--font--size--body--md); } - - .pf-v6-c-drawer__head { - --pf-v6-c-drawer__head--PaddingInlineStart: var(--pf-t--global--spacer--lg); - --pf-v6-c-drawer__head--PaddingInlineEnd: var(--pf-t--global--spacer--lg); - } - .pf-v6-c-drawer__close { - .pf-v6-c-button { - width: 2rem; - height: 2rem; - --pf-v6-c-button--m-plain--PaddingInlineEnd: var(--pf-t--global--spacer--xs); - --pf-v6-c-button--m-plain--PaddingInlineStart: var(--pf-t--global--spacer--xs); - --pf-v6-c-button--PaddingBlockStart: var(--pf-t--global--spacer--xs); - --pf-v6-c-button--PaddingBlockEnd: var(--pf-t--global--spacer--xs); - } - } } diff --git a/packages/module/src/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.test.tsx b/packages/module/src/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.test.tsx index 478d8fe5..e7634ba7 100644 --- a/packages/module/src/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.test.tsx +++ b/packages/module/src/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.test.tsx @@ -204,6 +204,19 @@ describe('ChatbotConversationHistoryNav', () => { ); }); + it('should keep an opaque panel background in glass theme', () => { + render( + + ); + expect(screen.getByRole('dialog')).toHaveClass('pf-m-no-plain-on-glass'); + }); + it('should accept drawerContentProps', () => { const { container } = render( {drawer} diff --git a/packages/module/src/main.scss b/packages/module/src/main.scss index e6802036..bd8edd2e 100644 --- a/packages/module/src/main.scss +++ b/packages/module/src/main.scss @@ -9,6 +9,7 @@ @import './ChatbotPopover/ChatbotPopover'; @import './ChatbotToggle/ChatbotToggle'; @import './ChatbotWelcomePrompt/ChatbotWelcomePrompt'; +@import './Canvas/Canvas'; @import './CodeModal/CodeModal'; @import './Compare/Compare'; @import './DeepThinking/DeepThinking';