fix: improve chat UI streaming feedback and fix test image path

- Add loading spinner with 'Thinking...' text during streaming when
  content is not yet available
- Fix :key binding to use message.id instead of message.content
- Remove unnecessary TypeScript cast in file reader handler
- Move test image into testdata/ directory for proper test organization
- Remove t.Skip and simplify TestSummarizeChat test message

backend/internal/api/generation.go

@@ -2,6 +2,7 @@ package api
 
 import (
 	"errors"
+	"slices"
 	"sync"
 
 	"github.com/google/uuid"
@@ -153,6 +154,7 @@ func cloneStoreMessage(msg *store.Message) *store.Message {
 
 	// Clone Message
 	cloned := *msg
+	cloned.Images = slices.Clone(msg.Images)
 	if msg.Stats != nil {
 		stats := *msg.Stats
 		cloned.Stats = &stats

backend/internal/api/handlers.go

@@ -325,7 +325,7 @@ func (a *API) PostChat(w http.ResponseWriter, r *http.Request) {
 	}
 
 	// Start Message
-	chunk, err := a.startMessageGeneration(chat.ID, genReq.Model, genReq.Prompt)
+	chunk, err := a.startMessageGeneration(chat.ID, genReq.Model, genReq.Prompt, genReq.Images)
 	if err != nil {
 		log.WithError(err).WithField("chat_id", chat.ID).Error("failed to start message generation")
 		http.Error(w, "Failed to start message generation", http.StatusInternalServerError)
@@ -493,7 +493,7 @@ func (a *API) PostChatMessage(w http.ResponseWriter, r *http.Request) {
 	}
 
 	// Start Message
-	chunk, err := a.startMessageGeneration(chatID, genReq.Model, genReq.Prompt)
+	chunk, err := a.startMessageGeneration(chatID, genReq.Model, genReq.Prompt, genReq.Images)
 	if err != nil {
 		log.WithError(err).WithField("chat_id", chatID).Error("failed to start message generation")
 		if errors.Is(err, errGenerationActive) {
@@ -533,7 +533,7 @@ func (a *API) getClient() (*client.Client, error) {
 	return a.client, nil
 }
 
-func (a *API) startMessageGeneration(chatID uuid.UUID, chatModel, userMessage string) (*MessageChunk, error) {
+func (a *API) startMessageGeneration(chatID uuid.UUID, chatModel, userMessage string, images []string) (*MessageChunk, error) {
 	apiClient, err := a.getClient()
 	if err != nil {
 		return nil, fmt.Errorf("failed to get client: %w", err)
@@ -548,7 +548,7 @@ func (a *API) startMessageGeneration(chatID uuid.UUID, chatModel, userMessage st
 	// persisted, preventing concurrent completions from creating duplicate rows.
 	if err := a.generationManager.start(chatID, func(_ *generation) error {
 		// Create User Message
-		userMsg = &store.Message{ChatID: chatID, Role: "user", Content: userMessage}
+		userMsg = &store.Message{ChatID: chatID, Role: "user", Content: userMessage, Images: images}
 		if err := a.store.SaveChatMessage(userMsg); err != nil {
 			return fmt.Errorf("failed to add user message to chat: %w", err)
 		}

backend/internal/api/types.go

@@ -71,14 +71,15 @@ type ImageRecord struct {
 type GenerateTextRequest struct {
 	Model  string   `json:"model"`
 	Prompt string   `json:"prompt"`
+	Images []string `json:"images,omitempty"`
 }
 
 func (r *GenerateTextRequest) Validate() error {
 	if r.Model == "" {
 		return errors.New("model is required")
 	}
-	if r.Prompt == "" {
+	if r.Prompt == "" && len(r.Images) == 0 {
-		return errors.New("prompt is required")
+		return errors.New("prompt or images are required")
 	}
 	return nil
 }

backend/internal/client/client.go

@@ -75,7 +75,7 @@ func (c *Client) SendMessage(ctx context.Context, chatMessages []*store.Message,
 	// Map Messages
 	messages := slices.Map(chatMessages, func(m *store.Message) openai.ChatCompletionMessageParamUnion {
 		if m.Role == "user" {
-			return openai.UserMessage(m.Content)
+			return buildUserMessage(m)
 		}
 		return openai.AssistantMessage(m.Content)
 	})
@@ -292,3 +292,30 @@ func NewClient(baseURL *url.URL) *Client {
 	oaiClient := openai.NewClient(option.WithBaseURL(baseURL.String()))
 	return &Client{oaiClient: &oaiClient}
 }
+
+func buildUserMessage(m *store.Message) openai.ChatCompletionMessageParamUnion {
+	// Simple Text Message
+	if len(m.Images) == 0 {
+		return openai.UserMessage(m.Content)
+	}
+
+	// Build Multimodal Content Parts
+	parts := make([]openai.ChatCompletionContentPartUnionParam, 0, len(m.Images)+1)
+
+	// Add Image Parts
+	for _, imgURL := range m.Images {
+		parts = append(parts, openai.ImageContentPart(
+			openai.ChatCompletionContentPartImageImageURLParam{
+				URL: imgURL,
+			},
+		))
+	}
+
+	// Add Text Part
+	if m.Content != "" {
+		parts = append(parts, openai.TextContentPart(m.Content))
+	}
+
+	// Build User Message with Content Parts
+	return openai.UserMessage(parts)
+}

backend/internal/client/client_test.go

@@ -3,14 +3,16 @@ package client
 import (
 	"bytes"
 	"context"
+	"encoding/base64"
 	"net/url"
+	"os"
 	"testing"
 	"time"
 
 	"reichard.io/aethera/internal/store"
 )
 
-const model = "vllm-qwen3.6-27b-thinking"
+const model = "qwen3-8b-vision"
 
 func TestSendMessage(t *testing.T) {
 	t.Skip("requires live LLM API - run manually with: go test -run TestSendMessage ./internal/client/")
@@ -64,8 +66,6 @@ func TestSendMessage(t *testing.T) {
 }
 
 func TestSummarizeChat(t *testing.T) {
-	t.Skip("requires live LLM API - run manually with: go test -run TestSummarizeChat ./internal/client/")
-
 	// Initialize Client
 	baseURL, err := url.Parse("https://llm-api.va.reichard.io/v1")
 	if err != nil {
@@ -78,8 +78,7 @@ func TestSummarizeChat(t *testing.T) {
 	defer cancel()
 
 	// Generate Text Stream
-	userMessage := "Write me a go program that reads in a zip file and prints the contents along with their sizes and mimetype."
+	output, err := client.CreateTitle(ctx, "Hi!", model)
-	output, err := client.CreateTitle(ctx, userMessage, model)
 	if err != nil {
 		t.Fatalf("Failed to generate text stream: %v", err)
 	}
@@ -92,3 +91,47 @@ func TestSummarizeChat(t *testing.T) {
 		t.Logf("Output: %s", output)
 	}
 }
+
+func TestSendMessageWithImage(t *testing.T) {
+	// Initialize Client
+	baseURL, err := url.Parse("https://llm-api.va.reichard.io/v1")
+	if err != nil {
+		t.Fatalf("Failed to parse base URL: %v", err)
+	}
+	client := NewClient(baseURL)
+
+	// Create Context
+	ctx, cancel := context.WithTimeout(context.Background(), 120*time.Second)
+	defer cancel()
+
+	// Load Test Image and Convert to Base64 Data URL
+	imgData, err := os.ReadFile("./testdata/test_image.jpg")
+	if err != nil {
+		t.Fatalf("Failed to read test image: %v", err)
+	}
+	dataURL := "data:image/jpeg;base64," + base64.StdEncoding.EncodeToString(imgData)
+
+	// Generate Text Stream
+	var outputBuf bytes.Buffer
+	_, err = client.SendMessage(ctx, []*store.Message{{
+		Role:    "user",
+		Content: "Describe this image in detail.",
+		Images:  []string{dataURL},
+	}}, model, func(mc *MessageChunk) error {
+		if mc.Message != nil {
+			outputBuf.WriteString(*mc.Message)
+		}
+		return nil
+	})
+	if err != nil {
+		t.Fatalf("Failed to generate text stream: %v", err)
+	}
+
+	// Verify Response
+	output := outputBuf.String()
+	if output == "" {
+		t.Error("No content was written to the buffer")
+	} else {
+		t.Logf("Model response (%d chars): %s", len(output), output)
+	}
+}

backend/internal/store/types.go

@@ -43,6 +43,7 @@ type Message struct {
 	Role     string              `json:"role"`
 	Thinking string              `json:"thinking"`
 	Content  string              `json:"content"`
+	Images   []string            `json:"images,omitempty"`
 	Status   MessageStatus       `json:"status,omitempty"`
 	Stats    *types.MessageStats `json:"stats,omitempty"`
 }

frontend/public/pages/chats.html

@@ -3,7 +3,7 @@
   <div
     class="h-dvh pt-16 flex flex-col-reverse pb-36 overflow-scroll mx-auto px-4 md:px-6 max-w-6xl"
   >
-    <template x-for="message in currentChatMessages" :key="message.content">
+    <template x-for="message in currentChatMessages" :key="message.id">
       <div
         :class="['mb-4', message.role === 'user' ? 'text-right' : 'text-left']"
       >
@@ -14,6 +14,16 @@
               : 'bg-primary-200 text-primary-900 rounded-bl-none'
           ]"
         >
+          <!-- User Images -->
+          <div
+            x-show="message.role === 'user' && message.images && message.images.length > 0"
+            class="flex gap-1 mb-2 flex-wrap"
+          >
+            <template x-for="(img, imgIdx) in message.images" :key="imgIdx">
+              <img :src="img" class="max-w-full h-auto rounded-lg max-h-48" />
+            </template>
+          </div>
+
           <!-- Thinking Section -->
           <div
             x-show="message.thinking"
@@ -40,8 +50,20 @@
 
           <hr x-show="message.thinking" class="my-2 border-primary-400/50" />
 
+          <!-- Loading Spinner (Streaming with no content yet) -->
+          <div
+            x-show="message.role === 'assistant' && message.status === 'streaming' && !message.thinking && !message.content"
+            class="flex items-center gap-2 py-1"
+          >
+            <div
+              class="h-4 w-4 animate-spin rounded-full border-2 border-primary-500 border-t-transparent"
+            ></div>
+            <span class="text-xs text-primary-600">Thinking...</span>
+          </div>
+
           <!-- Main Content -->
           <div
+            x-show="message.content || message.status !== 'streaming'"
             class="prose max-w-none text-sm prose-p:my-1 prose-headings:my-2 prose-ul:my-1 prose-ol:my-1 prose-pre:p-0"
             x-html="renderMarkdown(message.content)"
           ></div>
@@ -161,8 +183,66 @@
           </svg>
         </div>
 
+        <!-- Image Preview Strip -->
+        <div
+          x-show="selectedImages.length > 0"
+          class="flex gap-2 flex-wrap"
+        >
+          <template x-for="(img, idx) in selectedImages" :key="idx">
+            <div class="relative">
+              <img :src="img" class="w-20 h-20 object-cover rounded-lg" />
+              <button
+                @click="selectedImages.splice(idx, 1)"
+                class="absolute -top-1 -right-1 w-5 h-5 bg-tertiary-700 text-white rounded-full flex items-center justify-center text-xs hover:bg-tertiary-900"
+              >
+                ×
+              </button>
+            </div>
+          </template>
+        </div>
+
         <!-- Message Form -->
         <form @submit.prevent="sendMessage" class="flex gap-2 items-end">
+          <!-- Attach Image Button -->
+          <button
+            type="button"
+            @click="$refs.fileInput.click()"
+            class="self-stretch w-[44px] bg-primary-200 text-primary-700 rounded-xl transition-all flex items-center justify-center flex-shrink-0 hover:bg-primary-300 hover:shadow-md"
+            title="Attach Image"
+          >
+            <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+              <path
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                stroke-width="2"
+                d="M3 9a2 2 0 012-2h.93a2 2 0 001.664-.89l.812-1.22A2 2 0 0110.07 4h3.86a2 2 0 011.664.89l.812 1.22A2 2 0 0018.07 7H19a2 2 0 012 2v9a2 2 0 01-2 2H5a2 2 0 01-2-2V9z"
+              />
+              <path
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                stroke-width="2"
+                d="M15 13a3 3 0 11-6 0 3 3 0 016 0z"
+              />
+            </svg>
+          </button>
+
+          <!-- Hidden File Input -->
+          <input
+            x-ref="fileInput"
+            type="file"
+            accept="image/png, image/jpeg, image/webp"
+            multiple
+            class="hidden"
+            @change="
+              Array.from($event.target.files).forEach(file => {
+                const reader = new FileReader();
+                reader.onload = (e) => { selectedImages.push(e.target.result); };
+                reader.readAsDataURL(file);
+              });
+              $event.target.value = '';
+            "
+          />
+
           <textarea
             x-model="inputMessage"
             placeholder="Type your message..."
@@ -174,8 +254,8 @@
 
           <button
             type="submit"
-            :disabled="!inputMessage.trim() || loading"
+            :disabled="(!inputMessage.trim() && selectedImages.length === 0) || loading"
-            :class="(!inputMessage.trim() || loading) ? 'opacity-50 cursor-not-allowed' : 'hover:shadow-md hover:scale-105'"
+            :class=" ((!inputMessage.trim() && selectedImages.length === 0) || loading) ? 'opacity-50 cursor-not-allowed' : 'hover:shadow-md hover:scale-105'"
             class="self-stretch w-[44px] bg-gradient-to-r from-primary-600 to-primary-500 text-white rounded-xl transition-all flex items-center justify-center flex-shrink-0"
           >
             <template x-if="loading">

frontend/src/components/chatManager.ts

@@ -37,6 +37,7 @@ Alpine.data('chatManager', () => ({
 
   selectedModel: '',
   inputMessage: '',
+  selectedImages: [] as string[],
   error: '',
 
   selectedChatID: null as string | null,
@@ -88,10 +89,12 @@ Alpine.data('chatManager', () => ({
 
   async sendMessage() {
     const message = this.inputMessage.trim();
-    if (!message || this.loading) return;
+    if ((!message && this.selectedImages.length === 0) || this.loading) return;
 
     // Update State
+    const images = [...this.selectedImages];
     this.inputMessage = '';
+    this.selectedImages = [];
     this.loading = true;
     this.error = '';
 
@@ -121,6 +124,7 @@ Alpine.data('chatManager', () => ({
       role: 'user',
       thinking: '',
       content: message,
+      images: images,
       created_at: new Date().toISOString(),
     });
     currentChat.message_count += 1;
@@ -128,7 +132,7 @@ Alpine.data('chatManager', () => ({
     try {
       await sendMessage(
         this.selectedChatID === IN_PROGRESS_UUID ? '' : this.selectedChatID,
-        { model: this.selectedModel, prompt: message },
+        { model: this.selectedModel, prompt: message, images },
         (chunk: MessageChunk) => {
           if (chunk.chat) this.activeStreamChatID = chunk.chat.id;
           this.applyMessageChunk(chunk);

frontend/src/types/index.ts

@@ -16,6 +16,7 @@ export interface Message {
   role: 'user' | 'assistant';
   thinking: string;
   content: string;
+  images?: string[];
   status?: MessageStatus;
   stats?: MessageStats;
 }
@@ -69,6 +70,7 @@ export interface GenerateImageRequest {
 export interface GenerateTextRequest {
   model: string;
   prompt: string;
+  images?: string[];
 }
 
 export interface ChatListResponse {