Add image attachment pills

internal/service/static/render.js

@@ -34,6 +34,7 @@ export class Renderer {
       'tpl-assistant-message',
     );
     this.$tplAttachmentChip = document.getElementById('tpl-attachment-chip');
+    this.$tplImagePill = document.getElementById('tpl-image-pill');
     this.$tplDebugRow = document.getElementById('tpl-debug-row');
     this.$tplErrorMessage = document.getElementById('tpl-error-message');
     this.$tplUserMessage = document.getElementById('tpl-user-message');
@@ -132,6 +133,8 @@ export class Renderer {
       const content = extractText(message.content);
       $msg.querySelector('.message__content').textContent = content;
 
+      this._renderImagePills($msg, message);
+
       const $dl = $msg.querySelector('.message__debug-list');
       if (message.meta?.language)
         this._appendDebugRow($dl, 'Language', message.meta.language);
@@ -512,6 +515,8 @@ export class Renderer {
     $msg.querySelector('.message__content').textContent = content;
     $msg.dataset.copyText = content;
 
+    this._renderImagePills($msg, message);
+
     const $dl = $msg.querySelector('.message__debug-list');
     if (meta?.language) this._appendDebugRow($dl, 'Language', meta.language);
     if (meta?.voice) this._appendDebugRow($dl, 'Voice', meta.voice);
@@ -670,6 +675,24 @@ export class Renderer {
     this.$chat.insertBefore($msg, this.$chatLoading);
   }
 
+  _renderImagePills($msg, message) {
+    if (!Array.isArray(message.content)) return;
+    const imageParts = message.content.filter((p) => p.type === 'image_url');
+    if (imageParts.length === 0) return;
+
+    const $wrapper = document.createElement('div');
+    $wrapper.className = 'message__image-pills';
+    for (const part of imageParts) {
+      const $pill = this.$tplImagePill.content.cloneNode(true);
+      $pill.querySelector('.message__image-pill-name').textContent =
+        part.filename || 'Image';
+      $wrapper.appendChild($pill.firstElementChild);
+    }
+    $msg
+      .querySelector('.message__body')
+      .insertBefore($wrapper, $msg.querySelector('.message__actions'));
+  }
+
   _populateDebugPanel($dl, meta) {
     if (meta?.voice) this._appendDebugRow($dl, 'Voice', meta.voice);
     if (meta?.usage) {