feat: enhance image file display with context-aware thumbnails

src/renderer/src/components/ChatInput.vue

@@ -32,6 +32,7 @@
               :mime-type="file.mimeType"
               :tokens="file.token"
               :thumbnail="file.thumbnail"
+              :context="'input'"
               @click="previewFile(file.path)"
               @delete="deleteFile(idx)"
             />
@@ -502,7 +503,8 @@ const handlePaste = async (e: ClipboardEvent) => {
               fileModified: new Date()
             },
             token: calculateImageTokens(imageInfo.width, imageInfo.height),
-            path: tempFilePath
+            path: tempFilePath,
+            thumbnail: imageInfo.compressedBase64 // 添加缩略图
           }
           if (fileInfo) {
             selectedFiles.value.push(fileInfo)

src/renderer/src/components/FileItem.vue

@@ -3,7 +3,34 @@
     <TooltipProvider>
       <Tooltip>
         <TooltipTrigger as-child>
+          <!-- 图片文件在消息中使用特殊布局 -->
           <div
+            v-if="isImageFile && thumbnail && context === 'message'"
+            class="flex flex-col gap-2 bg-card border items-center shadow-sm justify-start rounded-md text-xs cursor-pointer select-none hover:bg-accent relative p-2"
+            @click="$emit('click', fileName)"
+          >
+            <img :src="thumbnail" class="w-20 h-20 rounded-md border object-cover" />
+            <div class="text-center max-w-20">
+              <div class="text-xs leading-none pb-1 truncate text-ellipsis whitespace-nowrap">
+                {{ fileName }}
+              </div>
+              <div
+                class="text-[10px] leading-none text-muted-foreground truncate text-ellipsis whitespace-nowrap"
+              >
+                {{ mimeType }}
+              </div>
+            </div>
+            <span
+              v-if="deletable"
+              class="bg-card shadow-sm flex items-center justify-center absolute rounded-full -top-1 -right-1 p-0.5 border"
+              @click.stop.prevent="$emit('delete', fileName)"
+            >
+              <Icon icon="lucide:x" class="w-3 h-3 text-muted-foreground" />
+            </span>
+          </div>
+          <!-- 非图片文件或输入框中的图片使用原有布局 -->
+          <div
+            v-else
             class="flex py-1.5 pl-1.5 pr-3 gap-2 flex-row bg-card border items-center shadow-sm justify-start rounded-md text-xs cursor-pointer select-none hover:bg-accent relative"
             @click="$emit('click', fileName)"
           >
@@ -42,6 +69,7 @@
 </template>
 
 <script setup lang="ts">
+import { computed } from 'vue'
 import { Icon } from '@iconify/vue'
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip'
 import { getMimeTypeIcon } from '@/lib/utils'
@@ -53,9 +81,11 @@ const props = withDefaults(
     mimeType?: string
     tokens: number
     thumbnail?: string
+    context?: 'input' | 'message'
   }>(),
   {
-    mimeType: 'text/plain'
+    mimeType: 'text/plain',
+    context: 'message'
   }
 )
 
@@ -67,4 +97,8 @@ defineEmits<{
 const getFileIcon = () => {
   return getMimeTypeIcon(props.mimeType)
 }
+
+const isImageFile = computed(() => {
+  return props.mimeType?.startsWith('image/') || false
+})
 </script>