Address Eric's feedback

patternfly · Nov 5, 2024 · bf5760a · bf5760a
1 parent e91991c
commit bf5760a
Show file tree

Hide file tree

Showing 4 changed files with 30 additions and 7 deletions.
diff --git a/...es/module/patternfly-docs/content/extensions/virtual-assistant/examples/demos/Chatbot.tsx b/...es/module/patternfly-docs/content/extensions/virtual-assistant/examples/demos/Chatbot.tsx
@@ -170,6 +170,7 @@ export const ChatbotDemo: React.FunctionComponent = () => {
   const [announcement, setAnnouncement] = React.useState<string>();
   const scrollToBottomRef = React.useRef<HTMLDivElement>(null);
   const toggleRef = React.useRef<HTMLButtonElement>(null);
+  const chatbotRef = React.useRef<HTMLDivElement>(null);
 
   // Autu-scrolls to the latest message
   React.useEffect(() => {
@@ -284,8 +285,14 @@ export const ChatbotDemo: React.FunctionComponent = () => {
 
   const handleSkipToContent = (e) => {
     e.preventDefault();
-    if (toggleRef.current) {
-      toggleRef.current.focus();
+    if (displayMode === ChatbotDisplayMode.default) {
+      if (toggleRef.current) {
+        toggleRef.current.focus();
+      }
+    } else {
+      if (chatbotRef.current) {
+        chatbotRef.current.focus();
+      }
     }
   };
 
@@ -301,7 +308,7 @@ export const ChatbotDemo: React.FunctionComponent = () => {
         id="chatbot-toggle"
         ref={toggleRef}
       />
-      <Chatbot isVisible={chatbotVisible} displayMode={displayMode}>
+      <Chatbot isVisible={chatbotVisible} displayMode={displayMode} ref={chatbotRef}>
         <ChatbotConversationHistoryNav
           displayMode={displayMode}
           onDrawerToggle={() => {

diff --git a/...e/patternfly-docs/content/extensions/virtual-assistant/examples/demos/EmbeddedChatbot.tsx b/...e/patternfly-docs/content/extensions/virtual-assistant/examples/demos/EmbeddedChatbot.tsx
@@ -319,7 +319,7 @@ export const EmbeddedChatbotDemo: React.FunctionComponent = () => {
 
   return (
     <Page skipToContent={skipToContent} masthead={masthead} sidebar={sidebar} isContentFilled>
-      <Chatbot displayMode={displayMode}>
+      <Chatbot displayMode={displayMode} ref={chatbotRef}>
         <ChatbotConversationHistoryNav
           displayMode={displayMode}
           onDrawerToggle={() => {
@@ -372,7 +372,7 @@ export const EmbeddedChatbotDemo: React.FunctionComponent = () => {
               <ChatbotContent>
                 {/* Update the announcement prop on MessageBox whenever a new message is sent
                  so that users of assistive devices receive sufficient context  */}
-                <MessageBox announcement={announcement} ref={chatbotRef}>
+                <MessageBox announcement={announcement}>
                   <ChatbotWelcomePrompt
                     title="Hello, Chatbot User"
                     description="How may I help you today?"

diff --git a/packages/module/src/Chatbot/Chatbot.scss b/packages/module/src/Chatbot/Chatbot.scss
@@ -64,3 +64,7 @@ html.pf-chatbot-allow--docked {
   border-radius: 0;
   box-shadow: none;
 }
+
+.pf-chatbot-container--embedded {
+  min-height: 100%;
+}
diff --git a/packages/module/src/Chatbot/Chatbot.tsx b/packages/module/src/Chatbot/Chatbot.tsx
@@ -13,6 +13,8 @@ export interface ChatbotProps {
   isVisible?: boolean;
   /** Custom classname for the Chatbot component */
   className?: string;
+  /** Ref applied to chatbot  */
+  innerRef?: React.Ref<HTMLDivElement>;
 }
 
 export enum ChatbotDisplayMode {
@@ -22,11 +24,12 @@ export enum ChatbotDisplayMode {
   fullscreen = 'fullscreen'
 }
 
-export const Chatbot: React.FunctionComponent<ChatbotProps> = ({
+const ChatbotBase: React.FunctionComponent<ChatbotProps> = ({
   children,
   displayMode = ChatbotDisplayMode.default,
   isVisible = true,
   className,
+  innerRef,
   ...props
 }: ChatbotProps) => {
   // Configure docked mode
@@ -52,9 +55,18 @@ export const Chatbot: React.FunctionComponent<ChatbotProps> = ({
       animate={isVisible ? 'visible' : 'hidden'}
       {...props}
     >
-      {isVisible ? children : undefined}
+      {/* Ref is intended for use with skip to chatbot links, etc. */}
+      {isVisible ? (
+        <div className={`pf-chatbot-container pf-chatbot-container--${displayMode}`} tabIndex={0} ref={innerRef}>
+          {children}
+        </div>
+      ) : undefined}
     </motion.div>
   );
 };
 
+const Chatbot = React.forwardRef((props: ChatbotProps, ref: React.Ref<HTMLDivElement>) => (
+  <ChatbotBase innerRef={ref} {...props} />
+));
+
 export default Chatbot;