MGMT-21611: Add DevPreview badge to chatbot and update privacy msg

libs/chatbot/lib/components/ChatBot/AIAlert.tsx

@@ -1,4 +1,4 @@
-import { Alert, AlertActionCloseButton, Button } from '@patternfly-6/react-core';
+import { Alert, AlertActionCloseButton, Button, Stack, StackItem } from '@patternfly-6/react-core';
 import { ExternalLinkAltIcon } from '@patternfly-6/react-icons/dist/js/icons/external-link-alt-icon';
 import * as React from 'react';
 
@@ -18,23 +18,26 @@ const AIAlert = () => {
       variant="info"
       isInline
       title={
-        <>
-          This feature uses AI technology. Do not include personal or sensitive information in your
-          input. Interactions may be used to improve Red Hat's products or services. For more
-          information about Red Hat's privacy practices, please refer to the
-          <Button
-            variant="link"
-            isInline
-            icon={<ExternalLinkAltIcon />}
-            component="a"
-            href="https://www.redhat.com/en/about/privacy-policy"
-            iconPosition="end"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            Red Hat Privacy Statement
-          </Button>
-        </>
+        <Stack>
+          <StackItem>
+            This feature uses AI technology. Do not include personal or sensitive information in
+            your input. Interactions may be used to improve Red Hat's products or services.
+          </StackItem>
+          <StackItem>
+            <Button
+              variant="link"
+              isInline
+              icon={<ExternalLinkAltIcon />}
+              component="a"
+              href="https://www.redhat.com/en/about/privacy-policy"
+              iconPosition="end"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              Red Hat Privacy Statement
+            </Button>
+          </StackItem>
+        </Stack>
       }
       actionClose={
         <AlertActionCloseButton

libs/chatbot/lib/components/ChatBot/ChatBotWindow.tsx

@@ -27,6 +27,7 @@ import AIAlert from './AIAlert';
 import LightSpeedLogo from '../../assets/lightspeed-logo.svg';
 import UserAvatar from '../../assets/avatarimg.svg';
 import ChatBotHistory from './ChatBotHistory';
+import DevPreviewBadge from './DevPreviewBadge';
 
 export type ChatBotWindowProps = {
   error?: string;
@@ -130,6 +131,7 @@ const ChatBotWindow = ({
               </ChatbotHeaderTitle>
             </ChatbotHeaderMain>
             <ChatbotHeaderActions>
+              <DevPreviewBadge />
               <ChatbotHeaderCloseButton onClick={onClose} />
             </ChatbotHeaderActions>
           </ChatbotHeader>
@@ -207,13 +209,7 @@ const ChatBotWindow = ({
               onChange={(_, value) => setMsg(`${value}`)}
               ref={msgBarRef}
             />
-            <ChatbotFootnote
-              label="Always review AI generated content prior to use"
-              popover={{
-                title: 'Feature preview',
-                description: `This tool is a preview, and while we strive for accuracy, there's always a possibility of errors. We recommend that you review AI generated content prior to use.`,
-              }}
-            />
+            <ChatbotFootnote label="Always review AI generated content prior to use" />
           </ChatbotFooter>
         </>
       </ChatBotHistory>

libs/chatbot/lib/components/ChatBot/DevPreviewBadge.tsx

@@ -0,0 +1,38 @@
+import * as React from 'react';
+import { Button, Label, Popover, Stack, StackItem } from '@patternfly-6/react-core';
+import { ExternalLinkAltIcon, InfoCircleIcon } from '@patternfly-6/react-icons';
+
+const DevPreviewBadge = () => (
+  <Popover
+    bodyContent={
+      <Stack hasGutter>
+        <StackItem>
+          Developer preview features are not intended to be used in production environments. The
+          clusters deployed with the developer preview features are considered to be development
+          clusters and are not supported through the Red Hat Customer Portal case management system.
+        </StackItem>
+        <StackItem>
+          <Button
+            href="https://access.redhat.com/support/offerings/devpreview"
+            target="_blank"
+            rel="noopener noreferrer"
+            icon={<ExternalLinkAltIcon />}
+            iconPosition="end"
+            variant="link"
+            isInline
+          >
+            Learn more
+          </Button>
+        </StackItem>
+      </Stack>
+    }
+    position="left"
+    withFocusTrap={false}
+  >
+    <Label style={{ cursor: 'pointer' }} color="orange" icon={<InfoCircleIcon />}>
+      Developer Preview
+    </Label>
+  </Popover>
+);
+
+export default DevPreviewBadge;