chore(docs): Adjust examples

patternfly · Nov 19, 2024 · b743188 · b743188
1 parent 593e8e7
commit b743188
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 40 deletions.
diff --git a/...rnfly-docs/content/extensions/virtual-assistant/examples/UI/ChatbotWelcomeInteraction.tsx b/...rnfly-docs/content/extensions/virtual-assistant/examples/UI/ChatbotWelcomeInteraction.tsx
@@ -19,16 +19,6 @@ export const ChatbotWelcomeInteractionDemo: React.FunctionComponent = () => {
   const scrollToBottomRef = React.useRef<HTMLDivElement>(null);
   const isVisible = true;
   const displayMode = ChatbotDisplayMode.default;
-  const welcomePrompts = [
-    {
-      title: 'Topic 1',
-      message: 'Helpful prompt for Topic 1'
-    },
-    {
-      title: 'Topic 2',
-      message: 'Helpful prompt for Topic 2'
-    }
-  ];
 
   // you will likely want to come up with your own unique id function; this is for demo purposes only
   const generateId = () => {
@@ -125,11 +115,7 @@ export const ChatbotWelcomeInteractionDemo: React.FunctionComponent = () => {
         so that users of assistive devices receive sufficient context  */}
           <MessageBox announcement={announcement} position={position}>
             {messages.length === 0 && (
-              <ChatbotWelcomePrompt
-                title="Hello, Chatbot User"
-                description="How may I help you today?"
-                prompts={welcomePrompts}
-              />
+              <ChatbotWelcomePrompt title="Hello, Chatbot User" description="How may I help you today?" />
             )}
             {/* This code block enables scrolling to the top of the last message.
           You can instead choose to move the div with scrollToBottomRef on it below 

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
@@ -116,21 +116,21 @@ Your code structure should look like this:
 
 **Note**: When messages update, it is important to announce new messages to users of assistive technology. To do this, make sure to set the `announcement` prop on `<MessageBox>` whenever you display a new message in `<MessageBox>`. You can view this in action in our [basic chatbot](/patternfly-ai/chatbot/overview/demo#basic-chatbot) and [embedded chatbot](/patternfly-ai/chatbot/overview/demo#embedded-chatbot) demos.
 
-### Welcome prompt
+### Welcome message
 
 To introduce users to the chatbot experience, a welcome prompt can fill the message box before they input their first message. This brief message should follow our [conversation design guidelines](/patternfly-ai/conversation-design) to welcome users to the chatbot experience and encourage them to interact.
 
-To provide users with a more specific direction, you can also include optional welcome prompts.
+The welcome prompt can be dismissed once a user sends their first message. To reposition the direction of the welcome content, you can change the `position` of the `<MessageBox>` component.
 
-```js file="./ChatbotWelcomePrompt.tsx"
+```js file="./ChatbotWelcomeInteraction.tsx" isFullscreen
 
 ```
 
-### Welcome interaction
+### Welcome prompt
 
-The welcome prompt can be turned off when a user inputs their first message. You can also reposition the direction of the content via the `position` prop on `MessageBox`.
+To provide users with a more specific direction, you can also include optional welcome prompts.
 
-```js file="./ChatbotWelcomeInteraction.tsx" isFullscreen
+```js file="./ChatbotWelcomePrompt.tsx"
 
 ```
 

diff --git a/packages/module/src/ChatbotWelcomePrompt/ChatbotWelcomePrompt.tsx b/packages/module/src/ChatbotWelcomePrompt/ChatbotWelcomePrompt.tsx
@@ -42,22 +42,24 @@ export const ChatbotWelcomePrompt: React.FunctionComponent<ChatbotWelcomePromptP
       <span className="pf-chatbot__question">{description}</span>
     </Content>
 
-    <div className="pf-chatbot__prompt-suggestions">
-      {prompts?.map((prompt, index) => (
-        <Card key={`welcome-prompt-${index}`} className="pf-chatbot__prompt-suggestion" isClickable>
-          <CardHeader
-            selectableActions={{
-              onClickAction: prompt.onClick,
-              selectableActionId: `welcome-prompt-input-${index}`,
-              selectableActionAriaLabelledby: `welcome-prompt-title-${index}`
-            }}
-          >
-            <CardTitle id={`welcome-prompt-title-${index}`}>{prompt.title}</CardTitle>
-          </CardHeader>
-          {prompt.message && <CardBody>{prompt.message}</CardBody>}
-        </Card>
-      ))}
-    </div>
+    {prompts && (
+      <div className="pf-chatbot__prompt-suggestions">
+        {prompts?.map((prompt, index) => (
+          <Card key={`welcome-prompt-${index}`} className="pf-chatbot__prompt-suggestion" isClickable>
+            <CardHeader
+              selectableActions={{
+                onClickAction: prompt.onClick,
+                selectableActionId: `welcome-prompt-input-${index}`,
+                selectableActionAriaLabelledby: `welcome-prompt-title-${index}`
+              }}
+            >
+              <CardTitle id={`welcome-prompt-title-${index}`}>{prompt.title}</CardTitle>
+            </CardHeader>
+            {prompt.message && <CardBody>{prompt.message}</CardBody>}
+          </Card>
+        ))}
+      </div>
+    )}
   </div>
 );
 

diff --git a/packages/module/src/ChatbotWelcomePrompt/__snapshots__/ChatbotWelcomePrompt.test.tsx.snap b/packages/module/src/ChatbotWelcomePrompt/__snapshots__/ChatbotWelcomePrompt.test.tsx.snap
@@ -24,9 +24,6 @@ exports[`ChatbotWelcomePrompt should render welcome prompt 1`] = `
         How may I help you today?
       </span>
     </h1>
-    <div
-      class="pf-chatbot__prompt-suggestions"
-    />
   </div>
 </div>
 `;
-Original file line number
+Diff line change
@@ Expand Up @@
             How may I help you today?
           </span>
         </h1>
-        <div
-          class="pf-chatbot__prompt-suggestions"
-        />
       </div>
     </div>
     `;