From 7907f990337b22df0f58d9163517d13549190ac6 Mon Sep 17 00:00:00 2001 From: Rebecca Alpert Date: Thu, 5 Dec 2024 16:41:42 -0500 Subject: [PATCH] feat(Settings): Add settings layout --- .../chatbot/examples/UI/Settings.tsx | 333 ++++++++++++++++++ .../extensions/chatbot/examples/UI/UI.md | 12 + .../ChatbotHeaderCloseButton.tsx | 51 +++ .../src/ChatbotHeader/ChatbotHeaderMenu.tsx | 7 +- packages/module/src/ChatbotHeader/index.ts | 1 + packages/module/src/Settings/Settings.scss | 34 ++ packages/module/src/Settings/SettingsForm.tsx | 25 ++ packages/module/src/Settings/index.ts | 3 + packages/module/src/index.ts | 6 + packages/module/src/main.scss | 1 + 10 files changed, 471 insertions(+), 2 deletions(-) create mode 100644 packages/module/patternfly-docs/content/extensions/chatbot/examples/UI/Settings.tsx create mode 100644 packages/module/src/ChatbotHeader/ChatbotHeaderCloseButton.tsx create mode 100644 packages/module/src/Settings/Settings.scss create mode 100644 packages/module/src/Settings/SettingsForm.tsx create mode 100644 packages/module/src/Settings/index.ts diff --git a/packages/module/patternfly-docs/content/extensions/chatbot/examples/UI/Settings.tsx b/packages/module/patternfly-docs/content/extensions/chatbot/examples/UI/Settings.tsx new file mode 100644 index 00000000..56a73897 --- /dev/null +++ b/packages/module/patternfly-docs/content/extensions/chatbot/examples/UI/Settings.tsx @@ -0,0 +1,333 @@ +import React from 'react'; + +import SettingsForm from '@patternfly/chatbot/dist/dynamic/Settings'; +import { + Button, + Divider, + Dropdown, + DropdownGroup, + DropdownItem, + DropdownList, + FormGroup, + MenuToggle, + MenuToggleElement, + Radio, + Switch, + Title +} from '@patternfly/react-core'; +import Chatbot, { ChatbotDisplayMode } from '@patternfly/chatbot/dist/dynamic/Chatbot'; +import ChatbotHeader, { + ChatbotHeaderActions, + ChatbotHeaderCloseButton, + ChatbotHeaderMain, + ChatbotHeaderOptionsDropdown, + ChatbotHeaderTitle +} from '@patternfly/chatbot/dist/dynamic/ChatbotHeader'; +import { CogIcon, ExpandIcon, OpenDrawerRightIcon, OutlinedWindowRestoreIcon } from '@patternfly/react-icons'; + +export const SettingsDemo: React.FunctionComponent = () => { + const [isChecked, setIsChecked] = React.useState(true); + const [isThemeOpen, setIsThemeOpen] = React.useState(false); + const [isLanguageOpen, setIsLanguageOpen] = React.useState(false); + const [isVoiceOpen, setIsVoiceOpen] = React.useState(false); + const [displayMode, setDisplayMode] = React.useState(ChatbotDisplayMode.default); + const [areSettingsOpen, setAreSettingsOpen] = React.useState(true); + const chatbotVisible = true; + + const onFocus = (id: string) => { + const element = document.getElementById(id); + (element as HTMLElement).focus(); + }; + + const onThemeToggleClick = () => { + setIsThemeOpen(!isThemeOpen); + }; + + const onThemeSelect = ( + _event: React.MouseEvent | undefined, + value: string | number | undefined + ) => { + // eslint-disable-next-line no-console + console.log('selected', value); + onFocus('theme'); + setIsThemeOpen(false); + }; + + const onLanguageToggleClick = () => { + setIsLanguageOpen(!isLanguageOpen); + }; + + const onLanguageSelect = ( + _event: React.MouseEvent | undefined, + value: string | number | undefined + ) => { + // eslint-disable-next-line no-console + console.log('selected', value); + onFocus('language'); + setIsLanguageOpen(false); + }; + + const onVoiceToggleClick = () => { + onFocus('voice'); + setIsVoiceOpen(!isVoiceOpen); + }; + + const onVoiceSelect = ( + _event: React.MouseEvent | undefined, + value: string | number | undefined + ) => { + // eslint-disable-next-line no-console + console.log('selected', value); + setIsVoiceOpen(false); + }; + + const handleChange = (_event: React.FormEvent, checked: boolean) => { + setIsChecked(checked); + }; + + const themeDropdown = ( + setIsThemeOpen(isOpen)} + shouldFocusToggleOnSelect + shouldFocusFirstItemOnOpen + shouldPreventScrollOnItemFocus + toggle={(toggleRef: React.Ref) => ( + // We want to add the id property here as well so the label is coupled + // with the button on screen readers. + + System + + )} + ouiaId="ThemeDropdown" + > + + + System + + + + ); + + const languageDropdown = ( + setIsLanguageOpen(isOpen)} + shouldFocusToggleOnSelect + shouldFocusFirstItemOnOpen + shouldPreventScrollOnItemFocus + toggle={(toggleRef: React.Ref) => ( + // We want to add the id property here as well so the label is coupled + // with the button on screen readers. + + Auto-detect + + )} + ouiaId="LanguageDropdown" + > + + + Auto-detect + + + + ); + const voiceDropdown = ( + setIsVoiceOpen(isOpen)} + shouldFocusToggleOnSelect + shouldFocusFirstItemOnOpen + shouldPreventScrollOnItemFocus + toggle={(toggleRef: React.Ref) => ( + // We want to add the id property here as well so the label is coupled + // with the button on screen readers. + + Bot + + )} + ouiaId="VoiceDropdown" + > + + + Bot + + + + ); + const children = [ + { id: 'theme', label: 'Theme', field: themeDropdown }, + { id: 'language', label: 'Language', field: languageDropdown }, + { id: 'voice', label: 'Voice', field: voiceDropdown }, + { + id: 'analytics', + label: 'Share analytics', + field: ( + + ) + }, + { + id: 'archived-chat', + label: 'Archive chat', + field: ( + // We want to add the id property here as well so the label is coupled + // with the button on screen readers. + + ) + }, + { + id: 'archive-all', + label: 'Archive all chat', + field: ( + // We want to add the id property here as well so the label is coupled + // with the button on screen readers. + + ) + }, + { + id: 'delete-all', + label: 'Delete all chats', + field: ( + // We want to add the id property here as well so the label is coupled + // with the button on screen readers. + + ) + } + ]; + + const onSelectDropdownItem = ( + _event: React.MouseEvent | undefined, + value: string | number | undefined + ) => { + if (value === 'Settings') { + setAreSettingsOpen(true); + } else { + setDisplayMode(value as ChatbotDisplayMode); + } + }; + + const regularChatbot = ( + + + + + + } + isSelected={displayMode === ChatbotDisplayMode.default} + > + Overlay + + } + isSelected={displayMode === ChatbotDisplayMode.docked} + > + Dock to window + + } + isSelected={displayMode === ChatbotDisplayMode.fullscreen} + > + Fullscreen + + + + + + }> + Settings + + + + + + ); + + return ( + <> +
+ + setDisplayMode(ChatbotDisplayMode.default)} + name="basic-inline-radio" + label="Default" + id="default" + /> + setDisplayMode(ChatbotDisplayMode.docked)} + name="basic-inline-radio" + label="Docked" + id="docked" + /> + setDisplayMode(ChatbotDisplayMode.fullscreen)} + name="basic-inline-radio" + label="Fullscreen" + id="fullscreen" + /> + setDisplayMode(ChatbotDisplayMode.embedded)} + name="basic-inline-radio" + label="Embedded" + id="embedded" + /> + + +
+ + {areSettingsOpen ? ( + <> + + + + + Settings + + + + setAreSettingsOpen(false)} /> + + + + ) : ( + <>{regularChatbot} + )} + + + ); +}; diff --git a/packages/module/patternfly-docs/content/extensions/chatbot/examples/UI/UI.md b/packages/module/patternfly-docs/content/extensions/chatbot/examples/UI/UI.md index ccd1649a..0e1ae2d4 100644 --- a/packages/module/patternfly-docs/content/extensions/chatbot/examples/UI/UI.md +++ b/packages/module/patternfly-docs/content/extensions/chatbot/examples/UI/UI.md @@ -54,6 +54,7 @@ import { PreviewAttachment } from '@patternfly/chatbot/dist/dynamic/PreviewAttac import ChatbotAlert from '@patternfly/chatbot/dist/dynamic/ChatbotAlert'; import { ChatbotHeader, +ChatbotHeaderCloseButton, ChatbotHeaderMain, ChatbotHeaderMenu, ChatbotHeaderActions, @@ -65,6 +66,7 @@ import { ChatbotFooter, ChatbotFootnote } from '@patternfly/chatbot/dist/dynamic import { MessageBar } from '@patternfly/chatbot/dist/dynamic/MessageBar'; import SourceDetailsMenuItem from '@patternfly/chatbot/dist/dynamic/SourceDetailsMenuItem'; import { ChatbotModal } from '@patternfly/chatbot/dist/dynamic/ChatbotModal'; +import SettingsForm from '@patternfly/chatbot/dist/dynamic/Settings'; import { BellIcon, CalendarAltIcon, ClipboardIcon, CodeIcon, UploadIcon } from '@patternfly/react-icons'; import { useDropzone } from 'react-dropzone'; @@ -74,10 +76,12 @@ import { DropdownItem, DropdownList, Checkbox } from '@patternfly/react-core'; import OutlinedWindowRestoreIcon from '@patternfly/react-icons/dist/esm/icons/outlined-window-restore-icon'; import ExpandIcon from '@patternfly/react-icons/dist/esm/icons/expand-icon'; import OpenDrawerRightIcon from '@patternfly/react-icons/dist/esm/icons/open-drawer-right-icon'; +import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon'; import PFHorizontalLogoColor from './PF-HorizontalLogo-Color.svg'; import PFHorizontalLogoReverse from './PF-HorizontalLogo-Reverse.svg'; import userAvatar from '../Messages/user_avatar.svg'; import patternflyAvatar from '../Messages/patternfly_avatar.jpg'; +import { CloseIcon } from '@patternfly/react-icons'; ## Structure @@ -342,3 +346,11 @@ Based on the [PatternFly modal](/components/modal), this modal adapts to the Cha ```js file="./ChatbotModal.tsx" isFullscreen ``` + +### Settings + +A settings layout can be substituted for other components within the chatbot. It should accept any number of buttons, dropdowns, toggles, etc. and labels, and render them appropriately within all four display modes. + +```js file="./Settings.tsx" isFullscreen + +``` diff --git a/packages/module/src/ChatbotHeader/ChatbotHeaderCloseButton.tsx b/packages/module/src/ChatbotHeader/ChatbotHeaderCloseButton.tsx new file mode 100644 index 00000000..b9383860 --- /dev/null +++ b/packages/module/src/ChatbotHeader/ChatbotHeaderCloseButton.tsx @@ -0,0 +1,51 @@ +import React from 'react'; + +import { Button, Icon, Tooltip, TooltipProps } from '@patternfly/react-core'; +import { CloseIcon } from '@patternfly/react-icons'; + +export interface ChatbotHeaderCloseButtonProps { + /** Callback function for when button is clicked */ + onClick: () => void; + /** Custom classname for the header component */ + className?: string; + /** Props spread to the PF Tooltip component wrapping the display mode dropdown */ + tooltipProps?: TooltipProps; + /** Aria label for menu */ + menuAriaLabel?: string; + /** Ref applied to menu */ + innerRef?: React.Ref; + /** Content used in tooltip */ + tooltipContent?: string; +} + +const ChatbotHeaderCloseButtonBase: React.FunctionComponent = ({ + className, + onClick, + tooltipProps, + menuAriaLabel = 'Close', + innerRef, + tooltipContent = 'Close' +}: ChatbotHeaderCloseButtonProps) => ( +
+ +
+); + +export const ChatbotHeaderCloseButton = React.forwardRef( + (props: ChatbotHeaderCloseButtonProps, ref: React.Ref) => ( + + ) +); diff --git a/packages/module/src/ChatbotHeader/ChatbotHeaderMenu.tsx b/packages/module/src/ChatbotHeader/ChatbotHeaderMenu.tsx index 4ac5be10..16b1925a 100644 --- a/packages/module/src/ChatbotHeader/ChatbotHeaderMenu.tsx +++ b/packages/module/src/ChatbotHeader/ChatbotHeaderMenu.tsx @@ -14,6 +14,8 @@ export interface ChatbotHeaderMenuProps { menuAriaLabel?: string; /** Ref applied to menu */ innerRef?: React.Ref; + /** Content used in tooltip */ + tooltipContent?: string; } const ChatbotHeaderMenuBase: React.FunctionComponent = ({ @@ -21,10 +23,11 @@ const ChatbotHeaderMenuBase: React.FunctionComponent = ( onMenuToggle, tooltipProps, menuAriaLabel = 'Toggle menu', - innerRef + innerRef, + tooltipContent = 'Menu' }: ChatbotHeaderMenuProps) => (
- +