feat(Compare): Add compare layout

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, {
@@ -103,3 +104,24 @@ This demo displays an embedded ChatBot. Embedded ChatBots are meant to be placed
 ```js file="./EmbeddedChatbot.tsx" isFullscreen
 
 ```
+
+### 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.
+<br /><br />
+Your code structure should look like this:
+
+```noLive
+<Page ... >
+  <div className="pf-chatbot__compare-container">
+    <Compare ... />
+    <ChatbotFooter ... >
+      <MessageBar ... />
+    </ChatbotFooter>
+  </div>
+</Page>
+```
+
+```js file="./EmbeddedComparisonChatbot.tsx" isFullscreen
+
+```

packages/module/patternfly-docs/content/extensions/chatbot/examples/demos/EmbeddedComparisonChatbot.tsx

@@ -0,0 +1,206 @@
+import React from 'react';
+
+import {
+  Page,
+  Masthead,
+  MastheadMain,
+  MastheadBrand,
+  MastheadLogo,
+  PageSidebarBody,
+  PageSidebar,
+  MastheadToggle,
+  PageToggleButton
+} from '@patternfly/react-core';
+import Chatbot, { ChatbotDisplayMode } from '@patternfly/chatbot/dist/dynamic/Chatbot';
+import ChatbotContent from '@patternfly/chatbot/dist/dynamic/ChatbotContent';
+import ChatbotWelcomePrompt from '@patternfly/chatbot/dist/dynamic/ChatbotWelcomePrompt';
+import ChatbotFooter from '@patternfly/chatbot/dist/dynamic/ChatbotFooter';
+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';
+
+export const CompareChild = ({ name, input, hasNewInput, setIsSendButtonDisabled }) => {
+  const [messages, setMessages] = React.useState<MessageProps[]>([]);
+  const [announcement, setAnnouncement] = React.useState<string>();
+  const scrollToBottomRef = React.useRef<HTMLDivElement>(null);
+  const displayMode = ChatbotDisplayMode.embedded;
+
+  // you will likely want to come up with your own unique id function; this is for demo purposes only
+  const generateId = () => {
+    const id = Date.now() + Math.random();
+    return id.toString();
+  };
+
+  const handleSend = (input: string) => {
+    const date = new Date();
+    const newMessages: MessageProps[] = [];
+    messages.forEach((message) => newMessages.push(message));
+    newMessages.push({
+      avatar: userAvatar,
+      avatarProps: { isBordered: true },
+      id: generateId(),
+      name: 'You',
+      role: 'user',
+      content: input,
+      timestamp: `${date?.toLocaleDateString()} ${date?.toLocaleTimeString()}`
+    });
+    newMessages.push({
+      avatar: patternflyAvatar,
+      id: generateId(),
+      name,
+      role: 'bot',
+      timestamp: `${date?.toLocaleDateString()} ${date?.toLocaleTimeString()}`,
+      isLoading: true
+    });
+    setMessages(newMessages);
+    // make announcement to assistive devices that new messages have been added
+    setAnnouncement(`Message from You: ${input}. Message from ${name} is loading.`);
+
+    // this is for demo purposes only; in a real situation, there would be an API response we would wait for
+    setTimeout(() => {
+      const loadedMessages: MessageProps[] = [];
+      // we can't use structuredClone since messages contains functions, but we can't mutate
+      // items that are going into state or the UI won't update correctly
+      newMessages.forEach((message) => loadedMessages.push(message));
+      loadedMessages.pop();
+      loadedMessages.push({
+        id: generateId(),
+        role: 'bot',
+        content: `API response from ${name} goes here`,
+        name,
+        avatar: patternflyAvatar,
+        isLoading: false,
+        actions: {
+          // eslint-disable-next-line no-console
+          positive: { onClick: () => console.log('Good response') },
+          // eslint-disable-next-line no-console
+          negative: { onClick: () => console.log('Bad response') },
+          // eslint-disable-next-line no-console
+          copy: { onClick: () => console.log('Copy') },
+          // eslint-disable-next-line no-console
+          share: { onClick: () => console.log('Share') },
+          // eslint-disable-next-line no-console
+          listen: { onClick: () => console.log('Listen') }
+        },
+        timestamp: date.toLocaleString()
+      });
+      setMessages(loadedMessages);
+      // make announcement to assistive devices that new message has loaded
+      setAnnouncement(`Message from ${name}: API response goes here`);
+      setIsSendButtonDisabled(false);
+    }, 5000);
+  };
+
+  React.useEffect(() => {
+    if (input) {
+      handleSend(input);
+    }
+  }, [hasNewInput]);
+
+  // Auto-scrolls to the latest message
+  React.useEffect(() => {
+    // don't scroll the first load, but scroll if there's a current stream or a new source has popped up
+    if (messages.length > 0) {
+      scrollToBottomRef.current?.scrollIntoView();
+    }
+  }, [messages]);
+
+  return (
+    <Chatbot displayMode={displayMode}>
+      <ChatbotHeader>
+        <ChatbotHeaderMain>{name}</ChatbotHeaderMain>
+      </ChatbotHeader>
+      <ChatbotContent>
+        <MessageBox ariaLabel={`Scrollable message log for ${name}`} announcement={announcement}>
+          <ChatbotWelcomePrompt title="Hello, Chatbot User" description="How may I help you today?" />
+          {messages.map((message) => (
+            <Message key={message.id} {...message} />
+          ))}
+          <div ref={scrollToBottomRef}></div>
+        </MessageBox>
+      </ChatbotContent>
+    </Chatbot>
+  );
+};
+
+export const EmbeddedComparisonChatbotDemo: React.FunctionComponent = () => {
+  const [input, setInput] = React.useState<string>();
+  const [hasNewInput, setHasNewInput] = React.useState(false);
+  const [isSidebarOpen, setIsSidebarOpen] = React.useState(false);
+  const [isSendButtonDisabled, setIsSendButtonDisabled] = React.useState(false);
+
+  const handleSend = (value: string) => {
+    setInput(value);
+    setHasNewInput(!hasNewInput);
+    setIsSendButtonDisabled(true);
+  };
+
+  const masthead = (
+    <Masthead>
+      <MastheadMain>
+        <MastheadToggle>
+          <PageToggleButton
+            variant="plain"
+            aria-label="Global navigation"
+            isSidebarOpen={isSidebarOpen}
+            onSidebarToggle={() => setIsSidebarOpen(!isSidebarOpen)}
+            id="fill-nav-toggle"
+          >
+            <BarsIcon />
+          </PageToggleButton>
+        </MastheadToggle>
+        <MastheadBrand>
+          <MastheadLogo href="https://patternfly.org" target="_blank">
+            Logo
+          </MastheadLogo>
+        </MastheadBrand>
+      </MastheadMain>
+    </Masthead>
+  );
+
+  const sidebar = (
+    <PageSidebar isSidebarOpen={isSidebarOpen} id="fill-sidebar">
+      <PageSidebarBody>Navigation</PageSidebarBody>
+    </PageSidebar>
+  );
+
+  return (
+    <Page masthead={masthead} sidebar={sidebar} isContentFilled>
+      <div className="pf-chatbot__compare-container">
+        <Compare
+          firstChild={
+            <CompareChild
+              input={input}
+              hasNewInput={hasNewInput}
+              name="ChatBot 1"
+              setIsSendButtonDisabled={setIsSendButtonDisabled}
+            />
+          }
+          secondChild={
+            <CompareChild
+              input={input}
+              hasNewInput={hasNewInput}
+              name="ChatBot 2"
+              setIsSendButtonDisabled={setIsSendButtonDisabled}
+            />
+          }
+          firstChildDisplayName="ChatBot 1"
+          secondChildDisplayName="ChatBot 2"
+        />
+        <ChatbotFooter>
+          <MessageBar
+            onSendMessage={handleSend}
+            hasAttachButton={false}
+            alwayShowSendButton
+            isSendButtonDisabled={isSendButtonDisabled}
+          />
+        </ChatbotFooter>
+      </div>
+    </Page>
+  );
+};

packages/module/src/Compare/Compare.scss

@@ -0,0 +1,72 @@
+.pf-chatbot__compare-container {
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  height: 100%;
+}
+.pf-chatbot__compare-toggle {
+  width: 100%;
+
+  .pf-v6-c-toggle-group__button {
+    width: 100%;
+    display: flex;
+    justify-content: center;
+  }
+}
+.pf-chatbot__compare {
+  display: flex;
+  height: 100%;
+  width: 100%;
+
+  @media screen and (max-width: 900px) {
+    overflow-y: auto;
+  }
+
+  .pf-chatbot__compare-item:first-of-type {
+    border-right: 1px solid var(--pf-t--global--border--color--default);
+
+    @media screen and (max-width: 900px) {
+      border-right: 0px;
+    }
+  }
+}
+
+.pf-chatbot__compare-item {
+  flex: 1;
+
+  .pf-chatbot--embedded .pf-chatbot__messagebox {
+    width: 100%;
+  }
+
+  .pf-chatbot__content {
+    padding: 0;
+  }
+
+  .pf-chatbot.pf-chatbot--embedded {
+    @media screen and (max-width: 900px) {
+      height: 100%;
+    }
+  }
+}
+.pf-chatbot__compare-item-hidden {
+  display: block;
+
+  @media screen and (max-width: 900px) {
+    display: none;
+  }
+}
+
+.pf-chatbot__compare-mobile-controls {
+  padding: var(--pf-t--global--spacer--md) var(--pf-t--global--spacer--lg) 0 var(--pf-t--global--spacer--lg);
+  display: none;
+  background-color: var(--pf-t--global--background--color--secondary--default);
+  position: sticky;
+  top: 0;
+  z-index: 9999;
+
+  @media screen and (max-width: 900px) {
+    display: flex;
+    flex-direction: column;
+    gap: var(--pf-t--global--spacer--md);
+  }
+}

packages/module/src/Compare/Compare.test.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import Compare from './Compare';
+
+const firstChild = (
+  <div>
+    <h1>Child 1</h1>
+  </div>
+);
+
+const secondChild = (
+  <div>
+    <h1>Child 2</h1>
+  </div>
+);
+
+describe('Compare', () => {
+  it('should render compare correctly', () => {
+    render(
+      <Compare
+        firstChildDisplayName="Child 1"
+        secondChildDisplayName="Child 2"
+        firstChild={firstChild}
+        secondChild={secondChild}
+      />
+    );
+    expect(screen.getByRole('heading', { name: /Child 1/i })).toBeTruthy();
+    expect(screen.getByRole('heading', { name: /Child 2/i })).toBeTruthy();
+  });
+});