Files
assistant-storefront/TEST_WEBHOOK_SEARCH_IMAGE.md

105 lines
3.6 KiB
Markdown
Raw Permalink Normal View History

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>
2026-01-27 19:03:46 +08:00
# 测试 search_image 消息发送到 Webhook
## 方法 1: 使用测试脚本(推荐)
```bash
cd /home/lxj/project/chatwoot-develop
./test_search_image_webhook.sh
```
## 方法 2: 直接执行 curl 命令
复制以下命令到终端执行:
```bash
curl -X POST "http://localhost:3000/api/v1/widget/messages?website_token=9n9D3JFHBorFTZLD7cQ49TMg&cw_conversation=eyJhbGciOiJIUzI1NiJ9.eyJzb3VyY2VfaWQiOiI2Njc1ZGY3Ni1jM2MxLTQwMjktODUyNi0zN2UzMjQyMDFhMzAiLCJpbmJveF9pZCI6MSwiZXhwIjoxNzg1MDU3ODU5LCJpYXQiOjE3Njk1MDU4NTl9.SW4n7hnVjleWaVjKesdA60IZ5YAkAFn-3cUzH2f9F_M&locale=zh_CN" \
-H "Content-Type: application/json" \
-H "X-Auth-Token: eyJhbGciOiJIUzI1NiJ9.eyJzb3VyY2VfaWQiOiI2Njc1ZGY3Ni1jM2MxLTQwMjktODUyNi0zN2UzMjQyMDFhMzAiLCJpbmJveF9pZCI6MSwiZXhwIjoxNzg1MDU3ODU5LCJpYXQiOjE3Njk1MDU4NTl9.SW4n7hnVjleWaVjKesdA60IZ5YAkAFn-3cUzH2f9F_M" \
-d '{
"message": {
"content": "",
"content_type": "search_image",
"content_attributes": {
"url": "https://img.gaia888.com/image/www/test.jpg"
},
"timestamp": "Tue Jan 27 2026 17:41:08 GMT+0800 (中国标准时间)",
"referer_url": "http://localhost:3000/widget_tests"
}
}'
```
## 方法 3: 使用你提供的完整 curl 命令
```bash
curl "http://localhost:3000/api/v1/widget/messages?website_token=9n9D3JFHBorFTZLD7cQ49TMg&cw_conversation=eyJhbGciOiJIUzI1NiJ9.eyJzb3VyY2VfaWQiOiI2Njc1ZGY3Ni1jM2MxLTQwMjktODUyNi0zN2UzMjQyMDFhMzAiLCJpbmJveF9pZCI6MSwiZXhwIjoxNzg1MDU3ODU5LCJpYXQiOjE3Njk1MDU4NTl9.SW4n7hnVjleWaVjKesdA60IZ5YAkAFn-3cUzH2f9F_M&locale=zh_CN" \
-H "Accept: application/json, text/plain, */*" \
-H "Content-Type: application/json" \
-H "X-Auth-Token: eyJhbGciOiJIUzI1NiJ9.eyJzb3VyY2VfaWQiOiI2Njc1ZGY3Ni1jM2MxLTQwMjktODUyNi0zN2UzMjQyMDFhMzAiLCJpbmJveF9pZCI6MSwiZXhwIjoxNzg1MDU3ODU5LCJpYXQiOjE3Njk1MDU4NTl9.SW4n7hnVjleWaVjKesdA60IZ5YAkAFn-3cUzH2f9F_M" \
--data-raw '{"message":{"content":"","reply_to":null,"timestamp":"Tue Jan 27 2026 17:41:08 GMT+0800 (中国标准时间)","referer_url":"http://localhost:3000/widget_tests","content_type":"search_image","content_attributes":{"url":"https://img.gaia888.com/image/www/auto_202601/test.jpg"}}}'
```
## 预期响应
成功时会返回类似:
```json
{
"id": 428,
"content": "",
"content_type": "search_image",
"inbox_id": 1,
"conversation_id": 16,
"message_type": 0,
"created_at": 1769504268,
"private": false,
"content_attributes": {
"url": "https://img.gaia888.com/image/www/test.jpg"
},
"sender": {
"id": 24,
"name": "测试用户 211845",
"email": "211845@example.com",
"thumbnail": "",
"type": "contact"
}
}
```
## 验证步骤
1. **检查 Dashboard**:
- 访问: http://localhost:3000/app/accounts/2/inbox/1
- 查看会话列表中是否有新消息
2. **检查 Webhook 日志**:
- 查看你的 webhook 接收服务日志
- 应该看到 `content_type: "search_image"`
3. **检查 Widget**:
- 刷新 /widget_tests 页面
- 应该看到图片显示在聊天界面
## 错误排查
### 401 Unauthorized
**原因**: cw_conversation token 过期或无效
**解决**: 从 /widget_tests 页面重新获取 cookie 中的 cw_conversation 值
### 404 Not Found
**原因**: website_token 不正确
**解决**: 确认 website_token 与配置一致
### 422 Unprocessable Entity
**原因**: 请求参数格式错误
**解决**: 检查 JSON 格式和必需字段
## 参数说明
| 参数 | 值 | 说明 |
|------|-----|------|
| `content_type` | `"search_image"` | 消息类型 |
| `content` | `""` | 空字符串 |
| `content_attributes.url` | 图片 URL | 图片地址 |
| `cw_conversation` | JWT token | 会话标识 |
| `website_token` | Widget token | 网站标识 |