feat: implement multi-modal input and enhance chat functionality

- Completed the implementation of image attachment support in the chat input, allowing users to paste, drag, or select images.
- Enhanced the `MessageInput` component to handle image validation, including size and type checks.
- Updated the `ChatView` and `MessageItem` components to display attached images and manage thinking streaming states.
- Added new tests for image handling and validation logic to ensure robustness.
- Updated localization files to include new strings related to image attachments and thinking states.

Author: knqiufan

docs/planning/PHASE_2_DETAILED_PLAN.md

@@ -2035,45 +2035,45 @@ interface ImageAttachment {
 
 ### 2.12 Token 用量统计 [预估 2h]
 
-- [ ] **2.12.1** 定义 `TokenUsage` 结构体（Rust + TypeScript 两端）
-- [ ] **2.12.2** 在 `stream_complete` 事件中传递 usage 数据
-- [ ] **2.12.3** 在 `save_message` 时写入 token_usage 字段（JSON）
-- [ ] **2.12.4** 在 assistant 消息完成后更新 session 的 total_input_tokens / total_output_tokens
-- [ ] **2.12.5** 在 MessageItem 底部显示 TokenBadge 组件
-- [ ] **2.12.6** 验证 Token 统计数据正确
+- [x] **2.12.1** 定义 `TokenUsage` 结构体（Rust + TypeScript 两端）
+- [x] **2.12.2** 在 `stream_complete` 事件中传递 usage 数据
+- [x] **2.12.3** 在 `save_message` 时写入 token_usage 字段（JSON）
+- [x] **2.12.4** 在 assistant 消息完成后更新 session 的 total_input_tokens / total_output_tokens
+- [x] **2.12.5** 在 MessageItem 底部显示 TokenBadge 组件
+- [x] **2.12.6** 验证 Token 统计数据正确
 
 ### 2.13 思维链展示 [预估 3h]
 
-- [ ] **2.13.1** 安装 shadcn/ui 组件：`npx shadcn@latest add collapsible`
-- [ ] **2.13.2** 创建 `src/components/chat/ThinkingBlock.tsx`（折叠/展开组件）
-- [ ] **2.13.3** 在 `MessageItem` 中集成 ThinkingBlock（当 thinking_content 非空时显示）
-- [ ] **2.13.4** 实现流式 thinking 内容的实时更新（通过 stream_thinking 事件）
-- [ ] **2.13.5** 验证 Anthropic Claude thinking blocks 完整流程
+- [x] **2.13.1** 安装 shadcn/ui 组件：`npx shadcn@latest add collapsible`
+- [x] **2.13.2** 创建 `src/components/chat/ThinkingBlock.tsx`（折叠/展开组件）
+- [x] **2.13.3** 在 `MessageItem` 中集成 ThinkingBlock（当 thinking_content 非空时显示）
+- [x] **2.13.4** 实现流式 thinking 内容的实时更新（通过 stream_thinking 事件）
+- [x] **2.13.5** 验证 Anthropic Claude thinking blocks 完整流程
 
 ### 2.14 停止生成 / 重新生成 [预估 2h]
 
-- [ ] **2.14.1** 在 MessageInput 中实现 发送→停止 按钮切换
-- [ ] **2.14.2** 实现前端 `stopGeneration()` 调用 → Rust `stop_generation` command
-- [ ] **2.14.3** 在 MessageItem 操作栏中添加"重新生成"按钮
-- [ ] **2.14.4** 实现前端 `regenerateMessage()` 调用 → Rust `regenerate_message` command
-- [ ] **2.14.5** 验证停止生成后已有内容保留 + 重新生成后旧内容替换
+- [x] **2.14.1** 在 MessageInput 中实现 发送→停止 按钮切换
+- [x] **2.14.2** 实现前端 `stopGeneration()` 调用 → Rust `stop_generation` command
+- [x] **2.14.3** 在 MessageItem 操作栏中添加"重新生成"按钮
+- [x] **2.14.4** 实现前端 `regenerateMessage()` 调用 → Rust `regenerate_message` command
+- [x] **2.14.5** 验证停止生成后已有内容保留 + 重新生成后旧内容替换
 
 ### 2.15 多模态输入 [预估 4h]
 
-- [ ] **2.15.1** 在 MessageInput 中实现剪贴板粘贴图片（paste 事件 → Base64）
-- [ ] **2.15.2** 在 MessageInput 中实现拖拽图片（drag/drop 事件 → Base64）
-- [ ] **2.15.3** 在 MessageInput 中添加 📎 按钮（文件选择对话框）
-- [ ] **2.15.4** 创建 `src/components/chat/ImagePreview.tsx`（缩略图预览 + 删除按钮）
-- [ ] **2.15.5** 在 send_message 时传递 images 参数
-- [ ] **2.15.6** 实现文件大小检查（<=10MB）和类型校验
-- [ ] **2.15.7** 验证粘贴/拖拽/选择三种方式均可正常工作
-- [ ] **2.15.8** 验证视觉模型正确理解图片内容
+- [x] **2.15.1** 在 MessageInput 中实现剪贴板粘贴图片（paste 事件 → Base64）
+- [x] **2.15.2** 在 MessageInput 中实现拖拽图片（drag/drop 事件 → Base64）
+- [x] **2.15.3** 在 MessageInput 中添加 📎 按钮（文件选择对话框）
+- [x] **2.15.4** 创建 `src/components/chat/ImagePreview.tsx`（缩略图预览 + 删除按钮）
+- [x] **2.15.5** 在 send_message 时传递 images 参数
+- [x] **2.15.6** 实现文件大小检查（<=10MB）和类型校验
+- [x] **2.15.7** 验证粘贴/拖拽/选择三种方式均可正常工作
+- [x] **2.15.8** 验证视觉模型正确理解图片内容
 
 ### i18n 补充 [预估 1h]
 
-- [ ] **i18n-1** 在 `en/chat.json` 中添加对话相关翻译键
-- [ ] **i18n-2** 在 `zh-CN/chat.json` 中添加对话相关翻译键
-- [ ] **i18n-3** 所有新增 UI 文字使用 `useTranslation()` 的 `t()` 函数
+- [x] **i18n-1** 在 `en/chat.json` 中添加对话相关翻译键
+- [x] **i18n-2** 在 `zh-CN/chat.json` 中添加对话相关翻译键
+- [x] **i18n-3** 所有新增 UI 文字使用 `useTranslation()` 的 `t()` 函数
 
 ### 收尾验证 [预估 2h]
 

src/__tests__/chat-store.test.ts

@@ -27,6 +27,7 @@ describe("useChatStore", () => {
       messages: [],
       isStreaming: false,
       streamingMessageId: null,
+      isThinkingStreaming: false,
       selectedModel: null,
     });
   });
@@ -215,4 +216,76 @@ describe("useChatStore", () => {
       expect(useChatStore.getState().selectedModel).toBeNull();
     });
   });
+
+  describe("thinking streaming state", () => {
+    it("should set thinking streaming", () => {
+      useChatStore.getState().setThinkingStreaming(true);
+      expect(useChatStore.getState().isThinkingStreaming).toBe(true);
+    });
+
+    it("should reset thinking streaming when stream completes", () => {
+      useChatStore.getState().setThinkingStreaming(true);
+      useChatStore.getState().setStreaming(false);
+      expect(useChatStore.getState().isThinkingStreaming).toBe(false);
+    });
+
+    it("should reset thinking streaming on clearMessages", () => {
+      useChatStore.getState().setThinkingStreaming(true);
+      useChatStore.getState().clearMessages();
+      expect(useChatStore.getState().isThinkingStreaming).toBe(false);
+    });
+
+    it("should reset thinking streaming on setActiveSessionData", () => {
+      useChatStore.getState().setThinkingStreaming(true);
+      useChatStore.getState().setActiveSessionData({
+        id: "s",
+        title: null,
+        model: null,
+        system_prompt: null,
+        working_directory: null,
+        project_name: null,
+        status: "active",
+        mode: "agent",
+        total_input_tokens: 0,
+        total_output_tokens: 0,
+        last_message_at: null,
+        pinned: false,
+        group_name: null,
+        created_at: "",
+        updated_at: "",
+      });
+      expect(useChatStore.getState().isThinkingStreaming).toBe(false);
+    });
+  });
+
+  describe("removeMessagesFrom", () => {
+    it("should remove target message and all after it", () => {
+      useChatStore.getState().setMessages([
+        makeMessage({ id: "m1" }),
+        makeMessage({ id: "m2" }),
+        makeMessage({ id: "m3" }),
+      ]);
+      useChatStore.getState().removeMessagesFrom("m2");
+      const msgs = useChatStore.getState().messages;
+      expect(msgs).toHaveLength(1);
+      expect(msgs[0].id).toBe("m1");
+    });
+
+    it("should remove all messages when first is targeted", () => {
+      useChatStore.getState().setMessages([
+        makeMessage({ id: "m1" }),
+        makeMessage({ id: "m2" }),
+      ]);
+      useChatStore.getState().removeMessagesFrom("m1");
+      expect(useChatStore.getState().messages).toHaveLength(0);
+    });
+
+    it("should do nothing if id not found", () => {
+      useChatStore.getState().setMessages([
+        makeMessage({ id: "m1" }),
+      ]);
+      useChatStore.getState().removeMessagesFrom("not-found");
+      expect(useChatStore.getState().messages).toHaveLength(1);
+    });
+  });
 });

src/__tests__/chat-view.test.ts

@@ -31,6 +31,7 @@ describe("ChatView store integration", () => {
       messages: [],
       isStreaming: false,
       streamingMessageId: null,
+      isThinkingStreaming: false,
       selectedModel: null,
     });
   });

src/__tests__/message-input.test.ts

@@ -115,29 +115,176 @@ describe("ModelSelector groupByProvider logic", () => {
   });
 });
 
-describe("Send validation logic", () => {
-  function canSend(content: string, disabled: boolean, isStreaming: boolean): boolean {
-    return content.trim().length > 0 && !disabled && !isStreaming;
+describe("Send validation logic (with images)", () => {
+  function canSend(
+    content: string,
+    hasImages: boolean,
+    disabled: boolean,
+    isStreaming: boolean
+  ): boolean {
+    return (content.trim().length > 0 || hasImages) && !disabled && !isStreaming;
   }
 
   it("should allow send when content is present and not streaming", () => {
-    expect(canSend("hello", false, false)).toBe(true);
+    expect(canSend("hello", false, false, false)).toBe(true);
   });
 
-  it("should disallow send with empty content", () => {
-    expect(canSend("", false, false)).toBe(false);
-    expect(canSend("   ", false, false)).toBe(false);
+  it("should disallow send with empty content and no images", () => {
+    expect(canSend("", false, false, false)).toBe(false);
+    expect(canSend("   ", false, false, false)).toBe(false);
+  });
+
+  it("should allow send with images even if text is empty", () => {
+    expect(canSend("", true, false, false)).toBe(true);
+    expect(canSend("  ", true, false, false)).toBe(true);
   });
 
   it("should disallow send when disabled", () => {
-    expect(canSend("hello", true, false)).toBe(false);
+    expect(canSend("hello", false, true, false)).toBe(false);
   });
 
   it("should disallow send when streaming", () => {
-    expect(canSend("hello", false, true)).toBe(false);
+    expect(canSend("hello", false, false, true)).toBe(false);
+  });
+
+  it("should disallow send with images when streaming", () => {
+    expect(canSend("", true, false, true)).toBe(false);
+  });
+});
+
+describe("Image validation logic", () => {
+  const MAX_IMAGE_SIZE = 10 * 1024 * 1024;
+  const ALLOWED_IMAGE_TYPES = [
+    "image/png",
+    "image/jpeg",
+    "image/gif",
+    "image/webp",
+  ];
+
+  function validateImage(type: string, size: number): { valid: boolean; reason?: string } {
+    if (!ALLOWED_IMAGE_TYPES.includes(type)) {
+      return { valid: false, reason: "unsupported_type" };
+    }
+    if (size > MAX_IMAGE_SIZE) {
+      return { valid: false, reason: "too_large" };
+    }
+    return { valid: true };
+  }
+
+  it("should accept valid PNG", () => {
+    expect(validateImage("image/png", 1024).valid).toBe(true);
+  });
+
+  it("should accept valid JPEG", () => {
+    expect(validateImage("image/jpeg", 5 * 1024 * 1024).valid).toBe(true);
+  });
+
+  it("should accept valid WebP", () => {
+    expect(validateImage("image/webp", 100).valid).toBe(true);
+  });
+
+  it("should accept valid GIF", () => {
+    expect(validateImage("image/gif", 2 * 1024 * 1024).valid).toBe(true);
+  });
+
+  it("should reject unsupported type", () => {
+    const result = validateImage("image/svg+xml", 1024);
+    expect(result.valid).toBe(false);
+    expect(result.reason).toBe("unsupported_type");
+  });
+
+  it("should reject text file", () => {
+    expect(validateImage("text/plain", 100).valid).toBe(false);
+  });
+
+  it("should reject image that is too large", () => {
+    const result = validateImage("image/png", 11 * 1024 * 1024);
+    expect(result.valid).toBe(false);
+    expect(result.reason).toBe("too_large");
+  });
+
+  it("should accept image at exactly 10MB boundary", () => {
+    expect(validateImage("image/png", MAX_IMAGE_SIZE).valid).toBe(true);
+  });
+
+  it("should reject image at 10MB + 1 byte", () => {
+    expect(validateImage("image/png", MAX_IMAGE_SIZE + 1).valid).toBe(false);
+  });
+});
+
+describe("Attachment parsing logic", () => {
+  interface AttachmentImage {
+    data: string;
+    mime_type: string;
+  }
+
+  function parseAttachments(raw: string | null): AttachmentImage[] {
+    if (!raw) return [];
+    try {
+      const parsed = JSON.parse(raw) as AttachmentImage[];
+      return Array.isArray(parsed) ? parsed : [];
+    } catch {
+      return [];
+    }
+  }
+
+  it("should return empty array for null", () => {
+    expect(parseAttachments(null)).toEqual([]);
+  });
+
+  it("should return empty array for invalid JSON", () => {
+    expect(parseAttachments("not-json")).toEqual([]);
+  });
+
+  it("should parse valid attachment array", () => {
+    const json = JSON.stringify([
+      { data: "abc123", mime_type: "image/png" },
+      { data: "def456", mime_type: "image/jpeg" },
+    ]);
+    const result = parseAttachments(json);
+    expect(result).toHaveLength(2);
+    expect(result[0].mime_type).toBe("image/png");
+  });
+
+  it("should return empty array for non-array JSON", () => {
+    expect(parseAttachments(JSON.stringify({ key: "value" }))).toEqual([]);
+  });
+});
+
+describe("TokenUsage parsing logic", () => {
+  interface TokenUsage {
+    input_tokens: number;
+    output_tokens: number;
+    total_tokens: number;
+  }
+
+  function parseTokenUsage(raw: string | null): TokenUsage | null {
+    if (!raw) return null;
+    try {
+      return JSON.parse(raw) as TokenUsage;
+    } catch {
+      return null;
+    }
+  }
+
+  it("should return null for null input", () => {
+    expect(parseTokenUsage(null)).toBeNull();
+  });
+
+  it("should return null for invalid JSON", () => {
+    expect(parseTokenUsage("bad")).toBeNull();
   });
 
-  it("should allow content with only whitespace trimmed to empty", () => {
-    expect(canSend("\n\n  \t", false, false)).toBe(false);
+  it("should parse valid usage JSON", () => {
+    const json = JSON.stringify({
+      input_tokens: 100,
+      output_tokens: 200,
+      total_tokens: 300,
+    });
+    const result = parseTokenUsage(json);
+    expect(result).not.toBeNull();
+    expect(result!.input_tokens).toBe(100);
+    expect(result!.output_tokens).toBe(200);
+    expect(result!.total_tokens).toBe(300);
   });
 });