tgo-widget-miniprogram 1.0.0

package/README.md

@@ -0,0 +1,81 @@
+# tgo-widget-miniprogram
+
+TGO 访客聊天微信小程序组件。开发者 3 步完成接入。
+
+## 快速接入
+
+### 1. 安装
+
+```bash
+npm install tgo-widget-miniprogram
+```
+
+在微信开发者工具中点击 **工具 → 构建 npm**。
+
+### 2. 页面配置
+
+```json
+// pages/chat/chat.json
+{
+  "usingComponents": {
+    "tgo-chat": "tgo-widget-miniprogram/chat/index"
+  },
+  "navigationBarTitleText": "在线客服"
+}
+```
+
+### 3. 使用组件
+
+```xml
+<!-- pages/chat/chat.wxml -->
+<tgo-chat api-key="ak_live_xxx" api-base="https://your-api.com" />
+```
+
+### 跳转到客服页
+
+```js
+wx.navigateTo({ url: '/pages/chat/chat' })
+```
+
+## 域名白名单
+
+在小程序管理后台配置以下域名：
+
+| 类型 | 域名 |
+|------|------|
+| request 合法域名 | API 服务域名 |
+| socket 合法域名 | WuKongIM WSS 域名 |
+| uploadFile 合法域名 | API 服务域名 |
+| downloadFile 合法域名 | API 服务域名 |
+
+## 组件属性
+
+| 属性 | 类型 | 必填 | 默认值 | 说明 |
+|------|------|------|--------|------|
+| `api-key` | String | 是 | — | 平台 API Key |
+| `api-base` | String | 是 | — | API 服务地址 |
+| `theme-color` | String | 否 | `#2f80ed` | 主题色 |
+| `lang` | String | 否 | `zh` | 语言（zh/en） |
+| `visitor-name` | String | 否 | — | 访客名称 |
+| `visitor-avatar` | String | 否 | — | 访客头像 URL |
+| `custom-attrs` | Object | 否 | — | 自定义访客属性 |
+
+## 功能支持
+
+- 文本消息收发
+- AI 流式回复（实时逐字显示）
+- 图片消息发送与预览
+- 历史消息加载（上拉加载更多）
+- 系统消息展示（客服接入/转接/结束）
+- Markdown 渲染（加粗、斜体、链接、列表、代码块）
+- 多语言支持（中文/英文）
+- IM 断线自动重连
+
+## 开发
+
+```bash
+# 构建 miniprogram_dist
+npm run build
+```
+
+构建产物位于 `miniprogram_dist/`，微信开发者工具通过 `package.json` 的 `miniprogram` 字段读取此目录。

package/miniprogram_dist/adapters/request.js

@@ -0,0 +1,38 @@
+/**
+ * wx.request Promise adapter (replaces fetch)
+ *
+ * Returns: { ok, status, statusText, data, json(), text(), headers }
+ */
+function request({ url, method, headers, body, timeout }) {
+  return new Promise(function (resolve, reject) {
+    wx.request({
+      url: url,
+      method: (method || 'GET').toUpperCase(),
+      header: headers || {},
+      data: body,
+      timeout: timeout || 15000,
+      dataType: 'json',
+      success: function (res) {
+        var ok = res.statusCode >= 200 && res.statusCode < 300
+        resolve({
+          ok: ok,
+          status: res.statusCode,
+          statusText: ok ? 'OK' : 'Error',
+          data: res.data,
+          headers: res.header || {},
+          json: function () { return Promise.resolve(res.data) },
+          text: function () {
+            return Promise.resolve(
+              typeof res.data === 'string' ? res.data : JSON.stringify(res.data)
+            )
+          }
+        })
+      },
+      fail: function (err) {
+        reject(new Error('[request] ' + (err.errMsg || 'network error')))
+      }
+    })
+  })
+}
+
+module.exports = { request }

package/miniprogram_dist/adapters/storage.js

@@ -0,0 +1,42 @@
+/**
+ * wx storage adapter (replaces localStorage)
+ * Supports optional TTL expiry, same format as Web version.
+ */
+
+function setJSON(key, value, ttlMs) {
+  var rec = { v: value }
+  if (ttlMs && ttlMs > 0) {
+    rec.e = Date.now() + ttlMs
+  }
+  try {
+    wx.setStorageSync(key, JSON.stringify(rec))
+  } catch (e) {
+    console.warn('[storage] setJSON failed:', key, e)
+  }
+}
+
+function getJSON(key) {
+  try {
+    var raw = wx.getStorageSync(key)
+    if (!raw) return null
+    var rec = JSON.parse(raw)
+    if (rec && typeof rec === 'object') {
+      if (rec.e && Date.now() > rec.e) {
+        wx.removeStorageSync(key)
+        return null
+      }
+      return rec.v
+    }
+  } catch (e) {
+    try { wx.removeStorageSync(key) } catch (_) {}
+  }
+  return null
+}
+
+function remove(key) {
+  try {
+    wx.removeStorageSync(key)
+  } catch (e) {}
+}
+
+module.exports = { setJSON: setJSON, getJSON: getJSON, remove: remove }

package/miniprogram_dist/adapters/systemInfo.js

@@ -0,0 +1,22 @@
+/**
+ * wx system info adapter (replaces navigator.userAgent)
+ */
+
+function collectSystemInfo() {
+  try {
+    var info = wx.getSystemInfoSync()
+    return {
+      browser: 'WeChat MiniProgram',
+      operating_system: (info.platform || '') + ' ' + (info.system || ''),
+      source_detail: 'WeChat ' + (info.version || '') + ', SDK ' + (info.SDKVersion || '')
+    }
+  } catch (e) {
+    return {
+      browser: 'WeChat MiniProgram',
+      operating_system: '',
+      source_detail: ''
+    }
+  }
+}
+
+module.exports = { collectSystemInfo: collectSystemInfo }

package/miniprogram_dist/chat/index.js

@@ -0,0 +1,164 @@
+/**
+ * <tgo-chat> main component
+ *
+ * Usage:
+ *   <tgo-chat api-key="ak_live_xxx" api-base="https://your-api.com" />
+ */
+var chatStore = require('../core/chatStore')
+var platformStore = require('../core/platformStore')
+var i18n = require('../core/i18n')
+
+Component({
+  options: {
+    multipleSlots: true
+  },
+
+  properties: {
+    apiKey: {
+      type: String,
+      value: ''
+    },
+    apiBase: {
+      type: String,
+      value: ''
+    },
+    themeColor: {
+      type: String,
+      value: ''
+    },
+    lang: {
+      type: String,
+      value: 'zh'
+    },
+    visitorName: {
+      type: String,
+      value: ''
+    },
+    visitorAvatar: {
+      type: String,
+      value: ''
+    },
+    customAttrs: {
+      type: Object,
+      value: null
+    }
+  },
+
+  data: {
+    messages: [],
+    isStreaming: false,
+    streamCanceling: false,
+    online: false,
+    historyLoading: false,
+    historyHasMore: true,
+    initializing: false,
+    error: null,
+    resolvedThemeColor: '#2f80ed',
+    title: 'Tgo',
+    logoUrl: ''
+  },
+
+  lifetimes: {
+    attached: function () {
+      // Set i18n language
+      i18n.setLang(this.properties.lang)
+
+      // Subscribe to stores
+      this._bindStores()
+
+      // Initialize
+      this._init()
+    },
+
+    detached: function () {
+      if (this._unsubChat) { this._unsubChat(); this._unsubChat = null }
+      if (this._unsubPlatform) { this._unsubPlatform(); this._unsubPlatform = null }
+      chatStore.disconnect()
+    }
+  },
+
+  methods: {
+    _bindStores: function () {
+      var self = this
+
+      // Subscribe to chat store
+      this._unsubChat = chatStore.subscribe(function (state) {
+        self.setData({
+          messages: state.messages,
+          isStreaming: state.isStreaming,
+          streamCanceling: state.streamCanceling,
+          online: state.online,
+          historyLoading: state.historyLoading,
+          historyHasMore: state.historyHasMore,
+          initializing: state.initializing,
+          error: state.error
+        })
+      })
+
+      // Subscribe to platform store
+      this._unsubPlatform = platformStore.subscribe(function (state) {
+        var cfg = state.config || {}
+        self.setData({
+          title: cfg.widget_title || 'Tgo',
+          logoUrl: cfg.logo_url || '',
+          resolvedThemeColor: self.properties.themeColor || cfg.theme_color || '#2f80ed'
+        })
+
+        // Inject welcome message
+        if (cfg.welcome_message && !state.welcomeInjected) {
+          chatStore.ensureWelcomeMessage(cfg.welcome_message)
+          platformStore.markWelcomeInjected()
+        }
+      })
+    },
+
+    _init: function () {
+      var apiBase = this.properties.apiBase
+      var apiKey = this.properties.apiKey
+
+      if (!apiBase || !apiKey) {
+        console.error('[tgo-chat] api-base and api-key are required')
+        return
+      }
+
+      // Init platform config
+      platformStore.init(apiBase, apiKey)
+
+      // Set resolved theme color
+      this.setData({
+        resolvedThemeColor: this.properties.themeColor || '#2f80ed'
+      })
+
+      // Init chat IM
+      chatStore.initIM({
+        apiBase: apiBase,
+        platformApiKey: apiKey
+      })
+    },
+
+    // Event handlers from child components
+    onSendMessage: function (e) {
+      var text = e.detail && e.detail.text
+      if (text) {
+        chatStore.sendMessage(text)
+      }
+    },
+
+    onCancelStream: function () {
+      chatStore.cancelStreaming('user_cancel')
+    },
+
+    onLoadMore: function () {
+      if (!chatStore.getState().historyLoading && chatStore.getState().historyHasMore) {
+        chatStore.loadMoreHistory(20)
+      }
+    },
+
+    onChooseImage: function (e) {
+      var tempFilePath = e.detail && e.detail.tempFilePath
+      if (tempFilePath) {
+        chatStore.uploadImage(tempFilePath)
+      }
+    }
+  }
+})

package/miniprogram_dist/chat/index.json

@@ -0,0 +1,7 @@
+{
+  "component": true,
+  "usingComponents": {
+    "message-list": "../components/message-list/index",
+    "message-input": "../components/message-input/index"
+  }
+}

package/miniprogram_dist/chat/index.wxml

@@ -0,0 +1,48 @@
+<view class="tgo-chat">
+  <!-- Header -->
+  <view class="chat-header" style="background-color: {{resolvedThemeColor}};">
+    <image wx:if="{{logoUrl}}" class="header-logo" src="{{logoUrl}}" mode="aspectFit" />
+    <text class="header-title">{{title}}</text>
+    <view wx:if="{{online}}" class="status-dot online"></view>
+    <view wx:else class="status-dot offline"></view>
+  </view>
+
+  <!-- Initializing state -->
+  <view wx:if="{{initializing}}" class="init-loading">
+    <text class="init-text">连接中...</text>
+  </view>
+
+  <!-- Error state -->
+  <view wx:elif="{{error && !messages.length}}" class="init-error">
+    <text class="error-text">{{error}}</text>
+    <view class="retry-btn" bindtap="_init">
+      <text class="retry-text">重试</text>
+    </view>
+  </view>
+
+  <!-- Chat body -->
+  <view wx:else class="chat-body">
+    <message-list
+      messages="{{messages}}"
+      historyLoading="{{historyLoading}}"
+      historyHasMore="{{historyHasMore}}"
+      isStreaming="{{isStreaming}}"
+      themeColor="{{resolvedThemeColor}}"
+      bind:loadmore="onLoadMore"
+      bind:sendmessage="onSendMessage"
+    />
+  </view>
+
+  <!-- Input bar -->
+  <view class="chat-footer">
+    <message-input
+      isStreaming="{{isStreaming}}"
+      streamCanceling="{{streamCanceling}}"
+      themeColor="{{resolvedThemeColor}}"
+      disabled="{{initializing}}"
+      bind:send="onSendMessage"
+      bind:cancel="onCancelStream"
+      bind:image="onChooseImage"
+    />
+  </view>
+</view>

package/miniprogram_dist/chat/index.wxss

@@ -0,0 +1,92 @@
+.tgo-chat {
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+  background: #fff;
+}
+
+/* Header */
+.chat-header {
+  display: flex;
+  align-items: center;
+  padding: 0 24rpx;
+  height: 88rpx;
+  flex-shrink: 0;
+}
+
+.header-logo {
+  width: 48rpx;
+  height: 48rpx;
+  border-radius: 8rpx;
+  margin-right: 12rpx;
+}
+
+.header-title {
+  font-size: 32rpx;
+  color: #fff;
+  font-weight: 600;
+  flex: 1;
+}
+
+.status-dot {
+  width: 16rpx;
+  height: 16rpx;
+  border-radius: 50%;
+  margin-left: 12rpx;
+}
+
+.status-dot.online {
+  background: #4cd964;
+  box-shadow: 0 0 4rpx rgba(76, 217, 100, 0.6);
+}
+
+.status-dot.offline {
+  background: #ccc;
+}
+
+/* Loading / Error states */
+.init-loading,
+.init-error {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+
+.init-text {
+  font-size: 28rpx;
+  color: #999;
+}
+
+.error-text {
+  font-size: 26rpx;
+  color: #e74c3c;
+  text-align: center;
+  padding: 0 40rpx;
+  margin-bottom: 24rpx;
+}
+
+.retry-btn {
+  padding: 12rpx 48rpx;
+  background: #f0f0f0;
+  border-radius: 32rpx;
+}
+
+.retry-text {
+  font-size: 28rpx;
+  color: #333;
+}
+
+/* Chat body */
+.chat-body {
+  flex: 1;
+  overflow: hidden;
+}
+
+/* Footer */
+.chat-footer {
+  flex-shrink: 0;
+  padding-bottom: env(safe-area-inset-bottom);
+  background: #fff;
+}