Add styled container for alert messages in both chatbots (#1742)

Introduces .ansible-chatbot-alert-outer and .ansible-chatbot-alert-inner classes to center and constrain alert messages in the chatbot UI. Updates the component to render alerts outside the main content area for improved layout and visibility.

Improve alert styling and layout in AnsibleChatbot

Refactored alert rendering in AnsibleChatbot to use new wrapper classes for better centering and max-width control. Updated SCSS to add .ansible-chatbot-alert-outer and adjust .ansible-chatbot-alert-inner to use rem units for consistency across both chatbot implementations.

Author: mabashian

aap_chatbot/src/AnsibleChatbot/AnsibleChatbot.scss

@@ -76,3 +76,13 @@
   --pf-v6-c-avatar--Height: 3rem;
   --pf-v6-c-avatar--BorderRadius: 0rem;
 }
+
+.ansible-chatbot-alert-outer {
+  padding: var(--pf-t--global--spacer--lg);
+  display: flex;
+  justify-content: center;
+}
+
+.ansible-chatbot-alert-inner {
+  max-width: 60rem;
+}

aap_chatbot/src/AnsibleChatbot/AnsibleChatbot.tsx

@@ -235,13 +235,9 @@ export const AnsibleChatbot: React.FunctionComponent<ChatbotContext> = (
                   </ChatbotHeaderActions>
                 </ChatbotHeaderMain>
               </ChatbotHeader>
-              <ChatbotContent>
-                <MessageBox>
-                  <ChatbotWelcomePrompt
-                    title={"Hello " + context?.username}
-                    description="How may I help you today?"
-                  />
-                  {alertMessage && (
+              {alertMessage && (
+                <div className="ansible-chatbot-alert-outer">
+                  <div className="ansible-chatbot-alert-inner">
                     <ChatbotAlert
                       variant={alertMessage.variant}
                       onClose={() => {
@@ -251,7 +247,15 @@ export const AnsibleChatbot: React.FunctionComponent<ChatbotContext> = (
                     >
                       {alertMessage.message}
                     </ChatbotAlert>
-                  )}
+                  </div>
+                </div>
+              )}
+              <ChatbotContent>
+                <MessageBox>
+                  <ChatbotWelcomePrompt
+                    title={"Hello " + context?.username}
+                    description="How may I help you today?"
+                  />
                   {(conversationId &&
                     setCurrentConversation(conversationId, messages)) || <></>}
                   {messages.map(

ansible_ai_connect_chatbot/src/AnsibleChatbot/AnsibleChatbot.scss

@@ -62,3 +62,13 @@
   --pf-v6-c-avatar--Height: 3rem;
   --pf-v6-c-avatar--BorderRadius: 0rem;
 }
+
+.ansible-chatbot-alert-outer {
+  padding: var(--pf-t--global--spacer--lg);
+  display: flex;
+  justify-content: center;
+}
+
+.ansible-chatbot-alert-inner {
+  max-width: 60rem;
+}

ansible_ai_connect_chatbot/src/AnsibleChatbot/AnsibleChatbot.tsx

@@ -353,14 +353,9 @@ export const AnsibleChatbot: React.FunctionComponent = () => {
                   </ChatbotHeaderOptionsDropdown>
                 </ChatbotHeaderActions>
               </ChatbotHeader>
-              <ChatbotContent>
-                <MessageBox>
-                  <ChatbotWelcomePrompt
-                    title="Hello, Ansible User"
-                    description="How may I help you today?"
-                    prompts={welcomePrompts}
-                  />
-                  {alertMessage && (
+              {alertMessage && (
+                <div className="ansible-chatbot-alert-outer">
+                  <div className="ansible-chatbot-alert-inner">
                     <ChatbotAlert
                       variant={alertMessage.variant}
                       onClose={() => {
@@ -370,7 +365,16 @@ export const AnsibleChatbot: React.FunctionComponent = () => {
                     >
                       {alertMessage.message}
                     </ChatbotAlert>
-                  )}
+                  </div>
+                </div>
+              )}
+              <ChatbotContent>
+                <MessageBox>
+                  <ChatbotWelcomePrompt
+                    title="Hello, Ansible User"
+                    description="How may I help you today?"
+                    prompts={welcomePrompts}
+                  />
                   {(conversationId &&
                     setCurrentConversation(conversationId, messages)) || <></>}
                   {messages.map(