diff --git a/packages/module/patternfly-docs/content/extensions/virtual-assistant/examples/UI/ChatbotWelcomeInteraction.tsx b/packages/module/patternfly-docs/content/extensions/virtual-assistant/examples/UI/ChatbotWelcomeInteraction.tsx index 04486c0f..770c7138 100644 --- a/packages/module/patternfly-docs/content/extensions/virtual-assistant/examples/UI/ChatbotWelcomeInteraction.tsx +++ b/packages/module/patternfly-docs/content/extensions/virtual-assistant/examples/UI/ChatbotWelcomeInteraction.tsx @@ -19,16 +19,6 @@ export const ChatbotWelcomeInteractionDemo: React.FunctionComponent = () => { const scrollToBottomRef = React.useRef(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 */} {messages.length === 0 && ( - + )} {/* 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/packages/module/patternfly-docs/content/extensions/virtual-assistant/examples/UI/UI.md b/packages/module/patternfly-docs/content/extensions/virtual-assistant/examples/UI/UI.md index 8d384ad5..221d5da3 100644 --- a/packages/module/patternfly-docs/content/extensions/virtual-assistant/examples/UI/UI.md +++ b/packages/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 `` whenever you display a new message in ``. 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 `` 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 index b95c5ea7..afe7a6e2 100644 --- a/packages/module/src/ChatbotWelcomePrompt/ChatbotWelcomePrompt.tsx +++ b/packages/module/src/ChatbotWelcomePrompt/ChatbotWelcomePrompt.tsx @@ -42,22 +42,24 @@ export const ChatbotWelcomePrompt: React.FunctionComponent{description} -
- {prompts?.map((prompt, index) => ( - - - {prompt.title} - - {prompt.message && {prompt.message}} - - ))} -
+ {prompts && ( +
+ {prompts?.map((prompt, index) => ( + + + {prompt.title} + + {prompt.message && {prompt.message}} + + ))} +
+ )} ); diff --git a/packages/module/src/ChatbotWelcomePrompt/__snapshots__/ChatbotWelcomePrompt.test.tsx.snap b/packages/module/src/ChatbotWelcomePrompt/__snapshots__/ChatbotWelcomePrompt.test.tsx.snap index c5ba441d..f6f8cff2 100644 --- 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? -
`;