chore(SkipToContent): Add direct example

packages/module/patternfly-docs/content/extensions/virtual-assistant/examples/Chatbot/Chatbot.md

@@ -25,6 +25,7 @@ import ChatbotContent from '@patternfly/virtual-assistant/dist/dynamic/ChatbotCo
 import ChatbotWelcomePrompt from '@patternfly/virtual-assistant/dist/dynamic/ChatbotWelcomePrompt';
 import MessageBox from '@patternfly/virtual-assistant/dist/dynamic/MessageBox';
 import Message from '@patternfly/virtual-assistant/dist/dynamic/Message';
+import ChatbotToggle from '@patternfly/virtual-assistant/dist/dynamic/ChatbotToggle';
 
 ### Container
 
@@ -71,3 +72,11 @@ To provide users with a more specific direction, you can also include optional w
 ```js file="./ChatbotWelcomePrompt.tsx"
 
 ```
+
+### Skip to content
+
+To provide page context, we recommend using a "skip to chatbot" button. This allows you to skip past other content on the page, directly to the chatbot content. The [PatternFly skip to content component](/components/skip-to-content) can be used for this purpose. To display this button, you must tab into the main window. We recommend putting focus on the toggle if the chatbot is closed, and the chatbot when it is open.
+
+```js file="./SkipToContent.tsx" isFullscreen
+
+```

packages/module/patternfly-docs/content/extensions/virtual-assistant/examples/Chatbot/SkipToContent.tsx

@@ -0,0 +1,40 @@
+import React from 'react';
+
+import { SkipToContent } from '@patternfly/react-core';
+import ChatbotToggle from '@patternfly/virtual-assistant/dist/dynamic/ChatbotToggle';
+import Chatbot, { ChatbotDisplayMode } from '@patternfly/virtual-assistant/dist/dynamic/Chatbot';
+
+export const ChatbotDemo: React.FunctionComponent = () => {
+  const [chatbotVisible, setChatbotVisible] = React.useState<boolean>(true);
+  const toggleRef = React.useRef<HTMLButtonElement>(null);
+  const chatbotRef = React.useRef<HTMLDivElement>(null);
+  const displayMode = ChatbotDisplayMode.default;
+
+  const handleSkipToContent = (e) => {
+    e.preventDefault();
+    if (!chatbotVisible && toggleRef.current) {
+      toggleRef.current.focus();
+    }
+    if (chatbotVisible && chatbotRef.current) {
+      chatbotRef.current.focus();
+    }
+  };
+
+  return (
+    <>
+      <SkipToContent onClick={handleSkipToContent} href="#">
+        Skip to chatbot
+      </SkipToContent>
+      <ChatbotToggle
+        toolTipLabel="Chatbot"
+        isChatbotVisible={chatbotVisible}
+        onToggleChatbot={() => setChatbotVisible(!chatbotVisible)}
+        id="chatbot-toggle"
+        ref={toggleRef}
+      />
+      <Chatbot isVisible={chatbotVisible} displayMode={displayMode} ref={chatbotRef}>
+        &nbsp;
+      </Chatbot>
+    </>
+  );
+};

packages/module/patternfly-docs/content/extensions/virtual-assistant/examples/demos/Chatbot.md

@@ -77,7 +77,7 @@ This demo displays a basic chatbot, which includes:
 
 6. A [`<ChatbotConversationHistoryNav>`](/patternfly-ai/chatbot/chatbot-conversation-history) toggled open and closed by the `<ChatbotHeaderMenu`> in the `<ChatbotHeader>`.
 
-7. A "skip to chatbot" button that allows you to skip to the end of the chatbot content via the [PatternFly skip to content component](/components/skip-to-content). To display this button you must tab into the main window.
+7. A "skip to chatbot" button that allows you to skip to the chatbot content via the [PatternFly skip to content component](/components/skip-to-content). To display this button you must tab into the main window.
 
 ```js file="./Chatbot.tsx" isFullscreen
 

packages/module/src/Chatbot/Chatbot.scss

@@ -70,6 +70,10 @@ html.pf-chatbot-allow--docked {
 }
 
 .pf-chatbot-container {
+  height: 100%;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
   // Hide chatbot
   &--hidden {
     pointer-events: none;