fix(chat): improve attachment rendering and order handling

tonyhu-012 · tonyhu-012 · commit 13a982d4bcb1 · 2025-07-14T09:06:26.000+08:00
diff --git a/entrypoints/content/components/AttachmentSelector.vue b/entrypoints/content/components/AttachmentSelector.vue
@@ -122,17 +122,21 @@
         >
           <Tag class="inline-flex bg-[#F4F4F5] border border-[#E4E4E7]">
             <template #icon>
-              <ExternalImage
+              <div
                 v-if="attachment.type === 'tab'"
-                :src="attachment.value.faviconUrl"
-                alt=""
-                class="flex items-center justify-center w-3 h-4 rounded-full shrink-0 grow-0 bg-gray-300 ml-[2px]"
-                fallbackClass="bg-transparent"
+                class="flex items-center justify-center w-3 h-4 shrink-0 grow-0 ml-[2px]"
               >
-                <template #fallback>
-                  <IconWeb class="w-3 h-3 rounded-full text-[#6E757C]" />
-                </template>
-              </ExternalImage>
+                <ExternalImage
+                  :src="attachment.value.faviconUrl"
+                  alt=""
+                  class="w-3 h-3 rounded-full bg-gray-300"
+                  fallbackClass="bg-transparent"
+                >
+                  <template #fallback>
+                    <IconWeb class="rounded-full text-[#6E757C]" />
+                  </template>
+                </ExternalImage>
+              </div>
               <div
                 v-else-if="attachment.type === 'image'"
                 class="flex items-center justify-center w-3 h-4 shrink-0 grow-0 ml-[2px]"
@@ -283,21 +287,21 @@ const appendAttachmentsFromFiles = async (files: File[]) => {
 }
 
 const appendAttachments = (appendedAttachments: ContextAttachment[]) => {
-  const newAttachmentsMaybeOverflow = [...attachments.value, ...appendedAttachments]
+  const newAttachmentsMaybeOverflow = [...appendedAttachments.toReversed(), ...attachments.value]
   const newAttachments: ContextAttachment[] = []
   let imageCount = 0
-  for (let i = newAttachmentsMaybeOverflow.length - 1; i >= 0; i--) {
+  for (let i = 0; i < newAttachmentsMaybeOverflow.length; i++) {
     const cur = newAttachmentsMaybeOverflow[i]
     if (cur.type === 'image') {
       imageCount++
       if (imageCount > MAX_IMAGES) {
         showErrorMessage(t('chat.input.attachment_selector.too_many_images', { max: MAX_IMAGES }))
         continue // Skip this image if we have reached the maximum number of images
       }
-      newAttachments.unshift(cur)
+      newAttachments.push(cur)
     }
     else {
-      newAttachments.unshift(cur)
+      newAttachments.push(cur)
     }
   }
   attachments.value = newAttachments
