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/dashboard/components-next/message/Message.vue

@@ -42,6 +42,8 @@ import TableBubble from './bubbles/Table.vue';
 import OrderListBubble from './bubbles/OrderList.vue';
 import OrderDetailBubble from './bubbles/OrderDetail.vue';
 import LogisticsBubble from './bubbles/Logistics.vue';
+import ProductListBubble from './bubbles/ProductList.vue';
+import SearchImageBubble from './bubbles/SearchImage.vue';
 
 import MessageError from './MessageError.vue';
 import ContextMenu from 'dashboard/modules/conversations/components/MessageContextMenu.vue';
@@ -308,6 +310,14 @@ const componentToRender = computed(() => {
     return LogisticsBubble;
   }
 
+  if (props.contentType === CONTENT_TYPES.PRODUCT_LIST) {
+    return ProductListBubble;
+  }
+
+  if (props.contentType === CONTENT_TYPES.SEARCH_IMAGE) {
+    return SearchImageBubble;
+  }
+
   if (props.contentType === CONTENT_TYPES.INCOMING_EMAIL) {
     return EmailBubble;
   }
@@ -404,6 +414,8 @@ const shouldRenderMessage = computed(() => {
   const isOrderList = props.contentType === CONTENT_TYPES.ORDER_LIST;
   const isOrderDetail = props.contentType === CONTENT_TYPES.ORDER_DETAIL;
   const isLogistics = props.contentType === CONTENT_TYPES.LOGISTICS;
+  const isProductList = props.contentType === CONTENT_TYPES.PRODUCT_LIST;
+  const isSearchImage = props.contentType === CONTENT_TYPES.SEARCH_IMAGE;
 
   return (
     hasAttachments ||
@@ -414,7 +426,9 @@ const shouldRenderMessage = computed(() => {
     isDataTable ||
     isOrderList ||
     isOrderDetail ||
-    isLogistics
+    isLogistics ||
+    isProductList ||
+    isSearchImage
   );
 });
 

app/javascript/dashboard/components-next/message/bubbles/ProductList.vue

@@ -0,0 +1,156 @@
+<script setup>
+import { computed } from 'vue';
+import { useMessageContext } from '../provider.js';
+
+const { contentAttributes } = useMessageContext();
+
+const title = computed(() => contentAttributes.value?.title || '');
+const products = computed(() => contentAttributes.value?.products || []);
+const actions = computed(() => contentAttributes.value?.actions || []);
+const productCount = computed(() => products.value.length);
+</script>
+
+<template>
+  <div class="product-list-message">
+    <div v-if="title" class="product-list-title">
+      <h4>{{ title }}</h4>
+    </div>
+
+    <div class="product-grid">
+      <div
+        v-for="(product, index) in products"
+        :key="index"
+        class="product-item"
+      >
+        <div class="product-image">
+          <img
+            :src="product.image"
+            :alt="product.name"
+            class="w-full h-full object-cover"
+          />
+        </div>
+        <div class="product-info">
+          <h5 class="product-name">{{ product.name }}</h5>
+          <p class="product-price">{{ product.price }}</p>
+          <p v-if="product.url" class="product-url text-xs text-n-blue-9">
+            <span class="text-xs">🔗 </span>{{ product.url }}
+          </p>
+        </div>
+      </div>
+    </div>
+
+    <div v-if="actions && actions.length > 0" class="product-actions">
+      <span
+        v-for="(action, index) in actions"
+        :key="index"
+        class="product-action"
+      >
+        {{ action.text }}{{ index < actions.length - 1 ? ' · ' : '' }}
+      </span>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.product-list-message {
+  max-width: 400px;
+}
+
+.product-list-title {
+  padding: 12px 16px 4px;
+}
+
+.product-list-title h4 {
+  margin: 0;
+  font-size: 14px;
+  font-weight: 600;
+  color: #1e293b;
+}
+
+.dark .product-list-title h4 {
+  color: #f1f5f9;
+}
+
+.product-grid {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 8px;
+  padding: 0 16px 12px 16px;
+}
+
+.product-item {
+  border: 1px solid #e5e7eb;
+  border-radius: 8px;
+  overflow: hidden;
+  background: white;
+}
+
+.dark .product-item {
+  border-color: #374151;
+  background: #1e293b;
+}
+
+.product-image {
+  aspect-ratio: 4/5;
+  width: 100%;
+  overflow: hidden;
+  background: #f9fafb;
+}
+
+.dark .product-image {
+  background: #374151;
+}
+
+.product-info {
+  padding: 8px;
+}
+
+.product-name {
+  margin: 0 0 4px 0;
+  font-size: 12px;
+  font-weight: 500;
+  color: #374151;
+  line-height: 1.4;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  overflow: hidden;
+}
+
+.dark .product-name {
+  color: #e5e7eb;
+}
+
+.product-price {
+  margin: 0;
+  font-size: 12px;
+  font-weight: 600;
+  color: #dc2626;
+}
+
+.product-url {
+  margin: 4px 0 0 0;
+  word-break: break-all;
+  opacity: 0.8;
+}
+
+.product-actions {
+  padding: 8px 16px 12px;
+  font-size: 12px;
+  color: #64748b;
+  border-top: 1px solid #e5e7eb;
+}
+
+.dark .product-actions {
+  color: #94a3b8;
+  border-top-color: #374151;
+}
+
+.product-action {
+  cursor: pointer;
+}
+
+.product-action:hover {
+  color: #2563eb;
+}
+</style>

app/javascript/dashboard/components-next/message/bubbles/SearchImage.vue

@@ -0,0 +1,37 @@
+<template>
+  <div class="search-image-bubble">
+    <div v-if="!imageUrl" class="p-4 text-n-slate-11 text-sm">
+      No image URL
+    </div>
+    <div v-else class="inline-block">
+      <img
+        :src="imageUrl"
+        alt="Search Image"
+        class="max-w-md rounded-lg shadow-sm"
+        @error="handleImageError"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed } from 'vue';
+import { useMessageContext } from '../provider.js';
+
+const { contentAttributes, content } = useMessageContext();
+
+const imageUrl = computed(() => {
+  return contentAttributes.value?.url || content.value || '';
+});
+
+const handleImageError = (event) => {
+  console.error('[SearchImageBubble] Image failed to load:', imageUrl.value);
+};
+</script>
+
+<style scoped>
+.search-image-bubble img {
+  max-height: 400px;
+  width: auto;
+}
+</style>

app/javascript/dashboard/components-next/message/constants.js

@@ -72,6 +72,8 @@ export const CONTENT_TYPES = {
   ORDER_LIST: 'order_list',
   ORDER_DETAIL: 'order_detail',
   LOGISTICS: 'logistics',
+  PRODUCT_LIST: 'product_list',
+  SEARCH_IMAGE: 'search_image',
 };
 
 export const MEDIA_TYPES = [

app/javascript/shared/components/Logistics.vue

@@ -20,12 +20,9 @@
     <!-- 中间：步骤条 -->
     <div class="px-6 py-8 relative">
       <!-- 进度背景线 -->
-      <div class="absolute top-[42px] left-10 right-10 h-0.5 bg-n-slate-4 dark:bg-n-slate-6 z-0"></div>
-      <!-- 激活进度线 -->
       <div
-        v-if="currentStep < steps.length - 1"
-        class="absolute top-[42px] left-10 h-0.5 bg-n-blue-9 z-0"
-        :style="{ width: progressWidth }"
+        class="progress-bar absolute top-[42px] left-10 right-10 h-0.5 bg-n-slate-4 dark:bg-n-slate-6 z-0"
+        :style="{ '--progress-width': progressWidth }"
       ></div>
 
       <div class="relative z-10 flex justify-between">
@@ -70,10 +67,12 @@
         :key="index"
         @click="onActionClick(action)"
         class="flex-1 py-3 text-sm transition-colors"
-        :class="{
-          'text-n-slate-11 hover:bg-n-slate-2 dark:hover:bg-n-solid-2 border-r border-n-weak': action.style === 'default',
-          'text-n-blue-10 font-semibold hover:bg-n-blue-1 dark:hover:bg-n-solid-blue': action.style === 'primary'
-        }"
+        :class="[
+          action.style === 'primary'
+            ? 'text-n-blue-10 font-semibold hover:bg-n-blue-1 dark:hover:bg-n-solid-blue'
+            : 'text-n-slate-11 hover:bg-n-slate-2 dark:hover:bg-n-solid-2',
+          index < actions.length - 1 ? 'border-r border-n-weak' : ''
+        ]"
       >
         {{ action.text }}
       </button>
@@ -112,8 +111,10 @@ const currentStatusText = computed(() => {
 });
 
 const progressWidth = computed(() => {
+  // 限制 currentStep 在有效范围内
+  const validStep = Math.min(props.currentStep, props.steps.length - 1);
   // 计算进度条长度：(当前步骤 / 总步数间隔) * 100%
-  return `${(props.currentStep / (props.steps.length - 1)) * 100}%`;
+  return `${(validStep / (props.steps.length - 1)) * 100}%`;
 });
 
 const statusBadgeClass = computed(() => {
@@ -128,14 +129,23 @@ const copyTrackingNumber = () => {
 };
 
 const onActionClick = (action) => {
-  // 如果有 URL，在父窗口中打开
+  // 如果有 URL，根据 target 属性决定打开方式
   if (action && action.url) {
+    const target = action.target || '_self'; // 默认在当前窗口打开
     if (window.parent !== window) {
-      // 在 iframe 中，直接设置父窗口 location
-      window.parent.location.href = action.url;
+      // 在 iframe 中
+      if (target === '_blank') {
+        window.parent.open(action.url, '_blank');
+      } else {
+        window.parent.location.href = action.url;
+      }
     } else {
-      // 不在 iframe 中，直接使用当前窗口
-      window.location.href = action.url;
+      // 不在 iframe 中
+      if (target === '_blank') {
+        window.open(action.url, '_blank');
+      } else {
+        window.location.href = action.url;
+      }
     }
     return;
   }
@@ -151,5 +161,15 @@ const onActionClick = (action) => {
 </script>
 
 <style scoped>
-/* 如果需要微调 Tailwind 未覆盖的样式，可写在这里 */
+.progress-bar {
+  margin: 0 12px;
+}
+
+.progress-bar::after {
+  content: '';
+  display: block;
+  height: 100%;
+  background-color: #2563eb;
+  width: var(--progress-width, 0%);
+}
 </style>

app/javascript/shared/components/OrderDetail.vue

@@ -61,14 +61,23 @@ export default {
       return color;
     },
     onActionClick(action) {
-      // 如果有 URL，在父窗口中打开
+      // 如果有 URL，根据 target 属性决定打开方式
       if (action && action.url) {
+        const target = action.target || '_self'; // 默认在当前窗口打开
         if (window.parent !== window) {
-          // 在 iframe 中，直接设置父窗口 location
-          window.parent.location.href = action.url;
+          // 在 iframe 中
+          if (target === '_blank') {
+            window.parent.open(action.url, '_blank');
+          } else {
+            window.parent.location.href = action.url;
+          }
         } else {
-          // 不在 iframe 中，直接使用当前窗口
-          window.location.href = action.url;
+          // 不在 iframe 中
+          if (target === '_blank') {
+            window.open(action.url, '_blank');
+          } else {
+            window.location.href = action.url;
+          }
         }
         return;
       }
@@ -141,10 +150,12 @@ export default {
         :key="index"
         @click="onActionClick(action)"
         class="flex-1 py-3 text-sm transition-colors"
-        :class="{
-          'text-n-slate-11 hover:bg-n-slate-2 dark:hover:bg-n-solid-2 border-r border-n-weak': action.style === 'default' || !action.style,
-          'text-n-blue-10 font-semibold hover:bg-n-blue-1 dark:hover:bg-n-solid-blue': action.style === 'primary'
-        }"
+        :class="[
+          action.style === 'primary'
+            ? 'text-n-blue-10 font-semibold hover:bg-n-blue-1 dark:hover:bg-n-solid-blue'
+            : 'text-n-slate-11 hover:bg-n-slate-2 dark:hover:bg-n-solid-2',
+          index < actions.length - 1 ? 'border-r border-n-weak' : ''
+        ]"
       >
         {{ action.text }}
       </button>

app/javascript/shared/components/OrderList.vue

@@ -114,8 +114,8 @@ export default {
 
 .status-badge {
   display: inline-block;
-  background-color: #f0f0f0;
-  color: #888;
+  background-color: #000000;
+  color: #ffffff;
   padding: 4px 8px;
   border-radius: 4px;
   font-size: 11px;
@@ -124,8 +124,8 @@ export default {
 }
 
 .dark .status-badge {
-  background-color: #374151;
-  color: #d1d5db;
+  background-color: #000000;
+  color: #ffffff;
 }
 
 .product-list {

app/javascript/shared/components/ProductList.vue

@@ -0,0 +1,141 @@
+<template>
+  <div class="product-list-wrap bg-white dark:bg-n-solid-1 rounded-xl shadow-md overflow-hidden border border-n-weak">
+    <div v-if="title" class="pt-3 px-3 pb-0 border-b border-n-weak">
+      <h3 class="text-sm font-bold text-n-slate-12">{{ title }}</h3>
+    </div>
+
+    <div class="p-3">
+      <div class="grid grid-cols-2 gap-2">
+        <div
+          v-for="(product, index) in products"
+          :key="index"
+          class="flex flex-col bg-white dark:bg-n-solid-1 rounded-lg shadow-sm overflow-hidden border border-gray-100"
+        >
+          <div class="aspect-[4/5] w-full overflow-hidden bg-gray-50 cursor-pointer" @click="onProductClick(product)">
+            <img
+              :src="product.image"
+              :alt="product.name"
+              class="w-full h-full object-cover"
+            />
+          </div>
+          <div class="p-2">
+            <h3 class="text-xs text-gray-800 font-medium leading-snug line-clamp-2">
+              {{ product.name }}
+            </h3>
+            <div>
+              <span class="text-xs font-semibold text-red-500" style="line-height: 16px;">{{ product.price }}</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div v-if="actions && actions.length > 0" class="flex border-t border-n-weak">
+      <button
+        v-for="(action, index) in actions"
+        :key="index"
+        @click="onActionClick(action)"
+        class="flex-1 py-2.5 text-xs transition-colors"
+        :class="[
+          action.style === 'primary'
+            ? 'text-n-blue-10 font-semibold hover:bg-n-blue-1 dark:hover:bg-n-solid-blue'
+            : 'text-n-slate-11 hover:bg-n-slate-2 dark:hover:bg-n-solid-2',
+          index < actions.length - 1 ? 'border-r border-n-weak' : ''
+        ]"
+      >
+        {{ action.text }}
+      </button>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { useStore } from 'vuex';
+
+const store = useStore();
+const { sendMessage } = store;
+
+const props = defineProps({
+  title: {
+    type: String,
+    default: ''
+  },
+  products: {
+    type: Array,
+    default: () => []
+  },
+  actions: {
+    type: Array,
+    default: () => []
+  }
+});
+
+const onProductClick = (product) => {
+  // 如果产品有 URL，进行跳转
+  if (product.url) {
+    const target = product.target || '_self';
+    if (window.parent !== window) {
+      // 在 iframe 中
+      if (target === '_blank') {
+        window.parent.open(product.url, '_blank');
+      } else {
+        window.parent.location.href = product.url;
+      }
+    } else {
+      // 不在 iframe 中
+      if (target === '_blank') {
+        window.open(product.url, '_blank');
+      } else {
+        window.location.href = product.url;
+      }
+    }
+    return;
+  }
+
+  // 如果有点击回复，发送消息
+  if (product.clickReply) {
+    sendMessage({
+      type: 'outgoing',
+      content: product.clickReply,
+    });
+  }
+};
+
+const onActionClick = (action) => {
+  // 如果有 URL，根据 target 属性决定打开方式
+  if (action && action.url) {
+    const target = action.target || '_self';
+    if (window.parent !== window) {
+      if (target === '_blank') {
+        window.parent.open(action.url, '_blank');
+      } else {
+        window.parent.location.href = action.url;
+      }
+    } else {
+      if (target === '_blank') {
+        window.open(action.url, '_blank');
+      } else {
+        window.location.href = action.url;
+      }
+    }
+    return;
+  }
+
+  // 否则发送消息
+  if (action && action.reply) {
+    sendMessage({
+      type: 'outgoing',
+      content: action.reply,
+    });
+  }
+};
+</script>
+
+<style scoped>
+.line-clamp-2 {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  overflow: hidden;
+}
+</style>

app/javascript/shared/components/SearchImage.vue

@@ -0,0 +1,47 @@
+<template>
+  <div class="search-image-wrap bg-gray-100 inline-block">
+    <div v-if="!imageUrl" class="text-red-500 text-xs p-2">
+      No image URL found. Attributes: {{ JSON.stringify(messageContentAttributes) }}
+    </div>
+    <img
+      v-if="imageUrl"
+      :src="imageUrl"
+      alt="搜索图片"
+      class="h-48 w-auto rounded-lg block"
+      @error="handleImageError"
+      @load="handleImageLoad"
+    />
+  </div>
+</template>
+
+<script setup>
+import { computed } from 'vue';
+
+const props = defineProps({
+  messageContentAttributes: {
+    type: Object,
+    default: () => {},
+  },
+  message: {
+    type: String,
+    default: '',
+  },
+});
+
+const imageUrl = computed(() => {
+  console.log('[SearchImage] messageContentAttributes:', props.messageContentAttributes);
+  console.log('[SearchImage] message:', props.message);
+  const url = props.messageContentAttributes?.url || props.message || '';
+  console.log('[SearchImage] Computed imageUrl:', url);
+  return url;
+});
+
+const handleImageError = (event) => {
+  console.error('[SearchImage] Image failed to load:', imageUrl.value);
+  console.error('[SearchImage] Error event:', event);
+};
+
+const handleImageLoad = () => {
+  console.log('[SearchImage] Image loaded successfully:', imageUrl.value);
+};
+</script>

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,