diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index 629574f..3f11908 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -5,7 +5,7 @@ import { ChatComponent } from './chat/chat.component';
@Component({
selector: 'app-root',
standalone: true,
- imports: [RouterOutlet, ChatComponent],
+ imports: [RouterOutlet],
providers: [],
templateUrl: './app.component.html',
styleUrl: './app.component.scss'
diff --git a/src/app/chat/chat.component.html b/src/app/chat/chat.component.html
index c44d7e9..03c98f5 100644
--- a/src/app/chat/chat.component.html
+++ b/src/app/chat/chat.component.html
@@ -1,15 +1,10 @@
-
-
-
-
-
+
+
+
diff --git a/src/app/chat/chat.component.scss b/src/app/chat/chat.component.scss
index f6c4f28..20846ac 100644
--- a/src/app/chat/chat.component.scss
+++ b/src/app/chat/chat.component.scss
@@ -7,13 +7,18 @@ $system-message-color: #64a0c8;
$user-message-color: #0a2d57;
$background-color: #f4f4f4;
$border-color: #ccc;
-$chat-height: 100%;
+$chat-height: 100vh;
$chat-width: 100%;
$header-height: 40px;
$logo-size: 40px;
+*, *::before, *::after {
+ box-sizing: border-box;
+}
+
.chat-container {
font-family: roboto, sans-serif;
+ margin: 0;
display: flex;
flex-direction: column;
justify-content: space-between;
@@ -26,13 +31,11 @@ $logo-size: 40px;
.chat-header {
display: flex;
- justify-content: space-between;
align-items: center;
+ justify-content: space-between;
background-color: $primary-color;
color: white;
padding: 8px;
- font-size: 14px;
- height: $header-height;
}
.chat-logo {
@@ -41,8 +44,12 @@ $logo-size: 40px;
object-fit: contain;
}
+ .study-program-dropdown {
+ min-width: 400px;
+ }
+
.chat-body {
- flex: 1;
+ flex: 1 1 auto;
padding: 10px;
overflow-y: auto;
background-color: white;
@@ -171,18 +178,4 @@ $logo-size: 40px;
transform: translateY(-2px);
opacity: 0.7;
}
-}
-
-.study-program-dropdown {
- box-sizing: border-box;
- padding: 10px;
- background-color: $tum-acordion-blue;
- border-bottom: 1px solid $border-color;
- color: $tum-blue-dark;
-
- .dropdown-label {
- font-size: 14px;
- font-weight: bold;
- margin-bottom: 5px;
- }
}
\ No newline at end of file
diff --git a/src/app/chat/chat.component.ts b/src/app/chat/chat.component.ts
index 8be62cb..7b6fa21 100644
--- a/src/app/chat/chat.component.ts
+++ b/src/app/chat/chat.component.ts
@@ -22,7 +22,7 @@ export const MESSAGES = {
`,
errorMessage: `Sorry, but I am currently unable to answer your questions. Please try again at a later time.`,
placeholder: `Type your message here...`,
- dropdownLabel: `Select Study Program:`
+ dropdownLabel: `Select Study Program`
},
de: {
welcomeMessage: `
@@ -34,7 +34,7 @@ export const MESSAGES = {
`,
errorMessage: `Entschuldigung, aber ich kann Ihre Fragen derzeit nicht beantworten. Bitte versuchen Sie es später erneut.`,
placeholder: `Geben Sie hier Ihre Nachricht ein...`,
- dropdownLabel: `Studiengang auswählen:`
+ dropdownLabel: `Studiengang auswählen`
}
};
@@ -59,7 +59,7 @@ export class ChatComponent implements OnInit, AfterViewChecked {
dropdownLabel: string = '';
// FormControl for the study program dropdown
- studyProgramControl = new FormControl('');
+ studyProgramControl = new FormControl(null);
studyPrograms = studyPrograms;
language: 'en' | 'de' = 'en'; // Default language is English
@@ -114,7 +114,7 @@ export class ChatComponent implements OnInit, AfterViewChecked {
this.resetTextAreaHeight();
this.needScrollToBottom = true;
- const selectedProgram = this.studyProgramControl.value as string;
+ const selectedProgram = this.studyProgramControl.value? this.studyProgramControl.value as string : '';
// Add a loading message to indicate the bot is typing
const loadingMessage: ChatMessage = { message: '', type: 'loading' };
diff --git a/src/app/login/login.component.scss b/src/app/login/login.component.scss
index a4903a7..9ade5e8 100644
--- a/src/app/login/login.component.scss
+++ b/src/app/login/login.component.scss
@@ -5,6 +5,7 @@
border: 1px solid #ddd;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+ margin: 16px
}
h2 {
diff --git a/src/app/login/login.component.ts b/src/app/login/login.component.ts
index 8127075..461aa67 100644
--- a/src/app/login/login.component.ts
+++ b/src/app/login/login.component.ts
@@ -2,11 +2,15 @@ import { Component } from '@angular/core';
import { FormControl, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms';
import { Router } from '@angular/router';
import { AuthService } from '../services/auth.service';
+import { NgIf } from '@angular/common';
@Component({
selector: 'app-login',
standalone: true,
- imports: [ReactiveFormsModule],
+ imports: [
+ ReactiveFormsModule,
+ NgIf
+ ],
templateUrl: './login.component.html',
styleUrl: './login.component.scss'
})
diff --git a/src/styles.scss b/src/styles.scss
index 5cd501f..1e5904f 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -6,4 +6,10 @@
font-weight: bold;
text-decoration: underline;
cursor: pointer;
-}
\ No newline at end of file
+}
+
+html, body {
+ height: 100%;
+ margin: 0;
+ padding: 0;
+ }
\ No newline at end of file