fix

src/app/chat/api.service.ts

@@ -82,4 +82,28 @@ export class ApiService {
   askQuestion(userInput: string, _sessionId: string | null): Observable<any> {
     return this.explainGrammar(userInput);
   }
+
+
+
+  // add method in ApiService
+  synthesizeAudio(text: string, language = 'en', referenceFiles?: string[]) {
+    const payload: any = { text, language };
+    if (referenceFiles) payload.reference_files = referenceFiles;
+    return this.http.post<{ audio_url: string }>(`${this.baseUrl}/synthesize-audio`, payload);
+  }
+
+  // New: synthesize video (calls backend D-ID flow)
+  synthesizeVideo(text: string, language = 'en') {
+    const payload: any = { text, language };
+    return this.http.post<{ video_url: string }>(`${this.baseUrl}/synthesize-video`, payload);
+  }
+
+  punctuate(text: string): Observable<any> {
+    const headers = {
+      'Content-Type': 'application/json',
+      'X-User': localStorage.getItem('username') || ''
+    };
+    // Use the port your backend runs on (your local runner uses 7000)
+    return this.http.post<any>(`${this.baseUrl}/punctuate`, { text }, { headers });
+  }
 }

src/app/chat/chat.component.css

@@ -1,9 +1,10 @@
+/* Header Container */
 .header-container {
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: 0vw 1vw;
-  background-color: #03182d;
+  background-color: #009688;
   box-shadow: 0 0.4vw 0.8vw rgba(0, 0, 0, 0.2);
   width: 100%;
   position: sticky;
@@ -15,7 +16,7 @@
   max-width: 5vw;
   height: auto;
   background: #e5e7eb;
-  border-radius: 50%;
+  border-radius: 1vw;
   margin: 0.5vw;
 }
 
@@ -45,6 +46,7 @@ h1 {
   font-display: swap;
 }
 
+/* Layout */
 .chat-container {
   display: flex;
   flex-direction: column;
@@ -64,17 +66,6 @@ h1 {
   opacity: 0.2;
 }
 
-.chat-header {
-  text-align: center;
-  background: linear-gradient(to right, #4ca1af, #6ac5cb);
-  color: white;
-  padding: 0px 0;
-  font-size: 2.2rem;
-  font-weight: bold;
-  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
-  flex-shrink: 0;
-}
-
 .chat-box {
   display: flex;
   flex-direction: column;
@@ -84,14 +75,25 @@ h1 {
   background-color: rgba(35, 34, 32, 0.43);
   scroll-behavior: smooth;
   flex-grow: 1;
-  padding-bottom: 90px;
+  padding-bottom: var(--input-gap, 120px);
+  scroll-padding-bottom: var(--input-gap, 120px);
 }
 
+.input-container {
+  display: flex;
+  flex-direction: column-reverse;
+  width: 100%;
+  position: sticky;
+  bottom: 0;
+  z-index: 10;
+}
+
+/* Input */
 .input-box {
   display: flex;
   gap: 10px;
   padding: 8px;
-  background: #03182d;
+  background: #009688;
   box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.1);
   flex-shrink: 0;
   width: 100%;
@@ -111,8 +113,8 @@ h1 {
     line-height: 1.2;
     border: 1px solid rgb(93, 145, 195);
     border-radius: 8px;
-    background: rgba(255, 255, 255, 0.04);
-    color: white;
+    background: #fff;
+    color: black;
     outline: none;
     transition: border-color 0.3s ease, box-shadow 0.3s ease;
     width: 100%;
@@ -122,19 +124,9 @@ h1 {
     .input-box textarea:focus {
       border-color: rgb(135, 185, 235);
       box-shadow: 0 0 5px rgba(93, 145, 195, 0.6);
-      text-align: left;
-      vertical-align: middle;
-      line-height: normal;
-      font-size: 1rem;
-      color: white;
-      font-weight: bold;
     }
 
     .input-box textarea::placeholder {
-      text-align: left;
-      vertical-align: middle;
-      line-height: normal;
-      font-size: 1rem;
       color: rgba(255, 255, 255, 0.5);
     }
 
@@ -144,7 +136,7 @@ h1 {
     display: flex;
     align-items: center;
     justify-content: center;
-    background: #5d91c3;
+    background: white;
     border: none;
     border-radius: 8px;
     cursor: pointer;
@@ -161,69 +153,7 @@ h1 {
   object-fit: contain;
 }
 
-.resume-icon {
-  width: 40px;
-  height: 40px;
-  object-fit: contain;
-}
-
-.pause-icon {
-  width: 31px;
-  height: 31px;
-  object-fit: contain;
-}
-
-.suggestion-box {
-  position: absolute;
-  bottom: 100%;
-  width: 100%;
-  background: #d1dae3;
-  border: 1px solid rgba(0, 0, 0, 0.2);
-  border-radius: 8px;
-  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
-  color: black;
-  z-index: 100;
-  padding: 8px 0;
-}
-
-  .suggestion-box ul {
-    list-style: none;
-    margin: 0;
-    padding: 0;
-  }
-
-  .suggestion-box li {
-    padding: 8px 12px;
-    cursor: pointer;
-    font-size: 1rem;
-    transition: background-color 0.3s ease;
-    color: rgb(67 65 65);
-  }
-
-    .suggestion-box li:hover {
-      background-color: rgba(0, 0, 0, 0.1);
-      border-radius: 4px;
-    }
-
-.input-container {
-  display: flex;
-  flex-direction: column-reverse;
-  position: relative;
-  width: 100%;
-}
-
-.input-box {
-  display: flex;
-  gap: 10px;
-  padding: 8px;
-  background: #03182d;
-  box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.1);
-  flex-shrink: 0;
-  width: 100%;
-  height: auto;
-  min-height: 40px;
-}
-
+/* Listening modal */
 .listening-box {
   position: fixed;
   top: 50%;
@@ -233,7 +163,6 @@ h1 {
   padding: 45px;
   border-radius: 20px;
   width: 30vw;
-  height: auto;
   min-height: 40vh;
   box-shadow: 0px 8px 20px rgba(0, 0, 0, 0.15);
   backdrop-filter: blur(20px);
@@ -250,7 +179,6 @@ h1 {
 .microphone-image {
   width: 100px;
   height: 100px;
-  display: block;
   margin: 0 auto 20px;
   animation: pulse 1.5s infinite alternate ease-in-out;
 }
@@ -258,12 +186,12 @@ h1 {
 @keyframes pulse {
   from {
     transform: scale(1);
-    filter: drop-shadow(0px 0px 8px rgba(0, 0, 0, 0.4));
+    filter: drop-shadow(0 0 8px rgba(0, 0, 0, 0.4));
   }
 
   to {
     transform: scale(1.2);
-    filter: drop-shadow(0px 0px 14px rgba(0, 0, 0, 0.7));
+    filter: drop-shadow(0 0 14px rgba(0, 0, 0, 0.7));
   }
 }
 
@@ -273,7 +201,7 @@ h1 {
   font-weight: bold;
   text-align: center;
   margin: 10px 0;
-  text-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
+  text-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
   margin-top: 3vw;
 }
 
@@ -318,134 +246,6 @@ h1 {
     transform: scale(1.15);
   }
 
-@keyframes fadeInScale {
-  from {
-    opacity: 0;
-    transform: translate(-50%, -50%) scale(0.85);
-  }
-
-  to {
-    opacity: 1;
-    transform: translate(-50%, -50%) scale(1);
-  }
-}
-
-.error-text {
-  color: black;
-  background: #ffccccad;
-  font-size: 2vw;
-  font-weight: bold;
-  text-align: center;
-  padding: 8px 12px;
-  border-radius: 5px;
-  cursor: pointer;
-  width: auto;
-  margin-top: 10px;
-  display: inline-block;
-  white-space: nowrap;
-  transition: background 0.3s;
-}
-
-  .error-text:hover {
-    background: #ffaaaa;
-  }
-
-.popup-overlay {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background: rgba(0, 0, 0, 0.5);
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  z-index: 1000;
-}
-
-.popup-box {
-  background: white;
-  padding: 20px;
-  border-radius: 8px;
-  width: 300px;
-  text-align: center;
-  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
-}
-
-  .popup-box h3 {
-    font-size: 18px;
-    margin-bottom: 10px;
-  }
-
-  .popup-box p {
-    font-size: 14px;
-    color: #555;
-  }
-
-.popup-button {
-  background: #007bff;
-  color: white;
-  border: none;
-  padding: 10px 20px;
-  font-size: 14px;
-  border-radius: 5px;
-  cursor: pointer;
-  margin-top: 10px;
-}
-
-  .popup-button:hover {
-    background: #0056b3;
-  }
-
-.typing-indicator {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  font-style: italic;
-  color: #ffffff;
-  font-size: 1.2vw;
-  margin-left: 4vw;
-  margin-top: 1vw;
-  background: rgba(255, 255, 255, 0.2);
-  padding: 0.8vw 1.5vw;
-  border-radius: 2vw;
-  width: fit-content;
-  animation: fadeIn 0.3s ease-in-out;
-}
-
-  .typing-indicator span {
-    width: 10px;
-    height: 10px;
-    background-color: #ffffff;
-    border-radius: 50%;
-    display: inline-block;
-    animation: typingDots 1.5s infinite ease-in-out;
-  }
-
-    .typing-indicator span:nth-child(1) {
-      animation-delay: 0s;
-    }
-
-    .typing-indicator span:nth-child(2) {
-      animation-delay: 0.2s;
-    }
-
-    .typing-indicator span:nth-child(3) {
-      animation-delay: 0.4s;
-    }
-
-@keyframes typingDots {
-  0%, 100% {
-    transform: scale(0.8);
-    opacity: 0.3;
-  }
-
-  50% {
-    transform: scale(1);
-    opacity: 1;
-  }
-}
-
 @keyframes fadeIn {
   from {
     opacity: 0;
@@ -458,6 +258,7 @@ h1 {
   }
 }
 
+/* Quick suggestions */
 .hardcoded-questions-container {
   display: flex;
   justify-content: flex-start;
@@ -503,6 +304,7 @@ h1 {
   }
 }
 
+/* Messages */
 .message-wrapper {
   display: flex;
   align-items: flex-start;
@@ -536,16 +338,30 @@ h1 {
 
 .ai .message {
   align-self: flex-start;
-  background: #2b6296;
+  background: #56cdc273;
   color: white;
 }
 
 .user .message {
   align-self: flex-end;
-  background: #2b6296;
+  background: #56cdc273;
   color: white;
 }
 
+.message-meta {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 8px;
+  margin-top: 8px;
+}
+
+  /* Keep timestamp inline inside the meta row (next to the copy button) */
+  .message-meta .message-timestamp {
+    display: inline;
+    margin: 0;
+  }
+
 .message-timestamp {
   font-size: 0.8vw;
   color: rgba(255, 255, 255, 0.8);
@@ -554,28 +370,23 @@ h1 {
   text-align: right;
 }
 
-.paragraph-block {
-  background: #2b6296;
-  color: white;
-  padding: 1vw;
-  border-radius: 1vw;
-  margin-bottom: 0.5vw;
-  box-shadow: 0 0.3vw 0.8vw rgba(0, 0, 0, 0.1);
-  line-height: 1.5;
-  max-width: 48vw;
-}
-
 .message {
   max-width: 50vw;
   padding: 1vw 2vw;
   border-radius: 2vw;
-  font-size: 1.2vw;
+  font-size: 1vw;
+  font-weight: 600;
   line-height: 1.5;
   box-shadow: 0 0.3vw 0.8vw rgba(0, 0, 0, 0.1);
   background: #2b6296;
   color: white;
 }
 
+  .message .message-content {
+    font-size: inherit;
+    font-weight: inherit;
+  }
+
 .structured-response {
   background: #2b6296;
   color: white;
@@ -610,3 +421,839 @@ h1 {
       margin-bottom: 0.2vw;
       line-height: 1.4;
     }
+
+.message,
+.structured-response {
+  scroll-margin-bottom: var(--input-gap, 120px);
+}
+
+/* Speaking indicator */
+.profile-pic-stack {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 6px;
+}
+
+.speaking-indicator {
+  display: flex;
+  gap: 6px;
+  align-items: flex-end;
+  height: 18px;
+}
+
+  .speaking-indicator span {
+    width: 3px;
+    height: 8px;
+    background: rgba(255, 255, 255, 0.85);
+    border-radius: 2px;
+    animation: speakPulse 800ms infinite ease-in-out;
+  }
+
+    .speaking-indicator span:nth-child(2) {
+      animation-delay: 100ms;
+    }
+
+    .speaking-indicator span:nth-child(3) {
+      animation-delay: 200ms;
+    }
+
+    .speaking-indicator span:nth-child(4) {
+      animation-delay: 300ms;
+    }
+
+@keyframes speakPulse {
+  0%, 100% {
+    height: 8px;
+    opacity: .6;
+  }
+
+  50% {
+    height: 18px;
+    opacity: 1;
+  }
+}
+
+/* Spacer + floating button */
+.scroll-spacer {
+  height: var(--input-gap, 120px);
+  flex: 0 0 auto;
+}
+
+.scroll-to-bottom-btn {
+  position: fixed;
+  right: 16px;
+  bottom: calc(var(--input-gap, 120px) + 16px);
+  width: 51px;
+  height: 51px;
+  border-radius: 50%;
+  border: none;
+  background: #56cdc2;
+  color: #fff;
+  font-size: 31px;
+  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
+  cursor: pointer;
+  transition: transform 0.15s ease, box-shadow 0.2s ease, background 0.2s ease;
+  z-index: 20;
+}
+
+  .scroll-to-bottom-btn:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.3);
+    background: #56cdc2;
+  }
+
+
+
+/* Toggle Buttons Container */
+.toggle-buttons-container {
+  display: flex;
+  gap: 10px;
+  align-items: center;
+  margin-right: 15px;
+  position: relative;
+  right: -16vw;
+}
+
+/* Disabled state for toggle buttons */
+.toggle-btn.modern:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+  box-shadow: none;
+}
+
+.toggle-btn {
+  padding: 8px 12px;
+  border: 2px solid #5d91c3;
+  background: transparent;
+  color: white;
+  border-radius: 20px;
+  cursor: pointer;
+  font-size: 0.9vw;
+  font-weight: bold;
+  transition: all 0.3s ease;
+  min-width: 49px;
+  white-space: nowrap;
+}
+
+  .toggle-btn:hover {
+    background: rgba(93, 145, 195, 0.2);
+    transform: scale(1.05);
+  }
+
+  .toggle-btn.active {
+    background: #5d91c3;
+    color: white;
+    box-shadow: 0 0 10px rgba(93, 145, 195, 0.5);
+  }
+
+  .toggle-btn.voice-toggle {
+    background-color: #e5e7eb;
+    border: none;
+    padding: 8px 12px;
+    border-radius: 6px;
+    transition: background 0.2s;
+  }
+
+    .toggle-btn.voice-toggle.active {
+      background-color: #7ed957; /* Soft green for enabled */
+    }
+
+    .toggle-btn.voice-toggle.muted {
+      background-color: #ff7b7b; /* Soft red for disabled */
+    }
+
+.voice-icon {
+  width: 24px;
+  height: 24px;
+  vertical-align: middle;
+}
+
+/* Modern Toggle Buttons */
+.toggle-buttons-container.modern-toggle {
+  display: flex;
+  gap: 18px;
+  align-items: center;
+  margin-right: 15px;
+  position: relative;
+  right: -16vw;
+}
+
+.toggle-btn.modern {
+  background: #f5f7fa;
+  border: none;
+  border-radius: 24px;
+  box-shadow: 0 2px 8px rgba(93,145,195,0.08);
+  padding: 8px 16px;
+  display: flex;
+  align-items: center;
+  transition: background 0.2s, box-shadow 0.2s, transform 0.2s;
+  cursor: pointer;
+  min-width: 48px;
+  height: 44px;
+}
+
+  .toggle-btn.modern .toggle-icon {
+    width: 24px;
+    height: 24px;
+    margin: 0 auto;
+    display: block;
+  }
+
+  .toggle-btn.modern.active {
+    background: #e3fcec;
+    box-shadow: 0 4px 16px rgba(93,145,195,0.18);
+    transform: scale(1.08);
+  }
+
+  .toggle-btn.modern.muted {
+    background: #ffeaea;
+  }
+
+  .toggle-btn.modern:hover {
+    background: #eaf1fb;
+    box-shadow: 0 6px 18px rgba(93,145,195,0.18);
+    transform: scale(1.05);
+  }
+
+/* Responsive design for toggle buttons */
+@media (max-width: 1200px) {
+  .toggle-btn {
+    font-size: 0.8vw;
+    min-width: 70px;
+    padding: 6px 10px;
+  }
+}
+
+@media (max-width: 768px) {
+  .toggle-buttons-container {
+    gap: 5px;
+    margin-right: 10px;
+  }
+
+  .toggle-btn {
+    font-size: 0.7vw;
+    min-width: 60px;
+    padding: 4px 8px;
+  }
+}
+
+.icon-btn {
+  background: none;
+  border: none;
+  padding: 4px;
+  cursor: pointer;
+  border-radius: 4px;
+  transition: background 0.2s;
+  margin-left: 0.5vw;
+}
+
+  .icon-btn:hover {
+    background: rgba(93, 145, 195, 0.15);
+  }
+
+.meta-icon {
+  width: 20px;
+  height: 20px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  vertical-align: middle;
+}
+
+.dropdown {
+  position: relative;
+  display: inline-block;
+}
+
+.dropdown-menu {
+  position: absolute;
+  right: 0;
+  top: 28px;
+  background: #fff;
+  border: 1px solid #e5e7eb;
+  border-radius: 8px;
+  box-shadow: 0 2px 8px rgba(0,0,0,0.12);
+  min-width: 140px;
+  z-index: 100;
+  padding: 4px 0;
+}
+
+.dropdown-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  background: none;
+  border: none;
+  width: 100%;
+  padding: 8px 16px;
+  font-size: 15px;
+  color: #222;
+  cursor: pointer;
+  transition: background 0.2s;
+}
+
+  .dropdown-item:hover {
+    background: #f5f5f5;
+  }
+
+.copy-tick {
+  color: #fff;
+  font-size: 20px;
+  font-weight: bold;
+  width: 20px;
+  height: 20px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  vertical-align: middle;
+  transition: color 0.2s;
+}
+
+.message-meta .icon-btn {
+  margin-left: 6px;
+}
+
+.tutor-video {
+  position: fixed;
+  right: 24px;
+  bottom: 80px;
+  width: 320px;
+  height: 180px;
+  border-radius: 12px;
+  box-shadow: 0 4px 16px rgba(0,0,0,0.25);
+  z-index: 2000;
+  background: #000;
+}
+
+@media (max-width: 600px) {
+  .tutor-video {
+    width: 90vw;
+    height: 28vw;
+    right: 5vw;
+    bottom: 5vw;
+  }
+}
+
+.blinking-cursor {
+  font-weight: bold;
+  color: white;
+  animation: blink 1s steps(1) infinite;
+}
+
+@keyframes blink {
+  0%, 50% {
+    opacity: 1;
+  }
+
+  51%, 100% {
+    opacity: 0;
+  }
+}
+
+
+
+/* User Guide Popup Centered, Four-Side Border, Previous Font/Color, No Animation */
+.user-guide-modal {
+  position: fixed;
+  top: 52%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  height: 38vw;
+  width: 50vw;
+  background: linear-gradient(135deg, #fff 80%, #e3fcec 100%);
+  color: #222;
+  box-shadow: 0 12px 40px rgba(93, 145, 195, .22);
+  border-radius: 18px;
+  padding: 1vw;
+  z-index: 2001;
+  overflow: visible; /* Allow button to overflow outside modal */
+  border: 10px solid #009688; /* Four-side border */
+  box-sizing: border-box;
+}
+
+.close-icon {
+  position: absolute;
+  top: 1vw;
+  right: 1vw;
+  background: none;
+  border: none;
+  font-size: 2vw;
+  color: #2b6296;
+  cursor: pointer;
+  z-index: 2010;
+  transition: color 0.2s;
+}
+
+.user-guide-close-icon:hover {
+  color: #009688;
+}
+
+/* Overlay for closing on outside click */
+.user-guide-overlay {
+  position: fixed;
+  inset: 0;
+  background: rgba(0,0,0,0.35);
+  z-index: 2000;
+}
+
+@media (max-width: 600px) {
+  .user-guide-modal {
+    width: 90vw;
+    height: 60vw;
+    border-radius: 12px;
+    padding: 4vw 2vw 2vw 2vw;
+  }
+
+    .user-guide-modal .close-icon {
+      font-size: 6vw;
+      width: 6vw;
+      height: 6vw;
+    }
+
+  .close-icon {
+    font-size: 6vw;
+    top: 2vw;
+    right: 2vw;
+  }
+}
+
+
+.user-guide-modal li {
+  line-height: 1.7;
+  font-size: 1.1vw;
+  background: rgba(93, 145, 195, .07);
+  padding: .5vw .5vw;
+  box-shadow: 0 2px 8px rgba(93, 145, 195, .06);
+}
+
+  .user-guide-modal li b {
+    color: #2b6296;
+    font-size: 1.15vw;
+  }
+
+.user-guide-modal ol {
+  overflow-y: auto;
+  max-height: 34.6vw; /* Adjust as needed for your modal size */
+}
+
+.user-guide-modal h2 {
+  font-size: 2.2vw;
+  margin-bottom: 1.5vw;
+  color: #2b6296;
+  text-align: center;
+  font-weight: bold;
+  letter-spacing: 1px;
+}
+
+
+
+
+
+
+
+/* Close button styles */
+.user-guide-close-icon {
+  display: block;
+  position: absolute;
+  top: 1vw;
+  right: 1vw;
+  background: none;
+  border: none;
+  font-size: 2vw;
+  color: #2b6296;
+  cursor: pointer;
+  z-index: 2010;
+  transition: color 0.2s;
+}
+
+  .user-guide-close-icon:hover {
+    color: #009688;
+  }
+
+.user-guide-close-icon {
+  font-size: 6vw;
+  top: 2vw;
+  right: 2vw;
+}
+
+
+
+/* Close button styles */
+.user-guide-close-icon {
+  display: block;
+  position: absolute;
+  top: 1vw;
+  right: 1vw;
+  background: none;
+  border: none;
+  font-size: 2vw;
+  color: #2b6296;
+  cursor: pointer;
+  z-index: 2010;
+  transition: color 0.2s;
+}
+
+  .user-guide-close-icon:hover {
+    color: #009688;
+  }
+
+/* Overlay for closing on outside click */
+.user-guide-overlay {
+  position: fixed;
+  inset: 0;
+  background: rgba(0,0,0,0.35);
+  z-index: 2000;
+}
+
+@media (max-width: 600px) {
+  .user-guide-modal {
+    width: 90vw;
+    height: 60vw;
+    border-radius: 12px;
+    padding: 4vw 2vw 2vw 2vw;
+  }
+
+    .user-guide-modal .close-icon {
+      font-size: 6vw;
+      width: 6vw;
+      height: 6vw;
+    }
+
+  .user-guide-close-icon {
+    font-size: 6vw;
+    top: 2vw;
+    right: 2vw;
+  }
+}
+
+
+.user-guide-close-icon {
+  position: absolute;
+  top: -22px; /* Move above modal, adjust as needed */
+  right: -22px; /* Move to the right outside modal, adjust as needed */
+  background: #009688; /* Match border color */
+  border: none;
+  width: 44px;
+  height: 44px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 2vw;
+  color: black;
+  cursor: pointer;
+  z-index: 2010;
+  box-shadow: 0 2px 8px rgba(93,145,195,0.18);
+  transition: background 0.2s, color 0.2s;
+  ;
+}
+
+  .user-guide-close-icon:hover {
+    background: white;
+    color: black;
+  }
+
+
+@keyframes fadeInScale {
+
+  from {
+    opacity: 0;
+    transform: translate(-50%, -50%) scale(0.85);
+  }
+
+
+
+  to {
+    opacity: 1;
+    transform: translate(-50%, -50%) scale(1);
+  }
+}
+
+
+
+.error-text {
+  color: black;
+  background: #ffccccad;
+  font-size: 2vw;
+  font-weight: bold;
+  text-align: center;
+  padding: 8px 12px;
+  border-radius: 5px;
+  cursor: pointer;
+  width: auto;
+  margin-top: 10px;
+  display: inline-block;
+  white-space: nowrap;
+  transition: background 0.3s;
+}
+
+
+
+  .error-text:hover {
+    background: #ffaaaa;
+  }
+
+
+
+.popup-overlay {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.5);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 1000;
+}
+
+
+
+.popup-box {
+  background: white;
+  padding: 20px;
+  border-radius: 8px;
+  width: 300px;
+  text-align: center;
+  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
+}
+
+
+
+  .popup-box h3 {
+    font-size: 18px;
+    margin-bottom: 10px;
+  }
+
+
+
+  .popup-box p {
+    font-size: 14px;
+    color: #555;
+  }
+
+
+
+.popup-button {
+  background: #007bff;
+  color: white;
+  border: none;
+  padding: 10px 20px;
+  font-size: 14px;
+  border-radius: 5px;
+  cursor: pointer;
+  margin-top: 10px;
+}
+
+
+
+  .popup-button:hover {
+    background: #0056b3;
+  }
+
+
+
+/* Typing indicator */
+
+.typing-indicator {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  color: #ffffff;
+  font-size: 1.2vw;
+  margin-left: 4vw;
+  margin-top: 1vw;
+  background: rgba(255, 255, 255, 0.2);
+  padding: 0.8vw 1.5vw;
+  border-radius: 2vw;
+  width: fit-content;
+  animation: fadeIn 0.3s ease-in-out;
+}
+
+
+
+  .typing-indicator span {
+    width: 10px;
+    height: 10px;
+    background-color: #ffffff;
+    border-radius: 50%;
+    display: inline-block;
+    animation: typingDots 1.5s infinite ease-in-out;
+  }
+
+
+
+    .typing-indicator span:nth-child(1) {
+      animation-delay: 0s;
+    }
+
+
+
+    .typing-indicator span:nth-child(2) {
+      animation-delay: 0.2s;
+    }
+
+
+
+    .typing-indicator span:nth-child(3) {
+      animation-delay: 0.4s;
+    }
+
+
+
+@keyframes typingDots {
+
+  0%, 100% {
+    transform: scale(0.8);
+    opacity: 0.3;
+  }
+
+
+
+  50% {
+    transform: scale(1);
+    opacity: 1;
+  }
+}
+
+.voice-chat-container {
+  padding: 16px;
+  font-family: Arial, sans-serif;
+}
+
+.controls button {
+  padding: 8px 12px;
+}
+
+.voice-root {
+  position: relative;
+  display: inline-block;
+}
+
+.mic-toggle {
+  background: transparent;
+  border: none;
+  font-size: 20px;
+  cursor: pointer;
+}
+
+.mic-popup {
+  position: fixed;
+  left: 50%;
+  top: 18%;
+  transform: translateX(-50%);
+  width: 420px;
+  background: #fff;
+  border-radius: 10px;
+  box-shadow: 0 10px 30px rgba(0,0,0,0.15);
+  z-index: 1200;
+  overflow: hidden;
+  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
+}
+
+.mic-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 10px 14px;
+  border-bottom: 1px solid #eee;
+}
+
+  .mic-header .close {
+    background: transparent;
+    border: none;
+    font-size: 16px;
+    cursor: pointer;
+  }
+
+.mic-body {
+  padding: 12px;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.waveform {
+  width: 100%;
+  height: 90px;
+  background: #fafafa;
+  border-radius: 6px;
+  display: block;
+}
+
+.transcript-area {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.status {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  color: #444;
+  font-size: 13px;
+}
+
+  .status .dot {
+    width: 10px;
+    height: 10px;
+    border-radius: 50%;
+    background: #bbb;
+    display: inline-block;
+  }
+
+    .status .dot.recording {
+      background: #d23;
+      box-shadow: 0 0 8px rgba(210,35,35,0.35);
+    }
+
+.popup-transcript {
+  min-height: 52px;
+  background: #f7f8fa;
+  padding: 8px;
+  border-radius: 6px;
+  white-space: pre-wrap;
+  font-size: 14px;
+  color: #222;
+}
+
+  .popup-transcript .hint {
+    color: #666;
+    font-size: 13px;
+  }
+
+  .popup-transcript pre {
+    margin: 0;
+    font-family: inherit;
+    white-space: pre-wrap;
+  }
+
+.mic-actions {
+  display: flex;
+  gap: 8px;
+  justify-content: flex-end;
+  margin-top: 6px;
+}
+
+  .mic-actions button {
+    padding: 6px 10px;
+    border-radius: 6px;
+    border: 1px solid #ddd;
+    background: #fff;
+    cursor: pointer;
+  }
+
+    .mic-actions button[disabled] {
+      opacity: 0.5;
+      cursor: not-allowed;
+    }
+
+.status .on {
+  color: green;
+  font-weight: 600;
+}
+
+.error {
+  color: #b00020;
+  font-size: 13px;
+}

src/app/chat/chat.component.html

@@ -1,120 +1,386 @@
-  <div class="chat-container">
-    <header class="header-container">
-      <div class="logo">
-        <a (click)="goToHome()" routerLink="/home" class="brand-link">
-          <img src="assets/images/pykara-logo.png" alt="Pykara Logo" />
-        </a>
-        <span class="product-name">Py-Learn</span>
-      </div>
-      <div class="header-title">
-        <h1>Grammar Chat</h1>
-      </div>
-      <div class="home-btn">
-        <a (click)="goToHome()" routerLink="/home">
-          <img src="assets/images/home.png" alt="Home" class="home-icon" />
-        </a>
+<!-- Full chat.component.html matching chat.component.ts -->
+<div class="chat-container">
+  <div class="header-container">
+    <div class="logo">
+      <a (click)="goToHome()" routerLink="/home" class="brand-link">
+        <img src="assets/images/pykara-logo.png" alt="Pykara Logo" />
+      </a>
+      <span class="product-name">Py-Learn</span>
+    </div>
+
+    <div class="header-title">
+      <h1>Grammar Chat</h1>
+    </div>
+
+    <div class="toggle-buttons-container modern-toggle">
+      <button class="toggle-btn modern"
+              [class.active]="isVoiceEnabled"
+              [class.muted]="!isVoiceEnabled"
+              (click)="toggleVoice()"
+              title="Voice On/Off">
+        <img [src]="isVoiceEnabled ? 'assets/images/chat/volume.png' : 'assets/images/chat/volume-mute.png'"
+             alt="Voice Toggle" class="toggle-icon" />
+      </button>
+
+      <button class="toggle-btn modern"
+              [class.active]="isTutorEnabled"
+              (click)="toggleTutor()"
+              title="Tutor On/Off">
+        <img [src]="isTutorEnabled ? 'assets/images/chat/video.png' : 'assets/images/chat/no-video.png'"
+             alt="Tutor" class="toggle-icon" />
+      </button>
+
+      <button class="toggle-btn modern" disabled
+              [class.active]="isSyllabusEnabled"
+              (click)="toggleSyllabus()"
+              title="Syllabus On/Off">
+        <img [src]="isSyllabusEnabled ? 'assets/images/chat/syllabus.png' : 'assets/images/chat/internet.png'"
+             alt="Syllabus" class="toggle-icon" />
+      </button>
+
+      <button class="toggle-btn modern" disabled
+              [class.active]="isBreadcrumbEnabled"
+              (click)="toggleBreadcrumb()"
+              title="Breadcrumb On/Off">
+        <img src="assets/images/chat/breadcrumbs.png" alt="Breadcrumb" class="toggle-icon" />
+      </button>
+
+      <button class="toggle-btn modern" (click)="openUserGuide()" title="Open User Guide">
+        <img src="assets/images/chat/info.png" alt="User Guide" class="toggle-icon" />
+      </button>
+    </div>
+
+    <div class="home-btn">
+      <a (click)="goToHome()" routerLink="/home">
+        <img src="assets/images/home.png" alt="Home" class="home-icon" />
+      </a>
+    </div>
+  </div>
+
+  <div class="chat-box" #chatBox>
+    <img src="assets/images/chat/chatbg.png" alt="Chat Background" class="chat-bg" />
+
+    <div *ngFor="let message of messages; let i = index">
+      <!-- User message -->
+      <div *ngIf="message.from === 'user'" class="message-wrapper user">
+        <div class="profile-pic">
+          <img src="assets/images/chat/rabbit.png" alt="User" />
+        </div>
+        <div class="message">
+          {{ message.text }}
+          <div class="message-timestamp">{{ message.timestamp }}</div>
+        </div>
       </div>
-    </header>
-
-    <main class="chat-box" #chatBox>
-      <img src="assets/images/chat/chatbg.png" alt="Chat Background" class="chat-bg" />
-      <ng-container *ngFor="let message of messages">
-        <div *ngIf="message.from === 'user'" class="message-wrapper user">
-          <div class="profile-pic">
-            <img src="assets/images/chat/rabbit.png" alt="User Profile Picture" />
-          </div>
-          <div class="message">
-            {{ message.text }}
-            <div class="message-timestamp">{{ message.timestamp }}</div>
-          </div>
+
+      <!-- AI message -->
+      <div *ngIf="message.from === 'ai' && !message.pending" class="message-wrapper ai">
+        <div class="profile-pic">
+          <img src="assets/images/chat/natasha.png" alt="AI" />
         </div>
-        <div *ngIf="message.from === 'ai'" class="message-wrapper ai">
-          <div class="profile-pic">
-            <img src="assets/images/chat/lion.png" alt="AI Profile Picture" />
+
+        <div class="message structured-response">
+          <div [innerHTML]="formatStructuredResponse(message.text)"></div>
+
+          <!-- Follow-ups -->
+          <div class="followups" *ngIf="message.suggestions?.length">
+            <div class="followups-title">Follow-up suggestions</div>
+            <button class="followup-chip"
+                    *ngFor="let s of message.suggestions"
+                    (click)="selectHardcodedQuestion(s)"
+                    title="Ask this next">
+              {{ s }}
+            </button>
           </div>
-          <div class="message structured-response">
-            <div [innerHTML]="formatStructuredResponse(message.text)"></div>
 
-            <div class="sources" *ngIf="message.source_ids?.length">
-              <span class="sources-label">Sources:</span>
-              <span class="source-chip" *ngFor="let s of message.source_ids">
-                {{ displaySource(s) }}
-              </span>
-            </div>
+          <div class="message-timestamp">
+            {{ message.timestamp }}
+
+            <!-- Copy -->
+            <button class="icon-btn" (click)="copyToClipboard(message.text, i)"
+                    [attr.aria-label]="copySuccessIndex === i ? 'Copied' : 'Copy message'"
+                    title="Copy message">
+              <ng-container *ngIf="copySuccessIndex === i; else showCopy">
+                <span class="copy-tick">&#10003;</span>
+              </ng-container>
+              <ng-template #showCopy>
+                <img src="assets/images/chat/copy.png" alt="Copy" class="meta-icon" />
+              </ng-template>
+            </button>
+
+            <!-- Audio: play / stop -->
+            <button class="icon-btn"
+                    *ngIf="message.audioUrl && isReadingIndex !== i"
+                    (click)="playServerAudioForMessage(i)"
+                    aria-label="Play audio" title="Play audio">
+              <img src="assets/images/chat/speaker.png" alt="Play audio" class="meta-icon" />
+            </button>
+
+            <button class="icon-btn"
+                    *ngIf="message.audioUrl && isReadingIndex === i"
+                    (click)="stopReadAloud()"
+                    aria-label="Stop audio" title="Stop audio">
+              <img src="assets/images/chat/stop-button.png" alt="Stop audio" class="meta-icon" />
+            </button>
+
+            <!-- Generate audio on demand -->
+            <button class="icon-btn"
+                    *ngIf="!message.audioUrl"
+                    (click)="synthesizeAudioAndPlay(i)"
+                    [disabled]="message.isSynthesizing"
+                    aria-label="Generate audio"
+                    title="Generate audio">
+              <ng-container *ngIf="!message.isSynthesizing; else audioSpinner">
+                <img src="assets/images/chat/speaker.png" alt="Generate audio" class="meta-icon" />
+              </ng-container>
+              <ng-template #audioSpinner>
+                <img src="assets/images/chat/loading-spinner.gif" alt="Generating audio" class="meta-icon" />
+              </ng-template>
+            </button>
+
+            <!-- Video: generate, play, stop -->
+            <!-- Show Generate when no cached video -->
+            <button class="icon-btn"
+                    *ngIf="!message.videoUrl && !message.isVideoSynthesizing"
+                    (click)="synthesizeVideoAndPlay(i)"
+                    aria-label="Generate video"
+                    title="Generate video">
+              <img src="assets/images/chat/video.png" alt="Generate video" class="meta-icon" />
+            </button>
+
+            <!-- Spinner while generating video -->
+            <button class="icon-btn" *ngIf="!message.videoUrl && message.isVideoSynthesizing" disabled>
+              <img src="assets/images/chat/loading-spinner.gif" alt="Generating video" class="meta-icon" />
+            </button>
+
+            <!-- Toggle inline video (single button). Show video.png initially, switches to no-video.png when enabled -->
+            <button class="icon-btn"
+                    *ngIf="message.videoUrl"
+                    (click)="toggleMessageVideo(i)"
+                    [class.active]="isVideoEnabledIndex[i]"
+                    aria-label="Toggle video"
+                    title="Toggle video">
+              <img [src]="isVideoEnabledIndex[i] ? 'assets/images/chat/no-video.png' : 'assets/images/chat/video.png'"
+                   alt="Video" class="meta-icon" />
+            </button>
 
-            <div class="message-timestamp">{{ message.timestamp }}</div>
           </div>
+
+          <!-- Inline video player -->
+          <video *ngIf="isVideoEnabledIndex[i] && message.playingVideoUrl"
+                 id="inline-video-{{i}}"
+                 class="tutor-video"
+                 [src]="message.playingVideoUrl"
+                 (ended)="onMessageVideoEnded(i)"
+                 controls autoplay>
+          </video>
         </div>
-      </ng-container>
-      <div *ngIf="isTyping" class="typing-indicator" role="status" aria-live="polite">
-        AI is typing
-        <span></span>
-        <span></span>
-        <span></span>
-      </div>
-    </main>
-
-    <section class="input-container">
-      <div class="input-box">
-        <textarea [(ngModel)]="userInput"
-                  (focus)="showHardcodedQuestions()"
-                  (blur)="hideHardcodedQuestions()"
-                  (input)="adjustTextareaHeight($event); getSuggestions()"
-                  (keydown)="handleEnterPress($event)"
-                  placeholder="Type your message here..."
-                  [disabled]="isSpeaking"
-                  aria-label="Message input"></textarea>
-        <button (click)="isSpeaking ? stopSpeaking() : handleButtonClick()"
-                [disabled]="isSubmitting"
-                aria-label="Send or voice">
-          <img [src]="isSpeaking ? 'assets/images/chat/stop.png' : getButtonIcon()"
-               alt="Action"
-               class="button-icon" />
-        </button>
       </div>
-      <div class="hardcoded-questions-container" *ngIf="showQuestions">
-        <!-- Loading -->
-        <div class="hardcoded-question" *ngIf="pdfLoading">Loading questions…</div>
-
-        <!-- Generated questions list -->
-        <div class="hardcoded-question"
-             *ngFor="let q of pdfQuestions; let i = index"
-             (click)="selectGeneratedQuestion(q)"
-             role="button"
-             tabindex="0"
-             (keydown.enter)="selectGeneratedQuestion(q)"
-             aria-label="Suggested question">
-          {{ q }}
+    </div>
+
+    <!-- Typing indicator -->
+    <div *ngIf="isTyping" class="typing-indicator" aria-live="polite">
+      Tutor's Response
+      <span></span><span></span><span></span>
+    </div>
+  </div>
+
+  <!-- Input -->
+  <div class="input-container">
+    <div class="input-box">
+      <textarea [(ngModel)]="userInput"
+                (focus)="showHardcodedQuestions()"
+                (blur)="hideHardcodedQuestions()"
+                (input)="adjustTextareaHeight($event)"
+                (keydown)="handleEnterPress($event)"
+                placeholder="Type your message here..."
+                [disabled]="isAiResponding">
+ </textarea>
+
+      <button (click)="handleButtonClick()"
+              [disabled]="isListening && !showMicPopup"
+              aria-label="Send or voice">
+        <img [src]="getButtonIcon()" alt="Action" class="button-icon" />
+      </button>
+
+      <!--<button class="mic-toggle" (click)="openMicrophonePopup()" [disabled]="isListening && !showMicPopup" title="Open microphone">🎤</button>-->
+
+    </div>
+
+    <button class="scroll-to-bottom-btn" (click)="scrollToBottom()" aria-label="Jump to latest">&#8595;</button>
+
+    <div class="hardcoded-questions-container" *ngIf="showQuestions">
+      <div *ngIf="pdfLoading" class="loading-row">Loading…</div>
+      <ng-container *ngIf="!pdfLoading">
+        <ng-container *ngIf="currentFollowups.length; else showPdfQs">
+          <div class="hint-row">Follow-up suggestions</div>
+          <button class="hardcoded-question"
+                  *ngFor="let q of currentFollowups"
+                  (mousedown)="selectHardcodedQuestion(q)"
+                  [disabled]="isAiResponding">
+            {{ q }}
+          </button>
+        </ng-container>
+
+        <ng-template #showPdfQs>
+          <div class="hint-row">Questions from your textbook</div>
+          <ng-container *ngIf="pdfQuestions?.length; else noPdfQs">
+            <button class="hardcoded-question"
+                    *ngFor="let q of pdfQuestions"
+                    (mousedown)="selectHardcodedQuestion(q)"
+                    [disabled]="isAiResponding">
+              {{ q }}
+            </button>
+          </ng-container>
+          <ng-template #noPdfQs>
+            <div class="hardcoded-question disabled">No grammar questions available.</div>
+          </ng-template>
+        </ng-template>
+      </ng-container>
+    </div>
+  </div>
+
+
+  <div class="mic-popup" *ngIf="showMicPopup">
+    <div class="mic-header">
+      <strong>Microphone</strong>
+      <button class="close" (click)="closeMicrophonePopup()">✕</button>
+    </div>
+
+    <div class="mic-body">
+      <canvas #waveformCanvas class="waveform" aria-hidden="true"></canvas>
+
+      <div class="transcript-area">
+        <div class="status">
+          <span class="dot" [class.recording]="isRecording"></span>
+          <span>{{ isRecording ? 'Recording…' : 'Ready' }}</span>
         </div>
 
-        <!-- Empty state -->
-        <div class="hardcoded-question" *ngIf="!pdfLoading && !pdfQuestions.length">
-          No questions available from the textbook.
+        <div #popupTranscriptEl class="popup-transcript">
+          <div class="hint" *ngIf="popupTranscript === 'Processing…'">Processing… please wait</div>
+          <pre *ngIf="popupTranscript && popupTranscript !== 'Processing…'">{{ popupTranscript }}</pre>
+          <div class="empty" *ngIf="!popupTranscript">Speak and click Done when finished</div>
         </div>
+
+        <div class="error" *ngIf="errorMessage">{{ errorMessage }}</div>
       </div>
-    </section>
-
-    <div class="listening-box" *ngIf="isListening" role="dialog" aria-modal="true">
-      <div class="listening-content">
-        <img src="assets/images/chat/microphone-icon.png" alt="Microphone" class="microphone-image" />
-        <p *ngIf="!errorMessage">Listening...</p>
-        <div class="listening-actions">
-          <button class="mute-btn" (click)="muteMicrophone()">
-            <img src="assets/images/chat/mic.png" alt="Mute" />
-          </button>
-          <button class="close-btn" (click)="stopListening()">
-            <img src="assets/images/chat/cross.png" alt="Close" />
-          </button>
-        </div>
-        <p *ngIf="errorMessage" class="error-text" (click)="openMicrophoneSettings()">{{ errorMessage }}</p>
+
+      <div class="mic-actions">
+        <button (click)="stopRecording()" [disabled]="!isRecording">Done</button>
+        <button (click)="confirmAndSendTranscript()" [disabled]="!popupTranscript || popupTranscript === 'Processing…'">Send</button>
+        <button (click)="closeMicrophonePopup()">Cancel</button>
       </div>
     </div>
+  </div>
 
-    <div class="popup-overlay" *ngIf="showMicPopup">
-      <div class="popup-box">
-        <h3>Microphone access required</h3>
-        <p>To use voice mode, you'll need to enable your microphone and try again.</p>
-        <button class="popup-button" (click)="closeMicrophonePopup()">OK</button>
+  <!-- User guide modal -->
+  <div class="user-guide-overlay" *ngIf="showUserGuide" (click)="closeUserGuide()">
+    <div class="user-guide-modal" (click)="$event.stopPropagation()">
+      <button class="user-guide-close-icon" (click)="closeUserGuide()" aria-label="Close">&times;</button>
+      <div class="user-guide-content">
+        <!-- Insert guide content here -->
+        <ol style="text-align: justify; font-size:15px;">
+          <li>
+            <b>Introduction</b><br>
+            <ul style="list-style: unset; margin-left:1.25rem;">
+              <li>The Chat Module is an interactive learning environment designed to assist learners through text and voice-based communication.</li>
+              <li>Users can type their question or select from follow-up suggestions, using either the text input or the microphone.</li>
+              <li>Predefined questions appear above the input field for quick access.</li>
+              <li>This creates an engaging and personalised learning experience similar to interacting with a real tutor.</li>
+            </ul>
+          </li>
+          <li>
+            <b>Starting the Chat</b><br>
+            <ul style="list-style: unset; margin-left:1.25rem;">
+              <li>When learners open the module, they will see a text input box and a microphone icon. They can type a question or activate the microphone to speak.</li>
+              <li>While the microphone is active, a listening popup appears with options to mute or stop recording. Once the learner finishes speaking or typing, their question is displayed in the chat area along with a timestamp.</li>
+              <li>This simple interface ensures that both typing and speaking interactions are smooth and user-friendly.</li>
+            </ul>
+          </li>
+          <li>
+            <b>Accessing the Syllabus</b><br>
+            <ul style="list-style: unset; margin-left:1.25rem;">
+              <li>Before learners begin, an administrator uploads the syllabus or textbook in digital format.</li>
+              <li>The system analyses the document and automatically generates a list of predefined questions based on the uploaded syllabus.</li>
+              <li>These predefined questions are displayed above the input field, allowing learners to choose any topic without needing to type.</li>
+              <li>When a learner selects a question, the system locates the relevant section from the syllabus and prepares an answer. The response appears instantly in the chat area in a clear and readable format.</li>
+            </ul>
+          </li>
+          <li>
+            <b>Receiving the Response</b><br>
+            <ul style="list-style: unset; margin-left:1.25rem;">
+              <li>
+                After a question is sent, the system generates an immediate response that includes:
+                <ul>
+                  <li>A text-based explanation</li>
+                  <li>An audio narration in the tutor’s real voice</li>
+                  <li>A derived video explanation, when applicable</li>
+                </ul>
+              </li>
+              <li>The response is first produced as text. If the learner chooses to listen, the system plays an audio narration that has been synthetically generated using the real voice of the teacher.</li>
+              <li>The voice is not a generic computer voice; it has been trained and modelled on the actual tutor’s speech patterns, ensuring that the tone, pronunciation, and expression closely resemble the teacher’s natural way of speaking.</li>
+              <li>Similarly, when a video explanation is requested, the system displays a derived video of the teacher. This video is not a pre-recorded clip or animation, but is generated to resemble the real teacher’s voice and reactions.</li>
+              <li>All audio and video responses are created dynamically for each question, providing unique, real-time explanations. Learners can replay or stop the narration at any time, copy text responses, and follow the conversation naturally with the speaking indicator showing when the tutor’s voice is active.</li>
+              <li>By default, audio is muted; you can enable it as needed.</li>
+            </ul>
+          </li>
+          <li>
+            <b>Handling Out-of-Syllabus Questions</b><br>
+            <ul style="list-style: unset; margin-left:1.25rem;">
+              <li>If a learner asks a question that is not part of the uploaded syllabus or textbook, the system responds with the message: “This topic is out of syllabus.”</li>
+              <li>Only administrators can configure whether such questions can be answered using external information sources.</li>
+              <li>This ensures that all discussions remain within the approved syllabus unless authorised otherwise.</li>
+            </ul>
+          </li>
+          <li>
+            <b>Follow-Up and Progressive Learning</b><br>
+            <ul style="list-style: unset; margin-left:1.25rem;">
+              <li>After each response, the system displays related or next-level questions below the chat. This feature helps learners progress through topics in a logical sequence.</li>
+              <li>A breadcrumb trail is also displayed, showing the topic flow and subtopics covered during the conversation.</li>
+              <li>Learners can easily revisit previous points and continue from where they left off.</li>
+            </ul>
+          </li>
+          <li>
+            <b>Audio, Video, and Mode Controls</b><br>
+            <ul style="list-style: unset; margin-left:1.25rem;">
+              <li>
+                At the top of the chat interface, four control buttons provide flexibility and accessibility:
+                <ul>
+                  <li>Audio Control – Enable or disable narration.</li>
+                  <li>Video Control – Show or hide derived video explanations.</li>
+                  <li>Syllabus Mode Control – Keep learning limited to syllabus topics.</li>
+                  <li>Breadcrumb Control – Display or hide the topic trail.</li>
+                </ul>
+              </li>
+              <li>Only administrators can modify the syllabus mode to include out-of-syllabus responses.</li>
+            </ul>
+          </li>
+          <li>
+            <b>Interface and Usability</b><br>
+            <ul style="list-style: unset; margin-left:1.25rem;">
+              <li>The chat interface presents a clear, conversational layout between the learner and the tutor. Each message includes a profile icon and timestamp for a natural reading flow.</li>
+              <li>Typing indicators appear while the system prepares responses, and a scroll button allows quick access to the most recent messages.</li>
+              <li>The design is responsive and adapts to different devices such as desktops, tablets, etc.</li>
+            </ul>
+          </li>
+          <li>
+            <b>Summary</b><br>
+            <ul style="list-style: unset; margin-left:1.25rem;">
+              <li>The Chat Module provides an engaging, syllabus-focused learning experience where learners can type or speak their questions and receive immediate answers through text, real teacher voice, and derived video.</li>
+              <li>With predefined questions, real-time explanations, structured progression, and easy-to-use controls, this module offers a complete and intelligent conversational learning environment—all within a single platform.</li>
+              <li>Use this feature for summary-guided training.</li>
+            </ul>
+          </li>
+        </ol>
       </div>
     </div>
   </div>
+
+  <!-- Global Tutor Video (bottom-right) -->
+  <video *ngIf="isTutorEnabled && videoUrl"
+         class="tutor-video"
+         [src]="videoUrl"
+         (ended)="clearVideoUrl()"
+         (error)="clearVideoUrl()"
+         controls autoplay>
+  </video>
+</div>

src/app/chat/chat.component.ts

@@ -1,13 +1,13 @@
-import { Component, Inject, OnDestroy, PLATFORM_ID, ChangeDetectorRef } from '@angular/core';
+import { Component, Inject, OnDestroy, PLATFORM_ID, ChangeDetectorRef, ViewChild, ElementRef, Renderer2, AfterViewChecked, Output, EventEmitter } from '@angular/core';
 import { ApiService } from './api.service';
 import { FormsModule } from '@angular/forms';
-import { CommonModule } from '@angular/common';
+import { CommonModule, isPlatformBrowser } from '@angular/common';
 import { Router, RouterModule } from '@angular/router';
-import { isPlatformBrowser } from '@angular/common';
-import { ViewChild, ElementRef } from '@angular/core';
-import { Renderer2 } from '@angular/core';
 import { Subscription } from 'rxjs';
 import { finalize } from 'rxjs/operators';
+import { HttpClient } from '@angular/common/http';
+import { lastValueFrom } from 'rxjs';
+
 type Grade = 'lowergrade' | 'midgrade' | 'highergrade';
 
 @Component({
@@ -15,9 +15,35 @@ type Grade = 'lowergrade' | 'midgrade' | 'highergrade';
   standalone: true,
   imports: [FormsModule, CommonModule, RouterModule],
   templateUrl: './chat.component.html',
-  styleUrl: './chat.component.css'
+  styleUrls: ['./chat.component.css']
 })
 export class ChatComponent implements OnDestroy {
+
+  @ViewChild('waveformCanvas') waveformCanvas!: ElementRef<HTMLCanvasElement>;
+  @ViewChild('popupTranscriptEl') popupTranscriptEl!: ElementRef<HTMLDivElement>;
+  @Output() transcriptConfirmed = new EventEmitter<string>();
+
+  isRecording = false;
+  showMicPopup = false;
+  popupTranscript = '';
+  errorMessage = '';
+
+  private recognition: any = null;
+  private _recordingFinalBuffer = '';
+  private _recordingInterimBuffer = '';
+
+  private audioContext: AudioContext | null = null;
+  private analyser: AnalyserNode | null = null;
+  private dataArray: Uint8Array | null = null;
+  private mediaStream: MediaStream | null = null;
+  private animationFrameId: number | null = null;
+
+  // restart helpers
+  private _recognitionActive = false;
+  private _restartTimer: any = null;
+  private _restartAttempts = 0;
+  private _maxRestartDelay = 1500;
+
   showQuestions: boolean = false;
   isSubmitting: boolean = false;
 
@@ -27,15 +53,28 @@ export class ChatComponent implements OnDestroy {
 
   /** Chat state */
   userInput: string = '';
-  messages: { from: string, text: string, timestamp: string; isPlaying?: boolean, source_ids?: string[]; }[] = [];
-  isTyping: boolean = false;
+  messages: Array<{
+    from: string;
+    text: string;
+    timestamp: string;
+    isPlaying?: boolean;
+    isMuted?: boolean;
+    suggestions?: string[];
+    source_ids?: string[];
+    videoUrl?: string;
+    audioUrl?: string;
+    playingVideoUrl?: string;
+    pending?: boolean;
+    isSynthesizing?: boolean;
+    isVideoSynthesizing?: boolean;
+  }> = [];
+   isTyping: boolean = false;
   @ViewChild('chatBox') chatBox!: ElementRef;
 
   /** Speech / mic state */
   isLoadingSpeech: boolean = false;
   selectedVoice: SpeechSynthesisVoice | null = null;
-  errorMessage: string = "";
-  recognition: any;
+  
   speechSynthesisInstance: SpeechSynthesisUtterance | null = null;
   isListening: boolean = false;
   isProcessingSpeech: boolean = false;
@@ -44,9 +83,9 @@ export class ChatComponent implements OnDestroy {
 
   /** Suggestions for typed input (powered by PDF too) */
   suggestions: string[] = [];
-
+  isInputValid = false;
   /** Popup */
-  showMicPopup: boolean = false;
+  
 
   /** Subscriptions */
   private responseSub?: Subscription;
@@ -59,43 +98,180 @@ export class ChatComponent implements OnDestroy {
   /** NEW: only allow follow-ups when last answer was grounded in textbook pages */
   private lastAnswerHasContext: boolean = false;
 
+
+  // --- Multi-chat state: keep active `this.messages` pointing to the active chat
+  private activeChatIndex = 0; // 0 = primary, 1 = secondary
+
+  // Per-chat storage (persist when switching)
+  private primaryMessages: typeof this.messages = [];
+  private secondaryMessages: typeof this.messages = [];
+
+  private primaryIsVideoEnabledIndex: boolean[] = [];
+  private secondaryIsVideoEnabledIndex: boolean[] = [];
+
+  private primaryLastQuestionContext = '';
+  private secondaryLastQuestionContext = '';
+  private primaryLastAnswerContext = '';
+  private secondaryLastAnswerContext = '';
+  private primaryLastSourceIdsContext: string[] = [];
+  private secondaryLastSourceIdsContext: string[] = [];
+
+  private primaryCurrentFollowups: string[] = [];
+  private secondaryCurrentFollowups: string[] = [];
+
+  private primaryPendingAiIndex: number | null = null;
+  private secondaryPendingAiIndex: number | null = null;
+
+  private primaryServerAudioMessageIndex: number | null = null;
+  private secondaryServerAudioMessageIndex: number | null = null;
+
+  private primaryIsReadingIndex: number | null = null;
+  private secondaryIsReadingIndex: number | null = null;
+
+  private primaryIsVideoPlayingIndex: number | null = null;
+  private secondaryIsVideoPlayingIndex: number | null = null;
+  // --- end multi-chat state
+
+
+  currentFollowups: string[] = [];
+  
+  /*private shouldAutoScroll = true;*/
+  videoUrl = '';
+  aiResponseInterval: any = null;
+  isAiResponding = false;
+  isVideoEnabledIndex: boolean[] = [];
+
+  private currentExplainSub: Subscription | null = null;
+  private currentFollowupsSub: Subscription | null = null;
+
+  serverAudio: HTMLAudioElement | null = null;
+  serverAudioMessageIndex: number | null = null;
+
+  private pendingAiIndex: number | null = null;
+
+  isMuted = false;
+  showUserGuide = false;
+  openDropdownIndex: number | null = null;
+  isReadingIndex: number | null = null;
+  isVideoPlayingIndex: number | null = null;
+  private readAloudUtterance: SpeechSynthesisUtterance | null = null;
+
+  private lastQuestionContext: string = '';
+  private lastAnswerContext: string = '';
+  private lastSourceIdsContext: string[] = [];
+
+  private popupListeningMode = false;
+  private _savedRecognitionOnResult: any = null;
+  private _savedInterimResults = false;
+  private _suppressDefaultOnResult = false;
+  private shouldAutoScroll = true;
   constructor(
     private apiService: ApiService,
     private cdr: ChangeDetectorRef,
-    @Inject(PLATFORM_ID,) private platformId: object,
+    @Inject(PLATFORM_ID) private platformId: object,
+    private http: HttpClient,
     private router: Router,
     private renderer: Renderer2
   ) {
-    // Log voices
-    window.speechSynthesis.onvoiceschanged = () => {
-      console.log("Available Voices:", window.speechSynthesis.getVoices());
+    // Initialize primary/secondary storage with the current defaults
+    this.primaryMessages = this.messages;
+    this.secondaryMessages = [];
+
+    this.primaryIsVideoEnabledIndex = this.isVideoEnabledIndex;
+    this.secondaryIsVideoEnabledIndex = [];
+
+    this.primaryLastQuestionContext = this.lastQuestionContext;
+    this.primaryLastAnswerContext = this.lastAnswerContext;
+    this.primaryLastSourceIdsContext = this.lastSourceIdsContext.slice();
+    this.primaryCurrentFollowups = this.currentFollowups.slice();
+    this.primaryPendingAiIndex = this.pendingAiIndex;
+    this.primaryServerAudioMessageIndex = this.serverAudioMessageIndex;
+    this.primaryIsReadingIndex = this.isReadingIndex;
+    this.primaryIsVideoPlayingIndex = this.isVideoPlayingIndex;
+
+    // secondary fields are already empty/default
+
+    if (!isPlatformBrowser(this.platformId)) return;
+
+    const SR = (window as any).SpeechRecognition || (window as any).webkitSpeechRecognition;
+    if (!SR) {
+      console.warn('SpeechRecognition not supported');
+      return;
+    }
+
+    this.recognition = new SR();
+    this.recognition.continuous = true;
+    this.recognition.interimResults = true;
+    this.recognition.lang = 'en-US';
+    try { this.recognition.maxAlternatives = 1; } catch { /* ignore */ }
+
+    this.recognition.onstart = () => { this._recognitionActive = true; this._restartAttempts = 0; };
+    this.recognition.onspeechstart = () => { this._recognitionActive = true; };
+    this.recognition.onspeechend = () => { this._recognitionActive = false; };
+
+    this.recognition.onresult = (event: any) => {
+      if (!this.isRecording) return;
+      let interim = '';
+      let final = '';
+      for (let i = event.resultIndex; i < event.results.length; i++) {
+        const res = event.results[i];
+        const t = (res && res[0] && res[0].transcript) ? res[0].transcript : '';
+        if (res.isFinal) final += t + ' ';
+        else interim += t + ' ';
+      }
+
+      if (final) {
+        this._recordingFinalBuffer += final;
+        this._recordingInterimBuffer = '';
+      } else {
+        this._recordingInterimBuffer = interim;
+      }
+
+      // keep UI quiet while recording; show only after Done pressed
+      this.cdr.detectChanges();
     };
 
-    if (isPlatformBrowser(this.platformId)) {
-      const SpeechRecognition = (window as any).SpeechRecognition || (window as any).webkitSpeechRecognition;
-      if (SpeechRecognition) {
-        this.recognition = new SpeechRecognition();
-        this.recognition.continuous = false;
-        this.recognition.lang = 'en-US';
-        this.recognition.interimResults = false;
-
-        this.recognition.onresult = (event: any) => {
-          if (event.results && event.results[0]) {
-            const transcript = event.results[0][0].transcript.trim();
-            this.userInput = transcript;
-            this.sendMessage();
-            this.recognition.stop();
-            this.isListening = false;
-          }
-        };
+    this.recognition.onerror = (e: any) => {
+      console.error('Recognition error', e);
+      if (e?.error === 'not-allowed') {
+        this.errorMessage = 'Microphone access denied';
+        this.isRecording = false;
+      } else {
+        this.errorMessage = `Error: ${e?.error || 'unknown'}`;
+      }
 
-        this.recognition.onerror = (event: any) => {
-          console.error('Speech Recognition Error:', event.error);
-          this.isProcessingSpeech = false;
-        };
+      if (this.isRecording && (e?.error === 'no-speech' || e?.error === 'aborted' || e?.error === 'network')) {
+        if (this._restartTimer) clearTimeout(this._restartTimer);
+        const delay = Math.min(400 * (this._restartAttempts + 1), this._maxRestartDelay);
+        this._restartTimer = setTimeout(() => {
+          try { if (this.recognition && !this._recognitionActive) this.recognition.start(); } catch { this._restartAttempts++; }
+        }, delay);
+      } else {
+        if (e?.error !== 'not-allowed') this._recognitionActive = false;
       }
-      window.addEventListener('beforeunload', this.handleUnload);
-    }
+
+      this.cdr.detectChanges();
+    };
+
+    this.recognition.onend = () => {
+      this._recognitionActive = false;
+      if (this.isRecording && this.showMicPopup) {
+        if (this._restartTimer) clearTimeout(this._restartTimer);
+        const delay = Math.min(250 + (this._restartAttempts * 200), this._maxRestartDelay);
+        this._restartTimer = setTimeout(() => {
+          try { if (this.recognition && !this._recognitionActive) this.recognition.start(); } catch { this._restartAttempts++; }
+        }, delay);
+      }
+    };
+
+    this.recognition.onnomatch = () => { /* noop */ };
+  }
+
+  selectHardcodedQuestion(question: string): void {
+    try { console.log('[CHAT] default question selected:', question); } catch { }
+    this.showQuestions = false;
+    this.sendMessage(question);
+    this.userInput = '';
   }
 
   private ensureGradeLevel(defaultGrade: Grade = 'lowergrade'): void {
@@ -108,6 +284,15 @@ export class ChatComponent implements OnDestroy {
     }
   }
 
+  //private storageHandler = (e: StorageEvent) => {
+  //  if (e.key === 'hasPDF') this.showRagModeAlert();
+  //};
+
+  //private showRagModeAlert(): void {
+  //  const ragEnabled = localStorage.getItem('rag_enabled') === '1' || localStorage.getItem('hasPDF') === 'true';
+  //  // No-op placeholder
+  //}
+
   ngOnInit(): void {
     this.ensureGradeLevel();
     if (window.speechSynthesis.onvoiceschanged !== undefined) {
@@ -118,22 +303,22 @@ export class ChatComponent implements OnDestroy {
     this.loadVoices();
   }
 
-  ngAfterViewChecked() {
-    setTimeout(() => {
-      this.scrollToBottom();
-    }, 100);
-  }
+  //ngAfterViewChecked() {
+  //  setTimeout(() => {
+  //    this.scrollToBottom();
+  //  }, 100);
+  //}
 
   ngOnDestroy(): void {
+    if (this.currentExplainSub) { this.currentExplainSub.unsubscribe(); this.currentExplainSub = null; }
+    if (this.currentFollowupsSub) { this.currentFollowupsSub.unsubscribe(); this.currentFollowupsSub = null; }
     if (isPlatformBrowser(this.platformId)) {
-      if (window.speechSynthesis) {
-        window.speechSynthesis.cancel();
-      }
+      try { window.speechSynthesis?.cancel(); } catch { /* noop */ }
       window.removeEventListener('beforeunload', this.handleUnload);
+      //window.removeEventListener('storage', this.storageHandler);
     }
-    if (this.responseSub && !this.responseSub.closed) {
-      this.responseSub.unsubscribe();
-    }
+    this.stopServerAudio();
+    try { window.speechSynthesis?.cancel(); } catch { /* noop */ }
   }
 
   private handleUnload = (): void => {
@@ -142,15 +327,135 @@ export class ChatComponent implements OnDestroy {
     }
   };
 
-  private scrollToBottom(): void {
-    try {
-      this.chatBox.nativeElement.scrollTop = this.chatBox.nativeElement.scrollHeight;
-    } catch (err) { }
+  ngAfterViewInit() {
+    this.chatBox.nativeElement.addEventListener('scroll', () => {
+      const el = this.chatBox.nativeElement;
+      const atBottom = el.scrollHeight - el.clientHeight - el.scrollTop < 50;
+      this.shouldAutoScroll = atBottom;
+    });
+  }
+
+  //scrollToBottom(): void {
+  //  try {
+  //    this.chatBox.nativeElement.scrollTo({ top: this.chatBox.nativeElement.scrollHeight, behavior: 'smooth' });
+  //  } catch (err) {
+  //    console.error('Scroll error:', err);
+  //  }
+  //}
+
+  scrollToBottom(): void {
+    if (this.shouldAutoScroll) {
+      try {
+        this.chatBox.nativeElement.scrollTo({
+          top: this.chatBox.nativeElement.scrollHeight,
+          behavior: 'smooth'
+        });
+      } catch { }
+    }
+  }
+
+  // --- Public API: toggle between chat A/B
+  toggleChat(): void {
+    const target = 1 - this.activeChatIndex;
+    this.switchToChat(target);
   }
 
-  /** Popup controls */
-  openMicrophonePopup(): void { this.showMicPopup = true; }
-  closeMicrophonePopup(): void { this.showMicPopup = false; }
+  switchToChat(index: number): void {
+    if (index === this.activeChatIndex) return;
+
+    // Stop any playing media on the current chat first so saved state doesn't preserve "playing" flags
+    this.stopServerAudio();
+    try { window.speechSynthesis?.cancel(); } catch { /* noop */ }
+    this.stopAllVideo();
+
+    // Save current active chat state (now that media is stopped)
+    this.saveCurrentChatState(this.activeChatIndex);
+
+    // Restore target chat state
+    this.restoreChatState(index);
+
+    this.activeChatIndex = index;
+    this.cdr.detectChanges();
+  }
+
+  private saveCurrentChatState(idx: number): void {
+    // Make a shallow copy of messages and clear transient playback flags so the saved chat never
+    // preserves an "isPlaying" or inline-playing video state.
+    const sanitizedMessages = (this.messages || []).map(m => ({
+      ...m,
+      isPlaying: false,
+      playingVideoUrl: '',
+      // keep pending / audio/video urls etc. — only clear playback flags
+    }));
+
+    if (idx === 0) {
+      this.primaryMessages = sanitizedMessages;
+      this.primaryIsVideoEnabledIndex = (this.isVideoEnabledIndex || []).slice();
+      this.primaryLastQuestionContext = this.lastQuestionContext;
+      this.primaryLastAnswerContext = this.lastAnswerContext;
+      this.primaryLastSourceIdsContext = this.lastSourceIdsContext.slice();
+      this.primaryCurrentFollowups = this.currentFollowups.slice();
+      this.primaryPendingAiIndex = this.pendingAiIndex;
+      // serverAudioMessageIndex should be null because we stopped audio before saving
+      this.primaryServerAudioMessageIndex = null;
+      this.primaryIsReadingIndex = null;
+      this.primaryIsVideoPlayingIndex = null;
+    } else {
+      this.secondaryMessages = sanitizedMessages;
+      this.secondaryIsVideoEnabledIndex = (this.isVideoEnabledIndex || []).slice();
+      this.secondaryLastQuestionContext = this.lastQuestionContext;
+      this.secondaryLastAnswerContext = this.lastAnswerContext;
+      this.secondaryLastSourceIdsContext = this.lastSourceIdsContext.slice();
+      this.secondaryCurrentFollowups = this.currentFollowups.slice();
+      this.secondaryPendingAiIndex = this.pendingAiIndex;
+      this.secondaryServerAudioMessageIndex = null;
+      this.secondaryIsReadingIndex = null;
+      this.secondaryIsVideoPlayingIndex = null;
+    }
+  }
+
+  private restoreChatState(idx: number): void {
+    if (idx === 0) {
+      this.messages = this.primaryMessages || [];
+      this.isVideoEnabledIndex = this.primaryIsVideoEnabledIndex || [];
+      this.lastQuestionContext = this.primaryLastQuestionContext || '';
+      this.lastAnswerContext = this.primaryLastAnswerContext || '';
+      this.lastSourceIdsContext = (this.primaryLastSourceIdsContext || []).slice();
+      this.currentFollowups = (this.primaryCurrentFollowups || []).slice();
+      this.pendingAiIndex = this.primaryPendingAiIndex;
+      this.serverAudioMessageIndex = this.primaryServerAudioMessageIndex;
+      this.isReadingIndex = this.primaryIsReadingIndex;
+      this.isVideoPlayingIndex = this.primaryIsVideoPlayingIndex;
+    } else {
+      this.messages = this.secondaryMessages || [];
+      this.isVideoEnabledIndex = this.secondaryIsVideoEnabledIndex || [];
+      this.lastQuestionContext = this.secondaryLastQuestionContext || '';
+      this.lastAnswerContext = this.secondaryLastAnswerContext || '';
+      this.lastSourceIdsContext = (this.secondaryLastSourceIdsContext || []).slice();
+      this.currentFollowups = (this.secondaryCurrentFollowups || []).slice();
+      this.pendingAiIndex = this.secondaryPendingAiIndex;
+      this.serverAudioMessageIndex = this.secondaryServerAudioMessageIndex;
+      this.isReadingIndex = this.secondaryIsReadingIndex;
+      this.isVideoPlayingIndex = this.secondaryIsVideoPlayingIndex;
+    }
+
+    // Ensure arrays exist to avoid undefined errors elsewhere
+    if (!this.messages) this.messages = [];
+    if (!this.isVideoEnabledIndex) this.isVideoEnabledIndex = [];
+    if (!this.currentFollowups) this.currentFollowups = [];
+  }
+
+  startFromPopup(): void {
+    this._suppressDefaultOnResult = true;
+    try { if (this.recognition && typeof this.recognition.stop === 'function') this.recognition.stop(); } catch { }
+    this._restoreRecognitionHandlers();
+    this.isListening = false;
+    this.showMicPopup = false;
+    const message = (this.popupTranscript || '').trim();
+    this.popupTranscript = '';
+    if (!message) { this.errorMessage = 'No speech captured. Please try again.'; this.cdr.detectChanges(); return; }
+    this.sendMessage(message);
+  }
 
   /** Show questions on focus: initial (no answer yet) or follow-ups (after an answer) */
   showHardcodedQuestions(): void {
@@ -272,6 +577,7 @@ export class ChatComponent implements OnDestroy {
     this.userInput = '';
     this.isTyping = true;
     this.cdr.detectChanges();
+    this.shouldAutoScroll = true;
     this.scrollToBottom();
 
     this.responseSub = this.apiService.explainGrammar(message)
@@ -296,6 +602,7 @@ export class ChatComponent implements OnDestroy {
             source_ids: sourceIds
           });
           this.cdr.detectChanges();
+          this.shouldAutoScroll = true;
           this.scrollToBottom();
 
           this.lastQuestion = message;
@@ -320,6 +627,7 @@ export class ChatComponent implements OnDestroy {
             source_ids: []
           });
           this.cdr.detectChanges();
+          this.shouldAutoScroll = true;
           this.scrollToBottom();
 
           // NEW: ensure follow-ups are not attempted after an error
@@ -330,6 +638,8 @@ export class ChatComponent implements OnDestroy {
       });
   }
 
+  
+
   displaySource(tag: string): string {
     if (!tag) return '';
     const [path, pagePart] = tag.split('#p');
@@ -348,49 +658,363 @@ export class ChatComponent implements OnDestroy {
   }
 
   /** TTS helpers */
-  speakResponse(responseText: string): void {
-    if (!responseText) return;
+  animateAiResponse(responseText: string, targetIndex?: number): void {
+    if (!responseText) { this.isAiResponding = false; return; }
 
-    let lastAiMessage = this.messages.slice().reverse().find((msg) => msg.from === 'ai');
-    if (!lastAiMessage) {
-      lastAiMessage = { from: 'ai', text: '', timestamp: new Date().toLocaleTimeString() };
-      this.messages.push(lastAiMessage);
+    let aiIndex: number | null = null;
+    if (typeof targetIndex === 'number' && this.messages[targetIndex] && this.messages[targetIndex].from === 'ai') {
+      aiIndex = targetIndex;
     } else {
-      lastAiMessage.text = '';
+      for (let i = this.messages.length - 1; i >= 0; i--) {
+        if (this.messages[i].from === 'ai') { aiIndex = i; break; }
+      }
+    }
+
+    if (aiIndex === null || aiIndex < 0 || !this.messages[aiIndex]) {
+      this.messages.push({ from: 'ai', text: '', timestamp: new Date().toLocaleTimeString() } as any);
+      aiIndex = this.messages.length - 1;
+      this.isVideoEnabledIndex.push(false);
     }
+
+    const aiMsg = this.messages[aiIndex] as any;
+
+    if (this.aiResponseInterval) { clearInterval(this.aiResponseInterval); this.aiResponseInterval = null; }
+
+    aiMsg.text = '';
     this.cdr.detectChanges();
 
     const words = responseText.split(' ');
-    let currentWordIndex = 0;
+    let idx = 0;
+    this.aiResponseInterval = setInterval(() => {
+      if (idx < words.length) {
+        aiMsg.text = words.slice(0, idx + 1).join(' ');
+        idx++;
+        this.cdr.detectChanges();
+      } else {
+        clearInterval(this.aiResponseInterval);
+        this.aiResponseInterval = null;
+        aiMsg.text = responseText;
+        aiMsg.pending = false;
+        this.cdr.detectChanges();
+        this.isAiResponding = false;
+      }
+    }, 280);
+  }
+
+  stopAiResponse(): void {
+    if (this.currentExplainSub) { this.currentExplainSub.unsubscribe(); this.currentExplainSub = null; }
+    if (this.currentFollowupsSub) { this.currentFollowupsSub.unsubscribe(); this.currentFollowupsSub = null; }
+    if (this.aiResponseInterval) { clearInterval(this.aiResponseInterval); this.aiResponseInterval = null; }
+
+    this.stopServerAudio();
+    try { window.speechSynthesis?.cancel(); } catch { /* noop */ }
+
+    if (this.pendingAiIndex !== null && this.messages[this.pendingAiIndex] && this.messages[this.pendingAiIndex].from === 'ai') {
+      const msg = this.messages[this.pendingAiIndex];
+      msg.text = 'Response cancelled.';
+      msg.timestamp = new Date().toLocaleTimeString();
+      msg.suggestions = [];
+      msg.audioUrl = '';
+      msg.videoUrl = '';
+      msg.playingVideoUrl = '';
+      msg.pending = false;
+      if (this.isVideoEnabledIndex.length > this.pendingAiIndex) this.isVideoEnabledIndex[this.pendingAiIndex] = false;
+      this.pendingAiIndex = null;
+    } else {
+      const revIndex = [...this.messages].reverse().findIndex(m => m.from === 'ai');
+      if (revIndex !== -1) {
+        const actualIndex = this.messages.length - 1 - revIndex;
+        const msg = this.messages[actualIndex];
+        msg.text = 'Response cancelled.';
+        msg.timestamp = new Date().toLocaleTimeString();
+        msg.suggestions = [];
+        msg.audioUrl = '';
+        msg.videoUrl = '';
+        msg.playingVideoUrl = '';
+        msg.pending = false;
+        if (this.isVideoEnabledIndex.length > actualIndex) this.isVideoEnabledIndex[actualIndex] = false;
+      } else {
+        this.messages.push({ from: 'ai', text: 'Response cancelled.', timestamp: new Date().toLocaleTimeString() });
+        this.isVideoEnabledIndex.push(false);
+      }
+    }
+
+    this.isAiResponding = false;
+    this.isTyping = false;
+    this.isSpeaking = false;
+    this.isReadingIndex = null;
+    this.cdr.detectChanges();
+  }
 
+  speakResponse(responseText: string): void {
+    if (!responseText) return;
+    this.stopAllVideo();
     const speech = new SpeechSynthesisUtterance();
     speech.text = responseText;
     speech.lang = 'en-US';
     speech.pitch = 1;
     speech.rate = 1;
     this.isSpeaking = true;
-
     const voices = window.speechSynthesis.getVoices();
-    const femaleVoice = voices.find(v => v.name === "Microsoft Zira - English (United States)");
-    if (femaleVoice) speech.voice = femaleVoice;
+    const preferred = [
+      'Google UK English Female',
+      'Google US English Female',
+      'Microsoft Zira - English (United States)',
+      'Microsoft Hazel - English (United Kingdom)',
+      'Google en-GB Female',
+      'Google en-US Female'
+    ];
+    for (const n of preferred) {
+      const found = voices.find(v => v.name === n);
+      if (found) { speech.voice = found; break; }
+    }
+    if (!speech.voice && voices.length) speech.voice = voices[0];
+    speech.onend = () => { this.isSpeaking = false; this.cdr.detectChanges(); };
+    window.speechSynthesis.speak(speech);
+  }
 
-    speech.onboundary = (event: any) => {
-      if (event.name === 'word' && currentWordIndex < words.length) {
-        lastAiMessage!.text = words.slice(0, currentWordIndex + 1).join(' ');
-        currentWordIndex++;
-        this.cdr.detectChanges();
+  //pauseAudio(): void {
+  //  if (this.serverAudio && !this.serverAudio.paused) {
+  //    this.serverAudio.pause();
+  //    this.isAudioPaused = true;
+  //    if (this.serverAudioMessageIndex !== null) this.messages[this.serverAudioMessageIndex].isPlaying = false;
+  //    this.cdr.detectChanges();
+  //    return;
+  //  }
+  //  if (window.speechSynthesis && window.speechSynthesis.speaking && !window.speechSynthesis.paused) {
+  //    window.speechSynthesis.pause();
+  //    this.isAudioPaused = true;
+  //    this.cdr.detectChanges();
+  //  }
+  //}
+
+  resumeAudio(): void {
+    if (this.serverAudio && this.serverAudio.paused) {
+      this.serverAudio.play();
+      this.isAudioPaused = false;
+      if (this.serverAudioMessageIndex !== null) this.messages[this.serverAudioMessageIndex].isPlaying = true;
+      this.cdr.detectChanges();
+      return;
+    }
+    if (window.speechSynthesis && window.speechSynthesis.paused) {
+      window.speechSynthesis.resume();
+      this.isAudioPaused = false;
+      this.cdr.detectChanges();
+    }
+  }
+
+  playServerAudioForMessage(index: number): void {
+    const msg = this.messages[index] as any;
+    if (!msg || !msg.audioUrl) return;
+
+    // If same message is clicked while its audio element exists: toggle play/pause
+    if (this.serverAudio && this.serverAudioMessageIndex === index) {
+      if (!this.serverAudio.paused) {
+        this.serverAudio.pause();
+        this.isAudioPaused = true;
+        msg.isPlaying = false;
+      } else {
+        this.serverAudio.play().catch(err => {
+          console.error('Audio resume failed:', err);
+        });
+        this.isAudioPaused = false;
+        msg.isPlaying = true;
       }
+      this.cdr.detectChanges();
+      return;
+    }
+
+    // Stop any inline videos (pauses DOM video elements) before starting audio
+    this.stopAllVideo();
+
+    // Stop any existing audio and speech synthesis
+    this.stopServerAudio();
+    try { window.speechSynthesis?.cancel(); } catch { /* noop */ }
+
+    // NOTE: Do NOT change global navbar toggles here.
+    // Previously this method forced `isMuted = false` and `isVoiceEnabled = true`
+    // which caused the navbar audio icon to flip when playing per-message audio.
+    // We intentionally avoid modifying those global flags so per-message playback
+    // doesn't affect the navbar state.
+
+    // Create and play new audio
+    this.serverAudio = new Audio(msg.audioUrl);
+    this.serverAudioMessageIndex = index;
+    try { this.serverAudio.volume = this.isMuted ? 0 : 1; } catch { /* noop */ }
+
+    this.isReadingIndex = index;
+    this.isAudioPaused = false;
+
+    msg.isPlaying = true;
+    this.isSpeaking = true;
+    this.cdr.detectChanges();
+
+    this.serverAudio.onended = () => {
+      try { msg.isPlaying = false; } catch { /* noop */ }
+      this.isReadingIndex = null;
+      this.serverAudio = null;
+      this.serverAudioMessageIndex = null;
+      this.isSpeaking = false;
+      this.cdr.detectChanges();
     };
 
-    speech.onend = () => {
+    this.serverAudio.onerror = (e) => {
+      console.error('Server audio playback error', e);
+      try { msg.isPlaying = false; } catch { /* noop */ }
+      this.isReadingIndex = null;
+      this.serverAudio = null;
+      this.serverAudioMessageIndex = null;
       this.isSpeaking = false;
-      lastAiMessage!.text = responseText;
       this.cdr.detectChanges();
     };
 
-    window.speechSynthesis.speak(speech);
+    this.serverAudio.play().catch(err => {
+      console.error('Audio play failed:', err);
+      try { msg.isPlaying = false; } catch { /* noop */ }
+      this.isReadingIndex = null;
+      this.serverAudio = null;
+      this.serverAudioMessageIndex = null;
+      this.isSpeaking = false;
+      this.cdr.detectChanges();
+    });
+  }
+
+  private stopServerAudio(): void {
+    if (this.serverAudio) {
+      try { this.serverAudio.pause(); this.serverAudio.currentTime = 0; } catch { }
+      this.serverAudio = null;
+      if (this.serverAudioMessageIndex !== null && this.messages[this.serverAudioMessageIndex]) {
+        this.messages[this.serverAudioMessageIndex].isPlaying = false;
+      }
+      this.serverAudioMessageIndex = null;
+    }
+    this.isReadingIndex = null;
+  }
+
+  synthesizeAudioAndPlay(index: number): void {
+    const msg = this.messages[index] as any;
+    if (!msg || !msg.text) return;
+    if (msg.audioUrl) { this.playServerAudioForMessage(index); return; }
+    if (msg.isSynthesizing) return;
+    msg.isSynthesizing = true; this.cdr.detectChanges();
+    this.apiService.synthesizeAudio(msg.text).subscribe({
+      next: (res: any) => {
+        msg.isSynthesizing = false;
+        if (res?.audio_url) { msg.audioUrl = res.audio_url; this.playServerAudioForMessage(index); }
+        else { this.errorMessage = 'Audio generation failed.'; }
+        this.cdr.detectChanges();
+      },
+      error: (err) => { msg.isSynthesizing = false; this.errorMessage = 'Audio generation failed.'; this.cdr.detectChanges(); }
+    });
+  }
+
+  synthesizeVideoAndPlay(index: number): void {
+    const msg = this.messages[index] as any;
+    if (!msg || !msg.text) return;
+
+    if (msg.videoUrl) {
+      this.openMessageVideo(index);
+      return;
+    }
+
+    if (msg.isVideoSynthesizing) return;
+    msg.isVideoSynthesizing = true;
+    this.cdr.detectChanges();
+
+    this.apiService.synthesizeVideo(msg.text).subscribe({
+      next: (res: any) => {
+        msg.isVideoSynthesizing = false;
+        if (res?.video_url) {
+          msg.videoUrl = res.video_url;
+          this.openMessageVideo(index);
+        } else {
+          console.error('No video_url returned from synth API:', res);
+          this.errorMessage = 'Video generation failed.';
+        }
+        this.cdr.detectChanges();
+      },
+      error: (err) => {
+        msg.isVideoSynthesizing = false;
+        console.error('Video synth API error', err);
+        this.errorMessage = 'Video generation failed. Try again.';
+        this.cdr.detectChanges();
+      }
+    });
   }
 
+  openMessageVideo(i: number): void {
+    const msg = this.messages[i] as any;
+    if (!msg?.videoUrl) return;
+
+    if (this.isVideoPlayingIndex === i) {
+      this.stopInlineVideo(i);
+      return;
+    }
+
+    // Stop any server audio and spoken TTS before playing video
+    this.stopServerAudio();
+    try { window.speechSynthesis?.cancel(); } catch { /* noop */ }
+
+    // Stop other videos (will also pause DOM video elements)
+    this.stopAllVideo();
+
+    msg.playingVideoUrl = msg.videoUrl;
+    this.isVideoEnabledIndex[i] = true;
+    this.cdr.detectChanges();
+
+    setTimeout(() => {
+      const vid = document.getElementById(`inline-video-${i}`) as HTMLVideoElement | null;
+      if (!vid) { this.isVideoPlayingIndex = null; this.cdr.detectChanges(); return; }
+
+      vid.onplay = () => { this.isVideoPlayingIndex = i; this.cdr.detectChanges(); };
+      vid.onpause = () => { this.cdr.detectChanges(); };
+      vid.onended = () => { this.onMessageVideoEnded(i); };
+
+      // Attempt to play; if blocked, clear playing state
+      vid.play().catch(err => {
+        console.warn('Inline video play blocked/failed:', err);
+        this.isVideoPlayingIndex = null;
+        msg.playingVideoUrl = '';
+        this.isVideoEnabledIndex[i] = false;
+        this.cdr.detectChanges();
+      });
+    }, 50);
+  }
+
+  // New toggle helper called from the template button. It uses existing open/stop helpers.
+  toggleMessageVideo(i: number): void {
+    const msg = this.messages[i] as any;
+    if (!msg || !msg.videoUrl) return;
+    if (!this.isVideoEnabledIndex[i]) {
+      this.openMessageVideo(i);
+    } else {
+      this.stopInlineVideo(i);
+    }
+  }
+
+  stopInlineVideo(index: number): void {
+    const vid = document.getElementById(`inline-video-${index}`) as HTMLVideoElement | null;
+    if (vid) {
+      try { vid.pause(); } catch { /* noop */ }
+      try { vid.currentTime = 0; } catch { /* noop */ }
+    }
+
+    const msg = this.messages[index] as any;
+    if (msg) msg.playingVideoUrl = '';
+    this.isVideoEnabledIndex[index] = false;
+    if (this.isVideoPlayingIndex === index) this.isVideoPlayingIndex = null;
+    this.cdr.detectChanges();
+  }
+
+  onMessageVideoEnded(i: number): void {
+    const msg = this.messages[i] as any;
+    if (msg) msg.playingVideoUrl = '';
+    this.isVideoEnabledIndex[i] = false;
+    if (this.isVideoPlayingIndex === i) this.isVideoPlayingIndex = null;
+    this.cdr.detectChanges();
+  }
+
+
   loadVoices(): void {
     const voices = window.speechSynthesis.getVoices();
     if (!voices.length) {
@@ -423,46 +1047,8 @@ export class ChatComponent implements OnDestroy {
     }
   }
 
-  resumeAudio(): void {
-    if (window.speechSynthesis.paused) {
-      window.speechSynthesis.resume();
-      this.isAudioPaused = false;
-      this.cdr.detectChanges();
-    }
-  }
-
-  /** Mic controls */
-  muteMicrophone(): void { console.log("Microphone muted"); }
-
-  startListening(): void {
-    this.isListening = true;
-    this.isProcessingSpeech = false;
-
-    if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
-      navigator.mediaDevices.getUserMedia({ audio: true })
-        .then(() => {
-          if (this.recognition) {
-            this.recognition.start();
-            this.recognition.onend = () => { this.isListening = false; };
-            this.recognition.onerror = (error: any) => {
-              console.error('Speech Recognition Error:', error);
-              this.isListening = false;
-              if (error.error === 'not-allowed') alert('Microphone permission denied.');
-              else if (error.error === 'no-speech') alert('No speech detected. Please try again.');
-            };
-          } else {
-            alert('Speech Recognition is not supported in this browser.');
-          }
-        })
-        .catch((error) => {
-          console.error('Microphone access denied:', error);
-          this.errorMessage = 'Please enable microphone access to use this feature.';
-          this.isListening = true;
-        });
-    } else {
-      alert('Microphone access is not supported in this browser.');
-    }
-  }
+  
+  
 
   stopListening(): void {
     this.isListening = false;
@@ -497,39 +1083,197 @@ export class ChatComponent implements OnDestroy {
     }
   }
 
-  /** UI helpers */
-  goToHome() { this.router.navigate(['/home']); }
+  // UI / input helpers
+  goToHome(): void { this.router.navigate(['/home']); }
 
   copySuccessIndex: number | null = null;
   copyToClipboard(text: string, index: number): void {
     navigator.clipboard.writeText(text).then(() => {
       this.copySuccessIndex = index;
       setTimeout(() => { this.copySuccessIndex = null; }, 2000);
-    }).catch(err => { console.error('Failed to copy: ', err); });
+    }).catch(err => console.error('Failed to copy:', err));
   }
 
+  checkInput = (): void => { this.isInputValid = this.userInput.trim().length > 0; }
+
   handleButtonClick(): void {
+    // If AI is currently streaming/responding, clicking the button should cancel that response.
+    if (this.isAiResponding) {
+      this.stopAiResponse();
+      return;
+    }
+
     if (this.userInput.trim().length > 0) {
       this.showQuestions = false;
-      const messageToSend = this.userInput;
+      const msg = this.userInput;
       this.userInput = '';
-      this.sendMessage(messageToSend);
-    } else if (this.isSpeaking) {
+      this.sendMessage(msg);
+    } else if (this.isSpeaking && !this.serverAudio) {
       this.pauseAudio();
     } else if (this.isAudioPaused) {
       this.resumeAudio();
     } else {
-      this.startListening();
+      this.openMicrophonePopup();
     }
   }
 
-  getButtonIcon(): string {
-    if (this.userInput.trim().length > 0) return 'assets/images/chat/send-icon.png';
-    if (this.isSpeaking) return 'assets/images/chat/pause-icon.png';
-    if (this.isAudioPaused) return 'assets/images/chat/resume-icon.png';
-    return 'assets/images/chat/microphone-icon.png';
+  startListening(): void {
+    this.isListening = true;
+    this.isProcessingSpeech = false;
+
+    if (navigator.mediaDevices?.getUserMedia) {
+      navigator.mediaDevices.getUserMedia({ audio: true })
+        .then(() => {
+          if (this.recognition) {
+            this.recognition.start();
+            this.recognition.onresult = (event: any) => {
+              if (event.results && event.results[0]) {
+                const transcript = event.results[0][0].transcript.trim();
+                this.userInput = transcript;
+                if (this.userInput.trim()) this.sendMessage();
+                this.recognition.stop();
+                this.isListening = false;
+              }
+            };
+            this.recognition.onnomatch = () => alert('No speech detected. Please try again.');
+            this.recognition.onend = () => { this.isListening = false; };
+            this.recognition.onerror = (error: any) => {
+              console.error('Speech Recognition Error:', error);
+              this.isListening = false;
+              if (error.error === 'not-allowed') alert('Microphone permission denied.');
+            };
+          } else {
+            alert('Speech Recognition not supported in this browser.');
+          }
+        }).catch((error) => {
+          console.error('Microphone access denied:', error);
+          this.errorMessage = 'Please enable microphone access to use this feature.';
+          this.isListening = true;
+        });
+    } else {
+      alert('Microphone access not supported in this browser.');
+    }
+  }
+
+  private stopPopupListening(): void {
+    try {
+      if (this.recognition && typeof this.recognition.stop === 'function') {
+        this.recognition.stop();
+      }
+    } catch (e) {
+      console.warn('Error stopping popup recognition:', e);
+    }
+    this._restoreRecognitionHandlers();
+    this.isListening = false;
+    this.cdr.detectChanges();
+  }
+
+  private startPopupListening(): void {
+    this.isListening = true;
+    this.isProcessingSpeech = false;
+    this.popupTranscript = '';
+    this.errorMessage = '';
+
+    if (!this.recognition) {
+      this.errorMessage = 'Speech Recognition not available in this browser.';
+      this.isListening = false;
+      this.cdr.detectChanges();
+      return;
+    }
+
+    this._savedRecognitionOnResult = this.recognition.onresult;
+    this._savedInterimResults = Boolean(this.recognition.interimResults);
+
+    this.recognition.interimResults = true;
+    this.popupListeningMode = true;
+
+    if (navigator.mediaDevices?.getUserMedia) {
+      navigator.mediaDevices.getUserMedia({ audio: true })
+        .then(() => {
+          try {
+            this.recognition.onresult = (event: any) => {
+              let interim = '';
+              let final = '';
+              for (let i = event.resultIndex; i < event.results.length; i++) {
+                const res = event.results[i];
+                if (res.isFinal) final += res[0].transcript + ' ';
+                else interim += res[0].transcript + ' ';
+              }
+              const display = (final + interim).trim();
+              this.popupTranscript = display;
+              this.cdr.detectChanges();
+              if (final && final.trim()) {
+                try { this.recognition.stop(); } catch { /* noop */ }
+                this.isListening = false;
+                this.cdr.detectChanges();
+              }
+            };
+
+            this.recognition.onnomatch = () => {
+              this.errorMessage = 'No speech detected. Please try again.';
+              this.isListening = false;
+              this.cdr.detectChanges();
+            };
+
+            this.recognition.onend = () => {
+              this.isListening = false;
+              this.popupListeningMode = false;
+              this._restoreRecognitionHandlers();
+              this.cdr.detectChanges();
+            };
+
+            this.recognition.onerror = (error: any) => {
+              console.error('Popup Speech Recognition Error:', error);
+              this.errorMessage = 'Speech recognition error.';
+              this.isListening = false;
+              this.popupListeningMode = false;
+              this._restoreRecognitionHandlers();
+              this.cdr.detectChanges();
+            };
+
+            this.recognition.start();
+          } catch (err) {
+            console.error('startPopupListening start error:', err);
+            this.errorMessage = 'Unable to start speech recognition.';
+            this.isListening = false;
+            this.popupListeningMode = false;
+            this._restoreRecognitionHandlers();
+            this.cdr.detectChanges();
+          }
+        }).catch((error) => {
+          console.error('Microphone access denied for popup:', error);
+          this.errorMessage = 'Please enable microphone access to use this feature.';
+          this.isListening = false;
+          this.popupListeningMode = false;
+          this._restoreRecognitionHandlers();
+          this.cdr.detectChanges();
+        });
+    } else {
+      this.errorMessage = 'Microphone access not supported in this browser.';
+      this.isListening = false;
+      this.popupListeningMode = false;
+      this._restoreRecognitionHandlers();
+      this.cdr.detectChanges();
+    }
+  }
+
+  private _restoreRecognitionHandlers(): void {
+    try {
+      if (!this.recognition) return;
+      if (this._savedRecognitionOnResult) {
+        this.recognition.onresult = this._savedRecognitionOnResult;
+        this._savedRecognitionOnResult = null;
+      }
+      this.recognition.interimResults = Boolean(this._savedInterimResults);
+      this._savedInterimResults = false;
+      this.popupListeningMode = false;
+    } catch (err) {
+      console.warn('Error restoring recognition handlers:', err);
+    }
   }
 
+  
+
   addNewLine(event: KeyboardEvent): void {
     if (event.key === 'Enter' && event.shiftKey) {
       event.preventDefault();
@@ -543,33 +1287,595 @@ export class ChatComponent implements OnDestroy {
     textarea.style.height = `${textarea.scrollHeight}px`;
   }
 
-  openMicrophoneSettings(): void {
-    const ua = navigator.userAgent;
-    if (ua.includes("Chrome")) window.open("chrome://settings/content/microphone", "_blank");
-    else if (ua.includes("Firefox")) window.open("about:preferences#privacy", "_blank");
-    else if (ua.includes("Edge")) window.open("edge://settings/content/microphone", "_blank");
-    else alert("Please check your browser's settings to enable the microphone.");
+  handleEnterPress(event: KeyboardEvent): void {
+    if (this.isSpeaking && !this.serverAudio) { event.preventDefault(); return; }
+    if (event.key === 'Enter') {
+      if (!event.shiftKey) {
+        event.preventDefault();
+        this.handleButtonClick();
+      } else {
+        event.preventDefault();
+        this.userInput += '\n';
+      }
+    }
+  }
+
+  isVoiceEnabled = false;
+  isTutorEnabled = false;
+  isSyllabusEnabled = true;
+  isBreadcrumbEnabled = false;
+
+  toggleVoice(): void {
+    // Toggle voice state and mute flag independently of tutor/video.
+    this.isVoiceEnabled = !this.isVoiceEnabled;
+    //this.isMuted = !this.isVoiceEnabled;
+
+    //// When turning voice OFF, stop voice TTS only — do not stop videos.
+    //if (!this.isVoiceEnabled) {
+    //  this.stopVoiceOnly();
+    //}
+
+    //if (this.serverAudio) {
+    //  try { this.serverAudio.volume = this.isMuted ? 0 : 1; } catch { /* noop */ }
+    //}
+    //this.saveToggleStates();
+  }
+
+  toggleTutor(): void {
+    // Toggle the global tutor/video mode and perform the appropriate actions.
+    this.isTutorEnabled = !this.isTutorEnabled;
+
+
+  }
+
+  toggleSyllabus(): void { this.isSyllabusEnabled = !this.isSyllabusEnabled; this.saveToggleStates(); }
+  toggleBreadcrumb(): void { this.isBreadcrumbEnabled = !this.isBreadcrumbEnabled; this.saveToggleStates(); }
+
+  private playGlobalVideoFromLatest(): void {
+    const idx = [...this.messages].reverse().findIndex(m => m.from === 'ai' && m.videoUrl);
+    if (idx === -1) { this.videoUrl = ''; return; }
+    const actualIndex = this.messages.length - 1 - idx;
+    const msg = this.messages[actualIndex];
+    this.videoUrl = msg.videoUrl || '';
+    this.cdr.detectChanges();
+  }
+
+  private saveToggleStates(): void {
+    if (isPlatformBrowser(this.platformId)) {
+      localStorage.setItem('voiceEnabled', String(this.isVoiceEnabled));
+      localStorage.setItem('tutorEnabled', String(this.isTutorEnabled));
+      localStorage.setItem('syllabusEnabled', String(this.isSyllabusEnabled));
+      localStorage.setItem('breadcrumbEnabled', String(this.isBreadcrumbEnabled));
+    }
   }
 
+  private loadToggleStates(): void {
+    if (isPlatformBrowser(this.platformId)) {
+      this.isVoiceEnabled = localStorage.getItem('voiceEnabled') === 'true';
+      this.isTutorEnabled = localStorage.getItem('tutorEnabled') === 'true';
+      this.isSyllabusEnabled = localStorage.getItem('syllabusEnabled') !== 'false';
+      this.isBreadcrumbEnabled = localStorage.getItem('breadcrumbEnabled') === 'true';
+    }
+  }
+
+  private stopVoiceOnly(): void {
+    try { if (window.speechSynthesis.speaking || window.speechSynthesis.paused) window.speechSynthesis.cancel(); } catch { }
+    this.speechSynthesisInstance = null;
+    this.isSpeaking = false;
+  }
+
+  private stopAllAudioAndMute(): void {
+    this.stopServerAudio();
+    try { if (window.speechSynthesis.speaking || window.speechSynthesis.paused) window.speechSynthesis.cancel(); } catch { }
+    this.isVoiceEnabled = false;
+    this.isMuted = true;
+    this.messages.forEach(m => { m.isPlaying = false; });
+    this.isReadingIndex = null;
+    this.isSpeaking = false;
+    this.isAudioPaused = false;
+    this.cdr.detectChanges();
+  }
+
+  clearVideoUrl(): void {
+    this.videoUrl = '';
+    if (this.isTutorEnabled) {
+      this.isTutorEnabled = false;
+      this.saveToggleStates();
+    }
+    this.cdr.detectChanges();
+  }
+
+  private stopAllVideo(): void {
+    this.videoUrl = '';
+
+    // Pause any inline video elements in the DOM (prevents a video from continuing to play)
+    try {
+      const vids = Array.from(document.querySelectorAll<HTMLVideoElement>('[id^="inline-video-"]'));
+      vids.forEach(v => {
+        try { v.pause(); v.currentTime = 0; } catch { /* noop */ }
+      });
+    } catch (err) {
+      /* noop */
+    }
+
+    this.messages.forEach((m, idx) => {
+      m.playingVideoUrl = '';
+      this.isVideoEnabledIndex[idx] = false;
+    });
+    this.cdr.detectChanges();
+  }
+
+  getButtonIcon(): string {
+    if (this.isAiResponding) return 'assets/images/chat/stop.png';
+    if (this.serverAudio && !this.serverAudio.paused) return 'assets/images/chat/microphone-icon.png';
+    if (this.userInput.trim().length > 0) return 'assets/images/chat/send-icon.png';
+    if (this.isSpeaking && !this.serverAudio) return 'assets/images/chat/pause-icon.png';
+    if (this.isAudioPaused) return 'assets/images/chat/resume-icon.png';
+    return 'assets/images/chat/microphone-icon.png';
+  }
+
+  goToHomePageShortcut(): void { this.router.navigate(['/home']); }
+
+  
+
+  openUserGuide(): void { this.showUserGuide = true; }
+  closeUserGuide(): void { this.showUserGuide = false; }
+
   stopSpeaking(): void {
     try {
-      if (window.speechSynthesis.speaking || window.speechSynthesis.paused) {
+      if (window.speechSynthesis?.speaking || window.speechSynthesis?.paused) {
         window.speechSynthesis.cancel();
       }
-    } catch { }
-    (this as any).speechSynthesisInstance = null;
-    if (this.responseSub && !this.responseSub.closed) this.responseSub.unsubscribe();
+    } catch { /* noop */ }
+    this.speechSynthesisInstance = null;
+    try { this.stopServerAudio(); } catch { /* noop */ }
     this.isSpeaking = false;
     this.isAudioPaused = false;
-    this.isTyping = false;
+    if (this.aiResponseInterval) { clearInterval(this.aiResponseInterval); this.aiResponseInterval = null; }
+    this.isAiResponding = false;
+    this.cdr.detectChanges();
   }
 
-  handleEnterPress(event: KeyboardEvent): void {
-    if (this.isSpeaking) { event.preventDefault(); return; }
-    if (event.key === 'Enter' && !event.shiftKey) {
-      event.preventDefault();
-      const text = (this.userInput || '').trim();
-      if (text) this.sendMessage();
+  muteMicrophone(): void {
+    try {
+      if (this.recognition && typeof this.recognition.stop === 'function') {
+        this.recognition.stop();
+      }
+    } catch (e) {
+      console.warn('Error stopping recognition:', e);
     }
+    this.isListening = false;
+    this.isProcessingSpeech = false;
+    this.errorMessage = '';
+    this.cdr.detectChanges();
+  }
+
+  openMicrophoneSettings(): void {
+    const ua = navigator.userAgent || '';
+    try {
+      if (ua.includes('Edg') || ua.includes('Edge')) {
+        window.open('edge://settings/content/microphone', '_blank');
+      } else if (ua.includes('Chrome') && !ua.includes('Chromium')) {
+        window.open('chrome://settings/content/microphone', '_blank');
+      } else if (ua.includes('Firefox')) {
+        window.open('about:preferences#privacy', '_blank');
+      } else if (/Safari/.test(ua) && /Macintosh/.test(navigator.platform)) {
+        alert('Open Safari → Settings (or Preferences) → Websites → Microphone to enable access.');
+      } else {
+        alert("Please check your browser's settings to enable the microphone.");
+      }
+    } catch (err) {
+      console.error('openMicrophoneSettings error:', err);
+      alert("Unable to open settings automatically. Please check your browser's microphone/privacy settings.");
+    }
+    this.cdr.detectChanges();
+  }
+
+  private _isShortFollowup(text: string | undefined): boolean {
+    if (!text) return false;
+    const t = text.toLowerCase().replace(/[^\w\s?]/g, "").trim();
+    if (!t) return false;
+    if (/\b(example|examples|more examples|another example|give example|more)\b/.test(t)) {
+      return t.split(/\s+/).length <= 8;
+    }
+    return ["more", "more?", "another?", "another example?"].includes(t);
+  }
+
+  // Add this method inside the ChatComponent class (near other audio helpers)
+  stopReadAloud(): void {
+    // Stop any server audio and reset UI playback state
+    try { this.stopServerAudio(); } catch { /* noop */ }
+    this.isReadingIndex = null;
+    this.isSpeaking = false;
+    this.cdr.detectChanges();
+  }
+
+  openMicrophonePopup(): void {
+    this._recordingFinalBuffer = '';
+    this._recordingInterimBuffer = '';
+    this.popupTranscript = '';
+    this.errorMessage = '';
+    this.showMicPopup = true;
+    setTimeout(() => this.startRecording(), 200);
+  }
+
+  closeMicrophonePopup(): void {
+    this.stopRecording();
+    this.showMicPopup = false;
+    this.popupTranscript = '';
+    this._recordingFinalBuffer = '';
+    this._recordingInterimBuffer = '';
+    this.errorMessage = '';
+    this.cdr.detectChanges();
+  }
+
+  async startRecording(): Promise<void> {
+    if (!this.recognition) { this.errorMessage = 'Speech recognition not supported.'; return; }
+
+    this._recordingFinalBuffer = '';
+    this._recordingInterimBuffer = '';
+    this.popupTranscript = '';
+    this.errorMessage = '';
+    this.isRecording = true;
+
+    try { this.recognition.interimResults = true; } catch { }
+    try { this.recognition.start(); } catch (e) {
+      console.warn('Could not start recognition', e);
+      if (!this._recognitionActive) {
+        setTimeout(() => { try { this.recognition.start(); } catch { } }, 300);
+      }
+    }
+
+    try { await this.startAnalyzer(); } catch (err) { console.warn('Analyzer failed to start', err); }
+    this.cdr.detectChanges();
+  }
+
+  async stopRecording(): Promise<void> {
+    if (this._restartTimer) { clearTimeout(this._restartTimer); this._restartTimer = null; }
+    if (this.recognition && this.isRecording) { try { this.recognition.stop(); } catch { } }
+    try { this.stopAnalyzer(); } catch { /* noop */ }
+    this.isRecording = false;
+
+    const finalText = (this._recordingFinalBuffer || '').trim();
+    const interimText = (this._recordingInterimBuffer || '').trim();
+    const combinedRaw = (finalText + ' ' + interimText).trim();
+
+    if (!combinedRaw) {
+      this.popupTranscript = '';
+      this.cdr.detectChanges();
+      return;
+    }
+
+    this.popupTranscript = 'Processing…';
+    this.cdr.detectChanges();
+
+    let punctuated = combinedRaw;
+    try {
+      console.log('[VOICE] raw transcript:', combinedRaw);
+      // call backend at /rag/punctuate
+      punctuated = await this.punctuateText(combinedRaw);
+      console.log('[VOICE] punctuated result:', punctuated);
+    } catch (err) {
+      console.warn('Punctuation API failed', err);
+      punctuated = combinedRaw;
+    }
+
+    let normalized = this.normalizeTranscript(punctuated);
+
+    const hasTerminalPunctuation = /[.?!]$/.test(normalized);
+    const questionPattern = /^(who|what|when|where|why|how|which|whom|whose|is|are|am|was|were|do|does|did|can|could|would|will|shall|should|have|has|had)\b/i;
+    if (!hasTerminalPunctuation && questionPattern.test(combinedRaw)) {
+      normalized = normalized + '?';
+    }
+
+    this.popupTranscript = normalized;
+    this.cdr.detectChanges();
+  }
+
+  private extractAssistantContent(raw: string): string {
+    if (!raw) return raw;
+    try {
+      // Look for ChatCompletionMessage(content='...') or content="..."
+      const re1 = /message=ChatCompletionMessage\(\s*content=(['"])((?:\\.|(?!\1).)*)\1/;
+      const m1 = raw.match(re1);
+      if (m1 && m1[2]) return m1[2].replace(/\\'/g, "'").replace(/\\"/g, '"').trim();
+
+      const re2 = /ChatCompletionMessage\(\s*content=(['"])((?:\\.|(?!\1).)*)\1/;
+      const m2 = raw.match(re2);
+      if (m2 && m2[2]) return m2[2].replace(/\\'/g, "'").replace(/\\"/g, '"').trim();
+
+      // Fallback: any content='...' anywhere
+      const re3 = /content=(['"])((?:\\.|(?!\1).)*)\1/;
+      const m3 = raw.match(re3);
+      if (m3 && m3[2]) return m3[2].replace(/\\'/g, "'").replace(/\\"/g, '"').trim();
+    } catch (e) {
+      console.warn('extractAssistantContent error', e);
+    }
+    return raw.trim();
+  }
+
+  private async punctuateText(raw: string): Promise<string> {
+    if (!raw) return raw;
+    try {
+      // Use ApiService so backend URL is centralized
+      const resp$ = this.apiService.punctuate(raw);
+      const res = await lastValueFrom(resp$);
+      if (res && typeof res.punctuated === 'string' && res.punctuated.trim().length) {
+        const punctuated = res.punctuated.trim();
+        const extracted = this.extractAssistantContent(punctuated);
+        return extracted || punctuated;
+      }
+    } catch (err) {
+      console.warn('punctuateText error', err);
+    }
+    return raw;
+  }
+
+  confirmAndSendTranscript(): void {
+    let text = (this.popupTranscript || '').trim();
+    if (!text) { this.errorMessage = 'No speech captured'; return; }
+
+    text = this.normalizeTranscript(text);
+    // still emit in case other components listen
+    this.transcriptConfirmed.emit(text);
+
+    // Send the extracted/normalized text as a user message to the chat
+    try {
+      this.sendMessage(text);
+    } catch (e) {
+      console.warn('Failed to send transcript as message', e);
+    }
+
+    // reset popup state
+    this._recordingFinalBuffer = '';
+    this._recordingInterimBuffer = '';
+    this.showMicPopup = false;
+    this.isRecording = false;
+    if (this._restartTimer) { clearTimeout(this._restartTimer); this._restartTimer = null; }
+    this.popupTranscript = '';
+    this.cdr.detectChanges();
+  }
+
+  private normalizeTranscript(text: string): string {
+    if (!text) return text;
+    let t = text.trim();
+
+    const mappings: Array<[RegExp, string]> = [
+      [/\b(full stop|period|dot)\b/gi, '.'],
+      [/\b(question mark|question)\b/gi, '?'],
+      [/\b(exclamation mark|exclamation|exclaim)\b/gi, '!'],
+      [/\b(comma)\b/gi, ','],
+      [/\b(colon)\b/gi, ':'],
+      [/\b(semicolon)\b/gi, ';'],
+      [/\b(ellipsis|dot dot dot|three dots)\b/gi, '...'],
+      [/\b(new line|newline|new paragraph|line break)\b/gi, '\n'],
+      [/\b(open parenthesis|open bracket)\b/gi, '('],
+      [/\b(close parenthesis|close bracket)\b/gi, ')'],
+      [/\b(double quote|quote|quotation)\b/gi, '"'],
+      [/\b(single quote|apostrophe)\b/gi, "'"],
+      [/\b(dash|hyphen)\b/gi, '-'],
+      [/\b(percent|percent sign)\b/gi, '%'],
+      [/\b(and sign|ampersand)\b/gi, '&'],
+      [/\b(at sign)\b/gi, '@'],
+      [/\b(forward slash|slash)\b/gi, '/'],
+      [/\b(backslash)\b/gi, '\\\\']
+    ];
+
+    for (const [re, rep] of mappings) t = t.replace(re, rep);
+
+    t = t.replace(/\s+([,.:;?!%'\)\]\}])/g, '$1');
+    t = t.replace(/\s+([\(\[\{"'`])/g, '$1');
+    t = t.replace(/([.?!:;,%\)\]'"-]{1,3})(?!\s|\n|$)/g, '$1 ');
+    t = t.replace(/[ \t]{2,}/g, ' ');
+    t = t.split('\n').map(line => line.trim()).join('\n');
+    t = t.replace(/(^|[\n\.!\?]\s+)([a-z])/g, (m, p1, p2) => p1 + p2.toUpperCase());
+
+    return t.trim();
+  }
+
+  // WebAudio analyzer (unchanged) — methods startAnalyzer, stopAnalyzer, drawWaveform, ngOnDestroy...
+  private async startAnalyzer(): Promise<void> {
+    if (!isPlatformBrowser(this.platformId)) return;
+
+    // Ensure canvas is available (rare race when popup just opened)
+    if (!this.waveformCanvas || !this.waveformCanvas.nativeElement) {
+      await new Promise(r => setTimeout(r, 80));
+      if (!this.waveformCanvas || !this.waveformCanvas.nativeElement) {
+        console.warn('Waveform canvas not available');
+        return;
+      }
+    }
+
+    try {
+      // Ensure we have a running AudioContext
+      if (!this.audioContext || (this.audioContext && this.audioContext.state === 'closed')) {
+        this.audioContext = new (window.AudioContext || (window as any).webkitAudioContext)();
+      } else if (this.audioContext.state === 'suspended') {
+        // resume if previously suspended
+        try { await this.audioContext.resume(); } catch { /* noop */ }
+      }
+
+      // Always request a fresh MediaStream for analyzer — it's cheap after permission is granted
+      if (this.mediaStream) {
+        try { this.mediaStream.getTracks().forEach(t => t.stop()); } catch { /* noop */ }
+        this.mediaStream = null;
+      }
+
+      const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
+      this.mediaStream = stream;
+
+      // Create source and analyser
+      const source = this.audioContext.createMediaStreamSource(stream);
+
+      // Safely disconnect previous analyser if any
+      try { if (this.analyser) { try { this.analyser.disconnect(); } catch { } } } catch { /* noop */ }
+
+      const analyser = this.audioContext.createAnalyser();
+      analyser.fftSize = 2048;
+      analyser.smoothingTimeConstant = 0.85;
+      source.connect(analyser);
+
+      this.analyser = analyser;
+      const bufferLength = analyser.fftSize;
+      this.dataArray = new Uint8Array(bufferLength);
+
+      // Start drawing loop (will cancel any previous RAF)
+      this.drawWaveform();
+    } catch (err) {
+      console.warn('startAnalyzer error', err);
+      // clean partial state on failure
+      try { if (this.mediaStream) { this.mediaStream.getTracks().forEach(t => t.stop()); this.mediaStream = null; } } catch { /* noop */ }
+      try { if (this.analyser) { this.analyser.disconnect(); this.analyser = null; } } catch { /* noop */ }
+      this.dataArray = null;
+      // do not swallow error — caller can decide how to handle
+      throw err;
+    }
+  }
+
+  private stopAnalyzer(): void {
+    try {
+      if (this.animationFrameId) { cancelAnimationFrame(this.animationFrameId); this.animationFrameId = null; }
+
+      if (this.analyser) {
+        try { this.analyser.disconnect(); } catch { /* noop */ }
+        this.analyser = null;
+      }
+
+      if (this.mediaStream) {
+        try { this.mediaStream.getTracks().forEach(t => t.stop()); } catch { /* noop */ }
+        this.mediaStream = null;
+      }
+
+      // Close the AudioContext to fully reset state (async). Do not await here to avoid blocking UI.
+      try {
+        if (this.audioContext && typeof this.audioContext.close === 'function') {
+          this.audioContext.close().catch(() => { /* noop */ }).finally(() => { this.audioContext = null; });
+        } else {
+          this.audioContext = null;
+        }
+      } catch { this.audioContext = null; }
+
+      this.dataArray = null;
+
+      // Clear canvas
+      if (this.waveformCanvas && this.waveformCanvas.nativeElement) {
+        const c = this.waveformCanvas.nativeElement;
+        const ctx = c.getContext('2d');
+        if (ctx) ctx.clearRect(0, 0, c.width, c.height);
+      }
+    } catch (err) {
+      console.warn('stopAnalyzer error', err);
+    }
+  }
+
+  private drawWaveform(): void {
+    if (!this.waveformCanvas || !this.waveformCanvas.nativeElement || !this.analyser || !this.dataArray) return;
+    const canvas = this.waveformCanvas.nativeElement;
+    const ctx = canvas.getContext('2d');
+    if (!ctx) return;
+    const dpr = window.devicePixelRatio || 1;
+
+    const resize = () => {
+      const rect = canvas.getBoundingClientRect();
+      const w = Math.max(1, Math.floor(rect.width * dpr));
+      const h = Math.max(1, Math.floor(rect.height * dpr));
+      if (canvas.width !== w || canvas.height !== h) { canvas.width = w; canvas.height = h; }
+    };
+
+    const render = () => {
+      // If popup was closed or analyzer removed, stop rendering
+      if (!this.waveformCanvas || !this.waveformCanvas.nativeElement || !this.analyser || !this.dataArray) {
+        if (this.animationFrameId) { cancelAnimationFrame(this.animationFrameId); this.animationFrameId = null; }
+        return;
+      }
+
+      // If canvas is not visible (e.g. popup hidden), stop loop to avoid wasted CPU and potential silent failures
+      // offsetParent is null for display:none, also check bounding rect sanity
+      const rect = canvas.getBoundingClientRect();
+      if (rect.width === 0 || rect.height === 0 || !canvas.offsetParent) {
+        if (this.animationFrameId) { cancelAnimationFrame(this.animationFrameId); this.animationFrameId = null; }
+        return;
+      }
+
+      resize();
+
+      try {
+        this.analyser.getByteTimeDomainData(this.dataArray);
+      } catch (e) {
+        // analyser may have been disconnected / audioContext closed mid-frame
+        console.warn('analyser.getByteTimeDomainData failed', e);
+        if (this.animationFrameId) { cancelAnimationFrame(this.animationFrameId); this.animationFrameId = null; }
+        return;
+      }
+
+      let sum = 0;
+      for (let i = 0; i < this.dataArray.length; i++) {
+        const v = this.dataArray[i] - 128;
+        sum += v * v;
+      }
+      const rms = Math.sqrt(sum / this.dataArray.length) / 128;
+      const level = Math.min(1, Math.max(0, rms));
+
+      ctx.clearRect(0, 0, canvas.width, canvas.height);
+
+      const baselineY = canvas.height / 2;
+
+      // faint baseline
+      ctx.save();
+      ctx.globalAlpha = 0.25;
+      ctx.strokeStyle = '#666';
+      ctx.lineWidth = Math.max(1, 1 * dpr);
+      ctx.setLineDash([2 * dpr, 3 * dpr]);
+      ctx.beginPath();
+      ctx.moveTo(0, baselineY);
+      ctx.lineTo(canvas.width, baselineY);
+      ctx.stroke();
+      ctx.setLineDash([]);
+      ctx.restore();
+
+      // waveform
+      ctx.lineWidth = Math.max(1, 1 * dpr);
+      ctx.strokeStyle = 'rgba(37,168,90,0.95)';
+      ctx.beginPath();
+      const slice = canvas.width / this.dataArray.length;
+      let x = 0;
+      for (let i = 0; i < this.dataArray.length; i++) {
+        const v = this.dataArray[i] / 128.0;
+        const y = (v * canvas.height) / 2;
+        const drawY = baselineY - (y - canvas.height / 2) * 0.6;
+        if (i === 0) ctx.moveTo(x, drawY); else ctx.lineTo(x, drawY);
+        x += slice;
+      }
+      ctx.stroke();
+
+      // highlight center bar that responds to level
+      const highlightMaxW = canvas.width * 0.7;
+      const highlightW = Math.max(2 * dpr, highlightMaxW * (0.05 + level * 0.95));
+      const hh = Math.max(4 * dpr, 6 * dpr);
+      const hx = (canvas.width - highlightW) / 2;
+      const hy = baselineY - hh / 2;
+      ctx.save();
+      ctx.globalAlpha = 0.18 + level * 0.3;
+      ctx.fillStyle = '#25a85a';
+      ctx.fillRect(hx - 6 * dpr, hy - 6 * dpr, highlightW + 12 * dpr, hh + 12 * dpr);
+      ctx.restore();
+
+      ctx.fillStyle = '#25a85a';
+      ctx.globalAlpha = 1;
+      ctx.fillRect(hx, hy, highlightW, hh);
+
+      this.animationFrameId = requestAnimationFrame(render);
+    };
+
+    // Start the loop (ensure any previous RAF is cancelled first)
+    if (this.animationFrameId) cancelAnimationFrame(this.animationFrameId);
+    this.animationFrameId = requestAnimationFrame(render);
   }
+  //ngOnDestroy(): void {
+  //  if (this._restartTimer) { clearTimeout(this._restartTimer); this._restartTimer = null; }
+  //  try { this.stopAnalyzer(); } catch { }
+  //  if (this.recognition) {
+  //    try { this.recognition.stop(); } catch { }
+  //  }
+  //}
 }