From c5920616f96b506fd9b877e754f5c9bff1bb4d16 Mon Sep 17 00:00:00 2001
From: benjamin-levine <bjl348@nau.edu>
Date: Wed, 15 Apr 2026 14:39:52 -0700
Subject: [PATCH] Pet ChatBot updates

---
 public/styles/home.css | 58 +++++++++++++++++++++++++++++++++++++++++-
 views/home.ejs         | 12 +++++++--
 2 files changed, 67 insertions(+), 3 deletions(-)

diff --git a/public/styles/home.css b/public/styles/home.css
index f3a8378..937f535 100644
--- a/public/styles/home.css
+++ b/public/styles/home.css
@@ -731,7 +731,6 @@ html {
 
 .ai-message {
   align-self: flex-start;
-  background-color: #6FAF9B;
   padding: 8px 12px;
   border-radius: 12px;
   max-width: 90%;
@@ -1019,3 +1018,60 @@ body.buddy-modal-open {
 
 }
 
+#send{
+  border-radius: 12px;
+  background-color: white;
+  color: black;
+  animation: page-load 1s ease-out forwards;
+}
+
+.my-ai-message{
+  display: flex;
+  align-items: start;
+}
+
+.user-message{
+    display: flex;
+    align-self: end;
+    background-color: #F4A261;
+    padding: 8px 12px;
+}
+
+.ai-message-content{
+    display: flex;
+    background-color: #6FAF9B;
+    padding: 8px 12px;
+}
+
+.ai-icon{
+  text-align: left;
+  padding-right: 15px;
+  width: 5vh;
+  height: 5vh;
+  
+}
+
+.user-message {
+  align-self: flex-end;
+  padding: 8px 12px;
+  border-radius: 12px;
+  max-width: 80%;
+  opacity: 100%;
+}
+
+.ai-message {
+  display: flex;
+  align-items: start;
+}
+
+h1 {
+  font-weight: 600;
+  margin-bottom: 4px;
+}
+
+h3 {
+  font-weight: 600;
+  margin-top: 2px;
+  margin-bottom: 6px;
+}
+
diff --git a/views/home.ejs b/views/home.ejs
index 7759863..a30fe99 100644
--- a/views/home.ejs
+++ b/views/home.ejs
@@ -398,9 +398,16 @@
     aiEl.classList.add("message", "ai-message");
 
     const aiElContent = document.createElement("div");
-    aiElContent.classList.add("message", "ai-message-content");
+    const aiIcon = document.createElement("img");
+    aiIcon.src = getBuddySprite(buddyProfile.buddyType, petMood);
+
+    
+    aiIcon.classList.add("ai-icon");
+    aiElContent.classList.add("ai-message", "ai-message-content");
 
     petMessagesDiv.insertBefore(aiEl, petLoadingEl);
+    aiEl.appendChild(aiIcon);
+    aiEl.appendChild(aiElContent);
 
     const reader = resp.body.getReader();
     const decoder = new TextDecoder("utf-8");
@@ -425,7 +432,7 @@
         aiText += data;
         const formatted = formatAiText(aiText);
         aiElContent.textContent = formatted;
-        aiEl.appendChild(aiElContent);
+        //aiEl.appendChild(aiElContent);
       });
     }
     petLoadingEl.style.visibility = "hidden";
@@ -433,6 +440,7 @@
     petMessagesDiv.scrollTop = petMessagesDiv.scrollHeight;
   }
 
+
   petSendBtn.onclick = sendPetMessage;
   petPromptInput.onkeydown = (e) => {
     if (e.key === "Enter") sendPetMessage();