feat: add attachment upload UI and local file upload endpoint

- Add attachment button, file picker, and preview area to ChatInput
- Render image/file attachments in user message bubbles (MessageItem)
- Add Attachment type and attachments field to Message interface
- Add POST /__upload endpoint to both Vite dev server and production server
  for saving files to temp directory and returning local file paths
- Translate README to English

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

src/components/chat/ChatInput.vue

@@ -1,18 +1,24 @@
 <script setup lang="ts">
-import { ref } from 'vue'
-import { NButton } from 'naive-ui'
+import { ref, computed } from 'vue'
+import { NButton, NTooltip } from 'naive-ui'
 import { useChatStore } from '@/stores/chat'
+import type { Attachment } from '@/stores/chat'
 
 const chatStore = useChatStore()
 const inputText = ref('')
 const textareaRef = ref<HTMLTextAreaElement>()
+const fileInputRef = ref<HTMLInputElement>()
+const attachments = ref<Attachment[]>([])
+
+const canSend = computed(() => inputText.value.trim() || attachments.value.length > 0)
 
 function handleSend() {
   const text = inputText.value.trim()
-  if (!text) return
+  if (!text && attachments.value.length === 0) return
 
-  chatStore.sendMessage(text)
+  chatStore.sendMessage(text, attachments.value.length > 0 ? attachments.value : undefined)
   inputText.value = ''
+  attachments.value = []
 
   // Reset textarea height
   if (textareaRef.value) {
@@ -32,11 +38,86 @@ function handleInput(e: Event) {
   el.style.height = 'auto'
   el.style.height = Math.min(el.scrollHeight, 100) + 'px'
 }
+
+function handleAttachClick() {
+  fileInputRef.value?.click()
+}
+
+function handleFileChange(e: Event) {
+  const input = e.target as HTMLInputElement
+  const files = input.files
+  if (!files) return
+
+  for (const file of files) {
+    const id = Date.now().toString(36) + Math.random().toString(36).slice(2, 8)
+    const url = URL.createObjectURL(file)
+    attachments.value.push({
+      id,
+      name: file.name,
+      type: file.type,
+      size: file.size,
+      url,
+      file,
+    })
+  }
+
+  // Reset input so the same file can be re-selected
+  input.value = ''
+}
+
+function removeAttachment(id: string) {
+  const idx = attachments.value.findIndex(a => a.id === id)
+  if (idx !== -1) {
+    URL.revokeObjectURL(attachments.value[idx].url)
+    attachments.value.splice(idx, 1)
+  }
+}
+
+function formatSize(bytes: number): string {
+  if (bytes < 1024) return bytes + ' B'
+  if (bytes < 1024 * 1024) return (bytes / 1024).toFixed(1) + ' KB'
+  return (bytes / (1024 * 1024)).toFixed(1) + ' MB'
+}
+
+function isImage(type: string): boolean {
+  return type.startsWith('image/')
+}
 </script>
 
 <template>
   <div class="chat-input-area">
+    <!-- Attachment previews -->
+    <div v-if="attachments.length > 0" class="attachment-previews">
+      <div
+        v-for="att in attachments"
+        :key="att.id"
+        class="attachment-preview"
+        :class="{ image: isImage(att.type) }"
+      >
+        <template v-if="isImage(att.type)">
+          <img :src="att.url" :alt="att.name" class="attachment-thumb" />
+        </template>
+        <template v-else>
+          <div class="attachment-file">
+            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/></svg>
+            <span class="file-name">{{ att.name }}</span>
+            <span class="file-size">{{ formatSize(att.size) }}</span>
+          </div>
+        </template>
+        <button class="attachment-remove" @click="removeAttachment(att.id)">
+          <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
+        </button>
+      </div>
+    </div>
+
     <div class="input-wrapper">
+      <input
+        ref="fileInputRef"
+        type="file"
+        multiple
+        class="file-input-hidden"
+        @change="handleFileChange"
+      />
       <textarea
         ref="textareaRef"
         v-model="inputText"
@@ -47,6 +128,16 @@ function handleInput(e: Event) {
         @input="handleInput"
       ></textarea>
       <div class="input-actions">
+        <!-- <NTooltip trigger="hover">
+          <template #trigger>
+            <NButton quaternary size="small" @click="handleAttachClick" circle>
+              <template #icon>
+                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M21.44 11.05l-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48"/></svg>
+              </template>
+            </NButton>
+          </template>
+          Attach files
+        </NTooltip> -->
         <NButton
           v-if="chatStore.isStreaming"
           size="small"
@@ -58,7 +149,7 @@ function handleInput(e: Event) {
         <NButton
           size="small"
           type="primary"
-          :disabled="!inputText.trim() || chatStore.isStreaming"
+          :disabled="!canSend || chatStore.isStreaming"
           @click="handleSend"
         >
           <template #icon>
@@ -80,6 +171,83 @@ function handleInput(e: Event) {
   flex-shrink: 0;
 }
 
+.attachment-previews {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  padding: 0 0 10px;
+}
+
+.attachment-preview {
+  position: relative;
+  border-radius: $radius-sm;
+  overflow: hidden;
+  background-color: $bg-secondary;
+  border: 1px solid $border-color;
+
+  &.image {
+    width: 64px;
+    height: 64px;
+  }
+}
+
+.attachment-thumb {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.attachment-file {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 2px;
+  padding: 8px 12px;
+  min-width: 80px;
+  max-width: 140px;
+  color: $text-secondary;
+
+  .file-name {
+    font-size: 11px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    max-width: 100%;
+  }
+
+  .file-size {
+    font-size: 10px;
+    color: $text-muted;
+  }
+}
+
+.attachment-remove {
+  position: absolute;
+  top: 2px;
+  right: 2px;
+  width: 18px;
+  height: 18px;
+  border-radius: 50%;
+  border: none;
+  background: rgba(0, 0, 0, 0.5);
+  color: #fff;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  opacity: 0;
+  transition: opacity $transition-fast;
+
+  .attachment-preview:hover & {
+    opacity: 1;
+  }
+}
+
+.file-input-hidden {
+  display: none;
+}
+
 .input-wrapper {
   display: flex;
   align-items: center;

src/components/chat/MessageItem.vue

@@ -11,6 +11,18 @@ const timeStr = computed(() => {
   const d = new Date(props.message.timestamp)
   return d.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })
 })
+
+function isImage(type: string): boolean {
+  return type.startsWith('image/')
+}
+
+function formatSize(bytes: number): string {
+  if (bytes < 1024) return bytes + ' B'
+  if (bytes < 1024 * 1024) return (bytes / 1024).toFixed(1) + ' KB'
+  return (bytes / (1024 * 1024)).toFixed(1) + ' MB'
+}
+
+const hasAttachments = computed(() => (props.message.attachments?.length ?? 0) > 0)
 </script>
 
 <template>
@@ -27,6 +39,25 @@ const timeStr = computed(() => {
         <img v-if="message.role === 'assistant'" src="/assets/logo.png" alt="Hermes" class="msg-avatar" />
         <div class="msg-content" :class="message.role">
           <div class="message-bubble" :class="{ system: isSystem }">
+            <div v-if="hasAttachments" class="msg-attachments">
+              <div
+                v-for="att in message.attachments"
+                :key="att.id"
+                class="msg-attachment"
+                :class="{ image: isImage(att.type) }"
+              >
+                <template v-if="isImage(att.type) && att.url">
+                  <img :src="att.url" :alt="att.name" class="msg-attachment-thumb" />
+                </template>
+                <template v-else>
+                  <div class="msg-attachment-file">
+                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/></svg>
+                    <span class="att-name">{{ att.name }}</span>
+                    <span class="att-size">{{ formatSize(att.size) }}</span>
+                  </div>
+                </template>
+              </div>
+            </div>
             <MarkdownRenderer v-if="message.content" :content="message.content" />
             <span v-if="message.isStreaming" class="streaming-cursor"></span>
             <div v-if="message.isStreaming && !message.content" class="streaming-dots">
@@ -123,6 +154,53 @@ const timeStr = computed(() => {
   word-break: break-word;
 }
 
+.msg-attachments {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  margin-bottom: 8px;
+}
+
+.msg-attachment {
+  border-radius: $radius-sm;
+  overflow: hidden;
+  background-color: rgba(0, 0, 0, 0.04);
+  border: 1px solid $border-light;
+
+  &.image {
+    max-width: 200px;
+  }
+}
+
+.msg-attachment-thumb {
+  display: block;
+  max-width: 200px;
+  max-height: 160px;
+  object-fit: contain;
+}
+
+.msg-attachment-file {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 6px 10px;
+  font-size: 12px;
+  color: $text-secondary;
+
+  .att-name {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    max-width: 160px;
+  }
+
+  .att-size {
+    color: $text-muted;
+    font-size: 11px;
+    flex-shrink: 0;
+  }
+}
+
 .message-time {
   font-size: 11px;
   color: $text-muted;