chore(docs): Update example for modal

Add chatbot to example and update text.
rebeccaalpert · Nov 18, 2024 · 3980bc1 · 3980bc1
1 parent 7cece91
commit 3980bc1
Show file tree

Hide file tree

Showing 2 changed files with 47 additions and 6 deletions.
diff --git a/.../module/patternfly-docs/content/extensions/virtual-assistant/examples/UI/ChatbotModal.tsx b/.../module/patternfly-docs/content/extensions/virtual-assistant/examples/UI/ChatbotModal.tsx
@@ -1,21 +1,62 @@
 import React from 'react';
-import { Button, ModalBody, ModalFooter, ModalHeader } from '@patternfly/react-core';
+import { Button, FormGroup, ModalBody, ModalFooter, ModalHeader, Radio } from '@patternfly/react-core';
 import { ChatbotModal } from '@patternfly/virtual-assistant/dist/dynamic/ChatbotModal';
-import { ChatbotDisplayMode } from '@patternfly/virtual-assistant/dist/dynamic/Chatbot';
+import Chatbot, { ChatbotDisplayMode } from '@patternfly/virtual-assistant/dist/dynamic/Chatbot';
 
 export const ChatbotModalExample: React.FunctionComponent = () => {
   const [isModalOpen, setIsModalOpen] = React.useState(false);
+  const [displayMode, setDisplayMode] = React.useState(ChatbotDisplayMode.default);
 
   const handleModalToggle = (_event: React.MouseEvent | MouseEvent | KeyboardEvent) => {
     setIsModalOpen(!isModalOpen);
   };
 
   return (
     <>
-      <Button onClick={handleModalToggle}>Launch modal</Button>
+      <div
+        style={{
+          position: 'fixed',
+          padding: 'var(--pf-t--global--spacer--lg)',
+          zIndex: '601',
+          boxShadow: 'var(--pf-t--global--box-shadow--lg)'
+        }}
+      >
+        <FormGroup role="radiogroup" isInline fieldId="basic-form-radio-group" label="Display mode">
+          <Radio
+            isChecked={displayMode === ChatbotDisplayMode.default}
+            onChange={() => setDisplayMode(ChatbotDisplayMode.default)}
+            name="basic-inline-radio"
+            label="Default"
+            id="default"
+          />
+          <Radio
+            isChecked={displayMode === ChatbotDisplayMode.docked}
+            onChange={() => setDisplayMode(ChatbotDisplayMode.docked)}
+            name="basic-inline-radio"
+            label="Docked"
+            id="docked"
+          />
+          <Radio
+            isChecked={displayMode === ChatbotDisplayMode.fullscreen}
+            onChange={() => setDisplayMode(ChatbotDisplayMode.fullscreen)}
+            name="basic-inline-radio"
+            label="Fullscreen"
+            id="fullscreen"
+          />
+          <Radio
+            isChecked={displayMode === ChatbotDisplayMode.embedded}
+            onChange={() => setDisplayMode(ChatbotDisplayMode.embedded)}
+            name="basic-inline-radio"
+            label="Embedded"
+            id="embedded"
+          />
+        </FormGroup>
+        <Button onClick={handleModalToggle}>Launch modal</Button>
+      </div>
+      <Chatbot displayMode={displayMode} isVisible></Chatbot>
       <ChatbotModal
         isOpen={isModalOpen}
-        displayMode={ChatbotDisplayMode.default}
+        displayMode={displayMode}
         onClose={handleModalToggle}
         ouiaId="ChatbotModal"
         aria-labelledby="basic-modal-title"

diff --git a/...s/module/patternfly-docs/content/extensions/virtual-assistant/examples/UI/UI.md b/...s/module/patternfly-docs/content/extensions/virtual-assistant/examples/UI/UI.md
@@ -319,8 +319,8 @@ Actions can be added to conversations with `menuItems`. Optionally, you can also
 
 ### Modal
 
-Based on the [PatternFly modal](/components/modal), this modal adapts to the chatbot display mode and accepts components typically used in a modal. It is primarily used and tested in the context of the [attachment modals](/patternfly-ai/chatbot/messages#attachment-preview), but you can customize this modal to adapt it to other use cases as needed.
+Based on the [PatternFly modal](/components/modal), this modal adapts to the chatbot display mode and accepts components typically used in a modal. It is primarily used and tested in the context of the attachment modals, but you can customize this modal to adapt it to other use cases as needed. The modal will overlay the chatbot in default and docked modes, and will behave more like a traditional PatternFly modal in fullscreen and embedded modes.
 
-```js file="./ChatbotModal.tsx"
+```js file="./ChatbotModal.tsx" isFullscreen
 
 ```