PR to update lightspeed chatbot UI design for fixing AAP 32342

ansible_ai_connect/main/settings/base.py

@@ -36,7 +36,7 @@
 
 BASE_DIR: Path = files("ansible_ai_connect")
 ANSIBLE_AI_PROJECT_NAME = os.getenv("ANSIBLE_AI_PROJECT_NAME") or "Ansible AI Connect"
-ANSIBLE_AI_CHATBOT_NAME = os.getenv("ANSIBLE_AI_CHATBOT_NAME") or "Ansible AI Virtual Assistant"
+ANSIBLE_AI_CHATBOT_NAME = os.getenv("ANSIBLE_AI_CHATBOT_NAME") or "Ansible Lightspeed"
 
 # Quick-start development settings - unsuitable for production
 # See https://docs.djangoproject.com/en/4.1/howto/deployment/checklist/

ansible_ai_connect_chatbot/src/AnsibleChatbot/AnsibleChatbot.tsx

@@ -29,8 +29,8 @@ import ExpandIcon from "@patternfly/react-icons/dist/esm/icons/expand-icon";
 import OpenDrawerRightIcon from "@patternfly/react-icons/dist/esm/icons/open-drawer-right-icon";
 import OutlinedWindowRestoreIcon from "@patternfly/react-icons/dist/esm/icons/outlined-window-restore-icon";
 
-import AnsibleLogo from "./AAP2LineLightMode.png";
-import AnsibleLogoDark from "./AAP2LineDarkMode.png";
+import lightspeedLogo from "../assets/lightspeed.svg";
+import lightspeedLogoDark from "../assets/lightspeed_dark.svg";
 
 import "./AnsibleChatbot.scss";
 import { botMessage, useChatbot } from "../useChatbot/useChatbot";
@@ -106,10 +106,10 @@ export const AnsibleChatbot: React.FunctionComponent = () => {
           <ChatbotHeaderTitle>
             <Bullseye>
               <div className="show-light">
-                <Brand src={AnsibleLogo} alt="Ansible" />
+                <Brand src={lightspeedLogo} alt="Ansible" />
               </div>
               <div className="show-dark">
-                <Brand src={AnsibleLogoDark} alt="Ansible" />
+                <Brand src={lightspeedLogoDark} alt="Ansible" />
               </div>
             </Bullseye>
           </ChatbotHeaderTitle>

ansible_ai_connect_chatbot/src/useChatbot/useChatbot.ts

@@ -6,11 +6,12 @@ import type {
   ChatRequest,
   ChatResponse,
 } from "../types/Message";
+import logo from "../assets/lightspeed.svg";
+import userLogo from "../assets/user_logo.png";
 
 const userName = document.getElementById("user_name")?.innerText ?? "User";
 const botName =
-  document.getElementById("bot_name")?.innerText ??
-  "Ansible AI Virtual Assistant";
+  document.getElementById("bot_name")?.innerText ?? "Ansible Lightspeed";
 
 export const readCookie = (name: string): string | null => {
   const nameEQ = name + "=";
@@ -33,8 +34,7 @@ export const botMessage = (content: string): MessageProps => ({
   role: "bot",
   content,
   name: botName,
-  avatar:
-    "https://access.redhat.com/sites/default/files/images/product_icon-red_hat-ansible_automation_platform-rgb_0.png",
+  avatar: logo,
   timestamp: getTimestamp(),
   actions: {
     positive: { onClick: () => console.log("Good response") },
@@ -50,7 +50,9 @@ type AlertMessage = {
 
 const INITIAL_NOTICE: AlertMessage = {
   title: "Notice",
-  message: `Please do not include any personal or confidential information
+  message: `<This is a placeholder to inform the user of our chatbot disclaimer,
+to be determined at some point before we release to external customers.>
+Please do not include any personal or confidential information
 in your interaction with the virtual assistant. The tool is
 intended to assist with general queries.`,
   variant: "info",
@@ -71,8 +73,7 @@ export const useChatbot = () => {
       role: "user",
       content: message,
       name: userName,
-      avatar:
-        "https://developers.redhat.com/sites/default/files/inline-images/Skill%20development_0.png",
+      avatar: userLogo,
       timestamp: getTimestamp(),
       referenced_documents: [],
     };