merge

Author: Unischneider

angular.json

@@ -111,5 +111,8 @@
         }
       }
     }
+  },
+  "cli": {
+    "analytics": false
   }
 }

src/app/chat/chat.component.html

@@ -6,7 +6,7 @@ <h2>CIT Chatbot</h2>
     </div>
 
     <div class="study-program-dropdown">
-        <label for="studyProgramSelect" class="dropdown-label">Select Study Program:</label>
+        <label for="studyProgramSelect" class="dropdown-label">{{ dropdownLabel }}</label>
         <ng-select class="select" [items]="studyPrograms" bindLabel="label" bindValue="value"
             [formControl]="studyProgramControl" placeholder="Select your study program">
         </ng-select>
@@ -45,10 +45,13 @@ <h2>CIT Chatbot</h2>
           (keydown)="onKeyDown($event)"
           [placeholder]="placeholderText"
           rows="1"></textarea>
-        <button (click)="sendMessage()">
-            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 24 24">
-                <path d="M2.01 21L23 12 2.01 3 2 10l15 2-15 2z"/>
-            </svg>
+        <button 
+          (click)="sendMessage()"
+          [disabled]="disableSending"
+          [ngClass]="{ 'disabled': disableSending }">
+          <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 24 24">
+            <path d="M2.01 21L23 12 2.01 3 2 10l15 2-15 2z"/>
+          </svg>
         </button>
     </div>
 </div>

src/app/chat/chat.component.scss

@@ -110,6 +110,12 @@ $logo-size: 40px;
             &:hover {
                 background-color: $primary-color;
             }
+
+            &.disabled {
+                background-color: $border-color;
+                color: #aaa;
+                cursor: not-allowed;
+            }
 
             svg {
                 fill: white;

src/app/chat/chat.component.ts

@@ -21,7 +21,8 @@ export const MESSAGES = {
       If you'd like program-specific advice, please select your study program from the dropdown menu at the top, and I'll provide you with the most relevant information.
     `,
     errorMessage: `Sorry, but I am currently unable to answer your questions. Please try again at a later time.`,
-    placeholder: `Type your message here...`
+    placeholder: `Type your message here...`,
+    dropdownLabel: `Select Study Program:`
   },
   de: {
     welcomeMessage: `
@@ -32,7 +33,8 @@ export const MESSAGES = {
       Wenn Sie studiengangspezifische Ratschläge benötigen, wählen Sie bitte Ihr Studienprogramm aus dem Dropdown-Menü oben, und ich werde Ihnen die relevantesten Informationen bereitstellen.
     `,
     errorMessage: `Entschuldigung, aber ich kann Ihre Fragen derzeit nicht beantworten. Bitte versuchen Sie es später erneut.`,
-    placeholder: `Geben Sie hier Ihre Nachricht ein...`
+    placeholder: `Geben Sie hier Ihre Nachricht ein...`,
+    dropdownLabel: `Studiengang auswählen:`
   }
 };
 
@@ -54,13 +56,15 @@ export class ChatComponent implements OnInit, AfterViewChecked {
   placeholderText: string = '';
   welcomeMessage: string = '';
   errorMessage: string = '';
+  dropdownLabel: string = '';
 
   // FormControl for the study program dropdown
   studyProgramControl = new FormControl('');
   studyPrograms = studyPrograms;
 
   language: 'en' | 'de' = 'en'; // Default language is English
   private needScrollToBottom: boolean = false;
+  disableSending: boolean = false;
 
   constructor(private chatbotService: ChatbotService, private route: ActivatedRoute) { }
 
@@ -84,6 +88,7 @@ export class ChatComponent implements OnInit, AfterViewChecked {
     this.welcomeMessage = MESSAGES[this.language].welcomeMessage;
     this.errorMessage = MESSAGES[this.language].errorMessage;
     this.placeholderText = MESSAGES[this.language].placeholder;
+    this.dropdownLabel = MESSAGES[this.language].dropdownLabel;
   }
 
   onKeyDown(event: KeyboardEvent): void {
@@ -92,7 +97,8 @@ export class ChatComponent implements OnInit, AfterViewChecked {
       !event.shiftKey &&
       !event.ctrlKey &&
       !event.altKey &&
-      !event.metaKey
+      !event.metaKey &&
+      !this.disableSending
     ) {
       event.preventDefault(); // Prevents the default action of adding a newline
       this.sendMessage();
@@ -102,6 +108,7 @@ export class ChatComponent implements OnInit, AfterViewChecked {
   sendMessage() {
     if (this.userMessage.trim()) {
       // Add the user's message to the messages array
+      this.disableSending = true;
       this.messages.push({ message: this.userMessage, type: 'user' });
       this.userMessage = '';
       this.resetTextAreaHeight();
@@ -113,9 +120,10 @@ export class ChatComponent implements OnInit, AfterViewChecked {
       const loadingMessage: ChatMessage = { message: '', type: 'loading' };
       this.messages.push(loadingMessage);
       this.needScrollToBottom = true;
-  
-      // Prepare the messages to send to the bot, excluding the loading message
-      const messagesToSend = this.messages.filter(msg => msg.type !== 'loading');
+
+      const nonLoadingMessages = this.messages.filter(msg => msg.type !== 'loading');
+      // Keep only the last 5 messages, if there are 5 or more
+      const messagesToSend = nonLoadingMessages.slice(-5);
 
       // Call the bot service with the filtered messages
       this.chatbotService.getBotResponse(messagesToSend, selectedProgram).subscribe({
@@ -126,6 +134,7 @@ export class ChatComponent implements OnInit, AfterViewChecked {
           const formattedResponse = this.formatResponseText(response.answer);
           this.messages.push({ message: formattedResponse, type: 'system' });
           this.needScrollToBottom = true;
+          this.disableSending = false;
         },
         error: (error) => {
           console.error('Error fetching response:', error);
@@ -137,6 +146,7 @@ export class ChatComponent implements OnInit, AfterViewChecked {
             type: 'system'
           });
           this.needScrollToBottom = true;
+          this.disableSending = false;
         }
       });
     }

src/app/services/chatbot.service.ts

@@ -1,7 +1,7 @@
-import { HttpClient, HttpHeaders } from '@angular/common/http';
+import { HttpClient, HttpErrorResponse, HttpHeaders } from '@angular/common/http';
 import { Injectable } from '@angular/core';
 import { ChatMessage } from '../chat/chat.component';
-import { Observable, switchMap } from 'rxjs';
+import { catchError, Observable, switchMap, throwError } from 'rxjs';
 import { environment } from '../../environments/environment';
 import { AuthService } from './auth.service';