Files
assistant-storefront/TEST_SEARCH_IMAGE.md

119 lines
2.7 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 消息发送
## 方法 1: 使用 Rails Console推荐
在你的终端中执行:
```bash
cd /home/lxj/project/chatwoot-develop
# 确保已初始化 rbenv
eval "$(rbenv init -)"
# 启动 Rails console
bundle exec rails c
```
然后在 Rails console 中复制粘贴以下代码:
```ruby
# 配置参数
ACCOUNT_ID = 2
INBOX_ID = 1
USER_IDENTIFIER = '211845'
# 1. 查找联系人
contact = Contact.find_by(identifier: USER_IDENTIFIER)
if contact.nil?
puts "❌ 联系人不存在,请先通过 widget 创建会话"
else
puts "✅ 联系人: #{contact.name} (ID: #{contact.id})"
# 2. 获取会话
conversation = Conversation.where(
contact_id: contact.id,
inbox_id: INBOX_ID
).order(created_at: :desc).first
if conversation.nil?
puts "❌ 会话不存在"
else
puts "✅ 会话: #{conversation.display_id}"
# 3. 创建 search_image 消息
test_image_url = "https://img.gaia888.com/image/www/test_#{SecureRandom.uuid}.jpg"
message = Message.create!(
account_id: ACCOUNT_ID,
conversation_id: conversation.id,
inbox_id: INBOX_ID,
sender: contact,
sender_type: 'Contact',
sender_id: contact.id,
message_type: :incoming,
content_type: :search_image,
content: '',
content_attributes: {
url: test_image_url
},
status: :sent
)
puts "\n✅ 消息创建成功!"
puts " Message ID: #{message.id}"
puts " content_type: #{message.content_type}"
puts " URL: #{test_image_url}"
end
end
```
## 方法 2: 使用 Rails Runner
```bash
cd /home/lxj/project/chatwoot-develop
eval "$(rbenv init -)"
bundle exec rails runner test_search_image_console.rb
```
## 预期结果
成功后会看到:
```
✅ 联系人: 测试用户 211845 (ID: 24)
✅ 会话: 16
✅ 消息创建成功!
Message ID: 427
content_type: search_image
URL: https://img.gaia888.com/image/www/test/...
```
## 验证消息
1. **Dashboard 查看**:
- 访问: http://localhost:3000/app/accounts/2/inbox/1/conversations/16
- 应该看到新发送的图片消息
2. **Webhook 日志**:
- 查看 webhook 接收到的数据
- 应该看到 content_type: "search_image"
3. **Widget 查看**:
- 刷新 /widget_tests 页面
- 应该看到图片显示在聊天界面
## 错误排查
### 错误: 联系人不存在
**原因**: 还没有通过 widget 创建过会话
**解决**: 先访问 /widget_tests 页面并发送一条消息
### 错误: 会话不存在
**原因**: 联系人没有在此 inbox 中的会话
**解决**: 先通过 widget 发送消息创建会话
### 错误: content_type 未知
**原因**: 数据库没有 search_image 枚举值
**解决**: 运行迁移添加 search_image 到 content_type 枚举