feat: add search_image and product_list content types with image upload

## 新增功能

### 1. 新增消息类型
- 添加 search_image (17) 和 product_list (18) content_type
- 支持图片搜索和商品列表消息展示

### 2. 图片上传功能
- 添加 ImageUploadButton 组件，支持图片上传到 Mall API
- 上传后发送 search_image 类型消息，图片 URL 存储在 content_attributes
- 支持图片文件验证（类型、大小）

### 3. Webhook 推送优化
- 修改 webhook_listener.rb，允许 search_image 类型即使 content 为空也推送 webhook
- 解决 search_image 消息不触发 webhook 的问题

### 4. 前端组件
- 新增 SearchImage.vue 组件（widget 和 dashboard）
- 新增 ProductList.vue、Logistics.vue、OrderDetail.vue、OrderList.vue 组件
- 更新 Message.vue 路由逻辑支持新的 content_type
- 更新 UserMessage.vue 支持 search_image 消息显示

### 5. API 层修改
- widget/messages_controller.rb: 允许 content_attributes 参数
- widget/base_controller.rb: 使用前端传入的 content_attributes
- widget/conversation API: 支持 contentAttributes 参数传递
- conversation actions 和 helpers: 完整的 content_attributes 数据流

### 6. Widget 测试页面优化
- 重写 /widget_tests 页面，支持游客/用户模式切换
- 登录流程：使用 reset() + setUser()，不刷新页面
- 退出流程：使用 reset() + 刷新页面
- 添加详细的日志输出和状态显示

## 技术细节

### Message Model
```ruby
enum content_type: {
  # ...existing types...
  search_image: 17,
  product_list: 18
}
```

### Webhook Listener
```ruby
# Allow search_image webhook even if content is blank
return if message.content.blank? && message.content_type != 'search_image'
```

### Widget Upload Flow
```
用户选择图片
  → 上传到 Mall API
  → 获取图片 URL
  → 发送消息: { content: '', content_type: 'search_image', content_attributes: { url: '...' } }
```

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>

WIDGET_TESTS_GUIDE.md

@@ -0,0 +1,200 @@
+# /widget_tests 页面使用指南
+
+## 📋 功能说明
+
+测试页面用于模拟 Chatwoot Widget 的用户登录/退出流程。
+
+## 🔄 新的行为逻辑
+
+### 1. 页面初始加载（游客模式）
+
+**无论 cookie 中是否有 token，都以游客模式启动：**
+- ✅ 不清除任何数据
+- ✅ 不设置 userIdentifier
+- ✅ 保留现有会话
+
+**原因：** 让用户通过手动点击登录按钮来测试登录流程。
+
+### 2. 点击"模拟用户登录"（不刷新页面）
+
+**执行步骤：**
+1. 设置 token cookie
+2. 调用 `window.$chatwoot.reset()` 清除之前的聊天内容
+3. 调用 `window.$chatwoot.setUser()` 设置用户信息
+4. ✅ **不刷新页面**
+
+**优点：**
+- 用户体验更好，无页面闪烁
+- 切换快速
+
+**注意：**
+- SDK 仍然以游客模式初始化（没有 userIdentifier）
+- 但通过 `setUser()` 设置了用户身份
+
+### 3. 点击"用户退出"（刷新页面）
+
+**执行步骤：**
+1. 删除 token cookie
+2. 调用 `window.$chatwoot.reset()` 清除所有数据
+3. 清除 localStorage
+4. ✅ **刷新页面（2秒倒计时）**
+
+**原因：**
+- 确保完全清除用户状态
+- 让 SDK 重新以游客模式初始化
+
+## 🎯 完整流程示例
+
+### 场景 1：游客 → 登录 → 退出
+
+```
+1. 访问页面
+   → 游客模式启动
+   → 可以发送游客消息
+
+2. 点击"模拟用户登录"
+   → reset() 清除聊天
+   → setUser() 设置用户 211845
+   → 不刷新页面
+   → 可以发送已登录用户消息
+
+3. 点击"用户退出"
+   → reset() 清除数据
+   → 刷新页面
+   → 回到游客模式
+```
+
+### 场景 2：刷新页面（有 token）
+
+```
+1. 已登录状态（token 存在）
+2. 刷新页面
+3. → 仍然以游客模式启动
+4. → 需要重新点击登录按钮
+```
+
+**重要：** 页面加载时不会自动检查 token 并设置用户，必须手动点击登录按钮。
+
+## 🔍 关键代码
+
+### 登录函数（不刷新）
+
+```javascript
+function simulateLogin() {
+  // 1. 设置 token
+  setCookie('token', TEST_TOKEN);
+
+  // 2. 清除之前的聊天
+  window.$chatwoot.reset();
+
+  // 3. 设置用户信息
+  setTimeout(() => {
+    window.$chatwoot.setUser('211845', {
+      identifier_hash: userHash,
+      email: '211845@example.com',
+      name: '测试用户 211845',
+      custom_attributes: {
+        jwt_token: token,
+        login_status: 'logged_in'
+      }
+    });
+  }, 500);
+}
+```
+
+### 退出函数（刷新页面）
+
+```javascript
+function simulateLogout() {
+  // 1. 删除 token
+  deleteCookie('token');
+
+  // 2. 清除数据
+  window.$chatwoot.reset();
+
+  // 3. 清除 localStorage
+
+  // 4. 刷新页面（2秒倒计时）
+  location.reload();
+}
+```
+
+## 🎨 界面说明
+
+### 状态卡片
+
+- **游客模式**：黄色边框
+- **已登录**：绿色边框
+
+显示内容：
+- User ID
+- Token 状态
+- 登录状态
+
+### 操作按钮
+
+- **🔐 模拟用户登录**：设置用户并清除聊天
+- **🚪 用户退出**：清除数据并刷新页面
+- **🔄 刷新页面**：手动刷新
+- **💬 打开聊天**：打开 Widget 聊天窗口
+- **🗑️ 清除所有数据**：完全重置并刷新页面
+
+### 日志输出
+
+实时显示所有操作日志，包括：
+- SDK 加载状态
+- Token 设置/删除
+- 用户信息设置
+- 会话清除操作
+
+## ⚠️ 注意事项
+
+1. **页面加载不自动登录**：即使有 token，也需要手动点击登录按钮
+2. **登录不刷新页面**：使用 `reset()` + `setUser()` 实现
+3. **退出会刷新页面**：确保完全清除状态
+4. **会话数据**：`reset()` 会清除 `cw_conversation` cookie，退出后会创建新会话
+
+## 🧪 测试建议
+
+### 测试 1：游客模式
+
+1. 访问页面
+2. 发送一条消息
+3. 验证：消息以游客身份发送
+
+### 测试 2：登录流程
+
+1. 点击"模拟用户登录"
+2. 观察日志：reset() → setUser()
+3. 发送一条消息
+4. 验证：消息以用户 211845 身份发送
+
+### 测试 3：退出流程
+
+1. 在已登录状态
+2. 点击"用户退出"
+3. 观察倒计时和刷新
+4. 验证：回到游客模式
+
+### 测试 4：会话隔离
+
+1. 游客模式发送消息
+2. 登录（reset 清除）
+3. 发送消息
+4. 退出（刷新）
+5. 验证：之前的消息已被清除
+
+## 📊 与之前实现的对比
+
+| 操作 | 之前的行为 | 现在的行为 |
+|------|----------|----------|
+| 页面加载（有 token） | 自动设置 userIdentifier | 游客模式，不做处理 |
+| 点击登录 | 刷新页面（2秒倒计时） | reset() + setUser()（不刷新） |
+| 点击退出 | reset()（不刷新） | reset() + 刷新页面（2秒倒计时） |
+
+## 🎯 设计理念
+
+**新实现的目标：**
+- 更好的用户体验（登录不刷新）
+- 更清晰的状态管理（退出刷新确保清理）
+- 手动控制登录流程（便于测试）