chore: Reset to feature/iris/event-service

src/main/webapp/app/iris/exercise-chatbot/exercise-chatbot-button.component.html

@@ -1,4 +1,21 @@
 @if (!chatOpen) {
+    <div
+        #chatBubble
+        class="message-bubble"
+        (click)="handleButtonClick()"
+        [ngClass]="{ 'content-overflow': this.isOverflowing }"
+        [@expandAnimation]="newIrisMessage ? 'visible' : 'hidden'"
+    >
+        @if (newIrisMessage) {
+            <span [innerHTML]="newIrisMessage | htmlForMarkdown"></span>
+            @if (this.isOverflowing) {
+                <div class="read-more">
+                    <span> See full message </span>
+                    <fa-icon [icon]="faAngleDoubleDown" class="read-more-icon" />
+                </div>
+            }
+        }
+    </div>
     <div class="chatbot-button">
         <jhi-iris-logo [size]="IrisLogoSize.MEDIUM" [look]="IrisLogoLookDirection.LEFT" (click)="handleButtonClick()" />
         @if (hasNewMessages) {

src/main/webapp/app/iris/exercise-chatbot/exercise-chatbot-button.component.scss

@@ -11,6 +11,64 @@
     }
 }
 
+.message-bubble {
+    --r: 13px; /* the radius */
+
+    position: absolute;
+    z-index: 50;
+    bottom: 100px;
+    right: 80px;
+    width: 350px;
+    height: 150px;
+    background-color: var(--iris-client-chat-background);
+    cursor: pointer;
+    transition: all 0.1s ease-in-out;
+    overflow-y: hidden;
+    overflow-wrap: break-word;
+    word-wrap: break-word;
+    word-break: break-word;
+    padding: 10px;
+    display: flex;
+    border-radius: var(--r);
+    border-bottom-right-radius: 0;
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
+
+    &:hover {
+        transform: scale(1.05);
+        .read-more > span {
+            text-decoration: underline;
+        }
+    }
+}
+.content-overflow {
+    &::before {
+        content: '';
+        bottom: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        position: absolute;
+        background: linear-gradient(0, var(--iris-chat-bubble-fade) 2%, transparent);
+    }
+}
+
+.read-more {
+    position: absolute;
+    cursor: pointer;
+    bottom: 5px;
+    text-align: center;
+    padding: 0 10px;
+    width: 150px;
+    left: calc(50% - 75px);
+    font-size: 14px;
+    z-index: 100;
+    color: var(--link-color);
+}
+
+.hidden {
+    display: none;
+}
+
 .btn-circle {
     width: 40px;
     height: 40px;

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

@@ -1,28 +1,61 @@
-import { Component, OnDestroy, OnInit } from '@angular/core';
+import { Component, ElementRef, OnDestroy, OnInit, ViewChild } from '@angular/core';
 import { MatDialog, MatDialogRef } from '@angular/material/dialog';
 import { Overlay } from '@angular/cdk/overlay';
 import { ActivatedRoute } from '@angular/router';
 import { IrisChatbotWidgetComponent } from 'app/iris/exercise-chatbot/widget/chatbot-widget.component';
-import { Subscription } from 'rxjs';
-import { faChevronDown, faCircle } from '@fortawesome/free-solid-svg-icons';
+import { EMPTY, Subscription, filter, of, switchMap } from 'rxjs';
+import { faAngleDoubleDown, faChevronDown, faCircle } from '@fortawesome/free-solid-svg-icons';
 import { IrisLogoLookDirection, IrisLogoSize } from 'app/iris/iris-logo/iris-logo.component';
 import { ChatServiceMode, IrisChatService } from 'app/iris/iris-chat.service';
+import { animate, state, style, transition, trigger } from '@angular/animations';
+import { IrisTextMessageContent } from 'app/entities/iris/iris-content-type.model';
 
 @Component({
     selector: 'jhi-exercise-chatbot-button',
     templateUrl: './exercise-chatbot-button.component.html',
     styleUrls: ['./exercise-chatbot-button.component.scss'],
+    animations: [
+        trigger('expandAnimation', [
+            state(
+                'hidden',
+                style({
+                    opacity: 0,
+                    transform: 'scale(0)',
+                    transformOrigin: 'bottom right',
+                }),
+            ),
+            state(
+                'visible',
+                style({
+                    opacity: 1,
+                    transform: 'scale(1)',
+                    transformOrigin: 'bottom right',
+                }),
+            ),
+            transition('hidden => visible', animate('300ms ease-out')),
+            transition('visible => hidden', animate('300ms ease-in')),
+        ]),
+    ],
 })
 export class IrisExerciseChatbotButtonComponent implements OnInit, OnDestroy {
     dialogRef: MatDialogRef<IrisChatbotWidgetComponent> | null = null;
     chatOpen = false;
+    isOverflowing = false;
     hasNewMessages = false;
+    newIrisMessage: string | undefined;
+
+    private readonly CHAT_BUBBLE_TIMEOUT = 10000;
+
     private numNewMessagesSubscription: Subscription;
     private paramsSubscription: Subscription;
+    private latestIrisMessageSubscription: Subscription;
 
     // Icons
     faCircle = faCircle;
     faChevronDown = faChevronDown;
+    faAngleDoubleDown = faAngleDoubleDown;
+
+    @ViewChild('chatBubble') chatBubble: ElementRef;
 
     protected readonly IrisLogoLookDirection = IrisLogoLookDirection;
     protected readonly IrisLogoSize = IrisLogoSize;
@@ -35,7 +68,7 @@ export class IrisExerciseChatbotButtonComponent implements OnInit, OnDestroy {
     ) {}
 
     ngOnInit() {
-        // Subscribes to route params and gets the exerciseId from the route
+        // Subscribes to route params and gets the exerciseId from the router
         this.paramsSubscription = this.route.params.subscribe((params) => {
             const exerciseId = parseInt(params['exerciseId'], 10);
             this.chatService.switchTo(ChatServiceMode.EXERCISE, exerciseId);
@@ -45,6 +78,24 @@ export class IrisExerciseChatbotButtonComponent implements OnInit, OnDestroy {
         this.numNewMessagesSubscription = this.chatService.numNewMessages.subscribe((num) => {
             this.hasNewMessages = num > 0;
         });
+        this.latestIrisMessageSubscription = this.chatService.newIrisMessage
+            .pipe(
+                filter((msg) => !!msg),
+                switchMap((msg) => {
+                    if (msg!.content && msg!.content.length > 0) {
+                        return of((msg!.content[0] as IrisTextMessageContent).textContent);
+                    }
+                    return EMPTY;
+                }),
+            )
+            .subscribe((message) => {
+                this.newIrisMessage = message;
+                setTimeout(() => this.checkOverflow(), 0);
+                setTimeout(() => {
+                    this.newIrisMessage = undefined;
+                    this.isOverflowing = false;
+                }, this.CHAT_BUBBLE_TIMEOUT);
+            });
     }
 
     ngOnDestroy() {
@@ -54,6 +105,9 @@ export class IrisExerciseChatbotButtonComponent implements OnInit, OnDestroy {
         }
         this.numNewMessagesSubscription?.unsubscribe();
         this.paramsSubscription.unsubscribe();
+        this.latestIrisMessageSubscription.unsubscribe();
+        this.newIrisMessage = undefined;
+        this.isOverflowing = false;
     }
 
     /**
@@ -71,18 +125,35 @@ export class IrisExerciseChatbotButtonComponent implements OnInit, OnDestroy {
         }
     }
 
+    /**
+     * Checks if the chat bubble is overflowing and sets isOverflowing to true if it is.
+     */
+    public checkOverflow() {
+        const element = this.chatBubble.nativeElement;
+        this.isOverflowing = element.scrollHeight > element.clientHeight;
+    }
+
     /**
      * Opens the chat dialog using MatDialog.
      * Sets the configuration options for the dialog, including position, size, and data.
      */
-    openChat() {
+    public openChat() {
         this.chatOpen = true;
+        this.newIrisMessage = undefined;
+        this.isOverflowing = false;
         this.dialogRef = this.dialog.open(IrisChatbotWidgetComponent, {
             hasBackdrop: false,
             scrollStrategy: this.overlay.scrollStrategies.noop(),
             position: { bottom: '0px', right: '0px' },
             disableClose: true,
         });
-        this.dialogRef.afterClosed().subscribe(() => (this.chatOpen = false));
+        this.dialogRef.afterClosed().subscribe(() => this.handleDialogClose());
     }
+
+    private handleDialogClose() {
+        this.chatOpen = false;
+        this.newIrisMessage = undefined;
+    }
+
+    protected readonly IrisTextMessageContent = IrisTextMessageContent;
 }

src/main/webapp/app/iris/iris-chat.service.ts

@@ -27,6 +27,7 @@ export enum ChatServiceMode {
 export class IrisChatService implements OnDestroy {
     sessionId?: number;
     messages: BehaviorSubject<IrisMessage[]> = new BehaviorSubject([]);
+    newIrisMessage: BehaviorSubject<IrisMessage | undefined> = new BehaviorSubject(undefined);
     numNewMessages: BehaviorSubject<number> = new BehaviorSubject(0);
     stages: BehaviorSubject<IrisStageDTO[]> = new BehaviorSubject([]);
     suggestions: BehaviorSubject<string[]> = new BehaviorSubject([]);
@@ -97,6 +98,9 @@ export class IrisChatService implements OnDestroy {
     private replaceOrAddMessage(message: IrisMessage) {
         const messageWasReplaced = this.replaceMessage(message);
         if (!messageWasReplaced) {
+            if (message.sender === IrisSender.LLM) {
+                this.newIrisMessage.next(message);
+            }
             this.messages.next([...this.messages.getValue(), message]);
         }
     }
@@ -151,6 +155,7 @@ export class IrisChatService implements OnDestroy {
 
     public messagesRead(): void {
         this.numNewMessages.next(0);
+        this.newIrisMessage.next(undefined);
     }
 
     public setUserAccepted(): void {
@@ -238,6 +243,7 @@ export class IrisChatService implements OnDestroy {
             this.stages.next([]);
             this.suggestions.next([]);
             this.numNewMessages.next(0);
+            this.newIrisMessage.next(undefined);
         }
         this.error.next(undefined);
     }

src/main/webapp/content/scss/themes/_dark-variables.scss

@@ -649,6 +649,7 @@ $competency-rings-blue-bg: transparentize($competency-rings-blue, 0.8);
 
 // Iris Chatbot
 $iris-chat-widget-background: var(--neutral-dark-l-5);
+$iris-chat-bubble-fade: $black;
 $iris-client-chat-background: var(--neutral-dark-l-10);
 $iris-client-chat-input: var(--neutral-dark-l-5);
 $iris-my-chat-background: #008462;

src/main/webapp/content/scss/themes/_default-variables.scss

@@ -577,6 +577,7 @@ $competency-rings-blue-bg: transparentize($competency-rings-blue, 0.8);
 // Iris Chatbot
 // TODO: Use standard colors
 $iris-chat-widget-background: $white;
+$iris-chat-bubble-fade: $white;
 $iris-client-chat-background: var(--gray-200);
 $iris-client-chat-input: $white;
 $iris-my-chat-background: #a9dcb5;