Iris: Add clear chat session button

src/main/webapp/app/iris/exercise-chatbot/exercise-chatbot.component.ts

@@ -109,6 +109,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',

src/main/webapp/app/iris/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.html

@@ -25,9 +25,13 @@ <h3 class="header-start">
                     </a>
                 </h3>
                 <div class="button-container">
+                    <button *ngIf="isClearChatEnabled()" id="clear-chat-session" (click)="onClearSession(clearConfirmModal)" class="header-icon">
+                        <fa-icon [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>
@@ -39,6 +43,23 @@ <h3 class="header-start">
             </div>
         </div>
 
+        <ng-template #clearConfirmModal 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">

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;
+}

src/main/webapp/app/iris/exercise-chatbot/exercise-chatwidget/exercise-chat-widget.component.ts

@@ -1,5 +1,19 @@
-import { faArrowDown, faCircle, faCircleInfo, faCompress, faExpand, faPaperPlane, faRedo, faRobot, faThumbsDown, faThumbsUp, 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 { 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';
@@ -29,6 +43,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 { IrisErrorMessageKey, IrisErrorType } from 'app/entities/iris/iris-errors.model';
 import dayjs from 'dayjs';
 import { AnimationEvent, animate, state, style, transition, trigger } from '@angular/animations';
@@ -57,6 +72,7 @@ import { AnimationEvent, animate, state, style, transition, trigger } from '@ang
 })
 export class ExerciseChatWidgetComponent implements OnInit, OnDestroy, AfterViewInit {
     // Icons
+    faTrash = faTrash;
     faCircle = faCircle;
     faPaperPlane = faPaperPlane;
     faExpand = faExpand;
@@ -98,6 +114,8 @@ export class ExerciseChatWidgetComponent implements OnInit, OnDestroy, AfterView
     isGreetingMessage = false;
     shouldLoadGreetingMessage = true;
     fadeState = '';
+    exerciseId: number;
+    sessionService: IrisSessionService;
 
     // User preferences
     userAccepted = false;
@@ -123,8 +141,11 @@ 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;
+        this.sessionService = data.sessionService;
         this.navigationSubscription = this.router.events.subscribe((event) => {
             if (event instanceof NavigationStart) {
                 this.dialog.closeAll();
@@ -261,6 +282,17 @@ export class ExerciseChatWidgetComponent implements OnInit, OnDestroy, AfterView
         this.resetChatBodyHeight();
     }
 
+    /**
+     * Clear session and start a new conversation.
+     */
+    onClearSession(content: any) {
+        this.modalService.open(content).result.then((result: string) => {
+            if (result === 'confirm') {
+                this.createNewSession();
+            }
+        });
+    }
+
     /**
      * Scrolls to the unread message.
      */
@@ -482,6 +514,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);
     }
@@ -558,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]));
+    }
+
+    createNewSession() {
+        this.sessionService.createNewSession(this.exerciseId);
+    }
 }

src/main/webapp/app/iris/session.service.ts

@@ -56,7 +56,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, []));

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.",

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.",

src/test/javascript/spec/component/iris/session.service.spec.ts

@@ -33,6 +33,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(IrisErrorMessageKey.SESSION_CREATION_FAILED));
+        });
+    });
+
     it('should create a new session if getCurrentSession returns 404 and createSession is successful', async () => {
         // given
         const exerciseId = 123;

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';
@@ -29,13 +30,16 @@ import { MockAccountService } from '../../../helpers/mocks/service/mock-account.
 import { IrisMessageContentType } from 'app/entities/iris/iris-content-type.model';
 import { IrisClientMessage, IrisSender } from 'app/entities/iris/iris-message.model';
 import { IrisErrorMessageKey } from 'app/entities/iris/iris-errors.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;
+    let mockModalService: NgbModal;
 
     beforeEach(async () => {
         mockDialog = {
@@ -50,14 +54,22 @@ describe('ExerciseChatWidgetComponent', () => {
             createMessage: jest.fn(),
         } as any;
 
+        mockSessionService = {
+            createNewSession: jest.fn(),
+        } as any;
+
         stateStore = new IrisStateStore();
+        mockModalService = {
+            open: jest.fn(),
+        } as any;
 
         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: NgbModal, useValue: mockModalService },
                 { provide: MatDialog, useValue: mockDialog },
                 { provide: ActivatedRoute, useValue: {} },
                 { provide: LocalStorageService, useValue: {} },
@@ -437,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();
+        });
+    });
 });

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],