diff --git a/packages/module/patternfly-docs/content/extensions/chatbot/examples/demos/Chatbot.md b/packages/module/patternfly-docs/content/extensions/chatbot/examples/demos/Chatbot.md index bd890a0a..33620492 100644 --- a/packages/module/patternfly-docs/content/extensions/chatbot/examples/demos/Chatbot.md +++ b/packages/module/patternfly-docs/content/extensions/chatbot/examples/demos/Chatbot.md @@ -34,6 +34,7 @@ import ChatbotFooter, { ChatbotFootnote } from '@patternfly/chatbot/dist/dynamic import MessageBar from '@patternfly/chatbot/dist/dynamic/MessageBar'; import MessageBox from '@patternfly/chatbot/dist/dynamic/MessageBox'; import Message from '@patternfly/chatbot/dist/dynamic/Message'; +import Compare from '@patternfly/chatbot/dist/dynamic/Compare'; import ChatbotConversationHistoryNav from '@patternfly/chatbot/dist/dynamic/ChatbotConversationHistoryNav'; import ChatbotHeader, { @@ -107,6 +108,19 @@ This demo displays an embedded ChatBot. Embedded ChatBots are meant to be placed ### Comparing ChatBots To let users compare how different ChatBots respond to the same prompt, you can add multiple ChatBots within the same window. The following demo illustrates a comparison view pattern that allows users to toggle between different conversations in a single ChatBot window. +

+Your code structure should look like this: + +```noLive + +
+ + + + +
+ +``` ```js file="./EmbeddedComparisonChatbot.tsx" isFullscreen diff --git a/packages/module/patternfly-docs/content/extensions/chatbot/examples/demos/EmbeddedComparisonChatbot.tsx b/packages/module/patternfly-docs/content/extensions/chatbot/examples/demos/EmbeddedComparisonChatbot.tsx index 622274b2..b90bb265 100644 --- a/packages/module/patternfly-docs/content/extensions/chatbot/examples/demos/EmbeddedComparisonChatbot.tsx +++ b/packages/module/patternfly-docs/content/extensions/chatbot/examples/demos/EmbeddedComparisonChatbot.tsx @@ -9,9 +9,7 @@ import { PageSidebarBody, PageSidebar, MastheadToggle, - PageToggleButton, - ToggleGroup, - ToggleGroupItem + PageToggleButton } from '@patternfly/react-core'; import Chatbot, { ChatbotDisplayMode } from '@patternfly/chatbot/dist/dynamic/Chatbot'; import ChatbotContent from '@patternfly/chatbot/dist/dynamic/ChatbotContent'; @@ -21,6 +19,7 @@ import MessageBar from '@patternfly/chatbot/dist/dynamic/MessageBar'; import MessageBox from '@patternfly/chatbot/dist/dynamic/MessageBox'; import Message, { MessageProps } from '@patternfly/chatbot/dist/dynamic/Message'; import ChatbotHeader, { ChatbotHeaderMain } from '@patternfly/chatbot/dist/dynamic/ChatbotHeader'; +import Compare from '@patternfly/chatbot/dist/dynamic/Compare'; import { BarsIcon } from '@patternfly/react-icons'; import userAvatar from '../Messages/user_avatar.svg'; import patternflyAvatar from '../Messages/patternfly_avatar.jpg'; @@ -113,7 +112,7 @@ export const CompareChild = ({ name, input, hasNewInput, setIsSendButtonDisabled return ( - + {name} @@ -132,40 +131,9 @@ export const CompareChild = ({ name, input, hasNewInput, setIsSendButtonDisabled export const EmbeddedComparisonChatbotDemo: React.FunctionComponent = () => { const [input, setInput] = React.useState(); const [hasNewInput, setHasNewInput] = React.useState(false); - const [isSelected, setIsSelected] = React.useState('toggle-group-chatbot-1'); - const [showFirstChatbot, setShowFirstChatbot] = React.useState(true); - const [showSecondChatbot, setShowSecondChatbot] = React.useState(false); const [isSidebarOpen, setIsSidebarOpen] = React.useState(false); const [isSendButtonDisabled, setIsSendButtonDisabled] = React.useState(false); - React.useEffect(() => { - // we want to show the first if we switch to the mobile toggle view - // and reset/switch back to normal otherwise - const updateChatbotVisibility = () => { - if (window.innerWidth >= 901) { - setShowFirstChatbot(true); - setShowSecondChatbot(true); - } else { - setShowFirstChatbot(true); - setShowSecondChatbot(false); - setIsSelected('toggle-group-chatbot-1'); - } - }; - window.addEventListener('resize', updateChatbotVisibility); - - return () => { - window.removeEventListener('resize', updateChatbotVisibility); - }; - }, []); - - // this only happens on mobile - const handleChildToggleClick = (event) => { - const id = event.currentTarget.id; - setIsSelected(id); - setShowSecondChatbot(!showSecondChatbot); - setShowFirstChatbot(!showFirstChatbot); - }; - const handleSend = (value: string) => { setInput(value); setHasNewInput(!hasNewInput); @@ -204,46 +172,26 @@ export const EmbeddedComparisonChatbotDemo: React.FunctionComponent = () => { return (
-
- - - - -
-
-
+ -
-
+ } + secondChild={ -
-
+ } + firstChildDisplayName="ChatBot 1" + secondChildDisplayName="ChatBot 2" + /> +

Child 1

+
+); + +const secondChild = ( +
+

Child 2

+
+); + +describe('Compare', () => { + it('should render compare correctly', () => { + render( + + ); + expect(screen.getByRole('heading', { name: /Child 1/i })).toBeTruthy(); + expect(screen.getByRole('heading', { name: /Child 2/i })).toBeTruthy(); + }); +}); diff --git a/packages/module/src/Compare/Compare.tsx b/packages/module/src/Compare/Compare.tsx new file mode 100644 index 00000000..87176c3c --- /dev/null +++ b/packages/module/src/Compare/Compare.tsx @@ -0,0 +1,98 @@ +import React, { PropsWithChildren } from 'react'; +import { ToggleGroup, ToggleGroupItem } from '@patternfly/react-core'; + +interface CompareProps { + /** First of two children to render */ + firstChild: React.ReactNode; + /** Second of two children to render */ + secondChild: React.ReactNode; + /** Display name for first child, used in mobile toggle */ + firstChildDisplayName: string; + /** Display name for second child, used in mobile toggle */ + secondChildDisplayName: string; + /** Aria label for mobile toggle group */ + toggleGroupAriaLabel?: string; + /** Callback for when mobile toggle is used */ + onToggleClick?: (event: MouseEvent | React.MouseEvent | React.KeyboardEvent) => void; +} + +export const Compare = ({ + firstChild, + secondChild, + firstChildDisplayName, + secondChildDisplayName, + onToggleClick, + toggleGroupAriaLabel = 'Select which chatbot to display' +}: PropsWithChildren) => { + const [isSelected, setIsSelected] = React.useState('toggle-group-chatbot-1'); + const [showFirstChatbot, setShowFirstChatbot] = React.useState(true); + const [showSecondChatbot, setShowSecondChatbot] = React.useState(false); + + React.useEffect(() => { + // we want to show the first if we switch to the mobile toggle view + // and reset/switch back to normal otherwise + const updateChatbotVisibility = () => { + if (window.innerWidth >= 901) { + setShowFirstChatbot(true); + setShowSecondChatbot(true); + } else { + setShowFirstChatbot(true); + setShowSecondChatbot(false); + setIsSelected('toggle-group-chatbot-1'); + } + }; + window.addEventListener('resize', updateChatbotVisibility); + + return () => { + window.removeEventListener('resize', updateChatbotVisibility); + }; + }, []); + + // this only happens on mobile + const handleChildToggleClick = ( + event: MouseEvent | React.MouseEvent | React.KeyboardEvent + ) => { + const id = event.currentTarget.id; + setIsSelected(id); + setShowSecondChatbot(!showSecondChatbot); + setShowFirstChatbot(!showFirstChatbot); + onToggleClick && onToggleClick(event); + }; + + return ( + <> +
+ + + + +
+
+
+ {firstChild} +
+
+ {secondChild} +
+
+ + ); +}; + +export default Compare; diff --git a/packages/module/src/Compare/index.ts b/packages/module/src/Compare/index.ts new file mode 100644 index 00000000..ad502674 --- /dev/null +++ b/packages/module/src/Compare/index.ts @@ -0,0 +1,2 @@ +export { default } from './Compare'; +export * from './Compare'; diff --git a/packages/module/src/index.ts b/packages/module/src/index.ts index 700c7caf..6e1cc449 100644 --- a/packages/module/src/index.ts +++ b/packages/module/src/index.ts @@ -39,6 +39,9 @@ export * from './ChatbotWelcomePrompt'; export { default as CodeModal } from './CodeModal'; export * from './CodeModal'; +export { default as Compare } from './Compare'; +export * from './Compare'; + export { default as FileDetails } from './FileDetails'; export * from './FileDetails';