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
parent 092fb2e083
commit 4bd11c0ecc
43 changed files with 2979 additions and 124 deletions
--- a/app/controllers/api/v1/widget/base_controller.rb
+++ b/app/controllers/api/v1/widget/base_controller.rb
@@ -79,9 +79,8 @@ class Api::V1::Widget::BaseController < ApplicationController
      sender: @contact,
      content: permitted_params[:message][:content],
      inbox_id: conversation.inbox_id,
-      content_attributes: {
-        in_reply_to: permitted_params[:message][:reply_to]
-      },
+      content_type: permitted_params[:message][:content_type],
+      content_attributes: permitted_params[:message][:content_attributes] || { in_reply_to: permitted_params[:message][:reply_to] },
      echo_id: permitted_params[:message][:echo_id],
      message_type: :incoming
    }
--- a/app/controllers/api/v1/widget/conversations_controller.rb
+++ b/app/controllers/api/v1/widget/conversations_controller.rb
@@ -10,7 +10,10 @@ class Api::V1::Widget::ConversationsController < Api::V1::Widget::BaseController
    ActiveRecord::Base.transaction do
      process_update_contact
      @conversation = create_conversation
-      conversation.messages.create!(message_params)
+      Rails.logger.info "Widget API - message_params: #{message_params.inspect}"
+      Rails.logger.info "Widget API - content_type: #{message_params[:message][:content_type]}"
+      message = conversation.messages.create!(message_params)
+      Rails.logger.info "Widget API - Created message content_type: #{message.content_type}"
      # TODO: Temporary fix for message type cast issue, since message_type is returning as string instead of integer
      conversation.reload
    end
@@ -87,7 +90,7 @@ class Api::V1::Widget::ConversationsController < Api::V1::Widget::BaseController

  def permitted_params
    params.permit(:id, :typing_status, :website_token, :email, contact: [:name, :email, :phone_number],
-                                                               message: [:content, :referer_url, :timestamp, :echo_id],
+                                                               message: [:content, :content_type, :referer_url, :timestamp, :echo_id],
                                                               custom_attributes: {})
  end
 end
--- a/app/controllers/api/v1/widget/messages_controller.rb
+++ b/app/controllers/api/v1/widget/messages_controller.rb
@@ -64,7 +64,7 @@ class Api::V1::Widget::MessagesController < Api::V1::Widget::BaseController

  def permitted_params
    # timestamp parameter is used in create conversation method
-    params.permit(:id, :before, :after, :website_token, contact: [:name, :email], message: [:content, :referer_url, :timestamp, :echo_id, :reply_to])
+    params.permit(:id, :before, :after, :website_token, contact: [:name, :email], message: [:content, :content_type, :referer_url, :timestamp, :echo_id, :reply_to, content_attributes: {}])
  end

  def set_message
--- a/app/controllers/widget_tests_controller.rb
+++ b/app/controllers/widget_tests_controller.rb
@@ -28,7 +28,7 @@ class WidgetTestsController < ActionController::Base
  end

  def inbox_id
-    @inbox_id ||= params[:inbox_id] || Channel::WebWidget.find(2).inbox.id
+    @inbox_id ||= params[:inbox_id] || Channel::WebWidget.first&.inbox&.id
  end

  def ensure_web_widget
--- a/app/javascript/dashboard/components-next/message/Message.vue
+++ b/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
  );
 });

--- a/app/javascript/dashboard/components-next/message/bubbles/ProductList.vue
+++ b/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>
--- a/app/javascript/dashboard/components-next/message/bubbles/SearchImage.vue
+++ b/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>
--- a/app/javascript/dashboard/components-next/message/constants.js
+++ b/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 = [
--- a/app/javascript/shared/components/Logistics.vue
+++ b/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>
--- a/app/javascript/shared/components/OrderDetail.vue
+++ b/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>
--- a/app/javascript/shared/components/OrderList.vue
+++ b/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 {
--- a/app/javascript/shared/components/ProductList.vue
+++ b/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>
--- a/app/javascript/shared/components/SearchImage.vue
+++ b/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>
--- a/app/javascript/widget/App.vue
+++ b/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,
--- a/app/javascript/widget/api/conversation.js
+++ b/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);
 };

--- a/app/javascript/widget/api/endPoints.js
+++ b/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,
    },
  };
 };
--- a/app/javascript/widget/assets/scss/views/_conversation.scss
+++ b/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;
--- a/app/javascript/widget/components/AgentMessage.vue
+++ b/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"
--- a/app/javascript/widget/components/AgentMessageBubble.vue
+++ b/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>
--- a/app/javascript/widget/components/AgentTypingBubble.vue
+++ b/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"
--- a/app/javascript/widget/components/ChatInputWrap.vue
+++ b/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"
      />
--- a/app/javascript/widget/components/ImageUploadButton.vue
+++ b/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>
--- a/app/javascript/widget/components/MessageReplyButton.vue
+++ b/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>
--- a/app/javascript/widget/components/UserMessage.vue
+++ b/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"
--- a/app/javascript/widget/store/modules/conversation/actions.js
+++ b/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,
--- a/app/javascript/widget/store/modules/conversation/helpers.js
+++ b/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,
--- a/app/listeners/webhook_listener.rb
+++ b/app/listeners/webhook_listener.rb
@@ -28,6 +28,9 @@ class WebhookListener < BaseListener

    return unless message.webhook_sendable?

+    # For search_image type, allow webhook even if content is blank
+    return if message.content.blank? && message.content_type != 'search_image'
+
    payload = message.webhook_data.merge(event: __method__.to_s)
    deliver_webhook_payloads(payload, inbox)
  end
@@ -38,6 +41,9 @@ class WebhookListener < BaseListener

    return unless message.webhook_sendable?

+    # For search_image type, allow webhook even if content is blank
+    return if message.content.blank? && message.content_type != 'search_image'
+
    payload = message.webhook_data.merge(event: __method__.to_s)
    deliver_webhook_payloads(payload, inbox)
  end
--- a/app/models/message.rb
+++ b/app/models/message.rb
@@ -100,7 +100,9 @@ class Message < ApplicationRecord
    data_table: 13,
    order_list: 14,
    order_detail: 15,
-    logistics: 16
+    logistics: 16,
+    search_image: 17,
+    product_list: 18
  }
  enum status: { sent: 0, delivered: 1, read: 2, failed: 3 }
  # [:submitted_email, :items, :submitted_values] : Used for bot message types
--- a/app/views/api/v1/widget/messages/create.json.jbuilder
+++ b/app/views/api/v1/widget/messages/create.json.jbuilder
@@ -1,5 +1,6 @@
 json.id @message.id
 json.content @message.content
+json.content_type @message.content_type
 json.inbox_id @message.inbox_id
 json.conversation_id @message.conversation.display_id
 json.message_type @message.message_type_before_type_cast
--- a/app/views/widget_tests/index.html.erb
+++ b/app/views/widget_tests/index.html.erb
@@ -1,18 +1,222 @@
 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0" />
+<style>
+  body {
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
+    padding: 20px;
+    background: #f5f5f5;
+  }
+
+  .test-panel {
+    max-width: 800px;
+    margin: 0 auto;
+    background: white;
+    padding: 30px;
+    border-radius: 8px;
+    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+  }
+
+  .test-panel h1 {
+    margin-top: 0;
+    color: #333;
+    font-size: 24px;
+  }
+
+  .status-card {
+    background: #f8f9fa;
+    border-left: 4px solid #28a745;
+    padding: 15px;
+    margin: 20px 0;
+    border-radius: 4px;
+  }
+
+  .status-card.visitor {
+    border-left-color: #ffc107;
+  }
+
+  .status-card h3 {
+    margin-top: 0;
+    font-size: 16px;
+  }
+
+  .status-item {
+    display: flex;
+    justify-content: space-between;
+    padding: 8px 0;
+    border-bottom: 1px solid #e9ecef;
+  }
+
+  .status-item:last-child {
+    border-bottom: none;
+  }
+
+  .status-label {
+    font-weight: 600;
+    color: #495057;
+  }
+
+  .status-value {
+    color: #6c757d;
+    font-family: monospace;
+  }
+
+  .button-group {
+    display: flex;
+    gap: 10px;
+    margin-top: 20px;
+  }
+
+  .btn {
+    padding: 12px 24px;
+    border: none;
+    border-radius: 6px;
+    font-size: 14px;
+    font-weight: 600;
+    cursor: pointer;
+    transition: all 0.3s;
+  }
+
+  .btn-primary {
+    background: #28a745;
+    color: white;
+  }
+
+  .btn-primary:hover {
+    background: #218838;
+  }
+
+  .btn-secondary {
+    background: #6c757d;
+    color: white;
+  }
+
+  .btn-secondary:hover {
+    background: #5a6268;
+  }
+
+  .btn-danger {
+    background: #dc3545;
+    color: white;
+  }
+
+  .btn-danger:hover {
+    background: #c82333;
+  }
+
+  .btn-warning {
+    background: #ffc107;
+    color: #212529;
+  }
+
+  .btn-warning:hover {
+    background: #e0a800;
+  }
+
+  .log-section {
+    margin-top: 30px;
+    background: #1e1e1e;
+    color: #d4d4d4;
+    padding: 15px;
+    border-radius: 6px;
+    font-family: 'Courier New', monospace;
+    font-size: 12px;
+    max-height: 300px;
+    overflow-y: auto;
+  }
+
+  .log-section h3 {
+    color: #4ec9b0;
+    margin-top: 0;
+    font-size: 14px;
+  }
+
+  .hidden {
+    display: none;
+  }
+</style>
+
 <body>
+  <div class="test-panel">
+    <h1>🧪 Chatwoot Widget 测试页面</h1>
+    <p style="color: #666; margin-bottom: 20px;">
+      <strong>测试流程：</strong><br>
+      1. 页面加载时以游客模式启动（不做任何处理）<br>
+      2. 点击"模拟用户登录"：使用 reset() 清除聊天 + setUser() 设置用户（不刷新页面）<br>
+      3. 点击"用户退出"：使用 reset() 清除内容并刷新页面
+    </p>
+
+    <div id="statusCard" class="status-card visitor">
+      <h3 id="statusTitle">👤 当前状态：游客模式</h3>
+      <div class="status-item">
+        <span class="status-label">User ID:</span>
+        <span class="status-value" id="displayUserId">无</span>
+      </div>
+      <div class="status-item">
+        <span class="status-label">Token:</span>
+        <span class="status-value" id="displayToken">不存在</span>
+      </div>
+      <div class="status-item">
+        <span class="status-label">登录状态:</span>
+        <span class="status-value" id="displayLoginStatus">未登录</span>
+      </div>
+    </div>
+
+    <div class="button-group">
+      <button class="btn btn-primary" id="loginBtn" onclick="simulateLogin()">🔐 模拟用户登录</button>
+      <button class="btn btn-danger hidden" id="logoutBtn" onclick="simulateLogout()">🚪 用户退出</button>
+      <button class="btn btn-secondary" onclick="refreshPage()">🔄 刷新页面</button>
+      <button class="btn btn-secondary" onclick="openWidget()">💬 打开聊天</button>
+      <button class="btn btn-secondary" onclick="clearAllData()">🗑️ 清除所有数据</button>
+      <button class="btn btn-warning hidden" id="cancelRefreshBtn" onclick="cancelRefresh()">❌ 取消刷新</button>
+    </div>
+
+    <div id="refreshNotice" class="hidden" style="margin-top: 15px; padding: 10px; background: #fff3cd; border-left: 4px solid #ffc107; border-radius: 4px;">
+      <strong>⏳ 页面将在 <span id="countdown">2</span> 秒后自动刷新...</strong>
+    </div>
+
+    <div class="log-section">
+      <h3>📋 控制台日志</h3>
+      <div id="logOutput">等待操作...</div>
+    </div>
+  </div>
 </body>

 <%
-  # 使用动态的 user identifier，生成对应的 hash
-  user_id = '123'
-  user_hash = OpenSSL::HMAC.hexdigest(
-    'sha256',
-    @web_widget.hmac_token,
-    user_id.to_s
-  )
+  # 测试用的用户信息
+  # 检查 cookie 中是否有 token
+  token_present = cookies[:token].present?

+  if token_present
+    test_user_id = '211845'
+    test_user_hash = OpenSSL::HMAC.hexdigest(
+      'sha256',
+      @web_widget.hmac_token,
+      test_user_id.to_s
+    )
+  else
+    test_user_id = nil
+    test_user_hash = nil
+  end
 %>
+
 <script>
+// 测试用的 JWT Token
+const TEST_TOKEN = 'eyJ0eXAiOiJqd3QifQ.eyJzdWIiOiIxIiwiaXNzIjoiaHR0cDpcL1wvOiIsImV4cCI6MTc3MjAwNTk1MSwiaWF0IjoxNzY5NDEzOTUxLCJuYmYiOjE3Njk0MTM5NTEsInVzZXJJZCI6MjExODQ1LCJ0eXBlIjoyLCJ0ZW5hbnRJZCI6MiwidWlkIjoyMTE4NDUsInMiOiI4VG5wd2QiLCJqdGkiOiI5MjFlYzhhMDE2Yjk3MTA5OTI1MjgxMjUzZWQ1MzBkYSJ9.ql7ianUz3Scn_y0JbMXjeq56BVhjpQqt2_vrdq0kUL4';
+
+// 测试用户信息
+const TEST_USER = {
+  userId: '<%= test_user_id %>',
+  userHash: '<%= test_user_hash %>',
+  email: '211845@example.com',
+  name: '测试用户 211845'
+};
+
+// 当前状态
+let isLoggedIn = false;
+let currentUser = null;
+let refreshTimer = null;
+let countdownTimer = null;
+let hadUserIdentifier = false; // 记录之前是否有过用户标识
+
 // Helper function to get cookie value by name
 function getCookie(name) {
  const value = `; ${document.cookie}`;
@@ -21,22 +225,64 @@ function getCookie(name) {
  return null;
 }

+// Helper function to set cookie
+function setCookie(name, value, days = 7) {
+  const expires = new Date(Date.now() + days * 864e5).toUTCString();
+  document.cookie = name + '=' + value + '; expires=' + expires + '; path=/';
+}
+
+// Helper function to delete cookie
+function deleteCookie(name) {
+  document.cookie = name + '=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/';
+}
+
+// 日志输出
+function addLog(message) {
+  const logOutput = document.getElementById('logOutput');
+  const timestamp = new Date().toLocaleTimeString();
+  logOutput.innerHTML += `<div>[${timestamp}] ${message}</div>`;
+  logOutput.scrollTop = logOutput.scrollHeight;
+  console.log(message);
+}
+
+// 更新状态显示
+function updateStatusDisplay() {
+  const token = getCookie('token');
+  const userId = currentUser ? currentUser.userId : null;
+
+  document.getElementById('displayUserId').textContent = userId || '无';
+  document.getElementById('displayToken').textContent = token ? '存在' : '不存在';
+  document.getElementById('displayLoginStatus').textContent = isLoggedIn ? '已登录' : '未登录';
+
+  const statusCard = document.getElementById('statusCard');
+  const statusTitle = document.getElementById('statusTitle');
+  const loginBtn = document.getElementById('loginBtn');
+  const logoutBtn = document.getElementById('logoutBtn');
+
+  if (isLoggedIn) {
+    statusCard.className = 'status-card';
+    statusTitle.textContent = '✅ 当前状态：已登录';
+    loginBtn.classList.add('hidden');
+    logoutBtn.classList.remove('hidden');
+  } else {
+    statusCard.className = 'status-card visitor';
+    statusTitle.textContent = '👤 当前状态：游客模式';
+    loginBtn.classList.remove('hidden');
+    logoutBtn.classList.add('hidden');
+  }
+}
+
+// 初始化 Chatwoot Widget
 window.chatwootSettings = {
  hideMessageBubble: false,
-  // showUnreadMessagesDialog: false,
-  // baseDomain: '.loca.lt',
  position: '<%= @widget_position %>',
  locale: 'zh_CN',
  useBrowserLanguage: false,
  type: '<%= @widget_type %>',
-  // showPopoutButton: true,
  widgetStyle: '<%= @widget_style %>',
  darkMode: '<%= @dark_mode %>',
 };

-// User ID for identification (simple string, not JWT token)
-const userId = '<%= user_id %>';
-
 (function(d,t) {
  var BASE_URL = '';
  var g=d.createElement(t),s=d.getElementsByTagName(t)[0];
@@ -44,10 +290,20 @@ const userId = '<%= user_id %>';
  g.async = true;
  s.parentNode.insertBefore(g,s);
  g.onload=function(){
-    // Get token from cookie (for custom attributes only)
-    const token = getCookie('token');
+    addLog('✅ Chatwoot SDK 加载完成');

-    // Initialize config with simple userId as userIdentifier
+    // 检查当前登录状态（仅用于显示）
+    const token = getCookie('token');
+    addLog('🔍 检查登录状态...');
+    addLog('  - Token 存在: ' + (token ? '是' : '否'));
+    addLog('  - userId (服务器): ' + ('<%= test_user_id %>' || '无'));
+
+    // 无论是否有 token，都以游客模式启动
+    // 用户信息通过点击登录按钮来设置
+    addLog('👤 游客模式启动（不做任何处理）');
+    hadUserIdentifier = false;
+
+    // 游客模式：不清除任何数据，保留现有会话
    const widgetConfig = {
      websiteToken: '<%= @web_widget.website_token %>',
      baseUrl: BASE_URL,
@@ -55,68 +311,220 @@ const userId = '<%= user_id %>';
      useBrowserLanguage: false
    };

-    // Add userIdentifier (use simple userId, not JWT token)
-    if (userId) {
-      widgetConfig.userIdentifier = userId;
-    }
+    addLog('📝 初始化 widgetConfig (游客模式):');
+    addLog('  - websiteToken: ' + widgetConfig.websiteToken);
+    addLog('  - userIdentifier: (未设置)');

    window.chatwootSDK.run(widgetConfig);
-
-    console.log('✅ Chatwoot Widget 已加载');
-    console.log('User ID:', userId);
-    console.log('Token from cookie:', token || 'Not set');
-
-    // Wait for widget to load, then set user attributes
-    setTimeout(function() {
-      if (userId && window.$chatwoot && window.$chatwoot.setUser) {
-        window.$chatwoot.setUser(userId, {
-          identifier_hash: '<%= user_hash %>',
-          email: 'user@example.com',
-          name: 'Token User',
-          phone_number: '',
-          custom_attributes: token ? {
-            jwt_token: token,
-            mall_token: token
-          } : {}
-        });
-        console.log('✅ 已通过 setUser 设置用户属性，userId:', userId);
-      } else if (token && window.$chatwoot && window.$chatwoot.setCustomAttributes) {
-        // Fallback: use setCustomAttributes
-        window.$chatwoot.setCustomAttributes({
-          jwt_token: token,
-          mall_token: token
-        });
-        console.log('✅ 已通过 setCustomAttributes 设置用户属性');
-      }
-    }, 1000);
-  }
+    addLog('✅ 游客模式已启动');
+    updateStatusDisplay();
+  };
 })(document,"script");

-window.addEventListener('chatwoot:ready', function() {
-  console.log('chatwoot:ready', window.$chatwoot);
-})
+// 模拟用户登录
+function simulateLogin() {
+  addLog('🔐 开始模拟用户登录...');

-window.addEventListener('chatwoot:error', function(e) {
-  console.log('chatwoot:error', e.detail)
+  // 设置 token cookie
+  setCookie('token', TEST_TOKEN);
+
+  // 验证 token 是否设置成功
+  const tokenCheck = getCookie('token');
+  if (tokenCheck) {
+    addLog('✅ Token 已设置到 cookie');
+
+    // 设置当前用户状态
+    isLoggedIn = true;
+    currentUser = TEST_USER;
+
+    addLog('🔄 使用 reset() 清除之前的聊天内容...');
+    if (window.$chatwoot && window.$chatwoot.reset) {
+      window.$chatwoot.reset();
+      addLog('✅ 已清除聊天内容和会话数据');
+    } else {
+      addLog('⚠️ Chatwoot reset() 方法不可用');
+    }
+
+    // 等待 reset 完成后设置用户信息
+    setTimeout(function() {
+      addLog('👤 设置用户信息...');
+      if (window.$chatwoot && window.$chatwoot.setUser) {
+        window.$chatwoot.setUser(currentUser.userId, {
+          identifier_hash: currentUser.userHash,
+          email: currentUser.email,
+          name: currentUser.name,
+          phone_number: '',
+          custom_attributes: {
+            jwt_token: tokenCheck,
+            mall_token: tokenCheck,
+            login_status: 'logged_in'
+          }
+        });
+        addLog('✅ 用户信息已设置: ' + currentUser.name);
+        addLog('✅ 登录成功（无需刷新页面）');
+      } else {
+        addLog('⚠️ window.$chatwoot 未就绪');
+      }
+      updateStatusDisplay();
+    }, 500);
+  } else {
+    addLog('❌ Token 设置失败');
+  }
+}
+
+// 模拟用户退出
+function simulateLogout() {
+  addLog('🚪 开始模拟用户退出...');
+
+  // 删除 token cookie
+  deleteCookie('token');
+  isLoggedIn = false;
+  currentUser = null;
+
+  addLog('✅ Token 已从 cookie 删除');
+
+  // 使用 Chatwoot 官方的 reset() 方法清除用户和会话数据
+  if (window.$chatwoot && window.$chatwoot.reset) {
+    window.$chatwoot.reset();
+    addLog('✅ 已调用 Chatwoot reset() - 清除用户和会话数据');
+  } else {
+    addLog('⚠️ Chatwoot reset() 方法不可用');
+  }
+
+  // 清除 localStorage 缓存
+  try {
+    const keysToRemove = [];
+    for (let i = 0; i < localStorage.length; i++) {
+      const key = localStorage.key(i);
+      if (key && (key.includes('chatwoot') || key.includes('cw_') || key.includes('widget'))) {
+        keysToRemove.push(key);
+      }
+    }
+    keysToRemove.forEach(key => localStorage.removeItem(key));
+    addLog('🧹 已清除 ' + keysToRemove.length + ' 个 localStorage 缓存项');
+  } catch (e) {
+    addLog('⚠️ 清除缓存时出错: ' + e.message);
+  }
+
+  addLog('⏳ 即将刷新页面以完成退出...');
+
+  // 显示刷新倒计时
+  document.getElementById('refreshNotice').classList.remove('hidden');
+  document.getElementById('cancelRefreshBtn').classList.remove('hidden');
+  document.getElementById('countdown').textContent = '2';
+
+  let countdown = 2;
+  countdownTimer = setInterval(() => {
+    countdown--;
+    document.getElementById('countdown').textContent = countdown;
+    if (countdown <= 0) {
+      clearInterval(countdownTimer);
+      addLog('🔄 正在刷新页面...');
+      location.reload();
+    }
+  }, 1000);
+
+  refreshTimer = setTimeout(() => {
+    location.reload();
+  }, 2000);
+}
+
+// 取消刷新
+function cancelRefresh() {
+  if (refreshTimer) {
+    clearTimeout(refreshTimer);
+    refreshTimer = null;
+  }
+  if (countdownTimer) {
+    clearInterval(countdownTimer);
+    countdownTimer = null;
+  }
+
+  document.getElementById('refreshNotice').classList.add('hidden');
+  document.getElementById('cancelRefreshBtn').classList.add('hidden');
+
+  addLog('✅ 已取消自动刷新');
+  addLog('⚠️ 注意：Chatwoot Widget 仍保持登录状态，需要手动刷新页面才能完全恢复游客模式');
+}
+
+// 清除所有数据（包括会话）
+function clearAllData() {
+  addLog('🗑️ 开始清除所有数据...');
+
+  // 使用 Chatwoot reset() 方法清除会话
+  if (window.$chatwoot && window.$chatwoot.reset) {
+    window.$chatwoot.reset();
+    addLog('✅ 已调用 Chatwoot reset() - 清除会话和用户数据');
+  }
+
+  // 删除 token cookie
+  deleteCookie('token');
+  addLog('✅ Token 已删除');
+
+  // 清除 localStorage
+  try {
+    const keysToRemove = [];
+    for (let i = 0; i < localStorage.length; i++) {
+      const key = localStorage.key(i);
+      if (key && (key.includes('chatwoot') || key.includes('cw_') || key.includes('widget'))) {
+        keysToRemove.push(key);
+      }
+    }
+    keysToRemove.forEach(key => localStorage.removeItem(key));
+    addLog('🧹 已清除 ' + keysToRemove.length + ' 个 localStorage 项');
+  } catch (e) {
+    addLog('⚠️ 清除 localStorage 时出错: ' + e.message);
+  }
+
+  isLoggedIn = false;
+  currentUser = null;
+  hadUserIdentifier = false;
+
+  updateStatusDisplay();
+  addLog('✅ 所有数据已清除');
+
+  // 刷新页面
+  addLog('⏳ 即将刷新页面...');
+  setTimeout(() => {
+    location.reload();
+  }, 500);
+}
+
+// 刷新页面
+function refreshPage() {
+  addLog('🔄 正在刷新页面...');
+  setTimeout(() => {
+    location.reload();
+  }, 500);
+}
+
+// 打开聊天窗口
+function openWidget() {
+  if (window.$chatwoot && window.$chatwoot.toggle) {
+    window.$chatwoot.toggle('open');
+    addLog('💬 聊天窗口已打开');
+  } else {
+    addLog('⚠️ Chatwoot 未就绪');
+  }
+}
+
+// 事件监听
+window.addEventListener('chatwoot:ready', function() {
+  addLog('✅ Chatwoot Widget 已就绪');
 })

 window.addEventListener('chatwoot:on-message', function(e) {
-  console.log('chatwoot:on-message', e.detail)
-})
-
-window.addEventListener('chatwoot:postback', function(e) {
-  console.log('chatwoot:postback', e.detail)
+  addLog('📨 收到消息');
 })

 window.addEventListener('chatwoot:opened', function() {
-  console.log('chatwoot:opened')
+  addLog('🔓 Widget 已打开');
 })

 window.addEventListener('chatwoot:closed', function() {
-  console.log('chatwoot:closed')
+  addLog('🔒 Widget 已关闭');
 })

-window.addEventListener('chatwoot:on-start-conversation', function(e) {
-  console.log('chatwoot:on-start-conversation', e.detail)
-})
+// 初始化
+addLog('🚀 测试页面已加载');
 </script>
--- a/app/views/widgets/show.html.erb
+++ b/app/views/widgets/show.html.erb
@@ -28,6 +28,7 @@
        timezone: '<%= @web_widget.inbox.timezone %>',
        allowMessagesAfterResolved: <%= @web_widget.inbox.allow_messages_after_resolved %>,
        disableBranding: <%= @web_widget.inbox.account.feature_enabled?('disable_branding') %>,
+        mallUrl: '<%= ENV.fetch('MALL_URL', 'https://apicn.qa1.gaia888.com') %>',
      }
      window.chatwootPubsubToken = '<%= @contact_inbox.pubsub_token %>'
      window.authToken = '<%= @token %>'