Merge pull request #3 from ls1intum/chatbot-ui-improvements

Chatbot UI improvements

src/app/app.component.html

@@ -1 +1 @@
-<app-chat></app-chat>
+<router-outlet></router-outlet>

src/app/app.component.ts

@@ -1,13 +1,11 @@
 import { Component } from '@angular/core';
 import { RouterOutlet } from '@angular/router';
 import { ChatComponent } from './chat/chat.component';
-import { ChatbotService } from './services/chatbot.service';
-import { HttpClientModule } from '@angular/common/http';
 
 @Component({
   selector: 'app-root',
   standalone: true,
-  imports: [RouterOutlet, ChatComponent, HttpClientModule],
+  imports: [RouterOutlet, ChatComponent],
   providers: [],
   templateUrl: './app.component.html',
   styleUrl: './app.component.scss'

src/app/app.config.ts

@@ -1,8 +1,12 @@
 import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';
 import { provideRouter } from '@angular/router';
-
 import { routes } from './app.routes';
+import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
 
 export const appConfig: ApplicationConfig = {
-  providers: [provideZoneChangeDetection({ eventCoalescing: true }), provideRouter(routes)]
-};
+  providers: [
+    provideZoneChangeDetection({ eventCoalescing: true }),
+    provideRouter(routes),
+    provideHttpClient(withInterceptorsFromDi())
+  ]
+};

src/app/app.routes.ts

@@ -1,3 +1,8 @@
 import { Routes } from '@angular/router';
+import { ChatComponent } from './chat/chat.component';
 
-export const routes: Routes = [];
+export const routes: Routes = [
+  { path: 'chat/en', component: ChatComponent, data: { language: 'en' } },
+  { path: 'chat/de', component: ChatComponent, data: { language: 'de' } },
+  { path: '', redirectTo: 'chat/en', pathMatch: 'full' } // Default to English chat
+];

src/app/chat/chat.component.html

@@ -1,7 +1,7 @@
 <div class="chat-container">
 
     <div class="chat-header">
-        <h2>Chatbot</h2>
+        <h2>CIT Chatbot</h2>
         <img src="assets/logo.png" alt="Logo" class="chat-logo" />
     </div>
 
@@ -12,16 +12,43 @@ <h2>Chatbot</h2>
         </ng-select>
     </div>
 
-    <div class="chat-body" #chatbotBody>
-        <div class="message" *ngFor="let message of messages" [ngClass]="message.type">
-            <span>{{ message.message }}</span>
+    <div class="chat-body" #chatBody>
+        <div
+            class="message"
+            *ngFor="let message of messages"
+            [ngClass]="message.type"
+            #messageElements>
+
+            <ng-container *ngIf="message.type === 'system'">
+                <span [innerHTML]="message.message"></span>
+            </ng-container>
+
+            <ng-container *ngIf="message.type !== 'system'">
+                <span>{{ message.message }}</span>
+            </ng-container>
+
+            <ng-container *ngIf="message.type === 'loading'">
+                <span class="dot-loader">
+                  <span class="dot"></span>
+                  <span class="dot"></span>
+                  <span class="dot"></span>
+                </span>
+              </ng-container>
         </div>
-        <div #scrollAnchor></div>
     </div>
 
     <div class="chat-footer">
-        <input type="text" [(ngModel)]="userMessage" (keyup.enter)="sendMessage()"
-            placeholder="Type your message here..." />
-        <button (click)="sendMessage()">Send</button>
+        <textarea 
+          #messageInput
+          [(ngModel)]="userMessage"
+          (input)="adjustTextAreaHeight($event)"
+          (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>
     </div>
 </div>

src/app/chat/chat.component.scss

@@ -7,9 +7,9 @@ $system-message-color: #64a0c8;
 $user-message-color: #0a2d57;
 $background-color: #f4f4f4;
 $border-color: #ccc;
-$chat-height: 500px;
+$chat-height: 640px;
 $chat-width: 100%;
-$header-height: 50px;
+$header-height: 40px;
 $logo-size: 40px;
 
 .chat-container {
@@ -30,8 +30,8 @@ $logo-size: 40px;
         align-items: center;
         background-color: $primary-color;
         color: white;
-        padding: 10px;
-        font-size: 18px;
+        padding: 8px;
+        font-size: 14px;
         height: $header-height;
     }
 
@@ -65,6 +65,13 @@ $logo-size: 40px;
             color: white;
             align-self: flex-start;
             border-top-left-radius: 0;
+
+            a {
+                color: white;          // Set link text to white
+                font-weight: bold;      // Make the link bold
+                text-decoration: underline; // Ensure underline
+                cursor: pointer;        // Pointer cursor on hover
+            }
         }
 
         &.user {
@@ -81,31 +88,88 @@ $logo-size: 40px;
         background-color: $tum-acordion-blue;
         border-top: 1px solid $border-color;
 
-        input[type='text'] {
+        textarea {
+            box-sizing: border-box;
             flex: 1;
             padding: 10px;
             border: 1px solid $border-color;
             border-radius: 4px;
             font-size: 14px;
+            line-height: 1.5;
+            resize: none;
+            overflow-y: hidden;
+            min-height: calc(1.5em * 1); // Minimum height for 1 line
+            max-height: calc(1.5em * 4); // Maximum height for 4 lines
         }
 
         button {
             background-color: $tum-light-blue;
             color: white;
-            padding: 10px 20px;
+            padding: 10px;
             margin-left: 10px;
             border: none;
             border-radius: 4px;
-            font-size: 14px;
             cursor: pointer;
-
+            display: flex;
+            align-items: center;
+            justify-content: center;
+
             &:hover {
                 background-color: $primary-color;
             }
+
+            svg {
+                fill: white;
+                width: 20px;
+                height: 20px;
+            }
         }
     }
 }
 
+.dot-loader {
+    display: inline-flex;
+    gap: 4px;
+    background-color: $tum-light-blue; // Match the system message bubble color
+    color: white; // Text color within the bubble
+    padding: 10px;
+    border-radius: 16px;
+    align-self: flex-start;
+    border-top-left-radius: 0;
+  }
+
+  .dot {
+    display: inline-block;
+    width: 5px;
+    height: 5px;
+    background-color: white; // Dot color matches text color
+    border-radius: 50%;
+    animation: dotBounce 1s infinite ease-in-out;
+  }
+
+  .dot:nth-child(1) {
+    animation-delay: 0s;
+  }
+
+  .dot:nth-child(2) {
+    animation-delay: 0.2s;
+  }
+
+  .dot:nth-child(3) {
+    animation-delay: 0.4s;
+  }
+
+  @keyframes dotBounce {
+    0%, 80%, 100% {
+      transform: translateY(0);
+      opacity: 1;
+    }
+    40% {
+      transform: translateY(-2px);
+      opacity: 0.7;
+    }
+  }
+
 .study-program-dropdown {
     box-sizing: border-box;
     padding: 10px;