documents preview

client/src/app/chat-page.component.html

@@ -129,7 +129,7 @@
         </aside>
 
         <div class="chat-main">
-          <div class="conversation">
+          <div #conversationContainer class="conversation">
             @if (conversation().length === 0) {
               <div class="empty-chat">
                 No text messages yet. The chat page is ready as soon as the peer channel opens.
@@ -145,6 +145,17 @@
               >
                 @if (entry.direction !== 'system') {
                   <div class="bubble-actions">
+                    @if (isGeneratedImageEntry(entry)) {
+                      <button
+                        class="bubble-action"
+                        type="button"
+                        (click)="sendGeneratedImage(entry)"
+                        title="Send image to peer"
+                        aria-label="Send image to peer"
+                      >
+                        📤
+                      </button>
+                    }
                     <button
                       class="bubble-action"
                       type="button"
@@ -223,6 +234,20 @@
                       @if (entry.downloadUrl) {
                         <a class="bubble-download" [href]="entry.downloadUrl" [download]="entry.fileName">Download</a>
                       }
+
+                      @if (hasPdfPreview(entry)) {
+                        <div class="bubble-preview">
+                          <div class="bubble-preview-label">Preview</div>
+                          @defer (on viewport) {
+                            <app-office-pdf-preview
+                              [src]="pdfPreviewUrl(entry)!"
+                              [fileName]="entry.fileName ?? 'document.pdf'"
+                            ></app-office-pdf-preview>
+                          } @placeholder {
+                            <div class="bubble-preview-placeholder">Loading preview…</div>
+                          }
+                        </div>
+                      }
                     </div>
                   }
                   @case ('voice') {