tgo-widget-miniprogram 1.0.0

package/miniprogram_dist/components/json-render-surface/index.wxml

@@ -0,0 +1,10 @@
+<view wx:if="{{hasRoot}}" class="json-render-surface">
+  <json-render-element
+    elementKey="{{spec.root}}"
+    spec="{{spec}}"
+    stateSnapshot="{{stateSnapshot}}"
+    depth="{{0}}"
+    bind:action="onAction"
+    bind:statechange="onStateChange"
+  />
+</view>

package/miniprogram_dist/components/json-render-surface/index.wxss

@@ -0,0 +1,6 @@
+.json-render-surface {
+  display: flex;
+  flex-direction: column;
+  gap: 12rpx;
+  margin-top: 8rpx;
+}

package/miniprogram_dist/components/markdown-text/index.js

@@ -0,0 +1,23 @@
+var markdown = require('../../utils/markdown')
+
+Component({
+  properties: {
+    content: {
+      type: String,
+      value: '',
+      observer: function (val) {
+        this.setData({ html: markdown.parseMarkdown(val) })
+      }
+    }
+  },
+  data: {
+    html: ''
+  },
+  lifetimes: {
+    attached: function () {
+      if (this.properties.content) {
+        this.setData({ html: markdown.parseMarkdown(this.properties.content) })
+      }
+    }
+  }
+})

package/miniprogram_dist/components/markdown-text/index.json

@@ -0,0 +1,3 @@
+{
+  "component": true
+}

package/miniprogram_dist/components/markdown-text/index.wxml

@@ -0,0 +1 @@
+<rich-text class="markdown-text" nodes="{{html}}" />

package/miniprogram_dist/components/markdown-text/index.wxss

@@ -0,0 +1,6 @@
+.markdown-text {
+  font-size: 28rpx;
+  line-height: 1.6;
+  color: #333;
+  word-break: break-word;
+}

package/miniprogram_dist/components/message-bubble/index.js

@@ -0,0 +1,12 @@
+Component({
+  properties: {
+    self: {
+      type: Boolean,
+      value: false
+    },
+    themeColor: {
+      type: String,
+      value: '#2f80ed'
+    }
+  }
+})

package/miniprogram_dist/components/message-bubble/index.json

@@ -0,0 +1,3 @@
+{
+  "component": true
+}

package/miniprogram_dist/components/message-bubble/index.wxml

@@ -0,0 +1,3 @@
+<view class="bubble {{self ? 'bubble-self' : 'bubble-agent'}}" style="{{self ? 'background-color:' + themeColor + ';' : ''}}">
+  <slot />
+</view>

package/miniprogram_dist/components/message-bubble/index.wxss

@@ -0,0 +1,17 @@
+.bubble {
+  max-width: 80%;
+  padding: 20rpx 24rpx;
+  border-radius: 16rpx;
+  word-break: break-word;
+}
+
+.bubble-self {
+  color: #fff;
+  border-bottom-right-radius: 4rpx;
+}
+
+.bubble-agent {
+  background-color: #f5f5f5;
+  color: #333;
+  border-bottom-left-radius: 4rpx;
+}

package/miniprogram_dist/components/message-input/index.js

@@ -0,0 +1,76 @@
+var i18n = require('../../core/i18n')
+
+Component({
+  properties: {
+    isStreaming: {
+      type: Boolean,
+      value: false
+    },
+    streamCanceling: {
+      type: Boolean,
+      value: false
+    },
+    themeColor: {
+      type: String,
+      value: '#2f80ed'
+    },
+    disabled: {
+      type: Boolean,
+      value: false
+    }
+  },
+  data: {
+    inputValue: '',
+    sendLabel: '',
+    interruptLabel: '',
+    placeholder: ''
+  },
+  lifetimes: {
+    attached: function () {
+      this.setData({
+        sendLabel: i18n.t('messageInput.send'),
+        interruptLabel: i18n.t('messageInput.interrupt'),
+        placeholder: i18n.t('messageInput.placeholder')
+      })
+    }
+  },
+  methods: {
+    onInput: function (e) {
+      this.setData({ inputValue: e.detail.value })
+    },
+
+    onConfirm: function () {
+      this._doSend()
+    },
+
+    onTapSend: function () {
+      if (this.properties.isStreaming) {
+        this.triggerEvent('cancel')
+      } else {
+        this._doSend()
+      }
+    },
+
+    _doSend: function () {
+      var text = (this.data.inputValue || '').trim()
+      if (!text) return
+      this.setData({ inputValue: '' })
+      this.triggerEvent('send', { text: text })
+    },
+
+    onChooseImage: function () {
+      var self = this
+      wx.chooseMedia({
+        count: 1,
+        mediaType: ['image'],
+        sourceType: ['album', 'camera'],
+        success: function (res) {
+          var file = res.tempFiles && res.tempFiles[0]
+          if (file) {
+            self.triggerEvent('image', { tempFilePath: file.tempFilePath })
+          }
+        }
+      })
+    }
+  }
+})

package/miniprogram_dist/components/message-input/index.json

@@ -0,0 +1,3 @@
+{
+  "component": true
+}

package/miniprogram_dist/components/message-input/index.wxml

@@ -0,0 +1,28 @@
+<view class="input-bar">
+  <!-- Image picker button -->
+  <view class="btn-icon" bindtap="onChooseImage">
+    <text class="icon-text">+</text>
+  </view>
+
+  <!-- Text input -->
+  <input
+    class="text-input"
+    value="{{inputValue}}"
+    placeholder="{{placeholder}}"
+    confirm-type="send"
+    bindinput="onInput"
+    bindconfirm="onConfirm"
+    disabled="{{disabled}}"
+    adjust-position="{{true}}"
+    cursor-spacing="16"
+  />
+
+  <!-- Send / Stop button -->
+  <view
+    class="btn-send {{isStreaming ? 'btn-stop' : ''}}"
+    style="background-color: {{themeColor}};"
+    bindtap="onTapSend"
+  >
+    <text class="btn-send-text">{{isStreaming ? interruptLabel : sendLabel}}</text>
+  </view>
+</view>

package/miniprogram_dist/components/message-input/index.wxss

@@ -0,0 +1,56 @@
+.input-bar {
+  display: flex;
+  align-items: center;
+  padding: 16rpx 20rpx;
+  background: #fff;
+  border-top: 1rpx solid #eee;
+}
+
+.btn-icon {
+  width: 64rpx;
+  height: 64rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+  background: #f0f0f0;
+  margin-right: 12rpx;
+  flex-shrink: 0;
+}
+
+.icon-text {
+  font-size: 36rpx;
+  color: #666;
+  font-weight: bold;
+}
+
+.text-input {
+  flex: 1;
+  height: 72rpx;
+  padding: 0 20rpx;
+  font-size: 28rpx;
+  background: #f5f5f5;
+  border-radius: 36rpx;
+  color: #333;
+}
+
+.btn-send {
+  margin-left: 12rpx;
+  padding: 0 28rpx;
+  height: 64rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 32rpx;
+  flex-shrink: 0;
+}
+
+.btn-send.btn-stop {
+  background-color: #e74c3c !important;
+}
+
+.btn-send-text {
+  font-size: 26rpx;
+  color: #fff;
+  white-space: nowrap;
+}

package/miniprogram_dist/components/message-list/index.js

@@ -0,0 +1,113 @@
+var types = require('../../core/types')
+var timeUtil = require('../../utils/time')
+
+Component({
+  properties: {
+    messages: {
+      type: Array,
+      value: [],
+      observer: function (newVal) {
+        this._processMessages(newVal)
+      }
+    },
+    historyLoading: {
+      type: Boolean,
+      value: false
+    },
+    historyHasMore: {
+      type: Boolean,
+      value: true
+    },
+    isStreaming: {
+      type: Boolean,
+      value: false
+    },
+    themeColor: {
+      type: String,
+      value: '#2f80ed'
+    }
+  },
+
+  data: {
+    displayMessages: [],
+    scrollTop: 0,
+    scrollAnimated: true,
+    _prevLen: 0,
+    _scrollCounter: 0
+  },
+
+  lifetimes: {
+    attached: function () {
+      if (this.properties.messages.length) {
+        this._processMessages(this.properties.messages)
+      }
+    }
+  },
+
+  methods: {
+    _processMessages: function (messages) {
+      var prevLen = this.data._prevLen
+      var list = (messages || []).map(function (m) {
+        var isSystem = m.payload && types.isSystemMessageType(m.payload.type)
+        var hasUiParts = Array.isArray(m.uiParts) && m.uiParts.length > 0
+        return {
+          id: m.id,
+          role: m.role,
+          payload: m.payload,
+          streamData: m.streamData,
+          errorMessage: m.errorMessage,
+          status: m.status,
+          uploadProgress: m.uploadProgress,
+          isSystem: isSystem,
+          isSelf: m.role === 'user',
+          _time: m.time ? timeUtil.formatMessageTime(m.time) : '',
+          uiParts: hasUiParts ? m.uiParts : null,
+          hasUiParts: hasUiParts
+        }
+      })
+
+      var shouldScroll = false
+      if (list.length > prevLen) {
+        shouldScroll = true
+      } else if (list.length > 0) {
+        var last = list[list.length - 1]
+        if (last.streamData) {
+          shouldScroll = true
+        }
+      }
+
+      var setObj = {
+        displayMessages: list,
+        _prevLen: list.length
+      }
+
+      if (shouldScroll && list.length > 0) {
+        // Toggle between two large values to force scroll-top re-trigger
+        var c = this.data._scrollCounter + 1
+        setObj.scrollTop = 999999 + (c % 2)
+        setObj._scrollCounter = c
+        setObj.scrollAnimated = !last || !last.streamData
+      }
+
+      this.setData(setObj)
+    },
+
+    onScrollToUpper: function () {
+      this.triggerEvent('loadmore')
+    },
+
+    onTapImage: function (e) {
+      var url = e.currentTarget.dataset.url
+      if (url) {
+        wx.previewImage({
+          current: url,
+          urls: [url]
+        })
+      }
+    },
+
+    onJsonRenderSend: function (e) {
+      this.triggerEvent('sendmessage', e.detail)
+    }
+  }
+})

package/miniprogram_dist/components/message-list/index.json

@@ -0,0 +1,9 @@
+{
+  "component": true,
+  "usingComponents": {
+    "message-bubble": "../message-bubble/index",
+    "markdown-text": "../markdown-text/index",
+    "system-message": "../system-message/index",
+    "json-render-message": "../json-render-message/index"
+  }
+}

package/miniprogram_dist/components/message-list/index.wxml

@@ -0,0 +1,108 @@
+<scroll-view
+  class="msg-list"
+  scroll-y
+  scroll-top="{{scrollTop}}"
+  scroll-with-animation="{{scrollAnimated}}"
+  upper-threshold="80"
+  bindscrolltoupper="onScrollToUpper"
+>
+  <!-- Loading indicator -->
+  <view wx:if="{{historyLoading}}" class="status-row">
+    <text class="status-text">加载中...</text>
+  </view>
+  <view wx:elif="{{!historyHasMore}}" class="status-row">
+    <text class="status-text-muted">没有更多消息</text>
+  </view>
+
+  <!-- Message rows -->
+  <view
+    wx:for="{{displayMessages}}"
+    wx:key="id"
+    id="msg-{{item.id}}"
+    class="msg-row"
+  >
+    <!-- System message -->
+    <system-message
+      wx:if="{{item.isSystem}}"
+      content="{{item.payload.content}}"
+    />
+
+    <!-- Regular message -->
+    <view wx:else class="msg-inner {{item.isSelf ? 'msg-self' : 'msg-agent'}}">
+
+      <!-- Image message -->
+      <view
+        wx:if="{{item.payload.type === 2}}"
+        class="msg-image-wrap"
+        bindtap="onTapImage"
+        data-url="{{item.payload.url}}"
+      >
+        <image
+          src="{{item.payload.url}}"
+          mode="widthFix"
+          class="msg-image"
+          lazy-load
+        />
+      </view>
+
+      <!-- JSON Render message -->
+      <block wx:elif="{{item.hasUiParts}}">
+        <message-bubble self="{{item.isSelf}}" themeColor="{{themeColor}}">
+          <json-render-message
+            uiParts="{{item.uiParts}}"
+            payloadContent="{{item.payload.content || ''}}"
+            showCursor="{{!!item.streamData}}"
+            themeColor="{{themeColor}}"
+            bind:sendmessage="onJsonRenderSend"
+          />
+        </message-bubble>
+      </block>
+
+      <!-- Text / streaming / loading / error -->
+      <block wx:else>
+        <message-bubble self="{{item.isSelf}}" themeColor="{{themeColor}}">
+
+          <!-- AI Loading (type 100) -->
+          <view wx:if="{{item.payload.type === 100 && !item.streamData}}" class="loading-dots">
+            <view class="dot dot1"></view>
+            <view class="dot dot2"></view>
+            <view class="dot dot3"></view>
+          </view>
+
+          <!-- Error -->
+          <view wx:elif="{{item.errorMessage}}" class="error-text">
+            <text>{{item.errorMessage}}</text>
+          </view>
+
+          <!-- Streaming content -->
+          <block wx:elif="{{item.streamData}}">
+            <markdown-text content="{{item.streamData}}" />
+            <view class="cursor"></view>
+          </block>
+
+          <!-- Normal text -->
+          <block wx:elif="{{item.payload.type === 1}}">
+            <markdown-text content="{{item.payload.content}}" />
+          </block>
+
+          <!-- Fallback -->
+          <block wx:else>
+            <text>{{item.payload.content || ''}}</text>
+          </block>
+
+        </message-bubble>
+      </block>
+
+      <!-- Status indicators -->
+      <view wx:if="{{item.status === 'sending'}}" class="msg-status">
+        <text class="status-text-small">发送中...</text>
+      </view>
+      <view wx:elif="{{item.status === 'uploading'}}" class="msg-status">
+        <text class="status-text-small">上传中 {{item.uploadProgress || 0}}%</text>
+      </view>
+
+      <!-- Time label -->
+      <text wx:if="{{item._time}}" class="time-label">{{item._time}}</text>
+    </view>
+  </view>
+</scroll-view>

package/miniprogram_dist/components/message-list/index.wxss

@@ -0,0 +1,113 @@
+.msg-list {
+  height: 100%;
+  padding: 16rpx 0;
+  box-sizing: border-box;
+}
+
+.status-row {
+  display: flex;
+  justify-content: center;
+  padding: 16rpx;
+}
+
+.status-text {
+  font-size: 24rpx;
+  color: #666;
+}
+
+.status-text-muted {
+  font-size: 24rpx;
+  color: #ccc;
+}
+
+.msg-row {
+  padding: 8rpx 24rpx;
+}
+
+.msg-inner {
+  display: flex;
+  flex-direction: column;
+}
+
+.msg-self {
+  align-items: flex-end;
+}
+
+.msg-agent {
+  align-items: flex-start;
+}
+
+.msg-image-wrap {
+  max-width: 60%;
+  border-radius: 16rpx;
+  overflow: hidden;
+}
+
+.msg-image {
+  width: 100%;
+  display: block;
+}
+
+/* Loading dots animation */
+.loading-dots {
+  display: flex;
+  align-items: center;
+  gap: 8rpx;
+  padding: 8rpx 0;
+}
+
+.dot {
+  width: 12rpx;
+  height: 12rpx;
+  border-radius: 50%;
+  background-color: #999;
+  animation: dotBounce 1.4s infinite ease-in-out both;
+}
+
+.dot1 { animation-delay: -0.32s; }
+.dot2 { animation-delay: -0.16s; }
+.dot3 { animation-delay: 0s; }
+
+@keyframes dotBounce {
+  0%, 80%, 100% { transform: scale(0.6); opacity: 0.4; }
+  40% { transform: scale(1); opacity: 1; }
+}
+
+/* Streaming cursor */
+.cursor {
+  display: inline-block;
+  width: 4rpx;
+  height: 28rpx;
+  background: #333;
+  margin-left: 4rpx;
+  animation: blink 1s step-end infinite;
+  vertical-align: text-bottom;
+}
+
+@keyframes blink {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0; }
+}
+
+/* Error text */
+.error-text {
+  color: #e74c3c;
+  font-size: 26rpx;
+}
+
+/* Status */
+.msg-status {
+  margin-top: 4rpx;
+}
+
+.status-text-small {
+  font-size: 22rpx;
+  color: #999;
+}
+
+/* Time label */
+.time-label {
+  font-size: 20rpx;
+  color: #bbb;
+  margin-top: 4rpx;
+}

package/miniprogram_dist/components/system-message/index.js

@@ -0,0 +1,8 @@
+Component({
+  properties: {
+    content: {
+      type: String,
+      value: ''
+    }
+  }
+})

package/miniprogram_dist/components/system-message/index.json

@@ -0,0 +1,3 @@
+{
+  "component": true
+}

package/miniprogram_dist/components/system-message/index.wxml

@@ -0,0 +1,3 @@
+<view class="system-message">
+  <text class="system-text">{{content}}</text>
+</view>

package/miniprogram_dist/components/system-message/index.wxss

@@ -0,0 +1,15 @@
+.system-message {
+  display: flex;
+  justify-content: center;
+  padding: 16rpx 32rpx;
+}
+
+.system-text {
+  font-size: 24rpx;
+  color: #999;
+  background: rgba(0, 0, 0, 0.04);
+  padding: 8rpx 24rpx;
+  border-radius: 16rpx;
+  max-width: 80%;
+  text-align: center;
+}