-
-
-
-
-
-
-
-
+
-
-
+ }
+ secondChild={
-
-
+ }
+ firstChildDisplayName="ChatBot 1"
+ secondChildDisplayName="ChatBot 2"
+ />
| 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}
+
+