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>

app/javascript/widget/App.vue

@@ -375,9 +375,20 @@ export default {
         if (token) {
           console.log('[Widget] Found token in cookie:', token.substring(0, 20) + '...');
 
+          // 从 JWT token 中提取用户 ID
+          let userId = '123'; // 默认值
+          try {
+            const payload = JSON.parse(atob(token.split('.')[1]));
+            userId = payload.user_id || payload.sub || '123';
+          } catch (e) {
+            console.warn('[Widget] Failed to decode token, using default userId:', e.message);
+          }
+
+          console.log('[Widget] Extracted userId:', userId);
+
           // 调用 setUser API 保存到 contact
           this.$store.dispatch('contacts/setUser', {
-            identifier: token,
+            identifier: userId,
             user: {
               custom_attributes: {
                 jwt_token: token,

app/javascript/widget/api/conversation.js

@@ -6,8 +6,11 @@ const createConversationAPI = async content => {
   return API.post(urlData.url, urlData.params);
 };
 
-const sendMessageAPI = async (content, replyTo = null) => {
-  const urlData = endPoints.sendMessage(content, replyTo);
+const sendMessageAPI = async (content, replyTo = null, contentType = null, contentAttributes = null) => {
+  const urlData = endPoints.sendMessage(content, replyTo, contentType, contentAttributes);
+  console.log('[sendMessageAPI] Sending to:', urlData.url, 'with params:', urlData.params);
+  console.log('[sendMessageAPI] contentType:', contentType);
+  console.log('[sendMessageAPI] contentAttributes:', contentAttributes);
   return API.post(urlData.url, urlData.params);
 };
 

app/javascript/widget/api/endPoints.js

@@ -22,18 +22,28 @@ const createConversation = params => {
   };
 };
 
-const sendMessage = (content, replyTo) => {
+const sendMessage = (content, replyTo, contentType = null, contentAttributes = null) => {
   const referrerURL = window.referrerURL || '';
   const search = buildSearchParamsWithLocale(window.location.search);
+  const messageParams = {
+    content,
+    reply_to: replyTo,
+    timestamp: new Date().toString(),
+    referer_url: referrerURL,
+  };
+
+  if (contentType) {
+    messageParams.content_type = contentType;
+  }
+
+  if (contentAttributes) {
+    messageParams.content_attributes = contentAttributes;
+  }
+
   return {
     url: `/api/v1/widget/messages${search}`,
     params: {
-      message: {
-        content,
-        reply_to: replyTo,
-        timestamp: new Date().toString(),
-        referer_url: referrerURL,
-      },
+      message: messageParams,
     },
   };
 };

app/javascript/widget/assets/scss/views/_conversation.scss

@@ -4,7 +4,7 @@
 
 .conversation-wrap {
   .agent-message {
-    @apply items-end flex flex-row justify-start mt-0 ltr:mr-0 rtl:mr-2 mb-0.5 ltr:ml-2 rtl:ml-0 max-w-[88%];
+    @apply items-end flex flex-row justify-start mt-0 ltr:mr-0 rtl:mr-2 mb-0.5 ltr:ml-2 rtl:ml-0 max-w-[98%];
 
     .avatar-wrap {
       @apply flex-shrink-0 h-6 w-6;

app/javascript/widget/components/AgentMessage.vue

@@ -53,8 +53,8 @@ export default {
       ) {
         return false;
       }
-      // Table, order_list, order_detail and logistics messages can have empty content, so check content_type as well
-      if (this.contentType === 'data_table' || this.contentType === 'order_list' || this.contentType === 'order_detail' || this.contentType === 'logistics') {
+      // Table, order_list, order_detail, logistics and product_list messages can have empty content, so check content_type as well
+      if (this.contentType === 'data_table' || this.contentType === 'order_list' || this.contentType === 'order_detail' || this.contentType === 'logistics' || this.contentType === 'product_list') {
         return true;
       }
       return this.message.content;
@@ -168,7 +168,7 @@ export default {
     }"
   >
     <div v-if="!isASubmittedForm" class="agent-message">
-      <div class="avatar-wrap">
+      <div class="avatar-wrap" style="display: none;">
         <div class="user-thumbnail-box">
           <Avatar
             v-if="message.showAvatar || hasRecordedResponse"

app/javascript/widget/components/AgentMessageBubble.vue

@@ -11,6 +11,7 @@ import IntegrationCard from './template/IntegrationCard.vue';
 import OrderList from 'shared/components/OrderList.vue';
 import OrderDetail from 'shared/components/OrderDetail.vue';
 import Logistics from 'shared/components/Logistics.vue';
+import ProductList from 'shared/components/ProductList.vue';
 
 export default {
   name: 'AgentMessageBubble',
@@ -26,6 +27,7 @@ export default {
     OrderList,
     OrderDetail,
     Logistics,
+    ProductList,
   },
   props: {
     message: { type: String, default: null },
@@ -84,6 +86,9 @@ export default {
     isLogistics() {
       return this.contentType === 'logistics';
     },
+    isProductList() {
+      return this.contentType === 'product_list';
+    },
   },
   methods: {
     onResponse(messageResponse) {
@@ -113,7 +118,7 @@ export default {
   <div class="chat-bubble-wrap">
     <div
       v-if="
-        !isCards && !isOptions && !isForm && !isArticle && !isCards && !isCSAT && !isTable && !isOrderList && !isOrderDetail && !isLogistics
+        !isCards && !isOptions && !isForm && !isArticle && !isCards && !isCSAT && !isTable && !isOrderList && !isOrderDetail && !isLogistics && !isProductList
       "
       class="chat-bubble agent bg-n-background dark:bg-n-solid-3 text-n-slate-12"
     >
@@ -202,5 +207,11 @@ export default {
       :steps="messageContentAttributes.steps"
       :actions="messageContentAttributes.actions"
     />
+    <ProductList
+      v-if="isProductList"
+      :title="messageContentAttributes.title"
+      :products="messageContentAttributes.products"
+      :actions="messageContentAttributes.actions"
+    />
   </div>
 </template>

app/javascript/widget/components/AgentTypingBubble.vue

@@ -7,7 +7,7 @@ export default {
 <template>
   <div class="agent-message-wrap sticky bottom-1">
     <div class="agent-message">
-      <div class="avatar-wrap" />
+      <div class="avatar-wrap" style="display: none;" />
       <div class="message-wrap mt-2">
         <div
           class="chat-bubble agent typing-bubble bg-n-background dark:bg-n-solid-3"

app/javascript/widget/components/ChatInputWrap.vue

@@ -3,6 +3,7 @@ import { mapGetters } from 'vuex';
 
 import ChatAttachmentButton from 'widget/components/ChatAttachment.vue';
 import ChatSendButton from 'widget/components/ChatSendButton.vue';
+import ImageUploadButton from 'widget/components/ImageUploadButton.vue';
 import { useAttachments } from '../composables/useAttachments';
 import FluentIcon from 'shared/components/FluentIcon/Index.vue';
 import ResizableTextArea from 'shared/components/ResizableTextArea.vue';
@@ -14,6 +15,7 @@ export default {
   components: {
     ChatAttachmentButton,
     ChatSendButton,
+    ImageUploadButton,
     EmojiInput,
     FluentIcon,
     ResizableTextArea,
@@ -122,6 +124,29 @@ export default {
     focusInput() {
       this.$refs.chatInput.focus();
     },
+    handleImageUpload(data) {
+      console.log('[ChatInputWrap] handleImageUpload called with:', data);
+
+      // data = { imageUrl: string, contentType: string }
+      if (typeof data === 'string') {
+        // Backward compatibility - if it's just a string
+        console.log('[ChatInputWrap] Sending as plain text');
+        this.onSendMessage(data);
+      } else if (data.contentType === 'search_image') {
+        // Send search_image message with empty content and imageUrl in content_attributes
+        console.log('[ChatInputWrap] Sending as search_image, imageUrl:', data.imageUrl);
+        this.$store.dispatch('conversation/sendMessage', {
+          content: '',
+          content_type: 'search_image', // 直接使用字符串
+          content_attributes: {
+            url: data.imageUrl
+          }
+        });
+      } else {
+        console.log('[ChatInputWrap] Sending as default');
+        this.onSendMessage(data.imageUrl || data);
+      }
+    },
   },
 };
 </script>
@@ -149,8 +174,12 @@ export default {
       @blur="onBlur"
     />
     <div class="flex items-center ltr:pl-2 rtl:pr-2">
+      <ImageUploadButton
+        class="text-n-slate-12"
+        :on-upload="handleImageUpload"
+      />
       <ChatAttachmentButton
-        v-if="showAttachment"
+        v-if="false"
         class="text-n-slate-12"
         :on-attach="onSendAttachment"
       />

app/javascript/widget/components/ImageUploadButton.vue

@@ -0,0 +1,185 @@
+<script>
+export default {
+  name: 'ImageUploadButton',
+  components: {},
+  props: {
+    onUpload: {
+      type: Function,
+      default: () => {},
+    },
+  },
+  data() {
+    return {
+      isUploading: false,
+    };
+  },
+  methods: {
+    handleFileSelect(event) {
+      const file = event.target.files[0];
+      if (!file) return;
+
+      // Validate file type
+      if (!file.type.startsWith('image/')) {
+        alert('Please select an image file');
+        return;
+      }
+
+      // Validate file size (max 10MB)
+      const maxSize = 10 * 1024 * 1024;
+      if (file.size > maxSize) {
+        alert('Image size must be less than 10MB');
+        return;
+      }
+
+      this.uploadImage(file);
+    },
+
+    async uploadImage(file) {
+      this.isUploading = true;
+
+      try {
+        // Get MALL_URL from window.chatwootWebChannel
+        const mallUrl = window.chatwootWebChannel?.mallUrl || 'https://apicn.qa1.gaia888.com';
+        const uploadUrl = `${mallUrl}/mall/api/upload/upload-resource`;
+
+        // Create FormData
+        const formData = new FormData();
+        formData.append('file', file);
+
+        // Get auth token from cookie
+        const token = this.getTokenFromCookie();
+
+        console.log('[ImageUpload] Uploading to:', uploadUrl);
+        console.log('[ImageUpload] Token:', token ? 'Present' : 'Missing');
+
+        // Upload to mall API
+        const response = await fetch(uploadUrl, {
+          method: 'POST',
+          headers: {
+            'Authorization': `Bearer ${token}`,
+          },
+          body: formData,
+        });
+
+        console.log('[ImageUpload] Response status:', response.status);
+
+        if (!response.ok) {
+          throw new Error(`Upload failed: ${response.status} ${response.statusText}`);
+        }
+
+        const result = await response.json();
+        console.log('[ImageUpload] Response data:', result);
+
+        // Handle different response formats
+        let imageUrl = null;
+
+        if (result.code === 200 && result.result && result.result.url) {
+          // Mall API format: { code: 200, msg: "success", result: { url: "..." } }
+          imageUrl = result.result.url;
+        } else if (result.success && result.data) {
+          // Format: { success: true, data: { url: "..." } }
+          imageUrl = result.data.url || result.data.path;
+        } else if (result.code === 200 && result.data) {
+          // Format: { code: 200, data: { url: "..." } }
+          imageUrl = result.data.url || result.data.path || result.data;
+        } else if (result.url) {
+          // Format: { url: "..." }
+          imageUrl = result.url;
+        } else if (typeof result === 'string') {
+          // Format: just the URL string
+          imageUrl = result;
+        }
+
+        if (imageUrl) {
+          console.log('[ImageUpload] Image URL:', imageUrl);
+          // Send with search_image content_type, empty content, and imageUrl in content_attributes
+          this.onUpload({
+            imageUrl: imageUrl,
+            contentType: 'search_image'
+          });
+        } else {
+          console.error('[ImageUpload] Unknown response format:', result);
+          throw new Error(`Unknown response format: ${JSON.stringify(result)}`);
+        }
+      } catch (error) {
+        console.error('Image upload error:', error);
+        alert(`Failed to upload image: ${error.message}`);
+      } finally {
+        this.isUploading = false;
+        // Reset file input
+        this.$refs.fileInput.value = '';
+      }
+    },
+
+    getTokenFromCookie() {
+      const getCookie = (name) => {
+        const value = `; ${document.cookie}`;
+        const parts = value.split(`; ${name}=`);
+        if (parts.length === 2) return parts.pop().split(';').shift();
+        return null;
+      };
+      return getCookie('token') || '';
+    },
+
+    triggerFileInput() {
+      if (this.isUploading) return;
+      this.$refs.fileInput.click();
+    },
+  },
+};
+</script>
+
+<template>
+  <div class="image-upload-button">
+    <input
+      ref="fileInput"
+      type="file"
+      accept="image/*"
+      style="display: none;"
+      @change="handleFileSelect"
+    />
+    <button
+      class="flex items-center justify-center min-h-8 min-w-8 text-n-slate-12"
+      :disabled="isUploading"
+      :aria-label="isUploading ? 'Uploading...' : 'Upload image'"
+      @click="triggerFileInput"
+    >
+      <svg
+        v-if="!isUploading"
+        xmlns="http://www.w3.org/2000/svg"
+        class="h-5 w-5"
+        fill="none"
+        viewBox="0 0 24 24"
+        stroke="currentColor"
+      >
+        <path
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          stroke-width="2"
+          d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"
+        />
+      </svg>
+      <svg
+        v-else
+        xmlns="http://www.w3.org/2000/svg"
+        class="h-5 w-5 animate-spin"
+        fill="none"
+        viewBox="0 0 24 24"
+      >
+        <circle
+          class="opacity-25"
+          cx="12"
+          cy="12"
+          r="10"
+          stroke="currentColor"
+          stroke-width="4"
+        />
+        <path
+          class="opacity-75"
+          fill="currentColor"
+          d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+        />
+      </svg>
+    </button>
+  </div>
+</template>

app/javascript/widget/components/MessageReplyButton.vue

@@ -10,6 +10,7 @@ export default {
 <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>

app/javascript/widget/components/UserMessage.vue

@@ -5,6 +5,7 @@ import ImageBubble from 'widget/components/ImageBubble.vue';
 import VideoBubble from 'widget/components/VideoBubble.vue';
 import FluentIcon from 'shared/components/FluentIcon/Index.vue';
 import FileBubble from 'widget/components/FileBubble.vue';
+import SearchImage from 'shared/components/SearchImage.vue';
 import { messageStamp } from 'shared/helpers/timeHelper';
 import messageMixin from '../mixins/messageMixin';
 import ReplyToChip from 'widget/components/ReplyToChip.vue';
@@ -21,6 +22,7 @@ export default {
     ImageBubble,
     VideoBubble,
     FileBubble,
+    SearchImage,
     FluentIcon,
     ReplyToChip,
     DragWrapper,
@@ -51,6 +53,13 @@ export default {
       const { status = '' } = this.message;
       return status === 'in_progress';
     },
+    contentType() {
+      const { content_type: contentType = 'text' } = this.message;
+      return contentType;
+    },
+    isSearchImage() {
+      return this.contentType === 'search_image' || this.contentType === 17;
+    },
     showTextBubble() {
       const { message } = this;
       return !!message.content;
@@ -128,6 +137,11 @@ export default {
               :status="message.status"
               :widget-color="widgetColor"
             />
+            <SearchImage
+              v-if="isSearchImage"
+              :message="message.content"
+              :message-content-attributes="messageContentAttributes"
+            />
             <div
               v-if="hasAttachments"
               class="chat-bubble has-attachment user"

app/javascript/widget/store/modules/conversation/actions.js

@@ -31,22 +31,29 @@ export const actions = {
     }
   },
   sendMessage: async ({ dispatch }, params) => {
-    const { content, replyTo } = params;
-    const message = createTemporaryMessage({ content, replyTo });
+    const { content, replyTo, content_type: contentType, content_attributes: contentAttributes } = params;
+    console.log('[actions] sendMessage called with:', { content, replyTo, contentType, contentAttributes });
+    const message = createTemporaryMessage({ content, replyTo, contentType, contentAttributes });
+    console.log('[actions] Created message:', message);
     dispatch('sendMessageWithData', message);
   },
   sendMessageWithData: async ({ commit }, message) => {
-    const { id, content, replyTo, meta = {} } = message;
+    const { id, content, replyTo, content_type: contentType, content_attributes: contentAttributes, meta = {} } = message;
 
+    console.log('[sendMessageWithData] Sending message with contentType:', contentType);
+    console.log('[sendMessageWithData] contentAttributes:', contentAttributes);
     commit('pushMessageToConversation', message);
     commit('updateMessageMeta', { id, meta: { ...meta, error: '' } });
     try {
-      const { data } = await sendMessageAPI(content, replyTo);
+      const { data } = await sendMessageAPI(content, replyTo, contentType, contentAttributes);
+      console.log('[sendMessageWithData] Response:', data);
+      console.log('[sendMessageWithData] Response content_type:', data?.content_type);
 
       // [VITE] Don't delete this manually, since `pushMessageToConversation` does the replacement for us anyway
       // commit('deleteMessage', message.id);
       commit('pushMessageToConversation', { ...data, status: 'sent' });
     } catch (error) {
+      console.error('[sendMessageWithData] Error:', error);
       commit('pushMessageToConversation', { ...message, status: 'failed' });
       commit('updateMessageMeta', {
         id,

app/javascript/widget/store/modules/conversation/helpers.js

@@ -2,11 +2,13 @@ import { MESSAGE_TYPE } from 'widget/helpers/constants';
 import { isASubmittedFormMessage } from 'shared/helpers/MessageTypeHelper';
 
 import getUuid from '../../../helpers/uuid';
-export const createTemporaryMessage = ({ attachments, content, replyTo }) => {
+export const createTemporaryMessage = ({ attachments, content, replyTo, contentType, contentAttributes }) => {
   const timestamp = new Date().getTime() / 1000;
   return {
     id: getUuid(),
     content,
+    content_type: contentType,
+    content_attributes: contentAttributes,
     attachments,
     status: 'in_progress',
     replyTo,