Add ability to maximise images in chat

frontend/src/components/chat/chat_message.scss

@@ -47,6 +47,7 @@ $bubble-width: 400px;
   color: var(--md-sys-color-on-secondary-container);
   max-width: $bubble-width;
   overflow-wrap: anywhere;
+
   p {
     margin-top: 0;
     margin-bottom: common.$spacing-small;
@@ -159,6 +160,7 @@ $bubble-width: 400px;
   border-radius: common.$spacing-medium;
   margin-top: common.$spacing-small;
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  cursor: pointer;
   transition:
     transform 0.2s ease,
     box-shadow 0.2s ease;
@@ -185,6 +187,7 @@ $bubble-width: 400px;
     font-style: italic;
     color: var(--md-sys-color-outline);
     text-align: center;
+
     p {
       margin: 0;
     }

frontend/src/components/chat/chat_message.ts

@@ -1,9 +1,11 @@
 import '../participant_profile/avatar_icon';
+import '../fullscreen_image/fullscreen_image';
+import type {FullscreenImage} from '../fullscreen_image/fullscreen_image';
 
 import {MobxLitElement} from '@adobe/lit-mobx';
 
 import {CSSResultGroup, html, nothing} from 'lit';
-import {customElement, property} from 'lit/decorators.js';
+import {customElement, property, state} from 'lit/decorators.js';
 import {classMap} from 'lit/directives/class-map.js';
 import {unsafeHTML} from 'lit/directives/unsafe-html.js';
 
@@ -32,6 +34,52 @@ export class ChatMessageComponent extends MobxLitElement {
   private readonly participantService = core.getService(ParticipantService);
 
   @property() chat: ChatMessage | undefined = undefined;
+  @state() private maximizedImageUrl: string | null = null;
+  private modalElement: HTMLElement | null = null;
+
+  private openImageModal(imageUrl: string) {
+    this.maximizedImageUrl = imageUrl;
+  }
+
+  private closeImageModal() {
+    this.maximizedImageUrl = null;
+  }
+
+  override disconnectedCallback() {
+    super.disconnectedCallback();
+    this.removeModalFromBody();
+  }
+
+  override updated(changedProperties: Map<string, unknown>) {
+    super.updated(changedProperties);
+
+    if (changedProperties.has('maximizedImageUrl')) {
+      if (this.maximizedImageUrl) {
+        this.renderModalToBody();
+      } else {
+        this.removeModalFromBody();
+      }
+    }
+  }
+
+  private renderModalToBody() {
+    this.removeModalFromBody();
+
+    const modal = document.createElement(
+      'fullscreen-image',
+    ) as unknown as FullscreenImage;
+    modal.imageUrl = this.maximizedImageUrl!;
+    modal.addEventListener('close', () => this.closeImageModal());
+    document.body.appendChild(modal);
+    this.modalElement = modal;
+  }
+
+  private removeModalFromBody() {
+    if (this.modalElement) {
+      this.modalElement.remove();
+      this.modalElement = null;
+    }
+  }
 
   override render() {
     if (!this.chat) {
@@ -95,6 +143,7 @@ export class ChatMessageComponent extends MobxLitElement {
                     src="${imageUrl}"
                     alt="Generated Image"
                     class="generated-image"
+                    @click=${() => this.openImageModal(imageUrl)}
                   />`,
               )
             : nothing}
@@ -134,6 +183,7 @@ export class ChatMessageComponent extends MobxLitElement {
                     src="${imageUrl}"
                     alt="Generated Image"
                     class="generated-image"
+                    @click=${() => this.openImageModal(imageUrl)}
                   />`,
               )
             : nothing}

frontend/src/components/fullscreen_image/fullscreen_image.scss

@@ -0,0 +1,71 @@
+@use '../../sass/common';
+
+:host {
+  position: fixed;
+  inset: 0;
+  z-index: 10;
+}
+
+.fullscreen-image-modal {
+  @include common.flex-row-align-center;
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.92);
+  justify-content: center;
+  z-index: 1;
+  cursor: pointer;
+  animation: fadeIn 0.2s ease;
+  isolation: isolate;
+}
+
+.modal-content {
+  position: relative;
+  max-width: 95vw;
+  max-height: 95vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  img {
+    max-width: 100%;
+    max-height: 95vh;
+    object-fit: contain;
+    border-radius: common.$spacing-medium;
+    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
+  }
+}
+
+.close-button {
+  @include common.flex-row-align-center;
+  position: fixed;
+  top: 20px;
+  right: 20px;
+  background: var(--md-sys-color-surface);
+  color: var(--md-sys-color-on-surface);
+  border: 2px solid var(--md-sys-color-outline);
+  border-radius: 50%;
+  width: 40px;
+  height: 40px;
+  font-size: 24px;
+  cursor: pointer;
+  justify-content: center;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+  transition: all 0.2s ease;
+  z-index: 2;
+  font-weight: bold;
+
+  &:hover {
+    background: var(--md-sys-color-surface-variant);
+    transform: scale(1.1);
+  }
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+}

frontend/src/components/fullscreen_image/fullscreen_image.ts

@@ -0,0 +1,58 @@
+import {MobxLitElement} from '@adobe/lit-mobx';
+import {CSSResultGroup, html, nothing} from 'lit';
+import {customElement, property} from 'lit/decorators.js';
+
+import {styles} from './fullscreen_image.scss';
+
+/** Fullscreen image modal component */
+@customElement('fullscreen-image')
+export class FullscreenImage extends MobxLitElement {
+  static override styles: CSSResultGroup = [styles];
+
+  @property() imageUrl = '';
+
+  private handleEscapeKey = (e: KeyboardEvent) => {
+    if (e.key === 'Escape') {
+      this.close();
+    }
+  };
+
+  override connectedCallback() {
+    super.connectedCallback();
+    document.addEventListener('keydown', this.handleEscapeKey);
+  }
+
+  override disconnectedCallback() {
+    super.disconnectedCallback();
+    document.removeEventListener('keydown', this.handleEscapeKey);
+  }
+
+  private close() {
+    this.dispatchEvent(new CustomEvent('close'));
+  }
+
+  override render() {
+    if (!this.imageUrl) {
+      return nothing;
+    }
+
+    return html`
+      <div class="fullscreen-image-modal" @click=${this.close}>
+        <div class="modal-content">
+          <button class="close-button" @click=${this.close}>✕</button>
+          <img
+            src="${this.imageUrl}"
+            alt="Maximized Image"
+            @click=${(e: Event) => e.stopPropagation()}
+          />
+        </div>
+      </div>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'fullscreen-image': FullscreenImage;
+  }
+}