From c34b5bba3157d46847ee24039990b525f8d83c06 Mon Sep 17 00:00:00 2001
From: Ece Eren <aybikeceren@gmail.com>
Date: Mon, 29 May 2023 11:46:25 +0200
Subject: [PATCH 001/111] Chatbot full screen initialization -not complete

---
 src/main/webapp/app/app-routing.module.ts     |  6 ++++
 src/main/webapp/app/app.module.ts             |  3 ++
 .../exercise-chat-widget.component.html       |  8 ++---
 .../exercise-chat-widget.component.scss       | 11 +++++++
 .../exercise-chat-widget.component.ts         | 33 +++++++++++++++++--
 5 files changed, 54 insertions(+), 7 deletions(-)

diff --git a/src/main/webapp/app/app-routing.module.ts b/src/main/webapp/app/app-routing.module.ts
index 02f2510f7892..5392d68c9b11 100644
--- a/src/main/webapp/app/app-routing.module.ts
+++ b/src/main/webapp/app/app-routing.module.ts
@@ -3,6 +3,7 @@ import { RouterModule, Routes } from '@angular/router';
 import { navbarRoute } from 'app/shared/layouts/navbar/navbar.route';
 import { errorRoute } from 'app/shared/layouts/error/error.route';
 import { ArtemisNavigationUtilService } from 'app/utils/navigation.utils';
+import { ExerciseChatWidgetComponent } from 'app/overview/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component';
 
 const LAYOUT_ROUTES: Routes = [navbarRoute, ...errorRoute];
 
@@ -116,6 +117,11 @@ const LAYOUT_ROUTES: Routes = [navbarRoute, ...errorRoute];
                     path: 'lti',
                     loadChildren: () => import('./lti/lti.module').then((m) => m.ArtemisLtiModule),
                 },
+                {
+                    path: 'chat',
+                    component: ExerciseChatWidgetComponent,
+                    pathMatch: 'full',
+                },
             ],
             { enableTracing: false, onSameUrlNavigation: 'reload' },
         ),
diff --git a/src/main/webapp/app/app.module.ts b/src/main/webapp/app/app.module.ts
index 31bbc6783b76..ef01b06a4c1b 100644
--- a/src/main/webapp/app/app.module.ts
+++ b/src/main/webapp/app/app.module.ts
@@ -26,6 +26,7 @@ import { NotificationPopupComponent } from 'app/shared/notification/notification
 import { UserSettingsModule } from 'app/shared/user-settings/user-settings.module';
 import { ThemeModule } from 'app/core/theme/theme.module';
 import { ArtemisSharedComponentModule } from 'app/shared/components/shared-component.module';
+import { MatDialog, MatDialogModule } from '@angular/material/dialog';
 
 // NOTE: this module should only include the most important modules for normal users, all course management, admin and account functionality should be lazy loaded if possible
 @NgModule({
@@ -47,6 +48,7 @@ import { ArtemisSharedComponentModule } from 'app/shared/components/shared-compo
         UserSettingsModule,
         ThemeModule,
         ArtemisSharedComponentModule,
+        MatDialogModule,
     ],
     declarations: [
         JhiMainComponent,
@@ -62,5 +64,6 @@ import { ArtemisSharedComponentModule } from 'app/shared/components/shared-compo
         LoadingNotificationComponent,
     ],
     bootstrap: [JhiMainComponent],
+    providers: [MatDialog],
 })
 export class ArtemisAppModule {}
diff --git a/src/main/webapp/app/overview/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.html b/src/main/webapp/app/overview/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.html
index 5317c4d7e8ff..b497b70e0255 100644
--- a/src/main/webapp/app/overview/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.html
+++ b/src/main/webapp/app/overview/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.html
@@ -1,14 +1,14 @@
 <div class="container">
     <!-- chat box -->
-    <div class="chat-widget">
+    <div [class]="componentClass">
         <!-- client -->
         <div class="client">
             <div class="chat-header">
-                <button class="header-icon">
+                <button *ngIf="componentClass !== 'chat-widget-fullscreen'" (click)="openComponentInNewWindow()" class="header-icon">
                     <fa-icon size="lg" [icon]="faExpand"></fa-icon>
                 </button>
-                <h2>Iris</h2>
-                <button (click)="closeChat()" class="header-icon">
+                <h2 style="text-align: center">Iris</h2>
+                <button *ngIf="componentClass !== 'chat-widget-fullscreen'" (click)="closeChat()" class="header-icon">
                     <fa-icon size="lg" [icon]="faXmark"></fa-icon>
                 </button>
             </div>
diff --git a/src/main/webapp/app/overview/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.scss b/src/main/webapp/app/overview/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.scss
index 8d31bfa55b41..4dbb602b7bfb 100644
--- a/src/main/webapp/app/overview/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.scss
+++ b/src/main/webapp/app/overview/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.scss
@@ -12,6 +12,17 @@
     box-shadow: 0 0 50px rgba(0, 0, 0, 0.4);
 }
 
+.chat-widget-fullscreen {
+    position: fixed;
+    width: 100%;
+    height: 100%;
+    left: 0;
+    top: 0;
+    background-color: white;
+    z-index: 10;
+    padding-bottom: 10px;
+}
+
 .chat-header {
     display: flex;
     justify-content: space-between;
diff --git a/src/main/webapp/app/overview/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.ts b/src/main/webapp/app/overview/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.ts
index b8c6e8729b8a..7bd9490124de 100644
--- a/src/main/webapp/app/overview/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.ts
+++ b/src/main/webapp/app/overview/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.ts
@@ -1,29 +1,51 @@
-import { Component, ElementRef, ViewChild } from '@angular/core';
+import { Component, ElementRef, OnInit, ViewChild } from '@angular/core';
 import { faPaperPlane } from '@fortawesome/free-solid-svg-icons';
 import { faExpand } from '@fortawesome/free-solid-svg-icons';
 import { faXmark } from '@fortawesome/free-solid-svg-icons';
 import { MatDialog } from '@angular/material/dialog';
+import { ActivatedRoute } from '@angular/router';
 
 @Component({
     selector: 'jhi-exercise-chat-widget',
     templateUrl: './exercise-chat-widget.component.html',
     styleUrls: ['./exercise-chat-widget.component.scss'],
 })
-export class ExerciseChatWidgetComponent {
+export class ExerciseChatWidgetComponent implements OnInit {
     @ViewChild('chatWidget') chatWidget!: ElementRef;
     @ViewChild('chatBody') chatBody!: ElementRef;
     messages: string[] = [];
     irisMessages: string[] = ['Hey! How can I help you?'];
     userMessages: string[] = [];
     newMessage = '';
+    componentClass = 'chat-widget';
 
-    constructor(private dialog: MatDialog) {}
+    constructor(private dialog: MatDialog, private route: ActivatedRoute) {}
 
     // Icons
     faPaperPlane = faPaperPlane;
     faExpand = faExpand;
     faXmark = faXmark;
 
+    ngOnInit() {
+        this.route.url.subscribe((data) => {
+            if (data[0].path === 'chat') {
+                this.setFullScreenClass();
+            } else {
+                this.setDefaultClass();
+            }
+        });
+    }
+
+    private setFullScreenClass() {
+        // Add logic to set the CSS class for route A
+        this.componentClass = 'chat-widget-fullscreen';
+    }
+
+    private setDefaultClass() {
+        // Add logic to set the CSS class for route B
+        this.componentClass = 'chat-widget';
+    }
+
     onSend(): void {
         if (this.newMessage) {
             this.userMessages.push(this.newMessage);
@@ -42,4 +64,9 @@ export class ExerciseChatWidgetComponent {
     closeChat() {
         this.dialog.closeAll();
     }
+
+    openComponentInNewWindow() {
+        window.open('/chat', '_blank', 'width=400,height=600');
+        this.closeChat();
+    }
 }

From c794781370ced0f0deba5e1ac9ee81537328bedf Mon Sep 17 00:00:00 2001
From: Asli Aykan <asliaykan97@gmail.com>
Date: Mon, 29 May 2023 12:23:37 +0200
Subject: [PATCH 002/111] draggable & resizable features added

---
 angular.json                                         |  1 +
 package-lock.json                                    |  9 +++++++++
 package.json                                         |  1 +
 .../exercise-chatbot/exercise-chatbot.component.html |  2 +-
 .../exercise-chatbot/exercise-chatbot.component.ts   |  3 ++-
 .../exercise-chatbot/exercise-chatbot.module.ts      |  5 +++--
 .../exercise-chat-widget.component.html              |  2 +-
 .../exercise-chat-widget.component.scss              | 12 ++++++++++--
 8 files changed, 28 insertions(+), 7 deletions(-)

diff --git a/angular.json b/angular.json
index d951be6d5ddf..96e258bb18c9 100644
--- a/angular.json
+++ b/angular.json
@@ -100,6 +100,7 @@
               }
             ],
             "styles": [
+                "node_modules/angular2-draggable/css/resizable.min.css",
               "src/main/webapp/content/scss/themes/theme-default.scss",
               {
                 "bundleName": "theme-dark",
diff --git a/package-lock.json b/package-lock.json
index 7e672a0e496b..26a1cdd5e304 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -40,6 +40,7 @@
                 "@swimlane/ngx-charts": "20.3.0",
                 "@swimlane/ngx-graph": "8.0.3",
                 "ace-builds": "1.22.0",
+                "angular2-draggable": "16.0.0",
                 "bootstrap": "5.2.3",
                 "brace": "0.11.1",
                 "compare-versions": "5.0.3",
@@ -8041,6 +8042,14 @@
                 "ajv": "^8.8.2"
             }
         },
+        "node_modules/angular2-draggable": {
+            "version": "16.0.0",
+            "resolved": "https://registry.npmjs.org/angular2-draggable/-/angular2-draggable-16.0.0.tgz",
+            "integrity": "sha512-LQL4cMdJYYmki9KibdU6Fns8NPmCOcfIW2I2tF9/PXWquIaL2IWT1xP4Kkin+v+ki7Is2Zua6lDFBrScP8Ww7w==",
+            "dependencies": {
+                "tslib": "^2.3.0"
+            }
+        },
         "node_modules/ansi-colors": {
             "version": "4.1.3",
             "resolved": "https://registry.npmjs.org/ansi-colors/-/ansi-colors-4.1.3.tgz",
diff --git a/package.json b/package.json
index cb433674fd62..f1ad23243cff 100644
--- a/package.json
+++ b/package.json
@@ -43,6 +43,7 @@
         "@swimlane/ngx-charts": "20.3.0",
         "@swimlane/ngx-graph": "8.0.3",
         "ace-builds": "1.22.0",
+        "angular2-draggable": "^16.0.0",
         "bootstrap": "5.2.3",
         "brace": "0.11.1",
         "compare-versions": "5.0.3",
diff --git a/src/main/webapp/app/overview/exercise-chatbot/exercise-chatbot.component.html b/src/main/webapp/app/overview/exercise-chatbot/exercise-chatbot.component.html
index 4b83d04ff0e0..b79549f926e3 100644
--- a/src/main/webapp/app/overview/exercise-chatbot/exercise-chatbot.component.html
+++ b/src/main/webapp/app/overview/exercise-chatbot/exercise-chatbot.component.html
@@ -1,5 +1,5 @@
 <div class="chatbot-button">
     <button class="btn btn-primary btn-md btn-circle" title="{{ 'artemisApp.exerciseChatbot.buttonTooltip' | artemisTranslate }}" (click)="handleButtonClick()">
-        <fa-icon size="lg" [icon]="faCommentDots"></fa-icon>
+        <fa-icon size="lg" [icon]="chatOpen ? faChevronDown : faCommentDots"></fa-icon>
     </button>
 </div>
diff --git a/src/main/webapp/app/overview/exercise-chatbot/exercise-chatbot.component.ts b/src/main/webapp/app/overview/exercise-chatbot/exercise-chatbot.component.ts
index 8fcc4658729b..0ab28902bdaa 100644
--- a/src/main/webapp/app/overview/exercise-chatbot/exercise-chatbot.component.ts
+++ b/src/main/webapp/app/overview/exercise-chatbot/exercise-chatbot.component.ts
@@ -1,5 +1,5 @@
 import { Component, OnDestroy } from '@angular/core';
-import { faCommentDots } from '@fortawesome/free-solid-svg-icons';
+import { faChevronDown, faCommentDots } from '@fortawesome/free-solid-svg-icons';
 import { MatDialog, MatDialogRef } from '@angular/material/dialog';
 import { ChatbotPopupComponent } from './chatbot-popup/chatbot-popup.component';
 import { ExerciseChatWidgetComponent } from 'app/overview/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component';
@@ -17,6 +17,7 @@ export class ExerciseChatbotComponent implements OnDestroy {
     chatOpen = false;
     // Icons
     faCommentDots = faCommentDots;
+    faChevronDown = faChevronDown;
 
     constructor(public dialog: MatDialog, private overlay: Overlay) {}
 
diff --git a/src/main/webapp/app/overview/exercise-chatbot/exercise-chatbot.module.ts b/src/main/webapp/app/overview/exercise-chatbot/exercise-chatbot.module.ts
index dec985db3de2..10e135a179af 100644
--- a/src/main/webapp/app/overview/exercise-chatbot/exercise-chatbot.module.ts
+++ b/src/main/webapp/app/overview/exercise-chatbot/exercise-chatbot.module.ts
@@ -2,14 +2,15 @@ import { NgModule } from '@angular/core';
 import { ChatbotPopupComponent } from './chatbot-popup/chatbot-popup.component';
 import { MatDialogModule } from '@angular/material/dialog';
 import { CommonModule } from '@angular/common';
-import { FormsModule } from '@angular/forms'; // Import FormsModule
+import { FormsModule } from '@angular/forms';
 import { ExerciseChatWidgetComponent } from 'app/overview/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component';
 import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
 import { ArtemisSharedModule } from 'app/shared/shared.module';
+import { AngularDraggableModule } from 'angular2-draggable';
 
 @NgModule({
     declarations: [ChatbotPopupComponent, ExerciseChatWidgetComponent],
-    imports: [MatDialogModule, FormsModule, CommonModule, FontAwesomeModule, ArtemisSharedModule],
+    imports: [MatDialogModule, FormsModule, CommonModule, FontAwesomeModule, ArtemisSharedModule, AngularDraggableModule],
     providers: [],
 })
 export class ExerciseChatbotModule {}
diff --git a/src/main/webapp/app/overview/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.html b/src/main/webapp/app/overview/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.html
index b497b70e0255..874b402945ad 100644
--- a/src/main/webapp/app/overview/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.html
+++ b/src/main/webapp/app/overview/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.html
@@ -1,6 +1,6 @@
 <div class="container">
     <!-- chat box -->
-    <div [class]="componentClass">
+    <div [class]="componentClass" ngDraggable ngResizable rzHandles="all" [rzMinWidth]="250" [rzMinHeight]="200">
         <!-- client -->
         <div class="client">
             <div class="chat-header">
diff --git a/src/main/webapp/app/overview/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.scss b/src/main/webapp/app/overview/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.scss
index 4dbb602b7bfb..d13d87bf574f 100644
--- a/src/main/webapp/app/overview/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.scss
+++ b/src/main/webapp/app/overview/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.scss
@@ -4,7 +4,7 @@
 
 .chat-widget {
     position: fixed;
-    bottom: 100px;
+    bottom: 90px;
     right: 60px;
     width: 300px;
     height: 400px;
@@ -23,6 +23,14 @@
     padding-bottom: 10px;
 }
 
+.ng-draggable {
+    cursor: grab;
+}
+
+.ng-dragging {
+    cursor: grabbing;
+}
+
 .chat-header {
     display: flex;
     justify-content: space-between;
@@ -70,7 +78,7 @@
     display: flex;
     align-items: center;
     justify-content: space-between;
-    padding: 10px;
+    padding: 5px;
     background-color: var(--iris-client-chat-input);
 }
 

From 564ac59678516014d59d051a2353d99815a1f073 Mon Sep 17 00:00:00 2001
From: Asli Aykan <asliaykan97@gmail.com>
Date: Mon, 29 May 2023 13:30:41 +0200
Subject: [PATCH 003/111] minor design updates

---
 .../exercise-chat-widget.component.html                   | 8 +++++++-
 .../exercise-chat-widget.component.scss                   | 4 +---
 src/main/webapp/content/scss/themes/_dark-variables.scss  | 3 ++-
 .../webapp/content/scss/themes/_default-variables.scss    | 1 +
 4 files changed, 11 insertions(+), 5 deletions(-)

diff --git a/src/main/webapp/app/overview/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.html b/src/main/webapp/app/overview/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.html
index 874b402945ad..ecda89275ff6 100644
--- a/src/main/webapp/app/overview/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.html
+++ b/src/main/webapp/app/overview/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.html
@@ -22,7 +22,13 @@ <h2 style="text-align: center">Iris</h2>
 
         <!-- input field section -->
         <div class="chat-input">
-            <input [(ngModel)]="newMessage" type="text" (keyup.enter)="onSend()" placeholder="{{ 'artemisApp.exerciseChatbot.inputMessage' | artemisTranslate }}" />
+            <input
+                [(ngModel)]="newMessage"
+                type="text"
+                class="form-control"
+                (keyup.enter)="onSend()"
+                placeholder="{{ 'artemisApp.exerciseChatbot.inputMessage' | artemisTranslate }}"
+            />
             <button (click)="onSend()" class="btn btn-primary btn-md btn-circle">
                 <fa-icon [icon]="faPaperPlane"></fa-icon>
             </button>
diff --git a/src/main/webapp/app/overview/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.scss b/src/main/webapp/app/overview/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.scss
index d13d87bf574f..b7c4909151da 100644
--- a/src/main/webapp/app/overview/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.scss
+++ b/src/main/webapp/app/overview/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.scss
@@ -86,15 +86,13 @@
     flex: 1;
     margin-right: 10px;
     padding: 5px 15px;
-    border: 1px solid var(--gray-300);
-    border-radius: 20px;
 }
 
 .btn-circle {
     width: 40px;
     height: 40px;
     border-radius: 50%;
-    background-color: var(--green);
+    background-color: var(--iris-btn-circle);
     border: none;
 }
 
diff --git a/src/main/webapp/content/scss/themes/_dark-variables.scss b/src/main/webapp/content/scss/themes/_dark-variables.scss
index fd1545a95a90..6fe65dcaf28a 100644
--- a/src/main/webapp/content/scss/themes/_dark-variables.scss
+++ b/src/main/webapp/content/scss/themes/_dark-variables.scss
@@ -603,4 +603,5 @@ $iris-chat-widget-background: var(--bs-body-bg);
 $iris-client-chat-background: var(--gray-700);
 $iris-client-chat-input: var(--gray-700);
 $iris-my-chat-background: #008462;
-$iris-btn-circle-hover: #008462;
+$iris-btn-circle: var(--teal);
+$iris-btn-circle-hover: var(--success);
diff --git a/src/main/webapp/content/scss/themes/_default-variables.scss b/src/main/webapp/content/scss/themes/_default-variables.scss
index 93a1bdfaf7d7..33ebfa47a35a 100644
--- a/src/main/webapp/content/scss/themes/_default-variables.scss
+++ b/src/main/webapp/content/scss/themes/_default-variables.scss
@@ -519,4 +519,5 @@ $iris-chat-widget-background: #fff;
 $iris-client-chat-background: var(--gray-200);
 $iris-client-chat-input: var(--gray-200);
 $iris-my-chat-background: #a9dcb5;
+$iris-btn-circle: var(--success);
 $iris-btn-circle-hover: #3eb058;

From 4cfe4223b58b0b8ac276e674884c3790972287e1 Mon Sep 17 00:00:00 2001
From: Asli Aykan <asliaykan97@gmail.com>
Date: Wed, 31 May 2023 11:08:53 +0200
Subject: [PATCH 004/111] popup window moved into widget

---
 .../chatbot-popup.component.html              |  7 ----
 .../chatbot-popup.component.scss              |  7 ----
 .../chatbot-popup/chatbot-popup.component.ts  | 20 ----------
 .../exercise-chatbot.component.ts             | 16 +-------
 .../exercise-chatbot.module.ts                |  3 +-
 .../exercise-chat-widget.component.html       |  9 ++++-
 .../exercise-chat-widget.component.scss       | 39 +++++++++++++++++++
 .../exercise-chat-widget.component.ts         | 29 ++++++++++++--
 8 files changed, 75 insertions(+), 55 deletions(-)
 delete mode 100644 src/main/webapp/app/overview/exercise-chatbot/chatbot-popup/chatbot-popup.component.html
 delete mode 100644 src/main/webapp/app/overview/exercise-chatbot/chatbot-popup/chatbot-popup.component.scss
 delete mode 100644 src/main/webapp/app/overview/exercise-chatbot/chatbot-popup/chatbot-popup.component.ts

diff --git a/src/main/webapp/app/overview/exercise-chatbot/chatbot-popup/chatbot-popup.component.html b/src/main/webapp/app/overview/exercise-chatbot/chatbot-popup/chatbot-popup.component.html
deleted file mode 100644
index f271e043e7e7..000000000000
--- a/src/main/webapp/app/overview/exercise-chatbot/chatbot-popup/chatbot-popup.component.html
+++ /dev/null
@@ -1,7 +0,0 @@
-<h2 mat-dialog-title>{{ 'artemisApp.exerciseChatbot.welcome' | artemisTranslate }} {{ firstName }}!</h2>
-<div mat-dialog-content>{{ 'artemisApp.exerciseChatbot.popUpMessage' | artemisTranslate }}</div>
-
-<mat-dialog-actions class="dialog-buttons">
-    <button mat-button mat-dialog-close mat-dialog-close="true" class="btn btn-primary">{{ 'artemisApp.exerciseChatbot.accept' | artemisTranslate }}</button>
-    <button mat-button mat-dialog-close mat-dialog-close="false" class="btn btn-primary">{{ 'artemisApp.exerciseChatbot.decline' | artemisTranslate }}</button>
-</mat-dialog-actions>
diff --git a/src/main/webapp/app/overview/exercise-chatbot/chatbot-popup/chatbot-popup.component.scss b/src/main/webapp/app/overview/exercise-chatbot/chatbot-popup/chatbot-popup.component.scss
deleted file mode 100644
index 861dd4721d59..000000000000
--- a/src/main/webapp/app/overview/exercise-chatbot/chatbot-popup/chatbot-popup.component.scss
+++ /dev/null
@@ -1,7 +0,0 @@
-.btn {
-    margin-left: 5px;
-}
-
-.dialog-buttons {
-    justify-content: right;
-}
diff --git a/src/main/webapp/app/overview/exercise-chatbot/chatbot-popup/chatbot-popup.component.ts b/src/main/webapp/app/overview/exercise-chatbot/chatbot-popup/chatbot-popup.component.ts
deleted file mode 100644
index db803f051eb0..000000000000
--- a/src/main/webapp/app/overview/exercise-chatbot/chatbot-popup/chatbot-popup.component.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-import { Component, OnInit } from '@angular/core';
-import { AccountService } from 'app/core/auth/account.service';
-import { User } from 'app/core/user/user.model';
-
-@Component({
-    selector: 'jhi-chatbot-popup',
-    templateUrl: './chatbot-popup.component.html',
-    styleUrls: ['./chatbot-popup.component.scss'],
-})
-export class ChatbotPopupComponent implements OnInit {
-    public firstName: string | undefined;
-
-    constructor(private accountService: AccountService) {}
-
-    ngOnInit() {
-        this.accountService.identity().then((user: User) => {
-            this.firstName = user!.firstName?.split(' ')[0];
-        });
-    }
-}
diff --git a/src/main/webapp/app/overview/exercise-chatbot/exercise-chatbot.component.ts b/src/main/webapp/app/overview/exercise-chatbot/exercise-chatbot.component.ts
index 0ab28902bdaa..aa8cbfa008c1 100644
--- a/src/main/webapp/app/overview/exercise-chatbot/exercise-chatbot.component.ts
+++ b/src/main/webapp/app/overview/exercise-chatbot/exercise-chatbot.component.ts
@@ -1,7 +1,6 @@
 import { Component, OnDestroy } from '@angular/core';
 import { faChevronDown, faCommentDots } from '@fortawesome/free-solid-svg-icons';
 import { MatDialog, MatDialogRef } from '@angular/material/dialog';
-import { ChatbotPopupComponent } from './chatbot-popup/chatbot-popup.component';
 import { ExerciseChatWidgetComponent } from 'app/overview/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component';
 import { Overlay } from '@angular/cdk/overlay';
 
@@ -31,24 +30,11 @@ export class ExerciseChatbotComponent implements OnDestroy {
         if (this.chatOpen && this.dialogRef) {
             this.dialogRef!.close();
             this.chatOpen = false;
-        } else if (this.chatAccepted) {
-            this.openChat();
         } else {
-            this.openDialog();
+            this.openChat();
         }
     }
 
-    openDialog() {
-        const dialogRef = this.dialog.open(ChatbotPopupComponent, {});
-
-        dialogRef.afterClosed().subscribe((result) => {
-            this.chatAccepted = result == 'true';
-            if (this.chatAccepted) {
-                this.openChat();
-            }
-        });
-    }
-
     openChat() {
         if (!this.buttonDisabled) {
             this.chatOpen = true;
diff --git a/src/main/webapp/app/overview/exercise-chatbot/exercise-chatbot.module.ts b/src/main/webapp/app/overview/exercise-chatbot/exercise-chatbot.module.ts
index 10e135a179af..900e07d3101c 100644
--- a/src/main/webapp/app/overview/exercise-chatbot/exercise-chatbot.module.ts
+++ b/src/main/webapp/app/overview/exercise-chatbot/exercise-chatbot.module.ts
@@ -1,5 +1,4 @@
 import { NgModule } from '@angular/core';
-import { ChatbotPopupComponent } from './chatbot-popup/chatbot-popup.component';
 import { MatDialogModule } from '@angular/material/dialog';
 import { CommonModule } from '@angular/common';
 import { FormsModule } from '@angular/forms';
@@ -9,7 +8,7 @@ import { ArtemisSharedModule } from 'app/shared/shared.module';
 import { AngularDraggableModule } from 'angular2-draggable';
 
 @NgModule({
-    declarations: [ChatbotPopupComponent, ExerciseChatWidgetComponent],
+    declarations: [ExerciseChatWidgetComponent],
     imports: [MatDialogModule, FormsModule, CommonModule, FontAwesomeModule, ArtemisSharedModule, AngularDraggableModule],
     providers: [],
 })
diff --git a/src/main/webapp/app/overview/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.html b/src/main/webapp/app/overview/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.html
index ecda89275ff6..caa208683808 100644
--- a/src/main/webapp/app/overview/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.html
+++ b/src/main/webapp/app/overview/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.html
@@ -16,6 +16,13 @@ <h2 style="text-align: center">Iris</h2>
 
         <!-- main chat section -->
         <div class="chat-body" #chatBody>
+            <div class="p-chat" *ngIf="!userAccepted">
+                <div class="message-text">{{ perMessage }}</div>
+                <div class="button-container">
+                    <button class="button" (click)="acceptPermission()">Accept</button>
+                    <button class="button" (click)="closeChat()">Decline</button>
+                </div>
+            </div>
             <div *ngFor="let message of irisMessages" class="client-chat">{{ message }}</div>
             <div *ngFor="let message of userMessages" class="my-chat">{{ message }}</div>
         </div>
@@ -29,7 +36,7 @@ <h2 style="text-align: center">Iris</h2>
                 (keyup.enter)="onSend()"
                 placeholder="{{ 'artemisApp.exerciseChatbot.inputMessage' | artemisTranslate }}"
             />
-            <button (click)="onSend()" class="btn btn-primary btn-md btn-circle">
+            <button [disabled]="!userAccepted" (click)="onSend()" class="btn btn-primary btn-md btn-circle">
                 <fa-icon [icon]="faPaperPlane"></fa-icon>
             </button>
         </div>
diff --git a/src/main/webapp/app/overview/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.scss b/src/main/webapp/app/overview/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.scss
index b7c4909151da..13aabcb2e14d 100644
--- a/src/main/webapp/app/overview/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.scss
+++ b/src/main/webapp/app/overview/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.scss
@@ -100,3 +100,42 @@
 .btn-circle:active {
     background-color: var(--iris-btn-circle-hover);
 }
+.p-chat {
+    background-color: var(--iris-client-chat-background);
+    color: var(--bs-body-color);
+    padding: 0;
+    border-radius: 10px;
+    margin-bottom: 10px;
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+    border: 1.5px solid var(--iris-client-chat-background);
+}
+
+.message-text {
+    padding: 10px;
+    border-top-left-radius: 10px;
+    border-top-right-radius: 10px;
+    border-bottom: 1px solid var(--iris-client-chat-background);
+}
+
+.button-container {
+    display: flex;
+}
+
+.button {
+    flex: 1;
+    padding: 10px 0;
+    background-color: #fff;
+    color: var(--bs-body-color);
+    border: none;
+    cursor: pointer;
+}
+
+.button:first-child {
+    border-right: 1px solid var(--iris-client-chat-background);
+}
+
+.button:hover {
+    background-color: #f5f5f5;
+}
diff --git a/src/main/webapp/app/overview/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.ts b/src/main/webapp/app/overview/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.ts
index 7bd9490124de..06783c3c4ee0 100644
--- a/src/main/webapp/app/overview/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.ts
+++ b/src/main/webapp/app/overview/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.ts
@@ -4,6 +4,9 @@ import { faExpand } from '@fortawesome/free-solid-svg-icons';
 import { faXmark } from '@fortawesome/free-solid-svg-icons';
 import { MatDialog } from '@angular/material/dialog';
 import { ActivatedRoute } from '@angular/router';
+import { LocalStorageService } from 'ngx-webstorage';
+import { AccountService } from 'app/core/auth/account.service';
+import { User } from 'app/core/user/user.model';
 
 @Component({
     selector: 'jhi-exercise-chat-widget',
@@ -14,12 +17,15 @@ export class ExerciseChatWidgetComponent implements OnInit {
     @ViewChild('chatWidget') chatWidget!: ElementRef;
     @ViewChild('chatBody') chatBody!: ElementRef;
     messages: string[] = [];
-    irisMessages: string[] = ['Hey! How can I help you?'];
+    irisMessages: string[] = [];
     userMessages: string[] = [];
     newMessage = '';
     componentClass = 'chat-widget';
-
-    constructor(private dialog: MatDialog, private route: ActivatedRoute) {}
+    userAccepted = false;
+    perMessage =
+        "By choosing to continue, you agree that your interactions with IrisBot will be processed by Microsoft and OpenAI, with data transfer occurring outside of our university data center. If you do not agree with these terms, please select 'Decline'. To acknowledge this and begin your chat with IrisBot, press 'Accept'. ";
+    public firstName: string | undefined;
+    constructor(private dialog: MatDialog, private route: ActivatedRoute, private localStorage: LocalStorageService, private accountService: AccountService) {}
 
     // Icons
     faPaperPlane = faPaperPlane;
@@ -27,6 +33,7 @@ export class ExerciseChatWidgetComponent implements OnInit {
     faXmark = faXmark;
 
     ngOnInit() {
+        //localStorage.removeItem('ge86let');
         this.route.url.subscribe((data) => {
             if (data[0].path === 'chat') {
                 this.setFullScreenClass();
@@ -34,6 +41,11 @@ export class ExerciseChatWidgetComponent implements OnInit {
                 this.setDefaultClass();
             }
         });
+        this.accountService.identity().then((user: User) => {
+            if (typeof user!.login === 'string') {
+                this.userAccepted = localStorage.getItem(user!.login) == 'true';
+            }
+        });
     }
 
     private setFullScreenClass() {
@@ -69,4 +81,15 @@ export class ExerciseChatWidgetComponent implements OnInit {
         window.open('/chat', '_blank', 'width=400,height=600');
         this.closeChat();
     }
+
+    acceptPermission() {
+        this.accountService.identity().then((user: User) => {
+            if (typeof user!.login === 'string') {
+                localStorage.setItem(user!.login, 'true');
+            }
+        });
+
+        this.userAccepted = true;
+        this.irisMessages.push('Hey! How can I help you?');
+    }
 }

From f4217c77c597b69315b5dd132ae9d4cf3183bc7d Mon Sep 17 00:00:00 2001
From: Ece Eren <aybikeceren@gmail.com>
Date: Thu, 1 Jun 2023 17:00:39 +0200
Subject: [PATCH 005/111] Chatbot full screen design fix

---
 .../exercise-chat-widget.component.html           | 11 +++++++++--
 .../exercise-chat-widget.component.scss           |  9 ++++++---
 .../exercise-chat-widget.component.ts             | 15 ++++++++-------
 3 files changed, 23 insertions(+), 12 deletions(-)

diff --git a/src/main/webapp/app/overview/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.html b/src/main/webapp/app/overview/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.html
index caa208683808..0ff2e555bad5 100644
--- a/src/main/webapp/app/overview/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.html
+++ b/src/main/webapp/app/overview/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.html
@@ -1,9 +1,16 @@
 <div class="container">
     <!-- chat box -->
-    <div [class]="componentClass" ngDraggable ngResizable rzHandles="all" [rzMinWidth]="250" [rzMinHeight]="200">
+    <div
+        [class]="componentClass"
+        [ngDraggable]="componentClass !== 'chat-widget-fullscreen'"
+        [ngResizable]="componentClass !== 'chat-widget-fullscreen'"
+        [rzHandles]="componentClass !== 'chat-widget-fullscreen' ? 'all' : ''"
+        [rzMinWidth]="componentClass !== 'chat-widget-fullscreen' ? 250 : 0"
+        [rzMinHeight]="componentClass !== 'chat-widget-fullscreen' ? 200 : 0"
+    >
         <!-- client -->
         <div class="client">
-            <div class="chat-header">
+            <div [class]="headerClass">
                 <button *ngIf="componentClass !== 'chat-widget-fullscreen'" (click)="openComponentInNewWindow()" class="header-icon">
                     <fa-icon size="lg" [icon]="faExpand"></fa-icon>
                 </button>
diff --git a/src/main/webapp/app/overview/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.scss b/src/main/webapp/app/overview/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.scss
index 13aabcb2e14d..c03326b4a6c7 100644
--- a/src/main/webapp/app/overview/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.scss
+++ b/src/main/webapp/app/overview/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.scss
@@ -13,14 +13,12 @@
 }
 
 .chat-widget-fullscreen {
-    position: fixed;
+    @extend .chat-widget;
     width: 100%;
     height: 100%;
     left: 0;
     top: 0;
-    background-color: white;
     z-index: 10;
-    padding-bottom: 10px;
 }
 
 .ng-draggable {
@@ -41,6 +39,11 @@
     padding: 10px;
 }
 
+.chat-header-fullscreen {
+    @extend .chat-header;
+    justify-content: center;
+}
+
 .header-icon {
     border: none;
     background: transparent;
diff --git a/src/main/webapp/app/overview/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.ts b/src/main/webapp/app/overview/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.ts
index 06783c3c4ee0..078ba9b895d5 100644
--- a/src/main/webapp/app/overview/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.ts
+++ b/src/main/webapp/app/overview/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.ts
@@ -21,6 +21,7 @@ export class ExerciseChatWidgetComponent implements OnInit {
     userMessages: string[] = [];
     newMessage = '';
     componentClass = 'chat-widget';
+    headerClass = 'chat-header';
     userAccepted = false;
     perMessage =
         "By choosing to continue, you agree that your interactions with IrisBot will be processed by Microsoft and OpenAI, with data transfer occurring outside of our university data center. If you do not agree with these terms, please select 'Decline'. To acknowledge this and begin your chat with IrisBot, press 'Accept'. ";
@@ -48,14 +49,14 @@ export class ExerciseChatWidgetComponent implements OnInit {
         });
     }
 
-    private setFullScreenClass() {
-        // Add logic to set the CSS class for route A
-        this.componentClass = 'chat-widget-fullscreen';
+    private setDefaultClass() {
+        this.componentClass = 'chat-widget ngDraggable ngResizable';
+        this.headerClass = 'chat-header';
     }
 
-    private setDefaultClass() {
-        // Add logic to set the CSS class for route B
-        this.componentClass = 'chat-widget';
+    private setFullScreenClass() {
+        this.componentClass = 'chat-widget-fullscreen';
+        this.headerClass = 'chat-header-fullscreen';
     }
 
     onSend(): void {
@@ -78,7 +79,7 @@ export class ExerciseChatWidgetComponent implements OnInit {
     }
 
     openComponentInNewWindow() {
-        window.open('/chat', '_blank', 'width=400,height=600');
+        window.open('/chat', '_blank', 'width=600,height=600');
         this.closeChat();
     }
 

From 48240ccf360ca454cab7e85757b9994c17b079be Mon Sep 17 00:00:00 2001
From: Ece Eren <aybikeceren@gmail.com>
Date: Sat, 3 Jun 2023 13:23:00 +0200
Subject: [PATCH 006/111] Scroll to bottom button is added

---
 .../exercise-chat-widget.component.html       |  5 ++++-
 .../exercise-chat-widget.component.scss       | 16 +++++++++++++++
 .../exercise-chat-widget.component.ts         | 20 +++++++++++++++++++
 3 files changed, 40 insertions(+), 1 deletion(-)

diff --git a/src/main/webapp/app/overview/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.html b/src/main/webapp/app/overview/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.html
index 0ff2e555bad5..65a1cca36b1e 100644
--- a/src/main/webapp/app/overview/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.html
+++ b/src/main/webapp/app/overview/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.html
@@ -22,7 +22,7 @@ <h2 style="text-align: center">Iris</h2>
         </div>
 
         <!-- main chat section -->
-        <div class="chat-body" #chatBody>
+        <div class="chat-body" #chatBody (scroll)="onChatScroll()">
             <div class="p-chat" *ngIf="!userAccepted">
                 <div class="message-text">{{ perMessage }}</div>
                 <div class="button-container">
@@ -32,6 +32,9 @@ <h2 style="text-align: center">Iris</h2>
             </div>
             <div *ngFor="let message of irisMessages" class="client-chat">{{ message }}</div>
             <div *ngFor="let message of userMessages" class="my-chat">{{ message }}</div>
+            <div class="scroll-to-bottom" *ngIf="!isScrolledToBottom" (click)="scrollToBottomOnClick()">
+                <fa-icon [icon]="faArrowDown"></fa-icon>
+            </div>
         </div>
 
         <!-- input field section -->
diff --git a/src/main/webapp/app/overview/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.scss b/src/main/webapp/app/overview/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.scss
index c03326b4a6c7..6efb0503667c 100644
--- a/src/main/webapp/app/overview/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.scss
+++ b/src/main/webapp/app/overview/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.scss
@@ -142,3 +142,19 @@
 .button:hover {
     background-color: #f5f5f5;
 }
+
+.scroll-to-bottom {
+    position: absolute;
+    bottom: 60px;
+    right: 20px;
+    width: 30px;
+    height: 30px;
+    border-radius: 50%;
+    background-color: var(--secondary);
+    color: white;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    cursor: pointer;
+    box-shadow: 0 0 50px rgba(0, 0, 0, 0.4);
+}
diff --git a/src/main/webapp/app/overview/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.ts b/src/main/webapp/app/overview/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.ts
index 078ba9b895d5..ae2016533153 100644
--- a/src/main/webapp/app/overview/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.ts
+++ b/src/main/webapp/app/overview/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.ts
@@ -2,6 +2,7 @@ import { Component, ElementRef, OnInit, ViewChild } from '@angular/core';
 import { faPaperPlane } from '@fortawesome/free-solid-svg-icons';
 import { faExpand } from '@fortawesome/free-solid-svg-icons';
 import { faXmark } from '@fortawesome/free-solid-svg-icons';
+import { faArrowDown } from '@fortawesome/free-solid-svg-icons';
 import { MatDialog } from '@angular/material/dialog';
 import { ActivatedRoute } from '@angular/router';
 import { LocalStorageService } from 'ngx-webstorage';
@@ -26,12 +27,15 @@ export class ExerciseChatWidgetComponent implements OnInit {
     perMessage =
         "By choosing to continue, you agree that your interactions with IrisBot will be processed by Microsoft and OpenAI, with data transfer occurring outside of our university data center. If you do not agree with these terms, please select 'Decline'. To acknowledge this and begin your chat with IrisBot, press 'Accept'. ";
     public firstName: string | undefined;
+    isScrolledToBottom = true;
+
     constructor(private dialog: MatDialog, private route: ActivatedRoute, private localStorage: LocalStorageService, private accountService: AccountService) {}
 
     // Icons
     faPaperPlane = faPaperPlane;
     faExpand = faExpand;
     faXmark = faXmark;
+    faArrowDown = faArrowDown;
 
     ngOnInit() {
         //localStorage.removeItem('ge86let');
@@ -93,4 +97,20 @@ export class ExerciseChatWidgetComponent implements OnInit {
         this.userAccepted = true;
         this.irisMessages.push('Hey! How can I help you?');
     }
+
+    scrollToBottomOnClick() {
+        const chatBody = this.chatBody.nativeElement;
+        chatBody.scrollTop = chatBody.scrollHeight;
+        this.isScrolledToBottom = true;
+    }
+
+    onChatScroll() {
+        const chatBody = this.chatBody.nativeElement;
+        const scrollHeight = chatBody.scrollHeight;
+        const scrollTop = chatBody.scrollTop;
+        const clientHeight = chatBody.clientHeight;
+        const isScrollAtBottom = scrollHeight - scrollTop === clientHeight;
+
+        this.isScrolledToBottom = isScrollAtBottom;
+    }
 }

From e57829d5bac3c317f0f5ae7d2fa6df91e9bfd1e7 Mon Sep 17 00:00:00 2001
From: Ece Eren <aybikeceren@gmail.com>
Date: Sat, 3 Jun 2023 13:32:19 +0200
Subject: [PATCH 007/111] Multiline support is added to the input field

---
 .../exercise-chatwidget/exercise-chat-widget.component.html  | 5 +++--
 .../exercise-chatwidget/exercise-chat-widget.component.scss  | 2 +-
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/main/webapp/app/overview/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.html b/src/main/webapp/app/overview/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.html
index 65a1cca36b1e..708abbdabe06 100644
--- a/src/main/webapp/app/overview/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.html
+++ b/src/main/webapp/app/overview/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.html
@@ -39,13 +39,14 @@ <h2 style="text-align: center">Iris</h2>
 
         <!-- input field section -->
         <div class="chat-input">
-            <input
+            <textarea
                 [(ngModel)]="newMessage"
+                rows="1"
                 type="text"
                 class="form-control"
                 (keyup.enter)="onSend()"
                 placeholder="{{ 'artemisApp.exerciseChatbot.inputMessage' | artemisTranslate }}"
-            />
+            ></textarea>
             <button [disabled]="!userAccepted" (click)="onSend()" class="btn btn-primary btn-md btn-circle">
                 <fa-icon [icon]="faPaperPlane"></fa-icon>
             </button>
diff --git a/src/main/webapp/app/overview/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.scss b/src/main/webapp/app/overview/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.scss
index 6efb0503667c..cb944cbe2ad0 100644
--- a/src/main/webapp/app/overview/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.scss
+++ b/src/main/webapp/app/overview/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.scss
@@ -85,7 +85,7 @@
     background-color: var(--iris-client-chat-input);
 }
 
-.chat-input input {
+.chat-input textarea {
     flex: 1;
     margin-right: 10px;
     padding: 5px 15px;

From c2b40cf7a8417d723715375fa1e6d87e5890ba49 Mon Sep 17 00:00:00 2001
From: Ece Eren <aybikeceren@gmail.com>
Date: Sat, 3 Jun 2023 14:13:26 +0200
Subject: [PATCH 008/111] Robot and info button is added

---
 .../exercise-chatbot/exercise-chatbot.module.ts      |  3 ++-
 .../exercise-chat-widget.component.html              | 12 +++++++++---
 .../exercise-chat-widget.component.ts                | 11 ++++-------
 3 files changed, 15 insertions(+), 11 deletions(-)

diff --git a/src/main/webapp/app/overview/exercise-chatbot/exercise-chatbot.module.ts b/src/main/webapp/app/overview/exercise-chatbot/exercise-chatbot.module.ts
index 900e07d3101c..58d8cbb7f4b1 100644
--- a/src/main/webapp/app/overview/exercise-chatbot/exercise-chatbot.module.ts
+++ b/src/main/webapp/app/overview/exercise-chatbot/exercise-chatbot.module.ts
@@ -6,10 +6,11 @@ import { ExerciseChatWidgetComponent } from 'app/overview/exercise-chatbot/exerc
 import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
 import { ArtemisSharedModule } from 'app/shared/shared.module';
 import { AngularDraggableModule } from 'angular2-draggable';
+import { RouterModule } from '@angular/router';
 
 @NgModule({
     declarations: [ExerciseChatWidgetComponent],
-    imports: [MatDialogModule, FormsModule, CommonModule, FontAwesomeModule, ArtemisSharedModule, AngularDraggableModule],
+    imports: [MatDialogModule, FormsModule, CommonModule, FontAwesomeModule, ArtemisSharedModule, AngularDraggableModule, RouterModule],
     providers: [],
 })
 export class ExerciseChatbotModule {}
diff --git a/src/main/webapp/app/overview/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.html b/src/main/webapp/app/overview/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.html
index 708abbdabe06..d5f380fd5a03 100644
--- a/src/main/webapp/app/overview/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.html
+++ b/src/main/webapp/app/overview/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.html
@@ -12,11 +12,17 @@
         <div class="client">
             <div [class]="headerClass">
                 <button *ngIf="componentClass !== 'chat-widget-fullscreen'" (click)="openComponentInNewWindow()" class="header-icon">
-                    <fa-icon size="lg" [icon]="faExpand"></fa-icon>
+                    <fa-icon size="sm" [icon]="faExpand"></fa-icon>
                 </button>
-                <h2 style="text-align: center">Iris</h2>
+                <h3 style="text-align: center">
+                    <fa-icon size="xs" [icon]="faRobot"></fa-icon>
+                    Iris
+                    <a [routerLink]="'/about'" target="_blank">
+                        <fa-icon size="2xs" style="vertical-align: middle" [icon]="faCircleInfo" class="header-icon"></fa-icon>
+                    </a>
+                </h3>
                 <button *ngIf="componentClass !== 'chat-widget-fullscreen'" (click)="closeChat()" class="header-icon">
-                    <fa-icon size="lg" [icon]="faXmark"></fa-icon>
+                    <fa-icon size="sm" [icon]="faXmark"></fa-icon>
                 </button>
             </div>
         </div>
diff --git a/src/main/webapp/app/overview/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.ts b/src/main/webapp/app/overview/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.ts
index ae2016533153..e2fd0630a91d 100644
--- a/src/main/webapp/app/overview/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.ts
+++ b/src/main/webapp/app/overview/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.ts
@@ -1,8 +1,5 @@
 import { Component, ElementRef, OnInit, ViewChild } from '@angular/core';
-import { faPaperPlane } from '@fortawesome/free-solid-svg-icons';
-import { faExpand } from '@fortawesome/free-solid-svg-icons';
-import { faXmark } from '@fortawesome/free-solid-svg-icons';
-import { faArrowDown } from '@fortawesome/free-solid-svg-icons';
+import { faArrowDown, faCircleInfo, faExpand, faPaperPlane, faRobot, faXmark } from '@fortawesome/free-solid-svg-icons';
 import { MatDialog } from '@angular/material/dialog';
 import { ActivatedRoute } from '@angular/router';
 import { LocalStorageService } from 'ngx-webstorage';
@@ -36,6 +33,8 @@ export class ExerciseChatWidgetComponent implements OnInit {
     faExpand = faExpand;
     faXmark = faXmark;
     faArrowDown = faArrowDown;
+    faRobot = faRobot;
+    faCircleInfo = faCircleInfo;
 
     ngOnInit() {
         //localStorage.removeItem('ge86let');
@@ -109,8 +108,6 @@ export class ExerciseChatWidgetComponent implements OnInit {
         const scrollHeight = chatBody.scrollHeight;
         const scrollTop = chatBody.scrollTop;
         const clientHeight = chatBody.clientHeight;
-        const isScrollAtBottom = scrollHeight - scrollTop === clientHeight;
-
-        this.isScrolledToBottom = isScrollAtBottom;
+        this.isScrolledToBottom = scrollHeight - scrollTop === clientHeight;
     }
 }

From 9e13f46d614a545123f74f29edc94788f6eb8b6d Mon Sep 17 00:00:00 2001
From: Asli Aykan <asliaykan97@gmail.com>
Date: Tue, 6 Jun 2023 02:18:19 +0200
Subject: [PATCH 009/111] design updates

---
 .../exercise-chat-widget.component.html       | 20 ++++++++++---------
 .../exercise-chat-widget.component.scss       |  9 +++++++++
 2 files changed, 20 insertions(+), 9 deletions(-)

diff --git a/src/main/webapp/app/overview/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.html b/src/main/webapp/app/overview/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.html
index d5f380fd5a03..da8f5bcea8ad 100644
--- a/src/main/webapp/app/overview/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.html
+++ b/src/main/webapp/app/overview/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.html
@@ -11,19 +11,21 @@
         <!-- client -->
         <div class="client">
             <div [class]="headerClass">
-                <button *ngIf="componentClass !== 'chat-widget-fullscreen'" (click)="openComponentInNewWindow()" class="header-icon">
-                    <fa-icon size="sm" [icon]="faExpand"></fa-icon>
-                </button>
-                <h3 style="text-align: center">
-                    <fa-icon size="xs" [icon]="faRobot"></fa-icon>
+                <h3 class="header-start">
+                    <fa-icon size="xs" [icon]="faRobot" style="padding-right: 5px"></fa-icon>
                     Iris
                     <a [routerLink]="'/about'" target="_blank">
-                        <fa-icon size="2xs" style="vertical-align: middle" [icon]="faCircleInfo" class="header-icon"></fa-icon>
+                        <fa-icon style="vertical-align: middle; padding-left: 3px; font-size: 13px" [icon]="faCircleInfo" class="header-icon"></fa-icon>
                     </a>
                 </h3>
-                <button *ngIf="componentClass !== 'chat-widget-fullscreen'" (click)="closeChat()" class="header-icon">
-                    <fa-icon size="sm" [icon]="faXmark"></fa-icon>
-                </button>
+                <div class="button-container">
+                    <button *ngIf="componentClass !== 'chat-widget-fullscreen'" (click)="openComponentInNewWindow()" class="header-icon">
+                        <fa-icon style="font-size: 16px" [icon]="faExpand"></fa-icon>
+                    </button>
+                    <button *ngIf="componentClass !== 'chat-widget-fullscreen'" (click)="closeChat()" class="header-icon">
+                        <fa-icon style="font-size: 19px" [icon]="faXmark"></fa-icon>
+                    </button>
+                </div>
             </div>
         </div>
 
diff --git a/src/main/webapp/app/overview/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.scss b/src/main/webapp/app/overview/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.scss
index cb944cbe2ad0..8611d8cb35b8 100644
--- a/src/main/webapp/app/overview/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.scss
+++ b/src/main/webapp/app/overview/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.scss
@@ -2,6 +2,15 @@
     position: relative;
 }
 
+.header-start {
+    text-align: start;
+    padding-left: 5px;
+}
+.button-container {
+    display: flex;
+    align-items: center;
+}
+
 .chat-widget {
     position: fixed;
     bottom: 90px;

From 5174ba7dd961b87300fae02694d272f6bed4022b Mon Sep 17 00:00:00 2001
From: Asli Aykan <asliaykan97@gmail.com>
Date: Fri, 9 Jun 2023 14:13:55 +0200
Subject: [PATCH 010/111] design updates

---
 .../exercise-chat-widget.component.html                  | 6 +++---
 .../exercise-chat-widget.component.scss                  | 9 +++++----
 .../exercise-chat-widget.component.ts                    | 3 ---
 3 files changed, 8 insertions(+), 10 deletions(-)

diff --git a/src/main/webapp/app/overview/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.html b/src/main/webapp/app/overview/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.html
index da8f5bcea8ad..cfa8b45517a9 100644
--- a/src/main/webapp/app/overview/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.html
+++ b/src/main/webapp/app/overview/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.html
@@ -32,10 +32,10 @@ <h3 class="header-start">
         <!-- main chat section -->
         <div class="chat-body" #chatBody (scroll)="onChatScroll()">
             <div class="p-chat" *ngIf="!userAccepted">
-                <div class="message-text">{{ perMessage }}</div>
+                <div class="message-text">{{ 'artemisApp.exerciseChatbot.popUpMessage' | artemisTranslate }}</div>
                 <div class="button-container">
-                    <button class="button" (click)="acceptPermission()">Accept</button>
-                    <button class="button" (click)="closeChat()">Decline</button>
+                    <button class="button" (click)="acceptPermission()">{{ 'artemisApp.exerciseChatbot.accept' | artemisTranslate }}</button>
+                    <button class="button" (click)="closeChat()">{{ 'artemisApp.exerciseChatbot.decline' | artemisTranslate }}</button>
                 </div>
             </div>
             <div *ngFor="let message of irisMessages" class="client-chat">{{ message }}</div>
diff --git a/src/main/webapp/app/overview/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.scss b/src/main/webapp/app/overview/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.scss
index 8611d8cb35b8..4e819db8a3b7 100644
--- a/src/main/webapp/app/overview/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.scss
+++ b/src/main/webapp/app/overview/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.scss
@@ -15,8 +15,8 @@
     position: fixed;
     bottom: 90px;
     right: 60px;
-    width: 300px;
-    height: 400px;
+    width: 330px;
+    height: 430px;
     background-color: var(--iris-chat-widget-background);
     box-shadow: 0 0 50px rgba(0, 0, 0, 0.4);
 }
@@ -90,14 +90,14 @@
     display: flex;
     align-items: center;
     justify-content: space-between;
-    padding: 5px;
+    padding: 6px;
     background-color: var(--iris-client-chat-input);
 }
 
 .chat-input textarea {
     flex: 1;
     margin-right: 10px;
-    padding: 5px 15px;
+    padding: 5px 13px;
 }
 
 .btn-circle {
@@ -122,6 +122,7 @@
     flex-direction: column;
     align-items: stretch;
     border: 1.5px solid var(--iris-client-chat-background);
+    overflow: hidden;
 }
 
 .message-text {
diff --git a/src/main/webapp/app/overview/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.ts b/src/main/webapp/app/overview/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.ts
index e2fd0630a91d..8c9ba6a59b92 100644
--- a/src/main/webapp/app/overview/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.ts
+++ b/src/main/webapp/app/overview/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.ts
@@ -21,8 +21,6 @@ export class ExerciseChatWidgetComponent implements OnInit {
     componentClass = 'chat-widget';
     headerClass = 'chat-header';
     userAccepted = false;
-    perMessage =
-        "By choosing to continue, you agree that your interactions with IrisBot will be processed by Microsoft and OpenAI, with data transfer occurring outside of our university data center. If you do not agree with these terms, please select 'Decline'. To acknowledge this and begin your chat with IrisBot, press 'Accept'. ";
     public firstName: string | undefined;
     isScrolledToBottom = true;
 
@@ -37,7 +35,6 @@ export class ExerciseChatWidgetComponent implements OnInit {
     faCircleInfo = faCircleInfo;
 
     ngOnInit() {
-        //localStorage.removeItem('ge86let');
         this.route.url.subscribe((data) => {
             if (data[0].path === 'chat') {
                 this.setFullScreenClass();

From d84b1431c2d7fdeaaa230064d0d954b1fef85d7f Mon Sep 17 00:00:00 2001
From: Ece Eren <aybikeceren@gmail.com>
Date: Sat, 10 Jun 2023 14:24:34 +0200
Subject: [PATCH 011/111] Multiline new line formatting fix

---
 .../exercise-chat-widget.component.html                |  8 ++++++--
 .../exercise-chat-widget.component.scss                | 10 ++++++++++
 2 files changed, 16 insertions(+), 2 deletions(-)

diff --git a/src/main/webapp/app/overview/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.html b/src/main/webapp/app/overview/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.html
index cfa8b45517a9..ae2ee52fb077 100644
--- a/src/main/webapp/app/overview/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.html
+++ b/src/main/webapp/app/overview/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.html
@@ -38,8 +38,12 @@ <h3 class="header-start">
                     <button class="button" (click)="closeChat()">{{ 'artemisApp.exerciseChatbot.decline' | artemisTranslate }}</button>
                 </div>
             </div>
-            <div *ngFor="let message of irisMessages" class="client-chat">{{ message }}</div>
-            <div *ngFor="let message of userMessages" class="my-chat">{{ message }}</div>
+            <div *ngFor="let message of irisMessages" class="client-chat">
+                <pre>{{ message }}</pre>
+            </div>
+            <div *ngFor="let message of userMessages" class="my-chat">
+                <pre>{{ message }}</pre>
+            </div>
             <div class="scroll-to-bottom" *ngIf="!isScrolledToBottom" (click)="scrollToBottomOnClick()">
                 <fa-icon [icon]="faArrowDown"></fa-icon>
             </div>
diff --git a/src/main/webapp/app/overview/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.scss b/src/main/webapp/app/overview/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.scss
index 4e819db8a3b7..d6e1c3e2c5df 100644
--- a/src/main/webapp/app/overview/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.scss
+++ b/src/main/webapp/app/overview/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.scss
@@ -86,6 +86,16 @@
     margin-bottom: 10px;
 }
 
+pre {
+    background: transparent;
+    white-space: pre-wrap;
+    padding: 0;
+    margin: 0;
+    border: transparent;
+    font-family: inherit;
+    font-size: inherit;
+}
+
 .chat-input {
     display: flex;
     align-items: center;

From 4f49879ef32375e2b4b18eafedd2857e709cc1cc Mon Sep 17 00:00:00 2001
From: Asli Aykan <asliaykan97@gmail.com>
Date: Sun, 11 Jun 2023 01:07:24 +0200
Subject: [PATCH 012/111] refactor

---
 .../exercise-chat-widget.component.scss       |  1 +
 .../exercise-chat-widget.component.spec.ts    | 35 +++++++++++++++++--
 .../iris/exercise-chatbot.component.spec.ts   | 12 +------
 3 files changed, 35 insertions(+), 13 deletions(-)

diff --git a/src/main/webapp/app/overview/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.scss b/src/main/webapp/app/overview/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.scss
index 4e819db8a3b7..26d54ea9f41a 100644
--- a/src/main/webapp/app/overview/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.scss
+++ b/src/main/webapp/app/overview/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.scss
@@ -6,6 +6,7 @@
     text-align: start;
     padding-left: 5px;
 }
+
 .button-container {
     display: flex;
     align-items: center;
diff --git a/src/test/javascript/spec/component/iris/exercise-chat-widget.component.spec.ts b/src/test/javascript/spec/component/iris/exercise-chat-widget.component.spec.ts
index bde5a57eebf5..31771b654e4c 100644
--- a/src/test/javascript/spec/component/iris/exercise-chat-widget.component.spec.ts
+++ b/src/test/javascript/spec/component/iris/exercise-chat-widget.component.spec.ts
@@ -1,20 +1,51 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { ExerciseChatWidgetComponent } from 'app/overview/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component';
-import { ChatbotPopupComponent } from 'app/overview/exercise-chatbot/chatbot-popup/chatbot-popup.component';
 import { ArtemisTranslatePipe } from 'app/shared/pipes/artemis-translate.pipe';
 import { FormsModule } from '@angular/forms';
 import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
 import { MockPipe } from 'ng-mocks';
 import { MatDialogModule } from '@angular/material/dialog';
+import { ActivatedRoute } from '@angular/router';
+import { LocalStorageService } from 'ngx-webstorage';
+import { AccountService } from 'app/core/auth/account.service';
+import { of } from 'rxjs';
+import { User } from 'app/core/user/user.model';
+
+class MockLocalStorageService {
+    private storage: { [key: string]: string } = {};
+
+    getItem(key: string): string | null {
+        return this.storage[key] || null;
+    }
+
+    setItem(key: string, value: string): void {
+        this.storage[key] = value;
+    }
+}
+
+class MockAccountService {
+    identity(): Promise<User | null> {
+        return Promise.resolve(null);
+    }
+}
 
 describe('ExerciseChatWidgetComponent', () => {
     let component: ExerciseChatWidgetComponent;
     let fixture: ComponentFixture<ExerciseChatWidgetComponent>;
 
     beforeEach(async () => {
+        jest.spyOn(console, 'error').mockImplementation();
+
         await TestBed.configureTestingModule({
             imports: [FormsModule, FontAwesomeModule, MatDialogModule],
-            declarations: [ExerciseChatWidgetComponent, ChatbotPopupComponent, MockPipe(ArtemisTranslatePipe)],
+            declarations: [ExerciseChatWidgetComponent, MockPipe(ArtemisTranslatePipe)],
+            providers: [
+                // Provide the mock implementation of LocalStorageService
+                { provide: LocalStorageService, useClass: MockLocalStorageService },
+                // Add other dependencies required by ExerciseChatWidgetComponent
+                { provide: ActivatedRoute, useValue: { url: of([{ path: 'chat' }]) } },
+                { provide: AccountService, useClass: MockAccountService },
+            ],
         })
             .compileComponents()
             .then(() => {
diff --git a/src/test/javascript/spec/component/iris/exercise-chatbot.component.spec.ts b/src/test/javascript/spec/component/iris/exercise-chatbot.component.spec.ts
index c0798a635bb4..ef89a91e26a5 100644
--- a/src/test/javascript/spec/component/iris/exercise-chatbot.component.spec.ts
+++ b/src/test/javascript/spec/component/iris/exercise-chatbot.component.spec.ts
@@ -1,7 +1,6 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { ExerciseChatbotComponent } from 'app/overview/exercise-chatbot/exercise-chatbot.component';
 import { MatDialog } from '@angular/material/dialog';
-import { ChatbotPopupComponent } from 'app/overview/exercise-chatbot/chatbot-popup/chatbot-popup.component';
 import { ExerciseChatWidgetComponent } from 'app/overview/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component';
 import { Overlay } from '@angular/cdk/overlay';
 import { FormsModule } from '@angular/forms';
@@ -33,7 +32,7 @@ describe('ExerciseChatbotComponent', () => {
 
         await TestBed.configureTestingModule({
             imports: [FormsModule, FontAwesomeModule],
-            declarations: [ExerciseChatbotComponent, ChatbotPopupComponent, MockPipe(ArtemisTranslatePipe)],
+            declarations: [ExerciseChatbotComponent, MockPipe(ArtemisTranslatePipe)],
             providers: [
                 { provide: MatDialog, useValue: mockDialog },
                 { provide: Overlay, useValue: mockOverlay },
@@ -47,15 +46,6 @@ describe('ExerciseChatbotComponent', () => {
             });
     });
 
-    it('should open dialog when chat not accepted', () => {
-        jest.spyOn(component, 'openDialog');
-
-        component.chatAccepted = false;
-        component.handleButtonClick();
-
-        expect(component.openDialog).toHaveBeenCalled();
-    });
-
     it('should open chat when chat accepted', () => {
         jest.spyOn(component, 'openChat');
 

From 5483ec9ddb3e06c6049048af8e045650522a67b2 Mon Sep 17 00:00:00 2001
From: Ece Eren <aybikeceren@gmail.com>
Date: Sun, 11 Jun 2023 22:46:17 +0200
Subject: [PATCH 013/111] Code refactoring

---
 src/main/webapp/app/app.module.ts                              | 3 +--
 .../exercise-chatwidget/exercise-chat-widget.component.scss    | 1 +
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/main/webapp/app/app.module.ts b/src/main/webapp/app/app.module.ts
index ef01b06a4c1b..8dd7c1d79931 100644
--- a/src/main/webapp/app/app.module.ts
+++ b/src/main/webapp/app/app.module.ts
@@ -26,7 +26,7 @@ import { NotificationPopupComponent } from 'app/shared/notification/notification
 import { UserSettingsModule } from 'app/shared/user-settings/user-settings.module';
 import { ThemeModule } from 'app/core/theme/theme.module';
 import { ArtemisSharedComponentModule } from 'app/shared/components/shared-component.module';
-import { MatDialog, MatDialogModule } from '@angular/material/dialog';
+import { MatDialogModule } from '@angular/material/dialog';
 
 // NOTE: this module should only include the most important modules for normal users, all course management, admin and account functionality should be lazy loaded if possible
 @NgModule({
@@ -64,6 +64,5 @@ import { MatDialog, MatDialogModule } from '@angular/material/dialog';
         LoadingNotificationComponent,
     ],
     bootstrap: [JhiMainComponent],
-    providers: [MatDialog],
 })
 export class ArtemisAppModule {}
diff --git a/src/main/webapp/app/overview/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.scss b/src/main/webapp/app/overview/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.scss
index 0b3a6f686fc1..5aee01cea3fe 100644
--- a/src/main/webapp/app/overview/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.scss
+++ b/src/main/webapp/app/overview/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.scss
@@ -123,6 +123,7 @@ pre {
 .btn-circle:active {
     background-color: var(--iris-btn-circle-hover);
 }
+
 .p-chat {
     background-color: var(--iris-client-chat-background);
     color: var(--bs-body-color);

From dc6ff604935b085b67447c921f56bba2cff5c610 Mon Sep 17 00:00:00 2001
From: Ece Eren <aybikeceren@gmail.com>
Date: Sun, 11 Jun 2023 23:22:49 +0200
Subject: [PATCH 014/111] Remove @extend

---
 .../exercise-chat-widget.component.scss          | 16 ++++++++++------
 1 file changed, 10 insertions(+), 6 deletions(-)

diff --git a/src/main/webapp/app/overview/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.scss b/src/main/webapp/app/overview/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.scss
index 5aee01cea3fe..ec6c55d2ec0a 100644
--- a/src/main/webapp/app/overview/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.scss
+++ b/src/main/webapp/app/overview/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.scss
@@ -23,7 +23,10 @@
 }
 
 .chat-widget-fullscreen {
-    @extend .chat-widget;
+    position: fixed;
+    bottom: 90px;
+    right: 60px;
+    background-color: var(--iris-chat-widget-background);
     width: 100%;
     height: 100%;
     left: 0;
@@ -50,7 +53,12 @@
 }
 
 .chat-header-fullscreen {
-    @extend .chat-header;
+    display: flex;
+    height: 50px;
+    background-color: var(--artemis-dark);
+    color: white;
+    font-weight: bold;
+    padding: 10px;
     justify-content: center;
 }
 
@@ -144,10 +152,6 @@ pre {
     border-bottom: 1px solid var(--iris-client-chat-background);
 }
 
-.button-container {
-    display: flex;
-}
-
 .button {
     flex: 1;
     padding: 10px 0;

From 61acf1f515afd56051fc888502dd62451c801848 Mon Sep 17 00:00:00 2001
From: Ece Eren <aybikeceren@gmail.com>
Date: Mon, 12 Jun 2023 13:04:56 +0200
Subject: [PATCH 015/111] Remove new window support & unnecessary import

---
 src/main/webapp/app/app-routing.module.ts     |  6 -----
 src/main/webapp/app/app.module.ts             |  2 --
 .../exercise-chat-widget.component.html       | 15 ++++--------
 .../exercise-chat-widget.component.scss       | 22 -----------------
 .../exercise-chat-widget.component.ts         | 24 -------------------
 5 files changed, 4 insertions(+), 65 deletions(-)

diff --git a/src/main/webapp/app/app-routing.module.ts b/src/main/webapp/app/app-routing.module.ts
index 5392d68c9b11..02f2510f7892 100644
--- a/src/main/webapp/app/app-routing.module.ts
+++ b/src/main/webapp/app/app-routing.module.ts
@@ -3,7 +3,6 @@ import { RouterModule, Routes } from '@angular/router';
 import { navbarRoute } from 'app/shared/layouts/navbar/navbar.route';
 import { errorRoute } from 'app/shared/layouts/error/error.route';
 import { ArtemisNavigationUtilService } from 'app/utils/navigation.utils';
-import { ExerciseChatWidgetComponent } from 'app/overview/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component';
 
 const LAYOUT_ROUTES: Routes = [navbarRoute, ...errorRoute];
 
@@ -117,11 +116,6 @@ const LAYOUT_ROUTES: Routes = [navbarRoute, ...errorRoute];
                     path: 'lti',
                     loadChildren: () => import('./lti/lti.module').then((m) => m.ArtemisLtiModule),
                 },
-                {
-                    path: 'chat',
-                    component: ExerciseChatWidgetComponent,
-                    pathMatch: 'full',
-                },
             ],
             { enableTracing: false, onSameUrlNavigation: 'reload' },
         ),
diff --git a/src/main/webapp/app/app.module.ts b/src/main/webapp/app/app.module.ts
index 8dd7c1d79931..31bbc6783b76 100644
--- a/src/main/webapp/app/app.module.ts
+++ b/src/main/webapp/app/app.module.ts
@@ -26,7 +26,6 @@ import { NotificationPopupComponent } from 'app/shared/notification/notification
 import { UserSettingsModule } from 'app/shared/user-settings/user-settings.module';
 import { ThemeModule } from 'app/core/theme/theme.module';
 import { ArtemisSharedComponentModule } from 'app/shared/components/shared-component.module';
-import { MatDialogModule } from '@angular/material/dialog';
 
 // NOTE: this module should only include the most important modules for normal users, all course management, admin and account functionality should be lazy loaded if possible
 @NgModule({
@@ -48,7 +47,6 @@ import { MatDialogModule } from '@angular/material/dialog';
         UserSettingsModule,
         ThemeModule,
         ArtemisSharedComponentModule,
-        MatDialogModule,
     ],
     declarations: [
         JhiMainComponent,
diff --git a/src/main/webapp/app/overview/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.html b/src/main/webapp/app/overview/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.html
index ae2ee52fb077..dcd635ee1706 100644
--- a/src/main/webapp/app/overview/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.html
+++ b/src/main/webapp/app/overview/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.html
@@ -1,16 +1,9 @@
 <div class="container">
     <!-- chat box -->
-    <div
-        [class]="componentClass"
-        [ngDraggable]="componentClass !== 'chat-widget-fullscreen'"
-        [ngResizable]="componentClass !== 'chat-widget-fullscreen'"
-        [rzHandles]="componentClass !== 'chat-widget-fullscreen' ? 'all' : ''"
-        [rzMinWidth]="componentClass !== 'chat-widget-fullscreen' ? 250 : 0"
-        [rzMinHeight]="componentClass !== 'chat-widget-fullscreen' ? 200 : 0"
-    >
+    <div class="chat-widget">
         <!-- client -->
         <div class="client">
-            <div [class]="headerClass">
+            <div class="chat-header">
                 <h3 class="header-start">
                     <fa-icon size="xs" [icon]="faRobot" style="padding-right: 5px"></fa-icon>
                     Iris
@@ -19,10 +12,10 @@ <h3 class="header-start">
                     </a>
                 </h3>
                 <div class="button-container">
-                    <button *ngIf="componentClass !== 'chat-widget-fullscreen'" (click)="openComponentInNewWindow()" class="header-icon">
+                    <button class="header-icon">
                         <fa-icon style="font-size: 16px" [icon]="faExpand"></fa-icon>
                     </button>
-                    <button *ngIf="componentClass !== 'chat-widget-fullscreen'" (click)="closeChat()" class="header-icon">
+                    <button (click)="closeChat()" class="header-icon">
                         <fa-icon style="font-size: 19px" [icon]="faXmark"></fa-icon>
                     </button>
                 </div>
diff --git a/src/main/webapp/app/overview/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.scss b/src/main/webapp/app/overview/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.scss
index ec6c55d2ec0a..36056f608501 100644
--- a/src/main/webapp/app/overview/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.scss
+++ b/src/main/webapp/app/overview/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.scss
@@ -22,18 +22,6 @@
     box-shadow: 0 0 50px rgba(0, 0, 0, 0.4);
 }
 
-.chat-widget-fullscreen {
-    position: fixed;
-    bottom: 90px;
-    right: 60px;
-    background-color: var(--iris-chat-widget-background);
-    width: 100%;
-    height: 100%;
-    left: 0;
-    top: 0;
-    z-index: 10;
-}
-
 .ng-draggable {
     cursor: grab;
 }
@@ -52,16 +40,6 @@
     padding: 10px;
 }
 
-.chat-header-fullscreen {
-    display: flex;
-    height: 50px;
-    background-color: var(--artemis-dark);
-    color: white;
-    font-weight: bold;
-    padding: 10px;
-    justify-content: center;
-}
-
 .header-icon {
     border: none;
     background: transparent;
diff --git a/src/main/webapp/app/overview/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.ts b/src/main/webapp/app/overview/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.ts
index 8c9ba6a59b92..c0b2256a19ae 100644
--- a/src/main/webapp/app/overview/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.ts
+++ b/src/main/webapp/app/overview/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.ts
@@ -18,8 +18,6 @@ export class ExerciseChatWidgetComponent implements OnInit {
     irisMessages: string[] = [];
     userMessages: string[] = [];
     newMessage = '';
-    componentClass = 'chat-widget';
-    headerClass = 'chat-header';
     userAccepted = false;
     public firstName: string | undefined;
     isScrolledToBottom = true;
@@ -35,13 +33,6 @@ export class ExerciseChatWidgetComponent implements OnInit {
     faCircleInfo = faCircleInfo;
 
     ngOnInit() {
-        this.route.url.subscribe((data) => {
-            if (data[0].path === 'chat') {
-                this.setFullScreenClass();
-            } else {
-                this.setDefaultClass();
-            }
-        });
         this.accountService.identity().then((user: User) => {
             if (typeof user!.login === 'string') {
                 this.userAccepted = localStorage.getItem(user!.login) == 'true';
@@ -49,16 +40,6 @@ export class ExerciseChatWidgetComponent implements OnInit {
         });
     }
 
-    private setDefaultClass() {
-        this.componentClass = 'chat-widget ngDraggable ngResizable';
-        this.headerClass = 'chat-header';
-    }
-
-    private setFullScreenClass() {
-        this.componentClass = 'chat-widget-fullscreen';
-        this.headerClass = 'chat-header-fullscreen';
-    }
-
     onSend(): void {
         if (this.newMessage) {
             this.userMessages.push(this.newMessage);
@@ -78,11 +59,6 @@ export class ExerciseChatWidgetComponent implements OnInit {
         this.dialog.closeAll();
     }
 
-    openComponentInNewWindow() {
-        window.open('/chat', '_blank', 'width=600,height=600');
-        this.closeChat();
-    }
-
     acceptPermission() {
         this.accountService.identity().then((user: User) => {
             if (typeof user!.login === 'string') {

From eff247b3c28dd56eb3f1b341dfc4dfaaf71467fc Mon Sep 17 00:00:00 2001
From: Ece Eren <aybikeceren@gmail.com>
Date: Mon, 12 Jun 2023 19:14:58 +0200
Subject: [PATCH 016/111] Maximize & minimize screen is added

---
 .../exercise-chat-widget.component.html              | 11 +++++++----
 .../exercise-chat-widget.component.scss              | 11 +++++++++++
 .../exercise-chat-widget.component.ts                | 12 +++++++++++-
 3 files changed, 29 insertions(+), 5 deletions(-)

diff --git a/src/main/webapp/app/overview/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.html b/src/main/webapp/app/overview/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.html
index dcd635ee1706..c7df4b23d75d 100644
--- a/src/main/webapp/app/overview/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.html
+++ b/src/main/webapp/app/overview/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.html
@@ -1,6 +1,6 @@
 <div class="container">
     <!-- chat box -->
-    <div class="chat-widget">
+    <div [class]="componentClass" ngDraggable ngResizable rzHandles="all" [rzMinWidth]="250" [rzMinHeight]="200">
         <!-- client -->
         <div class="client">
             <div class="chat-header">
@@ -12,11 +12,14 @@ <h3 class="header-start">
                     </a>
                 </h3>
                 <div class="button-container">
-                    <button class="header-icon">
-                        <fa-icon style="font-size: 16px" [icon]="faExpand"></fa-icon>
+                    <button *ngIf="componentClass === 'chat-widget'" (click)="maximizeScreen()" class="header-icon">
+                        <fa-icon [icon]="faExpand"></fa-icon>
+                    </button>
+                    <button *ngIf="componentClass === 'chat-widget-fullscreen'" (click)="minimizeScreen()" class="header-icon">
+                        <fa-icon [icon]="faCompress"></fa-icon>
                     </button>
                     <button (click)="closeChat()" class="header-icon">
-                        <fa-icon style="font-size: 19px" [icon]="faXmark"></fa-icon>
+                        <fa-icon [icon]="faXmark"></fa-icon>
                     </button>
                 </div>
             </div>
diff --git a/src/main/webapp/app/overview/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.scss b/src/main/webapp/app/overview/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.scss
index 36056f608501..ffb74908506f 100644
--- a/src/main/webapp/app/overview/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.scss
+++ b/src/main/webapp/app/overview/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.scss
@@ -22,6 +22,16 @@
     box-shadow: 0 0 50px rgba(0, 0, 0, 0.4);
 }
 
+.chat-widget-fullscreen {
+    position: fixed;
+    bottom: 90px;
+    right: 60px;
+    width: 95vw;
+    height: 85vh;
+    background-color: var(--iris-chat-widget-background);
+    box-shadow: 0 0 50px rgba(0, 0, 0, 0.4);
+}
+
 .ng-draggable {
     cursor: grab;
 }
@@ -44,6 +54,7 @@
     border: none;
     background: transparent;
     color: var(--secondary);
+    font-size: 16px;
 }
 
 .chat-body {
diff --git a/src/main/webapp/app/overview/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.ts b/src/main/webapp/app/overview/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.ts
index c0b2256a19ae..38b436c01aea 100644
--- a/src/main/webapp/app/overview/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.ts
+++ b/src/main/webapp/app/overview/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.ts
@@ -1,5 +1,5 @@
 import { Component, ElementRef, OnInit, ViewChild } from '@angular/core';
-import { faArrowDown, faCircleInfo, faExpand, faPaperPlane, faRobot, faXmark } from '@fortawesome/free-solid-svg-icons';
+import { faArrowDown, faCircleInfo, faCompress, faExpand, faPaperPlane, faRobot, faXmark } from '@fortawesome/free-solid-svg-icons';
 import { MatDialog } from '@angular/material/dialog';
 import { ActivatedRoute } from '@angular/router';
 import { LocalStorageService } from 'ngx-webstorage';
@@ -21,6 +21,7 @@ export class ExerciseChatWidgetComponent implements OnInit {
     userAccepted = false;
     public firstName: string | undefined;
     isScrolledToBottom = true;
+    componentClass = 'chat-widget';
 
     constructor(private dialog: MatDialog, private route: ActivatedRoute, private localStorage: LocalStorageService, private accountService: AccountService) {}
 
@@ -31,6 +32,7 @@ export class ExerciseChatWidgetComponent implements OnInit {
     faArrowDown = faArrowDown;
     faRobot = faRobot;
     faCircleInfo = faCircleInfo;
+    faCompress = faCompress;
 
     ngOnInit() {
         this.accountService.identity().then((user: User) => {
@@ -83,4 +85,12 @@ export class ExerciseChatWidgetComponent implements OnInit {
         const clientHeight = chatBody.clientHeight;
         this.isScrolledToBottom = scrollHeight - scrollTop === clientHeight;
     }
+
+    maximizeScreen() {
+        this.componentClass = 'chat-widget-fullscreen';
+    }
+
+    minimizeScreen() {
+        this.componentClass = 'chat-widget';
+    }
 }

From 89a1cf156103484a5e93690a3ae8a4316716cdc9 Mon Sep 17 00:00:00 2001
From: Asli Aykan <asliaykan97@gmail.com>
Date: Tue, 13 Jun 2023 13:21:18 +0200
Subject: [PATCH 017/111] design updates & shift button function

---
 .../exercise-chatbot.module.ts                 |  3 ++-
 .../exercise-chat-widget.component.html        |  8 +++-----
 .../exercise-chat-widget.component.scss        |  3 +--
 .../exercise-chat-widget.component.ts          | 18 ++++++++++++++++++
 4 files changed, 24 insertions(+), 8 deletions(-)

diff --git a/src/main/webapp/app/overview/exercise-chatbot/exercise-chatbot.module.ts b/src/main/webapp/app/overview/exercise-chatbot/exercise-chatbot.module.ts
index 58d8cbb7f4b1..b8dad9af14c6 100644
--- a/src/main/webapp/app/overview/exercise-chatbot/exercise-chatbot.module.ts
+++ b/src/main/webapp/app/overview/exercise-chatbot/exercise-chatbot.module.ts
@@ -7,10 +7,11 @@ import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
 import { ArtemisSharedModule } from 'app/shared/shared.module';
 import { AngularDraggableModule } from 'angular2-draggable';
 import { RouterModule } from '@angular/router';
+import { ArtemisSharedComponentModule } from 'app/shared/components/shared-component.module';
 
 @NgModule({
     declarations: [ExerciseChatWidgetComponent],
-    imports: [MatDialogModule, FormsModule, CommonModule, FontAwesomeModule, ArtemisSharedModule, AngularDraggableModule, RouterModule],
+    imports: [MatDialogModule, FormsModule, CommonModule, FontAwesomeModule, ArtemisSharedModule, AngularDraggableModule, RouterModule, ArtemisSharedComponentModule],
     providers: [],
 })
 export class ExerciseChatbotModule {}
diff --git a/src/main/webapp/app/overview/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.html b/src/main/webapp/app/overview/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.html
index c7df4b23d75d..b4d36092ea92 100644
--- a/src/main/webapp/app/overview/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.html
+++ b/src/main/webapp/app/overview/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.html
@@ -49,15 +49,13 @@ <h3 class="header-start">
         <div class="chat-input">
             <textarea
                 [(ngModel)]="newMessage"
-                rows="1"
                 type="text"
+                rows="1"
                 class="form-control"
-                (keyup.enter)="onSend()"
+                (keydown)="handleKey($event)"
                 placeholder="{{ 'artemisApp.exerciseChatbot.inputMessage' | artemisTranslate }}"
             ></textarea>
-            <button [disabled]="!userAccepted" (click)="onSend()" class="btn btn-primary btn-md btn-circle">
-                <fa-icon [icon]="faPaperPlane"></fa-icon>
-            </button>
+            <jhi-button [disabled]="!userAccepted" [btnType]="ButtonType.SECONDARY" [icon]="faPaperPlane" (onClick)="onSend()"></jhi-button>
         </div>
     </div>
 </div>
diff --git a/src/main/webapp/app/overview/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.scss b/src/main/webapp/app/overview/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.scss
index ffb74908506f..8d351477855b 100644
--- a/src/main/webapp/app/overview/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.scss
+++ b/src/main/webapp/app/overview/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.scss
@@ -98,13 +98,12 @@ pre {
     display: flex;
     align-items: center;
     justify-content: space-between;
-    padding: 6px;
+    padding: 7px;
     background-color: var(--iris-client-chat-input);
 }
 
 .chat-input textarea {
     flex: 1;
-    margin-right: 10px;
     padding: 5px 13px;
 }
 
diff --git a/src/main/webapp/app/overview/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.ts b/src/main/webapp/app/overview/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.ts
index 38b436c01aea..9570a3e1520a 100644
--- a/src/main/webapp/app/overview/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.ts
+++ b/src/main/webapp/app/overview/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.ts
@@ -5,6 +5,7 @@ import { ActivatedRoute } from '@angular/router';
 import { LocalStorageService } from 'ngx-webstorage';
 import { AccountService } from 'app/core/auth/account.service';
 import { User } from 'app/core/user/user.model';
+import { ButtonType } from 'app/shared/components/button.component';
 
 @Component({
     selector: 'jhi-exercise-chat-widget',
@@ -93,4 +94,21 @@ export class ExerciseChatWidgetComponent implements OnInit {
     minimizeScreen() {
         this.componentClass = 'chat-widget';
     }
+
+    handleKey(event: KeyboardEvent): void {
+        if (event.key === 'Enter') {
+            if (!event.shiftKey) {
+                event.preventDefault();
+                this.onSend();
+            } else {
+                const textArea = event.target as HTMLTextAreaElement;
+                const { selectionStart, selectionEnd } = textArea;
+                const value = textArea.value;
+                textArea.value = value.slice(0, selectionStart) + value.slice(selectionEnd);
+                textArea.selectionStart = textArea.selectionEnd = selectionStart + 1;
+            }
+        }
+    }
+
+    protected readonly ButtonType = ButtonType;
 }

From a4342a2954f8b29a47b2f242c6b14d6cba954756 Mon Sep 17 00:00:00 2001
From: Asli Aykan <asliaykan97@gmail.com>
Date: Tue, 13 Jun 2023 14:16:55 +0200
Subject: [PATCH 018/111] added client tests

---
 .../exercise-chat-widget.component.spec.ts    | 31 +++++++++++++++++++
 1 file changed, 31 insertions(+)

diff --git a/src/test/javascript/spec/component/iris/exercise-chat-widget.component.spec.ts b/src/test/javascript/spec/component/iris/exercise-chat-widget.component.spec.ts
index 31771b654e4c..e7facd61eab2 100644
--- a/src/test/javascript/spec/component/iris/exercise-chat-widget.component.spec.ts
+++ b/src/test/javascript/spec/component/iris/exercise-chat-widget.component.spec.ts
@@ -70,4 +70,35 @@ describe('ExerciseChatWidgetComponent', () => {
 
         expect(component.newMessage).toBe('');
     });
+
+    it('should set isScrolledToBottom to true when scrolled to bottom', () => {
+        const component = fixture.componentInstance;
+        const chatBodyElement = {
+            scrollHeight: 200,
+            scrollTop: 150,
+            clientHeight: 50,
+        };
+
+        component.chatBody = { nativeElement: chatBodyElement };
+
+        component.onChatScroll();
+
+        expect(component.isScrolledToBottom).toBeTrue();
+    });
+
+    it('should set componentClass to chat-widget-fullscreen', () => {
+        const component = fixture.componentInstance;
+
+        component.maximizeScreen();
+
+        expect(component.componentClass).toBe('chat-widget-fullscreen');
+    });
+
+    it('should set componentClass to chat-widget', () => {
+        const component = fixture.componentInstance;
+
+        component.minimizeScreen();
+
+        expect(component.componentClass).toBe('chat-widget');
+    });
 });

From 0b1584e243c98d1e55dd786e20ebfdf2139f2266 Mon Sep 17 00:00:00 2001
From: Asli Aykan <asliaykan97@gmail.com>
Date: Tue, 13 Jun 2023 14:31:59 +0200
Subject: [PATCH 019/111] input drag bug fixed

---
 .../exercise-chatwidget/exercise-chat-widget.component.html     | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/main/webapp/app/overview/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.html b/src/main/webapp/app/overview/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.html
index b4d36092ea92..10ce6d8bec29 100644
--- a/src/main/webapp/app/overview/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.html
+++ b/src/main/webapp/app/overview/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.html
@@ -1,6 +1,6 @@
 <div class="container">
     <!-- chat box -->
-    <div [class]="componentClass" ngDraggable ngResizable rzHandles="all" [rzMinWidth]="250" [rzMinHeight]="200">
+    <div [class]="componentClass" ngDraggable [handle]="chatBody" ngResizable rzHandles="all" [rzMinWidth]="250" [rzMinHeight]="200">
         <!-- client -->
         <div class="client">
             <div class="chat-header">

From 510b109d1d01eb74de14d8f258c179834cba42a2 Mon Sep 17 00:00:00 2001
From: Ece Eren <aybikeceren@gmail.com>
Date: Thu, 15 Jun 2023 19:59:40 +0200
Subject: [PATCH 020/111] Chatbot textarea expansion fix

---
 .../exercise-chat-widget.component.html       |  5 +++-
 .../exercise-chat-widget.component.scss       |  1 +
 .../exercise-chat-widget.component.ts         | 30 +++++++++++++++++++
 3 files changed, 35 insertions(+), 1 deletion(-)

diff --git a/src/main/webapp/app/overview/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.html b/src/main/webapp/app/overview/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.html
index 10ce6d8bec29..a2ce2a2123cf 100644
--- a/src/main/webapp/app/overview/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.html
+++ b/src/main/webapp/app/overview/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.html
@@ -49,13 +49,16 @@ <h3 class="header-start">
         <div class="chat-input">
             <textarea
                 [(ngModel)]="newMessage"
+                (ngModelChange)="onRowChange()"
                 type="text"
                 rows="1"
+                maxRows="3"
                 class="form-control"
                 (keydown)="handleKey($event)"
                 placeholder="{{ 'artemisApp.exerciseChatbot.inputMessage' | artemisTranslate }}"
+                #messageTextarea
             ></textarea>
-            <jhi-button [disabled]="!userAccepted" [btnType]="ButtonType.SECONDARY" [icon]="faPaperPlane" (onClick)="onSend()"></jhi-button>
+            <jhi-button [disabled]="!userAccepted" [btnType]="ButtonType.SECONDARY" [icon]="faPaperPlane" (onClick)="onSend()" style="margin-bottom: auto"></jhi-button>
         </div>
     </div>
 </div>
diff --git a/src/main/webapp/app/overview/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.scss b/src/main/webapp/app/overview/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.scss
index 8d351477855b..59f38aa9725a 100644
--- a/src/main/webapp/app/overview/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.scss
+++ b/src/main/webapp/app/overview/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.scss
@@ -105,6 +105,7 @@ pre {
 .chat-input textarea {
     flex: 1;
     padding: 5px 13px;
+    margin-right: 5px;
 }
 
 .btn-circle {
diff --git a/src/main/webapp/app/overview/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.ts b/src/main/webapp/app/overview/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.ts
index 9570a3e1520a..1b601bebc24a 100644
--- a/src/main/webapp/app/overview/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.ts
+++ b/src/main/webapp/app/overview/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.ts
@@ -15,6 +15,7 @@ import { ButtonType } from 'app/shared/components/button.component';
 export class ExerciseChatWidgetComponent implements OnInit {
     @ViewChild('chatWidget') chatWidget!: ElementRef;
     @ViewChild('chatBody') chatBody!: ElementRef;
+    @ViewChild('messageTextarea', { static: false }) messageTextarea: ElementRef;
     messages: string[] = [];
     irisMessages: string[] = [];
     userMessages: string[] = [];
@@ -23,6 +24,7 @@ export class ExerciseChatWidgetComponent implements OnInit {
     public firstName: string | undefined;
     isScrolledToBottom = true;
     componentClass = 'chat-widget';
+    rows = 1;
 
     constructor(private dialog: MatDialog, private route: ActivatedRoute, private localStorage: LocalStorageService, private accountService: AccountService) {}
 
@@ -49,6 +51,7 @@ export class ExerciseChatWidgetComponent implements OnInit {
             this.newMessage = '';
         }
         this.scrollToBottom();
+        this.resetChatBodyHeight();
     }
 
     scrollToBottom() {
@@ -111,4 +114,31 @@ export class ExerciseChatWidgetComponent implements OnInit {
     }
 
     protected readonly ButtonType = ButtonType;
+
+    onRowChange() {
+        const textarea: HTMLTextAreaElement = this.messageTextarea.nativeElement;
+        const newRows = textarea.value.split('\n').length;
+        if (newRows != this.rows) {
+            if (newRows <= 3) {
+                textarea.rows = newRows;
+                this.adjustChatBodyHeight(newRows);
+                this.rows = newRows;
+            }
+        }
+    }
+
+    adjustChatBodyHeight(newRows: number) {
+        const textarea: HTMLTextAreaElement = this.messageTextarea.nativeElement;
+        const chatBody: HTMLElement = this.chatBody.nativeElement;
+        const lineHeight = parseInt(window.getComputedStyle(textarea).lineHeight);
+        const rowHeight = lineHeight * newRows;
+        chatBody.style.height = `calc(100% - ${rowHeight}px - 78px)`;
+    }
+
+    resetChatBodyHeight() {
+        const chatBody: HTMLElement = this.chatBody.nativeElement;
+        const textarea: HTMLTextAreaElement = this.messageTextarea.nativeElement;
+        textarea.rows = 1;
+        chatBody.style.height = `calc(100% - 100px)`;
+    }
 }

From 1d764556c4620a4f899cea197e7656f7b707a50b Mon Sep 17 00:00:00 2001
From: Asli Aykan <asliaykan97@gmail.com>
Date: Thu, 15 Jun 2023 20:21:28 +0200
Subject: [PATCH 021/111] new style for message boxes added

---
 .../exercise-chat-widget.component.html       |  4 +--
 .../exercise-chat-widget.component.scss       | 32 ++++++++++++-------
 2 files changed, 22 insertions(+), 14 deletions(-)

diff --git a/src/main/webapp/app/overview/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.html b/src/main/webapp/app/overview/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.html
index a2ce2a2123cf..d8ce0a42d5d6 100644
--- a/src/main/webapp/app/overview/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.html
+++ b/src/main/webapp/app/overview/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.html
@@ -34,10 +34,10 @@ <h3 class="header-start">
                     <button class="button" (click)="closeChat()">{{ 'artemisApp.exerciseChatbot.decline' | artemisTranslate }}</button>
                 </div>
             </div>
-            <div *ngFor="let message of irisMessages" class="client-chat">
+            <div *ngFor="let message of irisMessages" class="bubble left">
                 <pre>{{ message }}</pre>
             </div>
-            <div *ngFor="let message of userMessages" class="my-chat">
+            <div *ngFor="let message of userMessages" class="bubble right">
                 <pre>{{ message }}</pre>
             </div>
             <div class="scroll-to-bottom" *ngIf="!isScrolledToBottom" (click)="scrollToBottomOnClick()">
diff --git a/src/main/webapp/app/overview/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.scss b/src/main/webapp/app/overview/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.scss
index 59f38aa9725a..d43b45d56c4f 100644
--- a/src/main/webapp/app/overview/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.scss
+++ b/src/main/webapp/app/overview/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.scss
@@ -65,23 +65,31 @@
     flex-direction: column;
 }
 
-.client-chat {
+.bubble {
+    --r: 13px; /* the radius */
+    --t: 10px; /* the size of the tail */
+
     width: fit-content;
-    background-color: var(--iris-client-chat-background);
+    margin-bottom: 5px;
     color: var(--bs-body-color);
     padding: 10px;
-    border-radius: 10px;
-    margin-bottom: 10px;
+    -webkit-mask: radial-gradient(var(--t) at var(--_d) 0, #0000 98%, #000 102%) var(--_d) 100% / calc(100% - var(--r)) var(--t) no-repeat,
+        conic-gradient(at var(--r) var(--r), #000 75%, #0000 0) calc(var(--r) / -2) calc(var(--r) / -2) padding-box,
+        radial-gradient(50% 50%, #000 98%, #0000 101%) 0 0 / var(--r) var(--r) space padding-box;
 }
-
-.my-chat {
-    width: fit-content;
-    margin-left: auto;
+.left {
+    --_d: 0%;
+    border-left: var(--t) solid #0000;
+    background-color: var(--iris-client-chat-background);
+    margin-right: var(--t);
+    place-self: start;
+}
+.right {
+    --_d: 100%;
+    border-right: var(--t) solid #0000;
+    margin-left: var(--t);
+    place-self: end;
     background-color: var(--iris-my-chat-background);
-    color: var(--bs-body-color);
-    padding: 10px;
-    border-radius: 10px;
-    margin-bottom: 10px;
 }
 
 pre {

From 922cd01d3033062aa86c33d2f49ca57dcf99bfa3 Mon Sep 17 00:00:00 2001
From: Asli Aykan <asliaykan97@gmail.com>
Date: Thu, 15 Jun 2023 22:49:59 +0200
Subject: [PATCH 022/111] resize/fullscreen bug fixed

---
 .../exercise-chat-widget.component.html           | 15 ++++++++-------
 .../exercise-chat-widget.component.ts             |  9 +++++++--
 2 files changed, 15 insertions(+), 9 deletions(-)

diff --git a/src/main/webapp/app/overview/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.html b/src/main/webapp/app/overview/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.html
index d8ce0a42d5d6..5cd95eafb4fb 100644
--- a/src/main/webapp/app/overview/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.html
+++ b/src/main/webapp/app/overview/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.html
@@ -1,6 +1,6 @@
 <div class="container">
     <!-- chat box -->
-    <div [class]="componentClass" ngDraggable [handle]="chatBody" ngResizable rzHandles="all" [rzMinWidth]="250" [rzMinHeight]="200">
+    <div class="chat-widget" #chatWidget ngDraggable [handle]="chatBody" ngResizable rzHandles="all" [rzMinWidth]="250" [rzMinHeight]="200" [rzMaxWidth]="950" [rzMaxHeight]="700">
         <!-- client -->
         <div class="client">
             <div class="chat-header">
@@ -12,12 +12,13 @@ <h3 class="header-start">
                     </a>
                 </h3>
                 <div class="button-container">
-                    <button *ngIf="componentClass === 'chat-widget'" (click)="maximizeScreen()" class="header-icon">
-                        <fa-icon [icon]="faExpand"></fa-icon>
-                    </button>
-                    <button *ngIf="componentClass === 'chat-widget-fullscreen'" (click)="minimizeScreen()" class="header-icon">
-                        <fa-icon [icon]="faCompress"></fa-icon>
-                    </button>
+                    <button *ngIf="!fullSize; else compressButton" (click)="maximizeScreen()" class="header-icon">
+                        <fa-icon [icon]="faExpand"></fa-icon></button
+                    ><ng-template #compressButton>
+                        <button (click)="minimizeScreen()" class="header-icon">
+                            <fa-icon [icon]="faCompress"></fa-icon>
+                        </button>
+                    </ng-template>
                     <button (click)="closeChat()" class="header-icon">
                         <fa-icon [icon]="faXmark"></fa-icon>
                     </button>
diff --git a/src/main/webapp/app/overview/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.ts b/src/main/webapp/app/overview/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.ts
index 1b601bebc24a..7715427d72d5 100644
--- a/src/main/webapp/app/overview/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.ts
+++ b/src/main/webapp/app/overview/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.ts
@@ -25,6 +25,7 @@ export class ExerciseChatWidgetComponent implements OnInit {
     isScrolledToBottom = true;
     componentClass = 'chat-widget';
     rows = 1;
+    fullSize = false;
 
     constructor(private dialog: MatDialog, private route: ActivatedRoute, private localStorage: LocalStorageService, private accountService: AccountService) {}
 
@@ -91,11 +92,15 @@ export class ExerciseChatWidgetComponent implements OnInit {
     }
 
     maximizeScreen() {
-        this.componentClass = 'chat-widget-fullscreen';
+        this.chatWidget.nativeElement.style.width = '95vw';
+        this.chatWidget.nativeElement.style.height = '85vh';
+        this.fullSize = true;
     }
 
     minimizeScreen() {
-        this.componentClass = 'chat-widget';
+        this.chatWidget.nativeElement.style.width = '330px';
+        this.chatWidget.nativeElement.style.height = '430px';
+        this.fullSize = false;
     }
 
     handleKey(event: KeyboardEvent): void {

From 757f0d2e7cdafe5e9c892ce325e5c0e5d6404707 Mon Sep 17 00:00:00 2001
From: Asli Aykan <asliaykan97@gmail.com>
Date: Fri, 16 Jun 2023 13:43:10 +0200
Subject: [PATCH 023/111] animation added

---
 package-lock.json                                  | 14 +++++++++++++-
 package.json                                       |  1 +
 .../exercise-chatbot.component.html                |  7 ++++++-
 .../exercise-chatbot/exercise-chatbot.component.ts |  6 ++++++
 4 files changed, 26 insertions(+), 2 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 987dd2c25055..1532ad6b031a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -40,7 +40,8 @@
                 "@swimlane/ngx-charts": "20.3.1",
                 "@swimlane/ngx-graph": "8.0.3",
                 "ace-builds": "1.22.0",
-                "angular2-draggable": "16.0.0",
+                "angular-animations": "^0.11.0",
+                "angular2-draggable": "^16.0.0",
                 "bootstrap": "5.2.3",
                 "brace": "0.11.1",
                 "compare-versions": "5.0.3",
@@ -7446,6 +7447,17 @@
                 "ajv": "^8.8.2"
             }
         },
+        "node_modules/angular-animations": {
+            "version": "0.11.0",
+            "resolved": "https://registry.npmjs.org/angular-animations/-/angular-animations-0.11.0.tgz",
+            "integrity": "sha512-P2RuOe+T97bhgGDLtOYK9V45QA5y+kFUxoJfRAua8Ymo0bI5lWyw8oiVmBoEIZUU+nooYoJvQXgVKuZJA7/z3g==",
+            "dependencies": {
+                "tslib": "^2.0.0"
+            },
+            "peerDependencies": {
+                "@angular/animations": ">=6.0.0"
+            }
+        },
         "node_modules/angular2-draggable": {
             "version": "16.0.0",
             "resolved": "https://registry.npmjs.org/angular2-draggable/-/angular2-draggable-16.0.0.tgz",
diff --git a/package.json b/package.json
index c65e961d0a2f..6f3ca8770b77 100644
--- a/package.json
+++ b/package.json
@@ -43,6 +43,7 @@
         "@swimlane/ngx-charts": "20.3.1",
         "@swimlane/ngx-graph": "8.0.3",
         "ace-builds": "1.22.0",
+        "angular-animations": "^0.11.0",
         "angular2-draggable": "^16.0.0",
         "bootstrap": "5.2.3",
         "brace": "0.11.1",
diff --git a/src/main/webapp/app/overview/exercise-chatbot/exercise-chatbot.component.html b/src/main/webapp/app/overview/exercise-chatbot/exercise-chatbot.component.html
index b79549f926e3..67083dcfc274 100644
--- a/src/main/webapp/app/overview/exercise-chatbot/exercise-chatbot.component.html
+++ b/src/main/webapp/app/overview/exercise-chatbot/exercise-chatbot.component.html
@@ -1,5 +1,10 @@
 <div class="chatbot-button">
-    <button class="btn btn-primary btn-md btn-circle" title="{{ 'artemisApp.exerciseChatbot.buttonTooltip' | artemisTranslate }}" (click)="handleButtonClick()">
+    <button
+        class="btn btn-primary btn-md btn-circle"
+        [@shake]="runAnimation"
+        title="{{ 'artemisApp.exerciseChatbot.buttonTooltip' | artemisTranslate }}"
+        (click)="handleButtonClick()"
+    >
         <fa-icon size="lg" [icon]="chatOpen ? faChevronDown : faCommentDots"></fa-icon>
     </button>
 </div>
diff --git a/src/main/webapp/app/overview/exercise-chatbot/exercise-chatbot.component.ts b/src/main/webapp/app/overview/exercise-chatbot/exercise-chatbot.component.ts
index aa8cbfa008c1..3fe42e8b3e11 100644
--- a/src/main/webapp/app/overview/exercise-chatbot/exercise-chatbot.component.ts
+++ b/src/main/webapp/app/overview/exercise-chatbot/exercise-chatbot.component.ts
@@ -3,17 +3,21 @@ import { faChevronDown, faCommentDots } from '@fortawesome/free-solid-svg-icons'
 import { MatDialog, MatDialogRef } from '@angular/material/dialog';
 import { ExerciseChatWidgetComponent } from 'app/overview/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component';
 import { Overlay } from '@angular/cdk/overlay';
+import { shakeAnimation } from 'angular-animations';
 
 @Component({
     selector: 'jhi-exercise-chatbot',
     templateUrl: './exercise-chatbot.component.html',
     styleUrls: ['./exercise-chatbot.component.scss'],
+    animations: [shakeAnimation({ anchor: 'shake', direction: '=>', duration: 700 })],
 })
 export class ExerciseChatbotComponent implements OnDestroy {
     public chatAccepted = false;
     public buttonDisabled = false;
     dialogRef: MatDialogRef<ExerciseChatWidgetComponent> | null = null;
     chatOpen = false;
+    runAnimation = false;
+
     // Icons
     faCommentDots = faCommentDots;
     faChevronDown = faChevronDown;
@@ -29,9 +33,11 @@ export class ExerciseChatbotComponent implements OnDestroy {
     handleButtonClick() {
         if (this.chatOpen && this.dialogRef) {
             this.dialogRef!.close();
+            //this.runAnimation = false;
             this.chatOpen = false;
         } else {
             this.openChat();
+            //this.runAnimation = true;
         }
     }
 

From 92f3d45513ae45bacae237d7feeebdab88abe357 Mon Sep 17 00:00:00 2001
From: Asli Aykan <asliaykan97@gmail.com>
Date: Fri, 16 Jun 2023 16:30:23 +0200
Subject: [PATCH 024/111] information page added

---
 src/main/webapp/app/app-routing.module.ts     |  6 +++
 .../about-iris/about-iris.component.html      | 46 +++++++++++++++++++
 .../about-iris/about-iris.component.ts        | 11 +++++
 .../exercise-chatbot.module.ts                |  3 +-
 .../exercise-chat-widget.component.html       |  2 +-
 src/main/webapp/i18n/de/exerciseChatbot.json  | 16 +++++--
 src/main/webapp/i18n/en/exerciseChatbot.json  | 16 +++++--
 7 files changed, 92 insertions(+), 8 deletions(-)
 create mode 100644 src/main/webapp/app/overview/exercise-chatbot/about-iris/about-iris.component.html
 create mode 100644 src/main/webapp/app/overview/exercise-chatbot/about-iris/about-iris.component.ts

diff --git a/src/main/webapp/app/app-routing.module.ts b/src/main/webapp/app/app-routing.module.ts
index 02f2510f7892..3fd76b0c18a3 100644
--- a/src/main/webapp/app/app-routing.module.ts
+++ b/src/main/webapp/app/app-routing.module.ts
@@ -3,6 +3,7 @@ import { RouterModule, Routes } from '@angular/router';
 import { navbarRoute } from 'app/shared/layouts/navbar/navbar.route';
 import { errorRoute } from 'app/shared/layouts/error/error.route';
 import { ArtemisNavigationUtilService } from 'app/utils/navigation.utils';
+import { AboutIrisComponent } from 'app/overview/exercise-chatbot/about-iris/about-iris.component';
 
 const LAYOUT_ROUTES: Routes = [navbarRoute, ...errorRoute];
 
@@ -116,6 +117,11 @@ const LAYOUT_ROUTES: Routes = [navbarRoute, ...errorRoute];
                     path: 'lti',
                     loadChildren: () => import('./lti/lti.module').then((m) => m.ArtemisLtiModule),
                 },
+                {
+                    path: 'aboutIris',
+                    component: AboutIrisComponent,
+                    pathMatch: 'full',
+                },
             ],
             { enableTracing: false, onSameUrlNavigation: 'reload' },
         ),
diff --git a/src/main/webapp/app/overview/exercise-chatbot/about-iris/about-iris.component.html b/src/main/webapp/app/overview/exercise-chatbot/about-iris/about-iris.component.html
new file mode 100644
index 000000000000..aabcf87c82b9
--- /dev/null
+++ b/src/main/webapp/app/overview/exercise-chatbot/about-iris/about-iris.component.html
@@ -0,0 +1,46 @@
+<div>
+    <div>
+        <div class="card-title ms-2" style="display: flex; align-items: center">
+            <fa-icon size="lg" [icon]="faRobot" style="padding-right: 7px"></fa-icon>
+            <h2 class="mb-3 mt-3 font-weight-bold">
+                {{ 'artemisApp.exerciseChatbot.title' | artemisTranslate }}
+            </h2>
+        </div>
+        <div class="card-title ms-2">
+            <p class="mb-3 mt-3 font-weight-normal">{{ 'artemisApp.exerciseChatbot.subtext' | artemisTranslate }}</p>
+        </div>
+    </div>
+
+    <div class="mb-5 ms-2" style="margin-right: 70px">
+        <h3 class="mb-3 font-weight-bold">{{ 'artemisApp.aboutUsOverview.feature' | artemisTranslate }}</h3>
+        <ul>
+            <li>
+                <span>{{ 'artemisApp.exerciseChatbot.f1' | artemisTranslate }}</span>
+            </li>
+            <li>
+                <span>{{ 'artemisApp.exerciseChatbot.f2' | artemisTranslate }}</span>
+            </li>
+            <li>
+                <span>{{ 'artemisApp.exerciseChatbot.f3' | artemisTranslate }}</span>
+            </li>
+            <li>
+                <span>{{ 'artemisApp.exerciseChatbot.f4' | artemisTranslate }}</span>
+            </li>
+            <li>
+                <span>{{ 'artemisApp.exerciseChatbot.f5' | artemisTranslate }}</span>
+            </li>
+            <li>
+                <span>{{ 'artemisApp.exerciseChatbot.f6' | artemisTranslate }}</span>
+            </li>
+            <li>
+                <span>{{ 'artemisApp.exerciseChatbot.f7' | artemisTranslate }}</span>
+            </li>
+            <li>
+                <span>{{ 'artemisApp.exerciseChatbot.f8' | artemisTranslate }}</span>
+            </li>
+            <li>
+                <span>{{ 'artemisApp.exerciseChatbot.f9' | artemisTranslate }}</span>
+            </li>
+        </ul>
+    </div>
+</div>
diff --git a/src/main/webapp/app/overview/exercise-chatbot/about-iris/about-iris.component.ts b/src/main/webapp/app/overview/exercise-chatbot/about-iris/about-iris.component.ts
new file mode 100644
index 000000000000..32d5818743ff
--- /dev/null
+++ b/src/main/webapp/app/overview/exercise-chatbot/about-iris/about-iris.component.ts
@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+import { faRobot } from '@fortawesome/free-solid-svg-icons';
+
+@Component({
+    selector: 'jhi-about-iris',
+    templateUrl: './about-iris.component.html',
+    styleUrls: [],
+})
+export class AboutIrisComponent {
+    faRobot = faRobot;
+}
diff --git a/src/main/webapp/app/overview/exercise-chatbot/exercise-chatbot.module.ts b/src/main/webapp/app/overview/exercise-chatbot/exercise-chatbot.module.ts
index b8dad9af14c6..fcc2b347d731 100644
--- a/src/main/webapp/app/overview/exercise-chatbot/exercise-chatbot.module.ts
+++ b/src/main/webapp/app/overview/exercise-chatbot/exercise-chatbot.module.ts
@@ -8,9 +8,10 @@ import { ArtemisSharedModule } from 'app/shared/shared.module';
 import { AngularDraggableModule } from 'angular2-draggable';
 import { RouterModule } from '@angular/router';
 import { ArtemisSharedComponentModule } from 'app/shared/components/shared-component.module';
+import { AboutIrisComponent } from 'app/overview/exercise-chatbot/about-iris/about-iris.component';
 
 @NgModule({
-    declarations: [ExerciseChatWidgetComponent],
+    declarations: [ExerciseChatWidgetComponent, AboutIrisComponent],
     imports: [MatDialogModule, FormsModule, CommonModule, FontAwesomeModule, ArtemisSharedModule, AngularDraggableModule, RouterModule, ArtemisSharedComponentModule],
     providers: [],
 })
diff --git a/src/main/webapp/app/overview/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.html b/src/main/webapp/app/overview/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.html
index 5cd95eafb4fb..2b987328abf5 100644
--- a/src/main/webapp/app/overview/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.html
+++ b/src/main/webapp/app/overview/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.html
@@ -7,7 +7,7 @@
                 <h3 class="header-start">
                     <fa-icon size="xs" [icon]="faRobot" style="padding-right: 5px"></fa-icon>
                     Iris
-                    <a [routerLink]="'/about'" target="_blank">
+                    <a [routerLink]="'/aboutIris'" target="_blank">
                         <fa-icon style="vertical-align: middle; padding-left: 3px; font-size: 13px" [icon]="faCircleInfo" class="header-icon"></fa-icon>
                     </a>
                 </h3>
diff --git a/src/main/webapp/i18n/de/exerciseChatbot.json b/src/main/webapp/i18n/de/exerciseChatbot.json
index e126b0dc9c59..7cc3f22b443e 100644
--- a/src/main/webapp/i18n/de/exerciseChatbot.json
+++ b/src/main/webapp/i18n/de/exerciseChatbot.json
@@ -1,12 +1,22 @@
 {
     "artemisApp": {
         "exerciseChatbot": {
-            "welcome": "Willkommen",
-            "popUpMessage": "Indem du fortfährst, erklärst du dich damit einverstanden, dass deine Interaktionen mit IrisBot von Microsoft und OpenAI verarbeitet werden, wobei die Datenübertragung außerhalb unseres Universitätsrechenzentrums erfolgt. Wenn du mit diesen Bedingungen nicht einverstanden bist, wähle bitte 'Ablehnen'. Um dies zu bestätigen und deinen Chat mit IrisBot zu beginnen, klick auf 'Akzeptieren'.",
+            "popUpMessage": "Indem du fortfährst, erklärst du dich damit einverstanden, dass deine Interaktionen mit Iris von Microsoft und OpenAI verarbeitet werden, wobei die Datenübertragung außerhalb unseres Universitätsrechenzentrums erfolgt. Wenn du mit diesen Bedingungen nicht einverstanden bist, wähle bitte 'Ablehnen'. Um dies zu bestätigen und deinen Chat mit IrisBot zu beginnen, klick auf 'Akzeptieren'.",
             "inputMessage": "Schreib eine Nachricht...",
             "accept": "Akzeptieren",
             "decline": "Ablehnen",
-            "buttonTooltip": "Beginne mit Iris zu chatten!"
+            "buttonTooltip": "Beginne mit Iris zu chatten!",
+            "title": "Iris: Der Chatbot, der von einem großen Sprachmodell für Artemis unterstützt wird",
+            "subtext": "Iris ist speziell darauf ausgelegt, umfassende Unterstützung für Ihre Programmieraufgaben zu bieten. Es nutzt seine fortschrittlichen Sprachverständnisfähigkeiten, um Ihre Anfragen zu bearbeiten und Sie während Ihres Lernprozesses zu unterstützen.",
+            "f1": "Die Interaktionen mit Iris unterliegen der Verarbeitung durch Microsoft und OpenAI, was den Transfer von Daten über die Grenzen unseres Universitätsrechenzentrums hinaus bedeutet.",
+            "f2": "Um Iris nutzen zu können, ist es erforderlich, der Genehmigungsnachricht, die während der erstmaligen Verwendung angezeigt wird, zuzustimmen. Durch die Zustimmung erkennen und akzeptieren Sie, dass Ihre Interaktionen mit Iris von den oben genannten Organisationen verarbeitet werden.",
+            "f3": "Iris hilft dabei, Aufgabendefinitionen zu verstehen, Codefehler zu beheben und einfache Fragen zur verwendeten Programmiersprache zu beantworten. Sie liefert jedoch keine direkten Lösungen für die zu lösenden Aufgaben.",
+            "f4": "Iris speichert Ihren Chat-Verlauf für jede Programmieraufgabe, an der Sie teilgenommen haben. Dadurch können Sie Ihre Unterhaltung fortsetzen, indem Sie die Chat-Schnittstelle erneut öffnen. Diese Funktion ermöglicht es Ihnen, auf frühere Diskussionen bequem zurückzugreifen und Ihre Interaktion mit Iris nahtlos fortzusetzen.",
+            "f5": "Sie werden ermutigt, Feedback zu geben, das in zwei Arten eingeteilt werden kann. Die erste Art ist eine nachrichtenbasierte Rückmeldung, bei der Sie die Möglichkeit haben, Ihre Präferenz für jede Nachricht durch die Auswahl von \"Gefällt mir\", oder \"Gefällt mir nicht\", auszudrücken. Die zweite Art ist eine auf die Konversation bezogene Rückmeldung, die am Ende einer Unterhaltung abgegeben werden kann. Für die konversationsbasierte Rückmeldung stehen Ihnen die Optionen \"Gefällt mi\", \"Gefällt mir nicht\", oder \"Unsicher\", zur Verfügung. Ihr Feedback ist wertvoll, um die Effektivität des Chatbots zu verbessern und Ihre Bedürfnisse zu erfüllen.",
+            "f6": "Das Chat-Widget kann durch Klicken auf die Schaltfläche 'X' in der oberen rechten Ecke oder durch Verwendung der Chatbot-Schaltfläche unterhalb des Widgets geschlossen werden.",
+            "f7": "Das Widget ist mit einer Funktion zum Verschieben ausgestattet, die es den Benutzern ermöglicht, es frei an verschiedene Positionen auf der Seite zu bewegen.",
+            "f8": "Das Widget unterstützt die Größenanpassung, sodass die Benutzer seine Abmessungen durch das Vergrößern oder Verkleinern der Ränder anpassen können.",
+            "f9": "Das Widget bietet eine Vollbildfunktion, die durch Klicken auf die Schaltfläche neben der 'X'-Schaltfläche aktiviert wird. Dadurch wird das Widget auf die gesamte Seite erweitert und ähnelt einer Vollbildanzeige. Um zur vorherigen Größe zurückzukehren, können Sie die Schaltfläche erneut klicken"
         }
     }
 }
diff --git a/src/main/webapp/i18n/en/exerciseChatbot.json b/src/main/webapp/i18n/en/exerciseChatbot.json
index 1cf6a097a134..75b3b516bdaf 100644
--- a/src/main/webapp/i18n/en/exerciseChatbot.json
+++ b/src/main/webapp/i18n/en/exerciseChatbot.json
@@ -1,12 +1,22 @@
 {
     "artemisApp": {
         "exerciseChatbot": {
-            "welcome": "Welcome",
-            "popUpMessage": "By choosing to continue, you agree that your interactions with IrisBot will be processed by Microsoft and OpenAI, with data transfer occurring outside of our university data center. If you do not agree with these terms, please select 'Decline'. To acknowledge this and begin your chat with IrisBot, press 'Accept'.",
+            "popUpMessage": "By choosing to continue, you agree that your interactions with Iris will be processed by Microsoft and OpenAI, with data transfer occurring outside of our university data center. If you do not agree with these terms, please select 'Decline'. To acknowledge this and begin your chat with IrisBot, press 'Accept'.",
             "inputMessage": "Write a message...",
             "accept": "Accept",
             "decline": "Decline",
-            "buttonTooltip": "Start chatting with Iris!"
+            "buttonTooltip": "Start chatting with Iris!",
+            "title": "Iris: The Chatbot Powered by a Large Language Model for Artemis",
+            "subtext": "Iris is specifically designed to offer comprehensive support for your programming exercises. It leverages its advanced language understanding capabilities to address your inquiries and provide guidance throughout your learning process.",
+            "f1": "The interactions conducted with Iris will be subject to processing by Microsoft and OpenAI, entailing the transfer of data beyond the confines of our university's data center.",
+            "f2": "In order to utilize Iris, it is necessary to provide consent by accepting the permission message that appears during initial usage. By doing so, you acknowledge and agree that your interactions with Iris will be subject to processing by organizations that are mentioned above.",
+            "f3": "Iris assists in comprehending exercise definitions, debugging code, and providing answers to basic inquiries regarding the programming language being utilized. However, it does not provide direct solutions to the exercises that need to be solved.",
+            "f4": "Iris retains your chat history for each programming exercise in which you have engaged, allowing you to resume your conversation by reopening the chat interface. This feature ensures that you can conveniently refer back to previous discussions and seamlessly continue your interaction with Iris.",
+            "f5": "You are encouraged to provide feedback, which can be categorized into two types. The first type is message-wise feedback, where you have the option to express their preference by choosing either \"like\" or \"dislike\" for each message. The second type is conversation-based feedback, which can be submitted at the conclusion of a conversation. For conversation-based feedback, you are proposed with the options of \"like,\" \"dislike,\" or \"not sure.\" Your feedback is valuable in helping us improve the chatbot's effectiveness and meet your needs.",
+            "f6": "The chat widget can be closed by clicking on the 'X' button located in the top right corner or by utilizing the chatbot button positioned below the widget.",
+            "f7": "The widget is designed with draggable functionality, allowing users to move it freely to different positions on the page.",
+            "f8": "The widget supports resizing, enabling users to adjust its dimensions by expanding or shrinking its borders.",
+            "f9": "The widget offers a full-screen feature, accessible by clicking on the button adjacent to the 'X' button. This expands the widget to occupy the entire page, resembling a full-page display. To revert back to its previous size, you can click the button again, returning the widget to its original dimensions."
         }
     }
 }

From f2a694032440ede267fb6c4561be3085472124bf Mon Sep 17 00:00:00 2001
From: Asli Aykan <asliaykan97@gmail.com>
Date: Sat, 17 Jun 2023 10:47:41 +0200
Subject: [PATCH 025/111] moved files for merging

---
 src/main/webapp/app/app-routing.module.ts                     | 2 +-
 .../about-iris/about-iris.component.html                      | 0
 .../about-iris/about-iris.component.ts                        | 0
 .../exercise-chatbot/exercise-chatbot.component.html          | 0
 .../exercise-chatbot/exercise-chatbot.component.scss          | 0
 .../exercise-chatbot/exercise-chatbot.component.ts            | 2 +-
 .../exercise-chatbot/exercise-chatbot.module.ts               | 4 ++--
 .../exercise-chatwidget/exercise-chat-widget.component.html   | 0
 .../exercise-chatwidget/exercise-chat-widget.component.scss   | 0
 .../exercise-chatwidget/exercise-chat-widget.component.ts     | 0
 .../exercise-details/course-exercise-details.module.ts        | 4 ++--
 .../component/iris/exercise-chat-widget.component.spec.ts     | 2 +-
 .../spec/component/iris/exercise-chatbot.component.spec.ts    | 4 ++--
 13 files changed, 9 insertions(+), 9 deletions(-)
 rename src/main/webapp/app/{overview/exercise-chatbot => iris}/about-iris/about-iris.component.html (100%)
 rename src/main/webapp/app/{overview/exercise-chatbot => iris}/about-iris/about-iris.component.ts (100%)
 rename src/main/webapp/app/{overview => iris}/exercise-chatbot/exercise-chatbot.component.html (100%)
 rename src/main/webapp/app/{overview => iris}/exercise-chatbot/exercise-chatbot.component.scss (100%)
 rename src/main/webapp/app/{overview => iris}/exercise-chatbot/exercise-chatbot.component.ts (93%)
 rename src/main/webapp/app/{overview => iris}/exercise-chatbot/exercise-chatbot.module.ts (78%)
 rename src/main/webapp/app/{overview => iris}/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.html (100%)
 rename src/main/webapp/app/{overview => iris}/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.scss (100%)
 rename src/main/webapp/app/{overview => iris}/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.ts (100%)

diff --git a/src/main/webapp/app/app-routing.module.ts b/src/main/webapp/app/app-routing.module.ts
index 3fd76b0c18a3..80d802b119b3 100644
--- a/src/main/webapp/app/app-routing.module.ts
+++ b/src/main/webapp/app/app-routing.module.ts
@@ -3,7 +3,7 @@ import { RouterModule, Routes } from '@angular/router';
 import { navbarRoute } from 'app/shared/layouts/navbar/navbar.route';
 import { errorRoute } from 'app/shared/layouts/error/error.route';
 import { ArtemisNavigationUtilService } from 'app/utils/navigation.utils';
-import { AboutIrisComponent } from 'app/overview/exercise-chatbot/about-iris/about-iris.component';
+import { AboutIrisComponent } from 'app/iris/about-iris/about-iris.component';
 
 const LAYOUT_ROUTES: Routes = [navbarRoute, ...errorRoute];
 
diff --git a/src/main/webapp/app/overview/exercise-chatbot/about-iris/about-iris.component.html b/src/main/webapp/app/iris/about-iris/about-iris.component.html
similarity index 100%
rename from src/main/webapp/app/overview/exercise-chatbot/about-iris/about-iris.component.html
rename to src/main/webapp/app/iris/about-iris/about-iris.component.html
diff --git a/src/main/webapp/app/overview/exercise-chatbot/about-iris/about-iris.component.ts b/src/main/webapp/app/iris/about-iris/about-iris.component.ts
similarity index 100%
rename from src/main/webapp/app/overview/exercise-chatbot/about-iris/about-iris.component.ts
rename to src/main/webapp/app/iris/about-iris/about-iris.component.ts
diff --git a/src/main/webapp/app/overview/exercise-chatbot/exercise-chatbot.component.html b/src/main/webapp/app/iris/exercise-chatbot/exercise-chatbot.component.html
similarity index 100%
rename from src/main/webapp/app/overview/exercise-chatbot/exercise-chatbot.component.html
rename to src/main/webapp/app/iris/exercise-chatbot/exercise-chatbot.component.html
diff --git a/src/main/webapp/app/overview/exercise-chatbot/exercise-chatbot.component.scss b/src/main/webapp/app/iris/exercise-chatbot/exercise-chatbot.component.scss
similarity index 100%
rename from src/main/webapp/app/overview/exercise-chatbot/exercise-chatbot.component.scss
rename to src/main/webapp/app/iris/exercise-chatbot/exercise-chatbot.component.scss
diff --git a/src/main/webapp/app/overview/exercise-chatbot/exercise-chatbot.component.ts b/src/main/webapp/app/iris/exercise-chatbot/exercise-chatbot.component.ts
similarity index 93%
rename from src/main/webapp/app/overview/exercise-chatbot/exercise-chatbot.component.ts
rename to src/main/webapp/app/iris/exercise-chatbot/exercise-chatbot.component.ts
index 3fe42e8b3e11..c16a3a740873 100644
--- a/src/main/webapp/app/overview/exercise-chatbot/exercise-chatbot.component.ts
+++ b/src/main/webapp/app/iris/exercise-chatbot/exercise-chatbot.component.ts
@@ -1,7 +1,7 @@
 import { Component, OnDestroy } from '@angular/core';
 import { faChevronDown, faCommentDots } from '@fortawesome/free-solid-svg-icons';
 import { MatDialog, MatDialogRef } from '@angular/material/dialog';
-import { ExerciseChatWidgetComponent } from 'app/overview/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component';
+import { ExerciseChatWidgetComponent } from 'app/iris/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component';
 import { Overlay } from '@angular/cdk/overlay';
 import { shakeAnimation } from 'angular-animations';
 
diff --git a/src/main/webapp/app/overview/exercise-chatbot/exercise-chatbot.module.ts b/src/main/webapp/app/iris/exercise-chatbot/exercise-chatbot.module.ts
similarity index 78%
rename from src/main/webapp/app/overview/exercise-chatbot/exercise-chatbot.module.ts
rename to src/main/webapp/app/iris/exercise-chatbot/exercise-chatbot.module.ts
index fcc2b347d731..8f64273019fd 100644
--- a/src/main/webapp/app/overview/exercise-chatbot/exercise-chatbot.module.ts
+++ b/src/main/webapp/app/iris/exercise-chatbot/exercise-chatbot.module.ts
@@ -2,13 +2,13 @@ import { NgModule } from '@angular/core';
 import { MatDialogModule } from '@angular/material/dialog';
 import { CommonModule } from '@angular/common';
 import { FormsModule } from '@angular/forms';
-import { ExerciseChatWidgetComponent } from 'app/overview/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component';
+import { ExerciseChatWidgetComponent } from 'app/iris/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component';
 import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
 import { ArtemisSharedModule } from 'app/shared/shared.module';
 import { AngularDraggableModule } from 'angular2-draggable';
 import { RouterModule } from '@angular/router';
 import { ArtemisSharedComponentModule } from 'app/shared/components/shared-component.module';
-import { AboutIrisComponent } from 'app/overview/exercise-chatbot/about-iris/about-iris.component';
+import { AboutIrisComponent } from 'app/iris/about-iris/about-iris.component';
 
 @NgModule({
     declarations: [ExerciseChatWidgetComponent, AboutIrisComponent],
diff --git a/src/main/webapp/app/overview/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.html b/src/main/webapp/app/iris/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.html
similarity index 100%
rename from src/main/webapp/app/overview/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.html
rename to src/main/webapp/app/iris/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.html
diff --git a/src/main/webapp/app/overview/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.scss b/src/main/webapp/app/iris/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.scss
similarity index 100%
rename from src/main/webapp/app/overview/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.scss
rename to src/main/webapp/app/iris/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.scss
diff --git a/src/main/webapp/app/overview/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.ts b/src/main/webapp/app/iris/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.ts
similarity index 100%
rename from src/main/webapp/app/overview/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.ts
rename to src/main/webapp/app/iris/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.ts
diff --git a/src/main/webapp/app/overview/exercise-details/course-exercise-details.module.ts b/src/main/webapp/app/overview/exercise-details/course-exercise-details.module.ts
index bb16605a442c..ce04a2d94938 100644
--- a/src/main/webapp/app/overview/exercise-details/course-exercise-details.module.ts
+++ b/src/main/webapp/app/overview/exercise-details/course-exercise-details.module.ts
@@ -26,8 +26,8 @@ import { LtiInitializerComponent } from 'app/overview/exercise-details/lti-initi
 import { LtiInitializerModalComponent } from 'app/overview/exercise-details/lti-initializer-modal.component';
 import { ArtemisProgrammingExerciseManagementModule } from 'app/exercises/programming/manage/programming-exercise-management.module';
 import { ArtemisExerciseHintParticipationModule } from 'app/exercises/shared/exercise-hint/participate/exercise-hint-participation.module';
-import { ExerciseChatbotModule } from 'app/overview/exercise-chatbot/exercise-chatbot.module';
-import { ExerciseChatbotComponent } from 'app/overview/exercise-chatbot/exercise-chatbot.component';
+import { ExerciseChatbotModule } from 'app/iris/exercise-chatbot/exercise-chatbot.module';
+import { ExerciseChatbotComponent } from 'app/iris/exercise-chatbot/exercise-chatbot.component';
 import { ProblemStatementComponent } from 'app/overview/exercise-details/problem-statement/problem-statement.component';
 import { StandaloneFeedbackComponent } from 'app/exercises/shared/feedback/standalone-feedback/standalone-feedback.component';
 import { ArtemisFeedbackModule } from 'app/exercises/shared/feedback/feedback.module';
diff --git a/src/test/javascript/spec/component/iris/exercise-chat-widget.component.spec.ts b/src/test/javascript/spec/component/iris/exercise-chat-widget.component.spec.ts
index e7facd61eab2..fb3950f54c83 100644
--- a/src/test/javascript/spec/component/iris/exercise-chat-widget.component.spec.ts
+++ b/src/test/javascript/spec/component/iris/exercise-chat-widget.component.spec.ts
@@ -1,5 +1,5 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { ExerciseChatWidgetComponent } from 'app/overview/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component';
+import { ExerciseChatWidgetComponent } from 'app/iris/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component';
 import { ArtemisTranslatePipe } from 'app/shared/pipes/artemis-translate.pipe';
 import { FormsModule } from '@angular/forms';
 import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
diff --git a/src/test/javascript/spec/component/iris/exercise-chatbot.component.spec.ts b/src/test/javascript/spec/component/iris/exercise-chatbot.component.spec.ts
index ef89a91e26a5..4b08ec74b051 100644
--- a/src/test/javascript/spec/component/iris/exercise-chatbot.component.spec.ts
+++ b/src/test/javascript/spec/component/iris/exercise-chatbot.component.spec.ts
@@ -1,7 +1,7 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { ExerciseChatbotComponent } from 'app/overview/exercise-chatbot/exercise-chatbot.component';
+import { ExerciseChatbotComponent } from 'app/iris/exercise-chatbot/exercise-chatbot.component';
 import { MatDialog } from '@angular/material/dialog';
-import { ExerciseChatWidgetComponent } from 'app/overview/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component';
+import { ExerciseChatWidgetComponent } from 'app/iris/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component';
 import { Overlay } from '@angular/cdk/overlay';
 import { FormsModule } from '@angular/forms';
 import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';

From 088228cc0418b505c7308ee6d481c4ab06ea19ac Mon Sep 17 00:00:00 2001
From: Asli Aykan <asliaykan97@gmail.com>
Date: Mon, 19 Jun 2023 00:12:26 +0200
Subject: [PATCH 026/111] fix merge bugs

---
 .../iris/exercise-chatbot/exercise-chatbot.component.html  | 2 +-
 .../iris/exercise-chatbot/exercise-chatbot.component.ts    | 4 ----
 .../exercise-chatwidget/exercise-chat-widget.component.ts  | 7 -------
 3 files changed, 1 insertion(+), 12 deletions(-)

diff --git a/src/main/webapp/app/iris/exercise-chatbot/exercise-chatbot.component.html b/src/main/webapp/app/iris/exercise-chatbot/exercise-chatbot.component.html
index 9cd92d52c107..8bacd9db80f8 100644
--- a/src/main/webapp/app/iris/exercise-chatbot/exercise-chatbot.component.html
+++ b/src/main/webapp/app/iris/exercise-chatbot/exercise-chatbot.component.html
@@ -7,5 +7,5 @@
     >
         <fa-icon size="lg" [icon]="chatOpen ? faChevronDown : faCommentDots"></fa-icon>
         <fa-icon *ngIf="hasNewMessages && !chatOpen" [icon]="faCircle" size="xs" class="unread-indicator"></fa-icon>
-
+    </button>
 </div>
diff --git a/src/main/webapp/app/iris/exercise-chatbot/exercise-chatbot.component.ts b/src/main/webapp/app/iris/exercise-chatbot/exercise-chatbot.component.ts
index fa62178d555a..3e74faf1f8f7 100644
--- a/src/main/webapp/app/iris/exercise-chatbot/exercise-chatbot.component.ts
+++ b/src/main/webapp/app/iris/exercise-chatbot/exercise-chatbot.component.ts
@@ -4,7 +4,6 @@ import { MatDialog, MatDialogRef } from '@angular/material/dialog';
 import { ExerciseChatWidgetComponent } from 'app/iris/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component';
 import { Overlay } from '@angular/cdk/overlay';
 import { shakeAnimation } from 'angular-animations';
-import { Component, HostListener, OnDestroy, OnInit } from '@angular/core';
 import { IrisWebsocketService } from 'app/iris/websocket.service';
 import { IrisStateStore } from 'app/iris/state-store.service';
 import { IrisSessionService } from 'app/iris/session.service';
@@ -34,9 +33,6 @@ export class ExerciseChatbotComponent implements OnDestroy {
     faCommentDots = faCommentDots;
     faChevronDown = faChevronDown;
 
-    hasNewMessages = false;
-    chatOpen = false;
-
     constructor(
         public dialog: MatDialog,
         private overlay: Overlay,
diff --git a/src/main/webapp/app/iris/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.ts b/src/main/webapp/app/iris/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.ts
index e5dbe8aeb06e..c1ecb442f39a 100644
--- a/src/main/webapp/app/iris/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.ts
+++ b/src/main/webapp/app/iris/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.ts
@@ -132,13 +132,6 @@ export class ExerciseChatWidgetComponent implements OnInit, OnDestroy, AfterView
         });
     }
 
-    scrollToUnread() {
-        setTimeout(() => {
-            const unreadMessageElement: HTMLElement = this.unreadMessage.nativeElement;
-            unreadMessageElement.scrollIntoView({ behavior: 'auto' });
-        });
-    }
-
     closeChat() {
         this.stateStore.dispatch(new NumNewMessagesResetAction());
         this.dialog.closeAll();

From 575d871ce32ed3800fe2459c18a6c9b7d8d82444 Mon Sep 17 00:00:00 2001
From: Ece Eren <aybikeceren@gmail.com>
Date: Mon, 19 Jun 2023 11:47:17 +0200
Subject: [PATCH 027/111] Fix codacy issues

---
 .../exercise-chatwidget/exercise-chat-widget.component.scss  | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/main/webapp/app/iris/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.scss b/src/main/webapp/app/iris/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.scss
index 949c4f956162..44f0459fe534 100644
--- a/src/main/webapp/app/iris/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.scss
+++ b/src/main/webapp/app/iris/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.scss
@@ -67,15 +67,19 @@
         conic-gradient(at var(--r) var(--r), #000 75%, #0000 0) calc(var(--r) / -2) calc(var(--r) / -2) padding-box,
         radial-gradient(50% 50%, #000 98%, #0000 101%) 0 0 / var(--r) var(--r) space padding-box;
 }
+
 .left {
     --_d: 0%;
+
     border-left: var(--t) solid #0000;
     background-color: var(--iris-client-chat-background);
     margin-right: var(--t);
     place-self: start;
 }
+
 .right {
     --_d: 100%;
+
     border-right: var(--t) solid #0000;
     margin-left: var(--t);
     place-self: end;
@@ -206,4 +210,3 @@ pre {
     cursor: pointer;
     box-shadow: 0 0 50px rgba(0, 0, 0, 0.4);
 }
-

From 41fdcb59f1d9a2768f011a80892ccd98537b3a00 Mon Sep 17 00:00:00 2001
From: Ece Eren <aybikeceren@gmail.com>
Date: Mon, 19 Jun 2023 16:02:59 +0200
Subject: [PATCH 028/111] Bug & style fixes

---
 .../app/iris/exercise-chatbot/exercise-chatbot.component.ts     | 2 +-
 .../exercise-chatwidget/exercise-chat-widget.component.html     | 2 +-
 src/main/webapp/i18n/de/exerciseChatbot.json                    | 2 +-
 src/main/webapp/i18n/en/exerciseChatbot.json                    | 2 +-
 4 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/main/webapp/app/iris/exercise-chatbot/exercise-chatbot.component.ts b/src/main/webapp/app/iris/exercise-chatbot/exercise-chatbot.component.ts
index 3e74faf1f8f7..8a67a6db8d40 100644
--- a/src/main/webapp/app/iris/exercise-chatbot/exercise-chatbot.component.ts
+++ b/src/main/webapp/app/iris/exercise-chatbot/exercise-chatbot.component.ts
@@ -1,5 +1,5 @@
 import { faChevronDown, faCircle, faCommentDots } from '@fortawesome/free-solid-svg-icons';
-import { Component, HostListener, OnDestroy, OnInit } from '@angular/core';
+import { Component, HostListener, OnDestroy } from '@angular/core';
 import { MatDialog, MatDialogRef } from '@angular/material/dialog';
 import { ExerciseChatWidgetComponent } from 'app/iris/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component';
 import { Overlay } from '@angular/cdk/overlay';
diff --git a/src/main/webapp/app/iris/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.html b/src/main/webapp/app/iris/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.html
index 9c69cbbb5eb2..f68ca8cfa881 100644
--- a/src/main/webapp/app/iris/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.html
+++ b/src/main/webapp/app/iris/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.html
@@ -36,7 +36,7 @@ <h3 class="header-start">
                 </div>
             </div>
             <div *ngFor="let message of messages; let i = index">
-                <span *ngIf="i === unreadMessageIndex" class="unread-message" #unreadMessage>{{ 'artemisApp.exerciseChatbot.unreadMessages' | artemisTranslate }}</span>
+                <span *ngIf="i === unreadMessageIndex" class="unread-message" #unreadMessage>{{ 'artemisApp.exerciseChatbot.unreadMessages' | artemisTranslate | uppercase }}</span>
                 <div *ngFor="let content of message.content">
                     <div [ngClass]="{ 'bubble right': message.sender === SENDER_USER, 'bubble left': message.sender === SENDER_SERVER }">
                         <span [innerHTML]="content.textContent! | htmlForMarkdown"></span>
diff --git a/src/main/webapp/i18n/de/exerciseChatbot.json b/src/main/webapp/i18n/de/exerciseChatbot.json
index e532dbcd950c..7fd9eb6d2548 100644
--- a/src/main/webapp/i18n/de/exerciseChatbot.json
+++ b/src/main/webapp/i18n/de/exerciseChatbot.json
@@ -15,7 +15,7 @@
             "f6": "Das Chat-Widget kann durch Klicken auf die Schaltfläche 'X' in der oberen rechten Ecke oder durch Verwendung der Chatbot-Schaltfläche unterhalb des Widgets geschlossen werden.",
             "f7": "Das Widget ist mit einer Funktion zum Verschieben ausgestattet, die es den Benutzern ermöglicht, es frei an verschiedene Positionen auf der Seite zu bewegen.",
             "f8": "Das Widget unterstützt die Größenanpassung, sodass die Benutzer seine Abmessungen durch das Vergrößern oder Verkleinern der Ränder anpassen können.",
-            "f9": "Das Widget bietet eine Vollbildfunktion, die durch Klicken auf die Schaltfläche neben der 'X'-Schaltfläche aktiviert wird. Dadurch wird das Widget auf die gesamte Seite erweitert und ähnelt einer Vollbildanzeige. Um zur vorherigen Größe zurückzukehren, können Sie die Schaltfläche erneut klicken"
+            "f9": "Das Widget bietet eine Vollbildfunktion, die durch Klicken auf die Schaltfläche neben der 'X'-Schaltfläche aktiviert wird. Dadurch wird das Widget auf die gesamte Seite erweitert und ähnelt einer Vollbildanzeige. Um zur vorherigen Größe zurückzukehren, können Sie die Schaltfläche erneut klicken",
             "unreadMessages": "Ungelesene Nachrichten",
             "buttonTooltip": "Beginne mit Iris zu chatten!"
         }
diff --git a/src/main/webapp/i18n/en/exerciseChatbot.json b/src/main/webapp/i18n/en/exerciseChatbot.json
index 096e905c274f..da209654779a 100644
--- a/src/main/webapp/i18n/en/exerciseChatbot.json
+++ b/src/main/webapp/i18n/en/exerciseChatbot.json
@@ -15,7 +15,7 @@
             "f6": "The chat widget can be closed by clicking on the 'X' button located in the top right corner or by utilizing the chatbot button positioned below the widget.",
             "f7": "The widget is designed with draggable functionality, allowing users to move it freely to different positions on the page.",
             "f8": "The widget supports resizing, enabling users to adjust its dimensions by expanding or shrinking its borders.",
-            "f9": "The widget offers a full-screen feature, accessible by clicking on the button adjacent to the 'X' button. This expands the widget to occupy the entire page, resembling a full-page display. To revert back to its previous size, you can click the button again, returning the widget to its original dimensions."
+            "f9": "The widget offers a full-screen feature, accessible by clicking on the button adjacent to the 'X' button. This expands the widget to occupy the entire page, resembling a full-page display. To revert back to its previous size, you can click the button again, returning the widget to its original dimensions.",
             "unreadMessages": "Unread messages",
             "buttonTooltip": "Start chatting with Iris!"
         }

From ea7913a063a85b29fae885b67ee9bfa81259d99a Mon Sep 17 00:00:00 2001
From: Ece Eren <aybikeceren@gmail.com>
Date: Mon, 19 Jun 2023 16:03:35 +0200
Subject: [PATCH 029/111] Remove uppercase

---
 .../exercise-chatwidget/exercise-chat-widget.component.html     | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/main/webapp/app/iris/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.html b/src/main/webapp/app/iris/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.html
index f68ca8cfa881..9c69cbbb5eb2 100644
--- a/src/main/webapp/app/iris/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.html
+++ b/src/main/webapp/app/iris/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.html
@@ -36,7 +36,7 @@ <h3 class="header-start">
                 </div>
             </div>
             <div *ngFor="let message of messages; let i = index">
-                <span *ngIf="i === unreadMessageIndex" class="unread-message" #unreadMessage>{{ 'artemisApp.exerciseChatbot.unreadMessages' | artemisTranslate | uppercase }}</span>
+                <span *ngIf="i === unreadMessageIndex" class="unread-message" #unreadMessage>{{ 'artemisApp.exerciseChatbot.unreadMessages' | artemisTranslate }}</span>
                 <div *ngFor="let content of message.content">
                     <div [ngClass]="{ 'bubble right': message.sender === SENDER_USER, 'bubble left': message.sender === SENDER_SERVER }">
                         <span [innerHTML]="content.textContent! | htmlForMarkdown"></span>

From aa087bd52fc0bb40d983f52420dc61d5a93afb89 Mon Sep 17 00:00:00 2001
From: Asli Aykan <asliaykan97@gmail.com>
Date: Tue, 20 Jun 2023 10:04:48 +0200
Subject: [PATCH 030/111] refactor

---
 .../exercise-chatwidget/exercise-chat-widget.component.html     | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/main/webapp/app/iris/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.html b/src/main/webapp/app/iris/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.html
index 9c69cbbb5eb2..6fc376daabcb 100644
--- a/src/main/webapp/app/iris/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.html
+++ b/src/main/webapp/app/iris/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.html
@@ -27,7 +27,7 @@ <h3 class="header-start">
         </div>
 
         <!-- main chat section -->
-        <div class="chat-body" #chatBody>
+        <div class="chat-body" #chatBody (scroll)="onChatScroll()">
             <div class="p-chat" *ngIf="!userAccepted">
                 <div class="message-text">{{ 'artemisApp.exerciseChatbot.popUpMessage' | artemisTranslate }}</div>
                 <div class="button-container">

From 44e9beca26f6d137fb65903e02f0f3b47ec8f59e Mon Sep 17 00:00:00 2001
From: Ece Eren <aybikeceren@gmail.com>
Date: Tue, 20 Jun 2023 17:05:29 +0200
Subject: [PATCH 031/111] Codacy fix

---
 .../exercise-chatwidget/exercise-chat-widget.component.scss    | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/main/webapp/app/iris/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.scss b/src/main/webapp/app/iris/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.scss
index 44f0459fe534..e27cb4ccb04d 100644
--- a/src/main/webapp/app/iris/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.scss
+++ b/src/main/webapp/app/iris/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.scss
@@ -63,7 +63,8 @@
     margin-bottom: 5px;
     color: var(--bs-body-color);
     padding: 10px;
-    -webkit-mask: radial-gradient(var(--t) at var(--_d) 0, #0000 98%, #000 102%) var(--_d) 100% / calc(100% - var(--r)) var(--t) no-repeat,
+    -webkit-mask:
+        radial-gradient(var(--t) at var(--_d) 0, #0000 98%, #000 102%) var(--_d) 100% / calc(100% - var(--r)) var(--t) no-repeat,
         conic-gradient(at var(--r) var(--r), #000 75%, #0000 0) calc(var(--r) / -2) calc(var(--r) / -2) padding-box,
         radial-gradient(50% 50%, #000 98%, #0000 101%) 0 0 / var(--r) var(--r) space padding-box;
 }

From c51f644f430e0c31cf4438d3c92bd577bba652e4 Mon Sep 17 00:00:00 2001
From: Ece Eren <aybikeceren@gmail.com>
Date: Tue, 20 Jun 2023 17:13:46 +0200
Subject: [PATCH 032/111] Remove unused parts from .spec files

---
 .../iris/ui/exercise-chat-widget.component.spec.ts   |  1 -
 .../iris/ui/exercise-chatbot.component.spec.ts       | 12 +-----------
 2 files changed, 1 insertion(+), 12 deletions(-)

diff --git a/src/test/javascript/spec/component/iris/ui/exercise-chat-widget.component.spec.ts b/src/test/javascript/spec/component/iris/ui/exercise-chat-widget.component.spec.ts
index 820617025d20..6b43ff18e5b8 100644
--- a/src/test/javascript/spec/component/iris/ui/exercise-chat-widget.component.spec.ts
+++ b/src/test/javascript/spec/component/iris/ui/exercise-chat-widget.component.spec.ts
@@ -3,7 +3,6 @@ import { ArtemisTranslatePipe } from 'app/shared/pipes/artemis-translate.pipe';
 import { FormsModule } from '@angular/forms';
 import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
 import { MockPipe } from 'ng-mocks';
-import { ChatbotPopupComponent } from 'app/iris/exercise-chatbot/chatbot-popup/chatbot-popup.component';
 import { ExerciseChatWidgetComponent } from 'app/iris/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component';
 import { IrisStateStore } from 'app/iris/state-store.service';
 import { MAT_DIALOG_DATA, MatDialog, MatDialogModule } from '@angular/material/dialog';
diff --git a/src/test/javascript/spec/component/iris/ui/exercise-chatbot.component.spec.ts b/src/test/javascript/spec/component/iris/ui/exercise-chatbot.component.spec.ts
index 62e0a4730f15..e7a520134b03 100644
--- a/src/test/javascript/spec/component/iris/ui/exercise-chatbot.component.spec.ts
+++ b/src/test/javascript/spec/component/iris/ui/exercise-chatbot.component.spec.ts
@@ -7,7 +7,6 @@ import { ArtemisTranslatePipe } from 'app/shared/pipes/artemis-translate.pipe';
 import { MockPipe } from 'ng-mocks';
 import { AccountService } from 'app/core/auth/account.service';
 import { Subject } from 'rxjs';
-import { ChatbotPopupComponent } from 'app/iris/exercise-chatbot/chatbot-popup/chatbot-popup.component';
 import { ExerciseChatbotComponent } from 'app/iris/exercise-chatbot/exercise-chatbot.component';
 import { ExerciseChatWidgetComponent } from 'app/iris/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component';
 import { IrisSessionService } from 'app/iris/session.service';
@@ -17,7 +16,7 @@ import { MockAccountService } from '../../../helpers/mocks/service/mock-account.
 import { ActivatedRoute } from '@angular/router';
 import { IrisStateStore } from 'app/iris/state-store.service';
 import { ActiveConversationMessageLoadedAction, NumNewMessagesResetAction, SessionReceivedAction } from 'app/iris/state-store.model';
-import { mockServerMessage } from './../../../helpers/sample/iris-sample-data';
+import { mockServerMessage } from '../../../helpers/sample/iris-sample-data';
 
 describe('ExerciseChatbotComponent', () => {
     let component: ExerciseChatbotComponent;
@@ -79,15 +78,6 @@ describe('ExerciseChatbotComponent', () => {
         jest.restoreAllMocks();
     });
 
-    it('should open dialog when chat not accepted', () => {
-        jest.spyOn(component, 'openDialog');
-
-        component.chatAccepted = false;
-        component.handleButtonClick();
-
-        expect(component.openDialog).toHaveBeenCalled();
-    });
-
     it('should open chat when chat accepted', () => {
         jest.spyOn(component, 'openChat');
 

From 5e1cbc4f23ac888bfac698d67f3f1380223bbbd0 Mon Sep 17 00:00:00 2001
From: Ece Eren <aybikeceren@gmail.com>
Date: Tue, 20 Jun 2023 17:14:23 +0200
Subject: [PATCH 033/111] Fix path error

---
 .../spec/component/iris/ui/exercise-chatbot.component.spec.ts   | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/test/javascript/spec/component/iris/ui/exercise-chatbot.component.spec.ts b/src/test/javascript/spec/component/iris/ui/exercise-chatbot.component.spec.ts
index e7a520134b03..4c32061939bc 100644
--- a/src/test/javascript/spec/component/iris/ui/exercise-chatbot.component.spec.ts
+++ b/src/test/javascript/spec/component/iris/ui/exercise-chatbot.component.spec.ts
@@ -16,7 +16,7 @@ import { MockAccountService } from '../../../helpers/mocks/service/mock-account.
 import { ActivatedRoute } from '@angular/router';
 import { IrisStateStore } from 'app/iris/state-store.service';
 import { ActiveConversationMessageLoadedAction, NumNewMessagesResetAction, SessionReceivedAction } from 'app/iris/state-store.model';
-import { mockServerMessage } from '../../../helpers/sample/iris-sample-data';
+import { mockServerMessage } from './../../../helpers/sample/iris-sample-data';
 
 describe('ExerciseChatbotComponent', () => {
     let component: ExerciseChatbotComponent;

From 4412aefb10b8869732dd47dc007cfb17fb2614b2 Mon Sep 17 00:00:00 2001
From: Asli Aykan <asliaykan97@gmail.com>
Date: Tue, 20 Jun 2023 17:46:31 +0200
Subject: [PATCH 034/111] refactor

---
 .../exercise-chat-widget.component.html       |  4 ++--
 .../exercise-chat-widget.component.scss       | 19 ++++++++++++-------
 2 files changed, 14 insertions(+), 9 deletions(-)

diff --git a/src/main/webapp/app/iris/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.html b/src/main/webapp/app/iris/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.html
index 6fc376daabcb..dd69cb636e78 100644
--- a/src/main/webapp/app/iris/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.html
+++ b/src/main/webapp/app/iris/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.html
@@ -38,12 +38,12 @@ <h3 class="header-start">
             <div *ngFor="let message of messages; let i = index">
                 <span *ngIf="i === unreadMessageIndex" class="unread-message" #unreadMessage>{{ 'artemisApp.exerciseChatbot.unreadMessages' | artemisTranslate }}</span>
                 <div *ngFor="let content of message.content">
-                    <div [ngClass]="{ 'bubble right': message.sender === SENDER_USER, 'bubble left': message.sender === SENDER_SERVER }">
+                    <div [ngClass]="{ 'bubble-right': message.sender === SENDER_USER, 'bubble-left': message.sender === SENDER_SERVER }">
                         <span [innerHTML]="content.textContent! | htmlForMarkdown"></span>
                     </div>
                 </div>
             </div>
-            <div class="bubble left" *ngIf="isLoading">
+            <div class="bubble-left" *ngIf="isLoading">
                 <div class="blinking-dots">
                     <div *ngFor="let _ of [].constructor(dots)" class="d-inline">
                         <fa-icon [icon]="faCircle" size="xs"></fa-icon>
diff --git a/src/main/webapp/app/iris/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.scss b/src/main/webapp/app/iris/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.scss
index 44f0459fe534..81b16db25845 100644
--- a/src/main/webapp/app/iris/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.scss
+++ b/src/main/webapp/app/iris/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.scss
@@ -55,7 +55,7 @@
     flex-direction: column;
 }
 
-.bubble {
+.bubble-left {
     --r: 13px; /* the radius */
     --t: 10px; /* the size of the tail */
 
@@ -66,20 +66,25 @@
     -webkit-mask: radial-gradient(var(--t) at var(--_d) 0, #0000 98%, #000 102%) var(--_d) 100% / calc(100% - var(--r)) var(--t) no-repeat,
         conic-gradient(at var(--r) var(--r), #000 75%, #0000 0) calc(var(--r) / -2) calc(var(--r) / -2) padding-box,
         radial-gradient(50% 50%, #000 98%, #0000 101%) 0 0 / var(--r) var(--r) space padding-box;
-}
-
-.left {
     --_d: 0%;
-
     border-left: var(--t) solid #0000;
     background-color: var(--iris-client-chat-background);
     margin-right: var(--t);
     place-self: start;
 }
 
-.right {
-    --_d: 100%;
+.bubble-right {
+    --r: 13px; /* the radius */
+    --t: 10px; /* the size of the tail */
 
+    width: fit-content;
+    margin-bottom: 5px;
+    color: var(--bs-body-color);
+    padding: 10px;
+    -webkit-mask: radial-gradient(var(--t) at var(--_d) 0, #0000 98%, #000 102%) var(--_d) 100% / calc(100% - var(--r)) var(--t) no-repeat,
+        conic-gradient(at var(--r) var(--r), #000 75%, #0000 0) calc(var(--r) / -2) calc(var(--r) / -2) padding-box,
+        radial-gradient(50% 50%, #000 98%, #0000 101%) 0 0 / var(--r) var(--r) space padding-box;
+    --_d: 100%;
     border-right: var(--t) solid #0000;
     margin-left: var(--t);
     place-self: end;

From 67b4cf376d661cec7ade47c2e5bea1d0866e274a Mon Sep 17 00:00:00 2001
From: Asli Aykan <asliaykan97@gmail.com>
Date: Wed, 21 Jun 2023 13:53:58 +0200
Subject: [PATCH 035/111] bugs fixed

---
 .../exercise-chatwidget/exercise-chat-widget.component.scss   | 4 ++--
 .../exercise-chatwidget/exercise-chat-widget.component.ts     | 1 -
 2 files changed, 2 insertions(+), 3 deletions(-)

diff --git a/src/main/webapp/app/iris/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.scss b/src/main/webapp/app/iris/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.scss
index dc3d7ee5adad..85333f603485 100644
--- a/src/main/webapp/app/iris/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.scss
+++ b/src/main/webapp/app/iris/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.scss
@@ -63,8 +63,7 @@
     margin-bottom: 5px;
     color: var(--bs-body-color);
     padding: 10px;
-    -webkit-mask:
-        radial-gradient(var(--t) at var(--_d) 0, #0000 98%, #000 102%) var(--_d) 100% / calc(100% - var(--r)) var(--t) no-repeat,
+    -webkit-mask: radial-gradient(var(--t) at var(--_d) 0, #0000 98%, #000 102%) var(--_d) 100% / calc(100% - var(--r)) var(--t) no-repeat,
         conic-gradient(at var(--r) var(--r), #000 75%, #0000 0) calc(var(--r) / -2) calc(var(--r) / -2) padding-box,
         radial-gradient(50% 50%, #000 98%, #0000 101%) 0 0 / var(--r) var(--r) space padding-box;
     --_d: 0%;
@@ -89,6 +88,7 @@
     border-right: var(--t) solid #0000;
     margin-left: var(--t);
     place-self: end;
+    float: right;
     background-color: var(--iris-my-chat-background);
 }
 
diff --git a/src/main/webapp/app/iris/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.ts b/src/main/webapp/app/iris/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.ts
index c1ecb442f39a..b6e21cca1895 100644
--- a/src/main/webapp/app/iris/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.ts
+++ b/src/main/webapp/app/iris/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.ts
@@ -216,7 +216,6 @@ export class ExerciseChatWidgetComponent implements OnInit, OnDestroy, AfterView
         textarea.rows = 1;
         chatBody.style.height = `calc(100% - 100px)`;
         this.stateStore.dispatch(new NumNewMessagesResetAction());
-        this.dialog.closeAll();
     }
 
     private newUserMessage(message: string): IrisClientMessage {

From a17611baa088a558f758b6b428e433face2a85f5 Mon Sep 17 00:00:00 2001
From: Asli Aykan <asliaykan97@gmail.com>
Date: Wed, 21 Jun 2023 13:55:20 +0200
Subject: [PATCH 036/111] ref

---
 .../exercise-chatwidget/exercise-chat-widget.component.scss     | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/main/webapp/app/iris/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.scss b/src/main/webapp/app/iris/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.scss
index 85333f603485..7eb709efd49d 100644
--- a/src/main/webapp/app/iris/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.scss
+++ b/src/main/webapp/app/iris/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.scss
@@ -80,11 +80,11 @@
     width: fit-content;
     margin-bottom: 5px;
     color: var(--bs-body-color);
-    padding: 10px;
     -webkit-mask: radial-gradient(var(--t) at var(--_d) 0, #0000 98%, #000 102%) var(--_d) 100% / calc(100% - var(--r)) var(--t) no-repeat,
         conic-gradient(at var(--r) var(--r), #000 75%, #0000 0) calc(var(--r) / -2) calc(var(--r) / -2) padding-box,
         radial-gradient(50% 50%, #000 98%, #0000 101%) 0 0 / var(--r) var(--r) space padding-box;
     --_d: 100%;
+    padding: 10px;
     border-right: var(--t) solid #0000;
     margin-left: var(--t);
     place-self: end;

From e24b7b1df37e175259e6adf669b8617afc852d19 Mon Sep 17 00:00:00 2001
From: Ece Eren <aybikeceren@gmail.com>
Date: Thu, 22 Jun 2023 00:18:19 +0200
Subject: [PATCH 037/111] Fix textarea resizing & multiline formatting & full
 screen bug

---
 .../exercise-chat-widget.component.html       | 18 +++++++++++++--
 .../exercise-chat-widget.component.scss       |  1 +
 .../exercise-chat-widget.component.ts         | 22 +++++++++++++++----
 3 files changed, 35 insertions(+), 6 deletions(-)

diff --git a/src/main/webapp/app/iris/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.html b/src/main/webapp/app/iris/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.html
index dd69cb636e78..6a9a0a0c4e1b 100644
--- a/src/main/webapp/app/iris/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.html
+++ b/src/main/webapp/app/iris/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.html
@@ -1,6 +1,20 @@
 <div class="container">
     <!-- chat box -->
-    <div class="chat-widget" #chatWidget ngDraggable [handle]="chatBody" ngResizable rzHandles="all" [rzMinWidth]="250" [rzMinHeight]="200" [rzMaxWidth]="950" [rzMaxHeight]="700">
+    <div
+        *ngIf="showChatWidget"
+        [style.width]="widgetWidth"
+        [style.height]="widgetHeight"
+        class="chat-widget"
+        #chatWidget
+        ngDraggable
+        [handle]="chatBody"
+        ngResizable
+        rzHandles="all"
+        [rzMinWidth]="250"
+        [rzMinHeight]="200"
+        [rzMaxWidth]="1200"
+        [rzMaxHeight]="700"
+    >
         <!-- client -->
         <div class="client">
             <div class="chat-header">
@@ -39,7 +53,7 @@ <h3 class="header-start">
                 <span *ngIf="i === unreadMessageIndex" class="unread-message" #unreadMessage>{{ 'artemisApp.exerciseChatbot.unreadMessages' | artemisTranslate }}</span>
                 <div *ngFor="let content of message.content">
                     <div [ngClass]="{ 'bubble-right': message.sender === SENDER_USER, 'bubble-left': message.sender === SENDER_SERVER }">
-                        <span [innerHTML]="content.textContent! | htmlForMarkdown"></span>
+                        <pre><span [innerHTML]="content.textContent! | htmlForMarkdown"></span></pre>
                     </div>
                 </div>
             </div>
diff --git a/src/main/webapp/app/iris/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.scss b/src/main/webapp/app/iris/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.scss
index 7eb709efd49d..255285ad6d8c 100644
--- a/src/main/webapp/app/iris/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.scss
+++ b/src/main/webapp/app/iris/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.scss
@@ -123,6 +123,7 @@ pre {
     flex: 1;
     padding: 5px 13px;
     margin-right: 5px;
+    resize: none;
 }
 
 .btn-circle {
diff --git a/src/main/webapp/app/iris/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.ts b/src/main/webapp/app/iris/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.ts
index b6e21cca1895..c9315ab2615a 100644
--- a/src/main/webapp/app/iris/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.ts
+++ b/src/main/webapp/app/iris/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.ts
@@ -44,6 +44,9 @@ export class ExerciseChatWidgetComponent implements OnInit, OnDestroy, AfterView
     componentClass = 'chat-widget';
     rows = 1;
     fullSize = false;
+    showChatWidget = true;
+    widgetWidth = '330px';
+    widgetHeight = '430px';
 
     constructor(
         private dialog: MatDialog,
@@ -161,15 +164,26 @@ export class ExerciseChatWidgetComponent implements OnInit, OnDestroy, AfterView
         this.isScrolledToBottom = scrollHeight - scrollTop === clientHeight;
     }
 
+    resetScreen(resetType: string) {
+        this.chatWidget.nativeElement.style.opacity = '0';
+        setTimeout(() => {
+            this.showChatWidget = false;
+            this.widgetWidth = resetType == 'maximize' ? '95vw' : '330px';
+            this.widgetHeight = resetType == 'maximize' ? '85vh' : '430px';
+        }, 50);
+        setTimeout(() => {
+            this.showChatWidget = true;
+            this.chatWidget.nativeElement.style.opacity = '1';
+        }, 50);
+    }
+
     maximizeScreen() {
-        this.chatWidget.nativeElement.style.width = '95vw';
-        this.chatWidget.nativeElement.style.height = '85vh';
+        this.resetScreen('maximize');
         this.fullSize = true;
     }
 
     minimizeScreen() {
-        this.chatWidget.nativeElement.style.width = '330px';
-        this.chatWidget.nativeElement.style.height = '430px';
+        this.resetScreen('minimize');
         this.fullSize = false;
     }
 

From 6b68ec7340ee61860ea20935436a91f0574241b3 Mon Sep 17 00:00:00 2001
From: Ece Eren <aybikeceren@gmail.com>
Date: Thu, 22 Jun 2023 00:31:25 +0200
Subject: [PATCH 038/111] Fix scroll button position after multiline

---
 .../exercise-chatwidget/exercise-chat-widget.component.html  | 2 +-
 .../exercise-chatwidget/exercise-chat-widget.component.ts    | 5 +++++
 2 files changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/main/webapp/app/iris/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.html b/src/main/webapp/app/iris/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.html
index 6a9a0a0c4e1b..e2b958b67f7b 100644
--- a/src/main/webapp/app/iris/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.html
+++ b/src/main/webapp/app/iris/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.html
@@ -64,7 +64,7 @@ <h3 class="header-start">
                     </div>
                 </div>
             </div>
-            <div class="scroll-to-bottom" *ngIf="!isScrolledToBottom" (click)="scrollToBottomOnClick()">
+            <div class="scroll-to-bottom" *ngIf="!isScrolledToBottom" (click)="scrollToBottomOnClick()" #scrollArrow>
                 <fa-icon [icon]="faArrowDown"></fa-icon>
             </div>
             <div class="client-chat-error" *ngIf="error">
diff --git a/src/main/webapp/app/iris/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.ts b/src/main/webapp/app/iris/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.ts
index c9315ab2615a..f3448d03ee5a 100644
--- a/src/main/webapp/app/iris/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.ts
+++ b/src/main/webapp/app/iris/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.ts
@@ -21,6 +21,7 @@ import { Subscription } from 'rxjs';
 export class ExerciseChatWidgetComponent implements OnInit, OnDestroy, AfterViewInit {
     @ViewChild('chatWidget') chatWidget!: ElementRef;
     @ViewChild('chatBody') chatBody!: ElementRef;
+    @ViewChild('scrollArrow') scrollArrow!: ElementRef;
     @ViewChild('messageTextarea', { static: false }) messageTextarea: ElementRef;
     @ViewChild('unreadMessage', { static: false }) unreadMessage!: ElementRef;
 
@@ -219,16 +220,20 @@ export class ExerciseChatWidgetComponent implements OnInit, OnDestroy, AfterView
     adjustChatBodyHeight(newRows: number) {
         const textarea: HTMLTextAreaElement = this.messageTextarea.nativeElement;
         const chatBody: HTMLElement = this.chatBody.nativeElement;
+        const scrollArrow: HTMLElement = this.scrollArrow.nativeElement;
         const lineHeight = parseInt(window.getComputedStyle(textarea).lineHeight);
         const rowHeight = lineHeight * newRows;
+        scrollArrow.style.bottom = `calc(60px + ${rowHeight}px)`;
         chatBody.style.height = `calc(100% - ${rowHeight}px - 78px)`;
     }
 
     resetChatBodyHeight() {
         const chatBody: HTMLElement = this.chatBody.nativeElement;
         const textarea: HTMLTextAreaElement = this.messageTextarea.nativeElement;
+        const scrollArrow: HTMLElement = this.scrollArrow.nativeElement;
         textarea.rows = 1;
         chatBody.style.height = `calc(100% - 100px)`;
+        scrollArrow.style.bottom = '60 px';
         this.stateStore.dispatch(new NumNewMessagesResetAction());
     }
 

From 36542558476964d0b4a37d1e3c080a975ccd7514 Mon Sep 17 00:00:00 2001
From: Ece Eren <aybikeceren@gmail.com>
Date: Thu, 22 Jun 2023 01:30:13 +0200
Subject: [PATCH 039/111] Fix scroll button position after multiline 2 & fix
 scroll to bottom on fullscreen

---
 .../exercise-chat-widget.component.html       |  2 +-
 .../exercise-chat-widget.component.ts         | 19 +++++++++++--------
 2 files changed, 12 insertions(+), 9 deletions(-)

diff --git a/src/main/webapp/app/iris/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.html b/src/main/webapp/app/iris/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.html
index e2b958b67f7b..4c23de37a93d 100644
--- a/src/main/webapp/app/iris/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.html
+++ b/src/main/webapp/app/iris/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.html
@@ -64,7 +64,7 @@ <h3 class="header-start">
                     </div>
                 </div>
             </div>
-            <div class="scroll-to-bottom" *ngIf="!isScrolledToBottom" (click)="scrollToBottomOnClick()" #scrollArrow>
+            <div class="scroll-to-bottom" [hidden]="isScrolledToBottom" (click)="scrollToBottomOnClick()" #scrollArrow>
                 <fa-icon [icon]="faArrowDown"></fa-icon>
             </div>
             <div class="client-chat-error" *ngIf="error">
diff --git a/src/main/webapp/app/iris/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.ts b/src/main/webapp/app/iris/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.ts
index f3448d03ee5a..2ea5c0cca665 100644
--- a/src/main/webapp/app/iris/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.ts
+++ b/src/main/webapp/app/iris/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.ts
@@ -152,9 +152,11 @@ export class ExerciseChatWidgetComponent implements OnInit, OnDestroy, AfterView
     }
 
     scrollToBottomOnClick() {
-        const chatBody = this.chatBody.nativeElement;
-        chatBody.scrollTop = chatBody.scrollHeight;
-        this.isScrolledToBottom = true;
+        const chatBody = this.chatBody?.nativeElement;
+        if (chatBody) {
+            chatBody.scrollTop = chatBody.scrollHeight;
+            this.isScrolledToBottom = true;
+        }
     }
 
     onChatScroll() {
@@ -166,16 +168,17 @@ export class ExerciseChatWidgetComponent implements OnInit, OnDestroy, AfterView
     }
 
     resetScreen(resetType: string) {
-        this.chatWidget.nativeElement.style.opacity = '0';
         setTimeout(() => {
             this.showChatWidget = false;
             this.widgetWidth = resetType == 'maximize' ? '95vw' : '330px';
             this.widgetHeight = resetType == 'maximize' ? '85vh' : '430px';
         }, 50);
+        setTimeout(() => {
+            this.scrollToBottom('auto');
+        }, 100);
         setTimeout(() => {
             this.showChatWidget = true;
-            this.chatWidget.nativeElement.style.opacity = '1';
-        }, 50);
+        }, 100);
     }
 
     maximizeScreen() {
@@ -223,7 +226,7 @@ export class ExerciseChatWidgetComponent implements OnInit, OnDestroy, AfterView
         const scrollArrow: HTMLElement = this.scrollArrow.nativeElement;
         const lineHeight = parseInt(window.getComputedStyle(textarea).lineHeight);
         const rowHeight = lineHeight * newRows;
-        scrollArrow.style.bottom = `calc(60px + ${rowHeight}px)`;
+        scrollArrow.style.bottom = `calc(10% + ${rowHeight}px)`;
         chatBody.style.height = `calc(100% - ${rowHeight}px - 78px)`;
     }
 
@@ -232,8 +235,8 @@ export class ExerciseChatWidgetComponent implements OnInit, OnDestroy, AfterView
         const textarea: HTMLTextAreaElement = this.messageTextarea.nativeElement;
         const scrollArrow: HTMLElement = this.scrollArrow.nativeElement;
         textarea.rows = 1;
-        chatBody.style.height = `calc(100% - 100px)`;
         scrollArrow.style.bottom = '60 px';
+        chatBody.style.height = `calc(100% - 100px)`;
         this.stateStore.dispatch(new NumNewMessagesResetAction());
     }
 

From 18686e1e7f91da1764b6ae242cdf290f7e63e214 Mon Sep 17 00:00:00 2001
From: Asli Aykan <asliaykan97@gmail.com>
Date: Thu, 22 Jun 2023 11:55:11 +0200
Subject: [PATCH 040/111] updated client tests

---
 .../exercise-chatbot.component.html           |  7 +-----
 .../ui/exercise-chat-widget.component.spec.ts | 24 +++++++++++++++++--
 .../ui/exercise-chatbot.component.spec.ts     |  3 ++-
 3 files changed, 25 insertions(+), 9 deletions(-)

diff --git a/src/main/webapp/app/iris/exercise-chatbot/exercise-chatbot.component.html b/src/main/webapp/app/iris/exercise-chatbot/exercise-chatbot.component.html
index 8bacd9db80f8..394bd1d10b11 100644
--- a/src/main/webapp/app/iris/exercise-chatbot/exercise-chatbot.component.html
+++ b/src/main/webapp/app/iris/exercise-chatbot/exercise-chatbot.component.html
@@ -1,10 +1,5 @@
 <div class="chatbot-button">
-    <button
-        class="btn btn-primary btn-md btn-circle"
-        [@shake]="runAnimation"
-        title="{{ 'artemisApp.exerciseChatbot.buttonTooltip' | artemisTranslate }}"
-        (click)="handleButtonClick()"
-    >
+    <button class="btn btn-primary btn-md btn-circle" title="{{ 'artemisApp.exerciseChatbot.buttonTooltip' | artemisTranslate }}" (click)="handleButtonClick()">
         <fa-icon size="lg" [icon]="chatOpen ? faChevronDown : faCommentDots"></fa-icon>
         <fa-icon *ngIf="hasNewMessages && !chatOpen" [icon]="faCircle" size="xs" class="unread-indicator"></fa-icon>
     </button>
diff --git a/src/test/javascript/spec/component/iris/ui/exercise-chat-widget.component.spec.ts b/src/test/javascript/spec/component/iris/ui/exercise-chat-widget.component.spec.ts
index 6b43ff18e5b8..9ee8713e8b54 100644
--- a/src/test/javascript/spec/component/iris/ui/exercise-chat-widget.component.spec.ts
+++ b/src/test/javascript/spec/component/iris/ui/exercise-chat-widget.component.spec.ts
@@ -1,10 +1,13 @@
 import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 import { ArtemisTranslatePipe } from 'app/shared/pipes/artemis-translate.pipe';
 import { FormsModule } from '@angular/forms';
+import { ActivatedRoute } from '@angular/router';
 import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
 import { MockPipe } from 'ng-mocks';
 import { ExerciseChatWidgetComponent } from 'app/iris/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component';
 import { IrisStateStore } from 'app/iris/state-store.service';
+import { AccountService } from 'app/core/auth/account.service';
+import { TranslateService } from '@ngx-translate/core';
 import { MAT_DIALOG_DATA, MatDialog, MatDialogModule } from '@angular/material/dialog';
 import { IrisHttpMessageService } from 'app/iris/http-message.service';
 import { ActiveConversationMessageLoadedAction, NumNewMessagesResetAction, SessionReceivedAction, StudentMessageSentAction } from 'app/iris/state-store.model';
@@ -13,6 +16,13 @@ import { mockClientMessage, mockServerMessage } from '../../../helpers/sample/ir
 import { HtmlForMarkdownPipe } from 'app/shared/pipes/html-for-markdown.pipe';
 import { IrisMessageContentType } from 'app/entities/iris/iris-content-type.model';
 import { IrisSender } from 'app/entities/iris/iris-message.model';
+import { LocalStorageService, SessionStorageService } from 'ngx-webstorage';
+import { MockTranslateService } from '../../../helpers/mocks/service/mock-translate.service';
+import { MockSyncStorage } from '../../../helpers/mocks/service/mock-sync-storage.service';
+import { MockHttpService } from '../../../helpers/mocks/service/mock-http.service';
+import { HttpClient } from '@angular/common/http';
+import { MockAccountService } from '../../../helpers/mocks/service/mock-account.service';
+import { ButtonType } from 'app/shared/components/button.component';
 
 describe('ExerciseChatWidgetComponent', () => {
     let component: ExerciseChatWidgetComponent;
@@ -38,18 +48,28 @@ describe('ExerciseChatWidgetComponent', () => {
 
         await TestBed.configureTestingModule({
             imports: [FormsModule, FontAwesomeModule, MatDialogModule],
-            declarations: [ExerciseChatWidgetComponent, ChatbotPopupComponent, MockPipe(ArtemisTranslatePipe), MockPipe(HtmlForMarkdownPipe)],
+            declarations: [ExerciseChatWidgetComponent, MockPipe(ArtemisTranslatePipe), MockPipe(HtmlForMarkdownPipe)],
             providers: [
                 { provide: MAT_DIALOG_DATA, useValue: { stateStore: stateStore } },
                 { provide: IrisHttpMessageService, useValue: mockHttpMessageService },
                 { provide: MatDialog, useValue: mockDialog },
+                { provide: ActivatedRoute, useValue: {} },
+                { provide: LocalStorageService, useValue: {} },
+                { provide: TranslateService, useClass: MockTranslateService },
+                { provide: SessionStorageService, useClass: MockSyncStorage },
+                { provide: HttpClient, useClass: MockHttpService },
+                { provide: AccountService, useClass: MockAccountService },
             ],
         })
             .compileComponents()
             .then(() => {
+                jest.spyOn(console, 'error').mockImplementation(() => {});
+                global.window ??= window;
+                window.scroll = jest.fn();
+                window.HTMLElement.prototype.scrollTo = jest.fn();
                 fixture = TestBed.createComponent(ExerciseChatWidgetComponent);
                 component = fixture.componentInstance;
-                fixture.nativeElement.querySelector('.chat-body').scrollTo = jest.fn();
+                component.buttonType = ButtonType.Primary;
                 fixture.detectChanges();
             });
     });
diff --git a/src/test/javascript/spec/component/iris/ui/exercise-chatbot.component.spec.ts b/src/test/javascript/spec/component/iris/ui/exercise-chatbot.component.spec.ts
index 4c32061939bc..0121eeeb6a07 100644
--- a/src/test/javascript/spec/component/iris/ui/exercise-chatbot.component.spec.ts
+++ b/src/test/javascript/spec/component/iris/ui/exercise-chatbot.component.spec.ts
@@ -55,7 +55,7 @@ describe('ExerciseChatbotComponent', () => {
 
         await TestBed.configureTestingModule({
             imports: [FormsModule, FontAwesomeModule, HttpClientTestingModule],
-            declarations: [ExerciseChatbotComponent, ChatbotPopupComponent, MockPipe(ArtemisTranslatePipe)],
+            declarations: [ExerciseChatbotComponent, MockPipe(ArtemisTranslatePipe)],
             providers: [
                 IrisHttpSessionService,
                 { provide: MatDialog, useValue: mockDialog },
@@ -99,6 +99,7 @@ describe('ExerciseChatbotComponent', () => {
             data: expect.objectContaining({
                 stateStore: stateStore,
             }),
+            scrollStrategy: {},
         });
         expect(component.buttonDisabled).toBeTrue();
     });

From dff7f77bc4cab9ee176e4346857e4b77456533ad Mon Sep 17 00:00:00 2001
From: Asli Aykan <asliaykan97@gmail.com>
Date: Thu, 22 Jun 2023 12:01:24 +0200
Subject: [PATCH 041/111] refactor

---
 .../exercise-chatwidget/exercise-chat-widget.component.ts       | 2 +-
 .../component/iris/ui/exercise-chat-widget.component.spec.ts    | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/main/webapp/app/iris/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.ts b/src/main/webapp/app/iris/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.ts
index 2ea5c0cca665..b35ad2b47109 100644
--- a/src/main/webapp/app/iris/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.ts
+++ b/src/main/webapp/app/iris/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.ts
@@ -206,7 +206,7 @@ export class ExerciseChatWidgetComponent implements OnInit, OnDestroy, AfterView
         }
     }
 
-    protected readonly ButtonType = ButtonType;
+    public ButtonType = ButtonType;
 
     onRowChange() {
         const textarea: HTMLTextAreaElement = this.messageTextarea.nativeElement;
diff --git a/src/test/javascript/spec/component/iris/ui/exercise-chat-widget.component.spec.ts b/src/test/javascript/spec/component/iris/ui/exercise-chat-widget.component.spec.ts
index 9ee8713e8b54..45b8398bfeb4 100644
--- a/src/test/javascript/spec/component/iris/ui/exercise-chat-widget.component.spec.ts
+++ b/src/test/javascript/spec/component/iris/ui/exercise-chat-widget.component.spec.ts
@@ -69,7 +69,7 @@ describe('ExerciseChatWidgetComponent', () => {
                 window.HTMLElement.prototype.scrollTo = jest.fn();
                 fixture = TestBed.createComponent(ExerciseChatWidgetComponent);
                 component = fixture.componentInstance;
-                component.buttonType = ButtonType.Primary;
+                component.ButtonType = ButtonType.PRIMARY;
                 fixture.detectChanges();
             });
     });

From db11c4d30a8e0162193b34edaf0eb954fae21496 Mon Sep 17 00:00:00 2001
From: Asli Aykan <asliaykan97@gmail.com>
Date: Thu, 22 Jun 2023 12:05:13 +0200
Subject: [PATCH 042/111] refactor

---
 .../component/iris/ui/exercise-chat-widget.component.spec.ts    | 2 --
 1 file changed, 2 deletions(-)

diff --git a/src/test/javascript/spec/component/iris/ui/exercise-chat-widget.component.spec.ts b/src/test/javascript/spec/component/iris/ui/exercise-chat-widget.component.spec.ts
index 45b8398bfeb4..1c48c866445c 100644
--- a/src/test/javascript/spec/component/iris/ui/exercise-chat-widget.component.spec.ts
+++ b/src/test/javascript/spec/component/iris/ui/exercise-chat-widget.component.spec.ts
@@ -22,7 +22,6 @@ import { MockSyncStorage } from '../../../helpers/mocks/service/mock-sync-storag
 import { MockHttpService } from '../../../helpers/mocks/service/mock-http.service';
 import { HttpClient } from '@angular/common/http';
 import { MockAccountService } from '../../../helpers/mocks/service/mock-account.service';
-import { ButtonType } from 'app/shared/components/button.component';
 
 describe('ExerciseChatWidgetComponent', () => {
     let component: ExerciseChatWidgetComponent;
@@ -69,7 +68,6 @@ describe('ExerciseChatWidgetComponent', () => {
                 window.HTMLElement.prototype.scrollTo = jest.fn();
                 fixture = TestBed.createComponent(ExerciseChatWidgetComponent);
                 component = fixture.componentInstance;
-                component.ButtonType = ButtonType.PRIMARY;
                 fixture.detectChanges();
             });
     });

From a82bf3212cb3c8872c93093b4cb648413afd02a6 Mon Sep 17 00:00:00 2001
From: Asli Aykan <asliaykan97@gmail.com>
Date: Thu, 22 Jun 2023 12:40:23 +0200
Subject: [PATCH 043/111] refactor

---
 .../exercise-chatwidget/exercise-chat-widget.component.html     | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/main/webapp/app/iris/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.html b/src/main/webapp/app/iris/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.html
index 4c23de37a93d..0e511b616199 100644
--- a/src/main/webapp/app/iris/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.html
+++ b/src/main/webapp/app/iris/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.html
@@ -22,7 +22,7 @@ <h3 class="header-start">
                     <fa-icon size="xs" [icon]="faRobot" style="padding-right: 5px"></fa-icon>
                     Iris
                     <a [routerLink]="'/aboutIris'" target="_blank">
-                        <fa-icon style="vertical-align: middle; padding-left: 3px; font-size: 13px" [icon]="faCircleInfo" class="header-icon"></fa-icon>
+                        <fa-icon style="cursor: pointer; vertical-align: middle; padding-left: 3px; font-size: 13px" [icon]="faCircleInfo" class="header-icon"></fa-icon>
                     </a>
                 </h3>
                 <div class="button-container">

From 08565b1b8fe0079860ec2979eacd731edadf4f0b Mon Sep 17 00:00:00 2001
From: Asli Aykan <asliaykan97@gmail.com>
Date: Thu, 22 Jun 2023 13:44:04 +0200
Subject: [PATCH 044/111] bug fix

---
 .../exercise-chatbot/exercise-chatbot.component.ts     |  4 ++--
 .../exercise-chat-widget.component.scss                | 10 ++++++++--
 2 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/src/main/webapp/app/iris/exercise-chatbot/exercise-chatbot.component.ts b/src/main/webapp/app/iris/exercise-chatbot/exercise-chatbot.component.ts
index 8a67a6db8d40..77b3a1021786 100644
--- a/src/main/webapp/app/iris/exercise-chatbot/exercise-chatbot.component.ts
+++ b/src/main/webapp/app/iris/exercise-chatbot/exercise-chatbot.component.ts
@@ -1,5 +1,5 @@
 import { faChevronDown, faCircle, faCommentDots } from '@fortawesome/free-solid-svg-icons';
-import { Component, HostListener, OnDestroy } from '@angular/core';
+import { Component, HostListener, OnDestroy, OnInit } from '@angular/core';
 import { MatDialog, MatDialogRef } from '@angular/material/dialog';
 import { ExerciseChatWidgetComponent } from 'app/iris/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component';
 import { Overlay } from '@angular/cdk/overlay';
@@ -18,7 +18,7 @@ import { Subscription } from 'rxjs';
     providers: [IrisStateStore, IrisWebsocketService, IrisSessionService],
     animations: [shakeAnimation({ anchor: 'shake', direction: '=>', duration: 700 })],
 })
-export class ExerciseChatbotComponent implements OnDestroy {
+export class ExerciseChatbotComponent implements OnInit, OnDestroy {
     public chatAccepted = false;
     public buttonDisabled = false;
     dialogRef: MatDialogRef<ExerciseChatWidgetComponent> | null = null;
diff --git a/src/main/webapp/app/iris/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.scss b/src/main/webapp/app/iris/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.scss
index 255285ad6d8c..79734650e52f 100644
--- a/src/main/webapp/app/iris/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.scss
+++ b/src/main/webapp/app/iris/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.scss
@@ -59,7 +59,7 @@
     --r: 13px; /* the radius */
     --t: 10px; /* the size of the tail */
 
-    width: fit-content;
+    max-width: 100%;
     margin-bottom: 5px;
     color: var(--bs-body-color);
     padding: 10px;
@@ -71,13 +71,16 @@
     background-color: var(--iris-client-chat-background);
     margin-right: var(--t);
     place-self: start;
+    overflow-wrap: break-word; /* Allow long messages to wrap within the bubble */
+    word-wrap: break-word;
+    word-break: break-word;
 }
 
 .bubble-right {
     --r: 13px; /* the radius */
     --t: 10px; /* the size of the tail */
 
-    width: fit-content;
+    max-width: 100%;
     margin-bottom: 5px;
     color: var(--bs-body-color);
     -webkit-mask: radial-gradient(var(--t) at var(--_d) 0, #0000 98%, #000 102%) var(--_d) 100% / calc(100% - var(--r)) var(--t) no-repeat,
@@ -90,6 +93,9 @@
     place-self: end;
     float: right;
     background-color: var(--iris-my-chat-background);
+    overflow-wrap: break-word; /* Allow long messages to wrap within the bubble */
+    word-wrap: break-word;
+    word-break: break-word;
 }
 
 .client-chat-error {

From d3e8405c439d59f894730eed285e2695ba73ef47 Mon Sep 17 00:00:00 2001
From: Ece Eren <aybikeceren@gmail.com>
Date: Thu, 22 Jun 2023 15:02:34 +0200
Subject: [PATCH 045/111] Codacy fix

---
 .../exercise-chatwidget/exercise-chat-widget.component.scss   | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/main/webapp/app/iris/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.scss b/src/main/webapp/app/iris/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.scss
index 255285ad6d8c..3bc514b73d95 100644
--- a/src/main/webapp/app/iris/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.scss
+++ b/src/main/webapp/app/iris/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.scss
@@ -66,7 +66,9 @@
     -webkit-mask: radial-gradient(var(--t) at var(--_d) 0, #0000 98%, #000 102%) var(--_d) 100% / calc(100% - var(--r)) var(--t) no-repeat,
         conic-gradient(at var(--r) var(--r), #000 75%, #0000 0) calc(var(--r) / -2) calc(var(--r) / -2) padding-box,
         radial-gradient(50% 50%, #000 98%, #0000 101%) 0 0 / var(--r) var(--r) space padding-box;
+
     --_d: 0%;
+
     border-left: var(--t) solid #0000;
     background-color: var(--iris-client-chat-background);
     margin-right: var(--t);
@@ -83,7 +85,9 @@
     -webkit-mask: radial-gradient(var(--t) at var(--_d) 0, #0000 98%, #000 102%) var(--_d) 100% / calc(100% - var(--r)) var(--t) no-repeat,
         conic-gradient(at var(--r) var(--r), #000 75%, #0000 0) calc(var(--r) / -2) calc(var(--r) / -2) padding-box,
         radial-gradient(50% 50%, #000 98%, #0000 101%) 0 0 / var(--r) var(--r) space padding-box;
+
     --_d: 100%;
+
     padding: 10px;
     border-right: var(--t) solid #0000;
     margin-left: var(--t);

From 2875ec288a6fc7eb526a130f412178a1ed5c31ab Mon Sep 17 00:00:00 2001
From: Ece Eren <aybikeceren@gmail.com>
Date: Thu, 22 Jun 2023 15:20:21 +0200
Subject: [PATCH 046/111] Change info button & code refactoring

---
 .../exercise-chat-widget.component.html       |  6 +++---
 .../exercise-chat-widget.component.scss       |  8 ++++++++
 .../exercise-chat-widget.component.ts         | 19 ++++---------------
 3 files changed, 15 insertions(+), 18 deletions(-)

diff --git a/src/main/webapp/app/iris/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.html b/src/main/webapp/app/iris/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.html
index 0e511b616199..45dc6b93cf5a 100644
--- a/src/main/webapp/app/iris/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.html
+++ b/src/main/webapp/app/iris/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.html
@@ -22,7 +22,7 @@ <h3 class="header-start">
                     <fa-icon size="xs" [icon]="faRobot" style="padding-right: 5px"></fa-icon>
                     Iris
                     <a [routerLink]="'/aboutIris'" target="_blank">
-                        <fa-icon style="cursor: pointer; vertical-align: middle; padding-left: 3px; font-size: 13px" [icon]="faCircleInfo" class="header-icon"></fa-icon>
+                        <fa-icon [icon]="faCircleInfo" class="info-button"></fa-icon>
                     </a>
                 </h3>
                 <div class="button-container">
@@ -41,7 +41,7 @@ <h3 class="header-start">
         </div>
 
         <!-- main chat section -->
-        <div class="chat-body" #chatBody (scroll)="onChatScroll()">
+        <div class="chat-body" #chatBody (scroll)="checkChatScroll()">
             <div class="p-chat" *ngIf="!userAccepted">
                 <div class="message-text">{{ 'artemisApp.exerciseChatbot.popUpMessage' | artemisTranslate }}</div>
                 <div class="button-container">
@@ -64,7 +64,7 @@ <h3 class="header-start">
                     </div>
                 </div>
             </div>
-            <div class="scroll-to-bottom" [hidden]="isScrolledToBottom" (click)="scrollToBottomOnClick()" #scrollArrow>
+            <div class="scroll-to-bottom" [hidden]="isScrolledToBottom" (click)="scrollToBottom('smooth')" #scrollArrow>
                 <fa-icon [icon]="faArrowDown"></fa-icon>
             </div>
             <div class="client-chat-error" *ngIf="error">
diff --git a/src/main/webapp/app/iris/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.scss b/src/main/webapp/app/iris/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.scss
index f8cd9c3faeee..197d1848bacf 100644
--- a/src/main/webapp/app/iris/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.scss
+++ b/src/main/webapp/app/iris/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.scss
@@ -47,6 +47,14 @@
     font-size: 16px;
 }
 
+.info-button {
+    cursor: pointer;
+    vertical-align: middle;
+    padding-left: 3px;
+    font-size: 13px;
+    color: var(--blue);
+}
+
 .chat-body {
     height: calc(100% - 100px);
     overflow-y: scroll;
diff --git a/src/main/webapp/app/iris/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.ts b/src/main/webapp/app/iris/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.ts
index b35ad2b47109..d090a2b76a01 100644
--- a/src/main/webapp/app/iris/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.ts
+++ b/src/main/webapp/app/iris/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.ts
@@ -40,14 +40,13 @@ export class ExerciseChatWidgetComponent implements OnInit, OnDestroy, AfterView
     dots = 1;
 
     userAccepted = false;
-    public firstName: string | undefined;
     isScrolledToBottom = true;
-    componentClass = 'chat-widget';
     rows = 1;
     fullSize = false;
     showChatWidget = true;
     widgetWidth = '330px';
     widgetHeight = '430px';
+    public ButtonType = ButtonType;
 
     constructor(
         private dialog: MatDialog,
@@ -151,15 +150,7 @@ export class ExerciseChatWidgetComponent implements OnInit, OnDestroy, AfterView
         this.userAccepted = true;
     }
 
-    scrollToBottomOnClick() {
-        const chatBody = this.chatBody?.nativeElement;
-        if (chatBody) {
-            chatBody.scrollTop = chatBody.scrollHeight;
-            this.isScrolledToBottom = true;
-        }
-    }
-
-    onChatScroll() {
+    checkChatScroll() {
         const chatBody = this.chatBody.nativeElement;
         const scrollHeight = chatBody.scrollHeight;
         const scrollTop = chatBody.scrollTop;
@@ -206,8 +197,6 @@ export class ExerciseChatWidgetComponent implements OnInit, OnDestroy, AfterView
         }
     }
 
-    public ButtonType = ButtonType;
-
     onRowChange() {
         const textarea: HTMLTextAreaElement = this.messageTextarea.nativeElement;
         const newRows = textarea.value.split('\n').length;
@@ -226,8 +215,8 @@ export class ExerciseChatWidgetComponent implements OnInit, OnDestroy, AfterView
         const scrollArrow: HTMLElement = this.scrollArrow.nativeElement;
         const lineHeight = parseInt(window.getComputedStyle(textarea).lineHeight);
         const rowHeight = lineHeight * newRows;
-        scrollArrow.style.bottom = `calc(10% + ${rowHeight}px)`;
-        chatBody.style.height = `calc(100% - ${rowHeight}px - 78px)`;
+        scrollArrow.style.bottom = `calc(11% + ${rowHeight}px)`;
+        chatBody.style.height = `calc(100% - ${rowHeight}px - 77px)`;
     }
 
     resetChatBodyHeight() {

From 9bc30cf565b20f6b245d09b0306f97837b4ea1bd Mon Sep 17 00:00:00 2001
From: Asli Aykan <asliaykan97@gmail.com>
Date: Fri, 23 Jun 2023 11:19:55 +0200
Subject: [PATCH 047/111] bug fix

---
 .../exercise-chat-widget.component.scss       | 30 +++++++------------
 1 file changed, 10 insertions(+), 20 deletions(-)

diff --git a/src/main/webapp/app/iris/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.scss b/src/main/webapp/app/iris/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.scss
index 197d1848bacf..fedb05be938c 100644
--- a/src/main/webapp/app/iris/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.scss
+++ b/src/main/webapp/app/iris/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.scss
@@ -63,7 +63,8 @@
     flex-direction: column;
 }
 
-.bubble-left {
+.bubble-left,
+.bubble-right {
     --r: 13px; /* the radius */
     --t: 10px; /* the size of the tail */
 
@@ -74,40 +75,29 @@
     -webkit-mask: radial-gradient(var(--t) at var(--_d) 0, #0000 98%, #000 102%) var(--_d) 100% / calc(100% - var(--r)) var(--t) no-repeat,
         conic-gradient(at var(--r) var(--r), #000 75%, #0000 0) calc(var(--r) / -2) calc(var(--r) / -2) padding-box,
         radial-gradient(50% 50%, #000 98%, #0000 101%) 0 0 / var(--r) var(--r) space padding-box;
+    overflow-wrap: break-word;
+    word-wrap: break-word;
+    word-break: break-word;
+    ::ng-deep p {
+        margin-bottom: 0;
+    }
+}
 
+.bubble-left {
     --_d: 0%;
-
     border-left: var(--t) solid #0000;
     background-color: var(--iris-client-chat-background);
     margin-right: var(--t);
     place-self: start;
-    overflow-wrap: break-word; /* Allow long messages to wrap within the bubble */
-    word-wrap: break-word;
-    word-break: break-word;
 }
 
 .bubble-right {
-    --r: 13px; /* the radius */
-    --t: 10px; /* the size of the tail */
-
-    max-width: 100%;
-    margin-bottom: 5px;
-    color: var(--bs-body-color);
-    -webkit-mask: radial-gradient(var(--t) at var(--_d) 0, #0000 98%, #000 102%) var(--_d) 100% / calc(100% - var(--r)) var(--t) no-repeat,
-        conic-gradient(at var(--r) var(--r), #000 75%, #0000 0) calc(var(--r) / -2) calc(var(--r) / -2) padding-box,
-        radial-gradient(50% 50%, #000 98%, #0000 101%) 0 0 / var(--r) var(--r) space padding-box;
-
     --_d: 100%;
-
-    padding: 10px;
     border-right: var(--t) solid #0000;
     margin-left: var(--t);
     place-self: end;
     float: right;
     background-color: var(--iris-my-chat-background);
-    overflow-wrap: break-word; /* Allow long messages to wrap within the bubble */
-    word-wrap: break-word;
-    word-break: break-word;
 }
 
 .client-chat-error {

From bfe0cec1260cedd8a259286752cbac01c734fa8b Mon Sep 17 00:00:00 2001
From: Asli Aykan <asliaykan97@gmail.com>
Date: Fri, 23 Jun 2023 11:27:19 +0200
Subject: [PATCH 048/111] Add new line


From b887f5643cf0b787ad6b0d474787f81531f4af27 Mon Sep 17 00:00:00 2001
From: Asli Aykan <asliaykan97@gmail.com>
Date: Fri, 23 Jun 2023 11:34:46 +0200
Subject: [PATCH 049/111] Add new line

---
 .../exercise-chatwidget/exercise-chat-widget.component.scss    | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/main/webapp/app/iris/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.scss b/src/main/webapp/app/iris/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.scss
index fedb05be938c..00fae580f5e5 100644
--- a/src/main/webapp/app/iris/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.scss
+++ b/src/main/webapp/app/iris/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.scss
@@ -72,7 +72,8 @@
     margin-bottom: 5px;
     color: var(--bs-body-color);
     padding: 10px;
-    -webkit-mask: radial-gradient(var(--t) at var(--_d) 0, #0000 98%, #000 102%) var(--_d) 100% / calc(100% - var(--r)) var(--t) no-repeat,
+    -webkit-mask:
+        radial-gradient(var(--t) at var(--_d) 0, #0000 98%, #000 102%) var(--_d) 100% / calc(100% - var(--r)) var(--t) no-repeat,
         conic-gradient(at var(--r) var(--r), #000 75%, #0000 0) calc(var(--r) / -2) calc(var(--r) / -2) padding-box,
         radial-gradient(50% 50%, #000 98%, #0000 101%) 0 0 / var(--r) var(--r) space padding-box;
     overflow-wrap: break-word;

From 97b8a738a6874fadb717e08d02d26e7c829234d3 Mon Sep 17 00:00:00 2001
From: Asli Aykan <asliaykan97@gmail.com>
Date: Fri, 23 Jun 2023 11:53:56 +0200
Subject: [PATCH 050/111] Add new line

---
 .../exercise-chatwidget/exercise-chat-widget.component.scss      | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/main/webapp/app/iris/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.scss b/src/main/webapp/app/iris/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.scss
index 00fae580f5e5..6cbe186cb69d 100644
--- a/src/main/webapp/app/iris/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.scss
+++ b/src/main/webapp/app/iris/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.scss
@@ -72,6 +72,7 @@
     margin-bottom: 5px;
     color: var(--bs-body-color);
     padding: 10px;
+    // prettier-ignore
     -webkit-mask:
         radial-gradient(var(--t) at var(--_d) 0, #0000 98%, #000 102%) var(--_d) 100% / calc(100% - var(--r)) var(--t) no-repeat,
         conic-gradient(at var(--r) var(--r), #000 75%, #0000 0) calc(var(--r) / -2) calc(var(--r) / -2) padding-box,

From e0708cd83523124fb88a9e83beb01a9023fc6181 Mon Sep 17 00:00:00 2001
From: Asli Aykan <asliaykan97@gmail.com>
Date: Fri, 23 Jun 2023 13:39:15 +0200
Subject: [PATCH 051/111] refactor

---
 .../exercise-chatwidget/exercise-chat-widget.component.scss      | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/main/webapp/app/iris/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.scss b/src/main/webapp/app/iris/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.scss
index 6cbe186cb69d..348881d163d3 100644
--- a/src/main/webapp/app/iris/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.scss
+++ b/src/main/webapp/app/iris/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.scss
@@ -199,7 +199,6 @@ pre {
     flex: 1;
     padding: 10px 0;
     background-color: #fff;
-    color: var(--bs-body-color);
     border: none;
     cursor: pointer;
 }

From 82903f8b0810ebe96dc29ab9c29766f4cbbc06f5 Mon Sep 17 00:00:00 2001
From: Ece Eren <aybikeceren@gmail.com>
Date: Sat, 24 Jun 2023 15:42:56 +0200
Subject: [PATCH 052/111] Disable text area when loading & user not accepted

---
 .../exercise-chatwidget/exercise-chat-widget.component.html      | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/main/webapp/app/iris/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.html b/src/main/webapp/app/iris/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.html
index 45dc6b93cf5a..032d50e4b2f5 100644
--- a/src/main/webapp/app/iris/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.html
+++ b/src/main/webapp/app/iris/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.html
@@ -75,6 +75,7 @@ <h3 class="header-start">
         <!-- input field section -->
         <div class="chat-input">
             <textarea
+                [disabled]="!userAccepted || isLoading"
                 [(ngModel)]="newMessageTextContent"
                 (ngModelChange)="onRowChange()"
                 type="text"

From 5cdce42f6ed451c1181f3b417e99171a213f2b83 Mon Sep 17 00:00:00 2001
From: Ece Eren <aybikeceren@gmail.com>
Date: Sat, 24 Jun 2023 17:58:27 +0200
Subject: [PATCH 053/111] Store chatbot size to use later --not complete

---
 package-lock.json                             | 20 ++++++++-----
 package.json                                  |  1 +
 .../exercise-chatbot.component.ts             |  5 ++++
 .../exercise-chat-widget.component.ts         | 28 +++++++++++++++----
 4 files changed, 42 insertions(+), 12 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 1eb369358f3b..72245c1fc07a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -47,6 +47,7 @@
                 "compare-versions": "5.0.3",
                 "core-js": "3.31.0",
                 "crypto-js": "4.1.1",
+                "css-element-queries": "^1.2.3",
                 "dayjs": "1.11.8",
                 "diff-match-patch-typescript": "1.0.8",
                 "dompurify": "3.0.3",
@@ -7373,9 +7374,9 @@
             }
         },
         "node_modules/ace-builds": {
-            "version": "1.22.1",
-            "resolved": "https://registry.npmjs.org/ace-builds/-/ace-builds-1.22.1.tgz",
-            "integrity": "sha512-o5RGTPBIiRxguWNors3pT6KuLqj0a2NvNLoqir7/2LLiFm34PJV3BMq4sl9kjPayo4+lmd99m6zAq+XPdhyHQA=="
+            "version": "1.22.0",
+            "resolved": "https://registry.npmjs.org/ace-builds/-/ace-builds-1.22.0.tgz",
+            "integrity": "sha512-7IlgBtb/A1qljFLB9Xz+Cuv3vILYHLpxE+9gpujoCzI1G0RpCPc1TKzoCbJ+IWIWtdtbJ0BdXKg3AsO3ZUJosw=="
         },
         "node_modules/acorn": {
             "version": "8.8.2",
@@ -8202,9 +8203,9 @@
             "peer": true
         },
         "node_modules/bootstrap": {
-            "version": "5.3.0",
-            "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.3.0.tgz",
-            "integrity": "sha512-UnBV3E3v4STVNQdms6jSGO2CvOkjUMdDAVR2V5N4uCMdaIkaQjbcEAMqRimDHIs4uqBYzDAKCQwCB+97tJgHQw==",
+            "version": "5.2.3",
+            "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.2.3.tgz",
+            "integrity": "sha512-cEKPM+fwb3cT8NzQZYEu4HilJ3anCrWqh3CHAok1p9jXqMPsPTBhU25fBckEJHJ/p+tTxTFTsFQGM+gaHpi3QQ==",
             "funding": [
                 {
                     "type": "github",
@@ -8216,7 +8217,7 @@
                 }
             ],
             "peerDependencies": {
-                "@popperjs/core": "^2.11.7"
+                "@popperjs/core": "^2.11.6"
             }
         },
         "node_modules/brace": {
@@ -9240,6 +9241,11 @@
                 "node": ">=4"
             }
         },
+        "node_modules/css-element-queries": {
+            "version": "1.2.3",
+            "resolved": "https://registry.npmjs.org/css-element-queries/-/css-element-queries-1.2.3.tgz",
+            "integrity": "sha512-QK9uovYmKTsV2GXWQiMOByVNrLn2qz6m3P7vWpOR4IdD6I3iXoDw5qtgJEN3Xq7gIbdHVKvzHjdAtcl+4Arc4Q=="
+        },
         "node_modules/css-loader": {
             "version": "6.7.3",
             "resolved": "https://registry.npmjs.org/css-loader/-/css-loader-6.7.3.tgz",
diff --git a/package.json b/package.json
index 82307aa93614..244242a01b01 100644
--- a/package.json
+++ b/package.json
@@ -50,6 +50,7 @@
         "compare-versions": "5.0.3",
         "core-js": "3.31.0",
         "crypto-js": "4.1.1",
+        "css-element-queries": "^1.2.3",
         "dayjs": "1.11.8",
         "diff-match-patch-typescript": "1.0.8",
         "dompurify": "3.0.3",
diff --git a/src/main/webapp/app/iris/exercise-chatbot/exercise-chatbot.component.ts b/src/main/webapp/app/iris/exercise-chatbot/exercise-chatbot.component.ts
index 77b3a1021786..9b239ca0bd06 100644
--- a/src/main/webapp/app/iris/exercise-chatbot/exercise-chatbot.component.ts
+++ b/src/main/webapp/app/iris/exercise-chatbot/exercise-chatbot.component.ts
@@ -27,6 +27,8 @@ export class ExerciseChatbotComponent implements OnInit, OnDestroy {
     hasNewMessages = false;
     private exerciseId: number;
     private stateSubscription: Subscription;
+    initialWidth = 330;
+    initialHeight = 430;
 
     // Icons
     faCircle = faCircle;
@@ -89,6 +91,9 @@ export class ExerciseChatbotComponent implements OnInit, OnDestroy {
                 position: { bottom: '0px', right: '0px' },
                 data: {
                     stateStore: this.stateStore,
+                    widgetWidth: localStorage.getItem('widgetWidth') || `${this.initialWidth}px`,
+                    widgetHeight: localStorage.getItem('widgetHeight') || `${this.initialHeight}px`,
+                    fullSize: localStorage.getItem('fullSize') === 'true',
                 },
             });
             this.dialogRef.afterClosed().subscribe(() => {
diff --git a/src/main/webapp/app/iris/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.ts b/src/main/webapp/app/iris/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.ts
index d090a2b76a01..efd6a2a30aa1 100644
--- a/src/main/webapp/app/iris/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.ts
+++ b/src/main/webapp/app/iris/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.ts
@@ -12,6 +12,7 @@ import { IrisHttpMessageService } from 'app/iris/http-message.service';
 import { IrisClientMessage, IrisMessage, IrisSender } from 'app/entities/iris/iris-message.model';
 import { IrisMessageContent, IrisMessageContentType } from 'app/entities/iris/iris-content-type.model';
 import { Subscription } from 'rxjs';
+import { ResizeSensor } from 'css-element-queries';
 
 @Component({
     selector: 'jhi-exercise-chat-widget',
@@ -42,10 +43,14 @@ export class ExerciseChatWidgetComponent implements OnInit, OnDestroy, AfterView
     userAccepted = false;
     isScrolledToBottom = true;
     rows = 1;
-    fullSize = false;
     showChatWidget = true;
-    widgetWidth = '330px';
-    widgetHeight = '430px';
+    initialWidth = 330;
+    initialHeight = 430;
+    fullWidth = '95vw';
+    fullHeight = '85vh';
+    fullSize = localStorage.getItem('fullSize') === 'true';
+    widgetWidth = localStorage.getItem('widgetWidth') || `${this.initialWidth}px`;
+    widgetHeight = localStorage.getItem('widgetHeight') || `${this.initialHeight}px`;
     public ButtonType = ButtonType;
 
     constructor(
@@ -96,12 +101,19 @@ export class ExerciseChatWidgetComponent implements OnInit, OnDestroy, AfterView
     }
 
     ngAfterViewInit() {
+        console.log('hey');
         this.unreadMessageIndex = this.messages.length === 0 || this.numNewMessages === 0 ? -1 : this.messages.length - this.numNewMessages;
         if (this.numNewMessages > 0) {
             this.scrollToUnread();
         } else {
             this.scrollToBottom('auto');
         }
+
+        const chatWidget: HTMLElement = this.chatWidget.nativeElement; // element you want to watch
+        new ResizeSensor(chatWidget, () => {
+            localStorage.setItem('widgetWidth', chatWidget.style.width);
+            localStorage.setItem('widgetHeight', chatWidget.style.height);
+        });
     }
 
     ngOnDestroy() {
@@ -161,8 +173,8 @@ export class ExerciseChatWidgetComponent implements OnInit, OnDestroy, AfterView
     resetScreen(resetType: string) {
         setTimeout(() => {
             this.showChatWidget = false;
-            this.widgetWidth = resetType == 'maximize' ? '95vw' : '330px';
-            this.widgetHeight = resetType == 'maximize' ? '85vh' : '430px';
+            this.widgetWidth = resetType == 'maximize' ? this.fullWidth : `${this.initialWidth}px`;
+            this.widgetHeight = resetType == 'maximize' ? this.fullHeight : `${this.initialHeight}px`;
         }, 50);
         setTimeout(() => {
             this.scrollToBottom('auto');
@@ -174,11 +186,17 @@ export class ExerciseChatWidgetComponent implements OnInit, OnDestroy, AfterView
 
     maximizeScreen() {
         this.resetScreen('maximize');
+        localStorage.setItem('widgetWidth', this.fullWidth);
+        localStorage.setItem('widgetHeight', this.fullHeight);
+        localStorage.setItem('fullSize', 'true');
         this.fullSize = true;
     }
 
     minimizeScreen() {
         this.resetScreen('minimize');
+        localStorage.setItem('widgetWidth', `${this.initialWidth}px`);
+        localStorage.setItem('widgetHeight', `${this.initialHeight}px`);
+        localStorage.setItem('fullSize', 'false');
         this.fullSize = false;
     }
 

From 0b527ece53eef2280757e1fd2120cfd95d3188d4 Mon Sep 17 00:00:00 2001
From: Ece Eren <aybikeceren@gmail.com>
Date: Sun, 25 Jun 2023 23:17:53 +0200
Subject: [PATCH 054/111] Header made clickable & button color changed

---
 .../exercise-chat-widget.component.html             | 10 ++--------
 .../exercise-chat-widget.component.scss             | 13 -------------
 2 files changed, 2 insertions(+), 21 deletions(-)

diff --git a/src/main/webapp/app/iris/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.html b/src/main/webapp/app/iris/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.html
index 032d50e4b2f5..c18503f04275 100644
--- a/src/main/webapp/app/iris/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.html
+++ b/src/main/webapp/app/iris/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.html
@@ -7,7 +7,7 @@
         class="chat-widget"
         #chatWidget
         ngDraggable
-        [handle]="chatBody"
+        [handle]="chatWidget"
         ngResizable
         rzHandles="all"
         [rzMinWidth]="250"
@@ -86,13 +86,7 @@ <h3 class="header-start">
                 placeholder="{{ 'artemisApp.exerciseChatbot.inputMessage' | artemisTranslate }}"
                 #messageTextarea
             ></textarea>
-            <jhi-button
-                [disabled]="!userAccepted || isLoading"
-                [btnType]="ButtonType.SECONDARY"
-                [icon]="faPaperPlane"
-                (onClick)="onSend()"
-                style="margin-bottom: auto"
-            ></jhi-button>
+            <jhi-button [disabled]="!userAccepted || isLoading" [btnType]="ButtonType.SUCCESS" [icon]="faPaperPlane" (onClick)="onSend()" style="margin-bottom: auto"></jhi-button>
         </div>
     </div>
 </div>
diff --git a/src/main/webapp/app/iris/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.scss b/src/main/webapp/app/iris/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.scss
index 348881d163d3..43382f9ee03b 100644
--- a/src/main/webapp/app/iris/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.scss
+++ b/src/main/webapp/app/iris/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.scss
@@ -136,19 +136,6 @@ pre {
     resize: none;
 }
 
-.btn-circle {
-    width: 40px;
-    height: 40px;
-    border-radius: 50%;
-    background-color: var(--iris-btn-circle);
-    border: none;
-}
-
-.btn-circle:hover,
-.btn-circle:active {
-    background-color: var(--iris-btn-circle-hover);
-}
-
 @keyframes blink {
     0% {
         opacity: 1;

From 269e203ce7e91f29e19610b63be4ea123ff806ea Mon Sep 17 00:00:00 2001
From: Ece Eren <aybikeceren@gmail.com>
Date: Sun, 25 Jun 2023 23:55:38 +0200
Subject: [PATCH 055/111] Store chatbot size to use later --completed

---
 .../exercise-chat-widget.component.ts         | 31 +++++++++++--------
 1 file changed, 18 insertions(+), 13 deletions(-)

diff --git a/src/main/webapp/app/iris/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.ts b/src/main/webapp/app/iris/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.ts
index efd6a2a30aa1..39d5f2ddd868 100644
--- a/src/main/webapp/app/iris/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.ts
+++ b/src/main/webapp/app/iris/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.ts
@@ -13,6 +13,7 @@ import { IrisClientMessage, IrisMessage, IrisSender } from 'app/entities/iris/ir
 import { IrisMessageContent, IrisMessageContentType } from 'app/entities/iris/iris-content-type.model';
 import { Subscription } from 'rxjs';
 import { ResizeSensor } from 'css-element-queries';
+import { Overlay } from '@angular/cdk/overlay';
 
 @Component({
     selector: 'jhi-exercise-chat-widget',
@@ -60,6 +61,7 @@ export class ExerciseChatWidgetComponent implements OnInit, OnDestroy, AfterView
         private accountService: AccountService,
         @Inject(MAT_DIALOG_DATA) public data: any,
         private httpMessageService: IrisHttpMessageService,
+        private overlay: Overlay,
     ) {
         this.stateStore = data.stateStore;
     }
@@ -170,34 +172,37 @@ export class ExerciseChatWidgetComponent implements OnInit, OnDestroy, AfterView
         this.isScrolledToBottom = scrollHeight - scrollTop === clientHeight;
     }
 
-    resetScreen(resetType: string) {
+    resetScreen() {
         setTimeout(() => {
-            this.showChatWidget = false;
-            this.widgetWidth = resetType == 'maximize' ? this.fullWidth : `${this.initialWidth}px`;
-            this.widgetHeight = resetType == 'maximize' ? this.fullHeight : `${this.initialHeight}px`;
+            this.dialog.closeAll();
         }, 50);
         setTimeout(() => {
-            this.scrollToBottom('auto');
-        }, 100);
-        setTimeout(() => {
-            this.showChatWidget = true;
-        }, 100);
+            this.dialog.open(ExerciseChatWidgetComponent, {
+                hasBackdrop: false,
+                scrollStrategy: this.overlay.scrollStrategies.noop(),
+                position: { bottom: '0px', right: '0px' },
+                data: {
+                    stateStore: this.stateStore,
+                    widgetWidth: localStorage.getItem('widgetWidth') || `${this.initialWidth}px`,
+                    widgetHeight: localStorage.getItem('widgetHeight') || `${this.initialHeight}px`,
+                    fullSize: localStorage.getItem('fullSize') === 'true',
+                },
+            });
+        }, 50);
     }
 
     maximizeScreen() {
-        this.resetScreen('maximize');
+        this.resetScreen();
         localStorage.setItem('widgetWidth', this.fullWidth);
         localStorage.setItem('widgetHeight', this.fullHeight);
         localStorage.setItem('fullSize', 'true');
-        this.fullSize = true;
     }
 
     minimizeScreen() {
-        this.resetScreen('minimize');
+        this.resetScreen();
         localStorage.setItem('widgetWidth', `${this.initialWidth}px`);
         localStorage.setItem('widgetHeight', `${this.initialHeight}px`);
         localStorage.setItem('fullSize', 'false');
-        this.fullSize = false;
     }
 
     handleKey(event: KeyboardEvent): void {

From 5f3c207a7d7c9690ae9f469f48817f1480921b24 Mon Sep 17 00:00:00 2001
From: Asli Aykan <asliaykan97@gmail.com>
Date: Mon, 26 Jun 2023 02:16:34 +0200
Subject: [PATCH 056/111] multiline continued (not complete)

---
 .../exercise-chat-widget.component.html       |  2 ++
 .../exercise-chat-widget.component.ts         | 23 +++++++++++++++++++
 2 files changed, 25 insertions(+)

diff --git a/src/main/webapp/app/iris/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.html b/src/main/webapp/app/iris/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.html
index c18503f04275..f81145ffc9ec 100644
--- a/src/main/webapp/app/iris/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.html
+++ b/src/main/webapp/app/iris/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.html
@@ -77,6 +77,8 @@ <h3 class="header-start">
             <textarea
                 [disabled]="!userAccepted || isLoading"
                 [(ngModel)]="newMessageTextContent"
+                (input)="onInput()"
+                (paste)="onPaste($event)"
                 (ngModelChange)="onRowChange()"
                 type="text"
                 rows="1"
diff --git a/src/main/webapp/app/iris/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.ts b/src/main/webapp/app/iris/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.ts
index 39d5f2ddd868..bde4441709c6 100644
--- a/src/main/webapp/app/iris/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.ts
+++ b/src/main/webapp/app/iris/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.ts
@@ -220,6 +220,29 @@ export class ExerciseChatWidgetComponent implements OnInit, OnDestroy, AfterView
         }
     }
 
+    onInput() {
+        this.adjustTextareaRows();
+    }
+
+    onPaste(event: ClipboardEvent) {
+        setTimeout(() => {
+            this.adjustTextareaRows();
+        }, 0);
+    }
+
+    adjustTextareaRows() {
+        const textarea: HTMLTextAreaElement = this.messageTextarea.nativeElement;
+        textarea.style.height = 'auto'; // Reset the height to auto
+        const lineHeight = parseInt(getComputedStyle(textarea).lineHeight, 10);
+        const maxRows = 3;
+        const maxHeight = lineHeight * maxRows;
+
+        textarea.style.height = `${Math.min(textarea.scrollHeight, maxHeight)}px`;
+
+        if (Math.min(textarea.scrollHeight, maxHeight) / lineHeight > 2) this.adjustChatBodyHeight(Math.min(textarea.scrollHeight, maxHeight) / lineHeight);
+        this.onRowChange();
+    }
+
     onRowChange() {
         const textarea: HTMLTextAreaElement = this.messageTextarea.nativeElement;
         const newRows = textarea.value.split('\n').length;

From 4a1a34cd1c54bfc546dbb51b593dfc8c914aac52 Mon Sep 17 00:00:00 2001
From: Ece Eren <aybikeceren@gmail.com>
Date: Tue, 27 Jun 2023 00:45:19 +0200
Subject: [PATCH 057/111] Header draggable fix

---
 .../exercise-chatwidget/exercise-chat-widget.component.html     | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/main/webapp/app/iris/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.html b/src/main/webapp/app/iris/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.html
index f81145ffc9ec..819d7ec5e6bb 100644
--- a/src/main/webapp/app/iris/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.html
+++ b/src/main/webapp/app/iris/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.html
@@ -7,7 +7,7 @@
         class="chat-widget"
         #chatWidget
         ngDraggable
-        [handle]="chatWidget"
+        [handle]="chatBody"
         ngResizable
         rzHandles="all"
         [rzMinWidth]="250"

From 856565b73dd7acddd6d880822ffb2810cb690e55 Mon Sep 17 00:00:00 2001
From: Ece Eren <aybikeceren@gmail.com>
Date: Tue, 27 Jun 2023 01:24:44 +0200
Subject: [PATCH 058/111] Refactoring package.json

---
 package-lock.json                              | 18 +++++++++---------
 package.json                                   |  4 ++--
 .../exercise-chat-widget.component.ts          |  1 -
 3 files changed, 11 insertions(+), 12 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 72245c1fc07a..49a9f2edfa71 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -39,10 +39,10 @@
                 "@sentry/types": "7.55.2",
                 "@swimlane/ngx-charts": "20.4.1",
                 "@swimlane/ngx-graph": "8.0.3",
-                "ace-builds": "1.22.0",
+                "ace-builds": "1.22.1",
                 "angular-animations": "^0.11.0",
                 "angular2-draggable": "^16.0.0",
-                "bootstrap": "5.2.3",
+                "bootstrap": "5.3.0",
                 "brace": "0.11.1",
                 "compare-versions": "5.0.3",
                 "core-js": "3.31.0",
@@ -7374,9 +7374,9 @@
             }
         },
         "node_modules/ace-builds": {
-            "version": "1.22.0",
-            "resolved": "https://registry.npmjs.org/ace-builds/-/ace-builds-1.22.0.tgz",
-            "integrity": "sha512-7IlgBtb/A1qljFLB9Xz+Cuv3vILYHLpxE+9gpujoCzI1G0RpCPc1TKzoCbJ+IWIWtdtbJ0BdXKg3AsO3ZUJosw=="
+            "version": "1.22.1",
+            "resolved": "https://registry.npmjs.org/ace-builds/-/ace-builds-1.22.1.tgz",
+            "integrity": "sha512-o5RGTPBIiRxguWNors3pT6KuLqj0a2NvNLoqir7/2LLiFm34PJV3BMq4sl9kjPayo4+lmd99m6zAq+XPdhyHQA=="
         },
         "node_modules/acorn": {
             "version": "8.8.2",
@@ -8203,9 +8203,9 @@
             "peer": true
         },
         "node_modules/bootstrap": {
-            "version": "5.2.3",
-            "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.2.3.tgz",
-            "integrity": "sha512-cEKPM+fwb3cT8NzQZYEu4HilJ3anCrWqh3CHAok1p9jXqMPsPTBhU25fBckEJHJ/p+tTxTFTsFQGM+gaHpi3QQ==",
+            "version": "5.3.0",
+            "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.3.0.tgz",
+            "integrity": "sha512-UnBV3E3v4STVNQdms6jSGO2CvOkjUMdDAVR2V5N4uCMdaIkaQjbcEAMqRimDHIs4uqBYzDAKCQwCB+97tJgHQw==",
             "funding": [
                 {
                     "type": "github",
@@ -8217,7 +8217,7 @@
                 }
             ],
             "peerDependencies": {
-                "@popperjs/core": "^2.11.6"
+                "@popperjs/core": "^2.11.7"
             }
         },
         "node_modules/brace": {
diff --git a/package.json b/package.json
index 244242a01b01..0ae469143b21 100644
--- a/package.json
+++ b/package.json
@@ -42,10 +42,10 @@
         "@sentry/types": "7.55.2",
         "@swimlane/ngx-charts": "20.4.1",
         "@swimlane/ngx-graph": "8.0.3",
-        "ace-builds": "1.22.0",
+        "ace-builds": "1.22.1",
         "angular-animations": "^0.11.0",
         "angular2-draggable": "^16.0.0",
-        "bootstrap": "5.2.3",
+        "bootstrap": "5.3.0",
         "brace": "0.11.1",
         "compare-versions": "5.0.3",
         "core-js": "3.31.0",
diff --git a/src/main/webapp/app/iris/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.ts b/src/main/webapp/app/iris/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.ts
index bde4441709c6..6872bb3ae92c 100644
--- a/src/main/webapp/app/iris/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.ts
+++ b/src/main/webapp/app/iris/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.ts
@@ -103,7 +103,6 @@ export class ExerciseChatWidgetComponent implements OnInit, OnDestroy, AfterView
     }
 
     ngAfterViewInit() {
-        console.log('hey');
         this.unreadMessageIndex = this.messages.length === 0 || this.numNewMessages === 0 ? -1 : this.messages.length - this.numNewMessages;
         if (this.numNewMessages > 0) {
             this.scrollToUnread();

From 75edeb8649d4249dce53a3592c84820d77b0afac Mon Sep 17 00:00:00 2001
From: Ece Eren <aybikeceren@gmail.com>
Date: Tue, 27 Jun 2023 22:16:19 +0200
Subject: [PATCH 059/111] About Iris path change

---
 src/main/webapp/app/app-routing.module.ts                       | 2 +-
 .../exercise-chatwidget/exercise-chat-widget.component.html     | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/main/webapp/app/app-routing.module.ts b/src/main/webapp/app/app-routing.module.ts
index bc75457ec927..0a2dc6a4b87d 100644
--- a/src/main/webapp/app/app-routing.module.ts
+++ b/src/main/webapp/app/app-routing.module.ts
@@ -122,7 +122,7 @@ const LAYOUT_ROUTES: Routes = [navbarRoute, ...errorRoute];
                     loadChildren: () => import('./lti/lti.module').then((m) => m.ArtemisLtiModule),
                 },
                 {
-                    path: 'aboutIris',
+                    path: 'about-iris',
                     component: AboutIrisComponent,
                     pathMatch: 'full',
                 },
diff --git a/src/main/webapp/app/iris/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.html b/src/main/webapp/app/iris/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.html
index 819d7ec5e6bb..e341fcd5c2d4 100644
--- a/src/main/webapp/app/iris/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.html
+++ b/src/main/webapp/app/iris/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.html
@@ -21,7 +21,7 @@
                 <h3 class="header-start">
                     <fa-icon size="xs" [icon]="faRobot" style="padding-right: 5px"></fa-icon>
                     Iris
-                    <a [routerLink]="'/aboutIris'" target="_blank">
+                    <a [routerLink]="'/about-iris'" target="_blank">
                         <fa-icon [icon]="faCircleInfo" class="info-button"></fa-icon>
                     </a>
                 </h3>

From 52d3b6937b6278065ba018f7af1d17ddbd54a3b4 Mon Sep 17 00:00:00 2001
From: Ece Eren <aybikeceren@gmail.com>
Date: Tue, 27 Jun 2023 22:39:17 +0200
Subject: [PATCH 060/111] Resizable css file removed from the root

---
 angular.json                                                    | 1 -
 .../app/iris/exercise-chatbot/exercise-chatbot.component.ts     | 2 +-
 2 files changed, 1 insertion(+), 2 deletions(-)

diff --git a/angular.json b/angular.json
index 96e258bb18c9..d951be6d5ddf 100644
--- a/angular.json
+++ b/angular.json
@@ -100,7 +100,6 @@
               }
             ],
             "styles": [
-                "node_modules/angular2-draggable/css/resizable.min.css",
               "src/main/webapp/content/scss/themes/theme-default.scss",
               {
                 "bundleName": "theme-dark",
diff --git a/src/main/webapp/app/iris/exercise-chatbot/exercise-chatbot.component.ts b/src/main/webapp/app/iris/exercise-chatbot/exercise-chatbot.component.ts
index 9b239ca0bd06..ac1418c38ea2 100644
--- a/src/main/webapp/app/iris/exercise-chatbot/exercise-chatbot.component.ts
+++ b/src/main/webapp/app/iris/exercise-chatbot/exercise-chatbot.component.ts
@@ -14,7 +14,7 @@ import { Subscription } from 'rxjs';
 @Component({
     selector: 'jhi-exercise-chatbot',
     templateUrl: './exercise-chatbot.component.html',
-    styleUrls: ['./exercise-chatbot.component.scss'],
+    styleUrls: ['./exercise-chatbot.component.scss', '../../../../../../node_modules/angular2-draggable/css/resizable.min.css'],
     providers: [IrisStateStore, IrisWebsocketService, IrisSessionService],
     animations: [shakeAnimation({ anchor: 'shake', direction: '=>', duration: 700 })],
 })

From 42eb56533dcf9e69329d6ca65794af6425e794f1 Mon Sep 17 00:00:00 2001
From: Ece Eren <aybikeceren@gmail.com>
Date: Tue, 27 Jun 2023 23:17:48 +0200
Subject: [PATCH 061/111] Multiline whitespace problem fixed

---
 .../exercise-chat-widget.component.ts               | 13 ++++++++-----
 1 file changed, 8 insertions(+), 5 deletions(-)

diff --git a/src/main/webapp/app/iris/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.ts b/src/main/webapp/app/iris/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.ts
index 6872bb3ae92c..652c9a1ab44f 100644
--- a/src/main/webapp/app/iris/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.ts
+++ b/src/main/webapp/app/iris/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.ts
@@ -223,7 +223,7 @@ export class ExerciseChatWidgetComponent implements OnInit, OnDestroy, AfterView
         this.adjustTextareaRows();
     }
 
-    onPaste(event: ClipboardEvent) {
+    onPaste() {
         setTimeout(() => {
             this.adjustTextareaRows();
         }, 0);
@@ -238,8 +238,7 @@ export class ExerciseChatWidgetComponent implements OnInit, OnDestroy, AfterView
 
         textarea.style.height = `${Math.min(textarea.scrollHeight, maxHeight)}px`;
 
-        if (Math.min(textarea.scrollHeight, maxHeight) / lineHeight > 2) this.adjustChatBodyHeight(Math.min(textarea.scrollHeight, maxHeight) / lineHeight);
-        this.onRowChange();
+        this.adjustChatBodyHeight(Math.min(textarea.scrollHeight, maxHeight) / lineHeight);
     }
 
     onRowChange() {
@@ -260,8 +259,12 @@ export class ExerciseChatWidgetComponent implements OnInit, OnDestroy, AfterView
         const scrollArrow: HTMLElement = this.scrollArrow.nativeElement;
         const lineHeight = parseInt(window.getComputedStyle(textarea).lineHeight);
         const rowHeight = lineHeight * newRows;
-        scrollArrow.style.bottom = `calc(11% + ${rowHeight}px)`;
-        chatBody.style.height = `calc(100% - ${rowHeight}px - 77px)`;
+        setTimeout(() => {
+            scrollArrow.style.bottom = `calc(11% + ${rowHeight}px)`;
+        }, 10);
+        setTimeout(() => {
+            chatBody.style.height = `calc(100% - ${rowHeight}px - 64px)`;
+        }, 10);
     }
 
     resetChatBodyHeight() {

From c9761b127a1ee62c0fb74eead8844a95e4b00184 Mon Sep 17 00:00:00 2001
From: Ece Eren <aybikeceren@gmail.com>
Date: Tue, 27 Jun 2023 23:19:11 +0200
Subject: [PATCH 062/111] Remove unused event

---
 .../exercise-chatwidget/exercise-chat-widget.component.html     | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/main/webapp/app/iris/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.html b/src/main/webapp/app/iris/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.html
index e341fcd5c2d4..5576e6139e0f 100644
--- a/src/main/webapp/app/iris/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.html
+++ b/src/main/webapp/app/iris/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.html
@@ -78,7 +78,7 @@ <h3 class="header-start">
                 [disabled]="!userAccepted || isLoading"
                 [(ngModel)]="newMessageTextContent"
                 (input)="onInput()"
-                (paste)="onPaste($event)"
+                (paste)="onPaste()"
                 (ngModelChange)="onRowChange()"
                 type="text"
                 rows="1"

From 98c869c41b8ceb248e7816af69ed0ef83c12f8cf Mon Sep 17 00:00:00 2001
From: Asli Aykan <asliaykan97@gmail.com>
Date: Mon, 3 Jul 2023 00:20:40 +0200
Subject: [PATCH 063/111] refactor

---
 .../exercise-chatwidget/exercise-chat-widget.component.ts       | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/main/webapp/app/iris/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.ts b/src/main/webapp/app/iris/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.ts
index e9bc26832183..3d8626dfd99e 100644
--- a/src/main/webapp/app/iris/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.ts
+++ b/src/main/webapp/app/iris/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.ts
@@ -1,4 +1,4 @@
-import { faArrowDown, faCircle, faCircleInfo, faCompress, faExpand, faPaperPlane, faRobot, faThumbsDown, faXmark } from '@fortawesome/free-solid-svg-icons';
+import { faArrowDown, faCircle, faCircleInfo, faCompress, faExpand, faPaperPlane, faRobot, faThumbsDown, faThumbsUp, faXmark } from '@fortawesome/free-solid-svg-icons';
 import { ActivatedRoute } from '@angular/router';
 import { LocalStorageService } from 'ngx-webstorage';
 import { AccountService } from 'app/core/auth/account.service';

From cfb84ac542e5b9f1dcecf72b0a3c7e9d11e55315 Mon Sep 17 00:00:00 2001
From: Ece Eren <aybikeceren@gmail.com>
Date: Mon, 3 Jul 2023 22:57:00 +0300
Subject: [PATCH 064/111] Resizable.css added back to angular.json

---
 angular.json                                                    | 1 +
 .../app/iris/exercise-chatbot/exercise-chatbot.component.ts     | 2 +-
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/angular.json b/angular.json
index d951be6d5ddf..c8eab8be4749 100644
--- a/angular.json
+++ b/angular.json
@@ -101,6 +101,7 @@
             ],
             "styles": [
               "src/main/webapp/content/scss/themes/theme-default.scss",
+                "node_modules/angular2-draggable/css/resizable.min.css",
               {
                 "bundleName": "theme-dark",
                 "input": "src/main/webapp/content/scss/themes/theme-dark.scss",
diff --git a/src/main/webapp/app/iris/exercise-chatbot/exercise-chatbot.component.ts b/src/main/webapp/app/iris/exercise-chatbot/exercise-chatbot.component.ts
index ac1418c38ea2..9b239ca0bd06 100644
--- a/src/main/webapp/app/iris/exercise-chatbot/exercise-chatbot.component.ts
+++ b/src/main/webapp/app/iris/exercise-chatbot/exercise-chatbot.component.ts
@@ -14,7 +14,7 @@ import { Subscription } from 'rxjs';
 @Component({
     selector: 'jhi-exercise-chatbot',
     templateUrl: './exercise-chatbot.component.html',
-    styleUrls: ['./exercise-chatbot.component.scss', '../../../../../../node_modules/angular2-draggable/css/resizable.min.css'],
+    styleUrls: ['./exercise-chatbot.component.scss'],
     providers: [IrisStateStore, IrisWebsocketService, IrisSessionService],
     animations: [shakeAnimation({ anchor: 'shake', direction: '=>', duration: 700 })],
 })

From e47f3eb81a2de95f6798b2ffde5fb4f80b2a3787 Mon Sep 17 00:00:00 2001
From: Asli Aykan <asliaykan97@gmail.com>
Date: Tue, 4 Jul 2023 09:35:55 +0200
Subject: [PATCH 065/111] refactor + client tests

---
 .../exercise-chat-widget.component.html       |  4 +-
 .../exercise-chat-widget.component.ts         |  1 +
 .../ui/exercise-chat-widget.component.spec.ts | 59 +++++++++++++++++++
 3 files changed, 62 insertions(+), 2 deletions(-)

diff --git a/src/main/webapp/app/iris/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.html b/src/main/webapp/app/iris/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.html
index 1c230f574f53..8d5eec74de7c 100644
--- a/src/main/webapp/app/iris/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.html
+++ b/src/main/webapp/app/iris/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.html
@@ -7,7 +7,7 @@
         class="chat-widget"
         #chatWidget
         ngDraggable
-        [handle]="chatBody"
+        [handle]="client"
         ngResizable
         rzHandles="all"
         [rzMinWidth]="250"
@@ -16,7 +16,7 @@
         [rzMaxHeight]="700"
     >
         <!-- client -->
-        <div class="client">
+        <div class="client" #client>
             <div class="chat-header">
                 <h3 class="header-start">
                     <fa-icon size="xs" [icon]="faRobot" style="padding-right: 5px"></fa-icon>
diff --git a/src/main/webapp/app/iris/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.ts b/src/main/webapp/app/iris/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.ts
index 3d8626dfd99e..2534700ee998 100644
--- a/src/main/webapp/app/iris/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.ts
+++ b/src/main/webapp/app/iris/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.ts
@@ -121,6 +121,7 @@ export class ExerciseChatWidgetComponent implements OnInit, OnDestroy, AfterView
 
     ngOnDestroy() {
         this.stateSubscription.unsubscribe();
+        this.closeChat();
     }
 
     animateDots() {
diff --git a/src/test/javascript/spec/component/iris/ui/exercise-chat-widget.component.spec.ts b/src/test/javascript/spec/component/iris/ui/exercise-chat-widget.component.spec.ts
index 4e61dfd4bde0..cf8dca98cab0 100644
--- a/src/test/javascript/spec/component/iris/ui/exercise-chat-widget.component.spec.ts
+++ b/src/test/javascript/spec/component/iris/ui/exercise-chat-widget.component.spec.ts
@@ -355,4 +355,63 @@ describe('ExerciseChatWidgetComponent', () => {
         // then
         expect(stateStore.dispatch).toHaveBeenCalledWith(new NumNewMessagesResetAction());
     });
+
+    it('should call resetScreen and update localStorage for maximizeScreen', () => {
+        const localStorageSetItemSpy = jest.spyOn(localStorage, 'setItem');
+
+        component.maximizeScreen();
+
+        expect(localStorageSetItemSpy).toHaveBeenCalledTimes(3);
+        expect(localStorageSetItemSpy).toHaveBeenCalledWith('widgetWidth', component.fullWidth);
+        expect(localStorageSetItemSpy).toHaveBeenCalledWith('widgetHeight', component.fullHeight);
+        expect(localStorageSetItemSpy).toHaveBeenCalledWith('fullSize', 'true');
+    });
+
+    it('should call resetScreen and update localStorage for minimizeScreen', () => {
+        const localStorageSetItemSpy = jest.spyOn(localStorage, 'setItem');
+
+        component.minimizeScreen();
+
+        expect(localStorageSetItemSpy).toHaveBeenCalledTimes(6);
+        expect(localStorageSetItemSpy).toHaveBeenCalledWith('widgetWidth', `${component.initialWidth}px`);
+        expect(localStorageSetItemSpy).toHaveBeenCalledWith('widgetHeight', `${component.initialHeight}px`);
+        expect(localStorageSetItemSpy).toHaveBeenCalledWith('fullSize', 'false');
+    });
+
+    it('should call onSend if Enter key is pressed without Shift key', () => {
+        const event = new KeyboardEvent('keyup', { key: 'Enter', shiftKey: false });
+        jest.spyOn(component, 'onSend');
+
+        jest.spyOn(event, 'preventDefault');
+
+        component.handleKey(event);
+
+        expect(event.preventDefault).toHaveBeenCalled();
+        expect(component.onSend).toHaveBeenCalled();
+    });
+
+    it('should remove selected text and move cursor position if Enter key is pressed with Shift key', () => {
+        const event = new KeyboardEvent('keyup', { key: 'Enter', shiftKey: true });
+        const textAreaElement = document.createElement('textarea');
+        const selectionStart = 6;
+        const selectionEnd = 10;
+        textAreaElement.value = 'Sample text';
+        textAreaElement.selectionStart = selectionStart;
+        textAreaElement.selectionEnd = selectionEnd;
+        jest.spyOn(event, 'target', 'get').mockReturnValue(textAreaElement);
+
+        component.handleKey(event);
+
+        const expectedValue = 'Samplet';
+        const expectedSelectionStart = selectionStart + 1;
+        const expectedSelectionEnd = selectionStart + 1;
+
+        // Trigger the appropriate input events to simulate user input
+        const inputEvent = new Event('input', { bubbles: true, cancelable: true });
+        textAreaElement.dispatchEvent(inputEvent);
+
+        expect(textAreaElement.value).toBe(expectedValue);
+        expect(textAreaElement.selectionStart).toBe(expectedSelectionStart);
+        expect(textAreaElement.selectionEnd).toBe(expectedSelectionEnd);
+    });
 });

From 9565f6387889151294f82a235009494e744d77a1 Mon Sep 17 00:00:00 2001
From: Asli Aykan <asliaykan97@gmail.com>
Date: Tue, 4 Jul 2023 11:19:54 +0200
Subject: [PATCH 066/111] bug fixed

---
 .../exercise-chat-widget.component.ts                  | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/src/main/webapp/app/iris/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.ts b/src/main/webapp/app/iris/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.ts
index 2534700ee998..73bc9debcdd3 100644
--- a/src/main/webapp/app/iris/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.ts
+++ b/src/main/webapp/app/iris/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.ts
@@ -1,5 +1,5 @@
 import { faArrowDown, faCircle, faCircleInfo, faCompress, faExpand, faPaperPlane, faRobot, faThumbsDown, faThumbsUp, faXmark } from '@fortawesome/free-solid-svg-icons';
-import { ActivatedRoute } from '@angular/router';
+import { ActivatedRoute, NavigationStart, Router } from '@angular/router';
 import { LocalStorageService } from 'ngx-webstorage';
 import { AccountService } from 'app/core/auth/account.service';
 import { User } from 'app/core/user/user.model';
@@ -53,6 +53,7 @@ export class ExerciseChatWidgetComponent implements OnInit, OnDestroy, AfterView
     widgetWidth = localStorage.getItem('widgetWidth') || `${this.initialWidth}px`;
     widgetHeight = localStorage.getItem('widgetHeight') || `${this.initialHeight}px`;
     public ButtonType = ButtonType;
+    private navigationSubscription: Subscription;
 
     constructor(
         private dialog: MatDialog,
@@ -62,8 +63,14 @@ export class ExerciseChatWidgetComponent implements OnInit, OnDestroy, AfterView
         @Inject(MAT_DIALOG_DATA) public data: any,
         private httpMessageService: IrisHttpMessageService,
         private overlay: Overlay,
+        private router: Router,
     ) {
         this.stateStore = data.stateStore;
+        this.navigationSubscription = this.router.events.subscribe((event) => {
+            if (event instanceof NavigationStart) {
+                this.dialog.closeAll();
+            }
+        });
     }
 
     // Icons
@@ -121,7 +128,6 @@ export class ExerciseChatWidgetComponent implements OnInit, OnDestroy, AfterView
 
     ngOnDestroy() {
         this.stateSubscription.unsubscribe();
-        this.closeChat();
     }
 
     animateDots() {

From 78be0c3936dd5ebd1faa74a136556128bafb04a1 Mon Sep 17 00:00:00 2001
From: Ece Eren <aybikeceren@gmail.com>
Date: Tue, 4 Jul 2023 20:46:38 +0300
Subject: [PATCH 067/111] Adjust chatbot widget size

---
 .../exercise-chatwidget/exercise-chat-widget.component.html | 6 +++---
 .../exercise-chatwidget/exercise-chat-widget.component.ts   | 2 +-
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/main/webapp/app/iris/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.html b/src/main/webapp/app/iris/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.html
index 8d5eec74de7c..4ee04cd19206 100644
--- a/src/main/webapp/app/iris/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.html
+++ b/src/main/webapp/app/iris/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.html
@@ -11,9 +11,9 @@
         ngResizable
         rzHandles="all"
         [rzMinWidth]="250"
-        [rzMinHeight]="200"
-        [rzMaxWidth]="1200"
-        [rzMaxHeight]="700"
+        [rzMinHeight]="250"
+        [rzMaxWidth]="1335"
+        [rzMaxHeight]="620"
     >
         <!-- client -->
         <div class="client" #client>
diff --git a/src/main/webapp/app/iris/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.ts b/src/main/webapp/app/iris/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.ts
index 73bc9debcdd3..80ca0cd37134 100644
--- a/src/main/webapp/app/iris/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.ts
+++ b/src/main/webapp/app/iris/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.ts
@@ -47,7 +47,7 @@ export class ExerciseChatWidgetComponent implements OnInit, OnDestroy, AfterView
     showChatWidget = true;
     initialWidth = 330;
     initialHeight = 430;
-    fullWidth = '95vw';
+    fullWidth = '93vw';
     fullHeight = '85vh';
     fullSize = localStorage.getItem('fullSize') === 'true';
     widgetWidth = localStorage.getItem('widgetWidth') || `${this.initialWidth}px`;

From ba21c1118bd15f6e1e3a653bdd0ae779bd3aaa8e Mon Sep 17 00:00:00 2001
From: Ece Eren <aybikeceren@gmail.com>
Date: Tue, 4 Jul 2023 20:57:40 +0300
Subject: [PATCH 068/111] Disable chatbot while receiving an answer

---
 .../exercise-chat-widget.component.html                    | 2 +-
 .../exercise-chatwidget/exercise-chat-widget.component.ts  | 7 +++++++
 2 files changed, 8 insertions(+), 1 deletion(-)

diff --git a/src/main/webapp/app/iris/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.html b/src/main/webapp/app/iris/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.html
index 4ee04cd19206..98b983f777c9 100644
--- a/src/main/webapp/app/iris/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.html
+++ b/src/main/webapp/app/iris/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.html
@@ -42,7 +42,7 @@ <h3 class="header-start">
 
         <!-- main chat section -->
         <div class="chat-body" #chatBody (scroll)="checkChatScroll()">
-            <div class="p-chat" *ngIf="!userAccepted">
+            <div class="p-chat" *ngIf="!userAccepted && !isInitializing">
                 <div class="message-text">{{ 'artemisApp.exerciseChatbot.popUpMessage' | artemisTranslate }}</div>
                 <div class="button-container">
                     <button class="button" (click)="acceptPermission()">{{ 'artemisApp.exerciseChatbot.accept' | artemisTranslate }}</button>
diff --git a/src/main/webapp/app/iris/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.ts b/src/main/webapp/app/iris/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.ts
index 80ca0cd37134..57d2a618a9eb 100644
--- a/src/main/webapp/app/iris/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.ts
+++ b/src/main/webapp/app/iris/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.ts
@@ -40,6 +40,7 @@ export class ExerciseChatWidgetComponent implements OnInit, OnDestroy, AfterView
     unreadMessageIndex: number;
     error = '';
     dots = 1;
+    isInitializing = false;
 
     userAccepted = false;
     isScrolledToBottom = true;
@@ -92,6 +93,9 @@ export class ExerciseChatWidgetComponent implements OnInit, OnDestroy, AfterView
             }
         });
         this.animateDots();
+        setTimeout(() => {
+            this.isInitializing = true;
+        }, 50);
         this.stateSubscription = this.stateStore.getState().subscribe((state) => {
             this.messages = state.messages as IrisMessage[];
             this.isLoading = state.isLoading;
@@ -99,6 +103,9 @@ export class ExerciseChatWidgetComponent implements OnInit, OnDestroy, AfterView
             this.sessionId = Number(state.sessionId);
             this.numNewMessages = state.numNewMessages;
         });
+        setTimeout(() => {
+            this.isInitializing = false;
+        }, 50);
     }
 
     scrollToBottom(behavior: ScrollBehavior) {

From 5ef79a5e8fce3c37f9b7602ac6349cab0258aacc Mon Sep 17 00:00:00 2001
From: Ece Eren <aybikeceren@gmail.com>
Date: Wed, 5 Jul 2023 01:10:58 +0300
Subject: [PATCH 069/111] Empty message can't be sent -not complete

---
 .../exercise-chatwidget/exercise-chat-widget.component.ts       | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/main/webapp/app/iris/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.ts b/src/main/webapp/app/iris/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.ts
index 57d2a618a9eb..99919ce3d291 100644
--- a/src/main/webapp/app/iris/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.ts
+++ b/src/main/webapp/app/iris/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.ts
@@ -144,7 +144,7 @@ export class ExerciseChatWidgetComponent implements OnInit, OnDestroy, AfterView
     }
 
     onSend(): void {
-        if (this.newMessageTextContent) {
+        if (this.newMessageTextContent.trim()) {
             const message = this.newUserMessage(this.newMessageTextContent);
             this.stateStore
                 .dispatchAndThen(new StudentMessageSentAction(message))

From dfd78cb02770d5d22ce25f6d583dd89267faf26a Mon Sep 17 00:00:00 2001
From: Ece Eren <aybikeceren@gmail.com>
Date: Wed, 5 Jul 2023 01:38:34 +0300
Subject: [PATCH 070/111] Prevent esc to close the modal

---
 .../iris/exercise-chatbot/exercise-chatbot.component.ts    | 7 +------
 .../exercise-chatwidget/exercise-chat-widget.component.ts  | 1 +
 2 files changed, 2 insertions(+), 6 deletions(-)

diff --git a/src/main/webapp/app/iris/exercise-chatbot/exercise-chatbot.component.ts b/src/main/webapp/app/iris/exercise-chatbot/exercise-chatbot.component.ts
index 9b239ca0bd06..4370061b4d4a 100644
--- a/src/main/webapp/app/iris/exercise-chatbot/exercise-chatbot.component.ts
+++ b/src/main/webapp/app/iris/exercise-chatbot/exercise-chatbot.component.ts
@@ -64,12 +64,6 @@ export class ExerciseChatbotComponent implements OnInit, OnDestroy {
         this.stateSubscription.unsubscribe();
     }
 
-    @HostListener('document:keydown.escape', ['$event'])
-    onEscapeKeyDown(event: KeyboardEvent): void {
-        event.preventDefault();
-        this.handleButtonClick();
-    }
-
     handleButtonClick() {
         if (this.chatOpen && this.dialogRef) {
             this.stateStore.dispatch(new NumNewMessagesResetAction());
@@ -89,6 +83,7 @@ export class ExerciseChatbotComponent implements OnInit, OnDestroy {
                 hasBackdrop: false,
                 scrollStrategy: this.overlay.scrollStrategies.noop(),
                 position: { bottom: '0px', right: '0px' },
+                disableClose: true,
                 data: {
                     stateStore: this.stateStore,
                     widgetWidth: localStorage.getItem('widgetWidth') || `${this.initialWidth}px`,
diff --git a/src/main/webapp/app/iris/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.ts b/src/main/webapp/app/iris/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.ts
index 99919ce3d291..17c3612778e5 100644
--- a/src/main/webapp/app/iris/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.ts
+++ b/src/main/webapp/app/iris/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.ts
@@ -196,6 +196,7 @@ export class ExerciseChatWidgetComponent implements OnInit, OnDestroy, AfterView
                 hasBackdrop: false,
                 scrollStrategy: this.overlay.scrollStrategies.noop(),
                 position: { bottom: '0px', right: '0px' },
+                disableClose: true,
                 data: {
                     stateStore: this.stateStore,
                     widgetWidth: localStorage.getItem('widgetWidth') || `${this.initialWidth}px`,

From a5ed52a3dac54032ff34a281b455dd3d94a8e8ba Mon Sep 17 00:00:00 2001
From: Ece Eren <aybikeceren@gmail.com>
Date: Wed, 5 Jul 2023 15:36:05 +0300
Subject: [PATCH 071/111] Fix chatbot button -not complete

---
 .../exercise-chatbot.component.ts             | 49 ++++++++++---------
 .../exercise-chat-widget.component.html       |  1 -
 .../exercise-chat-widget.component.ts         | 14 ++++--
 src/main/webapp/app/iris/shared.service.ts    | 14 ++++++
 4 files changed, 51 insertions(+), 27 deletions(-)
 create mode 100644 src/main/webapp/app/iris/shared.service.ts

diff --git a/src/main/webapp/app/iris/exercise-chatbot/exercise-chatbot.component.ts b/src/main/webapp/app/iris/exercise-chatbot/exercise-chatbot.component.ts
index 4370061b4d4a..d0736f334dab 100644
--- a/src/main/webapp/app/iris/exercise-chatbot/exercise-chatbot.component.ts
+++ b/src/main/webapp/app/iris/exercise-chatbot/exercise-chatbot.component.ts
@@ -1,5 +1,5 @@
 import { faChevronDown, faCircle, faCommentDots } from '@fortawesome/free-solid-svg-icons';
-import { Component, HostListener, OnDestroy, OnInit } from '@angular/core';
+import { Component, OnDestroy, OnInit } from '@angular/core';
 import { MatDialog, MatDialogRef } from '@angular/material/dialog';
 import { ExerciseChatWidgetComponent } from 'app/iris/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component';
 import { Overlay } from '@angular/cdk/overlay';
@@ -10,6 +10,7 @@ import { IrisSessionService } from 'app/iris/session.service';
 import { NumNewMessagesResetAction } from 'app/iris/state-store.model';
 import { ActivatedRoute } from '@angular/router';
 import { Subscription } from 'rxjs';
+import { SharedService } from 'app/iris/shared.service';
 
 @Component({
     selector: 'jhi-exercise-chatbot',
@@ -27,6 +28,7 @@ export class ExerciseChatbotComponent implements OnInit, OnDestroy {
     hasNewMessages = false;
     private exerciseId: number;
     private stateSubscription: Subscription;
+    private chatOpenSubscription: Subscription;
     initialWidth = 330;
     initialHeight = 430;
 
@@ -42,6 +44,7 @@ export class ExerciseChatbotComponent implements OnInit, OnDestroy {
         private readonly stateStore: IrisStateStore,
         private readonly websocketService: IrisWebsocketService,
         private route: ActivatedRoute,
+        private sharedService: SharedService,
     ) {}
 
     ngOnInit() {
@@ -52,6 +55,8 @@ export class ExerciseChatbotComponent implements OnInit, OnDestroy {
             }
         });
 
+        this.chatOpenSubscription = this.sharedService.chatOpen.subscribe((status) => (this.chatOpen = status));
+
         this.stateSubscription = this.stateStore.getState().subscribe((state) => {
             this.hasNewMessages = state.numNewMessages > 0;
         });
@@ -67,9 +72,9 @@ export class ExerciseChatbotComponent implements OnInit, OnDestroy {
     handleButtonClick() {
         if (this.chatOpen && this.dialogRef) {
             this.stateStore.dispatch(new NumNewMessagesResetAction());
-            this.dialogRef!.close();
+            this.dialog.closeAll();
             //this.runAnimation = false;
-            this.chatOpen = false;
+            this.sharedService.changeChatOpenStatus(false);
         } else {
             this.openChat();
             //this.runAnimation = true;
@@ -77,25 +82,23 @@ export class ExerciseChatbotComponent implements OnInit, OnDestroy {
     }
 
     openChat() {
-        if (!this.buttonDisabled) {
-            this.chatOpen = true;
-            this.dialogRef = this.dialog.open(ExerciseChatWidgetComponent, {
-                hasBackdrop: false,
-                scrollStrategy: this.overlay.scrollStrategies.noop(),
-                position: { bottom: '0px', right: '0px' },
-                disableClose: true,
-                data: {
-                    stateStore: this.stateStore,
-                    widgetWidth: localStorage.getItem('widgetWidth') || `${this.initialWidth}px`,
-                    widgetHeight: localStorage.getItem('widgetHeight') || `${this.initialHeight}px`,
-                    fullSize: localStorage.getItem('fullSize') === 'true',
-                },
-            });
-            this.dialogRef.afterClosed().subscribe(() => {
-                this.buttonDisabled = false;
-                this.chatOpen = false;
-            });
-        }
-        this.buttonDisabled = true;
+        this.dialogRef = this.dialog.open(ExerciseChatWidgetComponent, {
+            hasBackdrop: false,
+            scrollStrategy: this.overlay.scrollStrategies.noop(),
+            position: { bottom: '0px', right: '0px' },
+            disableClose: true,
+            data: {
+                stateStore: this.stateStore,
+                widgetWidth: localStorage.getItem('widgetWidth') || `${this.initialWidth}px`,
+                widgetHeight: localStorage.getItem('widgetHeight') || `${this.initialHeight}px`,
+                fullSize: localStorage.getItem('fullSize') === 'true',
+            },
+        });
+        this.dialogRef.afterOpened().subscribe(() => {
+            this.sharedService.changeChatOpenStatus(true);
+        });
+        this.dialogRef.afterClosed().subscribe(() => {
+            this.sharedService.changeChatOpenStatus(false);
+        });
     }
 }
diff --git a/src/main/webapp/app/iris/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.html b/src/main/webapp/app/iris/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.html
index 98b983f777c9..69ca6a9e68b9 100644
--- a/src/main/webapp/app/iris/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.html
+++ b/src/main/webapp/app/iris/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.html
@@ -1,7 +1,6 @@
 <div class="container">
     <!-- chat box -->
     <div
-        *ngIf="showChatWidget"
         [style.width]="widgetWidth"
         [style.height]="widgetHeight"
         class="chat-widget"
diff --git a/src/main/webapp/app/iris/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.ts b/src/main/webapp/app/iris/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.ts
index 17c3612778e5..f43c028bfe6e 100644
--- a/src/main/webapp/app/iris/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.ts
+++ b/src/main/webapp/app/iris/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.ts
@@ -5,7 +5,7 @@ import { AccountService } from 'app/core/auth/account.service';
 import { User } from 'app/core/user/user.model';
 import { ButtonType } from 'app/shared/components/button.component';
 import { AfterViewInit, Component, ElementRef, Inject, OnDestroy, OnInit, ViewChild } from '@angular/core';
-import { MAT_DIALOG_DATA, MatDialog } from '@angular/material/dialog';
+import { MAT_DIALOG_DATA, MatDialog, MatDialogRef } from '@angular/material/dialog';
 import { IrisStateStore } from 'app/iris/state-store.service';
 import { ConversationErrorOccurredAction, NumNewMessagesResetAction, RateMessageSuccessAction, StudentMessageSentAction } from 'app/iris/state-store.model';
 import { IrisHttpMessageService } from 'app/iris/http-message.service';
@@ -14,6 +14,7 @@ import { IrisMessageContent, IrisMessageContentType } from 'app/entities/iris/ir
 import { Subscription } from 'rxjs';
 import { ResizeSensor } from 'css-element-queries';
 import { Overlay } from '@angular/cdk/overlay';
+import { SharedService } from 'app/iris/shared.service';
 
 @Component({
     selector: 'jhi-exercise-chat-widget',
@@ -26,6 +27,7 @@ export class ExerciseChatWidgetComponent implements OnInit, OnDestroy, AfterView
     @ViewChild('scrollArrow') scrollArrow!: ElementRef;
     @ViewChild('messageTextarea', { static: false }) messageTextarea: ElementRef;
     @ViewChild('unreadMessage', { static: false }) unreadMessage!: ElementRef;
+    dialogRef: MatDialogRef<ExerciseChatWidgetComponent> | null = null;
 
     readonly SENDER_USER = IrisSender.USER;
     readonly SENDER_SERVER = IrisSender.LLM;
@@ -45,7 +47,6 @@ export class ExerciseChatWidgetComponent implements OnInit, OnDestroy, AfterView
     userAccepted = false;
     isScrolledToBottom = true;
     rows = 1;
-    showChatWidget = true;
     initialWidth = 330;
     initialHeight = 430;
     fullWidth = '93vw';
@@ -65,6 +66,7 @@ export class ExerciseChatWidgetComponent implements OnInit, OnDestroy, AfterView
         private httpMessageService: IrisHttpMessageService,
         private overlay: Overlay,
         private router: Router,
+        private sharedService: SharedService,
     ) {
         this.stateStore = data.stateStore;
         this.navigationSubscription = this.router.events.subscribe((event) => {
@@ -87,6 +89,12 @@ export class ExerciseChatWidgetComponent implements OnInit, OnDestroy, AfterView
     faThumbsDown = faThumbsDown;
 
     ngOnInit() {
+        this.dialog.afterOpened.subscribe(() => {
+            this.sharedService.changeChatOpenStatus(true);
+        });
+        this.dialog.afterAllClosed.subscribe(() => {
+            this.sharedService.changeChatOpenStatus(false);
+        });
         this.accountService.identity().then((user: User) => {
             if (typeof user!.login === 'string') {
                 this.userAccepted = localStorage.getItem(user!.login) == 'true';
@@ -204,7 +212,7 @@ export class ExerciseChatWidgetComponent implements OnInit, OnDestroy, AfterView
                     fullSize: localStorage.getItem('fullSize') === 'true',
                 },
             });
-        }, 50);
+        }, 140);
     }
 
     maximizeScreen() {
diff --git a/src/main/webapp/app/iris/shared.service.ts b/src/main/webapp/app/iris/shared.service.ts
new file mode 100644
index 000000000000..20646d29bb05
--- /dev/null
+++ b/src/main/webapp/app/iris/shared.service.ts
@@ -0,0 +1,14 @@
+import { Injectable } from '@angular/core';
+import { BehaviorSubject } from 'rxjs';
+
+@Injectable({
+    providedIn: 'root',
+})
+export class SharedService {
+    private chatOpenSource = new BehaviorSubject<boolean>(false);
+    chatOpen = this.chatOpenSource.asObservable();
+
+    changeChatOpenStatus(status: boolean) {
+        this.chatOpenSource.next(status);
+    }
+}

From d27c2e06f284950fd46f76f1b50d1e9910ab22aa Mon Sep 17 00:00:00 2001
From: Ece Eren <aybikeceren@gmail.com>
Date: Mon, 10 Jul 2023 02:40:57 +0300
Subject: [PATCH 072/111] Update About Iris page -not complete

---
 .../iris/about-iris/about-iris.component.html | 38 ++++---------------
 .../iris/about-iris/about-iris.component.ts   |  5 +++
 src/main/webapp/i18n/de/exerciseChatbot.json  | 32 ++++++++++------
 src/main/webapp/i18n/en/exerciseChatbot.json  | 32 ++++++++++------
 4 files changed, 55 insertions(+), 52 deletions(-)

diff --git a/src/main/webapp/app/iris/about-iris/about-iris.component.html b/src/main/webapp/app/iris/about-iris/about-iris.component.html
index aabcf87c82b9..be10ae7f04e3 100644
--- a/src/main/webapp/app/iris/about-iris/about-iris.component.html
+++ b/src/main/webapp/app/iris/about-iris/about-iris.component.html
@@ -12,35 +12,13 @@ <h2 class="mb-3 mt-3 font-weight-bold">
     </div>
 
     <div class="mb-5 ms-2" style="margin-right: 70px">
-        <h3 class="mb-3 font-weight-bold">{{ 'artemisApp.aboutUsOverview.feature' | artemisTranslate }}</h3>
-        <ul>
-            <li>
-                <span>{{ 'artemisApp.exerciseChatbot.f1' | artemisTranslate }}</span>
-            </li>
-            <li>
-                <span>{{ 'artemisApp.exerciseChatbot.f2' | artemisTranslate }}</span>
-            </li>
-            <li>
-                <span>{{ 'artemisApp.exerciseChatbot.f3' | artemisTranslate }}</span>
-            </li>
-            <li>
-                <span>{{ 'artemisApp.exerciseChatbot.f4' | artemisTranslate }}</span>
-            </li>
-            <li>
-                <span>{{ 'artemisApp.exerciseChatbot.f5' | artemisTranslate }}</span>
-            </li>
-            <li>
-                <span>{{ 'artemisApp.exerciseChatbot.f6' | artemisTranslate }}</span>
-            </li>
-            <li>
-                <span>{{ 'artemisApp.exerciseChatbot.f7' | artemisTranslate }}</span>
-            </li>
-            <li>
-                <span>{{ 'artemisApp.exerciseChatbot.f8' | artemisTranslate }}</span>
-            </li>
-            <li>
-                <span>{{ 'artemisApp.exerciseChatbot.f9' | artemisTranslate }}</span>
-            </li>
-        </ul>
+        <div *ngFor="let key of objectKeys(bulletPoints)">
+            <h4 class="mb-3 font-weight-bold">{{ 'artemisApp.exerciseChatbot.subheading' + key | artemisTranslate }}</h4>
+            <ul>
+                <li *ngFor="let item of array(bulletPoints[key]); let i = index">
+                    <span [jhiTranslate]="'artemisApp.exerciseChatbot.text' + key + '_' + (i + 1)"></span>
+                </li>
+            </ul>
+        </div>
     </div>
 </div>
diff --git a/src/main/webapp/app/iris/about-iris/about-iris.component.ts b/src/main/webapp/app/iris/about-iris/about-iris.component.ts
index 32d5818743ff..15b17325abf7 100644
--- a/src/main/webapp/app/iris/about-iris/about-iris.component.ts
+++ b/src/main/webapp/app/iris/about-iris/about-iris.component.ts
@@ -8,4 +8,9 @@ import { faRobot } from '@fortawesome/free-solid-svg-icons';
 })
 export class AboutIrisComponent {
     faRobot = faRobot;
+    // How many bullet points each heading has
+    bulletPoints = { '1': 2, '2': 5, '3': 3, '4': 4 };
+
+    objectKeys = Object.keys;
+    array = Array;
 }
diff --git a/src/main/webapp/i18n/de/exerciseChatbot.json b/src/main/webapp/i18n/de/exerciseChatbot.json
index 7fd9eb6d2548..c0a66b6ea6e7 100644
--- a/src/main/webapp/i18n/de/exerciseChatbot.json
+++ b/src/main/webapp/i18n/de/exerciseChatbot.json
@@ -5,17 +5,27 @@
             "inputMessage": "Schreib eine Nachricht...",
             "accept": "Akzeptieren",
             "decline": "Ablehnen",
-            "title": "Iris: Der Chatbot, der von einem großen Sprachmodell für Artemis unterstützt wird",
-            "subtext": "Iris ist speziell darauf ausgelegt, umfassende Unterstützung für Ihre Programmieraufgaben zu bieten. Es nutzt seine fortschrittlichen Sprachverständnisfähigkeiten, um Ihre Anfragen zu bearbeiten und Sie während Ihres Lernprozesses zu unterstützen.",
-            "f1": "Die Interaktionen mit Iris unterliegen der Verarbeitung durch Microsoft und OpenAI, was den Transfer von Daten über die Grenzen unseres Universitätsrechenzentrums hinaus bedeutet.",
-            "f2": "Um Iris nutzen zu können, ist es erforderlich, der Genehmigungsnachricht, die während der erstmaligen Verwendung angezeigt wird, zuzustimmen. Durch die Zustimmung erkennen und akzeptieren Sie, dass Ihre Interaktionen mit Iris von den oben genannten Organisationen verarbeitet werden.",
-            "f3": "Iris hilft dabei, Aufgabendefinitionen zu verstehen, Codefehler zu beheben und einfache Fragen zur verwendeten Programmiersprache zu beantworten. Sie liefert jedoch keine direkten Lösungen für die zu lösenden Aufgaben.",
-            "f4": "Iris speichert Ihren Chat-Verlauf für jede Programmieraufgabe, an der Sie teilgenommen haben. Dadurch können Sie Ihre Unterhaltung fortsetzen, indem Sie die Chat-Schnittstelle erneut öffnen. Diese Funktion ermöglicht es Ihnen, auf frühere Diskussionen bequem zurückzugreifen und Ihre Interaktion mit Iris nahtlos fortzusetzen.",
-            "f5": "Sie werden ermutigt, Feedback zu geben, das in zwei Arten eingeteilt werden kann. Die erste Art ist eine nachrichtenbasierte Rückmeldung, bei der Sie die Möglichkeit haben, Ihre Präferenz für jede Nachricht durch die Auswahl von \"Gefällt mir\", oder \"Gefällt mir nicht\", auszudrücken. Die zweite Art ist eine auf die Konversation bezogene Rückmeldung, die am Ende einer Unterhaltung abgegeben werden kann. Für die konversationsbasierte Rückmeldung stehen Ihnen die Optionen \"Gefällt mi\", \"Gefällt mir nicht\", oder \"Unsicher\", zur Verfügung. Ihr Feedback ist wertvoll, um die Effektivität des Chatbots zu verbessern und Ihre Bedürfnisse zu erfüllen.",
-            "f6": "Das Chat-Widget kann durch Klicken auf die Schaltfläche 'X' in der oberen rechten Ecke oder durch Verwendung der Chatbot-Schaltfläche unterhalb des Widgets geschlossen werden.",
-            "f7": "Das Widget ist mit einer Funktion zum Verschieben ausgestattet, die es den Benutzern ermöglicht, es frei an verschiedene Positionen auf der Seite zu bewegen.",
-            "f8": "Das Widget unterstützt die Größenanpassung, sodass die Benutzer seine Abmessungen durch das Vergrößern oder Verkleinern der Ränder anpassen können.",
-            "f9": "Das Widget bietet eine Vollbildfunktion, die durch Klicken auf die Schaltfläche neben der 'X'-Schaltfläche aktiviert wird. Dadurch wird das Widget auf die gesamte Seite erweitert und ähnelt einer Vollbildanzeige. Um zur vorherigen Größe zurückzukehren, können Sie die Schaltfläche erneut klicken",
+            "title": "Iris: Deine virtuelle Programmierbegleiterin",
+            "subtext": "iris ist ein LLM-basierter Chatbot, der dich durch deine Programmierübungen führt. Sie beantwortet Fragen und gibt Hilfestellungen.",
+            "subheading1": "Datenverarbeitung & Einwilligung",
+            "text1_1": "<b>Datenverarbeitung:</b> Deine Interaktionen mit Iris werden von Microsoft und OpenAI verarbeitet. Das bedeutet, dass die Informationen, die du mit Iris teilst, das Rechenzentrum unserer Universität verlassen.",
+            "text1_2": "<b>Einwilligung:</b> Um Iris benutzen zu können, musst du die Einwilligungserklärung akzeptieren, die beim ersten Öffnen von Iris erscheint. Damit stimmst du zu, dass Microsoft und OpenAI deine Daten wie beschrieben verarbeiten dürfen.",
+            "subheading2": "Die wichtigsten Funktionen von Iris",
+            "text2_1": "<b>Programmierkenntnisse:</b> Iris kann deine Fragen zu Programmiersprachen, Syntax, Algorithmen, Datenstrukturen oder anderen spezifischen Themen beantworten. Sie kann auch Probleme in deinem Code erkennen und dir Tipps zur Verbesserung geben.",
+            "text2_2": "<b>Tutoring-Fähigkeiten:</b> Iris kann dir komplexe Programmierkonzepte erklären und anschauliche Beispiele geben.",
+            "text2_3": "<b>Kontextverständnis:</b> Im Gegensatz zu anderen LLM-basierten Chatbots kennt Iris den Programmcode, die Aufgabenstellung, die Buildresultate und die Logdaten. Das bedeutet, dass sie dir die Aufgabenstellung genauer erklären und dir Feedback zu deinem Code oder möglichen Buildfehlern geben kann.",
+            "text2_4": "<b>Feedback:</b> Dein Feedback ist wichtig, um das Verhalten von Iris zu verbessern. Indem du bestimmte Antworten oder ganze Konversationen beurteilst, trägst du dazu bei, dass sich Leistung mit der Zeit zu verbessert.",
+            "text2_5": "<b>Kommunikationsfähigkeiten:</b> Iris speichert deinen Chatverlauf, so dass du d eine Interaktion fortsetzen und auf frühere Nachrichten zurückgreifen kannst, wenn du Iris erneut öffnest.",
+            "subheading3": "Boundaries & Limitations",
+            "text3_1": "<b>No Solution:</b> Iris is designed to guide your learning process, which means she won't simply give you the complete solution to a task. Instead, she will help you by answering specific questions and offering hints to assist you in solving the task on your own.",
+            "text3_2": "<b>No Off-Topic Conversations:</b> Iris's main focus is programming. Therefore, she won't answer questions that aren't related to programming or the current programming exercise you're working on.",
+            "text3_3": "<b>No Organizational Information:</b> Iris won't provide information to organizational topics.",
+            "subheading4": "Funktionen des Chat-Widgets",
+            "text4_1": "<b>Schließen des Widgets:</b> Du kannst das Widget schließen, indem du auf den 'X'-Button (in der oberen rechten Ecke des Widgets) oder auf den 'Chatbot'-Button (unterhalb des Widgets) klickst.",
+            "text4_2": "<b>Verschieben des Widgets:</b> Du kannst das Widget verschieben. Klicke und halte das Widget und ziehe es an die gewünschte Position.",
+            "text4_3": "<b>Vergrößern und Verkleinern des Widgets:</b> Klicke und ziehe die Ränder des Widgets in verschiedene Richtungen, um die Größe zu ändern.",
+            "text4_4": "<b>Vollbildmodus:</b> Du kannst das Widget im Vollbildmodus öffnen, indem du auf den Vollbildmodus-Button (in der oberen rechten Ecke des Widgets) klickst.",
+            "supportText": "(Wenn du Probleme mit dem Iris-Widget oder bei der Interaktion mit Iris hast, erstelle bitte einen Issue auf GitHub https://github.com/ls1intum/Artemis)",
             "unreadMessages": "Ungelesene Nachrichten",
             "buttonTooltip": "Beginne mit Iris zu chatten!"
         }
diff --git a/src/main/webapp/i18n/en/exerciseChatbot.json b/src/main/webapp/i18n/en/exerciseChatbot.json
index da209654779a..05fc0dc812a0 100644
--- a/src/main/webapp/i18n/en/exerciseChatbot.json
+++ b/src/main/webapp/i18n/en/exerciseChatbot.json
@@ -5,17 +5,27 @@
             "inputMessage": "Write a message...",
             "accept": "Accept",
             "decline": "Decline",
-            "title": "Iris: The Chatbot Powered by a Large Language Model for Artemis",
-            "subtext": "Iris is specifically designed to offer comprehensive support for your programming exercises. It leverages its advanced language understanding capabilities to address your inquiries and provide guidance throughout your learning process.",
-            "f1": "The interactions conducted with Iris will be subject to processing by Microsoft and OpenAI, entailing the transfer of data beyond the confines of our university's data center.",
-            "f2": "In order to utilize Iris, it is necessary to provide consent by accepting the permission message that appears during initial usage. By doing so, you acknowledge and agree that your interactions with Iris will be subject to processing by organizations that are mentioned above.",
-            "f3": "Iris assists in comprehending exercise definitions, debugging code, and providing answers to basic inquiries regarding the programming language being utilized. However, it does not provide direct solutions to the exercises that need to be solved.",
-            "f4": "Iris retains your chat history for each programming exercise in which you have engaged, allowing you to resume your conversation by reopening the chat interface. This feature ensures that you can conveniently refer back to previous discussions and seamlessly continue your interaction with Iris.",
-            "f5": "You are encouraged to provide feedback, which can be categorized into two types. The first type is message-wise feedback, where you have the option to express their preference by choosing either \"like\" or \"dislike\" for each message. The second type is conversation-based feedback, which can be submitted at the conclusion of a conversation. For conversation-based feedback, you are proposed with the options of \"like,\" \"dislike,\" or \"not sure.\" Your feedback is valuable in helping us improve the chatbot's effectiveness and meet your needs.",
-            "f6": "The chat widget can be closed by clicking on the 'X' button located in the top right corner or by utilizing the chatbot button positioned below the widget.",
-            "f7": "The widget is designed with draggable functionality, allowing users to move it freely to different positions on the page.",
-            "f8": "The widget supports resizing, enabling users to adjust its dimensions by expanding or shrinking its borders.",
-            "f9": "The widget offers a full-screen feature, accessible by clicking on the button adjacent to the 'X' button. This expands the widget to occupy the entire page, resembling a full-page display. To revert back to its previous size, you can click the button again, returning the widget to its original dimensions.",
+            "title": "Iris: Your Virtual Programming Companion",
+            "subtext": "Iris is an LLM-based chatbot that guides you through your programming exercises. She enhances your learning journey by answering questions and providing support.",
+            "subheading1": "Data Processing & Consent",
+            "text1_1": "<b>Data Processing:</b> Your interactions with Iris are processed by Microsoft and OpenAI. This means that the information you share with Iris will leave our university's data center.",
+            "text1_2": "<b>Consent:</b> To use Iris, you must accept the consent message that appears the first time you use Iris. By accepting it, you agree to allow Microsoft and OpenAI to process your data as described.",
+            "subheading2": "Key Features of Iris",
+            "text2_1": "<b>Programming Skills:</b> Iris can answer your programming questions, whether are about programming languages, syntax, algorithms, data structures, or other specific topic. She can also identify problems in your code and give you advice on how to improve it.",
+            "text2_2": "<b>Tutoring Skills:</b> Iris can explain complex programming concepts and provide helpful examples to improve your understanding of various topics.",
+            "text2_3": "<b>Contextual Understanding:</b> Unlike other LLM-based chatbots, Iris has knowledge of your code, the problem statement, build results, and logging data.. This means you can rely on her to explain or clarify tasks and get feedback on your code or potential build errors.",
+            "text2_4": "<b>Feedback:</b> Your input is crucial to refining Iris's behavior. Feel free to rate specific responses or entire conversations to help improve her performance over time.",
+            "text2_5": "<b>Communication Skills:</b> Iris keeps a record of your conversation history, so you can continue your interaction and refer back to previous messages whenever you reopen the chatbot.",
+            "subheading3": "Boundaries & Limitations",
+            "text3_1": "<b>No Solution:</b> Iris is designed to guide your learning process, which means she won't simply give you the complete solution to a task. Instead, she will help you by answering specific questions and offering hints to assist you in solving the task on your own.",
+            "text3_2": "<b>No Off-Topic Conversations:</b> Iris's main focus is programming. Therefore, she won't answer questions that aren't related to programming or the current programming exercise you're working on.",
+            "text3_3": "<b>No Organizational Information:</b> Iris won't provide information to organizational topics.",
+            "subheading4": "Chat Widget Function",
+            "text4_1": "<b>Close the Widget:</b> You can close the widget by clicking on the 'X' button (top right corner of the widget) or on the chatbot button (below the widget).",
+            "text4_2": "<b>Movable Functionality:</b> You have the flexibility to move the widget around. Simply click and hold on the widget and drag it to the desired position.",
+            "text4_3": "<b>Resize the Widget:</b> Click and drag the borders of the widget in different directions to make it smaller or larger, depending on your preference.",
+            "text4_4": "<b>Full Screen Feature:</b> You can expand the widget to full screen mode by clicking on the full screen button (top right corner of the widget).",
+            "supportText": "(If you have any problems using the widget or messaging Iris, please create an issue on GitHub: https://github.com/ls1intum/Artemis)",
             "unreadMessages": "Unread messages",
             "buttonTooltip": "Start chatting with Iris!"
         }

From f96015854d9f547daea43880e18d712994b43869 Mon Sep 17 00:00:00 2001
From: Asli Aykan <asliaykan97@gmail.com>
Date: Mon, 10 Jul 2023 01:47:26 +0200
Subject: [PATCH 073/111] bug fixes (not complete)

---
 .../exercise-chatbot.component.html             |  2 +-
 .../exercise-chatbot.component.ts               | 17 +++++++----------
 .../exercise-chat-widget.component.ts           | 16 +++++++++++++---
 3 files changed, 21 insertions(+), 14 deletions(-)

diff --git a/src/main/webapp/app/iris/exercise-chatbot/exercise-chatbot.component.html b/src/main/webapp/app/iris/exercise-chatbot/exercise-chatbot.component.html
index 394bd1d10b11..fc68a8061b69 100644
--- a/src/main/webapp/app/iris/exercise-chatbot/exercise-chatbot.component.html
+++ b/src/main/webapp/app/iris/exercise-chatbot/exercise-chatbot.component.html
@@ -1,6 +1,6 @@
 <div class="chatbot-button">
     <button class="btn btn-primary btn-md btn-circle" title="{{ 'artemisApp.exerciseChatbot.buttonTooltip' | artemisTranslate }}" (click)="handleButtonClick()">
-        <fa-icon size="lg" [icon]="chatOpen ? faChevronDown : faCommentDots"></fa-icon>
+        <fa-icon size="lg" [icon]="closed ? faCommentDots : faChevronDown"></fa-icon>
         <fa-icon *ngIf="hasNewMessages && !chatOpen" [icon]="faCircle" size="xs" class="unread-indicator"></fa-icon>
     </button>
 </div>
diff --git a/src/main/webapp/app/iris/exercise-chatbot/exercise-chatbot.component.ts b/src/main/webapp/app/iris/exercise-chatbot/exercise-chatbot.component.ts
index d0736f334dab..20d8795f1c9d 100644
--- a/src/main/webapp/app/iris/exercise-chatbot/exercise-chatbot.component.ts
+++ b/src/main/webapp/app/iris/exercise-chatbot/exercise-chatbot.component.ts
@@ -24,6 +24,7 @@ export class ExerciseChatbotComponent implements OnInit, OnDestroy {
     public buttonDisabled = false;
     dialogRef: MatDialogRef<ExerciseChatWidgetComponent> | null = null;
     chatOpen = false;
+    closed = true;
     runAnimation = false;
     hasNewMessages = false;
     private exerciseId: number;
@@ -55,8 +56,6 @@ export class ExerciseChatbotComponent implements OnInit, OnDestroy {
             }
         });
 
-        this.chatOpenSubscription = this.sharedService.chatOpen.subscribe((status) => (this.chatOpen = status));
-
         this.stateSubscription = this.stateStore.getState().subscribe((state) => {
             this.hasNewMessages = state.numNewMessages > 0;
         });
@@ -69,14 +68,18 @@ export class ExerciseChatbotComponent implements OnInit, OnDestroy {
         this.stateSubscription.unsubscribe();
     }
 
-    handleButtonClick() {
+    public handleButtonClick() {
         if (this.chatOpen && this.dialogRef) {
             this.stateStore.dispatch(new NumNewMessagesResetAction());
             this.dialog.closeAll();
             //this.runAnimation = false;
-            this.sharedService.changeChatOpenStatus(false);
+            //this.sharedService.changeChatOpenStatus(false);
+            this.chatOpen = false;
+            this.closed = true;
         } else {
+            this.chatOpen = true;
             this.openChat();
+            this.closed = false;
             //this.runAnimation = true;
         }
     }
@@ -94,11 +97,5 @@ export class ExerciseChatbotComponent implements OnInit, OnDestroy {
                 fullSize: localStorage.getItem('fullSize') === 'true',
             },
         });
-        this.dialogRef.afterOpened().subscribe(() => {
-            this.sharedService.changeChatOpenStatus(true);
-        });
-        this.dialogRef.afterClosed().subscribe(() => {
-            this.sharedService.changeChatOpenStatus(false);
-        });
     }
 }
diff --git a/src/main/webapp/app/iris/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.ts b/src/main/webapp/app/iris/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.ts
index f43c028bfe6e..00881c0f5c70 100644
--- a/src/main/webapp/app/iris/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.ts
+++ b/src/main/webapp/app/iris/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.ts
@@ -5,7 +5,7 @@ import { AccountService } from 'app/core/auth/account.service';
 import { User } from 'app/core/user/user.model';
 import { ButtonType } from 'app/shared/components/button.component';
 import { AfterViewInit, Component, ElementRef, Inject, OnDestroy, OnInit, ViewChild } from '@angular/core';
-import { MAT_DIALOG_DATA, MatDialog, MatDialogRef } from '@angular/material/dialog';
+import { MAT_DIALOG_DATA, MatDialog } from '@angular/material/dialog';
 import { IrisStateStore } from 'app/iris/state-store.service';
 import { ConversationErrorOccurredAction, NumNewMessagesResetAction, RateMessageSuccessAction, StudentMessageSentAction } from 'app/iris/state-store.model';
 import { IrisHttpMessageService } from 'app/iris/http-message.service';
@@ -27,7 +27,6 @@ export class ExerciseChatWidgetComponent implements OnInit, OnDestroy, AfterView
     @ViewChild('scrollArrow') scrollArrow!: ElementRef;
     @ViewChild('messageTextarea', { static: false }) messageTextarea: ElementRef;
     @ViewChild('unreadMessage', { static: false }) unreadMessage!: ElementRef;
-    dialogRef: MatDialogRef<ExerciseChatWidgetComponent> | null = null;
 
     readonly SENDER_USER = IrisSender.USER;
     readonly SENDER_SERVER = IrisSender.LLM;
@@ -89,12 +88,23 @@ export class ExerciseChatWidgetComponent implements OnInit, OnDestroy, AfterView
     faThumbsDown = faThumbsDown;
 
     ngOnInit() {
-        this.dialog.afterOpened.subscribe(() => {
+        /*this.dialog.afterOpened.subscribe(() => {
             this.sharedService.changeChatOpenStatus(true);
+
         });
         this.dialog.afterAllClosed.subscribe(() => {
             this.sharedService.changeChatOpenStatus(false);
+        });*/
+        /*this.dialog.afterOpened.subscribe(() => {
+            console.log('cağiriyor muuu');
+            this.data.chatOpen = true;
+            this.data.closed = false;
         });
+        this.dialog.afterAllClosed.subscribe(() => {
+            console.log('kapanıyor mumumumum');
+            this.data.chatOpen = false;
+            this.data.closed = true;
+        });*/
         this.accountService.identity().then((user: User) => {
             if (typeof user!.login === 'string') {
                 this.userAccepted = localStorage.getItem(user!.login) == 'true';

From 60146a17b4373ab4009487db275dcc59451b25c5 Mon Sep 17 00:00:00 2001
From: Ece Eren <aybikeceren@gmail.com>
Date: Mon, 10 Jul 2023 03:10:36 +0300
Subject: [PATCH 074/111] Full screen - icon dysfunction is fixed --completed

---
 .../exercise-chatbot.component.ts              |  6 +++++-
 .../exercise-chat-widget.component.ts          | 18 +-----------------
 2 files changed, 6 insertions(+), 18 deletions(-)

diff --git a/src/main/webapp/app/iris/exercise-chatbot/exercise-chatbot.component.ts b/src/main/webapp/app/iris/exercise-chatbot/exercise-chatbot.component.ts
index 20d8795f1c9d..6ea39edac949 100644
--- a/src/main/webapp/app/iris/exercise-chatbot/exercise-chatbot.component.ts
+++ b/src/main/webapp/app/iris/exercise-chatbot/exercise-chatbot.component.ts
@@ -59,6 +59,11 @@ export class ExerciseChatbotComponent implements OnInit, OnDestroy {
         this.stateSubscription = this.stateStore.getState().subscribe((state) => {
             this.hasNewMessages = state.numNewMessages > 0;
         });
+
+        this.chatOpenSubscription = this.sharedService.chatOpen.subscribe((status) => {
+            this.chatOpen = status;
+            this.closed = !status;
+        });
     }
 
     ngOnDestroy() {
@@ -73,7 +78,6 @@ export class ExerciseChatbotComponent implements OnInit, OnDestroy {
             this.stateStore.dispatch(new NumNewMessagesResetAction());
             this.dialog.closeAll();
             //this.runAnimation = false;
-            //this.sharedService.changeChatOpenStatus(false);
             this.chatOpen = false;
             this.closed = true;
         } else {
diff --git a/src/main/webapp/app/iris/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.ts b/src/main/webapp/app/iris/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.ts
index 00881c0f5c70..eb15f2d89bdd 100644
--- a/src/main/webapp/app/iris/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.ts
+++ b/src/main/webapp/app/iris/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.ts
@@ -88,23 +88,6 @@ export class ExerciseChatWidgetComponent implements OnInit, OnDestroy, AfterView
     faThumbsDown = faThumbsDown;
 
     ngOnInit() {
-        /*this.dialog.afterOpened.subscribe(() => {
-            this.sharedService.changeChatOpenStatus(true);
-
-        });
-        this.dialog.afterAllClosed.subscribe(() => {
-            this.sharedService.changeChatOpenStatus(false);
-        });*/
-        /*this.dialog.afterOpened.subscribe(() => {
-            console.log('cağiriyor muuu');
-            this.data.chatOpen = true;
-            this.data.closed = false;
-        });
-        this.dialog.afterAllClosed.subscribe(() => {
-            console.log('kapanıyor mumumumum');
-            this.data.chatOpen = false;
-            this.data.closed = true;
-        });*/
         this.accountService.identity().then((user: User) => {
             if (typeof user!.login === 'string') {
                 this.userAccepted = localStorage.getItem(user!.login) == 'true';
@@ -184,6 +167,7 @@ export class ExerciseChatWidgetComponent implements OnInit, OnDestroy, AfterView
 
     closeChat() {
         this.stateStore.dispatch(new NumNewMessagesResetAction());
+        this.sharedService.changeChatOpenStatus(false);
         this.dialog.closeAll();
     }
 

From e75102a8db85df62d299ee099960e71ceba6f103 Mon Sep 17 00:00:00 2001
From: Ece Eren <aybikeceren@gmail.com>
Date: Mon, 10 Jul 2023 03:19:32 +0300
Subject: [PATCH 075/111] Fix new lines in new messages

---
 .../exercise-chatwidget/exercise-chat-widget.component.html   | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/main/webapp/app/iris/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.html b/src/main/webapp/app/iris/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.html
index 69ca6a9e68b9..6500d5024635 100644
--- a/src/main/webapp/app/iris/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.html
+++ b/src/main/webapp/app/iris/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.html
@@ -52,11 +52,11 @@ <h3 class="header-start">
                 <span *ngIf="i === unreadMessageIndex" class="unread-message" #unreadMessage>{{ 'artemisApp.exerciseChatbot.unreadMessages' | artemisTranslate }}</span>
                 <div *ngFor="let content of message.content">
                     <div *ngIf="isStudentSentMessage(message)" class="bubble-right">
-                        <span [innerHTML]="content.textContent! | htmlForMarkdown"></span>
+                        <pre><span [innerHTML]="content.textContent! | htmlForMarkdown"></span></pre>
                     </div>
                     <div *ngIf="isServerSentMessage(message)" style="width: fit-content">
                         <div class="bubble-left">
-                            <span [innerHTML]="content.textContent! | htmlForMarkdown"></span>
+                            <pre><span [innerHTML]="content.textContent! | htmlForMarkdown"></span></pre>
                         </div>
                         <div class="rate-message-buttons">
                             <button style="all: unset" (click)="rateMessage(message.id, i, true)" [disabled]="message.helpful">

From 593263f2ea1d23b903c245dd4e0b790dbc8eeaf2 Mon Sep 17 00:00:00 2001
From: Ece Eren <aybikeceren@gmail.com>
Date: Mon, 10 Jul 2023 15:42:37 +0200
Subject: [PATCH 076/111] Add the remaining About Iris lines --complete

---
 src/main/webapp/i18n/de/exerciseChatbot.json | 8 ++++----
 src/main/webapp/i18n/en/exerciseChatbot.json | 2 +-
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/main/webapp/i18n/de/exerciseChatbot.json b/src/main/webapp/i18n/de/exerciseChatbot.json
index c0a66b6ea6e7..02882f3fda53 100644
--- a/src/main/webapp/i18n/de/exerciseChatbot.json
+++ b/src/main/webapp/i18n/de/exerciseChatbot.json
@@ -16,10 +16,10 @@
             "text2_3": "<b>Kontextverständnis:</b> Im Gegensatz zu anderen LLM-basierten Chatbots kennt Iris den Programmcode, die Aufgabenstellung, die Buildresultate und die Logdaten. Das bedeutet, dass sie dir die Aufgabenstellung genauer erklären und dir Feedback zu deinem Code oder möglichen Buildfehlern geben kann.",
             "text2_4": "<b>Feedback:</b> Dein Feedback ist wichtig, um das Verhalten von Iris zu verbessern. Indem du bestimmte Antworten oder ganze Konversationen beurteilst, trägst du dazu bei, dass sich Leistung mit der Zeit zu verbessert.",
             "text2_5": "<b>Kommunikationsfähigkeiten:</b> Iris speichert deinen Chatverlauf, so dass du d eine Interaktion fortsetzen und auf frühere Nachrichten zurückgreifen kannst, wenn du Iris erneut öffnest.",
-            "subheading3": "Boundaries & Limitations",
-            "text3_1": "<b>No Solution:</b> Iris is designed to guide your learning process, which means she won't simply give you the complete solution to a task. Instead, she will help you by answering specific questions and offering hints to assist you in solving the task on your own.",
-            "text3_2": "<b>No Off-Topic Conversations:</b> Iris's main focus is programming. Therefore, she won't answer questions that aren't related to programming or the current programming exercise you're working on.",
-            "text3_3": "<b>No Organizational Information:</b> Iris won't provide information to organizational topics.",
+            "subheading3": "Grenzen & Einschränkungen",
+            "text3_1": "<b>Keine Lösung:</b> Iris begleitet dich beim Lösen der Aufgabe und hilft dir, sie besser zu verstehen. Dabei gibt sie dir keine Lösungen, sondern beantwortet konkrete Fragen und gibt kleine Hinweise.",
+            "text3_2": "<b>Keine Diskussionen außerhalb des Themas:</b> Iris' Aufgabe ist es, dir bei deinen Programmierübungen zu helfen. Daher beantwortet sie keine Fragen, die nichts mit dem Thema 'Programmieren' oder mit deiner aktuellen Aufgabe zu tun haben..",
+            "text3_3": "<b>Keine organisatorischen Fragen:</b> Iris ist nicht in der Lage dazu, deine organisatorischen Fragen zu beantworten. Mehr Informationen findest du oft in den ersten Slides oder auf der (Moodle-)Seite des Kurses.",
             "subheading4": "Funktionen des Chat-Widgets",
             "text4_1": "<b>Schließen des Widgets:</b> Du kannst das Widget schließen, indem du auf den 'X'-Button (in der oberen rechten Ecke des Widgets) oder auf den 'Chatbot'-Button (unterhalb des Widgets) klickst.",
             "text4_2": "<b>Verschieben des Widgets:</b> Du kannst das Widget verschieben. Klicke und halte das Widget und ziehe es an die gewünschte Position.",
diff --git a/src/main/webapp/i18n/en/exerciseChatbot.json b/src/main/webapp/i18n/en/exerciseChatbot.json
index 05fc0dc812a0..05e890f4344f 100644
--- a/src/main/webapp/i18n/en/exerciseChatbot.json
+++ b/src/main/webapp/i18n/en/exerciseChatbot.json
@@ -19,7 +19,7 @@
             "subheading3": "Boundaries & Limitations",
             "text3_1": "<b>No Solution:</b> Iris is designed to guide your learning process, which means she won't simply give you the complete solution to a task. Instead, she will help you by answering specific questions and offering hints to assist you in solving the task on your own.",
             "text3_2": "<b>No Off-Topic Conversations:</b> Iris's main focus is programming. Therefore, she won't answer questions that aren't related to programming or the current programming exercise you're working on.",
-            "text3_3": "<b>No Organizational Information:</b> Iris won't provide information to organizational topics.",
+            "text3_3": "<b>No Organizational Information:</b> Iris won't provide information to organizational topics. Often, the first slides or the course website will give you more information.",
             "subheading4": "Chat Widget Function",
             "text4_1": "<b>Close the Widget:</b> You can close the widget by clicking on the 'X' button (top right corner of the widget) or on the chatbot button (below the widget).",
             "text4_2": "<b>Movable Functionality:</b> You have the flexibility to move the widget around. Simply click and hold on the widget and drag it to the desired position.",

From 1a2731924445489fb2bca27463b6f8ff1f8851e7 Mon Sep 17 00:00:00 2001
From: Ece Eren <aybikeceren@gmail.com>
Date: Mon, 10 Jul 2023 15:49:16 +0200
Subject: [PATCH 077/111] Enable textarea and disable Enter button --complete

---
 .../exercise-chat-widget.component.html       |  2 +-
 .../exercise-chat-widget.component.ts         | 20 +++++++++++--------
 2 files changed, 13 insertions(+), 9 deletions(-)

diff --git a/src/main/webapp/app/iris/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.html b/src/main/webapp/app/iris/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.html
index 6500d5024635..93a11047332c 100644
--- a/src/main/webapp/app/iris/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.html
+++ b/src/main/webapp/app/iris/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.html
@@ -92,7 +92,7 @@ <h3 class="header-start">
         <!-- input field section -->
         <div class="chat-input">
             <textarea
-                [disabled]="!userAccepted || isLoading"
+                [disabled]="!userAccepted"
                 [(ngModel)]="newMessageTextContent"
                 (input)="onInput()"
                 (paste)="onPaste()"
diff --git a/src/main/webapp/app/iris/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.ts b/src/main/webapp/app/iris/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.ts
index eb15f2d89bdd..df18d38b1eda 100644
--- a/src/main/webapp/app/iris/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.ts
+++ b/src/main/webapp/app/iris/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.ts
@@ -225,15 +225,19 @@ export class ExerciseChatWidgetComponent implements OnInit, OnDestroy, AfterView
 
     handleKey(event: KeyboardEvent): void {
         if (event.key === 'Enter') {
-            if (!event.shiftKey) {
-                event.preventDefault();
-                this.onSend();
+            if (!this.isLoading) {
+                if (!event.shiftKey) {
+                    event.preventDefault();
+                    this.onSend();
+                } else {
+                    const textArea = event.target as HTMLTextAreaElement;
+                    const { selectionStart, selectionEnd } = textArea;
+                    const value = textArea.value;
+                    textArea.value = value.slice(0, selectionStart) + value.slice(selectionEnd);
+                    textArea.selectionStart = textArea.selectionEnd = selectionStart + 1;
+                }
             } else {
-                const textArea = event.target as HTMLTextAreaElement;
-                const { selectionStart, selectionEnd } = textArea;
-                const value = textArea.value;
-                textArea.value = value.slice(0, selectionStart) + value.slice(selectionEnd);
-                textArea.selectionStart = textArea.selectionEnd = selectionStart + 1;
+                event.preventDefault();
             }
         }
     }

From c4c4405ba334f2a54e1ad80624f1b6f5615f9d9c Mon Sep 17 00:00:00 2001
From: Ece Eren <aybikeceren@gmail.com>
Date: Mon, 10 Jul 2023 17:08:17 +0200
Subject: [PATCH 078/111] Fix resetChatBodyHeight

---
 .../exercise-chatwidget/exercise-chat-widget.component.ts    | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/main/webapp/app/iris/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.ts b/src/main/webapp/app/iris/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.ts
index df18d38b1eda..044e124c39bb 100644
--- a/src/main/webapp/app/iris/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.ts
+++ b/src/main/webapp/app/iris/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.ts
@@ -295,8 +295,9 @@ export class ExerciseChatWidgetComponent implements OnInit, OnDestroy, AfterView
         const textarea: HTMLTextAreaElement = this.messageTextarea.nativeElement;
         const scrollArrow: HTMLElement = this.scrollArrow.nativeElement;
         textarea.rows = 1;
-        scrollArrow.style.bottom = '60 px';
-        chatBody.style.height = `calc(100% - 100px)`;
+        textarea.style.height = '';
+        scrollArrow.style.bottom = '';
+        chatBody.style.height = '';
         this.stateStore.dispatch(new NumNewMessagesResetAction());
     }
 

From 04c012808489cf22369c7c18299086a7046ef952 Mon Sep 17 00:00:00 2001
From: Asli Aykan <asliaykan97@gmail.com>
Date: Mon, 10 Jul 2023 18:37:00 +0200
Subject: [PATCH 079/111] refactor

---
 src/main/webapp/app/iris/iris.module.ts | 15 +++++++++++++--
 1 file changed, 13 insertions(+), 2 deletions(-)

diff --git a/src/main/webapp/app/iris/iris.module.ts b/src/main/webapp/app/iris/iris.module.ts
index d28a79da49f0..9e7658bea5c8 100644
--- a/src/main/webapp/app/iris/iris.module.ts
+++ b/src/main/webapp/app/iris/iris.module.ts
@@ -1,7 +1,7 @@
 import { NgModule } from '@angular/core';
 import { MatDialogModule } from '@angular/material/dialog';
 import { CommonModule } from '@angular/common';
-import { FormsModule } from '@angular/forms'; // Import FormsModule
+import { FormsModule } from '@angular/forms';
 import { ExerciseChatWidgetComponent } from 'app/iris/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component';
 import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
 import { ArtemisSharedModule } from 'app/shared/shared.module';
@@ -21,13 +21,24 @@ import { IrisProgrammingExerciseSettingsUpdateComponent } from 'app/iris/setting
     declarations: [
         ExerciseChatWidgetComponent,
         ExerciseChatbotComponent,
+        AboutIrisComponent,
         IrisSettingsUpdateComponent,
         IrisGlobalSettingsUpdateComponent,
         IrisCourseSettingsUpdateComponent,
         IrisProgrammingExerciseSettingsUpdateComponent,
         IrisSubSettingsUpdateComponent,
     ],
-    imports: [CommonModule, MatDialogModule, FormsModule, FontAwesomeModule, ArtemisSharedModule, ArtemisMarkdownModule, ArtemisSharedComponentModule],
+    imports: [
+        CommonModule,
+        MatDialogModule,
+        FormsModule,
+        FontAwesomeModule,
+        ArtemisSharedModule,
+        ArtemisMarkdownModule,
+        ArtemisSharedComponentModule,
+        AngularDraggableModule,
+        RouterModule,
+    ],
     providers: [],
     exports: [ExerciseChatbotComponent],
 })

From d8557c8d1669f0710d254aa1a0eabd63429e9485 Mon Sep 17 00:00:00 2001
From: Dmytro Polityka <dmytro.polityka@tum.de>
Date: Mon, 10 Jul 2023 20:36:27 +0200
Subject: [PATCH 080/111] fix autofocus issue

---
 .../exercise-chatwidget/exercise-chat-widget.component.ts    | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/main/webapp/app/iris/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.ts b/src/main/webapp/app/iris/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.ts
index aae5db39d832..785c65f9c417 100644
--- a/src/main/webapp/app/iris/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.ts
+++ b/src/main/webapp/app/iris/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.ts
@@ -32,7 +32,7 @@ export class ExerciseChatWidgetComponent implements OnInit, OnDestroy, AfterView
     @ViewChild('chatWidget') chatWidget!: ElementRef;
     @ViewChild('chatBody') chatBody!: ElementRef;
     @ViewChild('scrollArrow') scrollArrow!: ElementRef;
-    @ViewChild('messageTextarea', { static: false }) messageTextarea: ElementRef;
+    @ViewChild('messageTextarea', { static: false }) messageTextarea: ElementRef<HTMLTextAreaElement>;
     @ViewChild('unreadMessage', { static: false }) unreadMessage!: ElementRef;
 
     readonly SENDER_USER = IrisSender.USER;
@@ -113,7 +113,8 @@ export class ExerciseChatWidgetComponent implements OnInit, OnDestroy, AfterView
         });
         setTimeout(() => {
             this.isInitializing = false;
-        }, 50);
+            this.messageTextarea.nativeElement.focus();
+        }, 150);
         this.loadFirstMessage();
     }
 

From 33620eb53775cbb6eac184d3e4a44228ca901bf6 Mon Sep 17 00:00:00 2001
From: Asli Aykan <asliaykan97@gmail.com>
Date: Tue, 11 Jul 2023 12:30:47 +0200
Subject: [PATCH 081/111] comments added

---
 .../exercise-chatbot.component.ts             |  16 +-
 .../exercise-chat-widget.component.ts         | 145 ++++++++++++++----
 2 files changed, 133 insertions(+), 28 deletions(-)

diff --git a/src/main/webapp/app/iris/exercise-chatbot/exercise-chatbot.component.ts b/src/main/webapp/app/iris/exercise-chatbot/exercise-chatbot.component.ts
index 6ea39edac949..92fa68425261 100644
--- a/src/main/webapp/app/iris/exercise-chatbot/exercise-chatbot.component.ts
+++ b/src/main/webapp/app/iris/exercise-chatbot/exercise-chatbot.component.ts
@@ -49,6 +49,7 @@ export class ExerciseChatbotComponent implements OnInit, OnDestroy {
     ) {}
 
     ngOnInit() {
+        // Subscribes to route params and gets the exerciseId from the route
         this.route.params.subscribe((params) => {
             this.exerciseId = parseInt(params['exerciseId'], 10);
             if (this.exerciseId != null) {
@@ -56,10 +57,12 @@ export class ExerciseChatbotComponent implements OnInit, OnDestroy {
             }
         });
 
+        // Subscribes to the stateStore to check for new messages
         this.stateSubscription = this.stateStore.getState().subscribe((state) => {
             this.hasNewMessages = state.numNewMessages > 0;
         });
 
+        // Subscribes to the sharedService to get the status of chatOpen
         this.chatOpenSubscription = this.sharedService.chatOpen.subscribe((status) => {
             this.chatOpen = status;
             this.closed = !status;
@@ -67,27 +70,36 @@ export class ExerciseChatbotComponent implements OnInit, OnDestroy {
     }
 
     ngOnDestroy() {
+        // Closes the dialog if it is open
         if (this.dialogRef) {
             this.dialogRef.close();
         }
+        // Unsubscribes from the stateSubscription
         this.stateSubscription.unsubscribe();
     }
 
+    /**
+     * Handles the click event of the button.
+     * If the chat is open, it resets the number of new messages, closes the dialog, and sets chatOpen to false.
+     * If the chat is closed, it opens the chat dialog and sets chatOpen to true.
+     */
     public handleButtonClick() {
         if (this.chatOpen && this.dialogRef) {
             this.stateStore.dispatch(new NumNewMessagesResetAction());
             this.dialog.closeAll();
-            //this.runAnimation = false;
             this.chatOpen = false;
             this.closed = true;
         } else {
             this.chatOpen = true;
             this.openChat();
             this.closed = false;
-            //this.runAnimation = true;
         }
     }
 
+    /**
+     * Opens the chat dialog using MatDialog.
+     * Sets the configuration options for the dialog, including position, size, and data.
+     */
     openChat() {
         this.dialogRef = this.dialog.open(ExerciseChatWidgetComponent, {
             hasBackdrop: false,
diff --git a/src/main/webapp/app/iris/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.ts b/src/main/webapp/app/iris/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.ts
index 785c65f9c417..c11e3bede154 100644
--- a/src/main/webapp/app/iris/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.ts
+++ b/src/main/webapp/app/iris/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.ts
@@ -29,16 +29,31 @@ import dayjs from 'dayjs';
     styleUrls: ['./exercise-chat-widget.component.scss'],
 })
 export class ExerciseChatWidgetComponent implements OnInit, OnDestroy, AfterViewInit {
+    // Icons
+    faCircle = faCircle;
+    faPaperPlane = faPaperPlane;
+    faExpand = faExpand;
+    faXmark = faXmark;
+    faArrowDown = faArrowDown;
+    faRobot = faRobot;
+    faCircleInfo = faCircleInfo;
+    faCompress = faCompress;
+    faThumbsUp = faThumbsUp;
+    faThumbsDown = faThumbsDown;
+
+    // ViewChilds
     @ViewChild('chatWidget') chatWidget!: ElementRef;
     @ViewChild('chatBody') chatBody!: ElementRef;
     @ViewChild('scrollArrow') scrollArrow!: ElementRef;
     @ViewChild('messageTextarea', { static: false }) messageTextarea: ElementRef<HTMLTextAreaElement>;
     @ViewChild('unreadMessage', { static: false }) unreadMessage!: ElementRef;
 
+    // Constants
     readonly SENDER_USER = IrisSender.USER;
     readonly SENDER_SERVER = IrisSender.LLM;
-    readonly stateStore: IrisStateStore;
 
+    // State variables
+    stateStore: IrisStateStore;
     stateSubscription: Subscription;
     messages: IrisMessage[] = [];
     newMessageTextContent = '';
@@ -51,6 +66,7 @@ export class ExerciseChatWidgetComponent implements OnInit, OnDestroy, AfterView
     isInitializing = false;
     isFirstMessage = false;
 
+    // User preferences
     userAccepted = false;
     isScrolledToBottom = true;
     rows = 1;
@@ -82,28 +98,25 @@ export class ExerciseChatWidgetComponent implements OnInit, OnDestroy, AfterView
             }
         });
     }
-    // Icons
-    faCircle = faCircle;
-    faPaperPlane = faPaperPlane;
-    faExpand = faExpand;
-    faXmark = faXmark;
-    faArrowDown = faArrowDown;
-    faRobot = faRobot;
-    faCircleInfo = faCircleInfo;
-    faCompress = faCompress;
-    faThumbsUp = faThumbsUp;
-    faThumbsDown = faThumbsDown;
 
     ngOnInit() {
+        // Check if the user has accepted the chat widget permissions
         this.accountService.identity().then((user: User) => {
             if (typeof user!.login === 'string') {
                 this.userAccepted = localStorage.getItem(user!.login) == 'true';
             }
         });
+
+        // Animate dots
         this.animateDots();
+
+        // Set initializing flag to true and load the first message
         setTimeout(() => {
             this.isInitializing = true;
         }, 50);
+        this.loadFirstMessage();
+
+        // Subscribe to state changes
         this.stateSubscription = this.stateStore.getState().subscribe((state) => {
             this.messages = state.messages as IrisMessage[];
             this.isLoading = state.isLoading;
@@ -111,48 +124,46 @@ export class ExerciseChatWidgetComponent implements OnInit, OnDestroy, AfterView
             this.sessionId = Number(state.sessionId);
             this.numNewMessages = state.numNewMessages;
         });
+
+        // Set initializing flag to false and focus on message textarea
         setTimeout(() => {
             this.isInitializing = false;
             this.messageTextarea.nativeElement.focus();
         }, 150);
-        this.loadFirstMessage();
-    }
-
-    scrollToBottom(behavior: ScrollBehavior) {
-        setTimeout(() => {
-            const chatBodyElement: HTMLElement = this.chatBody.nativeElement;
-            chatBodyElement.scrollTo({
-                top: chatBodyElement.scrollHeight,
-                behavior: behavior,
-            });
-        });
     }
 
     ngAfterViewInit() {
-        this.unreadMessageIndex = this.messages.length <= 1 || this.numNewMessages === 0 ? -1 : this.messages.length - this.numNewMessages; //<=1 first greeting message from chatbot will not show as unread
+        // Determine the unread message index and scroll to the unread message if applicable
+        this.unreadMessageIndex = this.messages.length <= 1 || this.numNewMessages === 0 ? -1 : this.messages.length - this.numNewMessages;
         if (this.numNewMessages > 0) {
             this.scrollToUnread();
         } else {
             this.scrollToBottom('auto');
         }
 
-        const chatWidget: HTMLElement = this.chatWidget.nativeElement; // element you want to watch
+        // Add a resize sensor to the chat widget to store the new width and height in local storage
+        const chatWidget: HTMLElement = this.chatWidget.nativeElement;
         new ResizeSensor(chatWidget, () => {
             localStorage.setItem('widgetWidth', chatWidget.style.width);
             localStorage.setItem('widgetHeight', chatWidget.style.height);
         });
     }
-
     ngOnDestroy() {
         this.stateSubscription.unsubscribe();
     }
 
+    /**
+     * Animates the dots in the chat widget.
+     */
     animateDots() {
         setInterval(() => {
             this.dots = this.dots < 3 ? (this.dots += 1) : (this.dots = 1);
         }, 500);
     }
 
+    /**
+     * Loads the first message in the conversation if it's not already loaded.
+     */
     loadFirstMessage(): void {
         const firstMessageContent = {
             textContent: 'artemisApp.exerciseChatbot.firstMessage',
@@ -174,6 +185,23 @@ export class ExerciseChatWidgetComponent implements OnInit, OnDestroy, AfterView
         }
     }
 
+    /**
+     * Scrolls the chat body to the bottom.
+     * @param behavior - The scroll behavior.
+     */
+    scrollToBottom(behavior: ScrollBehavior) {
+        setTimeout(() => {
+            const chatBodyElement: HTMLElement = this.chatBody.nativeElement;
+            chatBodyElement.scrollTo({
+                top: chatBodyElement.scrollHeight,
+                behavior: behavior,
+            });
+        });
+    }
+
+    /**
+     * Handles the send button click event and sends the user's message.
+     */
     onSend(): void {
         if (this.newMessageTextContent.trim()) {
             const message = this.newUserMessage(this.newMessageTextContent);
@@ -188,6 +216,9 @@ export class ExerciseChatWidgetComponent implements OnInit, OnDestroy, AfterView
         this.resetChatBodyHeight();
     }
 
+    /**
+     * Scrolls to the unread message.
+     */
     scrollToUnread() {
         setTimeout(() => {
             const unreadMessageElement: HTMLElement = this.unreadMessage.nativeElement;
@@ -195,12 +226,18 @@ export class ExerciseChatWidgetComponent implements OnInit, OnDestroy, AfterView
         });
     }
 
+    /**
+     * Closes the chat widget.
+     */
     closeChat() {
         this.stateStore.dispatch(new NumNewMessagesResetAction());
         this.sharedService.changeChatOpenStatus(false);
         this.dialog.closeAll();
     }
 
+    /**
+     * Accepts the permission to use the chat widget.
+     */
     acceptPermission() {
         this.accountService.identity().then((user: User) => {
             if (typeof user!.login === 'string') {
@@ -211,6 +248,9 @@ export class ExerciseChatWidgetComponent implements OnInit, OnDestroy, AfterView
         this.userAccepted = true;
     }
 
+    /**
+     * Checks if the chat body is scrolled to the bottom.
+     */
     checkChatScroll() {
         const chatBody = this.chatBody.nativeElement;
         const scrollHeight = chatBody.scrollHeight;
@@ -219,6 +259,9 @@ export class ExerciseChatWidgetComponent implements OnInit, OnDestroy, AfterView
         this.isScrolledToBottom = scrollHeight - scrollTop === clientHeight;
     }
 
+    /**
+     * Resets the screen by closing and reopening the chat widget.
+     */
     resetScreen() {
         setTimeout(() => {
             this.dialog.closeAll();
@@ -239,6 +282,9 @@ export class ExerciseChatWidgetComponent implements OnInit, OnDestroy, AfterView
         }, 140);
     }
 
+    /**
+     * Maximizes the chat widget screen.
+     */
     maximizeScreen() {
         this.resetScreen();
         localStorage.setItem('widgetWidth', this.fullWidth);
@@ -246,6 +292,9 @@ export class ExerciseChatWidgetComponent implements OnInit, OnDestroy, AfterView
         localStorage.setItem('fullSize', 'true');
     }
 
+    /**
+     * Minimizes the chat widget screen.
+     */
     minimizeScreen() {
         this.resetScreen();
         localStorage.setItem('widgetWidth', `${this.initialWidth}px`);
@@ -253,6 +302,10 @@ export class ExerciseChatWidgetComponent implements OnInit, OnDestroy, AfterView
         localStorage.setItem('fullSize', 'false');
     }
 
+    /**
+     * Handles the key events in the message textarea.
+     * @param event - The keyboard event.
+     */
     handleKey(event: KeyboardEvent): void {
         if (event.key === 'Enter') {
             if (!this.isLoading) {
@@ -272,16 +325,25 @@ export class ExerciseChatWidgetComponent implements OnInit, OnDestroy, AfterView
         }
     }
 
+    /**
+     * Handles the input event in the message textarea.
+     */
     onInput() {
         this.adjustTextareaRows();
     }
 
+    /**
+     * Handles the paste event in the message textarea.
+     */
     onPaste() {
         setTimeout(() => {
             this.adjustTextareaRows();
         }, 0);
     }
 
+    /**
+     * Adjusts the height of the message textarea based on its content.
+     */
     adjustTextareaRows() {
         const textarea: HTMLTextAreaElement = this.messageTextarea.nativeElement;
         textarea.style.height = 'auto'; // Reset the height to auto
@@ -294,6 +356,9 @@ export class ExerciseChatWidgetComponent implements OnInit, OnDestroy, AfterView
         this.adjustChatBodyHeight(Math.min(textarea.scrollHeight, maxHeight) / lineHeight);
     }
 
+    /**
+     * Handles the row change event in the message textarea.
+     */
     onRowChange() {
         const textarea: HTMLTextAreaElement = this.messageTextarea.nativeElement;
         const newRows = textarea.value.split('\n').length;
@@ -306,6 +371,10 @@ export class ExerciseChatWidgetComponent implements OnInit, OnDestroy, AfterView
         }
     }
 
+    /**
+     * Adjusts the height of the chat body based on the number of rows in the message textarea.
+     * @param newRows - The new number of rows.
+     */
     adjustChatBodyHeight(newRows: number) {
         const textarea: HTMLTextAreaElement = this.messageTextarea.nativeElement;
         const chatBody: HTMLElement = this.chatBody.nativeElement;
@@ -320,6 +389,9 @@ export class ExerciseChatWidgetComponent implements OnInit, OnDestroy, AfterView
         }, 10);
     }
 
+    /**
+     * Resets the height of the chat body.
+     */
     resetChatBodyHeight() {
         const chatBody: HTMLElement = this.chatBody.nativeElement;
         const textarea: HTMLTextAreaElement = this.messageTextarea.nativeElement;
@@ -331,6 +403,12 @@ export class ExerciseChatWidgetComponent implements OnInit, OnDestroy, AfterView
         this.stateStore.dispatch(new NumNewMessagesResetAction());
     }
 
+    /**
+     * Rates a message as helpful or unhelpful.
+     * @param message_id - The ID of the message to rate.
+     * @param index - The index of the message in the messages array.
+     * @param helpful - A boolean indicating if the message is helpful or not.
+     */
     rateMessage(message_id: number, index: number, helpful: boolean) {
         this.httpMessageService
             .rateMessage(<number>this.sessionId, message_id, helpful)
@@ -342,14 +420,29 @@ export class ExerciseChatWidgetComponent implements OnInit, OnDestroy, AfterView
             });
     }
 
+    /**
+     * Checks if a message is a student-sent message.
+     * @param message - The message to check.
+     * @returns A boolean indicating if the message is a student-sent message.
+     */
     isStudentSentMessage(message: IrisMessage): message is IrisClientMessage {
         return isStudentSentMessage(message);
     }
 
+    /**
+     * Checks if a message is a server-sent message.
+     * @param message - The message to check.
+     * @returns A boolean indicating if the message is a server-sent message.
+     */
     isServerSentMessage(message: IrisMessage): message is IrisServerMessage {
         return isServerSentMessage(message);
     }
 
+    /**
+     * Creates a new user message.
+     * @param message - The content of the message.
+     * @returns A new IrisClientMessage object representing the user message.
+     */
     private newUserMessage(message: string): IrisClientMessage {
         const content: IrisMessageContent = {
             type: IrisMessageContentType.TEXT,

From a4e2ad9eaa2cb1c0c0016c9635157d6b857ddab6 Mon Sep 17 00:00:00 2001
From: RY997 <liuxinyao97@gmail.com>
Date: Tue, 11 Jul 2023 16:52:56 +0200
Subject: [PATCH 082/111] fix client-test failed(part)

---
 .../ui/exercise-chatbot.component.spec.ts     | 21 +++++--------------
 1 file changed, 5 insertions(+), 16 deletions(-)

diff --git a/src/test/javascript/spec/component/iris/ui/exercise-chatbot.component.spec.ts b/src/test/javascript/spec/component/iris/ui/exercise-chatbot.component.spec.ts
index 0121eeeb6a07..dc8bbf743f96 100644
--- a/src/test/javascript/spec/component/iris/ui/exercise-chatbot.component.spec.ts
+++ b/src/test/javascript/spec/component/iris/ui/exercise-chatbot.component.spec.ts
@@ -95,13 +95,16 @@ describe('ExerciseChatbotComponent', () => {
 
         expect(mockDialog.open).toHaveBeenCalledWith(ExerciseChatWidgetComponent, {
             hasBackdrop: false,
+            disableClose: true,
             position: { bottom: '0px', right: '0px' },
             data: expect.objectContaining({
                 stateStore: stateStore,
+                fullSize: false,
+                widgetHeight: '430px',
+                widgetWidth: '330px',
             }),
             scrollStrategy: {},
         });
-        expect(component.buttonDisabled).toBeTrue();
     });
 
     it('should subscribe to route.params and call sessionService.getCurrentSessionOrCreate', waitForAsync(async () => {
@@ -160,21 +163,7 @@ describe('ExerciseChatbotComponent', () => {
 
         // when
         component.handleButtonClick();
-
-        // then
-        expect(stateStore.dispatch).toHaveBeenCalledWith(new NumNewMessagesResetAction());
-    });
-
-    it('should call action to reset number of new messages when press escape key', () => {
-        // given
-        const eventMock = new KeyboardEvent('keydown', { code: 'Escape' });
-        jest.spyOn(stateStore, 'dispatch');
-        stateStore.dispatch(new SessionReceivedAction(0, []));
-        component.openChat();
-
-        // when
-        component.onEscapeKeyDown(eventMock);
-
+        fixture.detectChanges();
         // then
         expect(stateStore.dispatch).toHaveBeenCalledWith(new NumNewMessagesResetAction());
     });

From 0986de3df393f027dda24b0c0175327e5d816ca9 Mon Sep 17 00:00:00 2001
From: Ece Eren <aybikeceren@gmail.com>
Date: Tue, 11 Jul 2023 17:47:02 +0200
Subject: [PATCH 083/111] Fix sending first message issue

---
 .../exercise-chat-widget.component.ts                 | 11 +----------
 1 file changed, 1 insertion(+), 10 deletions(-)

diff --git a/src/main/webapp/app/iris/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.ts b/src/main/webapp/app/iris/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.ts
index c11e3bede154..ba17d12432fe 100644
--- a/src/main/webapp/app/iris/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.ts
+++ b/src/main/webapp/app/iris/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.ts
@@ -100,23 +100,15 @@ export class ExerciseChatWidgetComponent implements OnInit, OnDestroy, AfterView
     }
 
     ngOnInit() {
-        // Check if the user has accepted the chat widget permissions
         this.accountService.identity().then((user: User) => {
             if (typeof user!.login === 'string') {
                 this.userAccepted = localStorage.getItem(user!.login) == 'true';
             }
         });
-
-        // Animate dots
         this.animateDots();
-
-        // Set initializing flag to true and load the first message
         setTimeout(() => {
             this.isInitializing = true;
         }, 50);
-        this.loadFirstMessage();
-
-        // Subscribe to state changes
         this.stateSubscription = this.stateStore.getState().subscribe((state) => {
             this.messages = state.messages as IrisMessage[];
             this.isLoading = state.isLoading;
@@ -124,12 +116,11 @@ export class ExerciseChatWidgetComponent implements OnInit, OnDestroy, AfterView
             this.sessionId = Number(state.sessionId);
             this.numNewMessages = state.numNewMessages;
         });
-
-        // Set initializing flag to false and focus on message textarea
         setTimeout(() => {
             this.isInitializing = false;
             this.messageTextarea.nativeElement.focus();
         }, 150);
+        this.loadFirstMessage();
     }
 
     ngAfterViewInit() {

From 90374d129f0a4c5eb385e9c2635739e273ce7abe Mon Sep 17 00:00:00 2001
From: RY997 <liuxinyao97@gmail.com>
Date: Tue, 11 Jul 2023 17:50:24 +0200
Subject: [PATCH 084/111] fix client-test failed(complete)

---
 .../app/iris/exercise-chatbot/exercise-chatbot.component.ts      | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/main/webapp/app/iris/exercise-chatbot/exercise-chatbot.component.ts b/src/main/webapp/app/iris/exercise-chatbot/exercise-chatbot.component.ts
index 92fa68425261..07c80a979856 100644
--- a/src/main/webapp/app/iris/exercise-chatbot/exercise-chatbot.component.ts
+++ b/src/main/webapp/app/iris/exercise-chatbot/exercise-chatbot.component.ts
@@ -101,6 +101,7 @@ export class ExerciseChatbotComponent implements OnInit, OnDestroy {
      * Sets the configuration options for the dialog, including position, size, and data.
      */
     openChat() {
+        this.chatOpen = true;
         this.dialogRef = this.dialog.open(ExerciseChatWidgetComponent, {
             hasBackdrop: false,
             scrollStrategy: this.overlay.scrollStrategies.noop(),

From 5a1d0f0c60d0fd3fd996699ce9fc9c879071afb7 Mon Sep 17 00:00:00 2001
From: Asli Aykan <asliaykan97@gmail.com>
Date: Tue, 11 Jul 2023 18:25:41 +0200
Subject: [PATCH 085/111] refactor

---
 .../exercise-chatwidget/exercise-chat-widget.component.ts     | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/main/webapp/app/iris/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.ts b/src/main/webapp/app/iris/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.ts
index c11e3bede154..04f6837ceec4 100644
--- a/src/main/webapp/app/iris/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.ts
+++ b/src/main/webapp/app/iris/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.ts
@@ -114,7 +114,6 @@ export class ExerciseChatWidgetComponent implements OnInit, OnDestroy, AfterView
         setTimeout(() => {
             this.isInitializing = true;
         }, 50);
-        this.loadFirstMessage();
 
         // Subscribe to state changes
         this.stateSubscription = this.stateStore.getState().subscribe((state) => {
@@ -153,7 +152,7 @@ export class ExerciseChatWidgetComponent implements OnInit, OnDestroy, AfterView
     }
 
     /**
-     * Animates the dots in the chat widget.
+     * Animates the dots while loading each Iris message in the chat widget.
      */
     animateDots() {
         setInterval(() => {
@@ -246,6 +245,7 @@ export class ExerciseChatWidgetComponent implements OnInit, OnDestroy, AfterView
         });
 
         this.userAccepted = true;
+        this.loadFirstMessage();
     }
 
     /**

From 73c17a95db8bcacbc3e8b8c75a57c8047dc29145 Mon Sep 17 00:00:00 2001
From: Ece Eren <aybikeceren@gmail.com>
Date: Tue, 11 Jul 2023 19:05:34 +0200
Subject: [PATCH 086/111] Local storage is removed from the code

---
 .../exercise-chat-widget.component.html         | 14 +++++++-------
 .../exercise-chat-widget.component.scss         |  1 -
 .../exercise-chat-widget.component.ts           | 17 ++++-------------
 3 files changed, 11 insertions(+), 21 deletions(-)

diff --git a/src/main/webapp/app/iris/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.html b/src/main/webapp/app/iris/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.html
index 9b1831571cce..3fe580e5fbc1 100644
--- a/src/main/webapp/app/iris/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.html
+++ b/src/main/webapp/app/iris/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.html
@@ -41,13 +41,6 @@ <h3 class="header-start">
 
         <!-- main chat section -->
         <div class="chat-body" #chatBody (scroll)="checkChatScroll()">
-            <div class="p-chat" *ngIf="!userAccepted && !isInitializing">
-                <div class="message-text">{{ 'artemisApp.exerciseChatbot.popUpMessage' | artemisTranslate }}</div>
-                <div class="button-container">
-                    <button class="button" (click)="acceptPermission()">{{ 'artemisApp.exerciseChatbot.accept' | artemisTranslate }}</button>
-                    <button class="button" (click)="closeChat()">{{ 'artemisApp.exerciseChatbot.decline' | artemisTranslate }}</button>
-                </div>
-            </div>
             <div *ngFor="let message of messages; let i = index">
                 <span *ngIf="i === unreadMessageIndex" class="unread-message" #unreadMessage>{{ 'artemisApp.exerciseChatbot.unreadMessages' | artemisTranslate }}</span>
                 <div *ngFor="let content of message.content">
@@ -82,6 +75,13 @@ <h3 class="header-start">
                     </div>
                 </div>
             </div>
+            <div class="p-chat" *ngIf="!userAccepted && !isInitializing">
+                <div class="message-text">{{ 'artemisApp.exerciseChatbot.popUpMessage' | artemisTranslate }}</div>
+                <div class="button-container">
+                    <button class="button" (click)="acceptPermission()">{{ 'artemisApp.exerciseChatbot.accept' | artemisTranslate }}</button>
+                    <button class="button" (click)="closeChat()">{{ 'artemisApp.exerciseChatbot.decline' | artemisTranslate }}</button>
+                </div>
+            </div>
             <div class="scroll-to-bottom" [hidden]="isScrolledToBottom" (click)="scrollToBottom('smooth')" #scrollArrow>
                 <fa-icon [icon]="faArrowDown"></fa-icon>
             </div>
diff --git a/src/main/webapp/app/iris/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.scss b/src/main/webapp/app/iris/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.scss
index 33c7ca912640..bbf6039ac8a3 100644
--- a/src/main/webapp/app/iris/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.scss
+++ b/src/main/webapp/app/iris/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.scss
@@ -172,7 +172,6 @@ pre {
     flex-direction: column;
     align-items: stretch;
     border: 1.5px solid var(--iris-client-chat-background);
-    overflow: hidden;
 }
 
 .message-text {
diff --git a/src/main/webapp/app/iris/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.ts b/src/main/webapp/app/iris/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.ts
index 04f6837ceec4..8d4e50b38834 100644
--- a/src/main/webapp/app/iris/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.ts
+++ b/src/main/webapp/app/iris/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.ts
@@ -100,14 +100,11 @@ export class ExerciseChatWidgetComponent implements OnInit, OnDestroy, AfterView
     }
 
     ngOnInit() {
-        // Check if the user has accepted the chat widget permissions
-        this.accountService.identity().then((user: User) => {
-            if (typeof user!.login === 'string') {
-                this.userAccepted = localStorage.getItem(user!.login) == 'true';
+        setTimeout(() => {
+            if (this.messages.length != 0) {
+                this.userAccepted = true;
             }
-        });
-
-        // Animate dots
+        }, 100);
         this.animateDots();
 
         // Set initializing flag to true and load the first message
@@ -238,12 +235,6 @@ export class ExerciseChatWidgetComponent implements OnInit, OnDestroy, AfterView
      * Accepts the permission to use the chat widget.
      */
     acceptPermission() {
-        this.accountService.identity().then((user: User) => {
-            if (typeof user!.login === 'string') {
-                localStorage.setItem(user!.login, 'true');
-            }
-        });
-
         this.userAccepted = true;
         this.loadFirstMessage();
     }

From 9e183e2df78f8581e5599c533435a311b5b8db4a Mon Sep 17 00:00:00 2001
From: Khoa Nguyen <dakennguyen@gmail.com>
Date: Thu, 13 Jul 2023 16:31:19 +0200
Subject: [PATCH 087/111] Add clear chat history button

---
 .../exercise-chatbot.component.ts             |  2 ++
 .../exercise-chat-widget.component.html       |  3 ++
 .../exercise-chat-widget.component.ts         | 12 ++++++-
 src/main/webapp/app/iris/session.service.ts   |  2 +-
 .../component/iris/session.service.spec.ts    | 33 +++++++++++++++++++
 .../ui/exercise-chat-widget.component.spec.ts | 18 +++++++++-
 6 files changed, 67 insertions(+), 3 deletions(-)

diff --git a/src/main/webapp/app/iris/exercise-chatbot/exercise-chatbot.component.ts b/src/main/webapp/app/iris/exercise-chatbot/exercise-chatbot.component.ts
index 6ea39edac949..86e484b450a9 100644
--- a/src/main/webapp/app/iris/exercise-chatbot/exercise-chatbot.component.ts
+++ b/src/main/webapp/app/iris/exercise-chatbot/exercise-chatbot.component.ts
@@ -96,6 +96,8 @@ export class ExerciseChatbotComponent implements OnInit, OnDestroy {
             disableClose: true,
             data: {
                 stateStore: this.stateStore,
+                exerciseId: this.exerciseId,
+                sessionService: this.sessionService,
                 widgetWidth: localStorage.getItem('widgetWidth') || `${this.initialWidth}px`,
                 widgetHeight: localStorage.getItem('widgetHeight') || `${this.initialHeight}px`,
                 fullSize: localStorage.getItem('fullSize') === 'true',
diff --git a/src/main/webapp/app/iris/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.html b/src/main/webapp/app/iris/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.html
index 9b1831571cce..796bf7557f0c 100644
--- a/src/main/webapp/app/iris/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.html
+++ b/src/main/webapp/app/iris/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.html
@@ -25,6 +25,9 @@ <h3 class="header-start">
                     </a>
                 </h3>
                 <div class="button-container">
+                    <button id="clear-chat-session" (click)="onClearSession()" class="header-icon">
+                        <fa-icon size="lg" [icon]="faTrash"></fa-icon>
+                    </button>
                     <button *ngIf="!fullSize; else compressButton" (click)="maximizeScreen()" class="header-icon">
                         <fa-icon [icon]="faExpand"></fa-icon></button
                     ><ng-template #compressButton>
diff --git a/src/main/webapp/app/iris/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.ts b/src/main/webapp/app/iris/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.ts
index 785c65f9c417..7237f020bb5e 100644
--- a/src/main/webapp/app/iris/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.ts
+++ b/src/main/webapp/app/iris/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.ts
@@ -1,4 +1,4 @@
-import { faArrowDown, faCircle, faCircleInfo, faCompress, faExpand, faPaperPlane, faRobot, faThumbsDown, faThumbsUp, faXmark } from '@fortawesome/free-solid-svg-icons';
+import { faArrowDown, faCircle, faCircleInfo, faCompress, faExpand, faPaperPlane, faRobot, faThumbsDown, faThumbsUp, faTrash, faXmark } from '@fortawesome/free-solid-svg-icons';
 import { ActivatedRoute, NavigationStart, Router } from '@angular/router';
 import { LocalStorageService } from 'ngx-webstorage';
 import { AccountService } from 'app/core/auth/account.service';
@@ -21,6 +21,7 @@ import { Subscription } from 'rxjs';
 import { ResizeSensor } from 'css-element-queries';
 import { Overlay } from '@angular/cdk/overlay';
 import { SharedService } from 'app/iris/shared.service';
+import { IrisSessionService } from 'app/iris/session.service';
 import dayjs from 'dayjs';
 
 @Component({
@@ -38,6 +39,8 @@ export class ExerciseChatWidgetComponent implements OnInit, OnDestroy, AfterView
     readonly SENDER_USER = IrisSender.USER;
     readonly SENDER_SERVER = IrisSender.LLM;
     readonly stateStore: IrisStateStore;
+    readonly exerciseId: number;
+    readonly sessionService: IrisSessionService;
 
     stateSubscription: Subscription;
     messages: IrisMessage[] = [];
@@ -76,6 +79,8 @@ export class ExerciseChatWidgetComponent implements OnInit, OnDestroy, AfterView
         private sharedService: SharedService,
     ) {
         this.stateStore = data.stateStore;
+        this.exerciseId = data.exerciseId;
+        this.sessionService = data.sessionService;
         this.navigationSubscription = this.router.events.subscribe((event) => {
             if (event instanceof NavigationStart) {
                 this.dialog.closeAll();
@@ -83,6 +88,7 @@ export class ExerciseChatWidgetComponent implements OnInit, OnDestroy, AfterView
         });
     }
     // Icons
+    faTrash = faTrash;
     faCircle = faCircle;
     faPaperPlane = faPaperPlane;
     faExpand = faExpand;
@@ -188,6 +194,10 @@ export class ExerciseChatWidgetComponent implements OnInit, OnDestroy, AfterView
         this.resetChatBodyHeight();
     }
 
+    onClearSession(): void {
+        this.sessionService.createNewSession(this.exerciseId);
+    }
+
     scrollToUnread() {
         setTimeout(() => {
             const unreadMessageElement: HTMLElement = this.unreadMessage.nativeElement;
diff --git a/src/main/webapp/app/iris/session.service.ts b/src/main/webapp/app/iris/session.service.ts
index e0dde22f477f..dbce9138297c 100644
--- a/src/main/webapp/app/iris/session.service.ts
+++ b/src/main/webapp/app/iris/session.service.ts
@@ -55,7 +55,7 @@ export class IrisSessionService {
      * Creates a new session for the given exercise ID.
      * @param exerciseId The exercise ID for which to create a new session.
      */
-    private createNewSession(exerciseId: number): void {
+    createNewSession(exerciseId: number): void {
         this.httpSessionService.createSessionForProgrammingExercise(exerciseId).subscribe(
             (irisSessionResponse: any) => {
                 this.stateStore.dispatch(new SessionReceivedAction(irisSessionResponse.id, []));
diff --git a/src/test/javascript/spec/component/iris/session.service.spec.ts b/src/test/javascript/spec/component/iris/session.service.spec.ts
index 2c10fc66dc9b..b22bc6c346c4 100644
--- a/src/test/javascript/spec/component/iris/session.service.spec.ts
+++ b/src/test/javascript/spec/component/iris/session.service.spec.ts
@@ -32,6 +32,39 @@ describe('IrisSessionService', () => {
         jest.restoreAllMocks();
     });
 
+    describe('createNewSession', () => {
+        it('should create a new session if success', async () => {
+            // given
+            const exerciseId = 123;
+            const sessionId = 456;
+            const createSessionForProgrammingExerciseMock = jest.spyOn(mockHttpSessionService, 'createSessionForProgrammingExercise').mockReturnValueOnce(of({ id: sessionId }));
+            const dispatchSpy = jest.spyOn(stateStore, 'dispatch');
+
+            // when
+            await irisSessionService.createNewSession(exerciseId);
+
+            // then
+            expect(createSessionForProgrammingExerciseMock).toHaveBeenCalledWith(exerciseId);
+            expect(dispatchSpy).toHaveBeenCalledWith(new SessionReceivedAction(sessionId, []));
+        });
+
+        it('should dispatch error if fail', async () => {
+            // given
+            const exerciseId = 123;
+            const createSessionForProgrammingExerciseMock = jest
+                .spyOn(mockHttpSessionService, 'createSessionForProgrammingExercise')
+                .mockReturnValueOnce(throwError(new HttpErrorResponse({ status: 500 })));
+            const dispatchSpy = jest.spyOn(stateStore, 'dispatch');
+
+            // when
+            await irisSessionService.createNewSession(exerciseId);
+
+            // then
+            expect(createSessionForProgrammingExerciseMock).toHaveBeenCalledWith(exerciseId);
+            expect(dispatchSpy).toHaveBeenCalledWith(new ConversationErrorOccurredAction('Could not create a new session'));
+        });
+    });
+
     it('should create a new session if getCurrentSession returns 404 and createSession is successful', async () => {
         // given
         const exerciseId = 123;
diff --git a/src/test/javascript/spec/component/iris/ui/exercise-chat-widget.component.spec.ts b/src/test/javascript/spec/component/iris/ui/exercise-chat-widget.component.spec.ts
index cf8dca98cab0..95357ea75552 100644
--- a/src/test/javascript/spec/component/iris/ui/exercise-chat-widget.component.spec.ts
+++ b/src/test/javascript/spec/component/iris/ui/exercise-chat-widget.component.spec.ts
@@ -29,12 +29,14 @@ import { HttpClient } from '@angular/common/http';
 import { MockAccountService } from '../../../helpers/mocks/service/mock-account.service';
 import { IrisMessageContent, IrisMessageContentType } from 'app/entities/iris/iris-content-type.model';
 import { IrisMessage, IrisSender, IrisServerMessage } from 'app/entities/iris/iris-message.model';
+import { IrisSessionService } from 'app/iris/session.service';
 
 describe('ExerciseChatWidgetComponent', () => {
     let component: ExerciseChatWidgetComponent;
     let fixture: ComponentFixture<ExerciseChatWidgetComponent>;
     let stateStore: IrisStateStore;
     let mockHttpMessageService: IrisHttpMessageService;
+    let mockSessionService: IrisSessionService;
     let mockDialog: MatDialog;
 
     beforeEach(async () => {
@@ -51,13 +53,17 @@ describe('ExerciseChatWidgetComponent', () => {
             rateMessage: jest.fn(),
         } as any;
 
+        mockSessionService = {
+            createNewSession: jest.fn(),
+        } as any;
+
         stateStore = new IrisStateStore();
 
         await TestBed.configureTestingModule({
             imports: [FormsModule, FontAwesomeModule, MatDialogModule],
             declarations: [ExerciseChatWidgetComponent, MockPipe(ArtemisTranslatePipe), MockPipe(HtmlForMarkdownPipe)],
             providers: [
-                { provide: MAT_DIALOG_DATA, useValue: { stateStore: stateStore } },
+                { provide: MAT_DIALOG_DATA, useValue: { stateStore: stateStore, sessionService: mockSessionService } },
                 { provide: IrisHttpMessageService, useValue: mockHttpMessageService },
                 { provide: MatDialog, useValue: mockDialog },
                 { provide: ActivatedRoute, useValue: {} },
@@ -414,4 +420,14 @@ describe('ExerciseChatWidgetComponent', () => {
         expect(textAreaElement.selectionStart).toBe(expectedSelectionStart);
         expect(textAreaElement.selectionEnd).toBe(expectedSelectionEnd);
     });
+
+    it('should call onClearSession when click on the clear button', () => {
+        const button: HTMLInputElement = fixture.debugElement.nativeElement.querySelector('#clear-chat-session');
+        jest.spyOn(mockSessionService, 'createNewSession');
+        component.exerciseId = 18;
+
+        button.click();
+
+        expect(mockSessionService.createNewSession).toHaveBeenCalledWith(18);
+    });
 });

From e85a24191124d0c3ff06f6575b4c45c6b4ff6a92 Mon Sep 17 00:00:00 2001
From: Ece Eren <aybikeceren@gmail.com>
Date: Thu, 13 Jul 2023 17:30:24 +0200
Subject: [PATCH 088/111] Fix Codacy issue

---
 .../exercise-chatwidget/exercise-chat-widget.component.ts        | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/main/webapp/app/iris/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.ts b/src/main/webapp/app/iris/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.ts
index 8d4e50b38834..15a9b3b2cc3d 100644
--- a/src/main/webapp/app/iris/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.ts
+++ b/src/main/webapp/app/iris/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.ts
@@ -2,7 +2,6 @@ import { faArrowDown, faCircle, faCircleInfo, faCompress, faExpand, faPaperPlane
 import { ActivatedRoute, NavigationStart, Router } from '@angular/router';
 import { LocalStorageService } from 'ngx-webstorage';
 import { AccountService } from 'app/core/auth/account.service';
-import { User } from 'app/core/user/user.model';
 import { ButtonType } from 'app/shared/components/button.component';
 import { AfterViewInit, Component, ElementRef, Inject, OnDestroy, OnInit, ViewChild } from '@angular/core';
 import { MAT_DIALOG_DATA, MatDialog } from '@angular/material/dialog';

From 3128534ec4e066aa16bb21e226edc7c9adeccfc2 Mon Sep 17 00:00:00 2001
From: Asli Aykan <asliaykan97@gmail.com>
Date: Thu, 13 Jul 2023 18:37:31 +0200
Subject: [PATCH 089/111] refactor

---
 .../exercise-chat-widget.component.html            | 14 +++++++++++++-
 .../exercise-chat-widget.component.ts              |  8 --------
 src/main/webapp/app/iris/state-store.model.ts      |  2 +-
 3 files changed, 14 insertions(+), 10 deletions(-)

diff --git a/src/main/webapp/app/iris/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.html b/src/main/webapp/app/iris/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.html
index 7815e5081d11..109ffaf709b0 100644
--- a/src/main/webapp/app/iris/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.html
+++ b/src/main/webapp/app/iris/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.html
@@ -113,7 +113,19 @@ <h3 class="header-start">
 
         <!-- input field section -->
         <div class="chat-input">
-            <input [(ngModel)]="newMessageTextContent" rows="1" class="form-control" maxRows="3" (ngModelChange)="onRowChange()" (input)="onInput()" (paste)="onPaste()" type="text" (keydown)="handleKey($event)" placeholder="{{ 'artemisApp.exerciseChatbot.inputMessage' | artemisTranslate }}" #messageTextarea/>
+            <textarea
+                [(ngModel)]="newMessageTextContent"
+                rows="1"
+                class="form-control"
+                maxRows="3"
+                (ngModelChange)="onRowChange()"
+                (input)="onInput()"
+                (paste)="onPaste()"
+                type="text"
+                (keydown)="handleKey($event)"
+                placeholder="{{ 'artemisApp.exerciseChatbot.inputMessage' | artemisTranslate }}"
+                #messageTextarea
+            ></textarea>
             <button id="sendButton" (click)="onSend()" class="btn btn-primary btn-md btn-circle" [disabled]="deactivateSubmitButton()">
                 <fa-icon [icon]="faPaperPlane"></fa-icon>
             </button>
diff --git a/src/main/webapp/app/iris/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.ts b/src/main/webapp/app/iris/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.ts
index 29029fd5015a..17225cba7ef0 100644
--- a/src/main/webapp/app/iris/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.ts
+++ b/src/main/webapp/app/iris/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.ts
@@ -502,14 +502,6 @@ export class ExerciseChatWidgetComponent implements OnInit, OnDestroy, AfterView
         };
     }
 
-    rateMessage(message_id: number, index: number, helpful: boolean) {
-        this.httpMessageService
-            .rateMessage(<number>this.sessionId, message_id, helpful)
-            .toPromise()
-            .then(() => this.stateStore.dispatch(new RateMessageSuccessAction(index, helpful)))
-            .catch(() => this.stateStore.dispatch(new ConversationErrorOccurredAction(IrisErrorMessageKey.RATE_MESSAGE_FAILED)));
-    }
-
     resendMessage(message: IrisClientMessage) {
         this.resendAnimationActive = true;
 
diff --git a/src/main/webapp/app/iris/state-store.model.ts b/src/main/webapp/app/iris/state-store.model.ts
index f1901ee760ba..a23a4e17688f 100644
--- a/src/main/webapp/app/iris/state-store.model.ts
+++ b/src/main/webapp/app/iris/state-store.model.ts
@@ -42,7 +42,7 @@ export class ActiveConversationMessageLoadedAction implements MessageStoreAction
 export class ConversationErrorOccurredAction implements MessageStoreAction {
     readonly type: ActionType;
 
-    constructor(public readonly errorType: IrisErrorMessageKey | null) {
+    constructor(public readonly errorType: string) {
         this.type = ActionType.CONVERSATION_ERROR_OCCURRED;
     }
 }

From abac26bffee5f9c60d8763b1c3244f0e212a5480 Mon Sep 17 00:00:00 2001
From: Khoa Nguyen <dakennguyen@gmail.com>
Date: Thu, 13 Jul 2023 20:32:11 +0200
Subject: [PATCH 090/111] Fix test

---
 src/main/webapp/app/iris/state-store.model.ts               | 1 -
 .../iris/ui/exercise-chat-widget.component.spec.ts          | 6 ++----
 2 files changed, 2 insertions(+), 5 deletions(-)

diff --git a/src/main/webapp/app/iris/state-store.model.ts b/src/main/webapp/app/iris/state-store.model.ts
index a23a4e17688f..7c20994f0e7a 100644
--- a/src/main/webapp/app/iris/state-store.model.ts
+++ b/src/main/webapp/app/iris/state-store.model.ts
@@ -1,5 +1,4 @@
 import { IrisClientMessage, IrisMessage, IrisServerMessage } from 'app/entities/iris/iris-message.model';
-import { IrisErrorMessageKey, IrisErrorType } from 'app/entities/iris/iris-errors.model';
 
 export enum ActionType {
     NUM_NEW_MESSAGES_RESET = 'num-new-messages-reset',
diff --git a/src/test/javascript/spec/component/iris/ui/exercise-chat-widget.component.spec.ts b/src/test/javascript/spec/component/iris/ui/exercise-chat-widget.component.spec.ts
index aa9a7f41c35f..84f4b469847d 100644
--- a/src/test/javascript/spec/component/iris/ui/exercise-chat-widget.component.spec.ts
+++ b/src/test/javascript/spec/component/iris/ui/exercise-chat-widget.component.spec.ts
@@ -2,7 +2,6 @@ import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 import { ArtemisTranslatePipe } from 'app/shared/pipes/artemis-translate.pipe';
 import { FormsModule } from '@angular/forms';
 import { ActivatedRoute } from '@angular/router';
-import { HttpResponse } from '@angular/common/http';
 import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
 import { MockPipe } from 'ng-mocks';
 import { ExerciseChatWidgetComponent } from 'app/iris/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component';
@@ -27,11 +26,10 @@ import { MockSyncStorage } from '../../../helpers/mocks/service/mock-sync-storag
 import { MockHttpService } from '../../../helpers/mocks/service/mock-http.service';
 import { HttpClient } from '@angular/common/http';
 import { MockAccountService } from '../../../helpers/mocks/service/mock-account.service';
-import { IrisMessageContent, IrisMessageContentType } from 'app/entities/iris/iris-content-type.model';
-import { IrisMessage, IrisSender, IrisServerMessage } from 'app/entities/iris/iris-message.model';
+import { IrisMessageContentType } from 'app/entities/iris/iris-content-type.model';
+import { IrisSender } from 'app/entities/iris/iris-message.model';
 import { IrisErrorMessageKey } from 'app/entities/iris/iris-errors.model';
 
-
 describe('ExerciseChatWidgetComponent', () => {
     let component: ExerciseChatWidgetComponent;
     let fixture: ComponentFixture<ExerciseChatWidgetComponent>;

From f98de799208cd24f44695df2c983ebbc77275416 Mon Sep 17 00:00:00 2001
From: Khoa Nguyen <dakennguyen@gmail.com>
Date: Thu, 13 Jul 2023 20:47:57 +0200
Subject: [PATCH 091/111] Fix missing imports

---
 src/main/webapp/app/iris/state-store.model.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/main/webapp/app/iris/state-store.model.ts b/src/main/webapp/app/iris/state-store.model.ts
index 7c20994f0e7a..fb2b2e699b3b 100644
--- a/src/main/webapp/app/iris/state-store.model.ts
+++ b/src/main/webapp/app/iris/state-store.model.ts
@@ -1,4 +1,5 @@
 import { IrisClientMessage, IrisMessage, IrisServerMessage } from 'app/entities/iris/iris-message.model';
+import { IrisErrorType } from 'app/entities/iris/iris-errors.model';
 
 export enum ActionType {
     NUM_NEW_MESSAGES_RESET = 'num-new-messages-reset',

From a92e6d96b2aab6d77f0c421bbdf6ed41984ef2de Mon Sep 17 00:00:00 2001
From: Ece Eren <aybikeceren@gmail.com>
Date: Thu, 13 Jul 2023 22:31:07 +0200
Subject: [PATCH 092/111] Fix send button

---
 .../exercise-chat-widget.component.html                    | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/src/main/webapp/app/iris/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.html b/src/main/webapp/app/iris/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.html
index 109ffaf709b0..eb8917b20ef4 100644
--- a/src/main/webapp/app/iris/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.html
+++ b/src/main/webapp/app/iris/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.html
@@ -62,7 +62,7 @@ <h3 class="header-start">
                     </div>
                     <div *ngIf="isServerSentMessage(message)" style="width: fit-content">
                         <div class="bubble-left">
-                            <span *ngIf="isFirstMessage && i == 0" [innerHTML]="content.textContent! | artemisTranslate"></span>
+                            <span *ngIf="isFirstMessage && i === 0" [innerHTML]="content.textContent! | artemisTranslate"></span>
                             <span *ngIf="!isFirstMessage || (isFirstMessage && i > 0)" [innerHTML]="content.textContent! | htmlForMarkdown"></span>
                         </div>
                         <div class="rate-message-buttons">
@@ -126,9 +126,8 @@ <h3 class="header-start">
                 placeholder="{{ 'artemisApp.exerciseChatbot.inputMessage' | artemisTranslate }}"
                 #messageTextarea
             ></textarea>
-            <button id="sendButton" (click)="onSend()" class="btn btn-primary btn-md btn-circle" [disabled]="deactivateSubmitButton()">
-                <fa-icon [icon]="faPaperPlane"></fa-icon>
-            </button>
+            <jhi-button id="sendButton" (click)="onSend()" [btnType]="ButtonType.SUCCESS" [icon]="faPaperPlane" style="margin-bottom: auto" [disabled]="deactivateSubmitButton()">
+            </jhi-button>
         </div>
     </div>
 </div>

From 6383280b1e339c2d9fbef4cfa09e2c4e2ab1b0dd Mon Sep 17 00:00:00 2001
From: Asli Aykan <asliaykan97@gmail.com>
Date: Thu, 13 Jul 2023 22:58:09 +0200
Subject: [PATCH 093/111] refactor

---
 .../exercise-chatwidget/exercise-chat-widget.component.ts       | 2 +-
 src/main/webapp/app/iris/state-store.model.ts                   | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/main/webapp/app/iris/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.ts b/src/main/webapp/app/iris/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.ts
index 17225cba7ef0..75fa06c29f62 100644
--- a/src/main/webapp/app/iris/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.ts
+++ b/src/main/webapp/app/iris/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.ts
@@ -459,7 +459,7 @@ export class ExerciseChatWidgetComponent implements OnInit, OnDestroy, AfterView
             .toPromise()
             .then(() => this.stateStore.dispatch(new RateMessageSuccessAction(index, helpful)))
             .catch(() => {
-                this.stateStore.dispatch(new ConversationErrorOccurredAction('Something went wrong. Please try again later!'));
+                this.stateStore.dispatch(new ConversationErrorOccurredAction(IrisErrorMessageKey.RATE_MESSAGE_FAILED));
                 this.scrollToBottom('smooth');
             });
     }
diff --git a/src/main/webapp/app/iris/state-store.model.ts b/src/main/webapp/app/iris/state-store.model.ts
index a23a4e17688f..f1901ee760ba 100644
--- a/src/main/webapp/app/iris/state-store.model.ts
+++ b/src/main/webapp/app/iris/state-store.model.ts
@@ -42,7 +42,7 @@ export class ActiveConversationMessageLoadedAction implements MessageStoreAction
 export class ConversationErrorOccurredAction implements MessageStoreAction {
     readonly type: ActionType;
 
-    constructor(public readonly errorType: string) {
+    constructor(public readonly errorType: IrisErrorMessageKey | null) {
         this.type = ActionType.CONVERSATION_ERROR_OCCURRED;
     }
 }

From 1866622006cf43612086b5e07606046557492ae5 Mon Sep 17 00:00:00 2001
From: Asli Aykan <asliaykan97@gmail.com>
Date: Thu, 13 Jul 2023 23:16:07 +0200
Subject: [PATCH 094/111] add client tests

---
 .../ui/exercise-chat-widget.component.spec.ts | 29 +++++++++++++++++++
 1 file changed, 29 insertions(+)

diff --git a/src/test/javascript/spec/component/iris/ui/exercise-chat-widget.component.spec.ts b/src/test/javascript/spec/component/iris/ui/exercise-chat-widget.component.spec.ts
index 84f4b469847d..c55bd9ece4d1 100644
--- a/src/test/javascript/spec/component/iris/ui/exercise-chat-widget.component.spec.ts
+++ b/src/test/javascript/spec/component/iris/ui/exercise-chat-widget.component.spec.ts
@@ -315,4 +315,33 @@ describe('ExerciseChatWidgetComponent', () => {
         expect(textAreaElement.selectionStart).toBe(expectedSelectionStart);
         expect(textAreaElement.selectionEnd).toBe(expectedSelectionEnd);
     });
+
+    it('should adjust textarea rows and call adjustChatBodyHeight', () => {
+        const textarea = fixture.nativeElement.querySelector('textarea');
+        const originalScrollHeightGetter = textarea.__lookupGetter__('scrollHeight');
+        const originalGetComputedStyle = window.getComputedStyle;
+
+        const scrollHeightGetterSpy = jest.spyOn(textarea, 'scrollHeight', 'get').mockReturnValue(100);
+        const getComputedStyleSpy = jest.spyOn(window, 'getComputedStyle').mockReturnValue({ lineHeight: '20px' });
+
+        jest.spyOn(component, 'adjustChatBodyHeight');
+
+        component.adjustTextareaRows();
+
+        expect(textarea.style.height).toBe('60px'); // Assuming the calculated height is 60px
+        expect(component.adjustChatBodyHeight).toHaveBeenCalledWith(3); // Assuming lineHeight is 20px, scrollHeight is 100, and maxRows is 3
+
+        // Restore original getters and methods
+        scrollHeightGetterSpy.mockRestore();
+        getComputedStyleSpy.mockRestore();
+        textarea.__defineGetter__('scrollHeight', originalScrollHeightGetter);
+        window.getComputedStyle = originalGetComputedStyle;
+    });
+
+    it('should load greeting message if shouldLoadGreetingMessage is true', async () => {
+        component.shouldLoadGreetingMessage = true;
+        jest.spyOn(stateStore, 'dispatch');
+        component.loadFirstMessage();
+        expect(stateStore.dispatch).toHaveBeenCalled();
+    });
 });

From dbfe2bb144d538996d11dc5ff471887bbc37d692 Mon Sep 17 00:00:00 2001
From: Asli Aykan <asliaykan97@gmail.com>
Date: Thu, 13 Jul 2023 23:17:03 +0200
Subject: [PATCH 095/111] refactor

---
 src/main/webapp/app/iris/state-store.model.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/main/webapp/app/iris/state-store.model.ts b/src/main/webapp/app/iris/state-store.model.ts
index 6c2a874ef367..f1901ee760ba 100644
--- a/src/main/webapp/app/iris/state-store.model.ts
+++ b/src/main/webapp/app/iris/state-store.model.ts
@@ -1,5 +1,5 @@
 import { IrisClientMessage, IrisMessage, IrisServerMessage } from 'app/entities/iris/iris-message.model';
-import { IrisErrorType } from 'app/entities/iris/iris-errors.model';
+import { IrisErrorMessageKey, IrisErrorType } from 'app/entities/iris/iris-errors.model';
 
 export enum ActionType {
     NUM_NEW_MESSAGES_RESET = 'num-new-messages-reset',

From c6cdeec036cf141a77aad102101fb24736c8e3d5 Mon Sep 17 00:00:00 2001
From: Asli Aykan <asliaykan97@gmail.com>
Date: Thu, 13 Jul 2023 23:27:26 +0200
Subject: [PATCH 096/111] refactor

---
 .../iris/ui/exercise-chat-widget.component.spec.ts         | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/test/javascript/spec/component/iris/ui/exercise-chat-widget.component.spec.ts b/src/test/javascript/spec/component/iris/ui/exercise-chat-widget.component.spec.ts
index c55bd9ece4d1..96b3c1638596 100644
--- a/src/test/javascript/spec/component/iris/ui/exercise-chat-widget.component.spec.ts
+++ b/src/test/javascript/spec/component/iris/ui/exercise-chat-widget.component.spec.ts
@@ -322,7 +322,12 @@ describe('ExerciseChatWidgetComponent', () => {
         const originalGetComputedStyle = window.getComputedStyle;
 
         const scrollHeightGetterSpy = jest.spyOn(textarea, 'scrollHeight', 'get').mockReturnValue(100);
-        const getComputedStyleSpy = jest.spyOn(window, 'getComputedStyle').mockReturnValue({ lineHeight: '20px' });
+        const getComputedStyleSpy = jest.spyOn(window, 'getComputedStyle').mockImplementation(
+            () =>
+                ({
+                    lineHeight: '20px',
+                } as Partial<CSSStyleDeclaration> as any),
+        );
 
         jest.spyOn(component, 'adjustChatBodyHeight');
 

From 2aa0cf4fb2b5c229e73d3586e7ffb4505f55c817 Mon Sep 17 00:00:00 2001
From: Asli Aykan <asliaykan97@gmail.com>
Date: Fri, 14 Jul 2023 00:08:19 +0200
Subject: [PATCH 097/111] add client tests

---
 .../ui/exercise-chat-widget.component.spec.ts | 97 ++++++++++++++++++-
 1 file changed, 96 insertions(+), 1 deletion(-)

diff --git a/src/test/javascript/spec/component/iris/ui/exercise-chat-widget.component.spec.ts b/src/test/javascript/spec/component/iris/ui/exercise-chat-widget.component.spec.ts
index 96b3c1638596..11233c4c7cfd 100644
--- a/src/test/javascript/spec/component/iris/ui/exercise-chat-widget.component.spec.ts
+++ b/src/test/javascript/spec/component/iris/ui/exercise-chat-widget.component.spec.ts
@@ -27,7 +27,7 @@ import { MockHttpService } from '../../../helpers/mocks/service/mock-http.servic
 import { HttpClient } from '@angular/common/http';
 import { MockAccountService } from '../../../helpers/mocks/service/mock-account.service';
 import { IrisMessageContentType } from 'app/entities/iris/iris-content-type.model';
-import { IrisSender } from 'app/entities/iris/iris-message.model';
+import { IrisArtemisClientMessage, IrisClientMessage, IrisSender, IrisServerMessage, isArtemisClientSentMessage, isServerSentMessage } from 'app/entities/iris/iris-message.model';
 import { IrisErrorMessageKey } from 'app/entities/iris/iris-errors.model';
 
 describe('ExerciseChatWidgetComponent', () => {
@@ -349,4 +349,99 @@ describe('ExerciseChatWidgetComponent', () => {
         component.loadFirstMessage();
         expect(stateStore.dispatch).toHaveBeenCalled();
     });
+
+    it('should return true when the message is an Artemis client sent message', () => {
+        const artemisClientMessage: IrisArtemisClientMessage = {
+            id: 1,
+            content: [],
+            sentAt: new Date(),
+            sender: IrisSender.ARTEMIS_CLIENT,
+        };
+
+        expect(isArtemisClientSentMessage(artemisClientMessage)).toBeTruthy();
+    });
+
+    it('should return false when the message is not an Artemis client sent message', () => {
+        const notArtemisClientMessage: IrisClientMessage = {
+            id: 1,
+            content: [],
+            sentAt: new Date(),
+            sender: IrisSender.USER,
+        };
+
+        expect(isArtemisClientSentMessage(notArtemisClientMessage)).toBeFalsy();
+    });
+
+    it('should return true when the message is a server sent message', () => {
+        const serverMessage: IrisServerMessage = {
+            id: 1,
+            content: [],
+            sentAt: new Date(),
+            sender: IrisSender.ARTEMIS_SERVER,
+        };
+
+        expect(isServerSentMessage(serverMessage)).toBeTruthy();
+    });
+
+    it('should return false when the message is not a server sent message', () => {
+        const notServerMessage: IrisServerMessage = {
+            id: 1,
+            content: [],
+            sentAt: new Date(),
+            sender: IrisSender.USER,
+        };
+
+        expect(isServerSentMessage(notServerMessage)).toBeFalsy();
+    });
+
+    it('should return an IrisClientMessage with correct fields', () => {
+        const testMessage = 'Test message';
+        const expectedResult: IrisClientMessage = {
+            sender: IrisSender.USER, // Make sure to replace IrisSender.USER with the value of this.SENDER_USER in the actual class
+            content: [
+                {
+                    type: IrisMessageContentType.TEXT,
+                    textContent: testMessage,
+                },
+            ],
+        };
+
+        const result = component.newUserMessage(testMessage);
+
+        expect(result).toEqual(expectedResult);
+    });
+
+    it('should return true if the error key is SEND_MESSAGE_FAILED', () => {
+        component.error = { key: IrisErrorMessageKey.SEND_MESSAGE_FAILED };
+        expect(component.isSendMessageFailedError()).toBeTruthy();
+    });
+
+    it('should return true if the error key is IRIS_SERVER_RESPONSE_TIMEOUT', () => {
+        component.error = { key: IrisErrorMessageKey.IRIS_SERVER_RESPONSE_TIMEOUT };
+        expect(component.isSendMessageFailedError()).toBeTruthy();
+    });
+
+    it('should return false if the error key is neither SEND_MESSAGE_FAILED nor IRIS_SERVER_RESPONSE_TIMEOUT', () => {
+        component.error = { key: 'AnotherKey' };
+        expect(component.isSendMessageFailedError()).toBeFalsy();
+    });
+
+    it('should return false if there is no error', () => {
+        component.error = null;
+        expect(component.isSendMessageFailedError()).toBeFalsy();
+    });
+
+    it('should set shakeErrorField to true and then false after 1 second', () => {
+        jest.useFakeTimers();
+        component.triggerShake();
+        expect(component.shakeErrorField).toBeTruthy();
+
+        jest.advanceTimersByTime(500);
+        expect(component.shakeErrorField).toBeTruthy();
+
+        jest.advanceTimersByTime(500);
+        expect(component.shakeErrorField).toBeFalsy();
+
+        jest.clearAllTimers();
+    });
 });

From f0bb1b37e1e694304942dc190183efb67aafc594 Mon Sep 17 00:00:00 2001
From: Asli Aykan <asliaykan97@gmail.com>
Date: Fri, 14 Jul 2023 00:13:22 +0200
Subject: [PATCH 098/111] add client tests

---
 .../ui/exercise-chat-widget.component.spec.ts | 39 ++++++++++++++++++-
 1 file changed, 38 insertions(+), 1 deletion(-)

diff --git a/src/test/javascript/spec/component/iris/ui/exercise-chat-widget.component.spec.ts b/src/test/javascript/spec/component/iris/ui/exercise-chat-widget.component.spec.ts
index 11233c4c7cfd..be527994ef7d 100644
--- a/src/test/javascript/spec/component/iris/ui/exercise-chat-widget.component.spec.ts
+++ b/src/test/javascript/spec/component/iris/ui/exercise-chat-widget.component.spec.ts
@@ -397,7 +397,7 @@ describe('ExerciseChatWidgetComponent', () => {
     it('should return an IrisClientMessage with correct fields', () => {
         const testMessage = 'Test message';
         const expectedResult: IrisClientMessage = {
-            sender: IrisSender.USER, // Make sure to replace IrisSender.USER with the value of this.SENDER_USER in the actual class
+            sender: IrisSender.USER,
             content: [
                 {
                     type: IrisMessageContentType.TEXT,
@@ -444,4 +444,41 @@ describe('ExerciseChatWidgetComponent', () => {
 
         jest.clearAllTimers();
     });
+
+    it('should return true if error key is EMPTY_MESSAGE', () => {
+        component.error = { key: IrisErrorMessageKey.EMPTY_MESSAGE };
+        expect(component.isEmptyMessageError()).toBeTruthy();
+    });
+
+    it('should return false if error key is not EMPTY_MESSAGE', () => {
+        component.error = { key: 'AnotherKey' };
+        expect(component.isEmptyMessageError()).toBeFalsy();
+    });
+
+    it('should return false if there is no error for empty message', () => {
+        component.error = null;
+        expect(component.isEmptyMessageError()).toBeFalsy();
+    });
+
+    it('should return true if isLoading is true', () => {
+        component.isLoading = true;
+        expect(component.deactivateSubmitButton()).toBeTruthy();
+    });
+
+    it('should return true if error exists and it is fatal', () => {
+        component.error = { fatal: true };
+        expect(component.deactivateSubmitButton()).toBeTruthy();
+    });
+
+    it('should return false if isLoading is false and no error exists', () => {
+        component.isLoading = false;
+        component.error = null;
+        expect(component.deactivateSubmitButton()).toBeFalsy();
+    });
+
+    it('should return false if isLoading is false and error is not fatal', () => {
+        component.isLoading = false;
+        component.error = { fatal: false };
+        expect(component.deactivateSubmitButton()).toBeFalsy();
+    });
 });

From 4f2ed583721ce09e36d2f2a509d0ccf5d604b9a1 Mon Sep 17 00:00:00 2001
From: Asli Aykan <asliaykan97@gmail.com>
Date: Fri, 14 Jul 2023 00:36:27 +0200
Subject: [PATCH 099/111] refactor

---
 package-lock.json                             |  2 +-
 package.json                                  |  2 +-
 .../exercise-chat-widget.component.ts         |  2 +-
 .../ui/exercise-chat-widget.component.spec.ts | 32 +++++++------------
 4 files changed, 14 insertions(+), 24 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 51ee32f51f47..3f187b4c2d11 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -48,7 +48,7 @@
                 "core-js": "3.31.0",
                 "crypto-js": "4.1.1",
                 "css-element-queries": "^1.2.3",
-                "dayjs": "1.11.8",
+                "dayjs": "^1.11.8",
                 "diff-match-patch-typescript": "1.0.8",
                 "dompurify": "3.0.3",
                 "export-to-csv": "0.2.1",
diff --git a/package.json b/package.json
index 632c055c9421..cb17f09319ad 100644
--- a/package.json
+++ b/package.json
@@ -51,7 +51,7 @@
         "core-js": "3.31.0",
         "crypto-js": "4.1.1",
         "css-element-queries": "^1.2.3",
-        "dayjs": "1.11.8",
+        "dayjs": "^1.11.8",
         "diff-match-patch-typescript": "1.0.8",
         "dompurify": "3.0.3",
         "export-to-csv": "0.2.1",
diff --git a/src/main/webapp/app/iris/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.ts b/src/main/webapp/app/iris/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.ts
index 75fa06c29f62..a0b469ed1153 100644
--- a/src/main/webapp/app/iris/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.ts
+++ b/src/main/webapp/app/iris/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.ts
@@ -491,7 +491,7 @@ export class ExerciseChatWidgetComponent implements OnInit, OnDestroy, AfterView
      * @param message - The content of the message.
      * @returns A new IrisClientMessage object representing the user message.
      */
-    private newUserMessage(message: string): IrisClientMessage {
+    newUserMessage(message: string): IrisClientMessage {
         const content: IrisMessageContent = {
             type: IrisMessageContentType.TEXT,
             textContent: message,
diff --git a/src/test/javascript/spec/component/iris/ui/exercise-chat-widget.component.spec.ts b/src/test/javascript/spec/component/iris/ui/exercise-chat-widget.component.spec.ts
index be527994ef7d..c9327d2b854a 100644
--- a/src/test/javascript/spec/component/iris/ui/exercise-chat-widget.component.spec.ts
+++ b/src/test/javascript/spec/component/iris/ui/exercise-chat-widget.component.spec.ts
@@ -10,6 +10,7 @@ import { AccountService } from 'app/core/auth/account.service';
 import { TranslateService } from '@ngx-translate/core';
 import { MAT_DIALOG_DATA, MatDialog, MatDialogModule } from '@angular/material/dialog';
 import { IrisHttpMessageService } from 'app/iris/http-message.service';
+import dayjs = require('dayjs');
 import {
     ActiveConversationMessageLoadedAction,
     ConversationErrorOccurredAction,
@@ -354,7 +355,7 @@ describe('ExerciseChatWidgetComponent', () => {
         const artemisClientMessage: IrisArtemisClientMessage = {
             id: 1,
             content: [],
-            sentAt: new Date(),
+            sentAt: dayjs(),
             sender: IrisSender.ARTEMIS_CLIENT,
         };
 
@@ -365,7 +366,7 @@ describe('ExerciseChatWidgetComponent', () => {
         const notArtemisClientMessage: IrisClientMessage = {
             id: 1,
             content: [],
-            sentAt: new Date(),
+            sentAt: dayjs(),
             sender: IrisSender.USER,
         };
 
@@ -376,24 +377,13 @@ describe('ExerciseChatWidgetComponent', () => {
         const serverMessage: IrisServerMessage = {
             id: 1,
             content: [],
-            sentAt: new Date(),
+            sentAt: dayjs(),
             sender: IrisSender.ARTEMIS_SERVER,
         };
 
         expect(isServerSentMessage(serverMessage)).toBeTruthy();
     });
 
-    it('should return false when the message is not a server sent message', () => {
-        const notServerMessage: IrisServerMessage = {
-            id: 1,
-            content: [],
-            sentAt: new Date(),
-            sender: IrisSender.USER,
-        };
-
-        expect(isServerSentMessage(notServerMessage)).toBeFalsy();
-    });
-
     it('should return an IrisClientMessage with correct fields', () => {
         const testMessage = 'Test message';
         const expectedResult: IrisClientMessage = {
@@ -412,17 +402,17 @@ describe('ExerciseChatWidgetComponent', () => {
     });
 
     it('should return true if the error key is SEND_MESSAGE_FAILED', () => {
-        component.error = { key: IrisErrorMessageKey.SEND_MESSAGE_FAILED };
+        component.error = { key: IrisErrorMessageKey.SEND_MESSAGE_FAILED, fatal: false };
         expect(component.isSendMessageFailedError()).toBeTruthy();
     });
 
     it('should return true if the error key is IRIS_SERVER_RESPONSE_TIMEOUT', () => {
-        component.error = { key: IrisErrorMessageKey.IRIS_SERVER_RESPONSE_TIMEOUT };
+        component.error = { key: IrisErrorMessageKey.IRIS_SERVER_RESPONSE_TIMEOUT, fatal: false };
         expect(component.isSendMessageFailedError()).toBeTruthy();
     });
 
     it('should return false if the error key is neither SEND_MESSAGE_FAILED nor IRIS_SERVER_RESPONSE_TIMEOUT', () => {
-        component.error = { key: 'AnotherKey' };
+        component.error = { key: 'AnotherKey', fatal: false };
         expect(component.isSendMessageFailedError()).toBeFalsy();
     });
 
@@ -446,12 +436,12 @@ describe('ExerciseChatWidgetComponent', () => {
     });
 
     it('should return true if error key is EMPTY_MESSAGE', () => {
-        component.error = { key: IrisErrorMessageKey.EMPTY_MESSAGE };
+        component.error = { key: IrisErrorMessageKey.EMPTY_MESSAGE, fatal: true };
         expect(component.isEmptyMessageError()).toBeTruthy();
     });
 
     it('should return false if error key is not EMPTY_MESSAGE', () => {
-        component.error = { key: 'AnotherKey' };
+        component.error = { key: 'AnotherKey', fatal: false };
         expect(component.isEmptyMessageError()).toBeFalsy();
     });
 
@@ -466,7 +456,7 @@ describe('ExerciseChatWidgetComponent', () => {
     });
 
     it('should return true if error exists and it is fatal', () => {
-        component.error = { fatal: true };
+        component.error = { key: IrisErrorMessageKey.SEND_MESSAGE_FAILED, fatal: true };
         expect(component.deactivateSubmitButton()).toBeTruthy();
     });
 
@@ -478,7 +468,7 @@ describe('ExerciseChatWidgetComponent', () => {
 
     it('should return false if isLoading is false and error is not fatal', () => {
         component.isLoading = false;
-        component.error = { fatal: false };
+        component.error = { key: IrisErrorMessageKey.SEND_MESSAGE_FAILED, fatal: false }; // replace SOME_KEY with an actual enum key
         expect(component.deactivateSubmitButton()).toBeFalsy();
     });
 });

From 8e4abf2408100cceef0b1deeabce45a34acd6761 Mon Sep 17 00:00:00 2001
From: Asli Aykan <asliaykan97@gmail.com>
Date: Fri, 14 Jul 2023 00:45:23 +0200
Subject: [PATCH 100/111] refactor

---
 .../iris/ui/exercise-chat-widget.component.spec.ts | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/test/javascript/spec/component/iris/ui/exercise-chat-widget.component.spec.ts b/src/test/javascript/spec/component/iris/ui/exercise-chat-widget.component.spec.ts
index c9327d2b854a..dd34922f0174 100644
--- a/src/test/javascript/spec/component/iris/ui/exercise-chat-widget.component.spec.ts
+++ b/src/test/javascript/spec/component/iris/ui/exercise-chat-widget.component.spec.ts
@@ -10,7 +10,6 @@ import { AccountService } from 'app/core/auth/account.service';
 import { TranslateService } from '@ngx-translate/core';
 import { MAT_DIALOG_DATA, MatDialog, MatDialogModule } from '@angular/material/dialog';
 import { IrisHttpMessageService } from 'app/iris/http-message.service';
-import dayjs = require('dayjs');
 import {
     ActiveConversationMessageLoadedAction,
     ConversationErrorOccurredAction,
@@ -30,6 +29,7 @@ import { MockAccountService } from '../../../helpers/mocks/service/mock-account.
 import { IrisMessageContentType } from 'app/entities/iris/iris-content-type.model';
 import { IrisArtemisClientMessage, IrisClientMessage, IrisSender, IrisServerMessage, isArtemisClientSentMessage, isServerSentMessage } from 'app/entities/iris/iris-message.model';
 import { IrisErrorMessageKey } from 'app/entities/iris/iris-errors.model';
+import dayjs = require('dayjs');
 
 describe('ExerciseChatWidgetComponent', () => {
     let component: ExerciseChatWidgetComponent;
@@ -355,7 +355,7 @@ describe('ExerciseChatWidgetComponent', () => {
         const artemisClientMessage: IrisArtemisClientMessage = {
             id: 1,
             content: [],
-            sentAt: dayjs(),
+            sentAt: dayjs().toDate(),
             sender: IrisSender.ARTEMIS_CLIENT,
         };
 
@@ -366,7 +366,7 @@ describe('ExerciseChatWidgetComponent', () => {
         const notArtemisClientMessage: IrisClientMessage = {
             id: 1,
             content: [],
-            sentAt: dayjs(),
+            sentAt: dayjs().toDate(),
             sender: IrisSender.USER,
         };
 
@@ -377,7 +377,7 @@ describe('ExerciseChatWidgetComponent', () => {
         const serverMessage: IrisServerMessage = {
             id: 1,
             content: [],
-            sentAt: dayjs(),
+            sentAt: dayjs().toDate(),
             sender: IrisSender.ARTEMIS_SERVER,
         };
 
@@ -412,7 +412,7 @@ describe('ExerciseChatWidgetComponent', () => {
     });
 
     it('should return false if the error key is neither SEND_MESSAGE_FAILED nor IRIS_SERVER_RESPONSE_TIMEOUT', () => {
-        component.error = { key: 'AnotherKey', fatal: false };
+        component.error = { key: IrisErrorMessageKey.IRIS_DISABLED, fatal: false };
         expect(component.isSendMessageFailedError()).toBeFalsy();
     });
 
@@ -441,7 +441,7 @@ describe('ExerciseChatWidgetComponent', () => {
     });
 
     it('should return false if error key is not EMPTY_MESSAGE', () => {
-        component.error = { key: 'AnotherKey', fatal: false };
+        component.error = { key: IrisErrorMessageKey.IRIS_DISABLED, fatal: false };
         expect(component.isEmptyMessageError()).toBeFalsy();
     });
 
@@ -468,7 +468,7 @@ describe('ExerciseChatWidgetComponent', () => {
 
     it('should return false if isLoading is false and error is not fatal', () => {
         component.isLoading = false;
-        component.error = { key: IrisErrorMessageKey.SEND_MESSAGE_FAILED, fatal: false }; // replace SOME_KEY with an actual enum key
+        component.error = { key: IrisErrorMessageKey.SEND_MESSAGE_FAILED, fatal: false };
         expect(component.deactivateSubmitButton()).toBeFalsy();
     });
 });

From af188fa9bf1afdd7ea0c712779719ab87ab1e81f Mon Sep 17 00:00:00 2001
From: Asli Aykan <asliaykan97@gmail.com>
Date: Fri, 14 Jul 2023 00:55:48 +0200
Subject: [PATCH 101/111] refactor

---
 .../ui/exercise-chat-widget.component.spec.ts | 36 +------------------
 1 file changed, 1 insertion(+), 35 deletions(-)

diff --git a/src/test/javascript/spec/component/iris/ui/exercise-chat-widget.component.spec.ts b/src/test/javascript/spec/component/iris/ui/exercise-chat-widget.component.spec.ts
index dd34922f0174..644d7812a302 100644
--- a/src/test/javascript/spec/component/iris/ui/exercise-chat-widget.component.spec.ts
+++ b/src/test/javascript/spec/component/iris/ui/exercise-chat-widget.component.spec.ts
@@ -27,9 +27,8 @@ import { MockHttpService } from '../../../helpers/mocks/service/mock-http.servic
 import { HttpClient } from '@angular/common/http';
 import { MockAccountService } from '../../../helpers/mocks/service/mock-account.service';
 import { IrisMessageContentType } from 'app/entities/iris/iris-content-type.model';
-import { IrisArtemisClientMessage, IrisClientMessage, IrisSender, IrisServerMessage, isArtemisClientSentMessage, isServerSentMessage } from 'app/entities/iris/iris-message.model';
+import { IrisClientMessage, IrisSender } from 'app/entities/iris/iris-message.model';
 import { IrisErrorMessageKey } from 'app/entities/iris/iris-errors.model';
-import dayjs = require('dayjs');
 
 describe('ExerciseChatWidgetComponent', () => {
     let component: ExerciseChatWidgetComponent;
@@ -351,39 +350,6 @@ describe('ExerciseChatWidgetComponent', () => {
         expect(stateStore.dispatch).toHaveBeenCalled();
     });
 
-    it('should return true when the message is an Artemis client sent message', () => {
-        const artemisClientMessage: IrisArtemisClientMessage = {
-            id: 1,
-            content: [],
-            sentAt: dayjs().toDate(),
-            sender: IrisSender.ARTEMIS_CLIENT,
-        };
-
-        expect(isArtemisClientSentMessage(artemisClientMessage)).toBeTruthy();
-    });
-
-    it('should return false when the message is not an Artemis client sent message', () => {
-        const notArtemisClientMessage: IrisClientMessage = {
-            id: 1,
-            content: [],
-            sentAt: dayjs().toDate(),
-            sender: IrisSender.USER,
-        };
-
-        expect(isArtemisClientSentMessage(notArtemisClientMessage)).toBeFalsy();
-    });
-
-    it('should return true when the message is a server sent message', () => {
-        const serverMessage: IrisServerMessage = {
-            id: 1,
-            content: [],
-            sentAt: dayjs().toDate(),
-            sender: IrisSender.ARTEMIS_SERVER,
-        };
-
-        expect(isServerSentMessage(serverMessage)).toBeTruthy();
-    });
-
     it('should return an IrisClientMessage with correct fields', () => {
         const testMessage = 'Test message';
         const expectedResult: IrisClientMessage = {

From 4c2f4608d75338dfda98f4e665e59900d57bbfed Mon Sep 17 00:00:00 2001
From: Asli Aykan <asliaykan97@gmail.com>
Date: Fri, 14 Jul 2023 01:35:58 +0200
Subject: [PATCH 102/111] refactor

---
 .../exercise-chatwidget/exercise-chat-widget.component.html     | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/main/webapp/app/iris/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.html b/src/main/webapp/app/iris/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.html
index eb8917b20ef4..2430c6027991 100644
--- a/src/main/webapp/app/iris/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.html
+++ b/src/main/webapp/app/iris/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.html
@@ -80,7 +80,7 @@ <h3 class="header-start">
                         </div>
                     </div>
                     <div *ngIf="isArtemisClientSentMessage(message)" style="width: fit-content">
-                        <div class="client-chat">
+                        <div class="bubble-left">
                             <span [innerHTML]="content.textContent! | artemisTranslate"></span>
                         </div>
                     </div>

From 221bcb6f43adc7a43d7d46b23e57b952b841a1be Mon Sep 17 00:00:00 2001
From: Khoa Nguyen <dakennguyen@gmail.com>
Date: Fri, 14 Jul 2023 08:49:25 +0200
Subject: [PATCH 103/111] Use state variable

---
 .../exercise-chat-widget.component.ts         | 19 ++++++++++++++++---
 1 file changed, 16 insertions(+), 3 deletions(-)

diff --git a/src/main/webapp/app/iris/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.ts b/src/main/webapp/app/iris/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.ts
index 7564dea5f60b..e80885ca4aef 100644
--- a/src/main/webapp/app/iris/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.ts
+++ b/src/main/webapp/app/iris/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.ts
@@ -1,4 +1,17 @@
-import { faArrowDown, faCircle, faCircleInfo, faCompress, faExpand, faPaperPlane, faRedo, faRobot, faThumbsDown, faThumbsUp, faTrash, faXmark } from '@fortawesome/free-solid-svg-icons';
+import {
+    faArrowDown,
+    faCircle,
+    faCircleInfo,
+    faCompress,
+    faExpand,
+    faPaperPlane,
+    faRedo,
+    faRobot,
+    faThumbsDown,
+    faThumbsUp,
+    faTrash,
+    faXmark,
+} from '@fortawesome/free-solid-svg-icons';
 import { ActivatedRoute, NavigationStart, Router } from '@angular/router';
 import { LocalStorageService } from 'ngx-webstorage';
 import { AccountService } from 'app/core/auth/account.service';
@@ -81,8 +94,6 @@ export class ExerciseChatWidgetComponent implements OnInit, OnDestroy, AfterView
     // Constants
     readonly SENDER_USER = IrisSender.USER;
     readonly SENDER_SERVER = IrisSender.LLM;
-    readonly exerciseId: number;
-    readonly sessionService: IrisSessionService;
 
     // State variables
     stateStore: IrisStateStore;
@@ -102,6 +113,8 @@ export class ExerciseChatWidgetComponent implements OnInit, OnDestroy, AfterView
     isGreetingMessage = false;
     shouldLoadGreetingMessage = true;
     fadeState = '';
+    exerciseId: number;
+    sessionService: IrisSessionService;
 
     // User preferences
     userAccepted = false;

From 576b422b9f41f29707b1068ffdba0cc4ee519c2f Mon Sep 17 00:00:00 2001
From: Khoa Nguyen <dakennguyen@gmail.com>
Date: Fri, 14 Jul 2023 08:51:04 +0200
Subject: [PATCH 104/111] Add test

---
 .../ui/exercise-chat-widget.component.spec.ts | 55 +++++++++++++++++++
 1 file changed, 55 insertions(+)

diff --git a/src/test/javascript/spec/component/iris/ui/exercise-chat-widget.component.spec.ts b/src/test/javascript/spec/component/iris/ui/exercise-chat-widget.component.spec.ts
index c780b1f10d09..8fbda14f5c5f 100644
--- a/src/test/javascript/spec/component/iris/ui/exercise-chat-widget.component.spec.ts
+++ b/src/test/javascript/spec/component/iris/ui/exercise-chat-widget.component.spec.ts
@@ -393,6 +393,61 @@ describe('ExerciseChatWidgetComponent', () => {
         expect(component.isSendMessageFailedError()).toBeTruthy();
     });
 
+    it('should return false if the error key is neither SEND_MESSAGE_FAILED nor IRIS_SERVER_RESPONSE_TIMEOUT', () => {
+        component.error = { key: IrisErrorMessageKey.IRIS_DISABLED, fatal: false };
+        expect(component.isSendMessageFailedError()).toBeFalsy();
+    });
+
+    it('should return false if there is no error', () => {
+        component.error = null;
+        expect(component.isSendMessageFailedError()).toBeFalsy();
+    });
+
+    it('should set shakeErrorField to true and then false after 1 second', () => {
+        jest.useFakeTimers();
+        component.triggerShake();
+        expect(component.shakeErrorField).toBeTruthy();
+
+        jest.advanceTimersByTime(500);
+        expect(component.shakeErrorField).toBeTruthy();
+
+        jest.advanceTimersByTime(500);
+        expect(component.shakeErrorField).toBeFalsy();
+
+        jest.clearAllTimers();
+    });
+
+    it('should return true if error key is EMPTY_MESSAGE', () => {
+        component.error = { key: IrisErrorMessageKey.EMPTY_MESSAGE, fatal: true };
+        expect(component.isEmptyMessageError()).toBeTruthy();
+    });
+
+    it('should return false if error key is not EMPTY_MESSAGE', () => {
+        component.error = { key: IrisErrorMessageKey.IRIS_DISABLED, fatal: false };
+        expect(component.isEmptyMessageError()).toBeFalsy();
+    });
+
+    it('should return false if there is no error for empty message', () => {
+        component.error = null;
+        expect(component.isEmptyMessageError()).toBeFalsy();
+    });
+
+    it('should return true if isLoading is true', () => {
+        component.isLoading = true;
+        expect(component.deactivateSubmitButton()).toBeTruthy();
+    });
+
+    it('should return true if error exists and it is fatal', () => {
+        component.error = { key: IrisErrorMessageKey.SEND_MESSAGE_FAILED, fatal: true };
+        expect(component.deactivateSubmitButton()).toBeTruthy();
+    });
+
+    it('should return false if isLoading is false and no error exists', () => {
+        component.isLoading = false;
+        component.error = null;
+        expect(component.deactivateSubmitButton()).toBeFalsy();
+    });
+
     it('should return false if isLoading is false and error is not fatal', () => {
         component.isLoading = false;
         component.error = { key: IrisErrorMessageKey.SEND_MESSAGE_FAILED, fatal: false };

From 638cda79545c36767148f7775869cef9ffd3edfd Mon Sep 17 00:00:00 2001
From: Khoa Nguyen <dakennguyen@gmail.com>
Date: Fri, 14 Jul 2023 18:13:26 +0200
Subject: [PATCH 105/111] Disabled clear chat if empty

---
 .../exercise-chat-widget.component.html                  | 7 ++++---
 .../exercise-chat-widget.component.ts                    | 9 +++++++++
 2 files changed, 13 insertions(+), 3 deletions(-)

diff --git a/src/main/webapp/app/iris/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.html b/src/main/webapp/app/iris/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.html
index 1d6df3b6c251..fcf24f893a72 100644
--- a/src/main/webapp/app/iris/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.html
+++ b/src/main/webapp/app/iris/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.html
@@ -25,12 +25,13 @@ <h3 class="header-start">
                     </a>
                 </h3>
                 <div class="button-container">
-                    <button id="clear-chat-session" (click)="onClearSession()" class="header-icon">
+                    <button *ngIf="isClearChatEnabled()" id="clear-chat-session" (click)="onClearSession()" class="header-icon">
                         <fa-icon size="lg" [icon]="faTrash"></fa-icon>
                     </button>
                     <button *ngIf="!fullSize; else compressButton" (click)="maximizeScreen()" class="header-icon">
-                        <fa-icon [icon]="faExpand"></fa-icon></button
-                    ><ng-template #compressButton>
+                        <fa-icon [icon]="faExpand"></fa-icon>
+                    </button>
+                    <ng-template #compressButton>
                         <button (click)="minimizeScreen()" class="header-icon">
                             <fa-icon [icon]="faCompress"></fa-icon>
                         </button>
diff --git a/src/main/webapp/app/iris/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.ts b/src/main/webapp/app/iris/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.ts
index e80885ca4aef..57c81fb93cff 100644
--- a/src/main/webapp/app/iris/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.ts
+++ b/src/main/webapp/app/iris/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.ts
@@ -287,6 +287,10 @@ export class ExerciseChatWidgetComponent implements OnInit, OnDestroy, AfterView
         this.sessionService.createNewSession(this.exerciseId);
     }
 
+    isClearChatEnabled(): boolean {
+        return this.messages.length > 1 || (this.messages.length === 1 && !isArtemisClientSentMessage(this.messages[0]));
+    }
+
     /**
      * Scrolls to the unread message.
      */
@@ -508,6 +512,11 @@ export class ExerciseChatWidgetComponent implements OnInit, OnDestroy, AfterView
         return isServerSentMessage(message);
     }
 
+    /**
+     * Checks if a message is a welcome message generated by the client.
+     * @param message - The message to check.
+     * @returns A boolean indicating if the message is a client-sent message.
+     */
     isArtemisClientSentMessage(message: IrisMessage): message is IrisServerMessage {
         return isArtemisClientSentMessage(message);
     }

From 8bf691516b5333e5d602f6cf022a698b50a1a7dc Mon Sep 17 00:00:00 2001
From: Khoa Nguyen <dakennguyen@gmail.com>
Date: Fri, 14 Jul 2023 18:38:29 +0200
Subject: [PATCH 106/111] Add confirm modal

---
 .../exercise-chat-widget.component.html       | 19 ++++++++++++++++++-
 .../exercise-chat-widget.component.ts         | 10 ++++++++--
 src/main/webapp/i18n/de/exerciseChatbot.json  |  5 +++++
 src/main/webapp/i18n/en/exerciseChatbot.json  |  5 +++++
 4 files changed, 36 insertions(+), 3 deletions(-)

diff --git a/src/main/webapp/app/iris/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.html b/src/main/webapp/app/iris/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.html
index fcf24f893a72..c7bcadc8c7c0 100644
--- a/src/main/webapp/app/iris/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.html
+++ b/src/main/webapp/app/iris/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.html
@@ -25,7 +25,7 @@ <h3 class="header-start">
                     </a>
                 </h3>
                 <div class="button-container">
-                    <button *ngIf="isClearChatEnabled()" id="clear-chat-session" (click)="onClearSession()" class="header-icon">
+                    <button *ngIf="isClearChatEnabled()" id="clear-chat-session" (click)="onClearSession(toggleClearConfirmModal)" class="header-icon">
                         <fa-icon size="lg" [icon]="faTrash"></fa-icon>
                     </button>
                     <button *ngIf="!fullSize; else compressButton" (click)="maximizeScreen()" class="header-icon">
@@ -43,6 +43,23 @@ <h3 class="header-start">
             </div>
         </div>
 
+        <ng-template #toggleClearConfirmModal let-modal>
+            <div class="modal-header">
+                <h4 class="modal-title">
+                    <span>{{ 'artemisApp.exerciseChatbot.clearSession.title' | artemisTranslate }}</span>
+                </h4>
+                <button type="button" class="btn-close" aria-label="Close" (click)="modal.dismiss()"></button>
+            </div>
+            <div class="modal-body">
+                <p>{{ 'artemisApp.exerciseChatbot.clearSession.text' | artemisTranslate }}</p>
+            </div>
+            <div class="modal-footer">
+                <button type="button" class="btn btn-danger" (click)="modal.close('confirm')">
+                    <span>{{ 'artemisApp.exerciseChatbot.clearSession.submit' | artemisTranslate }}</span>
+                </button>
+            </div>
+        </ng-template>
+
         <!-- main chat section -->
         <div class="chat-body" #chatBody (scroll)="checkChatScroll()">
             <div *ngFor="let message of messages; let i = index">
diff --git a/src/main/webapp/app/iris/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.ts b/src/main/webapp/app/iris/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.ts
index 57c81fb93cff..97f429c723b6 100644
--- a/src/main/webapp/app/iris/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.ts
+++ b/src/main/webapp/app/iris/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.ts
@@ -13,6 +13,7 @@ import {
     faXmark,
 } from '@fortawesome/free-solid-svg-icons';
 import { ActivatedRoute, NavigationStart, Router } from '@angular/router';
+import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
 import { LocalStorageService } from 'ngx-webstorage';
 import { AccountService } from 'app/core/auth/account.service';
 import { ButtonType } from 'app/shared/components/button.component';
@@ -140,6 +141,7 @@ export class ExerciseChatWidgetComponent implements OnInit, OnDestroy, AfterView
         private overlay: Overlay,
         private router: Router,
         private sharedService: SharedService,
+        private modalService: NgbModal,
     ) {
         this.stateStore = data.stateStore;
         this.exerciseId = data.exerciseId;
@@ -283,8 +285,12 @@ export class ExerciseChatWidgetComponent implements OnInit, OnDestroy, AfterView
     /**
      * Clear session and start a new conversation.
      */
-    onClearSession(): void {
-        this.sessionService.createNewSession(this.exerciseId);
+    onClearSession(content: any) {
+        this.modalService.open(content).result.then((result: string) => {
+            if (result === 'confirm') {
+                this.sessionService.createNewSession(this.exerciseId);
+            }
+        });
     }
 
     isClearChatEnabled(): boolean {
diff --git a/src/main/webapp/i18n/de/exerciseChatbot.json b/src/main/webapp/i18n/de/exerciseChatbot.json
index 7e0a3e320f41..ee7236cb2914 100644
--- a/src/main/webapp/i18n/de/exerciseChatbot.json
+++ b/src/main/webapp/i18n/de/exerciseChatbot.json
@@ -28,6 +28,11 @@
             "supportText": "(Wenn du Probleme mit dem Iris-Widget oder bei der Interaktion mit Iris hast, erstelle bitte einen Issue auf GitHub https://github.com/ls1intum/Artemis)",
             "unreadMessages": "Ungelesene Nachrichten",
             "buttonTooltip": "Beginne mit Iris zu chatten!",
+            "clearSession": {
+                "title": "Chatverlauf löschen",
+                "text": "Bist du sicher, dass du den Chatverlauf löschen möchtest?",
+                "submit": "Absenden"
+            },
             "errors": {
                 "invalidSessionState": "Der Zustand der Iris Session ist ungültig. Es ist nicht möglich, in diesem Zustand Nachrichten zu senden.",
                 "historyLoadFailed": "Der Chatverlauf konnte nicht abgerufen werden.",
diff --git a/src/main/webapp/i18n/en/exerciseChatbot.json b/src/main/webapp/i18n/en/exerciseChatbot.json
index f004bef0c14c..6e7fa43d2170 100644
--- a/src/main/webapp/i18n/en/exerciseChatbot.json
+++ b/src/main/webapp/i18n/en/exerciseChatbot.json
@@ -28,6 +28,11 @@
             "supportText": "(If you have any problems using the widget or messaging Iris, please create an issue on GitHub: https://github.com/ls1intum/Artemis)",
             "unreadMessages": "Unread messages",
             "buttonTooltip": "Start chatting with Iris!",
+            "clearSession": {
+                "title": "Clear chat history",
+                "text": "Are you sure you want to clear the chat history?",
+                "submit": "Submit"
+            },
             "errors": {
                 "invalidSessionState": "Iris session state is invalid. It is impossible to send messages in this state.",
                 "historyLoadFailed": "Could not fetch messages.",

From d3e1c00d8b28c103a94ce15e526f723bd797624f Mon Sep 17 00:00:00 2001
From: Khoa Nguyen <dakennguyen@gmail.com>
Date: Fri, 14 Jul 2023 19:35:55 +0200
Subject: [PATCH 107/111] Fix and add tests

---
 .../exercise-chat-widget.component.html       |  4 +-
 .../exercise-chat-widget.component.ts         | 14 ++--
 .../ui/exercise-chat-widget.component.spec.ts | 69 ++++++++++++++++---
 .../spec/helpers/sample/iris-sample-data.ts   |  8 ++-
 4 files changed, 76 insertions(+), 19 deletions(-)

diff --git a/src/main/webapp/app/iris/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.html b/src/main/webapp/app/iris/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.html
index c7bcadc8c7c0..25dcba9909aa 100644
--- a/src/main/webapp/app/iris/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.html
+++ b/src/main/webapp/app/iris/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.html
@@ -25,7 +25,7 @@ <h3 class="header-start">
                     </a>
                 </h3>
                 <div class="button-container">
-                    <button *ngIf="isClearChatEnabled()" id="clear-chat-session" (click)="onClearSession(toggleClearConfirmModal)" class="header-icon">
+                    <button *ngIf="isClearChatEnabled()" id="clear-chat-session" (click)="onClearSession(clearConfirmModal)" class="header-icon">
                         <fa-icon size="lg" [icon]="faTrash"></fa-icon>
                     </button>
                     <button *ngIf="!fullSize; else compressButton" (click)="maximizeScreen()" class="header-icon">
@@ -43,7 +43,7 @@ <h3 class="header-start">
             </div>
         </div>
 
-        <ng-template #toggleClearConfirmModal let-modal>
+        <ng-template #clearConfirmModal let-modal>
             <div class="modal-header">
                 <h4 class="modal-title">
                     <span>{{ 'artemisApp.exerciseChatbot.clearSession.title' | artemisTranslate }}</span>
diff --git a/src/main/webapp/app/iris/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.ts b/src/main/webapp/app/iris/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.ts
index 97f429c723b6..7f7ec2a005c7 100644
--- a/src/main/webapp/app/iris/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.ts
+++ b/src/main/webapp/app/iris/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.ts
@@ -288,15 +288,11 @@ export class ExerciseChatWidgetComponent implements OnInit, OnDestroy, AfterView
     onClearSession(content: any) {
         this.modalService.open(content).result.then((result: string) => {
             if (result === 'confirm') {
-                this.sessionService.createNewSession(this.exerciseId);
+                this.createNewSession();
             }
         });
     }
 
-    isClearChatEnabled(): boolean {
-        return this.messages.length > 1 || (this.messages.length === 1 && !isArtemisClientSentMessage(this.messages[0]));
-    }
-
     /**
      * Scrolls to the unread message.
      */
@@ -599,4 +595,12 @@ export class ExerciseChatWidgetComponent implements OnInit, OnDestroy, AfterView
             this.fadeState = 'end';
         }
     }
+
+    isClearChatEnabled(): boolean {
+        return this.messages.length > 1 || (this.messages.length === 1 && !isArtemisClientSentMessage(this.messages[0]));
+    }
+
+    private createNewSession() {
+        this.sessionService.createNewSession(this.exerciseId);
+    }
 }
diff --git a/src/test/javascript/spec/component/iris/ui/exercise-chat-widget.component.spec.ts b/src/test/javascript/spec/component/iris/ui/exercise-chat-widget.component.spec.ts
index 8fbda14f5c5f..02550c1c83ac 100644
--- a/src/test/javascript/spec/component/iris/ui/exercise-chat-widget.component.spec.ts
+++ b/src/test/javascript/spec/component/iris/ui/exercise-chat-widget.component.spec.ts
@@ -3,6 +3,7 @@ import { ArtemisTranslatePipe } from 'app/shared/pipes/artemis-translate.pipe';
 import { FormsModule } from '@angular/forms';
 import { ActivatedRoute } from '@angular/router';
 import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
+import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
 import { MockPipe } from 'ng-mocks';
 import { ExerciseChatWidgetComponent } from 'app/iris/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component';
 import { IrisStateStore } from 'app/iris/state-store.service';
@@ -18,7 +19,7 @@ import {
     StudentMessageSentAction,
 } from 'app/iris/state-store.model';
 import { throwError } from 'rxjs';
-import { mockClientMessage, mockServerMessage } from '../../../helpers/sample/iris-sample-data';
+import { mockArtemisClientMessage, mockClientMessage, mockServerMessage } from '../../../helpers/sample/iris-sample-data';
 import { HtmlForMarkdownPipe } from 'app/shared/pipes/html-for-markdown.pipe';
 import { LocalStorageService, SessionStorageService } from 'ngx-webstorage';
 import { MockTranslateService } from '../../../helpers/mocks/service/mock-translate.service';
@@ -38,6 +39,7 @@ describe('ExerciseChatWidgetComponent', () => {
     let mockHttpMessageService: IrisHttpMessageService;
     let mockSessionService: IrisSessionService;
     let mockDialog: MatDialog;
+    let mockModalService: NgbModal;
 
     beforeEach(async () => {
         mockDialog = {
@@ -57,6 +59,9 @@ describe('ExerciseChatWidgetComponent', () => {
         } as any;
 
         stateStore = new IrisStateStore();
+        mockModalService = {
+            open: jest.fn(),
+        } as any;
 
         await TestBed.configureTestingModule({
             imports: [FormsModule, FontAwesomeModule, MatDialogModule],
@@ -64,6 +69,7 @@ describe('ExerciseChatWidgetComponent', () => {
             providers: [
                 { provide: MAT_DIALOG_DATA, useValue: { stateStore: stateStore, sessionService: mockSessionService } },
                 { provide: IrisHttpMessageService, useValue: mockHttpMessageService },
+                { provide: NgbModal, useValue: mockModalService },
                 { provide: MatDialog, useValue: mockDialog },
                 { provide: ActivatedRoute, useValue: {} },
                 { provide: LocalStorageService, useValue: {} },
@@ -322,16 +328,6 @@ describe('ExerciseChatWidgetComponent', () => {
         expect(textAreaElement.selectionEnd).toBe(expectedSelectionEnd);
     });
 
-    it('should call onClearSession when click on the clear button', () => {
-        const button: HTMLInputElement = fixture.debugElement.nativeElement.querySelector('#clear-chat-session');
-        jest.spyOn(mockSessionService, 'createNewSession');
-        component.exerciseId = 18;
-
-        button.click();
-
-        expect(mockSessionService.createNewSession).toHaveBeenCalledWith(18);
-    });
-
     it('should adjust textarea rows and call adjustChatBodyHeight', () => {
         const textarea = fixture.nativeElement.querySelector('textarea');
         const originalScrollHeightGetter = textarea.__lookupGetter__('scrollHeight');
@@ -453,4 +449,55 @@ describe('ExerciseChatWidgetComponent', () => {
         component.error = { key: IrisErrorMessageKey.SEND_MESSAGE_FAILED, fatal: false };
         expect(component.deactivateSubmitButton()).toBeFalsy();
     });
+
+    describe('clear chat session', () => {
+        it('should call service to clear old session and create a new one', () => {
+            jest.spyOn(mockSessionService, 'createNewSession');
+            component.exerciseId = 18;
+
+            component.createNewSession();
+
+            expect(mockSessionService.createNewSession).toHaveBeenCalledWith(18);
+        });
+
+        it('should open confirm modal when click on the clear button', () => {
+            stateStore.dispatch(new SessionReceivedAction(123, [mockClientMessage, mockServerMessage]));
+            fixture.detectChanges();
+            const button: HTMLInputElement = fixture.debugElement.nativeElement.querySelector('#clear-chat-session');
+
+            button.click();
+
+            const openModalStub = jest.spyOn(mockModalService, 'open');
+            expect(openModalStub).toHaveBeenCalledOnce();
+        });
+
+        it('should not render clear chat button if the history is empty', () => {
+            const button: HTMLInputElement = fixture.debugElement.nativeElement.querySelector('#clear-chat-session');
+            expect(button).toBeNull();
+        });
+
+        it('should not render clear chat button if the history has only one message from the client', () => {
+            stateStore.dispatch(new SessionReceivedAction(123, [mockArtemisClientMessage]));
+            fixture.detectChanges();
+            const button: HTMLInputElement = fixture.debugElement.nativeElement.querySelector('#clear-chat-session');
+
+            expect(button).toBeNull();
+        });
+
+        it('should render clear chat button if the history has one message from server', () => {
+            stateStore.dispatch(new SessionReceivedAction(123, [mockServerMessage]));
+            fixture.detectChanges();
+            const button: HTMLInputElement = fixture.debugElement.nativeElement.querySelector('#clear-chat-session');
+
+            expect(button).not.toBeNull();
+        });
+
+        it('should render clear chat button if the history has one message from user', () => {
+            stateStore.dispatch(new SessionReceivedAction(123, [mockClientMessage]));
+            fixture.detectChanges();
+            const button: HTMLInputElement = fixture.debugElement.nativeElement.querySelector('#clear-chat-session');
+
+            expect(button).not.toBeNull();
+        });
+    });
 });
diff --git a/src/test/javascript/spec/helpers/sample/iris-sample-data.ts b/src/test/javascript/spec/helpers/sample/iris-sample-data.ts
index bef9f339d278..304397309831 100644
--- a/src/test/javascript/spec/helpers/sample/iris-sample-data.ts
+++ b/src/test/javascript/spec/helpers/sample/iris-sample-data.ts
@@ -1,7 +1,7 @@
 import dayjs from 'dayjs';
 import { ExerciseType } from 'app/entities/exercise.model';
 import { ProgrammingExercise } from 'app/entities/programming-exercise.model';
-import { IrisClientMessage, IrisSender, IrisServerMessage } from 'app/entities/iris/iris-message.model';
+import { IrisArtemisClientMessage, IrisClientMessage, IrisSender, IrisServerMessage } from 'app/entities/iris/iris-message.model';
 import { IrisMessageContent, IrisMessageContentType } from 'app/entities/iris/iris-content-type.model';
 import { IrisSession } from 'app/entities/iris/iris-session.model';
 
@@ -19,6 +19,12 @@ export const mockServerMessage = {
     sentAt: dayjs(),
 } as IrisServerMessage;
 
+export const mockArtemisClientMessage = {
+    sender: IrisSender.ARTEMIS_CLIENT,
+    content: [mockMessageContent],
+    sentAt: dayjs(),
+} as IrisArtemisClientMessage;
+
 export const mockClientMessage = {
     sender: IrisSender.USER,
     content: [mockMessageContent],

From 01415c439b2610fba47f8056376b57b0b795ab1f Mon Sep 17 00:00:00 2001
From: Khoa Nguyen <dakennguyen@gmail.com>
Date: Fri, 14 Jul 2023 19:41:32 +0200
Subject: [PATCH 108/111] Fix type checking

---
 .../exercise-chatwidget/exercise-chat-widget.component.ts       | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/main/webapp/app/iris/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.ts b/src/main/webapp/app/iris/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.ts
index 7f7ec2a005c7..1535db749217 100644
--- a/src/main/webapp/app/iris/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.ts
+++ b/src/main/webapp/app/iris/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.ts
@@ -600,7 +600,7 @@ export class ExerciseChatWidgetComponent implements OnInit, OnDestroy, AfterView
         return this.messages.length > 1 || (this.messages.length === 1 && !isArtemisClientSentMessage(this.messages[0]));
     }
 
-    private createNewSession() {
+    createNewSession() {
         this.sessionService.createNewSession(this.exerciseId);
     }
 }

From cbcee52d843df6a9d31f891df207cf16cd08e04e Mon Sep 17 00:00:00 2001
From: Khoa Nguyen <dakennguyen@gmail.com>
Date: Fri, 14 Jul 2023 21:59:01 +0200
Subject: [PATCH 109/111] Render modal on top and resize icon

---
 .../exercise-chat-widget.component.html                   | 2 +-
 .../exercise-chat-widget.component.scss                   | 8 ++++++++
 2 files changed, 9 insertions(+), 1 deletion(-)

diff --git a/src/main/webapp/app/iris/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.html b/src/main/webapp/app/iris/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.html
index 25dcba9909aa..95fbce50b8ec 100644
--- a/src/main/webapp/app/iris/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.html
+++ b/src/main/webapp/app/iris/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.html
@@ -26,7 +26,7 @@ <h3 class="header-start">
                 </h3>
                 <div class="button-container">
                     <button *ngIf="isClearChatEnabled()" id="clear-chat-session" (click)="onClearSession(clearConfirmModal)" class="header-icon">
-                        <fa-icon size="lg" [icon]="faTrash"></fa-icon>
+                        <fa-icon [icon]="faTrash"></fa-icon>
                     </button>
                     <button *ngIf="!fullSize; else compressButton" (click)="maximizeScreen()" class="header-icon">
                         <fa-icon [icon]="faExpand"></fa-icon>
diff --git a/src/main/webapp/app/iris/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.scss b/src/main/webapp/app/iris/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.scss
index 6869dd3dd995..bf14e6f83765 100644
--- a/src/main/webapp/app/iris/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.scss
+++ b/src/main/webapp/app/iris/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.scss
@@ -259,3 +259,11 @@ pre {
 .shake-animation {
     animation: shake 0.3s cubic-bezier(0.36, 0.07, 0.19, 0.97);
 }
+
+::ng-deep ngb-modal-backdrop {
+    z-index: 9999 !important;
+}
+
+::ng-deep ngb-modal-window {
+    z-index: 9999 !important;
+}

From f564473f00770221da35a029b9537aadd86b62be Mon Sep 17 00:00:00 2001
From: Khoa Nguyen <dakennguyen@gmail.com>
Date: Sun, 16 Jul 2023 12:26:19 +0200
Subject: [PATCH 110/111] Change text translation

---
 src/main/webapp/i18n/de/exerciseChatbot.json | 2 +-
 src/main/webapp/i18n/en/exerciseChatbot.json | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/main/webapp/i18n/de/exerciseChatbot.json b/src/main/webapp/i18n/de/exerciseChatbot.json
index ee7236cb2914..c5af0cac19b8 100644
--- a/src/main/webapp/i18n/de/exerciseChatbot.json
+++ b/src/main/webapp/i18n/de/exerciseChatbot.json
@@ -31,7 +31,7 @@
             "clearSession": {
                 "title": "Chatverlauf löschen",
                 "text": "Bist du sicher, dass du den Chatverlauf löschen möchtest?",
-                "submit": "Absenden"
+                "submit": "Bestätigen"
             },
             "errors": {
                 "invalidSessionState": "Der Zustand der Iris Session ist ungültig. Es ist nicht möglich, in diesem Zustand Nachrichten zu senden.",
diff --git a/src/main/webapp/i18n/en/exerciseChatbot.json b/src/main/webapp/i18n/en/exerciseChatbot.json
index 6e7fa43d2170..ccde79f02d59 100644
--- a/src/main/webapp/i18n/en/exerciseChatbot.json
+++ b/src/main/webapp/i18n/en/exerciseChatbot.json
@@ -31,7 +31,7 @@
             "clearSession": {
                 "title": "Clear chat history",
                 "text": "Are you sure you want to clear the chat history?",
-                "submit": "Submit"
+                "submit": "Confirm"
             },
             "errors": {
                 "invalidSessionState": "Iris session state is invalid. It is impossible to send messages in this state.",

From b355d5c8e0c5251fd53f66ae39c2ced25b7939b5 Mon Sep 17 00:00:00 2001
From: Khoa Nguyen <dakennguyen@gmail.com>
Date: Mon, 17 Jul 2023 20:47:52 +0200
Subject: [PATCH 111/111] Add clear chat history instruction for About Iris

---
 src/main/webapp/app/iris/about-iris/about-iris.component.ts | 2 +-
 src/main/webapp/i18n/de/exerciseChatbot.json                | 1 +
 src/main/webapp/i18n/en/exerciseChatbot.json                | 1 +
 3 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/main/webapp/app/iris/about-iris/about-iris.component.ts b/src/main/webapp/app/iris/about-iris/about-iris.component.ts
index cf6320b5cbfb..c4148368398b 100644
--- a/src/main/webapp/app/iris/about-iris/about-iris.component.ts
+++ b/src/main/webapp/app/iris/about-iris/about-iris.component.ts
@@ -10,7 +10,7 @@ import { IrisLogoSize } from '../iris-logo/iris-logo.component';
 export class AboutIrisComponent {
     faRobot = faRobot;
     // How many bullet points each heading has
-    bulletPoints = { '1': 2, '2': 5, '3': 3, '4': 4 };
+    bulletPoints = { '1': 2, '2': 5, '3': 3, '4': 5 };
 
     objectKeys = Object.keys;
     array = Array;
diff --git a/src/main/webapp/i18n/de/exerciseChatbot.json b/src/main/webapp/i18n/de/exerciseChatbot.json
index c5af0cac19b8..9a81747f3f97 100644
--- a/src/main/webapp/i18n/de/exerciseChatbot.json
+++ b/src/main/webapp/i18n/de/exerciseChatbot.json
@@ -25,6 +25,7 @@
             "text4_2": "<b>Verschieben des Widgets:</b> Du kannst das Widget verschieben. Klicke und halte das Widget und ziehe es an die gewünschte Position.",
             "text4_3": "<b>Vergrößern und Verkleinern des Widgets:</b> Klicke und ziehe die Ränder des Widgets in verschiedene Richtungen, um die Größe zu ändern.",
             "text4_4": "<b>Vollbildmodus:</b> Du kannst das Widget im Vollbildmodus öffnen, indem du auf den Vollbildmodus-Button (in der oberen rechten Ecke des Widgets) klickst.",
+            "text4_5": "<b>Chatverlauf löschen:</b> Du kannst deinen Chatverlauf löschen, indem du auf den Mülleimer klickst (oben rechts im Widget). Dadurch werden alle vorherigen Nachrichten gelöscht und du kannst einen neuen Chat starten.",
             "supportText": "(Wenn du Probleme mit dem Iris-Widget oder bei der Interaktion mit Iris hast, erstelle bitte einen Issue auf GitHub https://github.com/ls1intum/Artemis)",
             "unreadMessages": "Ungelesene Nachrichten",
             "buttonTooltip": "Beginne mit Iris zu chatten!",
diff --git a/src/main/webapp/i18n/en/exerciseChatbot.json b/src/main/webapp/i18n/en/exerciseChatbot.json
index ccde79f02d59..92707fa06fbf 100644
--- a/src/main/webapp/i18n/en/exerciseChatbot.json
+++ b/src/main/webapp/i18n/en/exerciseChatbot.json
@@ -25,6 +25,7 @@
             "text4_2": "<b>Movable Functionality:</b> You have the flexibility to move the widget around. Simply click and hold on the widget and drag it to the desired position.",
             "text4_3": "<b>Resize the Widget:</b> Click and drag the borders of the widget in different directions to make it smaller or larger, depending on your preference.",
             "text4_4": "<b>Full Screen Feature:</b> You can expand the widget to full screen mode by clicking on the full screen button (top right corner of the widget).",
+            "text4_5": "<b>Clear chat history:</b> You can clear your chat history by clicking on the trash can button (top right corner of the widget). Thereby, all previous messages are deleted and you can start a new conversation.",
             "supportText": "(If you have any problems using the widget or messaging Iris, please create an issue on GitHub: https://github.com/ls1intum/Artemis)",
             "unreadMessages": "Unread messages",
             "buttonTooltip": "Start chatting with Iris!",