@auto-ai/agent 2.1.220 → 2.1.222

package/dist/ws-test/team-chat.js

@@ -0,0 +1,760 @@
+/**
+ * 团队群聊 UI：服务端按 seq 追加，前端按到达顺序 append，不排序。
+ */
+;(function (global) {
+  'use strict'
+
+  var AVATAR_COLORS = ['#6366f1', '#0ea5e9', '#10b981', '#f59e0b', '#ef4444', '#8b5cf6', '#ec4899']
+
+  function escapeHtml(str) {
+    return String(str || '')
+      .replace(/&/g, '&')
+      .replace(/</g, '&lt;')
+      .replace(/>/g, '&gt;')
+      .replace(/"/g, '&quot;')
+  }
+
+  function hashColor(id) {
+    var s = String(id || '')
+    var h = 0
+    for (var i = 0; i < s.length; i++) h = (h * 31 + s.charCodeAt(i)) >>> 0
+    return AVATAR_COLORS[h % AVATAR_COLORS.length]
+  }
+
+  function renderMd(text) {
+    if (!text) return ''
+    try {
+      if (typeof marked !== 'undefined' && marked.parse) {
+        return marked.parse(text, { async: false })
+      }
+    } catch (e) {
+      return '<pre>' + escapeHtml(String(e)) + '</pre>'
+    }
+    return '<pre>' + escapeHtml(text) + '</pre>'
+  }
+
+  function normalizeUserPromptText(text) {
+    var trimmed = String(text || '').trim()
+    var stripped = trimmed.replace(/^@([a-zA-Z0-9_-]{1,64})\b\s*/, '').trim()
+    return stripped.length > 0 ? stripped : trimmed
+  }
+
+  function teamUserRoundKey(text) {
+    var trimmed = String(text || '').trim()
+    var match = trimmed.match(/^@([a-zA-Z0-9_-]{1,64})\b\s*/)
+    var mention = match ? match[1] : '*'
+    return mention + '\0' + normalizeUserPromptText(trimmed)
+  }
+
+  function buildRoundIdFromUser(user) {
+    return teamUserRoundKey(user.text || '') + '\0' + (user.ts || '')
+  }
+
+  function parseTimelineSeq(data) {
+    var raw = data && data.seq
+    if (typeof raw === 'number' && Number.isInteger(raw) && raw > 0) {
+      return raw
+    }
+    if (typeof raw === 'string' && /^\d+$/.test(raw)) {
+      var parsed = parseInt(raw, 10)
+      return parsed > 0 ? parsed : null
+    }
+    return null
+  }
+
+  function readPromptText(el) {
+    if (!el) return ''
+    if (typeof el.value === 'string') return el.value
+    return String(el.innerText || el.textContent || '')
+  }
+
+  function writePromptText(el, text) {
+    if (!el) return
+    if (typeof el.value === 'string') {
+      el.value = text
+      return
+    }
+    el.textContent = text
+  }
+
+  function setPromptDisabled(el, disabled) {
+    if (!el) return
+    if ('disabled' in el) {
+      el.disabled = disabled
+      return
+    }
+    el.contentEditable = disabled ? 'false' : 'true'
+    el.classList.toggle('is-disabled', !!disabled)
+    if (disabled) el.setAttribute('aria-disabled', 'true')
+    else el.removeAttribute('aria-disabled')
+  }
+
+  function TeamChat(opts) {
+    this.threadEl = opts.threadEl
+    this.promptEl = opts.promptEl
+    this.statusEl = opts.statusEl
+    this.sendBtn = opts.sendBtn
+    this.abortBtn = opts.abortBtn || null
+    this.clearBtn = opts.clearBtn || null
+    this.httpOrigin = opts.httpOrigin || window.location.origin
+    this.placeholderEl = opts.placeholderEl || null
+
+    this.socket = null
+    this.serverReady = false
+    this.turnActive = false
+    this.teamId = null
+    this.sessionId = null
+    this.idleHint = ''
+    this.hydrateGen = 0
+    this.replayInProgress = false
+    this.pendingTimeline = []
+    this.seenEventIds = new Set()
+    this.rows = []
+    this.seenSeq = new Set()
+    this.membersById = new Map()
+    this.activeQueryAgents = new Set()
+
+    setPromptDisabled(this.promptEl, true)
+
+    var self = this
+    if (this.sendBtn) {
+      this.sendBtn.addEventListener('click', function () {
+        self.sendPrompt()
+      })
+    }
+    if (this.abortBtn) {
+      this.abortBtn.addEventListener('click', function () {
+        self.abortTurn()
+      })
+    }
+    if (this.clearBtn) {
+      this.clearBtn.addEventListener('click', function () {
+        void self.clearChatHistory()
+      })
+    }
+    if (this.promptEl) {
+      this.promptEl.addEventListener('keydown', function (e) {
+        if (e.key === 'Enter' && !e.shiftKey) {
+          e.preventDefault()
+          self.sendPrompt()
+        }
+      })
+    }
+  }
+
+  TeamChat.prototype.setMembers = function (agents) {
+    this.membersById = new Map()
+    var list = Array.isArray(agents) ? agents : []
+    for (var i = 0; i < list.length; i++) {
+      var a = list[i]
+      if (!a) continue
+      var id = String(a.id || a.agentId || '').trim()
+      if (!id) continue
+      this.membersById.set(id, a)
+    }
+    this.render()
+  }
+
+  TeamChat.prototype.resolveSenderMeta = function (sourceAgent, role) {
+    if (role === 'user') {
+      return { label: '你', initial: '我', color: '#71717a' }
+    }
+    var id = String(sourceAgent || '').trim()
+    var member = id ? this.membersById.get(id) : null
+    var label = member && member.displayName ? String(member.displayName) : id || 'assistant'
+    var initial = (label.charAt(0) || id.charAt(0) || '?').toUpperCase()
+    return { label: label, initial: initial, color: hashColor(id || label) }
+  }
+
+  TeamChat.prototype.setStatus = function (text, kind) {
+    if (!this.statusEl) return
+    this.statusEl.textContent = text
+    this.statusEl.classList.remove('ready', 'err')
+    if (kind) this.statusEl.classList.add(kind)
+  }
+
+  TeamChat.prototype.setIdleHint = function (hint) {
+    this.idleHint = typeof hint === 'string' ? hint : ''
+    this.render()
+  }
+
+  TeamChat.prototype.syncTurnActive = function () {
+    this.turnActive = this.activeQueryAgents.size > 0
+    this.updateComposer()
+    if (this.rows.length > 0) this.render()
+  }
+
+  TeamChat.prototype.updateComposer = function () {
+    var disabled =
+      !this.teamId || !this.serverReady || this.turnActive || this.replayInProgress
+    setPromptDisabled(this.promptEl, disabled)
+    if (this.sendBtn) this.sendBtn.disabled = disabled
+    var wsOpen = this.socket && this.socket.readyState === WebSocket.OPEN
+    if (this.abortBtn) {
+      this.abortBtn.disabled = !wsOpen || !this.serverReady
+    }
+    if (this.clearBtn) {
+      this.clearBtn.disabled = !this.teamId || !this.serverReady || this.replayInProgress
+    }
+  }
+
+  TeamChat.prototype.disconnect = function () {
+    this.hydrateGen += 1
+    if (this.socket) {
+      try {
+        this.socket.close()
+      } catch (e) {
+        /* ignore */
+      }
+      this.socket = null
+    }
+    this.serverReady = false
+    this.turnActive = false
+    this.activeQueryAgents = new Set()
+    this.teamId = null
+    this.sessionId = null
+    this.idleHint = ''
+    this.resetMessages()
+    this.setStatus('未连接', '')
+    this.updateComposer()
+  }
+
+  TeamChat.prototype.resetMessages = function () {
+    this.rows = []
+    this.seenSeq = new Set()
+    this.seenEventIds = new Set()
+    this.pendingTimeline = []
+    this.render()
+  }
+
+  TeamChat.prototype.teamSessionId = function (teamId) {
+    return 'team-' + String(teamId || '').trim()
+  }
+
+  TeamChat.prototype.wsUrl = function () {
+    var proto = window.location.protocol === 'https:' ? 'wss:' : 'ws:'
+    return proto + '//' + window.location.host + '/ws/team?teamId=' + encodeURIComponent(this.teamId)
+  }
+
+  TeamChat.prototype.apiPath = function (path) {
+    var p = path.indexOf('/') === 0 ? path : '/' + path
+    try {
+      if (
+        typeof window !== 'undefined' &&
+        window.location &&
+        (window.location.protocol === 'http:' || window.location.protocol === 'https:') &&
+        this.httpOrigin === window.location.origin
+      ) {
+        return p
+      }
+    } catch (e) {
+      /* ignore */
+    }
+    return new URL(p, this.httpOrigin + '/').toString()
+  }
+
+  TeamChat.prototype.replayUrl = function () {
+    return this.apiPath('/api/teams/' + encodeURIComponent(this.teamId) + '/chat/replay')
+  }
+
+  TeamChat.prototype.connect = function (teamId) {
+    var tid = String(teamId || '').trim()
+    if (!tid) {
+      this.disconnect()
+      return
+    }
+    var sid = this.teamSessionId(tid)
+    if (this.teamId === tid && this.sessionId === sid && this.socket) {
+      return
+    }
+    this.disconnect()
+    this.teamId = tid
+    this.sessionId = sid
+    this.idleHint = ''
+    this.setStatus('连接中…', '')
+    this.updateComposer()
+
+    var self = this
+    var ws
+    try {
+      ws = new WebSocket(this.wsUrl())
+    } catch (e) {
+      this.setStatus('连接失败', 'err')
+      return
+    }
+    this.socket = ws
+
+    ws.onopen = function () {
+      self.setStatus('等待就绪…', '')
+    }
+    ws.onclose = function () {
+      if (self.socket === ws) {
+        self.serverReady = false
+        self.activeQueryAgents = new Set()
+        self.turnActive = false
+        self.setStatus('已断开', 'err')
+        self.updateComposer()
+      }
+    }
+    ws.onerror = function () {
+      if (self.socket === ws) {
+        self.setStatus('连接错误', 'err')
+      }
+    }
+    ws.onmessage = function (ev) {
+      var data
+      try {
+        data = JSON.parse(String(ev.data || ''))
+      } catch (e2) {
+        return
+      }
+      self.applyEnvelope(data)
+    }
+  }
+
+  TeamChat.prototype.resolveEnvelopeSourceAgent = function (data, payload) {
+    if (payload && typeof payload.sourceAgent === 'string' && payload.sourceAgent) {
+      return payload.sourceAgent
+    }
+    if (typeof data.agent_name === 'string' && data.agent_name) {
+      return data.agent_name
+    }
+    return 'assistant'
+  }
+
+  TeamChat.prototype.dropOptimisticUserRows = function (roundKey) {
+    var next = []
+    for (var i = 0; i < this.rows.length; i++) {
+      var row = this.rows[i]
+      if (!row) continue
+      if (row.optimistic && row.entry && row.entry.kind === 'user') {
+        if (teamUserRoundKey(row.entry.text || '') === roundKey) {
+          continue
+        }
+      }
+      next.push(row)
+    }
+    this.rows = next
+  }
+
+  TeamChat.prototype.ingestTimelineEnvelope = function (data) {
+    var payload = data.data && typeof data.data === 'object' ? data.data : {}
+    var entry = payload.entry
+    if (!entry || typeof entry !== 'object' || !entry.kind) return false
+    var seq = parseTimelineSeq(data)
+    if (seq == null) return false
+    if (this.seenSeq.has(seq)) return false
+    if (entry.kind === 'user') {
+      this.dropOptimisticUserRows(teamUserRoundKey(entry.text || ''))
+    }
+    this.seenSeq.add(seq)
+    this.rows.push({
+      seq: seq,
+      roundId:
+        typeof payload.roundId === 'string' && payload.roundId.trim()
+          ? payload.roundId.trim()
+          : entry.kind === 'user'
+            ? buildRoundIdFromUser(entry)
+            : '',
+      entry: entry,
+    })
+    return true
+  }
+
+  TeamChat.prototype.ingestTimelineEnvelopes = function (envelopes) {
+    if (!Array.isArray(envelopes)) return
+    for (var i = 0; i < envelopes.length; i++) {
+      this.ingestTimelineEnvelope(envelopes[i])
+    }
+  }
+
+  TeamChat.prototype.groupRowsIntoRounds = function () {
+    var rounds = []
+    var indexByRoundId = new Map()
+    for (var i = 0; i < this.rows.length; i++) {
+      var row = this.rows[i]
+      if (!row || !row.entry) continue
+      if (row.entry.kind === 'user') {
+        var roundId =
+          typeof row.roundId === 'string' && row.roundId.trim()
+            ? row.roundId.trim()
+            : buildRoundIdFromUser(row.entry)
+        var round = {
+          user: row.entry,
+          roundId: roundId,
+          items: [],
+        }
+        rounds.push(round)
+        indexByRoundId.set(roundId, rounds.length - 1)
+        continue
+      }
+      var rid =
+        typeof row.roundId === 'string' && row.roundId.trim() ? row.roundId.trim() : ''
+      var idx = rid ? indexByRoundId.get(rid) : undefined
+      if (idx == null && rounds.length > 0) {
+        idx = rounds.length - 1
+      }
+      if (idx != null) {
+        rounds[idx].items.push(row)
+      }
+    }
+    return rounds
+  }
+
+  TeamChat.prototype.applyEnvelope = function (data) {
+    if (!data || typeof data !== 'object' || data.protocolVersion !== 3) return
+    var type = typeof data.type === 'string' ? data.type : ''
+    var payload = data.data && typeof data.data === 'object' ? data.data : {}
+    var sourceAgent = this.resolveEnvelopeSourceAgent(data, payload)
+
+    if (type === 'team.timeline' && this.replayInProgress) {
+      this.pendingTimeline.push(data)
+      return
+    }
+    if (typeof data.eventId === 'string' && data.eventId) {
+      if (this.seenEventIds.has(data.eventId)) return
+      this.seenEventIds.add(data.eventId)
+    }
+
+    if (type === 'team.timeline') {
+      if (this.ingestTimelineEnvelope(data)) {
+        var timelineEntry = payload.entry
+        if (
+          timelineEntry &&
+          timelineEntry.kind === 'dispatch' &&
+          timelineEntry.toAgent
+        ) {
+          this.activeQueryAgents.add(String(timelineEntry.toAgent).trim())
+          this.syncTurnActive()
+        } else if (
+          timelineEntry &&
+          timelineEntry.kind === 'reply' &&
+          timelineEntry.fromAgent
+        ) {
+          this.activeQueryAgents.delete(String(timelineEntry.fromAgent).trim())
+          this.syncTurnActive()
+        } else {
+          this.render()
+        }
+      }
+      return
+    }
+
+    if (type === 'turn.terminal') {
+      this.activeQueryAgents.delete(sourceAgent)
+      this.syncTurnActive()
+      return
+    }
+
+    if (type === 'team.chat.cleared') {
+      this.activeQueryAgents = new Set()
+      this.syncTurnActive()
+      this.resetMessages()
+      return
+    }
+
+    if (type === 'query.progress') {
+      var phase = typeof payload.phase === 'string' ? payload.phase : ''
+      if (phase && phase !== 'idle') {
+        this.activeQueryAgents.add(sourceAgent)
+      } else {
+        this.activeQueryAgents.delete(sourceAgent)
+      }
+      this.syncTurnActive()
+      return
+    }
+
+    if (type === 'session.ready') {
+      this.serverReady = true
+      this.setStatus('已就绪', 'ready')
+      void this.hydrateHistory()
+      this.updateComposer()
+      return
+    }
+
+    if (type === 'session.error') {
+      var errMsg =
+        payload && typeof payload.message === 'string' ? payload.message : 'unknown'
+      this.setStatus('错误: ' + errMsg, 'err')
+      this.activeQueryAgents = new Set()
+      this.syncTurnActive()
+    }
+  }
+
+  TeamChat.prototype.flushPendingTimeline = function () {
+    this.ingestTimelineEnvelopes(this.pendingTimeline.splice(0))
+  }
+
+  TeamChat.prototype.hydrateHistory = async function () {
+    if (!this.teamId) return
+    var gen = ++this.hydrateGen
+    var wasReady = this.serverReady
+    var hydrateError = ''
+    this.replayInProgress = true
+    this.pendingTimeline = []
+    this.resetMessages()
+    try {
+      var r = await fetch(this.replayUrl())
+      if (gen !== this.hydrateGen) return
+      var contentType = (r.headers && r.headers.get('content-type')) || ''
+      if (!r.ok) {
+        hydrateError = '回放失败 HTTP ' + r.status
+      } else if (contentType.indexOf('json') < 0) {
+        hydrateError = '回放接口未返回 JSON，请确认 WS 服务已更新并重启'
+      } else {
+        var body = await r.json()
+        var envelopes = Array.isArray(body.envelopes) ? body.envelopes : []
+        this.ingestTimelineEnvelopes(envelopes)
+      }
+    } catch (e) {
+      hydrateError = '回放失败: ' + String(e && e.message ? e.message : e)
+    } finally {
+      if (gen === this.hydrateGen) {
+        this.replayInProgress = false
+        this.flushPendingTimeline()
+        this.render()
+        if (wasReady) {
+          this.serverReady = true
+          if (hydrateError) {
+            this.setStatus(hydrateError, 'err')
+          } else {
+            this.setStatus('已就绪', 'ready')
+          }
+        }
+        this.updateComposer()
+      } else {
+        this.replayInProgress = false
+      }
+    }
+  }
+
+  TeamChat.prototype.sendPrompt = function () {
+    if (!this.socket || this.socket.readyState !== WebSocket.OPEN) return
+    if (!this.serverReady || this.turnActive) return
+    var text = readPromptText(this.promptEl).trim()
+    if (!text) return
+    var user = { kind: 'user', text: text, ts: new Date().toISOString() }
+    var roundId = buildRoundIdFromUser(user)
+    this.rows.push({ roundId: roundId, entry: user, optimistic: true })
+    this.render()
+    this.socket.send(JSON.stringify({ type: 'prompt', text: text }))
+    writePromptText(this.promptEl, '')
+    this.updateComposer()
+  }
+
+  TeamChat.prototype.abortTurn = function () {
+    if (!this.socket || this.socket.readyState !== WebSocket.OPEN) return
+    if (!this.serverReady) return
+    this.socket.send(JSON.stringify({ type: 'abort' }))
+  }
+
+  TeamChat.prototype.clearChatHistory = async function () {
+    if (!this.teamId || !this.serverReady) return
+    if (
+      typeof window !== 'undefined' &&
+      window.confirm &&
+      !window.confirm('确定清空该团队的聊天记录？此操作不可恢复。')
+    ) {
+      return
+    }
+    try {
+      var r = await fetch(
+        this.apiPath('/api/teams/' + encodeURIComponent(this.teamId) + '/chat'),
+        { method: 'DELETE' },
+      )
+      if (!r.ok) {
+        var errBody = {}
+        try {
+          errBody = await r.json()
+        } catch (e2) {
+          /* ignore */
+        }
+        throw new Error(
+          (errBody && errBody.message) || '清理失败 HTTP ' + r.status,
+        )
+      }
+      this.activeQueryAgents = new Set()
+      this.syncTurnActive()
+      this.resetMessages()
+      this.setStatus('已就绪', 'ready')
+      this.updateComposer()
+    } catch (e) {
+      this.setStatus(
+        '清理失败: ' + String(e && e.message ? e.message : e),
+        'err',
+      )
+    }
+  }
+
+  TeamChat.prototype.render = function () {
+    if (!this.threadEl) return
+    this.threadEl.innerHTML = ''
+
+    if (this.rows.length === 0) {
+      var ph = document.createElement('div')
+      ph.className = 'chat-placeholder'
+      ph.textContent =
+        this.idleHint ||
+        (this.teamId ? '在下方输入消息，向团队发起协作' : '选择团队以开始群聊')
+      this.threadEl.appendChild(ph)
+      return
+    }
+
+    var rounds = this.groupRowsIntoRounds()
+    for (var i = 0; i < rounds.length; i++) {
+      this.threadEl.appendChild(this.buildRoundBlock(rounds[i], i === rounds.length - 1))
+    }
+
+    this.threadEl.scrollTop = this.threadEl.scrollHeight
+  }
+
+  TeamChat.prototype.buildRoundBlock = function (round, isLast) {
+    var wrap = document.createElement('section')
+    wrap.className = 'chat-round' + (isLast ? ' chat-round--active' : '')
+
+    var thread = document.createElement('div')
+    thread.className = 'chat-round-thread'
+
+    thread.appendChild(this.buildUserBubble(round.user))
+
+    var items = round.items || []
+    for (var j = 0; j < items.length; j++) {
+      var entry = items[j].entry
+      if (!entry) continue
+      if (entry.kind === 'dispatch') {
+        thread.appendChild(this.buildDispatchBubble(entry))
+      } else if (entry.kind === 'reply' && entry.text) {
+        thread.appendChild(this.buildReplyBubble(entry.text, entry.fromAgent))
+      }
+    }
+
+    if (isLast && this.turnActive) {
+      var self = this
+      this.activeQueryAgents.forEach(function (agentId) {
+        var hasContent = items.some(function (row) {
+          var e = row.entry
+          if (!e) return false
+          if (e.kind === 'reply' && e.fromAgent === agentId) return true
+          if (e.kind === 'dispatch' && e.fromAgent === agentId) return true
+          return false
+        })
+        if (!hasContent) {
+          thread.appendChild(self.buildTypingBubble(agentId))
+        }
+      })
+    }
+
+    wrap.appendChild(thread)
+    return wrap
+  }
+
+  TeamChat.prototype.buildUserBubble = function (user) {
+    return this.buildMessageRow(String(user.text || '').trim(), 'user', 'user', false)
+  }
+
+  TeamChat.prototype.buildDispatchBubble = function (entry) {
+    var fromMeta = this.resolveSenderMeta(entry.fromAgent, 'assistant')
+    var toId = String(entry.toAgent || '').trim()
+    var mention = toId ? '@' + toId : ''
+    var bodyText = mention
+      ? mention +
+        (entry.prompt ? ' ' + entry.prompt : entry.description ? ' ' + entry.description : '')
+      : entry.prompt || entry.description || '调度队员'
+
+    var wrap = document.createElement('div')
+    wrap.className = 'chat-msg-row chat-msg-row--dispatch'
+
+    var avatar = document.createElement('span')
+    avatar.className = 'chat-msg-avatar'
+    avatar.textContent = fromMeta.initial
+    avatar.style.background = fromMeta.color
+
+    var bodyWrap = document.createElement('div')
+    bodyWrap.className = 'chat-msg-body-wrap'
+
+    var sender = document.createElement('div')
+    sender.className = 'chat-msg-sender'
+    sender.textContent = fromMeta.label
+
+    var body = document.createElement('div')
+    body.className = 'chat-dispatch-card'
+    body.textContent = bodyText
+
+    bodyWrap.appendChild(sender)
+    bodyWrap.appendChild(body)
+    wrap.appendChild(avatar)
+    wrap.appendChild(bodyWrap)
+    return wrap
+  }
+
+  TeamChat.prototype.buildReplyBubble = function (text, fromAgent) {
+    return this.buildMessageRow(text, 'assistant', fromAgent, true)
+  }
+
+  TeamChat.prototype.buildTypingBubble = function (fromAgent) {
+    var meta = this.resolveSenderMeta(fromAgent, 'assistant')
+    var wrap = document.createElement('div')
+    wrap.className = 'chat-msg-row chat-msg-row--assistant chat-msg-row--typing'
+
+    var avatar = document.createElement('span')
+    avatar.className = 'chat-msg-avatar'
+    avatar.textContent = meta.initial
+    avatar.style.background = meta.color
+
+    var bodyWrap = document.createElement('div')
+    bodyWrap.className = 'chat-msg-body-wrap'
+
+    var sender = document.createElement('div')
+    sender.className = 'chat-msg-sender'
+    sender.textContent = meta.label
+
+    var body = document.createElement('div')
+    body.className = 'chat-typing-body'
+    body.textContent = '正在输入…'
+
+    bodyWrap.appendChild(sender)
+    bodyWrap.appendChild(body)
+    wrap.appendChild(avatar)
+    wrap.appendChild(bodyWrap)
+    return wrap
+  }
+
+  TeamChat.prototype.buildMessageRow = function (text, role, sourceAgent, isMarkdown) {
+    var meta = this.resolveSenderMeta(sourceAgent, role)
+    var wrap = document.createElement('div')
+    wrap.className =
+      'chat-msg-row ' + (role === 'user' ? 'chat-msg-row--user' : 'chat-msg-row--assistant')
+
+    var avatar = document.createElement('span')
+    avatar.className = 'chat-msg-avatar'
+    avatar.textContent = meta.initial
+    avatar.style.background = meta.color
+
+    var bodyWrap = document.createElement('div')
+    bodyWrap.className = 'chat-msg-body-wrap'
+
+    var sender = document.createElement('div')
+    sender.className = 'chat-msg-sender'
+    sender.textContent = meta.label
+
+    var body = document.createElement('div')
+    if (role === 'user') {
+      body.className = 'chat-user-body'
+      body.textContent = text
+    } else if (isMarkdown) {
+      body.className = 'chat-md-body'
+      body.innerHTML = renderMd(text)
+    } else {
+      body.className = 'chat-user-body'
+      body.textContent = text
+    }
+
+    bodyWrap.appendChild(sender)
+    bodyWrap.appendChild(body)
+    wrap.appendChild(avatar)
+    wrap.appendChild(bodyWrap)
+    return wrap
+  }
+
+  global.TeamChat = TeamChat
+})(typeof window !== 'undefined' ? window : global)