From 0466ab98c4d3751464157bfe929025bf254aa2df Mon Sep 17 00:00:00 2001
From: Rebecca Alpert <ralpert@redhat.com>
Date: Mon, 16 Dec 2024 13:19:38 -0500
Subject: [PATCH] Switch from modal to chatbot layout

---
 .../chatbot/examples/UI/Settings.tsx          | 126 +++++++++++++-----
 .../extensions/chatbot/examples/UI/UI.md      |   7 +-
 .../ChatbotHeaderCloseButton.tsx              |  51 +++++++
 .../src/ChatbotHeader/ChatbotHeaderMenu.tsx   |   7 +-
 packages/module/src/ChatbotHeader/index.ts    |   1 +
 packages/module/src/Settings/Settings.scss    |   9 ++
 packages/module/src/Settings/Settings.tsx     |  60 ---------
 packages/module/src/Settings/SettingsForm.tsx |  25 ++++
 packages/module/src/Settings/index.ts         |   4 +-
 packages/module/src/index.ts                  |   3 +
 10 files changed, 195 insertions(+), 98 deletions(-)
 create mode 100644 packages/module/src/ChatbotHeader/ChatbotHeaderCloseButton.tsx
 delete mode 100644 packages/module/src/Settings/Settings.tsx
 create mode 100644 packages/module/src/Settings/SettingsForm.tsx

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
index 9b12e1a5..56a73897 100644
--- a/packages/module/patternfly-docs/content/extensions/chatbot/examples/UI/Settings.tsx
+++ b/packages/module/patternfly-docs/content/extensions/chatbot/examples/UI/Settings.tsx
@@ -1,18 +1,29 @@
 import React from 'react';
 
-import Settings from '@patternfly/chatbot/dist/dynamic/Settings';
+import SettingsForm from '@patternfly/chatbot/dist/dynamic/Settings';
 import {
   Button,
+  Divider,
   Dropdown,
+  DropdownGroup,
   DropdownItem,
   DropdownList,
   FormGroup,
   MenuToggle,
   MenuToggleElement,
   Radio,
-  Switch
+  Switch,
+  Title
 } from '@patternfly/react-core';
-import { ChatbotDisplayMode } from '@patternfly/chatbot/dist/dynamic/Chatbot';
+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<boolean>(true);
@@ -20,33 +31,14 @@ export const SettingsDemo: React.FunctionComponent = () => {
   const [isLanguageOpen, setIsLanguageOpen] = React.useState(false);
   const [isVoiceOpen, setIsVoiceOpen] = React.useState(false);
   const [displayMode, setDisplayMode] = React.useState(ChatbotDisplayMode.default);
-  const [isModalOpen, setIsModalOpen] = React.useState(true);
+  const [areSettingsOpen, setAreSettingsOpen] = React.useState(true);
+  const chatbotVisible = true;
 
   const onFocus = (id: string) => {
     const element = document.getElementById(id);
     (element as HTMLElement).focus();
   };
 
-  const onEscapePress = (event: KeyboardEvent) => {
-    const target = event.target as Element;
-    if (target?.id === 'voice') {
-      setIsVoiceOpen(!isVoiceOpen);
-      onFocus('voice');
-      return;
-    }
-    if (target?.id === 'language') {
-      setIsLanguageOpen(!isLanguageOpen);
-      onFocus('language');
-      return;
-    }
-    if (target?.id === 'theme') {
-      setIsThemeOpen(!isThemeOpen);
-      onFocus('theme');
-      return;
-    }
-    setIsModalOpen(!isModalOpen);
-  };
-
   const onThemeToggleClick = () => {
     setIsThemeOpen(!isThemeOpen);
   };
@@ -219,6 +211,60 @@ export const SettingsDemo: React.FunctionComponent = () => {
     }
   ];
 
+  const onSelectDropdownItem = (
+    _event: React.MouseEvent<Element, MouseEvent> | undefined,
+    value: string | number | undefined
+  ) => {
+    if (value === 'Settings') {
+      setAreSettingsOpen(true);
+    } else {
+      setDisplayMode(value as ChatbotDisplayMode);
+    }
+  };
+
+  const regularChatbot = (
+    <ChatbotHeader>
+      <ChatbotHeaderActions>
+        <ChatbotHeaderOptionsDropdown onSelect={onSelectDropdownItem}>
+          <DropdownGroup label="Display mode">
+            <DropdownList>
+              <DropdownItem
+                value={ChatbotDisplayMode.default}
+                key="switchDisplayOverlay"
+                icon={<OutlinedWindowRestoreIcon aria-hidden />}
+                isSelected={displayMode === ChatbotDisplayMode.default}
+              >
+                <span>Overlay</span>
+              </DropdownItem>
+              <DropdownItem
+                value={ChatbotDisplayMode.docked}
+                key="switchDisplayDock"
+                icon={<OpenDrawerRightIcon aria-hidden />}
+                isSelected={displayMode === ChatbotDisplayMode.docked}
+              >
+                <span>Dock to window</span>
+              </DropdownItem>
+              <DropdownItem
+                value={ChatbotDisplayMode.fullscreen}
+                key="switchDisplayFullscreen"
+                icon={<ExpandIcon aria-hidden />}
+                isSelected={displayMode === ChatbotDisplayMode.fullscreen}
+              >
+                <span>Fullscreen</span>
+              </DropdownItem>
+            </DropdownList>
+          </DropdownGroup>
+          <Divider />
+          <DropdownList>
+            <DropdownItem value="Settings" key="switchSettings" icon={<CogIcon aria-hidden />}>
+              <span>Settings</span>
+            </DropdownItem>
+          </DropdownList>
+        </ChatbotHeaderOptionsDropdown>
+      </ChatbotHeaderActions>
+    </ChatbotHeader>
+  );
+
   return (
     <>
       <div
@@ -226,7 +272,9 @@ export const SettingsDemo: React.FunctionComponent = () => {
           position: 'fixed',
           padding: 'var(--pf-t--global--spacer--lg)',
           zIndex: '601',
-          boxShadow: 'var(--pf-t--global--box-shadow--lg)'
+          boxShadow: 'var(--pf-t--global--box-shadow--lg)',
+          left: 0,
+          bottom: 120
         }}
       >
         <FormGroup role="radiogroup" isInline fieldId="basic-form-radio-group" label="Display mode">
@@ -259,15 +307,27 @@ export const SettingsDemo: React.FunctionComponent = () => {
             id="embedded"
           />
         </FormGroup>
-        <Button onClick={() => setIsModalOpen(!isModalOpen)}>Launch modal</Button>
+        <Button onClick={() => setAreSettingsOpen(!areSettingsOpen)}>Launch settings</Button>
       </div>
-      <Settings
-        onEscapePress={onEscapePress}
-        displayMode={displayMode}
-        isModalOpen={isModalOpen}
-        handleModalToggle={() => setIsModalOpen(!isModalOpen)}
-        fields={children}
-      ></Settings>
+      <Chatbot isVisible={chatbotVisible} displayMode={displayMode}>
+        {areSettingsOpen ? (
+          <>
+            <ChatbotHeader>
+              <ChatbotHeaderMain>
+                <ChatbotHeaderTitle>
+                  <Title headingLevel="h1" size="2xl">
+                    Settings
+                  </Title>
+                </ChatbotHeaderTitle>
+              </ChatbotHeaderMain>
+              <ChatbotHeaderCloseButton onClick={() => setAreSettingsOpen(false)} />
+            </ChatbotHeader>
+            <SettingsForm fields={children} />
+          </>
+        ) : (
+          <>{regularChatbot}</>
+        )}
+      </Chatbot>
     </>
   );
 };
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 05acf98d..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,7 +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 Settings from '@patternfly/chatbot/dist/dynamic/Settings';
+import SettingsForm from '@patternfly/chatbot/dist/dynamic/Settings';
 import { BellIcon, CalendarAltIcon, ClipboardIcon, CodeIcon, UploadIcon } from '@patternfly/react-icons';
 import { useDropzone } from 'react-dropzone';
 
@@ -75,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
 
@@ -346,6 +349,8 @@ Based on the [PatternFly modal](/components/modal), this modal adapts to the Cha
 
 ### 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<HTMLButtonElement>;
+  /** Content used in tooltip */
+  tooltipContent?: string;
+}
+
+const ChatbotHeaderCloseButtonBase: React.FunctionComponent<ChatbotHeaderCloseButtonProps> = ({
+  className,
+  onClick,
+  tooltipProps,
+  menuAriaLabel = 'Close',
+  innerRef,
+  tooltipContent = 'Close'
+}: ChatbotHeaderCloseButtonProps) => (
+  <div className={`pf-chatbot__menu ${className}`}>
+    <Tooltip content={tooltipContent} position="bottom" {...tooltipProps}>
+      <Button
+        className="pf-chatbot__button--toggle-menu"
+        variant="plain"
+        onClick={onClick}
+        aria-label={menuAriaLabel}
+        ref={innerRef}
+        icon={
+          <Icon size="xl" isInline>
+            <CloseIcon />
+          </Icon>
+        }
+      />
+    </Tooltip>
+  </div>
+);
+
+export const ChatbotHeaderCloseButton = React.forwardRef(
+  (props: ChatbotHeaderCloseButtonProps, ref: React.Ref<HTMLButtonElement>) => (
+    <ChatbotHeaderCloseButtonBase innerRef={ref} {...props} />
+  )
+);
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<HTMLButtonElement>;
+  /** Content used in tooltip */
+  tooltipContent?: string;
 }
 
 const ChatbotHeaderMenuBase: React.FunctionComponent<ChatbotHeaderMenuProps> = ({
@@ -21,10 +23,11 @@ const ChatbotHeaderMenuBase: React.FunctionComponent<ChatbotHeaderMenuProps> = (
   onMenuToggle,
   tooltipProps,
   menuAriaLabel = 'Toggle menu',
-  innerRef
+  innerRef,
+  tooltipContent = 'Menu'
 }: ChatbotHeaderMenuProps) => (
   <div className={`pf-chatbot__menu ${className}`}>
-    <Tooltip content="Menu" position="bottom" {...tooltipProps}>
+    <Tooltip content={tooltipContent} position="bottom" {...tooltipProps}>
       <Button
         className="pf-chatbot__button--toggle-menu"
         variant="plain"
diff --git a/packages/module/src/ChatbotHeader/index.ts b/packages/module/src/ChatbotHeader/index.ts
index e44a18ea..5f1746dd 100644
--- a/packages/module/src/ChatbotHeader/index.ts
+++ b/packages/module/src/ChatbotHeader/index.ts
@@ -7,3 +7,4 @@ export * from './ChatbotHeaderMenu';
 export * from './ChatbotHeaderTitle';
 export * from './ChatbotHeaderOptionsDropdown';
 export * from './ChatbotHeaderSelectorDropdown';
+export * from './ChatbotHeaderCloseButton';
diff --git a/packages/module/src/Settings/Settings.scss b/packages/module/src/Settings/Settings.scss
index 719307b2..26fa93ed 100644
--- a/packages/module/src/Settings/Settings.scss
+++ b/packages/module/src/Settings/Settings.scss
@@ -1,6 +1,15 @@
+.pf-chatbot__settings-form-container {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  overflow: auto;
+}
+
 .pf-chatbot__settings-form {
   display: flex;
   flex-direction: column;
+  max-width: 60rem;
+  flex: 1;
 }
 
 .pf-chatbot__settings-form-row {
diff --git a/packages/module/src/Settings/Settings.tsx b/packages/module/src/Settings/Settings.tsx
deleted file mode 100644
index 69da0236..00000000
--- a/packages/module/src/Settings/Settings.tsx
+++ /dev/null
@@ -1,60 +0,0 @@
-import React from 'react';
-import ChatbotModal from '../ChatbotModal';
-import { ModalBody, ModalHeader, ModalProps } from '@patternfly/react-core';
-import { ChatbotDisplayMode } from '../Chatbot';
-
-export interface SettingsProps extends Omit<ModalProps, 'children'> {
-  /** Class applied to modal */
-  className?: string;
-  /** Function that handles modal toggle */
-  handleModalToggle: (event: React.MouseEvent | MouseEvent | KeyboardEvent) => void;
-  /** Whether modal is open */
-  isModalOpen: boolean;
-  /** Title of modal */
-  title?: string;
-  /** Display mode for the Chatbot parent; this influences the styles applied */
-  displayMode?: ChatbotDisplayMode;
-  /** Array of fields to display in the settings layout */
-  fields?: { id: string; label: string; field: React.ReactElement }[];
-}
-
-export const Settings: React.FunctionComponent<SettingsProps> = ({
-  handleModalToggle,
-  isModalOpen,
-  title = 'Settings',
-  displayMode = ChatbotDisplayMode.default,
-  className,
-  fields = [],
-  ...props
-}) => (
-  <ChatbotModal
-    onClose={handleModalToggle}
-    isOpen={isModalOpen}
-    ouiaId="Settings"
-    aria-labelledby="settings-title"
-    aria-describedby="settings-modal"
-    className={`pf-chatbot__settings ${className ? className : ''}`}
-    displayMode={displayMode}
-    {...props}
-  >
-    <ModalHeader>
-      <div className="pf-chatbot__settings--header">
-        <h1 className="pf-chatbot__settings--title">{title}</h1>
-      </div>
-    </ModalHeader>
-    <ModalBody>
-      <form className="pf-chatbot__settings-form">
-        {fields.map((field) => (
-          <div className="pf-chatbot__settings-form-row" key={field.label}>
-            <label className="pf-chatbot__settings-label" htmlFor={field.id}>
-              {field.label}
-            </label>
-            {field.field}
-          </div>
-        ))}
-      </form>
-    </ModalBody>
-  </ChatbotModal>
-);
-
-export default Settings;
diff --git a/packages/module/src/Settings/SettingsForm.tsx b/packages/module/src/Settings/SettingsForm.tsx
new file mode 100644
index 00000000..ed08f2e1
--- /dev/null
+++ b/packages/module/src/Settings/SettingsForm.tsx
@@ -0,0 +1,25 @@
+import React from 'react';
+
+export interface SettingsFormProps {
+  /** Class applied to form container */
+  className?: string;
+  /** Array of fields to display in the settings layout */
+  fields?: { id: string; label: string; field: React.ReactElement }[];
+}
+
+export const SettingsForm: React.FunctionComponent<SettingsFormProps> = ({ className, fields = [], ...props }) => (
+  <div className={`pf-chatbot__settings-form-container ${className}`} {...props}>
+    <form className="pf-chatbot__settings-form">
+      {fields.map((field) => (
+        <div className="pf-chatbot__settings-form-row" key={field.label}>
+          <label className="pf-chatbot__settings-label" htmlFor={field.id}>
+            {field.label}
+          </label>
+          {field.field}
+        </div>
+      ))}
+    </form>
+  </div>
+);
+
+export default SettingsForm;
diff --git a/packages/module/src/Settings/index.ts b/packages/module/src/Settings/index.ts
index 1af7202c..1ee5be6d 100644
--- a/packages/module/src/Settings/index.ts
+++ b/packages/module/src/Settings/index.ts
@@ -1,3 +1,3 @@
-export { default } from './Settings';
+export { default } from './SettingsForm';
 
-export * from './Settings';
+export * from './SettingsForm';
diff --git a/packages/module/src/index.ts b/packages/module/src/index.ts
index edb69c1e..dfa8836c 100644
--- a/packages/module/src/index.ts
+++ b/packages/module/src/index.ts
@@ -18,6 +18,9 @@ export * from './ChatbotContent';
 export { default as ChatbotConversationHistoryNav } from './ChatbotConversationHistoryNav';
 export * from './ChatbotConversationHistoryNav';
 
+export { default as ChatbotDrawer } from './ChatbotDrawer';
+export * from './ChatbotDrawer';
+
 export { default as ChatbotFooter } from './ChatbotFooter';
 export * from './ChatbotFooter';