fix: attachment persistence with IndexedDB storage

src/app/app.module.ts

@@ -32,6 +32,7 @@ import {AudioService} from './core/services/audio.service';
 import {DownloadService} from './core/services/download.service';
 import {EvalService} from './core/services/eval.service';
 import {EventService} from './core/services/event.service';
+import {FileStorageService} from './core/services/file-storage.service';
 import {SessionService} from './core/services/session.service';
 import {VideoService} from './core/services/video.service';
 import {WebSocketService} from './core/services/websocket.service';
@@ -60,6 +61,7 @@ import {WebSocketService} from './core/services/websocket.service';
     EvalService,
     ArtifactService,
     DownloadService,
+    FileStorageService,
   ],
   bootstrap: [AppComponent],
 })

src/app/components/chat/chat.component.html

@@ -189,13 +189,37 @@
           </button>
           <mat-card class="message-card" [ngClass]="{'eval-fail': message.evalStatus === 2}">
             <div class="attachments" *ngIf="message.attachments">
-              <div class="attachment" *ngFor="let file of message.attachments">
-                <ng-container *ngIf="file.file.type.startsWith('image/')">
-                  <img [src]="file.url" alt="attachment" class="image-preview-chat">
+              <div class="attachment" *ngFor="let file of message.attachments">                
+                <ng-container *ngIf="(file?.type && file.type.startsWith('image/')) ||
+                                     (file?.file?.type && file.file.type.startsWith('image/'))">
+                  <div class="image-container">
+                    <img [src]="file.url" alt="attachment" class="image-preview-chat"
+                         (error)="file.loadError = true" [hidden]="file.loadError">
+                    <div *ngIf="file.loadError" class="error-message">
+                      <p>Image failed to load</p>
+                      <a *ngIf="file.url" [href]="file.url" [download]="file.name || file.file?.name || 'image'" class="download-link">Download</a>
+                    </div>
+                  </div>
                 </ng-container>
-                <ng-container *ngIf="!file.file.type.startsWith('image/')">
-                  <mat-icon>insert_drive_file</mat-icon>
-                  <a [href]="file.url" download>{{ file.file.name }}</a>
+
+                <ng-container *ngIf="(file?.type && !file.type.startsWith('image/')) ||
+                                     (file?.file?.type && !file.file.type.startsWith('image/'))">
+                  <div class="file-container">
+                    <a [href]="file.url" [download]="file.name || file.file?.name || 'file'">
+                      <span class="file-icon">📄</span>
+                      {{ file.name || file.file?.name || 'File' }}
+                    </a>
+                  </div>
+                </ng-container>
+
+                <ng-container *ngIf="(!file?.type && (!file?.file || !file?.file?.type))">
+                  <div class="file-container">
+                    <a *ngIf="file.url" [href]="file.url" [download]="file.name || 'unknown'">
+                      <span class="file-icon">📄</span>
+                      {{ file.name || 'Unknown file' }}
+                    </a>
+                    <span *ngIf="!file.url" class="error-message">File data unavailable</span>
+                  </div>
                 </ng-container>
               </div>
             </div>

src/app/components/chat/chat.component.scss

@@ -250,6 +250,83 @@
   transition: transform 0.2s ease-in-out;
 }
 
+.error-message {
+  color: #ff6b6b;
+  background-color: rgba(255, 107, 107, 0.1);
+  padding: 10px;
+  border-radius: 5px;
+  margin: 10px 0;
+  font-size: 14px;
+  border-left: 3px solid #ff6b6b;
+}
+
+.attachments {
+  margin: 8px 0;
+
+  .attachment {
+    margin-bottom: 8px;
+    border-radius: 4px;
+    overflow: hidden;
+
+    .image-container {
+      position: relative;
+      max-width: 300px;
+
+      img.image-preview-chat {
+        max-width: 100%;
+        border-radius: 4px;
+        border: 1px solid #e0e0e0;
+      }
+    }
+
+    .file-container {
+      display: flex;
+      align-items: center;
+      padding: 8px;
+      background-color: rgba(0, 0, 0, 0.05);
+      border-radius: 4px;
+      width: fit-content;
+
+      .file-icon {
+        margin-right: 8px;
+      }
+
+      a {
+        text-decoration: none;
+        color: #1a73e8;
+        display: flex;
+        align-items: center;
+
+        &:hover {
+          text-decoration: underline;
+        }
+      }
+    }
+
+    .error-message {
+      background-color: rgba(244, 67, 54, 0.1);
+      color: #d32f2f;
+      padding: 8px;
+      border-radius: 4px;
+      margin-top: 4px;
+      font-size: 13px;
+
+      p {
+        margin: 0 0 8px 0;
+      }
+
+      .download-link {
+        color: #1a73e8;
+        text-decoration: none;
+
+        &:hover {
+          text-decoration: underline;
+        }
+      }
+    }
+  }
+}
+
 button {
   margin-left: 20px;
   margin-right: 20px;