app/javascript/widget/components/MessageReplyButton.vue

<script>
import FluentIcon from 'shared/components/FluentIcon/Index.vue';

export default {
  name: 'MessageReplyButton',
  components: { FluentIcon },
};
</script>

<template>
  <button
    class="p-1 mb-1 rounded-full text-n-slate-11 bg-n-slate-3 hover:text-n-slate-12"
    style="display: none;"
  >
    <FluentIcon icon="arrow-reply" size="11" class="flex-shrink-0" />
  </button>
</template>
Initial commit: Add logistics and order_detail message types - Add Logistics component with progress tracking - Add OrderDetail component for order information - Support data-driven steps and actions - Add blue color scale to widget SCSS - Fix node overflow and progress bar rendering issues - Add English translations for dashboard components Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com> 2026-01-26 11:16:56 +08:00			`<script>`
			`import FluentIcon from 'shared/components/FluentIcon/Index.vue';`

			`export default {`
			`name: 'MessageReplyButton',`
			`components: { FluentIcon },`
			`};`
			`</script>`

			`<template>`
			`<button`
			`class="p-1 mb-1 rounded-full text-n-slate-11 bg-n-slate-3 hover:text-n-slate-12"`
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			`style="display: none;"`
Initial commit: Add logistics and order_detail message types - Add Logistics component with progress tracking - Add OrderDetail component for order information - Support data-driven steps and actions - Add blue color scale to widget SCSS - Fix node overflow and progress bar rendering issues - Add English translations for dashboard components Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com> 2026-01-26 11:16:56 +08:00			`>`
			`<FluentIcon icon="arrow-reply" size="11" class="flex-shrink-0" />`
			`</button>`
			`</template>`